/* Railway Royale: presentation layer. Field geometry and game rules stay in ui.css / simulation. */
:root{--navy:#072a48;--blue:#008bd4;--gold:#ffc52c;--text:#fff;--muted:#bedcf0;--panel:#256e9f;--ink:#f2f8ff;--edge:#082b4b;--display:'Arial Black','Arial Rounded MT Bold','Trebuchet MS',Arial,sans-serif;--outline:0 2px 0 #102c48,1px 0 #102c48,-1px 0 #102c48,0 -1px #102c48;--tiles:repeating-linear-gradient(45deg,transparent 0 56px,#002d5066 57px,#69d2ef24 59px,transparent 61px 117px),repeating-linear-gradient(-45deg,transparent 0 56px,#002d5066 57px,#69d2ef24 59px,transparent 61px 117px)}
body{font-family:'Trebuchet MS',Arial,sans-serif;background:#07527e}
button{transition:filter .12s,transform .12s; -webkit-tap-highlight-color:transparent}
button:disabled{opacity:.55;filter:grayscale(.85)}
button:not(:disabled):hover{filter:brightness(1.13)}
button:focus-visible,input:focus-visible{outline:3px solid #fff7ad;outline-offset:4px}
h1,h2,h3,.game-btn,.node,.level-medal,.resource strong,.round-stat b,.round-identity b,.energy-pack>b,.booster-card>b,.tab{font-family:var(--display);font-weight:900;text-shadow:var(--outline)}
.icon{filter:drop-shadow(0 2px 0 #05243e70);stroke-width:2.2}
.icon-bolt{color:#fff09b;fill:#ffbf20;stroke:#795018;stroke-width:1.3}
.icon-heart{color:#ff6479;fill:#fa4c71;stroke:#8b2049;stroke-width:1.2}
.icon-trophy{color:#ffdd57;fill:#eab02e;stroke:#815427;stroke-width:1.4}
.icon-star{fill:#ffcd32;color:#fff29b}
.icon-ghost{fill:#e5f7ff;color:#507398}
.icon-snow{color:#b8f8ff}
.icon-mail{fill:#e9f6f4;color:#34709d}
.icon-train{fill:#55c4ed;color:#d7faff}
.icon-bag{fill:#ab75df;color:#ebd4ff}
.icon-tools{fill:#becfd4;color:#f2faff}
.icon-color{fill:#f795ea;color:#fff1fb}
.icon-signal{fill:#173c5e;color:#e3f5ff}
.icon-friends{fill:#5ed4ff;color:#cdf4ff}
.icon-book{fill:#52acdc;color:#d9faff}
.icon-gear{fill:#afcfdd;color:#f0faff}
.scene{background:linear-gradient(90deg,#073c62ad,#085d8299),url('/assets/ui/valley.svg') center/cover}
.scene:before{background:var(--tiles);opacity:.5}
.scene:after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 120px #021e4870;pointer-events:none}
.screen-corner{color:#b8ddee;font-weight:700;letter-spacing:1px;z-index:1}
.welcome-layout{inset:50% auto auto 50%;transform:translate(-50%,-50%);width:min(1120px,94%);height:min(530px,83%);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;gap:14px 6%;padding:0;z-index:1}
.logo{grid-column:1;grid-row:1;align-self:end;filter:none;width:100%}
.logo small{font-size:10px;letter-spacing:4px;color:#cef0ff;text-shadow:0 2px #18365a}
.logo h1{font-family:var(--display);font-size:clamp(74px,9vw,118px);font-style:italic;color:#fff2a1;-webkit-text-stroke:2px #5d381d;text-shadow:0 4px #e5a930,0 8px #97531e;letter-spacing:-6px;transform:rotate(-3deg)}
.logo p{font-size:10px;color:#fff5bd;letter-spacing:2px;margin-top:18px}
.railway-hero{grid-column:1;grid-row:2;width:115%;max-height:100%;object-fit:contain;justify-self:center;align-self:center;filter:drop-shadow(0 10px 12px #00284350);pointer-events:none}
.login-panel,.play-actions{grid-column:2;grid-row:1/span 2;align-self:center;justify-self:center;width:100%}
.login-panel{background:linear-gradient(#267ba4f2,#124b77f5);border:3px solid #092b4c;border-bottom:8px solid #092b4c;border-radius:12px;box-shadow:inset 0 2px #82d5f9,inset 0 0 0 2px #3b95c5,0 12px 30px #022b5766;padding:27px 24px;backdrop-filter:blur(8px)}
.login-panel h2{font-size:23px;color:white;line-height:1.25;margin-bottom:10px}
.login-panel p{font-size:13px;color:#c3e5f8}
.providers{gap:8px}
.provider{background:linear-gradient(#f4fcff,#bcd5e9);border:2px solid #143f68;border-bottom:5px solid #4e789e;border-radius:7px;width:46px;height:50px;box-shadow:inset 0 2px white,0 3px #032f51}
.login-divider{color:#a4c5df;letter-spacing:1px}
.game-btn{border:2px solid #092c4f;border-bottom:6px solid #07568b;border-radius:8px;background:linear-gradient(#43d7ff 0,#08aeed 49%,#0798df 50%,#078ada 100%);box-shadow:0 2px 0 1px #072b49,inset 0 2px #acF2ff,inset 2px 0 #8ae6ff66,inset -2px 0 #0666a299;color:white;text-shadow:var(--outline);font-size:14px;letter-spacing:0;min-height:48px;padding:10px 20px}
.game-btn.gold{color:white;text-shadow:0 2px #744312,1px 0 #744312,-1px 0 #744312,0 -1px #744312;background:linear-gradient(#ffe165,#ffca28 49%,#ffb91c 50%,#ffb514);border-color:#6e4a16;border-bottom-color:#c27811;box-shadow:0 2px 0 1px #493513,inset 0 2px #fff9bc,inset 2px 0 #fff19388,inset -2px 0 #df8f1480}
.game-btn.green{background:linear-gradient(#a2f247,#72db31 49%,#58c724 50%,#50bd1f);border-color:#234b28;border-bottom-color:#348519;box-shadow:0 2px 0 1px #13391e,inset 0 2px #e0ffab,inset 2px 0 #cfff9b55;text-shadow:0 2px #285420,1px 0 #285420,-1px 0 #285420}
.game-btn.danger{background:linear-gradient(#ff8684,#f44a54 49%,#e83549 50%,#dd3345);border-color:#672d43;border-bottom-color:#9c253a;box-shadow:0 2px 0 #40203c,inset 0 2px #ffc7b9}
.game-btn.secondary{background:linear-gradient(#82b6d1,#5889b0 49%,#46769f 50%,#3c719a);border-color:#183750;border-bottom-color:#234f72;box-shadow:0 2px 0 #123451,inset 0 2px #c1e4ed}
.game-btn.big{min-width:290px;min-height:88px;border-radius:11px;font-size:34px;border-bottom-width:9px;position:relative}
.game-btn.big:after{content:'';position:absolute;top:7px;right:8px;width:6px;height:6px;background:#fffbbf;border-radius:50%;box-shadow:-5px 0 8px #fff}
.play-actions{gap:28px;padding:35px 25px;border-radius:18px;background:radial-gradient(ellipse,#1592b057,transparent 70%)}
.account-button{border:2px solid #082f50;border-bottom:4px solid #062840;border-radius:8px;background:linear-gradient(#205d88,#14496f);box-shadow:inset 0 1px #6dacce;color:#fff;font-family:var(--display);font-size:13px}
.account-button .avatar{border-radius:7px;background:linear-gradient(#d1effb,#8ab3ce);border-color:#effdff;color:#1d4c6c;padding:6px}
.square-btn{border-radius:8px;width:52px;height:52px;padding:9px;min-height:0}
.settings-corner{z-index:2;top:22px;right:24px}
/* Campaign island and permanent resource / navigation chrome. */
.map-screen{background:var(--tiles),radial-gradient(ellipse at 50% 30%,#188faf,#095686 72%,#073558)}
.map-screen:before{background:linear-gradient(180deg,#06335366,transparent 40%,#062f5877);opacity:1}
.topbar{top:0;left:0;right:0;padding:14px 24px 17px;gap:12px;background:linear-gradient(#0b456bed,#092f53e8);border-bottom:3px solid #3486ae;box-shadow:0 4px #05274799}
.resource{border:2px solid #061f3e;border-radius:7px;background:linear-gradient(#082c4c,#123f61);box-shadow:0 2px #3e82a9,inset 0 2px 5px #001a38;padding-left:9px;height:43px;min-width:116px}
.resource .icon-bolt{stroke:#8c5d15;fill:#ffd143}
.resource.lives .icon-heart{fill:#ff5774;stroke:#9c2447}
.resource strong{font-size:22px}
.resource .add{border:2px solid #305423;border-bottom:4px solid #37771b;background:linear-gradient(#a6ee70,#54c129);border-radius:5px;width:28px;height:30px;box-shadow:inset 0 1px #d7ffa4}
.resource .add .icon{fill:none;stroke:white}
.nav-btn{border-radius:7px;padding:8px 11px;height:51px;min-height:0;gap:7px}
.nav-btn .icon{width:28px;height:28px}
.nav-btn span{font-size:11px}
.badge{border-radius:5px;background:#fc415c;border:1px solid #ffbcc9;box-shadow:0 2px #802948}
.badge[aria-label="Нет новых уведомлений"]{display:none}
.map-heading{top:105px;left:6%;right:6%;text-shadow:var(--outline);pointer-events:none}
.eyebrow{font-size:10px;color:#b7e8fa;letter-spacing:2px}
.map-heading h1{font-size:38px;color:white;margin:6px 0 7px;letter-spacing:-1px}
.map-heading p{color:#bcd9ed;font-size:12px}
.chapter-badge{position:absolute;right:0;top:8px;background:#092e50;border:2px solid #3b90b5;border-bottom:4px solid #05243f;border-radius:7px;color:#fff0aa;padding:13px 17px;font-weight:900;font-size:14px;margin:0;box-shadow:inset 0 1px #79c7d7}
.chapter-badge .icon{height:25px;width:25px}
.journey{inset:216px 5% 99px;overflow:visible}
.map-land{min-width:0;min-height:0;height:100%;background:radial-gradient(ellipse at 40% 40%,#a8cb72,#699954 80%);border:8px solid #92a8aa;border-top:7px solid #cce0c2;border-radius:38px;box-shadow:0 9px 0 #405c66,0 17px 0 #243f58,0 23px 0 #092b48,0 30px 26px #00264480;isolation:isolate}
.map-land:before{content:'';position:absolute;inset:5px;border:2px dashed #d5e6a46b;border-radius:27px;pointer-events:none}
.map-art{border-radius:28px;overflow:hidden}
.level-node .node{width:74px;height:74px;border-radius:19px;border:3px solid #fff4ac;border-bottom:7px solid #c57b13;background:linear-gradient(#ffe37c,#ffcd39 50%,#ffb827 51%);color:#fff;text-shadow:0 2px #7a5018,1px 0 #7a5018,-1px 0 #7a5018;box-shadow:0 4px #715125,0 7px 0 #384c3c88,inset 0 2px #fff9c2;transform:rotate(-5deg);font-size:33px}
.level-node:nth-of-type(even) .node{transform:rotate(5deg)}
.level-node .node:active{transform:translateY(2px)}
.level-node.locked .node{border-color:#b1c4ce;border-bottom-color:#456b7c;background:linear-gradient(#81acbd,#567e97);box-shadow:0 4px #284d65,0 7px #25463f88}
.level-node .node.current{outline:4px solid #fff8be99;outline-offset:5px}
.level-node small{background:#0d3b53ed;border:1px solid #b6dfd075;border-bottom:3px solid #082c3c;border-radius:5px;font-weight:bold;color:#fff;font-size:11px;margin-top:5px}
.level-node .stars{gap:1px;margin-top:8px}
.stars .icon{fill:#4c6571;color:#183b51;width:22px;height:22px;stroke-width:1.5}
.stars .earned{fill:#ffd139;color:#fff0a1;filter:drop-shadow(0 2px #956328)}
.level-node .flag{background:linear-gradient(#efffc7,#bbe772);border:2px solid #fcffe9;border-bottom:4px solid #75a849;color:#284b32;font-size:10px;padding:6px 10px;border-radius:5px;bottom:calc(100% + 9px);box-shadow:0 3px #28534c60}
.level-node .flag:after{border-top-color:#bbe772}
.future-node{top:8%;right:4%;padding:8px 12px;background:#2b634e94;border-color:#d1e0b199;font-size:10px;border-radius:7px}
.future-node b{font-size:17px}
.map-footer{bottom:19px;left:5%;right:5%;gap:14px}
.map-note{background:#0a3558d9;border:1px solid #347fa7;border-bottom:3px solid #062b4a;color:#a8c8e0;border-radius:7px;max-width:330px;font-size:10px;padding:9px 13px}
/* Shared raised-blue windows, shop cards and pre-round loadout. */
dialog{color:#fff;background:var(--tiles),linear-gradient(#3689ae,#1c5786);border:3px solid #092d4e;border-bottom:7px solid #071f3b;border-radius:13px;box-shadow:inset 0 0 0 2px #61b5d6,0 3px #4799bb,0 20px 70px #001d4399;width:min(930px,calc(100vw - 32px));max-width:930px}
dialog::backdrop{background:#03172bbd;backdrop-filter:blur(4px)}
.modal-head{background:linear-gradient(#4797c5,#1d6496 49%,#16588c 50%);border-bottom:3px solid #082f51;box-shadow:inset 0 2px #96def0,0 2px #70b7d1;padding:16px 22px;color:white;gap:12px}
.modal-head h2{font:900 24px var(--display);text-shadow:var(--outline)}
.modal-head>.icon{width:33px;height:33px}
.modal-head .close{border:2px solid #6b2b3c;border-bottom:5px solid #9a293e;border-radius:6px;background:linear-gradient(#ff8b8e,#ed4956 50%,#d93648 51%);box-shadow:inset 0 2px #ffb6ad,0 2px #17334f;width:38px;height:38px}
.modal-body{padding:21px 24px 25px}
dialog p{color:#daecf8;font-size:13px;line-height:1.55}
dialog .eyebrow{color:#9eddf6}
.compact-modal{max-width:490px}
.notice{background:#082f5199;border:1px solid #5591b4;border-bottom:3px solid #062b4a;border-radius:6px;color:#c3dcec;font-size:11px;padding:11px 14px;margin-top:18px}
.actions{gap:14px;margin-top:20px}
.empty-state{padding:7px 10px 12px}
.empty-state>.icon{width:74px;height:74px;padding:10px;background:#093b6299;border-radius:17px;border:2px solid #75c6e250;margin:10px}
.empty-state h3{color:#fff;font-size:21px}
.empty-state p{color:#d3e7f6}
.tabs{gap:9px}
.tab{border:2px solid #113c5b;border-bottom:4px solid #082e50;color:#d6edfb;background:linear-gradient(#4396bf,#246595);border-radius:6px;font-size:13px;padding:9px 24px;box-shadow:inset 0 1px #91d3e6}
.tab.active{border-color:#a5761e;border-bottom-color:#a46a11;background:linear-gradient(#ffdf60,#f5b622);color:white}
.booster-grid{gap:13px}
.booster-card{--card-color:#6fc5e0;background:linear-gradient(145deg,color-mix(in srgb,var(--card-color) 65%,white),var(--card-color));border:2px solid #133951;border-bottom:6px solid color-mix(in srgb,var(--card-color) 55%,#19394c);border-radius:9px;padding:13px 10px 10px;box-shadow:inset 0 2px #ffffffa8,inset 0 0 0 2px #ffffff40,0 3px #052c48;color:white;overflow:hidden}
.booster-card .booster-art{width:76px;height:68px;border:0;border-radius:12px;background:radial-gradient(ellipse,#ffffffa6,transparent 72%);box-shadow:none;margin:3px 0 0}
.booster-art .icon{width:48px;height:48px;filter:drop-shadow(0 3px 0 #14426988);transform:rotate(-7deg)}
.booster-card>b{font-size:14px;line-height:1.2;color:white;margin-top:9px;position:relative}
.booster-card small{color:#123653;font-size:10px;font-weight:bold;line-height:1.4;margin-top:6px}
.booster-card .count{background:#103955;border:2px solid #e9f8ff;border-bottom:3px solid #06233d;border-radius:5px;font-size:12px;top:6px;right:6px;padding:2px 5px;box-shadow:0 2px #22517255}
.booster-card .game-btn{background:linear-gradient(#a4ed70,#62c83f 50%,#50b533 51%);border-color:#28522c;border-bottom-color:#347d2c;box-shadow:inset 0 1px #d8ffac,0 2px #264c30;min-height:36px;font-size:16px;text-shadow:0 2px #204b26}
.booster-card .game-btn .icon{width:20px;height:20px}
.booster-card.chosen{border-color:#eaf9ad;border-bottom-color:#72a734;background:linear-gradient(#d6f49d,#7cce5f);box-shadow:inset 0 0 0 2px #e4ffb5,0 0 0 2px #7de36c,0 4px #225d40}
.booster-card .selected-tick{border:2px solid #e8ffd5;border-radius:6px;top:5px;left:5px;width:24px;height:24px;z-index:1;background:#43b935;color:white}
.energy-grid{gap:12px}
.energy-pack{position:relative;background:linear-gradient(#6fbde5,#257bb3);border:2px solid #163d61;border-bottom:6px solid #123d65;border-radius:9px;box-shadow:inset 0 2px #b3ebff,inset 0 0 0 2px #87dafb55,0 3px #062946;padding:22px 9px 12px;gap:8px}
.energy-pack:nth-child(2){background:linear-gradient(#5fdde0,#1687a9)}
.energy-pack:nth-child(3){background:linear-gradient(#9faff1,#5968b9)}
.energy-pack:nth-child(4){background:linear-gradient(#c399ed,#8356b6)}
.energy-pack:nth-child(5){background:linear-gradient(#e9c775,#b27b35)}
.energy-pack>.icon{width:70px;height:70px;fill:#ffe557;stroke:#9d6719;stroke-width:1.3;filter:drop-shadow(4px 5px 0 #07335770);transform:rotate(8deg);margin-bottom:8px}
.energy-pack b{color:white;font-size:32px}
.energy-pack small{color:#ebf8ff;text-transform:uppercase;font-weight:bold;font-size:10px;letter-spacing:1px}
.energy-pack .game-btn{font-size:10px;padding:8px 5px;min-height:39px;margin-top:8px}
.level-summary{background:#103d6099;border:2px solid #5595b1;border-bottom:4px solid #0a2d49;border-radius:9px;padding:13px 16px;gap:19px}
.level-medal{width:68px;height:72px;border-radius:13px;background:linear-gradient(#ffe68a,#ffc227);border:3px solid #fff3a4;border-bottom:6px solid #b57925;box-shadow:0 3px #68491f;color:white;font-size:35px;transform:rotate(-4deg)}
.level-summary h3{color:white;font-size:23px;margin:3px 0 5px}
.level-summary p{color:#afccdf;font-size:11px}
.level-facts{color:#d3eafa;gap:8px;margin-top:10px;font-size:10px}
.level-facts span{padding:4px 7px;border-radius:4px;background:#092f51}
.loadout-caption{color:#d8efff;font-size:13px;font-weight:bold}
.loadout-caption>span:last-child{font-weight:normal;color:#b6d2e5;font-size:11px}
.loadout-caption strong{display:inline-block;color:#ffe987;background:#0c3658;border:1px solid #7aa1b8;border-radius:4px;padding:3px 7px;margin-left:8px}
.loadout .booster-card{padding:8px 5px}
.loadout .booster-card b{font-size:12px}
.loadout .booster-card small{font-size:9px;color:#1b4660}
.loadout .booster-art{width:53px;height:46px}
.loadout .booster-art .icon{width:36px;height:36px}
.settings-row{border-bottom:1px solid #67acd459;color:white;font-size:15px;gap:12px}
.settings-row span small{color:#b8d6ea;font-size:11px;line-height:1.3}
.settings-row input{border-radius:6px;width:56px;height:30px;background:#123e64;border:2px solid #062c4f;box-shadow:0 1px #89bcd0,inset 0 2px #001f40}
.settings-row input:before{border-radius:4px;background:linear-gradient(#f7fcff,#a8cede);width:23px;height:23px;top:1px;left:1px;box-shadow:0 2px #43789e}
.settings-row input:checked{border-color:#245422;background:linear-gradient(#91dc4b,#4eaf28)}
.settings-row input:checked:before{transform:translateX(27px)}
#toast{background:linear-gradient(#174f77,#0b365a);border:2px solid #8dcae5;border-bottom:5px solid #041f3b;border-radius:8px;box-shadow:0 8px 20px #03214077;font-size:13px}
/* The board keeps its full grid. HUD buttons are square and anchored to its edges. */
.round-top{background:linear-gradient(#1b608a,#0b3b63);border-bottom:3px solid #4d99b4;box-shadow:0 3px #082d4c;height:74px;padding:8px 16px;gap:10px}
#board{top:74px}
.round-identity{background:linear-gradient(#246590,#123f67);border:2px solid #072948;border-radius:6px;border-bottom:4px solid #072948;box-shadow:inset 0 1px #78accb;text-align:center;min-width:96px;padding:5px 10px;margin:0}
.round-identity small{font-size:9px;color:#b5ddf4}
.round-identity b{font-size:20px;color:#ffe6a1}
.round-stat{background:#072d4dd9;border:1px solid #396a8c;border-radius:5px;min-width:82px;padding:5px 11px;box-shadow:inset 0 2px #031e3866}
.round-stat small{color:#a4cbe3;font-size:8px;letter-spacing:1px}
.round-stat b{font-size:20px}
.round-stat:has(#round-money) b{color:#ffdb65}
.round-stat.timer{min-width:103px}
.round-progress{background:#001f3c;height:4px;margin-top:3px}
.round-progress i{background:linear-gradient(#aff55b,#52c229);box-shadow:0 0 5px #87ef34}
.hud-tool{--tool:#328ac3;width:52px;height:52px;border:2px solid #092b4a;border-bottom:6px solid color-mix(in srgb,var(--tool) 50%,#052644);border-radius:7px;background:linear-gradient(color-mix(in srgb,var(--tool) 65%,white),var(--tool) 49%,color-mix(in srgb,var(--tool) 85%,#004880) 50%);box-shadow:inset 0 2px #d7f8ff99,inset 0 0 0 1px #caf2ff55,0 2px #061e3b;color:#fff;font-family:var(--display);font-size:18px;padding:8px}
.hud-tool .icon{width:30px;height:30px}
.hud-tool[data-round='booster-boost']{--tool:#dda329}
.hud-tool[data-round='booster-reverse']{--tool:#54b07e}
.hud-tool[data-round='booster-signal']{--tool:#62afbb}
.hud-tool[data-round='booster-clear']{--tool:#bb894f}
.hud-tool[data-round='booster-color']{--tool:#b866c4}
.hud-tool[data-round='booster-remove']{--tool:#cf6175}
.hud-tool[data-round='booster-ghost']{--tool:#8c7ed5}
.hud-tool[data-round='booster-freeze']{--tool:#46b6d2}
.hud-tool[data-round='call-train']{--tool:#239fca}
.hud-tool[data-round='call-repair']{--tool:#758ea1}
.hud-tool[data-round='remove-rail']{--tool:#c87a4d}
.hud-tool[data-round='pause']{--tool:#3e789e}
.hud-tool.active,.hud-tool.gift{outline:3px solid #ffe968;outline-offset:2px;box-shadow:inset 0 1px #fff,0 0 16px #ffd63880}
.hud-tool.active{filter:brightness(1.12)}
.hud-tool .stock{border:2px solid #e0f7ff;border-bottom:3px solid #0d2d4b;background:#123c60;border-radius:5px;bottom:-6px;right:-5px;font:900 11px Arial;padding:1px 4px}
.hud-tool .cooldown{background:#082e50d1;border-radius:4px;text-shadow:var(--outline);font:900 13px var(--display)}
.side-tools{top:92px;right:16px;gap:13px}
.side-tools .hud-tool{width:52px;height:52px}
.round-bottom{background:linear-gradient(#155276,#08324e);border-top:2px solid #6093a5;color:#d2e6ec;font-size:11px;height:30px}
.round-bottom .icon{color:#a9d7e5;fill:#377eaa}
.preparation-pill{top:91px;background:linear-gradient(#ffdf71,#efb231);border:2px solid #fff2b6;border-bottom:5px solid #9b661c;border-radius:8px;color:#fff;text-shadow:0 1px #624117;box-shadow:0 3px #163d5180;padding:8px 15px}
.preparation-pill b{font:900 28px var(--display);text-shadow:var(--outline)}
.preparation-pill span{font-size:12px;font-family:var(--display)}
.preparation-pill small{font-family:'Trebuchet MS',sans-serif;color:#543e14;text-shadow:none;font-weight:bold;margin-top:2px}
.freeze-pill{background:linear-gradient(#97efff,#47b9e3);border-color:#dbfcff;border-bottom-color:#196e9b}
.freeze-pill small{color:#174969}
.round-overlay{background:#041e35ba;backdrop-filter:blur(4px);padding:12px;overflow:auto}
.round-overlay .panel{background:var(--tiles),linear-gradient(#388db4,#174f7b);border:3px solid #83c5df;border-bottom:7px solid #082b4a;border-radius:11px;color:#fff;box-shadow:0 3px #5a9cbb,0 12px 30px #031e4266;padding:28px;max-height:100%;overflow:auto}
.round-overlay h2{color:#fff;font-size:27px;text-shadow:var(--outline)}
.round-overlay p{color:#cce4f4;font-size:13px}
.round-overlay .countdown-big{font-family:var(--display);text-shadow:0 6px #174778}
.round-overlay .stars{margin:16px}
.tutorial-tip{background:linear-gradient(#235f85f5,#123c61f5);border:2px solid #b6e2ec;border-bottom:5px solid #092b47;border-radius:8px;color:#fff;box-shadow:0 5px 15px #08354366}
.tutorial-tip .eyebrow{color:#ffdf79;letter-spacing:1px}
.tutorial-tip b{font-family:var(--display);text-shadow:var(--outline);font-size:14px}
.tutorial-tip p{color:#d0e9f6;font-size:11px}
.rotate-hint{background:var(--tiles),linear-gradient(#116e98,#083d64)}
/* Responsive landscape layout: compact chrome, generous board, no hidden actions. */
@media(min-width:1450px){.journey{left:10%;right:10%}.map-heading{left:11%;right:11%}.map-footer{left:10%;right:10%}.map-land{border-radius:50px}}
@media(max-width:1100px){.topbar{padding:12px 18px 15px;gap:10px}.nav-btn{width:49px;justify-content:center;padding:8px}.nav-btn span{display:none}.welcome-layout{gap:12px 3%}.login-panel{padding:23px 18px}.provider{width:40px;height:46px}.providers{gap:6px}.map-heading h1{font-size:32px}.round-top{gap:7px;padding:8px 10px}.round-identity{min-width:77px}.round-stat{padding:5px 8px;min-width:68px}.round-stat.delivered{display:none}.hud-tool{width:47px;height:49px}.hud-boosters{gap:7px}}
@media(max-width:740px){.welcome-layout{width:94%;grid-template-columns:.9fr 1.1fr;gap:10px 3%}.logo h1{font-size:72px}.logo small{font-size:7px;letter-spacing:2px}.logo p{font-size:8px;letter-spacing:1px}.login-panel{padding:18px 12px}.login-panel h2{font-size:18px}.providers{flex-wrap:wrap;max-width:260px;margin:auto;gap:6px}.provider{width:43px;height:44px}.login-divider{font-size:8px}.play-actions{padding:15px 5px}.game-btn.big{min-width:230px;min-height:75px;font-size:29px}.topbar{padding:10px;gap:7px}.resource{min-width:94px;height:42px;gap:5px}.resource strong{font-size:18px}.resource .add{width:24px}.topbar .nav-btn,.topbar .square-btn{width:41px;height:44px;min-height:44px;padding:7px}.nav-btn .icon{width:24px;height:24px}.chapter-badge{font-size:11px;padding:8px;top:8px}.map-heading h1{font-size:26px}.map-heading p{max-width:260px}.map-heading{top:87px}.journey{inset:193px 4% 92px}.level-node{width:108px}.level-node .node{width:61px;height:63px;font-size:28px;border-radius:15px}.level-node small{font-size:9px}.future-node{font-size:8px;padding:6px}.future-node b{font-size:14px}.map-footer{left:4%;right:4%}.map-footer .game-btn{padding:9px 12px;font-size:12px}.round-top{gap:5px}.round-identity{min-width:62px;padding:5px}.round-stat{min-width:56px;padding:4px 6px}.round-stat b{font-size:16px}.round-stat.timer{min-width:78px}.hud-tool{width:39px;height:43px;padding:5px}.hud-tool .icon{width:25px;height:25px}.hud-boosters{gap:5px}.modal-body{padding:17px}.booster-grid{gap:9px}.booster-card>b{font-size:12px}.energy-grid{grid-template-columns:repeat(3,1fr)}.energy-pack>.icon{width:51px;height:51px}.modal-head h2{font-size:20px}}
@media(max-height:620px) and (min-width:651px){.welcome-layout{height:83%;grid-template-columns:1fr 1fr;max-width:1020px;gap:8px 4%}.logo h1{font-size:76px}.logo p{margin-top:12px}.logo small{font-size:8px;letter-spacing:3px}.railway-hero{width:100%;max-height:260px}.login-panel{padding:16px 20px}.login-panel h2{font-size:20px}.login-panel p{margin-bottom:12px}.providers{flex-wrap:nowrap;gap:6px}.provider{width:39px;height:42px;font-size:20px}.login-divider{margin:12px 0;font-size:8px}.play-actions{gap:21px}.game-btn.big{min-width:260px;min-height:77px;font-size:30px}.topbar{padding:9px 18px 12px}.map-heading{top:88px}.map-heading h1{font-size:28px}.map-heading p{display:none}.chapter-badge{top:0;padding:8px 12px;font-size:12px;display:inline-flex!important}.journey{inset:164px 5% 80px}.map-land{border-radius:27px;border-width:6px;box-shadow:0 7px #405c66,0 13px #243f58,0 18px #092b48,0 23px 18px #00264480}.map-art{border-radius:20px}.map-footer{bottom:13px}.map-note{padding:7px 10px;font-size:9px;max-width:290px}.level-node .node{width:60px;height:62px;font-size:27px;border-radius:15px}.level-node .stars .icon{width:17px;height:17px}.level-node .stars{margin-top:6px}.level-node small{font-size:9px;margin-top:4px}.level-node .flag{font-size:8px;padding:4px 7px;bottom:calc(100% + 7px)}.future-node{display:none}.round-top{height:64px;padding:6px 10px}.round-identity b{font-size:18px}.round-stat b{font-size:16px}.round-stat small{font-size:8px}.hud-tool{width:46px;height:46px}.hud-tool .icon{width:27px;height:27px}#board{top:64px;bottom:25px}.side-tools{top:80px;right:12px;gap:10px}.side-tools .hud-tool{width:47px;height:47px}.round-bottom{height:26px;font-size:10px}.preparation-pill{top:78px;padding:6px 12px}.preparation-pill b{font-size:25px}.tutorial-tip{bottom:38px}.modal-head{padding:10px 17px}.modal-head h2{font-size:21px}.modal-body{padding:16px 20px}.loadout .booster-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}.loadout .booster-card{padding:7px 3px}.loadout .booster-card b{font-size:10px;min-height:24px}.loadout .booster-art{width:42px;height:38px}.loadout .booster-art .icon{width:31px;height:31px}.loadout .booster-card small{display:none}.loadout .level-summary{padding:9px 12px;margin-bottom:10px}.loadout .level-medal{width:49px;height:52px;font-size:27px}.loadout .level-summary h3{font-size:19px}.loadout .level-summary p{display:none}.loadout .level-facts{margin-top:6px;font-size:9px}.loadout .level-facts span{padding:3px 5px}.loadout-caption{font-size:12px;margin:10px 0}.loadout .actions{margin-top:14px}.round-overlay .panel{padding:19px 24px}.round-overlay .actions{gap:10px;margin-top:14px}.round-overlay h2{font-size:24px}}
@media(max-height:440px) and (min-width:651px){.welcome-layout{height:83%}.logo h1{font-size:60px}.logo small{font-size:7px}.logo p{font-size:8px;margin-top:9px}.railway-hero{max-height:190px}.login-panel{padding:12px 16px}.login-panel h2{font-size:18px}.login-panel p{font-size:11px;margin-bottom:10px}.login-panel .game-btn{min-height:42px;font-size:16px}.login-divider{margin:10px 0}.provider{height:40px;width:37px}.screen-corner{font-size:7px;bottom:9px}.topbar{padding:7px 14px 10px;gap:9px}.topbar .game-btn{height:44px;min-height:44px;width:45px;padding:6px}.resource{height:38px}.map-heading{top:77px;left:6%}.map-heading h1{font-size:24px;margin:3px 0}.map-heading .eyebrow{font-size:8px}.chapter-badge{padding:6px 10px;font-size:11px;top:0}.chapter-badge .icon{width:19px;height:19px}.journey{inset:132px 5% 68px}.map-land{border-radius:22px}.level-node .flag{display:none}.level-node .node{width:51px;height:52px;font-size:23px;border-width:2px;border-bottom-width:5px;border-radius:12px}.level-node .stars .icon{width:15px;height:15px}.level-node small{font-size:8px;padding:3px 5px}.map-footer{bottom:10px}.map-footer .game-btn{min-height:38px;font-size:11px;padding:6px 12px}.map-note{font-size:8px;padding:6px 9px;max-width:300px}.modal-head{padding:7px 14px}.modal-head h2{font-size:19px}.modal-head .close{height:33px;width:34px}.modal-body:has(.loadout){padding:10px 16px}.loadout .level-summary{padding:6px 10px;margin-bottom:7px;gap:12px}.loadout .level-summary .eyebrow{font-size:8px}.loadout .level-summary h3{font-size:17px;margin:2px 0}.loadout .level-medal{height:44px;width:43px;font-size:23px}.loadout .level-facts{margin-top:4px}.loadout .level-facts span{padding:2px 5px}.loadout-caption{font-size:11px;margin:7px 0}.loadout-caption>span:last-child{font-size:10px}.loadout-caption strong{padding:1px 5px}.loadout .booster-art{height:29px;width:36px}.loadout .booster-art .icon{height:26px;width:26px}.loadout .booster-card b{font-size:9px;min-height:22px;margin-top:7px}.loadout .booster-card .count{font-size:9px;top:3px;right:3px;padding:1px 3px}.loadout .actions{margin-top:10px}.loadout .actions .game-btn{min-height:37px;padding:6px 14px;font-size:12px}.round-overlay .panel{padding:16px 22px}.round-overlay h2{font-size:23px}.round-overlay .game-btn{min-height:42px;padding:8px 15px}.round-overlay .stars{margin:10px}.round-overlay .stars .icon{width:34px;height:34px}.tutorial-tip{max-width:215px;padding:10px;font-size:10px}.tutorial-tip b{font-size:12px}.tutorial-tip p{font-size:10px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(max-height:360px) and (min-width:651px){
 .modal-head:has(+ .modal-body .loadout){padding:5px 12px}
 .modal-head:has(+ .modal-body .loadout) h2{font-size:17px}
 .modal-head:has(+ .modal-body .loadout) .close{width:30px;height:30px}
 .modal-body:has(.loadout){padding:7px 13px}
 .loadout .level-summary{padding:4px 8px;margin-bottom:5px}
 .loadout .level-medal{height:36px;width:36px;font-size:21px}
 .loadout .level-summary h3{font-size:15px;margin:1px 0}
 .loadout .level-facts{margin-top:2px;font-size:8px}
 .loadout .level-summary .eyebrow{font-size:7px}
 .loadout .loadout-caption{margin:5px 0;font-size:10px}
 .loadout .booster-card{padding:4px 2px}
 .loadout .booster-art{height:23px;width:30px;margin:2px 0 0}
 .loadout .booster-art .icon{width:23px;height:23px}
 .loadout .booster-card b{font-size:8px;min-height:20px;margin-top:5px}
 .loadout .booster-card .count{font-size:8px;padding:0 2px}
 .loadout .actions{margin-top:8px}
 .loadout .actions .game-btn{min-height:33px;font-size:11px;padding:4px 12px}
}
@media(max-height:620px){
 .booster-card:not(.selectable) .booster-art{width:60px;height:48px}
 .booster-card:not(.selectable) .booster-art .icon{width:40px;height:40px}
 .modal-body:has(> .booster-grid)>p{margin-bottom:12px}
}

/* Keep the playable field large on short landscape phones. */
.tutorial-tip{top:86px;bottom:auto}
@media(max-height:620px) and (min-width:651px){.tutorial-tip{top:76px;bottom:auto}}
@media(max-height:450px) and (orientation:landscape){
 .round-top{height:54px;padding:4px 8px}
 #board{top:54px;bottom:22px}
 .hud-tool{height:44px;width:44px}
 .round-bottom{height:22px}
 .side-tools{top:64px;right:8px;gap:6px}
 .side-tools .hud-tool{width:44px;height:44px}
 .preparation-pill{top:64px}
 .tutorial-tip{top:64px;bottom:auto;left:8px;width:205px;padding:9px 11px}
}

/* Tutorial instructions cover the board only while the simulation is paused. */
.round-overlay.tutorial-overlay{backdrop-filter:none;background:#061c35a8;padding:85px 16px 20px}
.round-overlay .tutorial-panel{width:min(700px,94vw);max-width:700px;display:grid;gap:18px;text-align:center}
.tutorial-demo{display:block;width:100%;max-height:210px;border:3px solid #154763;border-radius:18px}
.tutorial-copy .eyebrow{color:#ffe184;font-size:11px}
.round-overlay .tutorial-copy h2{margin:10px 0}
.round-overlay .tutorial-copy p{font-size:15px;line-height:1.5;margin:10px 0 20px}
.tutorial-booster-art>.icon{width:76px;height:76px;filter:drop-shadow(0 4px 0 #143755)}
.tutorial-prompt .round-top{z-index:21;pointer-events:none}
.tutorial-prompt .round-top>*{opacity:.28}
.tutorial-prompt .round-top .hud-boosters{opacity:1}
.tutorial-prompt .hud-tool:not(.tutorial-highlight){opacity:.28}
.hud-tool.tutorial-highlight{outline:4px solid #ffe779;outline-offset:3px;box-shadow:0 0 24px #ffed8b}
.tutorial-point{position:relative}
.tutorial-point::after{content:'👆';position:absolute;top:80%;left:50%;font-size:37px;line-height:1;transform:translateX(-50%);pointer-events:none;filter:drop-shadow(0 2px 2px #123);animation:tutorial-point 1s ease-in-out infinite;z-index:3}
.train-target.tutorial-point{position:absolute}
.demo-preview{stroke-dasharray:1;animation:tutorial-line 5s linear infinite}
.demo-built{animation:tutorial-built 5s linear infinite}
.demo-finger{animation:tutorial-drag 5s linear infinite}
.demo-touch{animation:tutorial-touch 5s linear infinite}
@keyframes tutorial-point{50%{transform:translate(-50%,7px)}}
@keyframes tutorial-line{0%,10%{stroke-dashoffset:1;opacity:1}55%,70%{stroke-dashoffset:0;opacity:1}80%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes tutorial-built{0%,70%{opacity:0}80%,100%{opacity:1}}
@keyframes tutorial-drag{0%,10%{transform:translate(100px,105px);opacity:1}32%{transform:translate(250px,65px);opacity:1}55%,60%{transform:translate(400px,105px);opacity:1}70%,100%{transform:translate(400px,90px);opacity:0}}
@keyframes tutorial-touch{0%{opacity:0}10%,55%{opacity:1}60%,100%{opacity:0}}
@media(max-height:620px){
 .round-overlay.tutorial-overlay{padding:78px 12px 12px}
 .round-overlay .tutorial-panel{grid-template-columns:1fr 1.2fr;align-items:center;gap:18px;padding:16px;width:min(820px,96vw);max-width:820px}
 .round-overlay .tutorial-copy h2{font-size:21px;margin:6px 0}
 .round-overlay .tutorial-copy p{font-size:12px;margin:7px 0 12px}
 .tutorial-copy .eyebrow{font-size:9px}
 .tutorial-copy .game-btn{min-height:40px;padding:8px 16px;font-size:13px}
 .tutorial-booster-art>.icon{width:92px;height:92px}
}
@media(prefers-reduced-motion:reduce){.tutorial-point::after{animation:none}.demo-preview,.demo-finger{display:none}.demo-built{animation:none}.tutorial-demo{opacity:1}}