:root {
  --ink:#111820;
  --ink-soft:#1d2935;
  --paper:#f2e2bd;
  --paper-light:#fff6dd;
  --paper-dark:#c9a973;
  --orange:#ef7f2c;
  --orange-hot:#ffad3b;
  --red:#b83f38;
  --blue:#4fa4c7;
  --cyan:#71d3dc;
  --green:#63865b;
  --shadow:0 18px 60px rgba(4,10,16,.48);
  --line:rgba(255,240,201,.17);
}

* { box-sizing:border-box; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; }
body {
  font-family:"Microsoft YaHei UI","Noto Sans SC",system-ui,sans-serif;
  color:#fff8e6;
  background:#0c1219;
  user-select:none;
}
button, input, select { font:inherit; }
button { color:inherit; }

.app {
  position:relative;
  width:100%; height:100%;
  min-width:320px; min-height:500px;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(238,122,37,.12), transparent 28%),
    linear-gradient(140deg,#172632 0%,#0b1118 56%,#172029 100%);
}

.app::before {
  content:""; position:absolute; inset:0; z-index:-3; opacity:.32;
  background-image:
    repeating-linear-gradient(110deg,transparent 0 18px,rgba(255,255,255,.016) 18px 19px),
    repeating-linear-gradient(15deg,transparent 0 29px,rgba(0,0,0,.12) 29px 31px);
}

