/* あなくろ会員アプリ — スタイル（デモ v2 正本から分割）。
   デザイントークン（:root / [data-theme=light]）は #03§3-1-2 により不変。
   唯一の例外：--sans の値から "Noto Sans JP" を除去（#03§3-1-4 訂正・システムフォントに寄せる）。
   変数名・その他の値は1文字も変更していない。 */

/* ローカル同梱フォント（§3-1-4訂正）:
   - DotGothic16 = ブランドの核のみ同梱（latin + japanese）。
   - Noto Sans JP は同梱しない（iOS=ヒラギノ / Android=Noto がシステムに在る＝再取得しない）。
   - IBM Plex Mono は Latin subset のみ（数字表示用・CJK不要）。
   - 全て font-display:swap ＝ フォントは描画をブロックしない ＝ QR表示を絶対に遅らせない。
   - Service Worker はこれらを precache しない（初回はswapフォールバック、取得後にキャッシュ）。 */
@font-face{
  font-family:"DotGothic16";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/dotgothic16-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+25B6,U+2600,U+263E;
}
@font-face{
  font-family:"DotGothic16";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/dotgothic16-japanese-400-normal.woff2") format("woff2");
  unicode-range:U+3000-303F,U+3040-309F,U+30A0-30FF,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FF00-FFEF;
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+2000-206F,U+2122;
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;
  src:url("/assets/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+2000-206F,U+2122;
}

/* ===== デザイントークン（正本・全色はここだけで管理／不変） ===== */
:root{
  --bg:#0D0912; --panel:#160F1C; --card:#1C1324; --card2:#251A30;
  --border:#3A2A45; --track:#2A2033;
  --pink:#F58FB4; --pinkS:#E0568A; --pinkD:#8E2E52; --pinkGlow:rgba(224,86,138,.35);
  --text:#F7EAF1; --muted:#C9A9BB; --dim:#8A7280;
  --gold:#F4C04D; --good:#7FD49B;
  --qrbg:#FBEAF0; --qrfg:#17111E;
  --frame:#1F1726; --shadow:rgba(0,0,0,.55);
  --dot:"DotGothic16",monospace;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --sans:-apple-system,"Hiragino Sans",sans-serif;
}
[data-theme="light"]{
  --bg:#FBF2F6; --panel:#FFFFFF; --card:#FFFFFF; --card2:#FDEDF3;
  --border:#F0C7D8; --track:#F3DCE6;
  --pink:#D14A7E; --pinkS:#D14A7E; --pinkD:#B93A69; --pinkGlow:rgba(209,74,126,.22);
  --text:#3A2440; --muted:#8A6478; --dim:#B295A3;
  --gold:#D89B1E; --good:#2E9E5B;
  --qrbg:#FFFFFF; --qrfg:#3A2440;
  --frame:#F3DCE6; --shadow:rgba(120,60,90,.18);
}
*{box-sizing:border-box;}

/* ===== 実機フルスクリーン（デモのphoneフレーム装飾は撤去・§3-1-3） ===== */
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
  min-height:100vh;min-height:100dvh;transition:background .25s,color .25s;}
.phone{width:100%;max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;
  background:var(--panel);overflow:hidden;position:relative;
  padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);}

.brand{padding:12px 16px 12px;display:flex;justify-content:space-between;align-items:center;gap:8px;}
.logo{font-family:var(--dot);color:var(--pink);font-size:19px;letter-spacing:2px;
  text-shadow:0 0 12px var(--pinkGlow);}
.brand-right{display:flex;align-items:center;gap:8px;}
.pill{font-family:var(--dot);background:var(--pinkD);color:#FBEAF0;font-size:11px;
  padding:3px 12px;border-radius:14px;letter-spacing:1px;}
.theme-btn{background:var(--card2);border:1px solid var(--border);color:var(--muted);
  border-radius:14px;font-size:11px;padding:3px 10px;cursor:pointer;font-family:inherit;}

.screen{padding:12px 14px 16px;min-height:470px;background:var(--bg);}
.panel-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px;margin-bottom:12px;}
.center{text-align:center;}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;}
.lbl{font-size:11px;color:var(--muted);}
.eyebrow{font-family:var(--dot);font-size:11px;color:var(--pink);letter-spacing:2px;margin:0 0 8px;}

/* ===== 会員証：夜空ヘッダ（月＝情景として静的配置。進捗ラベル/数値は付けない・§3-2-4/#04） ===== */
.skywin{border-radius:16px 16px 0 0;overflow:hidden;position:relative;line-height:0;}
.cardbody{background:var(--card);border:1px solid var(--border);border-top:0;border-radius:0 0 16px 16px;
  padding:14px;margin-bottom:12px;}
