:root {
  --navy: #07152e;
  --navy-2: #0b2347;
  --panel: #0a1c38;
  --line: #2b527d;
  --cyan: #35d8ff;
  --gold: #ffcc3d;
  --green: #20b65a;
  --coral: #ff4f64;
  --white: #f7fbff;
  --muted: #9eb5ce;
  --shadow: 0 12px 32px rgba(0, 4, 18, .38);
}
* { box-sizing: border-box; }
html { background: var(--navy); }
body { margin: 0; min-height: 100vh; overflow-x: hidden; color: var(--white); background: radial-gradient(circle at 50% -10%, #12396e 0, var(--navy) 42rem); font-family: "Noto Sans Thai", system-ui, sans-serif; }
body * { font-family: "Chakra Petch", "Noto Sans Thai", "Segoe UI", Arial, sans-serif !important; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.site-header { height: 82px; display: flex; align-items: center; gap: 28px; padding: 0 clamp(18px, 4vw, 64px); border-bottom: 1px solid #22466f; background: rgba(3, 13, 30, .94); position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px); }
.brand { display: flex; align-items: center; gap: 12px; min-width: 315px; font-family: "Chakra Petch", sans-serif; }
.brand-ball { display: grid; place-items: center; width: 48px; height: 48px; background: linear-gradient(145deg, #164b7d, #061326); border: 2px solid var(--cyan); box-shadow: 4px 4px 0 #020914; font-size: 25px; transform: rotate(-3deg); }
.brand strong { display: block; font-size: 20px; font-style: italic; letter-spacing: .5px; line-height: 1; }
.brand em { color: var(--cyan); font-style: normal; text-shadow: 2px 2px 0 #075b76; }
.brand small { display: block; color: var(--gold); letter-spacing: 4px; font-size: 9px; font-weight: 700; margin-top: 5px; }
.site-nav { flex: 1; display: flex; justify-content: center; height: 100%; }
.site-nav a { display: grid; place-items: center; padding: 0 20px; color: #c8d6e7; font: 700 14px "Chakra Petch", sans-serif; text-transform: uppercase; border-bottom: 3px solid transparent; }
.site-nav a:hover, .site-nav a.active { color: var(--cyan); background: #0a2140; border-bottom-color: var(--cyan); }
.language-switch { flex: 0 0 auto; padding: 10px 14px; border: 1px solid var(--line); font: 700 13px "Chakra Petch", sans-serif; }
.nav-toggle { display: none; color: white; background: none; border: 0; font-size: 26px; }
main { min-height: calc(100vh - 160px); }
.hero { min-height: 670px; display: grid; grid-template-columns: minmax(320px, .8fr) 1.2fr; align-items: center; overflow: hidden; padding: 40px clamp(24px, 7vw, 120px) 70px; background: linear-gradient(90deg, rgba(5,17,39,.96) 0%, rgba(5,17,39,.76) 42%, rgba(5,17,39,.12) 72%), url("/images/stadium-bg.png") center/cover; border-bottom: 3px solid #2368a1; position: relative; }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 100px; background: linear-gradient(transparent, #07152e); pointer-events: none; }
.hero-copy { z-index: 2; max-width: 640px; }
.hero h1 { margin: 0; font: 800 clamp(52px, 6vw, 104px)/.82 "Chakra Petch", sans-serif; font-style: italic; letter-spacing: -5px; text-shadow: 6px 7px 0 #020a17; }
.hero h1 span, .hero h1 strong { display: block; }
.hero h1 span { font-size: .62em; color: white; letter-spacing: 2px; }
.hero h1 strong { color: var(--cyan); background: linear-gradient(180deg, #58e8ff, #00a4df); background-clip: text; -webkit-text-fill-color: transparent; }
.hero-subtitle { color: var(--gold); font: 800 clamp(20px, 2.2vw, 34px) "Chakra Petch"; letter-spacing: 8px; margin: 14px 0 0; text-transform: uppercase; }
.thai-name { font-size: 22px; font-weight: 800; margin: 12px 0 4px; }
.hero-description { color: #d0dfed; font-size: 18px; line-height: 1.75; max-width: 560px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.btn { min-height: 52px; padding: 13px 24px; display: inline-grid; place-items: center; border: 2px solid transparent; font: 800 16px "Noto Sans Thai", sans-serif; text-transform: uppercase; cursor: pointer; transition: transform .18s, filter .18s; clip-path: polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); }
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn-primary { color: #251b00; background: var(--gold); border-color: #ffe27a; box-shadow: 5px 6px 0 #8f6500; }
.btn-secondary { color: var(--cyan); background: #071b36; border-color: #3280a6; box-shadow: 5px 6px 0 #020b18; }
.control-hint { color: var(--muted); font: 600 12px "Chakra Petch"; margin-top: 28px; letter-spacing: 1px; }
kbd, .control-hint span { border: 1px solid #4a7296; padding: 3px 7px; color: white; background: #0c2546; box-shadow: 2px 2px 0 #020916; }
.hero-runner { width: min(36vw, 540px); aspect-ratio: 1; justify-self: center; position: relative; overflow: hidden; filter: drop-shadow(16px 20px 4px rgba(0,0,0,.36)); z-index: 1; }
.hero-runner img { position: absolute; width: 800%; height: 100%; max-width: none; object-fit: fill; left: -300%; top: 0; image-rendering: pixelated; }
.hero-coin { position: absolute; right: 4%; top: 39%; display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; color: #fff6a3; background: #e69700; border: 7px solid #ffda3f; box-shadow: 0 0 38px #ffbd00; font-size: 36px; animation: float 1.4s ease-in-out infinite; }
.hero-hurdle { position: absolute; right: 14%; bottom: 12%; width: 150px; height: 70px; border: 12px solid #f5f8ff; border-top-color: var(--coral); box-shadow: 7px 7px 0 rgba(0,0,0,.35); }
@keyframes float { 50% { transform: translateY(-10px) rotate(8deg); } }
.section { max-width: 1400px; margin: 0 auto; padding: 70px clamp(20px, 5vw, 64px); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 26px; }
.section h2, .page-hero h1 { margin: 0; font: 800 clamp(28px, 4vw, 50px) "Chakra Petch", sans-serif; text-transform: uppercase; }
.section-heading p, .page-hero p { color: var(--muted); margin: 6px 0 0; }
.section-heading > a { color: var(--cyan); font-weight: 800; }
.nation-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.nation-card { min-height: 90px; display: flex; align-items: center; gap: 13px; padding: 14px; background: linear-gradient(110deg, color-mix(in srgb, var(--team) 25%, #081a35), #081a35 65%); border: 1px solid color-mix(in srgb, var(--team) 70%, #5f7a98); border-left: 5px solid var(--team); box-shadow: var(--shadow); }
.nation-card .flag { font-size: 34px; }
.nation-card h3 { margin: 0; font-size: 16px; }
.nation-card p { margin: 3px 0 0; color: #a8bed5; font-size: 12px; }
.nation-card .skill-icon { margin-left: auto; color: var(--gold); }
.split-section { display: grid; grid-template-columns: 1.3fr .7fr; gap: 28px; }
.leader-list { margin-top: 22px; border-top: 1px solid var(--line); }
.leader-list > div, .ranking-table > div { display: grid; grid-template-columns: 55px 1fr 120px; align-items: center; min-height: 62px; border-bottom: 1px solid #203d60; padding: 0 16px; }
.leader-list b, .ranking-table b { color: var(--cyan); font: 800 17px "Chakra Petch"; }
.leader-list strong, .ranking-table strong { text-align: right; color: var(--gold); font: 800 18px "Chakra Petch"; }
.mission-poster { min-height: 270px; padding: 30px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: radial-gradient(circle, #174b80, #091a35 68%); border: 2px solid #32709c; box-shadow: var(--shadow); text-align: center; }
.mission-poster > span { color: var(--cyan); font: 700 18px "Chakra Petch"; }
.mission-poster > strong { color: var(--gold); font: 800 74px "Chakra Petch"; }
.mission-poster p { margin: -8px 0 18px; color: var(--muted); }
.ad-placeholder { max-width: 900px; margin: 0 auto 50px; min-height: 90px; display: grid; place-items: center; color: #6f89a5; border: 2px dashed #285377; background: #081831; font: 700 15px "Chakra Petch"; letter-spacing: 2px; }
.site-footer { min-height: 78px; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px clamp(20px, 5vw, 64px); border-top: 1px solid #1b3d61; color: #7890aa; font-size: 12px; }
.site-footer a:hover { color: var(--cyan); }
.game-page main { background: #061225; }
.game-shell { max-width: 1680px; margin: 0 auto; display: grid; grid-template-columns: 230px minmax(0, 1fr) 230px; gap: 12px; padding: 18px; }
.game-rail, .game-stage-wrap { background: #07172e; border: 1px solid #346286; box-shadow: var(--shadow); }
.game-rail { padding: 17px; }
.game-rail h2 { margin: 0 0 20px; color: var(--cyan); font: 800 15px "Chakra Petch"; text-transform: uppercase; }
.mission-item { display: flex; gap: 9px; padding: 15px 0; border-bottom: 1px dashed #35516d; }
.mission-item > span { font-size: 23px; }
.mission-item div { flex: 1; }
.mission-item b { display: block; font: 700 12px "Chakra Petch"; }
.mission-item small { color: var(--muted); font-size: 10px; }
progress { appearance: none; width: 100%; height: 7px; margin: 8px 0; }
progress::-webkit-progress-bar { background: #061020; }
progress::-webkit-progress-value { background: var(--cyan); }
.game-stage-wrap { min-width: 0; position: relative; }
.game-hud { min-height: 76px; padding: 8px 12px; display: grid; grid-template-columns: .9fr .9fr .8fr .65fr .65fr 1.15fr 48px; align-items: center; gap: 9px; border-bottom: 1px solid #3c7096; }
.game-hud > div { display: flex; flex-direction: column; }
.game-hud small { color: var(--cyan); font: 700 11px "Chakra Petch"; text-transform: uppercase; }
.game-hud strong { font: 800 clamp(15px, 1.7vw, 24px) "Chakra Petch"; white-space: nowrap; }
.game-hud em { min-height: 13px; color: var(--gold); font-size: 9px; font-style: normal; }
.hud-nation { flex-direction: row !important; justify-content: center; align-items: center; gap: 9px; }
.hud-nation span { font-size: 27px; }
.hud-nation strong { font-size: 16px; }
.hud-speed strong { color: var(--green); font-size: 15px; }
.hud-power strong { color: var(--gold); max-width: 150px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.hud-power em { color: var(--cyan); }
.pause-button { width: 46px; height: 46px; color: white; background: #102b50; border: 2px solid #6a94b7; font: 800 22px "Chakra Petch"; cursor: pointer; }
#game-container { aspect-ratio: 16 / 9; position: relative; overflow: hidden; background: #020a18; touch-action: manipulation; }
#game-container canvas { max-width: 100%; max-height: 100%; image-rendering: pixelated; }
.start-panel { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 18px; background: rgba(2, 10, 24, .48); }
.start-panel.hidden { display: none; }
.start-card, .start-panel form { width: min(390px, 92vw); }
.start-panel h1 { margin: 0; padding: 18px 24px 8px; background: #071a33; border: 2px solid var(--cyan); border-bottom: 0; color: white; text-align: center; font: 800 27px "Chakra Petch"; text-transform: uppercase; }
.start-panel form { padding: 10px 24px 22px; background: #071a33; border: 2px solid var(--cyan); border-top: 0; box-shadow: 8px 9px 0 rgba(0,0,0,.4); }
.start-panel label { display: block; color: #9cb4cc; font: 700 11px "Chakra Petch"; text-transform: uppercase; margin: 10px 0; }
.start-panel input, .start-panel select { width: 100%; min-height: 43px; margin-top: 5px; padding: 8px 12px; color: white; background: #0a2547; border: 1px solid #41688b; outline: none; }
.start-panel input:focus, .start-panel select:focus { border-color: var(--cyan); }
.start-panel .btn { width: 100%; margin-top: 5px; }
.player-summary { display: none; margin: 0 0 8px; color: var(--cyan); font-weight: 700; text-align: center; }
.returning-player .player-summary { display: block; }
.returning-player label { display: none; }
.change-player-button { display: none; width: 100%; margin-top: 14px; padding: 8px; color: #9eb5ce; background: transparent; border: 1px solid #41688b; cursor: pointer; }
.returning-player .change-player-button { display: block; }
.form-error { color: #ff8492; text-align: center; margin: 10px 0 0; font-size: 12px; }
.pause-overlay { display: none; position: absolute; inset: 0; z-index: 8; place-content: center; color: var(--gold); background: rgba(2,10,24,.78); text-align: center; font: 800 44px "Chakra Petch"; pointer-events: none; }
.pause-overlay.visible { display: grid; }
.pause-overlay small { color: white; font-size: 13px; }
.game-toast { position: absolute; z-index: 12; top: 18px; left: 50%; max-width: 80%; padding: 9px 16px; color: #07152e; background: var(--cyan); font-weight: 800; opacity: 0; transform: translate(-50%, -15px); transition: .2s; pointer-events: none; }
.game-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.touch-controls { display: none; }
.skill-rail { text-align: center; }
.skill-hero { width: 90px; height: 90px; display: grid; place-items: center; margin: 25px auto 15px; border-radius: 50%; border: 2px solid var(--gold); background: #12325e; font-size: 42px; box-shadow: 0 0 26px rgba(255,204,61,.22); }
.skill-rail > strong { font: 800 17px "Chakra Petch"; color: var(--gold); }
.skill-rail p { color: var(--muted); font-size: 12px; line-height: 1.6; }
.skill-rail small { color: #6e89a4; font: 700 9px "Chakra Petch"; }
.skill-rail hr { margin: 25px 0; border: 0; border-top: 1px solid #294967; }
.control-list { text-align: left; line-height: 2 !important; }
.skill-meter { height: 8px; background: #020b18; margin: 18px 0; }
.skill-meter span { display: block; width: 68%; height: 100%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.page-hero { min-height: 260px; display: grid; align-content: center; justify-items: center; padding: 40px 20px; text-align: center; background: linear-gradient(rgba(4,16,37,.55), #07152e), url("/images/stadium-bg.png") center 65%/cover; border-bottom: 2px solid #2f6791; }
.page-hero h1 { text-shadow: 4px 5px 0 #020916; }
.table-panel, .settings-panel, .legal-copy { max-width: 1050px; margin: 42px auto; padding: clamp(18px, 4vw, 40px); background: #081a34; border: 1px solid #30597c; box-shadow: var(--shadow); }
.period-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 14px; overflow: auto; }
.period-tabs button { color: var(--muted); background: transparent; border: 0; padding: 8px 13px; font: 700 12px "Chakra Petch"; cursor: pointer; }
.period-tabs button.active { color: #04101f; background: var(--cyan); }
.ranking-table > div { grid-template-columns: 65px 1fr 120px 150px; min-height: 70px; }
.ranking-table small { color: var(--muted); }
.ranking-table .top-rank { background: linear-gradient(90deg, rgba(255,204,61,.08), transparent); border-left: 3px solid var(--gold); }
.nation-ranking .ranking-table > div { border-left: 4px solid var(--team); }
.empty-state { color: var(--muted); padding: 28px 10px; }
.how-grid { max-width: 1100px; margin: 55px auto; padding: 0 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.how-grid article { min-height: 290px; padding: 34px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: #081a34; border: 1px solid #315a7c; }
.how-grid article > span { display: grid; place-items: center; width: 90px; height: 90px; color: var(--gold); border: 2px solid var(--cyan); background: #102d53; font: 800 34px "Chakra Petch"; box-shadow: 6px 6px 0 #020a17; }
.how-grid h2 { font: 800 22px "Chakra Petch"; }
.how-grid p, .legal-copy p { color: var(--muted); line-height: 1.8; }
.settings-panel { max-width: 620px; }
.settings-panel label { min-height: 70px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #294967; font-weight: 700; }
.settings-panel input { width: 24px; height: 24px; accent-color: var(--cyan); }

@media (max-width: 1150px) {
  .site-header { gap: 12px; }
  .brand { min-width: auto; }
  .brand strong { font-size: 16px; }
  .site-nav a { padding: 0 10px; font-size: 11px; }
  .game-shell { grid-template-columns: 1fr; }
  .game-rail { display: none; }
  .nation-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 780px) {
  .site-header { height: 68px; padding: 0 16px; justify-content: space-between; }
  .brand-ball { width: 40px; height: 40px; }
  .brand small { display: none; }
  .nav-toggle { display: block; margin-left: auto; }
  .site-nav { position: absolute; display: none; top: 68px; left: 0; right: 0; height: auto; flex-direction: column; padding: 8px 16px 16px; background: #041125; border-bottom: 1px solid var(--line); }
  .site-nav.open { display: flex; }
  .site-nav a { min-height: 46px; justify-items: start; padding: 0 12px; border: 0; }
  .language-switch { padding: 7px 8px; }
  .hero { min-height: 730px; grid-template-columns: 1fr; align-content: center; text-align: center; padding: 50px 20px 80px; background: linear-gradient(rgba(4,15,34,.67), rgba(4,15,34,.92)), url("/images/stadium-bg.png") center/cover; }
  .hero h1 { font-size: clamp(50px, 15vw, 74px); letter-spacing: -3px; }
  .hero-subtitle { letter-spacing: 5px; }
  .hero-copy { margin: auto; }
  .hero-description { font-size: 16px; }
  .hero-actions { justify-content: center; }
  .control-hint { display: none; }
  .hero-runner { width: min(75vw, 400px); margin-top: -20px; }
  .hero-coin { width: 48px; height: 48px; font-size: 22px; border-width: 5px; }
  .hero-hurdle { width: 100px; height: 48px; border-width: 8px; }
  .section { padding: 50px 18px; }
  .section-heading { align-items: start; }
  .nation-grid { grid-template-columns: 1fr 1fr; }
  .nation-card { min-height: 78px; }
  .split-section { grid-template-columns: 1fr; }
  .game-shell { padding: 0; }
  .game-stage-wrap { border-left: 0; border-right: 0; }
  .game-hud { min-height: 62px; grid-template-columns: 1fr .7fr .7fr .75fr 44px; gap: 5px; padding: 7px 9px; }
  .game-hud > div:nth-child(2), .game-hud .hud-power { display: none; }
  .hud-nation strong { display: none; }
  .game-hud strong { font-size: 15px; }
  #game-container { aspect-ratio: 16 / 9; }
  #game-container canvas { width: 100% !important; height: 100% !important; position: static; transform: none; }
  .start-panel h1 { font-size: 21px; }
  .start-panel form { padding: 8px 18px 16px; }
  .start-panel label { margin: 7px 0; }
  .start-panel input, .start-panel select { min-height: 39px; }
  .touch-controls { display: grid; padding: 10px; }
  .touch-controls button { min-height: 58px; color: #03121f; background: var(--cyan); border: 0; font: 800 24px "Chakra Petch"; }
  .touch-controls span { font-size: 12px; }
  .ranking-table > div { grid-template-columns: 45px 1fr 92px; padding: 0 8px; }
  .ranking-table small { display: none; }
  .how-grid { grid-template-columns: 1fr; margin: 32px auto; }
  .site-footer { flex-direction: column; text-align: center; }
}
@media (max-width: 450px) {
  .brand strong { font-size: 13px; }
  .brand-ball { display: none; }
  .nation-grid { grid-template-columns: 1fr; }
  .section-heading > a { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* Community UI V2 */
.community-ui { background: #050f21; }
.community-section { width: min(1500px, calc(100% - 40px)); margin-inline: auto; padding-block: 28px; }
.community-hero { min-height: 610px; display: grid; grid-template-columns: 1fr .95fr; align-items: center; padding: 52px max(5vw, 28px); position: relative; overflow: hidden; background: linear-gradient(90deg, rgba(2,10,25,.95) 0%,rgba(2,10,25,.62) 48%,rgba(2,10,25,.18)), url("/images/stadium-bg.png") center/cover; border-bottom: 3px solid #168bd0; }
.community-hero::after { content:""; position:absolute; inset:auto 0 0; height:110px; background:linear-gradient(transparent,#050f21); }
.community-hero-copy { max-width: 690px; z-index: 3; }
.community-hero h1 { margin:0; font:800 clamp(62px,7.5vw,126px)/.76 "Chakra Petch"; font-style:italic; letter-spacing:-6px; text-shadow:7px 8px 0 #020713; }
.community-hero h1 span,.community-hero h1 strong { display:block; }
.community-hero h1 span { color:#fff; font-size:.57em; letter-spacing:2px; }
.community-hero h1 strong { color:#35d8ff; background:linear-gradient(#f8fdff 2%,#35d8ff 45%,#0496df); background-clip:text; -webkit-text-fill-color:transparent; }
.community-hero .hero-subtitle { margin:20px 0 8px; color:#ffcc3d; font-size:clamp(21px,2vw,34px); }
.community-hero-copy>p:not(.hero-subtitle) { max-width:590px; color:#d3e1f0; font-size:18px; line-height:1.7; }
.btn-blue { color:#fff; background:#086fb7; border-color:#35d8ff; box-shadow:5px 6px 0 #02365e; }
.btn-cyan { color:#031426; background:#35d8ff; border-color:#8beaff; box-shadow:5px 6px 0 #067897; }
.community-hero-runner { width:min(42vw,600px); aspect-ratio:1; justify-self:center; position:relative; z-index:2; overflow:hidden; filter:drop-shadow(18px 24px 5px rgba(0,0,0,.48)); }
.community-hero-runner img { width:1300%; height:100%; max-width:none; position:absolute; left:-100%; object-fit:fill; image-rendering:pixelated; }
.glory-coin { position:absolute; right:9%; top:42%; width:80px; height:80px; display:grid; place-items:center; border-radius:50%; color:#fff5a0; background:#e79800; border:8px solid #ffd33d; box-shadow:0 0 36px #ffbd00; font-size:38px; animation:float 1.4s ease-in-out infinite; }
.hero-barrier { position:absolute; right:15%; bottom:10%; width:170px; height:78px; border:13px solid white; border-top-color:#ff4f64; box-shadow:8px 8px 0 rgba(0,0,0,.4); }
.flag-stream { position:absolute; display:flex; gap:24px; font-size:24px; opacity:.62; animation:flag-wave 7s ease-in-out infinite; z-index:1; }
.flag-stream-left { left:2%; top:18%; transform:rotate(-8deg); }
.flag-stream-right { right:1%; top:24%; transform:rotate(8deg); animation-delay:-3s; }
@keyframes flag-wave { 50% { translate:0 12px; } }
.community-heading,.panel-title { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:18px; }
.community-heading h2,.panel-title h2 { margin:0; color:#fff; font:800 clamp(24px,3vw,42px) "Chakra Petch"; }
.community-heading p { margin:4px 0 0; color:#819bb6; }
.community-heading>span,.panel-title a { color:#35d8ff; font:700 12px "Chakra Petch"; }
.community-nation-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.community-nation-card { min-height:118px; display:grid; grid-template-columns:52px 1fr auto; align-items:center; gap:12px; padding:16px; color:white; text-align:left; background:linear-gradient(115deg,color-mix(in srgb,var(--team) 18%,#07172e),#07172e 65%); border:1px solid color-mix(in srgb,var(--team) 65%,#31597c); border-left:5px solid var(--team); cursor:pointer; position:relative; box-shadow:0 10px 25px rgba(0,0,0,.2); transition:.2s; }
.community-nation-card:hover { translate:0 -4px; border-color:#35d8ff; }
.community-nation-card.selected { border-color:#35d8ff; box-shadow:0 0 0 2px #35d8ff,0 0 24px rgba(53,216,255,.28); }
.nation-card-flag { font-size:36px; }
.nation-card-copy strong,.nation-card-copy small,.nation-card-stats small,.nation-card-stats b { display:block; }
.nation-card-copy strong { font-size:16px; }
.nation-card-copy small { color:#a7bfd6; font-size:11px; margin-top:4px; }
.nation-card-stats { text-align:right; }
.nation-card-stats small { color:#6484a1; font-size:8px; letter-spacing:1px; }
.nation-card-stats b { color:#ffcc3d; font-size:12px; margin-bottom:3px; }
.nation-check { display:none; position:absolute; right:8px; top:6px; color:#07152e; background:#35d8ff; width:20px; height:20px; border-radius:50%; place-items:center; font-size:12px; }
.community-nation-card.selected .nation-check { display:grid; }
.nation-start-bar { min-height:76px; margin-top:16px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 18px; background:#071a34; border:1px solid #2f5e86; }
.nation-start-bar span { color:#a4bbd2; }
.btn.disabled { opacity:.42; pointer-events:none; }
.community-dashboard { display:grid; grid-template-columns:.9fr 1fr 1.25fr; gap:14px; }
.community-panel { min-width:0; padding:18px; background:#071a34; border:1px solid #2f5e86; box-shadow:0 14px 32px rgba(0,0,0,.22); }
.panel-title h2 { color:#35d8ff; font-size:20px; }
.mini-rank-list { border-top:1px solid #244968; }
.mini-rank { width:100%; display:grid; grid-template-columns:34px 1fr auto; gap:10px; min-height:48px; align-items:center; color:white; background:transparent; border:0; border-bottom:1px solid #183a5b; text-align:left; cursor:pointer; }
.mini-rank b { color:#ffcc3d; }.mini-rank strong { color:#d8e7f5; }
.mission-row { display:grid; grid-template-columns:1fr auto 68px; align-items:center; gap:10px; min-height:67px; border-bottom:1px solid #183a5b; }
.mission-row strong,.mission-row small { display:block; }.mission-row small { color:#829bb4; }
.mission-row b { color:#ffcc3d; }.mission-row button,.claim-button { padding:7px 9px; color:#07152e; background:#35d8ff; border:0; font-weight:800; }.mission-row button:disabled,.claim-button:disabled { opacity:.35; }
.shop-preview-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.shop-preview-grid>div { min-height:122px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid #264c6d; background:#091f3d; text-align:center; }
.shop-preview-grid span { font-size:36px; }.shop-preview-grid strong { font-size:11px; margin:6px 0; }.shop-preview-grid small { color:#ffcc3d; }
.community-ad { min-height:92px; display:flex; justify-content:center; align-items:center; gap:24px; color:#7690aa; background:#07172e; border:2px dashed #c79000; letter-spacing:2px; }
.community-ad span { color:#ffcc3d; font:800 22px "Chakra Petch"; }.community-ad small { font-size:9px; }
.bottom-ad-placement { width:min(100% - 24px,1100px); min-height:90px; margin:24px auto; overflow:hidden; contain:layout; }
.bottom-ad-placement .adsbygoogle { width:100%; min-height:90px; }
.ranking-hero { min-height:180px; display:grid; place-content:center; text-align:center; background:linear-gradient(rgba(2,10,24,.48),#050f21),url("/images/stadium-bg.png") center 43%/cover; border-bottom:2px solid #276591; }
.ranking-hero h1 { margin:0; font:800 clamp(34px,5vw,64px) "Chakra Petch"; text-shadow:5px 5px 0 #020713; }.ranking-hero p { color:#a8bfd5; margin:5px 0; }
.ranking-layout { display:grid; grid-template-columns:190px minmax(0,1fr) 240px; gap:14px; }
.period-sidebar,.hall-rail { padding:16px; background:#071a34; border:1px solid #2f5e86; align-self:start; position:sticky; top:100px; }
.period-sidebar h2,.hall-rail h2 { color:#fff; font-size:15px; }
.period-sidebar a { min-height:44px; display:flex; align-items:center; padding:0 12px; margin-bottom:7px; color:#9ab1c8; background:#0a2342; border:1px solid #274866; font-weight:700; }
.period-sidebar a.active,.period-sidebar a:hover { color:white; background:#086cae; border-color:#35d8ff; }
.period-sidebar>small { display:block; color:#66829d; line-height:1.6; margin-top:20px; }
.podium { min-height:170px; display:flex; align-items:end; justify-content:center; gap:12px; padding:18px; background:linear-gradient(#0a2548,#06172f); border:1px solid #315e84; }
.podium-player { width:30%; min-height:130px; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; color:white; background:#071a34; border:1px solid #2f5e86; cursor:pointer; }
.podium-player.place-1 { order:2; min-height:155px; border-color:#ffcc3d; }.podium-player.place-2 { order:1; }.podium-player.place-3 { order:3; }
.podium-rank { position:absolute; left:8px; top:7px; color:#ffcc3d; font:800 22px "Chakra Petch"; }.pixel-avatar { font-size:34px; }.podium-player small { color:#9eb5ce; }.podium-player b { color:#ffcc3d; font-size:20px; }
.community-table { margin-top:12px; border:1px solid #2d5679; background:#06162c; overflow:auto; }
.community-table>div { min-width:700px; min-height:55px; display:grid; align-items:center; border-bottom:1px solid #173653; padding:0 16px; }
.community-table .table-head { min-height:40px; color:#7591ab; font-size:10px; letter-spacing:1px; background:#041124; }
.leaderboard-table>div { grid-template-columns:70px 1.2fr 1fr .8fr .8fr; }.nation-table>div { grid-template-columns:70px 70px 1.2fr .8fr 1fr 1fr; }
.community-table .top-row { border-left:3px solid #ffcc3d; background:linear-gradient(90deg,rgba(255,204,61,.08),transparent); }
.community-table button { color:#35d8ff; background:none; border:0; text-align:left; text-decoration:underline; cursor:pointer; font-weight:700; }.community-table strong { color:#ffcc3d; }
.hall-rail-item { min-height:105px; padding:12px 0; border-bottom:1px solid #244968; }.hall-rail-item small,.hall-rail-item button,.hall-rail-item strong,.hall-rail-item span { display:block; }
.hall-rail-item small { color:#35d8ff; font-weight:800; }.hall-rail-item button { margin:10px 0 4px; color:white; background:none; border:0; padding:0; cursor:pointer; }.hall-rail-item strong { color:#ffcc3d; font-size:18px; }
.horizontal-tabs { display:flex; gap:7px; margin-bottom:18px; overflow:auto; }.horizontal-tabs a,.horizontal-tabs button { min-width:120px; min-height:42px; display:grid; place-items:center; color:#8fa7be; background:#081c37; border:1px solid #2b5173; font-weight:700; cursor:pointer; }.horizontal-tabs .active { color:#061323; background:#35d8ff; }
.nation-podium { display:flex; justify-content:center; align-items:end; gap:14px; margin:20px 0; }.nation-podium-card { width:min(280px,30%); min-height:170px; padding:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid var(--team); background:linear-gradient(145deg,color-mix(in srgb,var(--team) 22%,#071a34),#071a34); position:relative; }.nation-podium-card.place-1 { order:2; min-height:205px; }.nation-podium-card.place-2 { order:1; }.nation-podium-card.place-3 { order:3; }.nation-podium-card>b { position:absolute; top:8px; left:10px; color:#ffcc3d; }.nation-podium-card>span { font-size:42px; }.nation-podium-card h2 { margin:8px 0; }.nation-podium-card strong { color:#ffcc3d; font-size:22px; }.nation-podium-card small { color:#8ca5bd; }
.player-modal { width:min(760px,calc(100% - 30px)); padding:24px; color:white; background:#06162c; border:2px solid #35d8ff; box-shadow:0 0 50px rgba(0,0,0,.65); }.player-modal::backdrop { background:rgba(1,6,15,.8); backdrop-filter:blur(4px); }.modal-close { position:absolute; top:10px; right:12px; color:white; background:none; border:0; font-size:27px; cursor:pointer; }.profile-identity { display:flex; align-items:center; gap:18px; }.profile-identity>span { width:72px;height:72px;display:grid;place-items:center;font-size:38px;background:#0c2b50;border:2px solid #35d8ff; }.profile-identity h2 { margin:0;color:#35d8ff; }.profile-identity p { margin:3px 0;color:#a2b8ce; }.profile-stats { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0; }.profile-stats>div { padding:13px;background:#0a2342;border:1px solid #2d5375; }.profile-stats small,.profile-stats strong { display:block; }.profile-stats small { color:#829ab2;font-size:9px; }.profile-stats strong { color:#ffcc3d;font-size:21px; }.achievement-mini-grid,.achievement-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:10px; }.achievement-mini-grid>div,.achievement-grid article { padding:13px;background:#071b35;border:1px solid #284e70;opacity:.45; }.achievement-mini-grid>div.unlocked { opacity:1;border-color:#20b65a; }.achievement-mini-grid span { font-size:25px; }.achievement-mini-grid strong,.achievement-mini-grid small { display:block; }.achievement-mini-grid strong { font-size:11px; }.achievement-mini-grid small { color:#6d869f;font-size:8px; }.achievement-mini-grid .unlocked small { color:#39d879; }
.fame-feature { min-height:220px; display:grid; place-content:center; grid-auto-flow:column; gap:25px; align-items:center; text-align:left; background:radial-gradient(circle,#153e70,#07172f 65%); border:2px solid #ffcc3d; }.fame-feature>span { color:#ffcc3d;font-size:80px; }.fame-feature small { color:#35d8ff; }.fame-feature h2 { margin:5px 0;font-size:34px; }.fame-feature strong { color:#ffcc3d;font-size:32px; }.achievement-grid { grid-template-columns:repeat(7,1fr);margin:18px 0; }.achievement-grid article { opacity:1;text-align:center; }.achievement-grid span { font-size:36px; }.achievement-grid h3 { font-size:12px;color:#35d8ff; }.achievement-grid p { color:#829bb4;font-size:10px; }
.mission-page-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px; }.mission-card { padding:22px;background:#071a34;border:1px solid #2e5678; }.mission-card>span { font-size:38px; }.mission-card>small { display:block;color:#35d8ff;margin-top:12px; }.mission-card h2 { margin:5px 0 15px; }.mission-card p { color:#8ca4bb; }.mission-card footer { display:flex;align-items:center;justify-content:space-between; }.mission-card footer b { color:#ffcc3d; }.daily-reward { display:flex;align-items:center;justify-content:space-between;padding:25px;background:linear-gradient(90deg,#0c3158,#071a34);border:1px solid #35d8ff; }.daily-reward>div { display:grid;grid-template-columns:auto 1fr;gap:0 15px; }.daily-reward span { grid-row:1/3;font-size:46px; }.daily-reward h2,.daily-reward p { margin:0; }.daily-reward p { color:#9cb2c8; }.daily-reward button { min-height:46px;padding:0 18px;color:#07152e;background:#ffcc3d;border:0;font-weight:800;cursor:pointer; }
.shop-wallet { margin-left:auto;width:max-content;padding:12px 18px;background:#071a34;border:1px solid #ffcc3d;color:#9cb2c8; }.shop-wallet strong { color:#ffcc3d;margin-left:12px; }.shop-tabs { margin-top:18px; }.shop-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:14px; }.shop-item { min-height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center;background:#071a34;border:1px solid #2d5679;transition:.2s; }.shop-item:hover { translate:0 -4px;border-color:#35d8ff; }.shop-item.owned { border-color:#20b65a; }.shop-item>span { font-size:64px; }.shop-item>small { color:#35d8ff; }.shop-item h2 { margin:7px 0 16px;font-size:17px; }.buy-button { padding:10px 16px;color:#07152e;background:#ffcc3d;border:0;font-weight:800;cursor:pointer; }
.page-transition { position:fixed;inset:0;z-index:9999;background:#050f21;transform:translateY(-100%);pointer-events:none;transition:.28s; }.is-leaving .page-transition { transform:translateY(0); }

@media (max-width:1200px) {
  .community-nation-grid { grid-template-columns:repeat(3,1fr); }
  .community-dashboard { grid-template-columns:1fr 1fr; }.shop-preview { grid-column:1/-1; }
  .ranking-layout { grid-template-columns:160px 1fr; }.hall-rail { grid-column:1/-1;position:static;display:grid;grid-template-columns:repeat(4,1fr);gap:10px; }.hall-rail h2 { grid-column:1/-1; }
  .achievement-grid { grid-template-columns:repeat(4,1fr); }.shop-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:1500px) and (min-width:781px) {
  .site-header { padding-inline:20px; gap:12px; }
  .site-nav a { padding-inline:9px; font-size:11px; }
}
@media (max-width:780px) {
  .site-nav { max-height:calc(100vh - 68px);overflow:auto; }
  .community-section { width:min(100% - 24px,1500px);padding-block:20px; }
  .community-hero { min-height:700px;grid-template-columns:1fr;padding:45px 20px 70px;text-align:center; }.community-hero h1 { font-size:clamp(54px,16vw,78px); }.community-hero-copy>p { margin-inline:auto; }.community-hero .hero-actions { justify-content:center; }.community-hero-runner { width:min(80vw,420px);margin-top:-35px; }.flag-stream { display:none; }
  .community-nation-grid { grid-template-columns:1fr; }.community-nation-card { min-height:100px; }.nation-start-bar { position:static;flex-direction:column;align-items:stretch;text-align:center; }.nation-start-bar .btn { width:100%; }
  .community-dashboard { grid-template-columns:1fr; }.shop-preview { grid-column:auto; }.shop-preview-grid { grid-template-columns:repeat(2,1fr); }
  .ranking-layout { grid-template-columns:1fr; }.period-sidebar { position:static;display:flex;gap:7px;overflow:auto; }.period-sidebar h2,.period-sidebar>small { display:none; }.period-sidebar a { min-width:120px;margin:0;justify-content:center; }.hall-rail { grid-template-columns:1fr 1fr; }
  .podium { gap:5px;padding:10px; }.podium-player { width:33%;font-size:10px; }.podium-player b { font-size:13px; }
  .nation-podium-card { width:33%;padding:10px; }.nation-podium-card h2 { font-size:12px; }.nation-podium-card strong { font-size:13px; }
  .profile-stats,.achievement-mini-grid { grid-template-columns:1fr 1fr; }.achievement-grid { grid-template-columns:repeat(2,1fr); }.fame-feature { grid-auto-flow:row;text-align:center;gap:4px;padding:25px; }
  .mission-page-grid,.shop-grid { grid-template-columns:1fr 1fr; }.daily-reward { flex-direction:column;gap:18px;text-align:center; }.daily-reward>div { display:block; }
  .community-ad { flex-direction:column;gap:3px;text-align:center;padding:16px; }
}
@media (max-width:480px) {
  .community-hero { min-height:650px; }.community-hero .hero-actions { flex-direction:column; }.community-hero .btn { width:100%; }.community-hero-runner { width:88vw; }
  .hall-rail,.mission-page-grid,.shop-grid { grid-template-columns:1fr; }.achievement-grid { grid-template-columns:1fr 1fr; }
  .profile-stats { grid-template-columns:1fr; }.player-modal { padding:18px; }
}
@media (orientation:landscape) and (max-height:600px) {
  .community-hero { min-height:520px;grid-template-columns:1fr .8fr;padding-block:30px; }.community-hero h1 { font-size:68px; }.community-hero-runner { width:42vw;margin:0; }
}
.auth-shell{min-height:calc(100vh - 160px);display:grid;place-items:center;padding:30px}.auth-card{width:min(430px,100%);padding:34px;background:#071a34;border:2px solid #35d8ff;box-shadow:10px 10px 0 #020713}.auth-card h1{margin:0;color:#35d8ff;font-size:36px}.auth-card p{color:#9eb5ce}.auth-card label{display:block;margin:18px 0;color:#c9d9e8;font-weight:700}.auth-card input{display:block;width:100%;min-height:48px;margin-top:7px;padding:10px 12px;color:#fff;background:#0a2547;border:1px solid #41688b}.auth-card button{width:100%;min-height:50px;color:#07152e;background:#ffcc3d;border:0;font-weight:800}
.fame-category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}.fame-category-grid article{padding:18px;background:#071a34;border:1px solid #2d5679}.fame-category-grid h2{margin:0 0 12px;color:#35d8ff;font-size:17px}.fame-category-grid p{display:grid;grid-template-columns:32px 1fr auto;gap:8px;margin:0;padding:10px 0;border-bottom:1px solid #173653}.fame-category-grid b{color:#9eb5ce}.fame-category-grid strong{color:#ffcc3d;font-size:12px}@media(max-width:1000px){.fame-category-grid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.fame-category-grid{grid-template-columns:1fr}}
.community-empty-state{max-width:680px;margin:28px auto;padding:52px 24px;text-align:center;background:#071a34;border:1px solid #2d5679}.community-empty-state>span{font-size:54px}.community-empty-state h2{margin:12px 0 6px;color:#35d8ff}.community-empty-state p,.mini-empty{color:#91a9c0}.community-empty-state .btn{margin-top:18px}.mini-empty{padding:18px;text-align:center}
.nation-class-badge{display:inline-block;margin:8px auto;padding:4px 9px;color:#07152e;background:#35d8ff;font-size:9px;font-weight:800;letter-spacing:1px}.profile-favorites{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.profile-favorites span{padding:10px;color:#829ab2;background:#071b35;border:1px solid #284e70;font-size:10px}.profile-favorites b{display:block;color:#ffcc3d;margin-top:4px}.scene-category{margin-bottom:34px}.scene-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.scene-card{overflow:hidden;background:#071a34;border:1px solid #2d5679;transition:.2s}.scene-card img{width:100%;aspect-ratio:16/9;display:block;object-fit:cover}.scene-card>div{padding:16px}.scene-card small{color:#35d8ff}.scene-card h3{margin:5px 0}.scene-card p{min-height:42px;color:#91a9c0;font-size:12px}.scene-card strong{display:block;color:#20b65a}.scene-card>div>span{display:block;color:#ffcc3d;font-size:11px;margin-top:5px}.scene-card.locked img{filter:grayscale(.8) brightness(.45)}.scene-card.locked strong{color:#9eb5ce}.scene-card.unlocked:hover{translate:0 -4px;border-color:#35d8ff}@media(max-width:1100px){.scene-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.scene-grid,.profile-favorites{grid-template-columns:1fr}}

/* Production stabilization: gameplay-first layout */
.game-shell{max-width:1920px;grid-template-columns:minmax(170px,12%) minmax(0,1fr) minmax(170px,12%);gap:10px;padding:12px;transition:grid-template-columns .22s ease}
.game-shell.hide-mission-rail{grid-template-columns:38px minmax(0,1fr) minmax(170px,12%)}
.game-shell.hide-skill-rail{grid-template-columns:minmax(170px,12%) minmax(0,1fr) 38px}
.game-shell.hide-mission-rail.hide-skill-rail{grid-template-columns:38px minmax(0,1fr) 38px}
.game-rail{position:relative;overflow:hidden;transition:opacity .18s,padding .18s}
.game-rail.collapsed{padding-inline:0}.game-rail.collapsed>*:not(.rail-collapse){opacity:0;pointer-events:none}
.rail-collapse{position:absolute;z-index:3;top:8px;right:7px;width:28px;height:28px;color:var(--cyan);background:#0a2a4d;border:1px solid #39759f;cursor:pointer}
.skill-rail .rail-collapse{right:auto;left:7px}
.game-hud{grid-template-columns:.9fr .9fr .8fr .65fr .75fr .65fr 1.05fr 48px}
.mission-item.completed{border-color:#20b65a;background:rgba(32,182,90,.08)}
.mission-item.completed b{color:#56e38c}
.nation-live-stats{margin-top:18px;padding:10px;display:grid;gap:7px;color:#9eb5ce;background:#061326;border:1px solid #294967;font-size:10px;text-align:left}
.nation-live-stats span{display:flex;justify-content:space-between;gap:8px}.nation-live-stats b{color:var(--gold)}
.nation-preview{display:grid;grid-template-columns:58px 1fr;gap:12px;align-items:center;margin:10px 0 14px;padding:11px;color:#c9d9e8;background:#06172d;border:1px solid #28577b}
.nation-preview-flag{font-size:34px;text-align:center}.nation-preview strong,.nation-preview small{display:block}.nation-preview strong{color:#fff;font-size:15px}.nation-preview small{margin-top:3px;color:#8da9c4;font-size:10px}.nation-preview small b{color:var(--cyan)}.nation-preview p{margin:6px 0 0;color:#adc0d2;font-size:10px;line-height:1.35}
@media(max-width:1150px){
  .game-shell,.game-shell.hide-mission-rail,.game-shell.hide-skill-rail,.game-shell.hide-mission-rail.hide-skill-rail{position:relative;grid-template-columns:1fr}
  .game-rail{display:block;position:absolute;z-index:25;top:68px;width:min(230px,72vw);max-height:calc(100vh - 96px);overflow:auto;background:rgba(7,23,46,.97)}
  .mission-rail{left:12px}.skill-rail{right:12px}
  .game-rail.collapsed{width:38px;height:42px;min-height:42px;overflow:hidden}
}
@media(max-width:780px){.game-hud{grid-template-columns:1fr .7fr .7fr .8fr .8fr 44px}.game-hud>div:nth-child(2),.game-hud .hud-power,.game-hud .hud-speed{display:none}}
@media(orientation:landscape) and (max-height:600px){.game-page .site-header{position:absolute;transform:translateY(-100%)}.game-page .game-shell{padding:0;min-height:100vh}.game-page .game-hud{min-height:54px}.game-page #game-container{height:calc(100vh - 54px);aspect-ratio:auto}.game-page .touch-controls{position:absolute;right:10px;bottom:10px;z-index:20;width:180px;padding:0;opacity:.82}}
.scene-card progress{width:100%;height:7px;margin-top:12px;accent-color:#35d8ff}.scene-card [data-unlock-progress-label]{display:block;margin-top:4px;color:#91a9c0}
.game-debug-overlay{display:none;position:absolute;z-index:95;top:62px;left:10px;min-width:210px;margin:0;padding:10px 12px;color:#8ff5ff;background:rgba(2,10,24,.92);border:1px solid #35d8ff;font:700 11px/1.45 monospace;pointer-events:none;text-align:left;white-space:pre-wrap}.game-debug-overlay.visible{display:block}@media(max-width:600px){.game-debug-overlay{top:56px;left:6px;min-width:180px;font-size:9px}}
.mission-item [data-mission-state],.mission-row [data-mission-state],.mission-card [data-mission-state]{display:block;margin-top:5px;color:#35d8ff;font-size:10px;font-style:normal;font-weight:800;letter-spacing:.05em}.mission-item[data-mission-state=claimable],.mission-row.claimable,.mission-card.claimable{border-color:#ffcc3d;box-shadow:0 0 0 1px rgba(255,204,61,.2)}.mission-item[data-mission-state=claimed],.mission-row.claimed,.mission-card.claimed{opacity:.72;border-color:#20b65a}.mission-row.claimable button,.mission-card.claimable button{color:#07152e;background:#ffcc3d;border-color:#ffcc3d;cursor:pointer}.nation-card-copy em{display:block;margin-top:5px;color:#7f9bb7;font-size:9px;font-style:normal;line-height:1.35}.nation-card-stats{grid-template-columns:repeat(3,auto);align-items:end}
@media(max-width:780px){.game-page .community-section,.game-page .site-footer{display:none}.game-page main{min-height:calc(100vh - 68px)}.game-page .game-stage-wrap{min-height:calc(100vh - 68px);display:flex;flex-direction:column;justify-content:flex-start}.game-page #game-container{width:100%;margin:auto 0}.game-page .game-hud{flex:0 0 auto}}
@media(max-width:780px){.game-page .bottom-ad-placement{display:none}.game-page .game-hud strong{font-size:14px}.game-page .game-hud small{font-size:9px}}
@media(min-width:1151px) and (max-height:800px){.game-rail{padding:12px}.game-rail h2{margin-bottom:10px}.mission-item{padding:9px 0}.skill-hero{width:62px;height:62px;margin:12px auto 8px;font-size:30px}.skill-rail hr{margin:12px 0}.nation-live-stats{margin-top:10px}}

/* Mobile beta polish: balanced header spacing and safe-area support. */
@media(max-width:780px){
  .site-header{
    height:calc(74px + env(safe-area-inset-top));
    min-height:74px;
    padding:env(safe-area-inset-top) 14px 0;
    gap:10px;
  }
  .brand{min-width:0;max-width:190px;gap:8px}
  .brand strong{font-size:14px;line-height:1.12;letter-spacing:.2px;white-space:nowrap}
  .brand em{display:inline}
  .nav-toggle{flex:0 0 38px;width:38px;height:44px;margin-left:auto;padding:0}
  .language-switch{min-width:54px;padding:8px 9px;text-align:center}
  .site-nav{top:calc(74px + env(safe-area-inset-top));max-height:calc(100vh - 74px - env(safe-area-inset-top))}
}
@media(max-width:380px){
  .site-header{padding-inline:11px;gap:7px}
  .brand{max-width:160px}
  .brand strong{font-size:12.5px}
  .language-switch{min-width:50px;padding-inline:7px}
}