.ambient { position:absolute; z-index:-2; border-radius:50%; filter:blur(60px); opacity:.22; pointer-events:none; }
.ambient-a { width:38vw; height:38vw; left:-12vw; bottom:-17vw; background:#287b91; }
.ambient-b { width:40vw; height:40vw; right:-16vw; top:-22vw; background:#b54e2c; }

.screen { display:none; position:absolute; inset:0; }
.screen.active { display:flex; }
.eyebrow { margin:0 0 8px; color:#e9bd72; font-size:12px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; }

/* Main menu */
.menu-screen {
  padding:clamp(28px,4.5vw,70px);
  align-items:stretch; justify-content:space-between; gap:5vw;
  background:
    linear-gradient(90deg,rgba(7,12,17,.15),rgba(7,12,17,.78) 70%),
    url("assets/home-v3.webp") center/cover no-repeat;
}
.menu-screen::after {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,rgba(8,14,20,.1),rgba(8,14,20,.18) 55%,rgba(8,14,20,.92));
}
.hero-panel { position:relative; flex:1 1 55%; display:flex; align-items:flex-start; padding-top:2vh; }
.brand-mark {
  flex:none; width:72px; height:72px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 35% 30%,#ffb046,#d74a28 65%,#6d211d);
  border:3px solid #251811; box-shadow:0 0 0 4px #e6c188,0 12px 30px #0008;
  font-family:serif; font-size:34px; font-weight:900; transform:rotate(-7deg);
}
.brand-mark::after { content:""; position:absolute; width:90px; height:16px; border-top:2px solid #f2cc84; transform:rotate(-34deg); opacity:.7; }
.hero-copy { position:relative; z-index:2; max-width:610px; padding:10px 0 0 28px; text-shadow:0 4px 20px #000; }
.hero-copy h1 { margin:0; line-height:.9; letter-spacing:.04em; }
.hero-copy h1 span {
  display:block; font-family:KaiTi,"STKaiti",serif; font-size:clamp(60px,7vw,112px); font-weight:900;
  color:#fff3d1; -webkit-text-stroke:1px rgba(30,14,9,.65);
  filter:drop-shadow(5px 7px 0 #5f2019);
}
.hero-copy h1 small { display:block; margin:20px 0 0 8px; color:#f4a238; font-size:clamp(20px,2.2vw,36px); letter-spacing:.42em; }
.hero-subtitle { max-width:540px; margin:24px 0 0 8px; color:#e9dbc4; font-size:15px; line-height:1.9; letter-spacing:.04em; }

.hero-characters { position:absolute; left:5%; right:-8%; bottom:4%; height:48%; opacity:.58; pointer-events:none; }
.hero-sun { position:absolute; left:37%; top:4%; width:210px; height:210px; border-radius:50%; background:#bd3d2d; filter:blur(.4px); box-shadow:0 0 55px #bd3d2d66; }
.hero-ninja { position:absolute; bottom:0; width:210px; height:240px; filter:drop-shadow(0 18px 12px #0008); }
.hero-ninja::before { content:""; position:absolute; left:48px; top:4px; width:110px; height:105px; border-radius:52% 48% 46% 54%; background:#121a22; border:6px solid #dbc08b; }
.hero-ninja::after { content:""; position:absolute; left:20px; top:95px; width:170px; height:145px; border-radius:60% 60% 18% 18%; background:#151f29; border:5px solid #dbc08b; }
.hero-ninja i { position:absolute; z-index:2; left:46px; top:48px; width:116px; height:25px; background:#647888; border:4px solid #141a21; transform:rotate(-4deg); }
.hero-ninja b { position:absolute; z-index:3; left:82px; top:49px; font-family:serif; font-size:17px; color:#192029; }
.hero-ninja-left { left:6%; transform:rotate(-8deg); }
.hero-ninja-left::before { background:linear-gradient(140deg,#ed8b2f 0 42%,#1a242e 42%); }
.hero-ninja-left::after { background:linear-gradient(110deg,#e9812a 0 50%,#172330 50%); }
.hero-ninja-right { right:8%; transform:rotate(8deg) scale(.94); }
.hero-ninja-right::before { background:linear-gradient(140deg,#20283b 0 45%,#10151d 45%); }
.hero-ninja-right::after { background:linear-gradient(110deg,#5f6ba8 0 48%,#111a29 48%); }
.hero-slash { position:absolute; left:23%; top:48%; width:58%; height:5px; background:#f6d48c; transform:rotate(-9deg); box-shadow:0 0 20px #f6d48c; }

.menu-column { position:relative; z-index:4; flex:0 0 min(410px,35vw); display:flex; flex-direction:column; justify-content:center; gap:15px; }
.btn {
  border:0; cursor:pointer; position:relative; overflow:hidden;
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
.btn::before { content:""; position:absolute; inset:2px; border:1px solid rgba(255,255,255,.16); border-radius:inherit; pointer-events:none; }
.btn:hover { transform:translateY(-3px); filter:brightness(1.08); }
.btn:active { transform:translateY(1px) scale(.985); }
.btn-primary {
  min-height:72px; padding:14px 28px; border-radius:12px;
  background:linear-gradient(180deg,#f6a33c,#d85a26); box-shadow:0 7px 0 #77311e,0 15px 28px #0008;
  color:#21150f; font-weight:900;
}
.btn-primary b { display:block; font-size:23px; letter-spacing:.08em; }
.btn-primary small { display:block; margin-top:4px; font-size:11px; opacity:.72; }
.btn-battle { display:flex; align-items:center; justify-content:center; gap:20px; min-height:92px; }
.btn-icon { font-size:40px; }
.menu-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.btn-secondary {
  min-height:76px; display:flex; align-items:center; justify-content:center; gap:12px; padding:14px;
  border:1px solid #60717d; border-radius:10px;
  background:linear-gradient(180deg,rgba(46,62,74,.96),rgba(22,32,42,.96)); box-shadow:0 5px 0 #091018,0 12px 26px #0006;
}
.btn-secondary span { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#d9c190; color:#17212a; font-family:serif; font-weight:900; }
.btn-secondary b { font-size:14px; letter-spacing:.08em; }
.btn-secondary.wide { width:100%; }
.btn-ghost { min-height:50px; padding:12px 20px; color:#ded2bc; border:1px solid #52616c; border-radius:9px; background:#1d2831; }
.btn-ghost.wide { width:100%; }
.menu-footer { position:absolute; left:4.5vw; right:4.5vw; bottom:18px; display:flex; justify-content:space-between; color:#8997a1; font-size:11px; letter-spacing:.05em; }

/* Shared panels */
.panel-screen { flex-direction:column; padding:26px clamp(35px,6vw,100px) 44px; background:linear-gradient(150deg,#14222d,#0b1118 66%); }
.panel-header { flex:none; height:76px; display:grid; grid-template-columns:64px 1fr auto; align-items:center; gap:18px; border-bottom:1px solid var(--line); }
.panel-header h2 { margin:0; font-family:KaiTi,serif; font-size:29px; letter-spacing:.08em; }
.panel-header .eyebrow { margin-bottom:2px; }
.icon-btn,.round-btn { cursor:pointer; border:1px solid #61717a; background:#1e2b35; box-shadow:0 4px 0 #081017; }
.icon-btn { width:48px; height:48px; border-radius:10px; font-size:25px; }
.icon-btn:hover,.round-btn:hover { filter:brightness(1.25); }
.panel-badge { padding:8px 14px; color:#1a2025; background:#e7c17c; border-radius:20px; font-weight:900; font-size:13px; }
.panel-content { flex:1; overflow:auto; padding:26px 2px 6px; scrollbar-color:#a07644 #111a22; }
.panel-intro { display:flex; align-items:center; justify-content:space-between; gap:30px; margin-bottom:20px; padding:18px 22px; border:1px solid var(--line); border-radius:12px; background:#17242e; }
.panel-intro h3 { margin:0 0 6px; color:#f2d89e; }
.panel-intro p { margin:0; color:#aab6be; font-size:13px; line-height:1.7; }
.avg-cost { display:flex; gap:10px; align-items:center; white-space:nowrap; }
.avg-cost i,.chakra-cost { display:grid; place-items:center; border-radius:50% 50% 50% 12%; transform:rotate(45deg); background:linear-gradient(135deg,#b878e0,#643aa8); color:white; box-shadow:inset 0 0 0 2px #e7c5ff99,0 3px 8px #0008; }
.avg-cost i { width:39px; height:39px; font-style:normal; }
.avg-cost i span,.chakra-cost span { transform:rotate(-45deg); font-weight:900; }

.card-grid { display:grid; grid-template-columns:repeat(4,minmax(155px,1fr)); gap:22px 16px; padding:4px 3px 26px; }
.collection-card { cursor:pointer; position:relative; min-height:250px; padding:8px; border:0; border-radius:18px; background:#0d171f; box-shadow:0 10px 24px #0008; transition:transform .16s,filter .16s; }
.collection-card:hover { transform:translateY(-6px) rotate(-.4deg); filter:brightness(1.08); }
.collection-card.in-deck { box-shadow:0 0 0 3px #f2a64e,0 13px 28px #000a; }
.collection-card.in-deck::after { content:"✓ 编队中"; position:absolute; z-index:8; right:2px; top:2px; padding:5px 8px; border:2px solid #ffe0a2; border-radius:8px; background:#dd7e28; color:#21170e; font-size:9px; font-weight:900; box-shadow:0 3px 7px #0008; }
.card-visual { position:relative; aspect-ratio:3/4; overflow:hidden; border:5px solid #9a7445; border-radius:14px 14px 11px 11px; background:#17232c; box-shadow:inset 0 0 0 2px #e9d2a1,0 5px 0 #24180f; }
.card-visual::before { content:""; position:absolute; z-index:5; inset:2px; pointer-events:none; border:1px solid #fff4c766; border-radius:7px; }
.card-visual[data-rarity="传说"] { border-color:#d2a94d; box-shadow:inset 0 0 0 2px #fff0a8,0 5px 0 #5e4219,0 0 18px #f1bd4b40; }
.card-visual[data-rarity="史诗"] { border-color:#9d67bc; box-shadow:inset 0 0 0 2px #e1b5f0,0 5px 0 #3e2450; }
.card-visual[data-rarity="稀有"] { border-color:#438ba8; box-shadow:inset 0 0 0 2px #9addf1,0 5px 0 #1e4656; }
.card-rarity-edge { position:absolute; z-index:4; inset:0; pointer-events:none; background:linear-gradient(115deg,#ffffff38 0 8%,transparent 18% 74%,#0006); }
.card-art { position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at 50% 34%,color-mix(in srgb,var(--card-color) 70%,white),var(--card-color) 42%,#17212a 76%); }
.card-art img { width:100%; height:100%; display:block; object-fit:cover; object-position:center 28%; transform:scale(1.025); }
.card-art-glow { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 58%,#121b22 100%),radial-gradient(circle at 50% 18%,#fff5 0,transparent 40%); }
.card-nameplate { position:absolute; z-index:6; left:5px; right:5px; bottom:9%; min-height:17%; display:flex; flex-direction:column; justify-content:center; padding:5px 8px; text-align:center; color:#fff1d0; border:2px solid #342315; border-radius:5px; background:linear-gradient(180deg,#55402edc,#211b19f2); box-shadow:0 2px 5px #0008; }
.card-nameplate b { font-size:13px; line-height:1.15; text-shadow:0 2px 2px #000; }
.card-nameplate small { margin-top:3px; color:#d9c6a5; font-size:8px; }
.card-level { position:absolute; z-index:6; left:4px; right:4px; bottom:3px; overflow:hidden; color:#cdbd9e; font-size:8px; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.card-visual .chakra-cost { position:absolute; z-index:7; left:-1px; top:-1px; width:34px; height:34px; border:2px solid #e7ceff; font-size:14px; font-style:normal; }
.collection-meta { display:flex; gap:8px; align-items:flex-start; padding:11px 5px 2px; color:#97a4ac; font-size:9px; line-height:1.45; }
.collection-meta > :first-child { flex:none; font-weight:900; }.collection-meta > :last-child { display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.rarity-传说 { color:#e9b657; }.rarity-史诗 { color:#bd8edd; }.rarity-稀有 { color:#63bdd4; }

.codex-layout { display:grid; grid-template-columns:minmax(260px,36%) 1fr; gap:24px; min-height:100%; }
.codex-list { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; align-content:start; }
.codex-tab { cursor:pointer; display:flex; gap:10px; align-items:center; padding:10px; color:#c9d1d6; border:1px solid #354650; border-radius:9px; background:#16232d; }
.codex-tab.active { border-color:#e89b3a; background:#25313a; color:#fff2d3; }
.codex-tab i { display:grid; place-items:center; width:38px; height:38px; flex:none; overflow:hidden; border:2px solid #c9a66d; border-radius:50%; background-color:var(--card-color); background-position:center; background-size:cover; color:transparent; font-family:serif; font-weight:900; font-style:normal; }
.codex-tab span { min-width:0; font-size:12px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.codex-detail { position:sticky; top:0; align-self:start; overflow:hidden; min-height:480px; border:1px solid #5e5140; border-radius:15px; background:linear-gradient(145deg,#f5e7c7,#cba66d); color:#2a221b; box-shadow:var(--shadow); }
.codex-banner { height:174px; display:grid; place-items:center; background:radial-gradient(circle,var(--card-color),#18242e 72%); }
.codex-portrait { width:100%; height:100%; display:block; object-fit:cover; object-position:center 26%; }
.codex-symbol { width:120px; height:120px; display:grid; place-items:center; border-radius:50%; border:8px solid #1b242b; background:#efe0b8; font-family:KaiTi,serif; font-size:62px; font-weight:900; box-shadow:0 12px 25px #0007; }
.codex-copy { padding:25px 30px 30px; }
.codex-copy h3 { margin:0 0 6px; font-family:KaiTi,serif; font-size:32px; }
.codex-copy .tags { display:flex; gap:7px; margin-bottom:16px; }
.codex-copy .tags span { padding:4px 8px; border:1px solid #7b5b37; border-radius:10px; font-size:10px; }
.codex-voice { display:inline-flex; align-items:center; gap:7px; margin:0 0 7px; padding:6px 10px; cursor:pointer; color:#fff2cf; border:1px solid #8a592d; border-radius:14px; background:linear-gradient(#c66d2d,#8f421f); box-shadow:0 3px 0 #5c2b1b; font-size:10px; font-weight:900; }
.codex-voice i { display:grid; place-items:center; width:17px; height:17px; color:#59301c; border-radius:50%; background:#ffe2a0; font-size:8px; font-style:normal; }
.codex-voice:active { transform:translateY(2px); box-shadow:0 1px 0 #5c2b1b; }
.codex-voice.unavailable { cursor:default; color:#765f46; border-color:#aa936e; background:#d8c39c; box-shadow:none; }
.codex-voice.unavailable i { color:#72563d; background:#eee0c1; }
.codex-copy p { line-height:1.8; font-size:13px; }
.stat-bars { display:grid; gap:9px; margin-top:18px; }
.stat-row { display:grid; grid-template-columns:48px 1fr 40px; gap:9px; align-items:center; font-size:11px; }
.stat-row i { height:7px; border-radius:5px; background:#8b6b44; overflow:hidden; }
.stat-row i b { display:block; height:100%; background:#b84532; }

.settings-wrap { max-width:760px; margin:0 auto; display:grid; gap:14px; }
.setting-row { display:flex; align-items:center; gap:18px; padding:18px 22px; border:1px solid var(--line); border-radius:11px; background:#17242e; }
.setting-row > div:first-child { flex:1; }
.setting-row h3 { margin:0 0 5px; font-size:15px; color:#f1dfbc; }
.setting-row p { margin:0; color:#8899a4; font-size:11px; }
.toggle { cursor:pointer; width:54px; height:29px; position:relative; appearance:none; border-radius:20px; background:#384650; box-shadow:inset 0 2px 6px #0008; }
.toggle::after { content:""; position:absolute; width:23px; height:23px; left:3px; top:3px; border-radius:50%; background:#b7c0c5; transition:.2s; }
.toggle:checked { background:#d06e2b; }.toggle:checked::after { transform:translateX(25px); background:#fff0c8; }
.difficulty-pills { display:flex; gap:8px; }
.difficulty-pills button { cursor:pointer; padding:8px 15px; border:1px solid #60717b; border-radius:16px; background:#24333d; font-size:11px; }
.difficulty-pills button.active { color:#20170f; border-color:#efb257; background:#efb257; font-weight:900; }
.tutorial-pages { max-width:900px; margin:0 auto; }
.tutorial-hero { display:grid; grid-template-columns:1fr 1fr; gap:25px; align-items:center; }
.tutorial-diagram { position:relative; min-height:330px; border-radius:16px; background:linear-gradient(#7a4034 0 45%,#57909b 45% 55%,#596f42 55%); border:5px solid #b99a68; box-shadow:var(--shadow); }
.tutorial-diagram::before,.tutorial-diagram::after { content:""; position:absolute; left:23%; width:54%; height:18px; border:3px solid #4a2c1a; background:#c69454; }
.tutorial-diagram::before { top:46%; }.tutorial-diagram::after { top:49%; }
.tutorial-copy h3 { font-family:KaiTi,serif; font-size:29px; color:#f0d596; }
.tutorial-copy li { margin:12px 0; color:#c6d0d6; line-height:1.6; }
.keycap { display:inline-grid; place-items:center; min-width:27px; padding:2px 6px; border:1px solid #74818a; border-radius:5px; background:#27343e; box-shadow:0 2px 0 #091016; color:#f0e5cf; font-size:11px; }

/* Battle */
.game-screen { align-items:center; justify-content:center; background:#071018; }
.game-shell { position:relative; flex:none; aspect-ratio:9/16; height:100vh; width:56.25vh; height:100dvh; width:56.25dvh; overflow:hidden; background:#26394a; box-shadow:0 0 80px #000; touch-action:none; }
#battle-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.battle-topbar {
  position:absolute; left:14px; right:14px; top:10px; height:54px; display:flex; align-items:center; gap:12px; pointer-events:none;
}
.battle-topbar > * { pointer-events:auto; }
.round-btn { flex:none; width:40px; height:40px; border-radius:50%; font-weight:900; }
.fighter-tag { min-width:125px; display:flex; gap:8px; align-items:center; padding:7px 10px; border:1px solid #61707a; border-radius:8px; background:#111b23dd; box-shadow:0 5px 15px #0008; }
.fighter-tag div { min-width:0; }.fighter-tag small { display:block; color:#82909a; font-size:8px; }.fighter-tag b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.rank-dot { flex:none; width:20px; height:20px; border:3px solid #e8c57f; border-radius:50%; background:#b94339; }
.player-tag { margin-left:auto; text-align:right; }.player-tag .rank-dot { background:#3c93af; }
.timer-wrap { position:absolute; left:50%; top:0; transform:translateX(-50%); min-width:100px; padding:5px 18px; text-align:center; color:#eadfc7; border:1px solid #6d624f; border-radius:8px; background:#141c22ed; box-shadow:0 4px 16px #0009; }
.timer-wrap span { display:block; color:#c19150; font-size:8px; letter-spacing:.14em; }.timer-wrap b { font-size:19px; }
.crown-score { position:absolute; top:8px; left:calc(50% + 64px); display:flex; gap:7px; align-items:center; padding:4px 8px; border-radius:12px; background:#111a22cc; font-size:11px; }.crown-score i { color:#f1bb4c; font-style:normal; }
.battle-message { position:absolute; z-index:5; left:50%; top:90px; transform:translate(-50%,-10px); opacity:0; padding:10px 28px; border-radius:8px; background:#101820dc; color:#ffe8ba; box-shadow:0 7px 20px #0008; font-family:KaiTi,serif; font-size:24px; font-weight:900; pointer-events:none; transition:.22s; }
.battle-message.show { opacity:1; transform:translate(-50%,0); }
.deployment-hint { position:absolute; left:50%; bottom:136px; transform:translateX(-50%); padding:7px 13px; border-radius:15px; background:#0b1319aa; color:#ecdbbd; font-size:10px; pointer-events:none; opacity:0; transition:.2s; }
.deployment-hint.show { opacity:1; }
.battle-hud {
  position:absolute; z-index:6; left:50%; bottom:12px; transform:translateX(-50%); height:108px; display:flex; align-items:flex-end; gap:10px;
}
.hand { height:104px; display:flex; align-items:flex-end; gap:8px; }
.hand-card {
  cursor:grab; position:relative; width:86px; height:104px; flex:none; overflow:hidden; border:4px solid #9a7445; border-radius:10px 10px 8px 8px;
  background:linear-gradient(160deg,#35424c,#111a22); box-shadow:inset 0 0 0 1px #f4deb080,0 7px 0 #0b1116,0 9px 18px #0009; transition:transform .12s,filter .12s,opacity .12s;
}
.hand-card::after { content:""; position:absolute; z-index:5; inset:1px; pointer-events:none; border:1px solid #fff4c74d; border-radius:5px; }
.hand-card[data-rarity="传说"] { border-color:#d2a94d; }.hand-card[data-rarity="史诗"] { border-color:#9d67bc; }.hand-card[data-rarity="稀有"] { border-color:#438ba8; }
.hand-card:hover,.hand-card.selected { transform:translateY(-9px); border-color:#ffcc6f; filter:brightness(1.12); }
.hand-card.dragging { opacity:.5; transform:translateY(-16px) scale(.96); }
.hand-card.disabled { filter:grayscale(.8) brightness(.55); cursor:not-allowed; }
.hand-rarity-edge { position:absolute; z-index:4; inset:0; pointer-events:none; background:linear-gradient(115deg,#fff4 0 7%,transparent 18% 72%,#0006); }
.hand-art { position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--card-color) 70%,#fff),var(--card-color) 46%,#17212a 72%); }
.hand-art img { width:100%; height:100%; display:block; object-fit:cover; object-position:center 28%; transform:scale(1.025); }
.hand-art i { position:absolute; inset:0; background:linear-gradient(180deg,transparent 52%,#10171dee); }
.hand-name { position:absolute; z-index:6; left:3px; right:3px; bottom:14px; display:block; padding:4px 1px 3px; overflow:hidden; border:1px solid #4e3824; border-radius:3px; background:#211b18e8; text-align:center; color:#fff0c9; font-size:8px; font-weight:900; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 1px 2px #000; }
.hand-role { position:absolute; z-index:6; left:0; right:0; bottom:2px; color:#b8a98f; font-size:6px; text-align:center; }
.hand-cost { position:absolute; left:3px; top:3px; width:25px; height:25px; display:grid; place-items:center; border:2px solid #dfbbff; border-radius:50% 50% 50% 8px; background:#7443b8; font-size:11px; font-weight:900; transform:rotate(45deg); box-shadow:0 2px 4px #0008; }
.hand-cost b { transform:rotate(-45deg); }
.next-card { width:54px; margin-right:2px; text-align:center; color:#aeb9c0; font-size:8px; }
.next-card > div { position:relative; width:48px; height:58px; margin-top:4px; overflow:hidden; border:3px solid #52616b; border-radius:7px; background:#142029; box-shadow:0 5px 0 #091017; }
.next-card img { width:100%; height:100%; object-fit:cover; object-position:center 25%; filter:brightness(.8); }.next-card b { position:absolute; left:2px; top:2px; width:16px; height:16px; display:grid; place-items:center; border-radius:50%; background:#7041a8; color:#fff; font-size:7px; }
.chakra-wrap { width:72px; display:flex; flex-direction:column; align-items:center; gap:4px; }
.chakra-orb { width:49px; height:49px; display:grid; place-items:center; border:3px solid #d4b0f1; border-radius:50% 50% 50% 12px; transform:rotate(45deg); background:radial-gradient(circle at 30% 25%,#c88ced,#7845b7 60%,#422675); box-shadow:0 0 17px #ad65dd99,0 6px 0 #1d1433; }
.chakra-orb span { transform:rotate(-45deg); font-size:17px; font-weight:900; }
.chakra-track { width:66px; height:11px; position:relative; overflow:hidden; border:2px solid #9f83b5; border-radius:5px; background:#251b30; }
.chakra-track i { display:block; width:50%; height:100%; background:linear-gradient(90deg,#7140ab,#c17ee6); transition:width .12s; }
.chakra-track b { position:absolute; inset:-16px 0 auto; color:#ded0e7; font-size:7px; text-align:center; text-shadow:0 1px 3px #000; }

.emote-toggle { position:absolute; z-index:8; right:16px; bottom:18px; width:48px; height:48px; cursor:pointer; border:2px solid #d8b77b; border-radius:50%; background:linear-gradient(145deg,#fff4dc,#cfad72); color:#302217; font-size:10px; font-weight:900; box-shadow:0 5px 0 #5a4028,0 7px 16px #0009; }
.emote-tray { position:absolute; z-index:9; right:14px; bottom:77px; width:250px; display:none; grid-template-columns:repeat(5,1fr); gap:7px; padding:10px; border:1px solid #96744a; border-radius:12px; background:#131d25ee; box-shadow:0 14px 35px #000b; }
.emote-tray.open { display:grid; animation:trayIn .18s ease-out; }
@keyframes trayIn { from { opacity:0; transform:translateY(10px) scale(.95); } }
.emote-option { cursor:pointer; aspect-ratio:1; padding:0; overflow:hidden; border:2px solid #6c5b45; border-radius:9px; background:#f8ecd3; }
.emote-option:hover { transform:scale(1.08); border-color:#ffb44b; }.emote-option img { width:100%; height:100%; object-fit:cover; }
.emote-bubble { position:absolute; z-index:10; width:95px; height:95px; padding:4px; opacity:0; transform:translate(-50%,10px) scale(.75); border:3px solid #ecd39d; border-radius:20px 20px 20px 5px; background:#fff5df; box-shadow:0 8px 25px #0009; pointer-events:none; transition:.2s ease-out; }
.emote-bubble.enemy { border-radius:20px 20px 5px 20px; }.emote-bubble.show { opacity:1; transform:translate(-50%,0) scale(1); }.emote-bubble img { width:100%; height:100%; border-radius:14px; object-fit:cover; }
.emote-bubble.player { left:63%; bottom:176px; }
.emote-bubble.enemy { left:63%; top:118px; }

/* Modals */
.modal { display:none; position:absolute; z-index:30; inset:0; align-items:center; justify-content:center; padding:24px; background:rgba(5,10,14,.72); backdrop-filter:blur(4px); }
.modal.open { display:flex; }
.scroll-paper { position:relative; border:3px solid #4f3521; background:linear-gradient(100deg,#d5b47c,#f8e8c0 10% 90%,#c89c61); color:#2d2117; box-shadow:0 18px 65px #000c; }
.scroll-paper::before,.scroll-paper::after { content:""; position:absolute; left:-14px; right:-14px; height:19px; border:3px solid #4f3521; border-radius:7px; background:#9f7546; }
.scroll-paper::before { top:-11px; }.scroll-paper::after { bottom:-11px; }
.modal-card { width:min(390px,90vw); display:flex; flex-direction:column; gap:13px; padding:42px 48px; text-align:center; border-radius:5px; }
.modal-card h2 { margin:0 0 12px; font-family:KaiTi,serif; }.modal-card .eyebrow { color:#92502d; }
.result-card { width:min(520px,94vw); padding:42px 54px 38px; text-align:center; border-radius:5px; }
.result-emblem { position:absolute; left:50%; top:-47px; transform:translateX(-50%) rotate(-5deg); width:92px; height:92px; display:grid; place-items:center; border:6px solid #f0d49e; border-radius:50%; background:#b63e31; color:#fff2cd; font-family:KaiTi,serif; font-size:50px; font-weight:900; box-shadow:0 8px 20px #0009; }
.result-card .eyebrow { margin-top:16px; color:#95512e; }.result-card h2 { margin:0; font-family:KaiTi,serif; font-size:38px; }
.result-stars { margin:8px 0 20px; color:#c57b1e; font-size:25px; letter-spacing:.2em; }
.result-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:18px 0 24px; overflow:hidden; border:1px solid #94734d; border-radius:8px; background:#94734d; }
.result-stat { padding:10px; background:#e8d3a7; }.result-stat small { display:block; color:#765d43; font-size:9px; }.result-stat b { display:block; margin-top:3px; font-size:18px; }
.result-actions { display:grid; grid-template-columns:1.2fr 1fr; gap:12px; }.result-actions .btn { min-height:58px; }

.toast { position:absolute; z-index:60; left:50%; bottom:24px; transform:translate(-50%,20px); opacity:0; padding:11px 20px; border:1px solid #847155; border-radius:8px; background:#131c23ee; color:#f1ddba; box-shadow:0 10px 30px #000a; font-size:12px; transition:.22s; pointer-events:none; }
.toast.show { opacity:1; transform:translate(-50%,0); }

@media (max-width:1000px), (max-height:650px) {
  .menu-screen { padding:28px 38px; gap:28px; }
  .brand-mark { width:58px; height:58px; font-size:27px; }
  .hero-copy { padding-left:20px; }.hero-copy h1 span { font-size:60px; }.hero-copy h1 small { font-size:21px; margin-top:12px; }
  .hero-subtitle { margin-top:16px; font-size:12px; }
  .btn-battle { min-height:74px; }.btn-primary b { font-size:18px; }.btn-icon { font-size:31px; }.btn-secondary { min-height:62px; }
  .card-grid { grid-template-columns:repeat(4,1fr); gap:11px; }.collection-card { min-height:190px; }.card-art { height:98px; }
}

@media (max-aspect-ratio:4/3) {
  .hero-panel { flex-basis:48%; }.menu-column { flex-basis:330px; }.hero-characters { display:none; }
  .hero-copy h1 span { font-size:54px; }.card-grid { grid-template-columns:repeat(3,1fr); }
}

@media (max-width:700px) {
  html,body,.app { min-width:0; min-height:0; overflow:hidden; }
  .menu-screen {
    flex-direction:column; justify-content:flex-start; gap:12px; overflow-y:auto;
    padding:max(18px,env(safe-area-inset-top)) 16px max(38px,env(safe-area-inset-bottom));
    background:linear-gradient(180deg,rgba(9,15,20,.08),rgba(9,15,20,.88) 47%),url("assets/home-v3.webp") center/cover no-repeat;
  }
  .hero-panel { flex:none; min-height:245px; padding-top:5px; align-items:flex-start; }
  .brand-mark { width:48px; height:48px; font-size:23px; box-shadow:0 0 0 3px #e6c188,0 8px 20px #0009; }
  .brand-mark::after { width:61px; }
  .hero-copy { padding:5px 0 0 15px; }
  .hero-copy .eyebrow { font-size:9px; letter-spacing:.12em; }
  .hero-copy h1 span { font-size:47px; filter:drop-shadow(3px 5px 0 #5f2019); }
  .hero-copy h1 small { margin:12px 0 0 3px; font-size:17px; letter-spacing:.25em; }
  .hero-subtitle { margin:14px 0 0 3px; font-size:11px; line-height:1.65; }
  .hero-characters { display:block; left:-8%; right:-8%; bottom:-24px; height:130px; transform:scale(.65); transform-origin:center bottom; opacity:.4; }
  .menu-column { flex:none; width:100%; gap:10px; }
  .btn-battle { min-height:68px; }.btn-primary b { font-size:18px; }.btn-primary small { font-size:9px; }.btn-icon { font-size:28px; }
  .menu-grid { gap:8px; }.btn-secondary { min-height:59px; padding:9px; gap:8px; }.btn-secondary span { width:29px; height:29px; }.btn-secondary b { font-size:12px; }
  .menu-footer { position:static; margin-top:5px; justify-content:center; font-size:9px; }.menu-footer span:not(:first-child) { display:none; }

  .panel-screen { padding:max(8px,env(safe-area-inset-top)) 12px max(10px,env(safe-area-inset-bottom)); }
  .panel-header { height:61px; grid-template-columns:45px 1fr auto; gap:10px; }
  .icon-btn { width:38px; height:38px; font-size:20px; }.panel-header h2 { font-size:21px; }.panel-header .eyebrow { font-size:8px; }.panel-badge { padding:6px 10px; font-size:10px; }
  .panel-content { padding-top:13px; }
  .panel-intro { align-items:flex-start; padding:13px 14px; gap:12px; }.panel-intro h3 { font-size:13px; }.panel-intro p { font-size:10px; }.avg-cost { font-size:11px; }.avg-cost i { width:31px; height:31px; }
  .card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .collection-card { min-height:0; padding:6px; border-radius:13px; }.card-visual { border-width:4px; border-radius:11px 11px 8px 8px; }.card-nameplate { left:3px; right:3px; padding:4px 3px; }.card-nameplate b { font-size:10px; }.card-nameplate small { font-size:6px; }.card-level { font-size:6px; }.card-visual .chakra-cost { width:28px; height:28px; font-size:11px; }.collection-meta { padding:9px 2px 1px; font-size:7px; }
  .codex-layout { display:flex; flex-direction:column; gap:13px; }.codex-list { grid-template-columns:repeat(4,1fr); order:2; }.codex-tab { padding:5px; flex-direction:column; gap:4px; }.codex-tab i { width:30px; height:30px; }.codex-tab span { width:100%; text-align:center; font-size:8px; }
  .codex-detail { position:static; min-height:0; order:1; }.codex-banner { height:115px; }.codex-symbol { width:79px; height:79px; border-width:5px; font-size:39px; }.codex-copy { padding:16px 18px 19px; }.codex-copy h3 { font-size:24px; }.codex-copy p { font-size:11px; }.stat-bars { margin-top:11px; }
  .settings-wrap { gap:9px; }.setting-row { padding:13px 14px; gap:10px; }.setting-row h3 { font-size:13px; }.setting-row p { font-size:9px; }.difficulty-pills { gap:4px; }.difficulty-pills button { padding:7px 9px; font-size:9px; }
  .tutorial-hero { grid-template-columns:1fr; gap:14px; }.tutorial-diagram { min-height:230px; }.tutorial-copy h3 { font-size:22px; }.tutorial-copy li { margin:8px 0; font-size:11px; }

  .game-screen { overflow:hidden; }
  .game-shell { width:56.25vh; height:100vh; width:56.25dvh; min-width:100vw; max-width:none; height:100dvh; }
  .battle-topbar { left:max(10px,calc((100% - 100vw)/2 + 8px)); right:max(10px,calc((100% - 100vw)/2 + 8px)); top:max(7px,env(safe-area-inset-top)); gap:5px; }
  .round-btn { width:34px; height:34px; font-size:11px; }.fighter-tag { min-width:62px; width:62px; padding:5px 6px; gap:5px; }.fighter-tag b { font-size:8px; }.fighter-tag small { font-size:6px; }.rank-dot { width:15px; height:15px; border-width:2px; }
  .timer-wrap { min-width:70px; padding:4px 8px; }.timer-wrap span { font-size:6px; }.timer-wrap b { font-size:14px; }.crown-score { left:calc(50% + 41px); top:7px; gap:4px; padding:3px 5px; font-size:8px; }
  .battle-message { top:68px; padding:7px 18px; font-size:18px; }.deployment-hint { bottom:108px; font-size:8px; }
  .battle-hud { bottom:max(9px,env(safe-area-inset-bottom)); height:84px; gap:5px; }
  .hand { height:82px; gap:4px; }.hand-card { width:58px; height:80px; border-width:3px; border-radius:7px; }.hand-name { left:2px; right:2px; bottom:10px; padding:3px 0 2px; font-size:6px; }.hand-role { bottom:1px; font-size:5px; }.hand-cost { width:20px; height:20px; font-size:8px; border-width:1px; }
  .next-card { width:37px; font-size:6px; }.next-card > div { width:35px; height:45px; border-width:2px; }.next-card b { width:13px; height:13px; font-size:6px; }
  .chakra-wrap { width:45px; }.chakra-orb { width:39px; height:39px; }.chakra-orb span { font-size:13px; }.chakra-track { width:45px; height:8px; }.chakra-track b { font-size:6px; top:-13px; }
  .emote-toggle { right:max(9px,calc((100% - 100vw)/2 + 7px)); bottom:max(99px,calc(env(safe-area-inset-bottom) + 92px)); width:40px; height:40px; font-size:8px; }
  .emote-tray { right:max(8px,calc((100% - 100vw)/2 + 6px)); bottom:146px; width:210px; padding:7px; gap:5px; }
  .emote-bubble { width:76px; height:76px; }
  .emote-bubble.player { bottom:126px; }.emote-bubble.enemy { top:91px; }
  .result-card { padding:35px 28px 28px; }.result-card h2 { font-size:29px; }.result-emblem { width:73px; height:73px; top:-38px; font-size:39px; }.result-actions { grid-template-columns:1fr; }.result-stats { margin:12px 0 17px; }
}

/* v3 · 竖屏木叶大厅 */
#screen-menu.menu-screen {
  inset:0 auto 0 50%;
  width:min(100%,480px);
  padding:max(10px,env(safe-area-inset-top)) 12px calc(76px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  flex-direction:column;
  justify-content:flex-start;
  gap:9px;
  overflow:hidden;
  isolation:isolate;
  background:
    linear-gradient(180deg,rgba(9,15,20,.72) 0%,rgba(9,15,20,.18) 18%,rgba(8,14,18,.08) 62%,rgba(7,12,17,.84) 88%,rgba(7,11,15,.96) 100%),
    url("assets/home-v3.webp") center/cover no-repeat;
  box-shadow:0 0 80px #000b;
}
#screen-menu.menu-screen::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  border-inline:1px solid rgba(245,218,158,.2);
  background:
    linear-gradient(90deg,rgba(3,8,11,.5),transparent 13% 87%,rgba(3,8,11,.5)),
    radial-gradient(circle at 50% 47%,transparent 0 38%,rgba(7,12,17,.18) 68%,rgba(7,12,17,.58));
}
#screen-menu.menu-screen::after { display:none; }

.home-topbar { flex:0 0 48px; display:flex; align-items:center; justify-content:space-between; gap:8px; z-index:2; }
.mission-reward {
  position:relative; height:45px; min-width:128px; display:flex; align-items:center; gap:7px; padding:4px 23px 4px 7px;
  color:#261b10; border:2px solid #7a4b1d; border-radius:8px; cursor:pointer;
  background:linear-gradient(#ffe173,#ec9b29); box-shadow:inset 0 0 0 2px #fff3a34d,0 4px 0 #4a2c17,0 7px 14px #0007;
}
.mission-reward::before,.resource-pill::before,.home-profile-card::before,.home-launch::before { content:""; position:absolute; inset:3px; border:1px solid rgba(255,244,201,.35); border-radius:inherit; pointer-events:none; }
.mission-reward .mission-scroll { width:30px; height:34px; display:grid; place-items:center; color:#fff0c4; border:2px solid #251a16; border-radius:5px; background:linear-gradient(145deg,#a64038,#66241f); font:900 17px KaiTi,serif; transform:rotate(-5deg); }
.mission-reward b,.mission-reward small { display:block; line-height:1.05; }.mission-reward b { font-size:15px; }.mission-reward small { margin-top:3px; font-size:8px; opacity:.68; }
.mission-reward > i { position:absolute; right:-5px; top:-7px; width:22px; height:22px; display:grid; place-items:center; color:white; border:2px solid white; border-radius:8px; background:#dc3241; box-shadow:0 2px 4px #0008; font-size:10px; font-style:normal; font-weight:900; }
.resource-row { display:flex; gap:5px; min-width:0; }
.resource-pill { position:relative; height:39px; min-width:105px; display:grid; grid-template-columns:28px 1fr 21px; align-items:center; gap:3px; padding:3px 4px; border:2px solid #4c6474; border-radius:8px; background:linear-gradient(#263a4b,#12202c); box-shadow:0 4px 0 #081017,0 6px 12px #0007; }
.resource-pill i { width:27px; height:27px; display:grid; place-items:center; border:2px solid #332717; border-radius:50%; color:#2b2415; background:radial-gradient(circle at 35% 30%,#fff19a,#e0a329 66%,#8d581d); font:900 11px KaiTi,serif; font-style:normal; }
.resource-pill.ration i { color:white; border-color:#19364a; border-radius:7px 50% 50% 50%; background:linear-gradient(145deg,#73d9df,#287aae); }
.resource-pill b { text-align:right; font-size:15px; letter-spacing:.04em; text-shadow:0 2px 2px #000; }.resource-pill span { color:#9de7f0; font-size:19px; font-weight:900; }

.home-profile-card {
  position:relative; flex:0 0 72px; display:grid; grid-template-columns:55px 1fr auto 70px; align-items:center; gap:8px; padding:8px 9px;
  border:2px solid #70533a; border-radius:10px; background:linear-gradient(100deg,rgba(52,37,29,.94),rgba(20,27,31,.92)); box-shadow:0 5px 0 #11100e,0 9px 18px #0008;
}
.village-crest { width:50px; height:50px; display:grid; place-items:center; border:3px solid #d9b875; border-radius:10px 10px 16px 16px; color:#18231e; background:linear-gradient(#d6c394,#9fbc8d); box-shadow:inset 0 0 0 2px #384338,0 3px 7px #0008; font:900 24px KaiTi,serif; }
.profile-copy { min-width:0; }.profile-copy > * { display:block; }.profile-copy small { color:#d1b989; font-size:8px; }.profile-copy b { margin:3px 0; overflow:hidden; font-size:17px; text-overflow:ellipsis; white-space:nowrap; }.profile-copy span { color:#9eabb1; font-size:8px; }
.profile-rank { min-width:53px; text-align:center; }.profile-rank > * { display:block; }.profile-rank small { color:#a9b4bb; font-size:7px; }.profile-rank b { color:#f0bd5e; font:900 17px KaiTi,serif; }.profile-rank span { color:#dfd5bd; font-size:9px; }
.profile-quick { display:flex; gap:6px; }.profile-quick button { width:31px; height:36px; border:1px solid #728390; border-radius:7px; color:#f3dfb2; background:linear-gradient(#344754,#1a2730); box-shadow:0 3px 0 #0a1015; cursor:pointer; font:900 12px KaiTi,serif; }

.home-stage { position:relative; flex:1 1 auto; min-height:280px; }
.stage-title { position:absolute; left:50%; top:12px; width:170px; padding:7px 14px 9px; transform:translateX(-50%); text-align:center; clip-path:polygon(7% 0,93% 0,100% 50%,93% 100%,7% 100%,0 50%); background:linear-gradient(90deg,rgba(38,27,21,.82),rgba(107,67,36,.93),rgba(38,27,21,.82)); filter:drop-shadow(0 4px 5px #0008); }
.stage-title > * { display:block; }.stage-title small { color:#d9c8a5; font-size:7px; letter-spacing:.18em; }.stage-title b { color:#fff0c6; font:900 17px KaiTi,serif; }.stage-title span { color:#d6ac61; font-size:7px; }
.stage-side { position:absolute; top:75px; display:flex; flex-direction:column; gap:14px; }.stage-side-left { left:0; }.stage-side-right { right:0; }
.stage-side button { width:55px; padding:0; color:#f4e5c2; border:0; background:none; cursor:pointer; text-shadow:0 2px 3px #000; }
.stage-side i { width:51px; height:51px; display:grid; place-items:center; margin:auto; border:3px solid #d5ad62; border-radius:50%; background:radial-gradient(circle at 35% 30%,#657b86,#25343d 68%); box-shadow:inset 0 0 0 2px #111b22,0 5px 9px #0009; font:900 21px KaiTi,serif; font-style:normal; }
.stage-side-right i { border-color:#b87253; background:radial-gradient(circle at 35% 30%,#8b6553,#382920 68%); }
.stage-side span { display:block; margin-top:3px; font-size:8px; font-weight:800; }
.rank-progress { position:absolute; left:50%; bottom:8px; width:236px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:7px; padding:7px 10px; transform:translateX(-50%); border:1px solid #6a5942; border-radius:9px; background:#121b20db; box-shadow:0 4px 12px #0008; color:#d7c5a3; font-size:8px; }
.rank-progress i { height:7px; overflow:hidden; border:1px solid #0a1014; border-radius:4px; background:#27343b; }.rank-progress i b { display:block; width:42%; height:100%; background:linear-gradient(90deg,#d07937,#f3c05c); box-shadow:0 0 7px #eca83f; }
.rank-progress strong { color:#f1c86d; font-size:10px; }

.home-launch { position:relative; flex:0 0 125px; padding:8px 8px 10px; border:2px solid #6d5034; border-radius:15px; background:linear-gradient(180deg,rgba(27,31,30,.91),rgba(15,21,25,.97)); box-shadow:0 -2px 0 #a9834d,0 8px 20px #000b; }
.mission-chests { height:37px; display:flex; justify-content:center; gap:7px; }
.chest { width:38px; height:30px; display:grid; place-items:center; color:#d6b97d; border:2px solid #5a4633; border-radius:6px; background:linear-gradient(#6c523b,#2e2a28); font:900 10px KaiTi,serif; box-shadow:0 3px 0 #101214; }
.chest.active { color:#2f1b2f; border-color:#f0bd56; background:linear-gradient(#e9a95a,#9561b4); box-shadow:0 0 12px #c77be877; }
.launch-row { display:grid; grid-template-columns:54px 1fr 54px; align-items:center; gap:8px; }
.launch-actions { min-width:0; display:grid; gap:9px; }
.loadout-peek,.rank-peek { height:65px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:#ecd8a9; border:2px solid #7f6746; border-radius:12px; background:linear-gradient(#394a54,#19252c); box-shadow:0 4px 0 #0a1014; cursor:pointer; }
.loadout-peek span,.rank-peek span { font:900 14px KaiTi,serif; }.loadout-peek b,.rank-peek b { font-size:8px; }
#screen-menu .btn-battle { min-height:69px; padding:8px 16px; gap:12px; border:3px solid #ffe094; border-radius:12px; box-shadow:0 6px 0 #70301e,0 11px 20px #0009; }
#screen-menu .btn-battle .btn-icon { font-size:28px; } #screen-menu .btn-primary b { font:900 26px KaiTi,serif; letter-spacing:.18em; } #screen-menu .btn-primary small { font-size:8px; letter-spacing:.04em; }

.home-nav { position:absolute; z-index:5; left:0; right:0; bottom:0; height:68px; padding-bottom:env(safe-area-inset-bottom); display:grid; grid-template-columns:repeat(5,1fr); border-top:3px solid #95734b; background:linear-gradient(#31414d,#16222a); box-shadow:0 -8px 20px #0009; }
.home-nav button { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; color:#c7d0d4; border:0; border-right:1px solid #ffffff14; background:transparent; cursor:pointer; }
.home-nav button.active { color:#fff0bd; background:linear-gradient(#8a6636,#40311f); }.home-nav button.active::before { content:""; position:absolute; top:-9px; width:60%; height:8px; border-radius:8px 8px 0 0; background:#f0b448; }
.home-nav i { font:900 20px KaiTi,serif; font-style:normal; }.home-nav span { font-size:8px; font-weight:800; }
#screen-menu .menu-footer { z-index:6; left:8px; right:8px; bottom:calc(69px + env(safe-area-inset-bottom)); justify-content:space-between; color:#9aa4a8; font-size:6px; pointer-events:none; }

@media (max-width:390px), (max-height:760px) {
  #screen-menu.menu-screen { gap:6px; padding-inline:8px; }
  .home-topbar { flex-basis:43px; }.mission-reward { min-width:112px; height:40px; }.resource-pill { min-width:87px; height:35px; grid-template-columns:24px 1fr 16px; }.resource-pill i { width:23px; height:23px; }.resource-pill b { font-size:12px; }
  .home-profile-card { flex-basis:63px; grid-template-columns:46px 1fr auto 62px; }.village-crest { width:43px; height:43px; }.profile-copy b { font-size:14px; }
  .home-stage { min-height:235px; }.stage-side { top:62px; gap:10px; }.stage-side i { width:44px; height:44px; }.rank-progress { width:210px; }
  .home-launch { flex-basis:113px; }.mission-chests { height:32px; }.chest { width:34px; height:26px; }
  #screen-menu .btn-battle { min-height:61px; } #screen-menu .btn-primary b { font-size:22px; }
}

@media (max-height:620px) and (max-width:700px) {
  .hero-panel { min-height:185px; }.hero-subtitle { display:none; }.hero-copy h1 span { font-size:39px; }.hero-characters { display:none; }
  .btn-battle { min-height:58px; }.btn-secondary { min-height:51px; }.menu-screen { overflow-y:auto; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

/* v2.0 battle presentation */
.game-screen { position:fixed; inset:0; }
.game-shell::before { content:""; position:absolute; z-index:2; inset:0; pointer-events:none; box-shadow:inset 0 0 42px #02070d99,inset 0 -150px 90px #050a11cc; }
.game-shell::after { content:""; position:absolute; z-index:2; inset:0; pointer-events:none; opacity:.12; background-image:repeating-linear-gradient(115deg,transparent 0 9px,#fff 10px 10.5px); mix-blend-mode:soft-light; }
.battle-topbar { z-index:12; left:12px; right:12px; top:10px; height:58px; gap:8px; }
.round-btn { border:2px solid #d6b778; background:linear-gradient(145deg,#2c3942,#11191f); color:#f7e2b5; box-shadow:inset 0 0 0 1px #ffffff1c,0 4px 0 #070b0e,0 7px 17px #0009; }
.fighter-tag { min-width:132px; border:2px solid #8e7250; border-left-width:5px; border-radius:7px; background:linear-gradient(100deg,#211815ed,#10171ded); box-shadow:inset 0 0 0 1px #fff1c31a,0 5px 14px #000a; }
.enemy-tag { border-left-color:#d85f4f; }
.fighter-tag small { color:#c59674; letter-spacing:.1em; }.fighter-tag b { color:#fff0d1; }
.rank-dot { position:relative; background:radial-gradient(circle at 35% 28%,#ed8d73,#922d2b 62%,#50181b); box-shadow:inset 0 0 0 2px #551d1e,0 0 10px #ef624744; }
.rank-dot::after { content:"忍"; position:absolute; inset:0; display:grid; place-items:center; color:#ffe3b5; font-family:KaiTi,serif; font-size:8px; font-weight:900; }
.player-tag .rank-dot { background:radial-gradient(circle at 35% 28%,#91e0e7,#2f879b 62%,#174b5c); box-shadow:inset 0 0 0 2px #174552,0 0 10px #70d6e344; }
.timer-wrap { left:auto; right:0; top:0; transform:none; min-width:92px; padding:5px 13px 6px; border:2px solid #8d734d; background:linear-gradient(#202b32ed,#0d1419f2); box-shadow:inset 0 0 0 1px #fff2c71a,0 5px 0 #070b0f,0 8px 18px #0009; clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.timer-wrap span { color:#e3ad62; }.timer-wrap b { font-variant-numeric:tabular-nums; letter-spacing:.06em; }
.crown-score { left:50%; top:5px; transform:translateX(-50%); gap:7px; min-width:86px; justify-content:center; padding:6px 9px; border:2px solid #8b744e; border-radius:5px; background:linear-gradient(#2a3134ed,#11171bed); box-shadow:0 4px 0 #090c0e,0 7px 15px #0008; }
.crown-score em { color:#826e50; font-style:normal; }.score-side { display:flex; align-items:center; gap:4px; }.score-side i { font-size:9px; }.enemy-score i { color:#df6658; }.player-score i { color:#67c5da; }
.battle-message { z-index:14; top:76px; border:2px solid #d0a55f; border-radius:5px; background:linear-gradient(100deg,#2b1d17f2,#111b21f2); box-shadow:inset 0 0 0 1px #fff1c824,0 6px 0 #070b0e,0 10px 28px #000b; letter-spacing:.1em; }
.player-ribbon { position:absolute; z-index:11; left:15px; bottom:136px; width:auto; min-width:128px; padding:6px 10px; border-left-color:#46a8bb; pointer-events:none; }
.battle-hud { z-index:10; left:0; right:0; bottom:0; transform:none; width:100%; height:128px; padding:18px 13px max(12px,env(safe-area-inset-bottom)); justify-content:center; gap:7px; border-top:2px solid #8b744e; background:linear-gradient(180deg,#1c252ee8,#0b1117fa 56%,#070b10); box-shadow:inset 0 2px 0 #f8ddb323,0 -12px 28px #0008; }
.battle-hud::before { content:""; position:absolute; inset:4px 0 auto; height:3px; background:linear-gradient(90deg,transparent,#c4904b 16%,#f2cc82 50%,#c4904b 84%,transparent); opacity:.65; }
.hand { height:106px; gap:7px; }
.hand-card { width:82px; height:104px; border-width:4px; border-color:#9f7b49; clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 7px); box-shadow:inset 0 0 0 1px #fff6ce77,0 6px 0 #080d11,0 9px 17px #000b; }
.hand-card:hover,.hand-card.selected { transform:translateY(-12px) scale(1.035); filter:brightness(1.13) saturate(1.08); box-shadow:0 0 0 2px #ffd37a,0 9px 0 #080d11,0 13px 26px #000d; }
.hand-name { bottom:14px; padding:4px 1px; border-color:#9f7547; background:linear-gradient(90deg,#17110ee9,#382719ed,#17110ee9); color:#fff0c8; font-size:9px; }
.hand-role { bottom:3px; color:#c8b99b; font-size:6px; letter-spacing:.12em; }
.hand-cost { left:-1px; top:-1px; width:29px; height:29px; border:2px solid #e4c9ff; background:radial-gradient(circle at 30% 25%,#d492f0,#7842b2 62%,#40225f); font-size:12px; box-shadow:inset 0 0 0 1px #fff6ff66,0 3px 6px #000a,0 0 11px #a757da66; }
.next-card { width:50px; margin-right:0; color:#d3c3a6; }.next-card > div { width:45px; height:60px; border-color:#79684f; background:#0c141a; }
.chakra-wrap { width:59px; gap:7px; }.chakra-orb { width:48px; height:48px; border-color:#e2c2f6; background:radial-gradient(circle at 31% 27%,#e7c4fb,#9b55cf 38%,#572b89 68%,#27113e); box-shadow:inset 0 0 0 2px #ffffff2b,0 5px 0 #180e27,0 0 20px #b45be688; }.chakra-orb span { font-size:18px; text-shadow:0 2px 3px #261338; }
.chakra-track { width:58px; height:12px; overflow:visible; border-color:#bea1d0; background:repeating-linear-gradient(90deg,#21172b 0 8%,#3c2d48 8% 10%); box-shadow:inset 0 1px 4px #000b; }.chakra-track i { overflow:hidden; border-radius:2px; background:linear-gradient(90deg,#6333a6,#b76be2 65%,#e5b8fa); box-shadow:0 0 10px #b75ee5; }.chakra-track b { top:-15px; color:#e3d6e9; letter-spacing:.03em; white-space:nowrap; }
.emote-toggle { z-index:15; right:13px; bottom:139px; border-color:#967343; background:linear-gradient(#f7e4bd,#bb8b4e); }
.emote-tray { z-index:16; bottom:190px; }
.deployment-hint { z-index:9; bottom:154px; border:1px solid #9e835e; background:#10171ed6; }

@media (max-width:700px) {
  .battle-topbar { left:max(7px,calc((100% - 100vw)/2 + 6px)); right:max(7px,calc((100% - 100vw)/2 + 6px)); top:max(6px,env(safe-area-inset-top)); }
  .fighter-tag { min-width:104px; width:auto; }.enemy-tag { max-width:116px; }.fighter-tag b { font-size:8px; }
  .crown-score { top:4px; min-width:65px; padding:5px 6px; font-size:8px; }
  .timer-wrap { min-width:72px; padding:4px 7px 5px; }.timer-wrap b { font-size:14px; }
  .battle-message { top:63px; font-size:17px; }.player-ribbon { left:max(8px,calc((100% - 100vw)/2 + 7px)); bottom:109px; min-width:105px; padding:5px 7px; }
  .battle-hud { height:104px; padding:13px 6px max(8px,env(safe-area-inset-bottom)); gap:4px; }
  .hand { height:84px; gap:4px; }.hand-card { width:59px; height:82px; border-width:3px; }.hand-name { font-size:6.5px; bottom:11px; }.hand-role { font-size:5px; }
  .hand-cost { width:22px; height:22px; font-size:9px; }.next-card { width:37px; }.next-card > div { width:34px; height:47px; }.chakra-wrap { width:44px; }.chakra-orb { width:39px; height:39px; }.chakra-orb span { font-size:14px; }.chakra-track { width:43px; height:9px; }.chakra-track b { font-size:5.5px; top:-12px; }
  .emote-toggle { right:max(8px,calc((100% - 100vw)/2 + 6px)); bottom:max(112px,calc(env(safe-area-inset-bottom) + 105px)); width:39px; height:39px; }.emote-tray { bottom:158px; }
  .deployment-hint { bottom:123px; }
}

/* v3.1 · mobile production UI pass */
button { -webkit-tap-highlight-color:transparent; }
button:focus-visible,[role="button"]:focus-visible { outline:3px solid #ffd67b; outline-offset:2px; }

#screen-menu.menu-screen {
  border-inline:1px solid #8d704c55;
  background-position:center top;
}
.home-topbar,.home-profile-card,.home-launch,.home-nav { font-variant-numeric:tabular-nums; }
.mission-reward,.resource-pill,.home-profile-card,.home-launch,.stage-side i,.loadout-peek,.rank-peek,.home-nav {
  backdrop-filter:blur(3px);
}
.mission-reward:active,.profile-quick button:active,.stage-side button:active,.loadout-peek:active,.rank-peek:active,.home-nav button:active { transform:translateY(2px); filter:brightness(.92); }
.home-profile-card { border-color:#8d6b43; box-shadow:inset 0 1px 0 #ffe8b52b,0 5px 0 #0a0d0d,0 11px 22px #0009; }
.village-crest { position:relative; overflow:hidden; text-shadow:0 1px #f5e8c7; }
.village-crest::after { content:""; position:absolute; inset:6px; border:1px solid #3f523d66; border-radius:50%; }
.profile-quick button { transition:transform .1s,filter .1s; }
.home-stage::before { content:""; position:absolute; inset:0 62px 30px; pointer-events:none; background:radial-gradient(ellipse at center,#ffcc6c16,transparent 68%); }
.home-season-chip {
  position:absolute; left:50%; top:70px; width:152px; min-height:51px; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
  align-items:center; column-gap:7px; padding:7px 11px; transform:translateX(-50%); color:#e9d6af; border:1px solid #765839;
  border-radius:8px; background:linear-gradient(110deg,#111a20dc,#2f281edc,#111a20dc); box-shadow:inset 0 0 0 1px #ffe8b51a,0 5px 12px #0008;
}
.home-season-chip span { grid-row:1/3; width:31px; height:31px; display:grid; place-items:center; color:#2b1d12; border:2px solid #5a3e23; border-radius:50%; background:radial-gradient(circle at 35% 28%,#ffe28b,#dc902f 67%,#8b4c20); font:900 9px KaiTi,serif; }
.home-season-chip b { align-self:end; font:900 13px KaiTi,serif; letter-spacing:.08em; }
.home-season-chip small { align-self:start; color:#aa9c82; font-size:7px; letter-spacing:.12em; }
.stage-side button { transition:transform .1s,filter .1s; }
.stage-side i { transition:transform .13s,filter .13s; }
.stage-side button:hover i { transform:translateY(-2px) scale(1.04); filter:brightness(1.12); }
.rank-progress { border-color:#89714e; background:linear-gradient(90deg,#10181edd,#2c261dde,#10181edd); }
.home-launch { border-color:#927044; box-shadow:inset 0 1px 0 #ffe5ac22,0 -2px 0 #b48b54,0 8px 23px #000c; }
.mission-chests { position:relative; }
.mission-chests::before { content:"任务奖励"; position:absolute; right:calc(50% + 87px); top:8px; color:#b8a582; font-size:7px; letter-spacing:.06em; white-space:nowrap; }
.chest { position:relative; }
.chest.active::after { content:"1"; position:absolute; right:-6px; top:-7px; width:15px; height:15px; display:grid; place-items:center; color:white; border:1px solid white; border-radius:6px; background:#d93442; font:900 7px sans-serif; }
#screen-menu .btn-battle { background:linear-gradient(180deg,#ffc850,#e97527 72%,#c64c22); text-shadow:0 1px #ffe9a8; }
.home-nav button { transition:background .12s,color .12s,transform .1s; }
.home-nav button.active i { transform:scale(1.12); filter:drop-shadow(0 2px 3px #000); }

/* Portrait panels: card collection, codex, tutorial and settings */
#screen-panel.panel-screen {
  inset:0 auto 0 50%; width:min(100%,520px); transform:translateX(-50%); padding:max(8px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom));
  overflow:hidden; border-inline:1px solid #6f5940; background:
    linear-gradient(180deg,#172a39f2,#0c1721f8),
    repeating-linear-gradient(135deg,#ffffff05 0 2px,transparent 2px 18px);
  box-shadow:0 0 80px #000c;
}
#screen-panel.panel-screen::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.35; pointer-events:none; background:radial-gradient(circle at 50% 20%,#5f8ba44d,transparent 34%),repeating-linear-gradient(45deg,transparent 0 27px,#b8d5e008 27px 28px); }
.panel-header { flex:0 0 62px; height:62px; padding:0 4px 4px; border-bottom:2px solid #8f744e; }
.panel-header::after { content:""; position:absolute; left:14px; right:14px; top:59px; height:2px; background:linear-gradient(90deg,transparent,#e4bd74 20% 80%,transparent); }
.panel-header h2 { color:#fff0c7; font-size:22px; text-shadow:0 2px 4px #000; }
.panel-header .eyebrow { color:#c79858; font-size:8px; }
.panel-badge { border:2px solid #61451e; background:linear-gradient(#ffe174,#e79c31); box-shadow:0 3px 0 #352316; }
.panel-content { padding:12px 2px 6px; overscroll-behavior:contain; scrollbar-width:thin; }
.deck-board,.collection-board { border:2px solid #6f573a; border-radius:11px; background:linear-gradient(180deg,#1b2a34ed,#101a22f5); box-shadow:inset 0 0 0 1px #ffe0aa14,0 8px 20px #0008; }
.deck-board { padding:10px; }
.collection-board { margin-top:11px; padding:10px 8px 12px; }
.section-heading,.collection-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:39px; margin-bottom:8px; }
.section-heading span,.collection-heading span { display:block; color:#b49a75; font-size:7px; letter-spacing:.12em; }
.section-heading h3,.collection-heading h3 { margin:1px 0 0; color:#f5dfb3; font:900 17px KaiTi,serif; }
.avg-cost { gap:7px; color:#d5c4a7; font-size:8px; }
.avg-cost i { width:32px; height:32px; }
.deck-slots { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px 7px; }
.deck-slot { position:relative; min-width:0; aspect-ratio:3/4; padding:0; border:0; border-radius:9px; background:#0b1319; }
.deck-slot.filled { cursor:pointer; transition:transform .12s,filter .12s; }
.deck-slot.filled:hover { transform:translateY(-3px); filter:brightness(1.1); }
.deck-slot .card-visual { width:100%; height:100%; border-width:3px; border-radius:8px; }
.deck-slot .card-nameplate { left:2px; right:2px; bottom:5px; min-height:21%; padding:2px; border-width:1px; }
.deck-slot .card-nameplate b { font-size:8px; }
.deck-slot .chakra-cost { width:23px; height:23px; border-width:1px; font-size:9px; }
.deck-slot.empty { display:flex; flex-direction:column; align-items:center; justify-content:center; color:#64727a; border:2px dashed #52616b; background:repeating-linear-gradient(135deg,#132029 0 8px,#101a21 8px 16px); }
.deck-slot.empty span { width:31px; height:31px; display:grid; place-items:center; border:1px solid #53636c; border-radius:50%; font:900 14px KaiTi,serif; }
.deck-slot.empty small { margin-top:5px; font-size:7px; letter-spacing:.1em; }
.deck-tip { margin:8px 0 0; color:#8e9ba2; font-size:7px; text-align:center; }
.collection-filters { display:flex; gap:4px; }
.collection-filters button { padding:6px 9px; color:#aebcc3; border:1px solid #51636f; border-radius:12px; background:#182630; cursor:pointer; font-size:8px; }
.collection-filters button.active { color:#281b10; border-color:#f0c267; background:linear-gradient(#ffe07a,#d68c2b); font-weight:900; }
.card-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px 7px; padding:0; }
.collection-card { min-height:0; padding:4px; border:1px solid #3c4b54; border-radius:10px; background:linear-gradient(#17242d,#0d151b); box-shadow:0 5px 0 #070c10,0 8px 13px #0008; }
.collection-card:hover { transform:translateY(-3px); }
.collection-card.in-deck { box-shadow:0 0 0 2px #efad4c,0 6px 0 #4c2c14,0 9px 15px #0009; }
.collection-card.in-deck::after { right:-2px; top:-4px; padding:3px 4px; border-width:1px; border-radius:5px; font-size:6px; }
.collection-card .card-visual { border-width:3px; border-radius:8px; }
.collection-card .card-nameplate { left:2px; right:2px; bottom:8%; min-height:18%; padding:3px 2px; border-width:1px; }
.collection-card .card-nameplate b { font-size:8px; }
.collection-card .card-nameplate small,.collection-card .card-level { font-size:5px; }
.collection-card .chakra-cost { width:23px; height:23px; border-width:1px; font-size:9px; }
.collection-meta { min-height:20px; align-items:center; justify-content:center; padding:6px 1px 1px; font-size:6px; text-align:center; }
.collection-meta > :last-child { display:none; }

.codex-progress { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:12px; margin-bottom:11px; padding:9px 12px; border:1px solid #526775; border-radius:9px; background:#172731d9; }
.codex-progress span,.codex-progress b { display:block; }.codex-progress span { color:#aebcc4; font-size:7px; }.codex-progress b { margin-top:2px; color:#f1d69b; font-size:10px; }
.codex-progress > i { height:8px; overflow:hidden; border:1px solid #0c1216; border-radius:5px; background:#28363e; }.codex-progress > i b { display:block; height:100%; background:linear-gradient(90deg,#39798c,#76d2d7); }
.codex-layout { display:flex; flex-direction:column; gap:11px; min-height:0; }
.codex-detail { position:static; order:1; display:grid; grid-template-columns:42% 1fr; min-height:218px; border:2px solid #9c7848; border-radius:11px; background:linear-gradient(145deg,#f4e4bc,#c79c62); }
.codex-banner { position:relative; height:auto; min-height:218px; border-right:2px solid #7f5f3a; background:#19242b; }
.codex-portrait { object-position:center 28%; }
.codex-seal { position:absolute; left:8px; bottom:8px; width:31px; height:31px; display:grid; place-items:center; color:#fff0c7; border:2px solid #e0bc76; border-radius:50%; background:#a33d32e8; box-shadow:0 3px 7px #0009; font:900 15px KaiTi,serif; }
.codex-copy { padding:15px 14px 13px; }
.codex-number { color:#8e6138; font-size:7px; letter-spacing:.12em; }
.codex-copy h3 { margin:2px 0 6px; font-size:24px; }
.codex-copy .tags { flex-wrap:wrap; gap:4px; margin-bottom:8px; }.codex-copy .tags span { padding:3px 6px; font-size:7px; }
.codex-copy p { margin:0; font-size:9px; line-height:1.55; }
.stat-bars { gap:6px; margin-top:9px; }.stat-row { grid-template-columns:32px 1fr 31px; gap:5px; font-size:7px; }
.codex-list { order:2; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.codex-tab { min-width:0; flex-direction:column; gap:4px; padding:6px 3px; border-radius:8px; }
.codex-tab i { width:44px; height:44px; border-radius:8px; }.codex-tab span { width:100%; font-size:7px; text-align:center; }
.codex-tab.active { box-shadow:inset 0 0 0 1px #ffd77c,0 4px 0 #6a3a1e; }

.settings-wrap { gap:9px; }.setting-row { border:1px solid #5b6c76; background:linear-gradient(100deg,#1b2b35,#132029); box-shadow:0 4px 0 #080e12; }
.tutorial-diagram { border-color:#b98a51; background:linear-gradient(#7a4034 0 45%,#57909b 45% 55%,#596f42 55%); }

/* Battle chrome remains outside the deployment field. */
.game-screen { background:radial-gradient(ellipse at center,#172c36,#05090d 68%); }
.game-shell { border-inline:1px solid #8e744e66; }
.battle-topbar { padding-top:env(safe-area-inset-top); }
.battle-topbar::before { content:""; position:absolute; z-index:-1; left:-14px; right:-14px; top:calc(-10px - env(safe-area-inset-top)); height:84px; background:linear-gradient(#05090dd9,#0710167a 66%,transparent); pointer-events:none; }
.battle-hud { isolation:isolate; }
.battle-hud::after { content:"安全出牌区"; position:absolute; right:10px; top:5px; color:#bdac8c80; font-size:6px; letter-spacing:.12em; }
.hand-card { touch-action:none; }
.emote-toggle { color:transparent; }
.emote-toggle::before { content:"☺"; color:#302217; font-size:21px; line-height:1; }

/* Match result */
.result-modal { background:linear-gradient(180deg,#05080ac7,#11100be8); }
.result-card { width:min(420px,calc(100vw - 28px)); max-height:calc(100dvh - 42px); overflow:visible; padding:39px 24px 22px; border-width:4px; border-radius:8px; }
.result-card::before,.result-card::after { left:-12px; right:-12px; }
.result-card.win { box-shadow:0 0 0 2px #f2cd7580,0 20px 70px #000e,0 0 52px #e69b3555; }
.result-card.loss { filter:saturate(.78); box-shadow:0 20px 70px #000e,0 0 44px #50657944; }
.result-card.loss .result-emblem { background:#354a59; }
.result-heading { text-align:center; }
.result-card .eyebrow { margin:10px 0 2px; font-size:8px; letter-spacing:.28em; }
.result-card h2 { font-size:34px; text-shadow:0 1px #fff0c5; }
.result-emblem { width:78px; height:78px; top:-40px; border-width:5px; font-size:42px; }
.result-stars { margin:4px 0 12px; font-size:21px; }
.result-scoreboard { display:grid; grid-template-columns:1fr 38px 1fr; align-items:center; margin:0 0 10px; overflow:hidden; border:2px solid #79583a; border-radius:9px; background:#8a6846; box-shadow:inset 0 0 0 1px #fff0c44d; }
.result-side { position:relative; min-width:0; min-height:70px; display:flex; flex-direction:column; justify-content:center; padding:10px 34px 10px 10px; text-align:left; }
.result-side-enemy { padding:10px 10px 10px 34px; text-align:right; }
.result-side-player { color:#eafaff; background:linear-gradient(90deg,#2b7f98,#63b8c5); }.result-side-enemy { color:#fff0e6; background:linear-gradient(90deg,#bd6b59,#883c36); }
.result-side small { opacity:.75; font-size:7px; }.result-side b { overflow:hidden; margin-top:2px; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.result-side strong { position:absolute; right:8px; top:50%; transform:translateY(-50%); font-size:27px; text-shadow:0 2px #16323b; }
.result-side-enemy strong { left:8px; right:auto; text-shadow:0 2px #52201e; }
.result-versus { z-index:2; width:42px; height:42px; display:grid; place-items:center; justify-self:center; margin-inline:-2px; color:#3b2818; border:3px solid #71502e; border-radius:50%; background:radial-gradient(circle,#fff2c9,#dda950); box-shadow:0 4px 8px #0008; font:900 9px/1.05 KaiTi,serif; text-align:center; }
.result-stats { margin:10px 0; border-color:#a07b4f; }.result-stat { padding:8px 5px; }.result-stat small { font-size:7px; }.result-stat b { font-size:15px; }
.result-rewards { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 13px; }
.result-rewards > div { min-width:0; display:flex; align-items:center; gap:8px; padding:7px 9px; border:1px solid #9f7b4d; border-radius:8px; background:#dfc493; }
.result-rewards i { width:30px; height:30px; display:grid; place-items:center; flex:none; color:#fff0c7; border:2px solid #5d4026; border-radius:50%; background:#aa4b34; font:900 13px KaiTi,serif; font-style:normal; }
.result-rewards span,.result-rewards small,.result-rewards b { display:block; min-width:0; }.result-rewards small { color:#76583c; font-size:7px; }.result-rewards b { overflow:hidden; margin-top:2px; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.result-actions { grid-template-columns:1.15fr 1fr; gap:9px; }.result-actions .btn { min-height:50px; padding:9px; }.result-actions .btn-primary { box-shadow:0 5px 0 #77311e,0 9px 16px #0007; }.result-actions .btn-secondary { border-color:#766449; background:linear-gradient(#52616a,#2d3940); box-shadow:0 5px 0 #172027; }

@media (max-width:390px), (max-height:760px) {
  #screen-menu.menu-screen { padding-top:max(7px,env(safe-area-inset-top)); padding-bottom:calc(70px + env(safe-area-inset-bottom)); }
  .home-season-chip { top:61px; width:137px; padding-inline:8px; }
  .home-season-chip span { width:27px; height:27px; }
  .mission-chests::before { display:none; }
  .deck-board,.collection-board { padding:8px 7px 10px; }
  .deck-slots { gap:6px 5px; }
  .card-grid { gap:8px 5px; }
  .collection-filters button { padding:5px 7px; font-size:7px; }
  .codex-detail { min-height:202px; }.codex-banner { min-height:202px; }.codex-copy { padding:12px 11px 10px; }.codex-copy h3 { font-size:21px; }.codex-copy p { font-size:8px; }
  .codex-tab i { width:39px; height:39px; }
  .result-card { padding:35px 18px 17px; }.result-emblem { width:68px; height:68px; top:-35px; font-size:36px; }.result-card h2 { font-size:28px; }.result-stars { margin-bottom:8px; }
  .result-side { min-height:62px; }.result-actions { grid-template-columns:1fr 1fr; }.result-actions .btn { min-height:45px; font-size:10px; }
}

@media (max-width:360px), (max-height:680px) {
  .home-season-chip { display:none; }
  .collection-meta { min-height:15px; padding-top:4px; }
  .collection-card .card-nameplate b { font-size:7px; }
  .codex-detail { grid-template-columns:39% 1fr; min-height:188px; }.codex-banner { min-height:188px; }.stat-bars { margin-top:6px; }
  .result-scoreboard { margin-bottom:7px; }.result-rewards { margin-bottom:9px; }.result-card .eyebrow { margin-top:6px; }
}

/* v3.9 friend battle primary entry */
.home-launch { flex-basis:213px; }
#screen-menu .friend-battle-button {
  width:100%; color:#082029; text-shadow:0 1px #d9ffff; border-color:#c8fbff;
  background:linear-gradient(180deg,#78e4eb,#33a6bd 72%,#24758f);
  box-shadow:0 6px 0 #12495e,0 11px 20px #0009;
}
#screen-menu .friend-battle-button:hover { filter:brightness(1.08) saturate(1.08); }
#screen-menu .friend-battle-button:active { box-shadow:0 2px 0 #12495e,0 6px 12px #0008; }

.friend-modal { z-index:70; padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom)); background:rgba(3,8,12,.86); }
.friend-card { position:relative; width:min(390px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:hidden; gap:7px; padding:25px 18px 15px; border:3px solid #ad8751; box-shadow:0 22px 70px #000f,0 0 38px #4ec7d033; }
.friend-card .eyebrow { margin:0; line-height:1; }.friend-card h2 { margin:0; font-size:27px; line-height:1.05; }.friend-close { position:absolute; right:10px; top:9px; width:31px; height:31px; cursor:pointer; color:#efe1c2; border:1px solid #8c7656; border-radius:50%; background:#26333a; font-size:21px; line-height:1; }
.friend-card .btn-primary { min-height:48px; padding:9px 14px; box-shadow:0 4px 0 #75331d,0 7px 13px #0006; font-size:14px; }
.friend-card .btn-primary:disabled { cursor:not-allowed; color:#776a59; background:linear-gradient(#c1ab87,#968267); box-shadow:0 3px 0 #665744; filter:none; }
.friend-card .btn-secondary { min-height:42px; padding:7px 10px; color:#fff1c9; border-color:#7194a2; background:linear-gradient(#315365,#1b303b); font-weight:900; text-shadow:0 1px 2px #000; }
.friend-card .btn-secondary:hover { color:#fff9e8; filter:brightness(1.14); }
.friend-card .btn-secondary:disabled { cursor:not-allowed; color:#8e999d; border-color:#526169; background:#25343b; box-shadow:0 3px 0 #111b20; text-shadow:none; }
.friend-card .btn-ghost { min-height:42px; padding:7px 10px; }
.online-status { min-height:34px; display:grid; grid-template-columns:12px 1fr auto; align-items:center; gap:8px; padding:7px 10px; color:#c0cbd0; border:1px solid #53636b; border-radius:8px; background:#111a20; text-align:left; font-size:9px; }
.online-status i,.online-match-badge i { width:9px; height:9px; border-radius:50%; background:#77858b; box-shadow:0 0 0 2px #1b252a; }
.online-status b { color:#82939b; font-size:8px; text-align:right; }.online-status[data-state="connected"] i,.online-status[data-state="room"] i { background:#6be5ad; box-shadow:0 0 9px #55e5a6; }.online-status[data-state="connecting"] i,.online-status[data-state="reconnecting"] i { background:#f2bc5a; animation:onlinePulse .9s infinite alternate; }.online-status[data-state="error"] i,.online-status[data-state="offline"] i { background:#dc6c62; }
@keyframes onlinePulse { to { opacity:.35; transform:scale(.7); } }
.friend-entry,.friend-room { display:flex; flex-direction:column; gap:7px; }.friend-entry[hidden],.friend-room[hidden] { display:none!important; }.friend-field { display:flex; flex-direction:column; gap:4px; text-align:left; }.friend-field span { color:#73563c; font-size:8px; font-weight:900; }
.friend-field input,.join-line input { min-width:0; height:40px; padding:7px 11px; color:#f8ead0; border:2px solid #746044; border-radius:8px; outline:0; background:#152129; box-shadow:inset 0 2px 7px #0008; font-weight:800; }
.friend-field input:focus,.join-line input:focus { border-color:#65c7d3; box-shadow:0 0 0 3px #5fd6e026,inset 0 2px 7px #0008; }.join-line { display:grid; grid-template-columns:1fr 78px; gap:7px; }.join-line input { text-align:center; font-size:16px; letter-spacing:.18em; }
.friend-divider { position:relative; color:#8d795d; font-size:7px; }.friend-divider::before { content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:#a1845a66; }.friend-divider span { position:relative; padding:0 9px; background:#e7d0a6; }
.friend-tip { margin:0; color:#765e45; font-size:8px; line-height:1.5; }
.friend-room > small { color:#8c6c47; font-weight:900; letter-spacing:.2em; }.room-code { display:flex; align-items:center; justify-content:center; gap:10px; padding:6px 9px; cursor:pointer; color:#fff2c8; border:2px solid #b38548; border-radius:10px; background:linear-gradient(#2e4854,#172830); box-shadow:0 3px 0 #0a1115; }.room-code span { font-size:23px; font-weight:950; letter-spacing:.18em; }.room-code i { color:#95e9ef; font-size:8px; font-style:normal; }
.room-players { display:grid; gap:5px; }.room-players > div { display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:8px; min-height:44px; padding:5px 8px; border:1px solid #847056; border-radius:8px; background:#d8bd8d; text-align:left; }.room-players > div > i { width:28px; height:28px; display:grid; place-items:center; color:#fff0c6; border:2px solid #4c3525; border-radius:50%; background:#9b4b39; font:900 13px KaiTi,serif; font-style:normal; }.room-players > div:nth-child(2)>i { background:#347b8c; }.room-players span>* { display:block; }.room-players small { color:#71583e; font-size:7px; }.room-players b { max-width:160px; overflow:hidden; color:#34271d; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.room-players em { padding:4px 6px; color:#725a43; border-radius:7px; background:#b69a6d; font-size:7px; font-style:normal; font-weight:900; }.room-players em.ready { color:#0e402e; background:#72d6a8; }
.room-notice { padding:6px 8px; color:#664c33; border-left:3px solid #bd7845; background:#d9bb86; font-size:8px; line-height:1.35; text-align:left; }
.room-actions { display:grid; grid-template-columns:1.3fr .8fr; gap:7px; }

.online-match-badge { position:absolute; z-index:14; left:50%; top:68px; transform:translateX(-50%); display:grid; grid-template-columns:8px auto auto; align-items:center; gap:5px; padding:4px 8px; color:#c9faff; border:1px solid #54adba; border-radius:10px; background:#0b2029df; box-shadow:0 3px 10px #0008; font-size:7px; pointer-events:none; }.online-match-badge i { width:6px; height:6px; background:#61e4aa; box-shadow:0 0 7px #61e4aa; }.online-match-badge b { color:#8fc4cb; font-size:6px; }

@media (max-width:390px), (max-height:760px) {
  #screen-menu.menu-screen { left:0; width:100vw; max-width:100vw; transform:none; overflow-x:hidden; }
  .home-topbar { width:100%; min-width:0; }.mission-reward { flex:0 0 108px; min-width:0; }.resource-row { flex:1 1 auto; min-width:0; }.resource-pill { flex:1 1 0; min-width:0; grid-template-columns:23px minmax(25px,1fr) 13px; }.resource-pill span { font-size:15px; }
  .home-profile-card { width:100%; min-width:0; grid-template-columns:43px minmax(0,1fr) 48px 58px; }.profile-quick { gap:3px; }.profile-quick button { width:27px; }
  .home-nav { width:100vw; }
  .home-launch { flex-basis:192px; }.mission-chests { height:26px; }.chest { height:23px; }.launch-actions { gap:7px; }
  .friend-card { padding:24px 14px 13px; }.room-code span { font-size:21px; }
}
@media (max-height:680px) and (max-width:390px) {
  .home-launch { flex-basis:177px; }.home-stage { min-height:185px; }.launch-actions { gap:6px; } #screen-menu .btn-battle { min-height:56px; }
  .friend-card { gap:5px; padding-top:20px; }.friend-card h2 { font-size:23px; }.friend-card .eyebrow { font-size:7px; }.online-status { min-height:30px; padding:5px 8px; }.friend-entry,.friend-room { gap:5px; }.room-players > div { min-height:39px; }.friend-card .btn-primary { min-height:43px; }
}