.idrow{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.idrow .name{font-size:15px;font-weight:700;}
.qrwrap{text-align:center;}
.qrbox{background:var(--qrbg);border-radius:14px;padding:13px;display:inline-block;
  box-shadow:0 0 0 3px var(--pinkGlow);line-height:0;}
.qrbox canvas{display:block;border-radius:2px;}
.memno{margin:10px 0 0;font-size:11px;color:var(--muted);}
.memno .num{font-size:13px;color:var(--text);letter-spacing:1px;}
.show-staff{color:var(--pink);font-size:12px;margin:6px 0 0;}
.offline-note{font-size:11px;color:var(--dim);margin:6px 0 0;}

.row3{display:flex;gap:8px;margin-bottom:12px;}
.stat{flex:1;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:9px 6px;text-align:center;}
.stat .k{font-size:10px;color:var(--muted);margin:0;letter-spacing:1px;}
.stat .v{font-family:var(--mono);font-size:19px;font-weight:600;margin:3px 0 0;}

.teaser{display:block;width:100%;background:var(--card2);border:1px solid var(--border);border-radius:12px;
  padding:11px 12px;text-align:center;color:var(--pink);font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;}
.teaser:active{transform:translateY(1px);}
/* v1で押せない演出ボタン（§3-3）：ディム＋非活性。文言のみ表示。 */
.dim{opacity:.45;pointer-events:none;cursor:default;}

/* ===== ミッション（デモ静的表示のまま） ===== */
.mtabs{display:flex;gap:6px;margin-bottom:12px;}
.mtab{flex:1;text-align:center;font-family:var(--dot);font-size:11px;padding:7px 0;border-radius:9px;
  background:var(--card);color:var(--muted);border:1px solid var(--border);cursor:pointer;}
.mtab.on{background:var(--pinkD);color:#FBEAF0;border-color:var(--pinkD);}
.almost{border:1px solid var(--pinkS);box-shadow:0 0 10px var(--pinkGlow);}
.almost .eyebrow{margin-bottom:4px;}
.mission{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--track);}
.mission:last-child{border-bottom:0;}
.mi{width:34px;height:34px;border-radius:9px;background:var(--card2);display:flex;align-items:center;justify-content:center;font-size:14px;flex:0 0 auto;}
.mtxt{flex:1;min-width:0;}
.mtxt .t{font-size:13px;margin:0;font-weight:500;}
.mtxt .s{font-size:11px;color:var(--dim);margin:2px 0 0;}
.mtxt .s.hot{color:var(--pink);font-weight:700;}
.minibar{height:5px;background:var(--track);border-radius:8px;margin-top:5px;overflow:hidden;}
.minibar>i{display:block;height:100%;background:var(--pinkS);border-radius:8px;}
.rew{font-family:var(--mono);color:var(--pink);font-size:13px;flex:0 0 auto;}
.done{color:var(--good);}

/* ===== 推し（デモ静的表示のまま） ===== */
.scene{border:1px solid var(--border);border-radius:16px;overflow:hidden;margin-bottom:12px;position:relative;line-height:0;}
.scene .tap{position:absolute;right:8px;bottom:8px;background:rgba(13,9,18,.7);color:#C9A9BB;
  font-size:10px;padding:3px 9px;border-radius:10px;line-height:1.4;}
.oshi-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;}
.oshi-head .nm{font-size:18px;font-weight:700;}
.oshi-head .lv{font-size:12px;color:var(--muted);}
.oshi-head .lv .num{color:var(--pink);font-weight:600;}
.bigbar{height:10px;background:var(--track);border-radius:20px;overflow:hidden;margin-top:6px;}
.bigbar>i{display:block;height:100%;background:linear-gradient(90deg,var(--pinkD),var(--pinkS));border-radius:20px;}
.msg{background:var(--card2);border-radius:12px;padding:10px 12px;margin-top:12px;}
.msg p{margin:0;font-size:13px;color:var(--pink);line-height:1.7;}
.msg small{color:var(--dim);font-size:10px;}

/* ===== ギフト（デモ静的表示のまま） ===== */
.gift{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--track);}
.gift:last-child{border-bottom:0;}
.gi{width:40px;height:40px;border-radius:10px;background:var(--card2);display:flex;align-items:center;justify-content:center;font-size:16px;flex:0 0 auto;}
.gn{flex:1;font-size:13px;font-weight:500;}
.gn small{display:block;color:var(--dim);font-size:11px;margin-top:2px;font-weight:400;}
.cost{font-family:var(--mono);color:var(--pink);font-size:13px;}
.note{background:var(--card2);border:1px dashed var(--pinkD);border-radius:10px;padding:10px 12px;
  font-size:11px;color:var(--muted);line-height:1.7;margin-top:12px;}
.note b{color:var(--pink);}

/* ===== 初回ようこそ演出（§3-7・全画面オーバーレイ） ===== */
.welcome{position:fixed;inset:0;z-index:40;background:var(--bg);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px;}
.welcome.hide{display:none;}
.welcome .wlogo{font-family:var(--dot);color:var(--pink);font-size:26px;letter-spacing:3px;text-shadow:0 0 16px var(--pinkGlow);}
.welcome .wstage{position:relative;height:120px;display:flex;align-items:center;justify-content:center;}
.welcome .wpt{font-family:var(--mono);font-size:30px;font-weight:600;color:var(--gold);margin:0;}
.welcome .wsub{font-size:13px;color:var(--muted);margin:0;}
.welcome .wskip{margin-top:10px;background:var(--pinkD);color:#FBEAF0;border:none;border-radius:10px;
  padding:9px 26px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;}

/* ===== 演出（火花・月ロール）— lucky.js が使う ===== */
.spark{position:absolute;width:5px;height:5px;background:var(--gold);pointer-events:none;}
@keyframes burst{from{transform:translate(0,0);opacity:1;}to{transform:translate(var(--dx),var(--dy));opacity:0;}}
.spark.go{animation:burst .8s ease-out forwards;}
@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.06);}}
.rolling{animation:pulse .5s ease-in-out infinite;}

/* ===== タブバー ===== */
.tabbar{background:var(--panel);border-top:2px solid var(--track);display:flex;
  padding-bottom:env(safe-area-inset-bottom);}
.tab{flex:1;text-align:center;padding:9px 0 13px;color:var(--dim);font-size:9px;cursor:pointer;
  border:none;background:none;font-family:inherit;}
.tab .ico{display:block;font-size:15px;margin:0 auto 2px;filter:grayscale(1) opacity(.55);}
.tab.on{color:var(--pink);}
.tab.on .ico{filter:none;}
.hide{display:none;}
.small-note{font-size:11px;color:var(--dim);margin:10px 2px 0;line-height:1.7;}
:focus-visible{outline:2px solid var(--pink);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}