:root{--bg:#101719;--bg2:#172125;--card:#1b292b;--card2:#223135;--line:#344548;--text:#f4f6ee;--muted:#a9b9b5;--yellow:#ffdb55;--lime:#bbed6c;--green:#43d39e;--danger:#ff816c;--radius:24px;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:310px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(1100px 700px at 110% -12%,#294139 0,transparent 65%),radial-gradient(800px 500px at -10% 65%,#1a302d 0,transparent 70%),var(--bg);color:var(--text);font-size:15px;line-height:1.5;min-height:100dvh}button,select,input{font:inherit}button{cursor:pointer;border:0}button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}button:disabled{opacity:.48;cursor:not-allowed}#app{min-height:100dvh;display:flex;flex-direction:column}.shell{width:min(1160px,calc(100% - 40px));margin-inline:auto}.topbar{display:flex;align-items:center;gap:16px;justify-content:space-between;padding:23px 0 17px;border-bottom:1px solid #ffffff19}.brand{display:flex;align-items:center;gap:10px;background:none;color:inherit;white-space:nowrap;padding:0}.brandmark{display:grid;place-items:center;background:var(--yellow);color:#17201c;width:36px;height:36px;border-radius:11px;font-size:20px;transform:rotate(-7deg);box-shadow:4px 4px 0 #0006}.brandname{font-size:20px;font-weight:900;letter-spacing:-.8px}.navright{display:flex;gap:10px;align-items:center}.datepill,.chip{border:1px solid var(--line);background:#1b2728b8;border-radius:100px;padding:8px 13px;display:inline-flex;gap:8px;align-items:center;font-weight:700;color:#dce5dc;font-size:12px}.navright select{color:var(--text);background:#1b2728;border:1px solid var(--line);border-radius:12px;padding:10px 11px;min-width:133px;font-weight:700;cursor:pointer}.roundBtn{height:40px;width:40px;border-radius:12px;background:#1b2728;border:1px solid var(--line);color:var(--text);font-size:18px}.main{flex:1}.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:42px;align-items:center;padding-top:74px;padding-bottom:38px}.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--lime);font-size:12px;letter-spacing:2px;font-weight:800;margin-bottom:20px}.eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 5px #a7e16a1e}.roadsign{position:relative;display:inline-block;padding:17px 32px 15px;background:var(--yellow);color:#1b241e;border:4px solid #1c2621;border-radius:12px;box-shadow:0 0 0 4px #ffd650,9px 12px 0 #0005;transform:rotate(-1.5deg);margin:0 0 26px 8px}.roadsign:before{content:"";position:absolute;inset:8px;border:2px solid #17221c29;border-radius:5px;pointer-events:none}.roadsign span{display:block;font-size:clamp(52px,7.1vw,87px);font-weight:1000;line-height:1.06;letter-spacing:-4px}.hero h1{font-size:clamp(23px,3vw,34px);letter-spacing:-1.2px;margin:10px 0 12px;line-height:1.25}.hero p{color:var(--muted);font-size:16px;max-width:510px;line-height:1.7;margin:0 0 24px}.routebadge{display:inline-flex;align-items:center;gap:9px;color:#d5e1d9;border:1px solid #3b5149;background:#1c2c28;padding:8px 14px;border-radius:100px;font-weight:700;margin-bottom:20px}.routebadge b{color:var(--yellow)}.ctarow{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.primary{background:linear-gradient(140deg,#c5f772,#93df68);color:#18231a;border-radius:16px;padding:17px 27px;font-size:16px;font-weight:900;letter-spacing:-.3px;box-shadow:0 5px 0 #5a853b,0 0 35px #a3e77b19;transition:transform .15s,box-shadow .15s}.primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 7px 0 #5a853b,0 0 35px #a3e77b30}.primary:active{transform:translateY(3px);box-shadow:0 2px 0 #5a853b}.secondary{background:#293b3b;color:#eaf1e9;border:1px solid #44605a;border-radius:15px;padding:15px 20px;font-weight:800}.secondary:hover{background:#304946}.playnote{font-size:12px;color:#9eb0a9;margin-top:16px}.stats{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.stat{background:#1d2928;border:1px solid #34443e;padding:12px 16px;border-radius:15px;min-width:112px}.stat strong{display:block;font-size:23px;color:#fff}.stat small{font-size:11px;color:#aebdb2}.mapCard{position:relative;border:1px solid #47605b;border-radius:28px;overflow:hidden;background:linear-gradient(135deg,#263937,#19292e);box-shadow:0 25px 80px #0005;isolation:isolate}.mapCard:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:28px;box-shadow:inset 0 0 40px #080e1129}.mapTop{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 20px 9px}.mapTop .mapTitle{font-weight:900;font-size:14px}.mapSub{font-size:11px;color:#a8beb8}.mapChip{font-weight:900;color:var(--yellow);font-size:12px;background:#0e1f20a8;border:1px solid #405a4e;border-radius:30px;padding:7px 11px;white-space:nowrap}.mapArea{position:relative;padding:0 10px 5px}.mapArea svg{display:block;width:100%;height:auto;min-height:280px;max-height:490px}.mapBottom{display:flex;justify-content:space-between;align-items:center;padding:12px 21px 19px;gap:12px;background:#15222577;border-top:1px solid #ffffff14;font-size:11px;color:#afc2bb}.mapBottom b{font-size:13px;color:#eef6ee}.nodeCity{font-weight:700;fill:#cad4cc;font-size:14px}.nodeKm{fill:#a4b9af;font-size:11px}.cityDot{fill:#c1cfc6;stroke:#263b37;stroke-width:5}.maplabel{font-size:18px;font-weight:900;letter-spacing:4px;fill:#b3c7ad1d}.mapsea{fill:#a1d8d34b;font-weight:800;letter-spacing:3px;font-size:15px}.roadBG{fill:none;stroke:#071b20;stroke-width:17;stroke-linejoin:round;stroke-linecap:round}.roadWhite{fill:none;stroke:#c5c7a9;stroke-width:10;stroke-linejoin:round;stroke-linecap:round;opacity:.85}.roadProgress{fill:none;stroke:url(#driveGradient);stroke-width:10;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 7px #a2ed56a0);transition:stroke-dasharray .9s ease}.pin{transition:transform .9s ease}.mapLegend{display:flex;gap:8px;align-items:center}.mapLegend i{height:8px;width:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px #bbed6c33}.tiersSection{padding-bottom:52px}.sectionTitle{font-size:17px;font-weight:900;margin:0 0 5px}.sectionSub{font-size:12px;color:#a4b4ae;margin:0 0 20px}.tiers{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.tier{background:#23312f;border:1px solid #40534b;border-radius:16px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:15px 6px 12px;position:relative;overflow:hidden}.tier:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--tier)}.tier .emoji{font-size:26px;margin-bottom:5px}.tier b{font-size:16px;white-space:nowrap}.tier small{color:#b4c4bd;font-size:11px;white-space:nowrap}.tier p{margin:0;color:#b9c8c0;font-size:10px}.gradientline{height:5px;background:linear-gradient(90deg,#ed7467,#fa9b60,#efc15b,#d7df66,#a3de79,#6cceb1,#b08ff2);margin:11px 5px 7px;border-radius:10px}.raritylabels{display:flex;justify-content:space-between;color:#91a69f;font-size:11px;padding:0 4px}.infoGrid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin-bottom:50px}.panel{background:#1c2a2b;border:1px solid #3a4a47;border-radius:22px;padding:23px}.panel h3{font-size:17px;margin:0 0 15px}.rulesGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.rule{display:flex;gap:12px;align-items:start}.rule .ricon{display:grid;place-items:center;background:#344540;border-radius:12px;flex-shrink:0;width:34px;height:34px;font-size:17px}.rule b{display:block;font-size:13px}.rule span{font-size:12px;color:#abbbb5}.notice{color:#b7c6be;font-size:12px;line-height:1.8}.notice strong{color:#fff}.footer{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:20px 0 30px;border-top:1px solid #ffffff1a;font-size:11px;color:#81998f}.footer a{color:#b5c6ba}.quizArea{padding:24px 0 45px}.quizHeader{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;gap:12px}.quizHeader strong{font-size:20px}.miniLabel{color:#bdcbc2;font-size:12px}.gameGrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.75fr);gap:23px;align-items:start}.gameGrid .mapCard{position:sticky;top:18px}.questionBox{border:1px solid #42564b;border-radius:27px;background:linear-gradient(150deg,#253732,#1a2929);overflow:hidden;box-shadow:0 18px 50px #030a0b24}.questionHead{padding:24px 25px 12px;display:flex;justify-content:space-between;align-items:center}.overline{font-size:12px;font-weight:900;letter-spacing:1.3px;color:var(--lime)}.qnum{font-size:12px;font-weight:900;background:#334842;padding:7px 12px;border-radius:10px}.qtext{padding:8px 25px 3px;font-size:clamp(27px,3.6vw,39px);line-height:1.14;letter-spacing:-1.4px;font-weight:900;margin:0}.qdesc{padding:5px 25px 17px;color:#b2c0b7;font-size:13px;margin:0;min-height:53px}.timerwrap{padding:0 25px 23px}.timerHead{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:12px;margin:9px 0}.timerNum{font-size:17px;font-variant-numeric:tabular-nums}.timerTrack{height:9px;border-radius:20px;background:#12221d;overflow:hidden;border:1px solid #324640}.timerFill{height:100%;width:100%;background:linear-gradient(90deg,#f5df6d,#a3ed74);border-radius:20px;transition:width .12s linear}.inputwrap{padding:20px 25px 25px;border-top:1px solid #ffffff1a;background:#1928236b}.inputwrap label{display:block;color:#d8e5db;font-size:12px;font-weight:800;margin-bottom:8px}.inputLine{display:flex;gap:9px}.answerInput{flex:1;min-width:0;border:1px solid #506962;background:#111e1d;color:#fff;padding:16px 14px;border-radius:12px;font-size:16px;outline:none}.answerInput:focus{border-color:var(--lime);box-shadow:0 0 0 3px #bbed6c16}.sendButton{padding:0 17px;border-radius:12px;background:var(--lime);color:#14231d;font-weight:900}.errorText{margin-top:10px;color:#ffc29e;font-size:12px;min-height:21px}.qhelp{color:#a5bbaf;font-size:12px;margin:5px 0 0}.progressDots{display:flex;gap:6px;margin:0 0 16px}.progressDots span{width:100%;height:6px;border-radius:30px;background:#3a4c42}.progressDots .done{background:var(--lime)}.progressDots .current{background:var(--yellow)}.feedbackContent{padding:24px 26px 27px;text-align:left}.feedbackEmoji{font-size:52px}.feedbackTitle{font-size:30px;font-weight:950;margin:9px 0 5px;letter-spacing:-1px}.gain{font-size:55px;font-weight:1000;letter-spacing:-3px;color:var(--lime);line-height:1.16}.gain small{font-size:19px;letter-spacing:-1px}.muted{color:#adbbb1}.feedbackDetails{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:21px 0}.detailsmall{border:1px solid #466055;background:#233a32;padding:12px;border-radius:13px}.detailsmall b{font-size:18px;display:block}.detailsmall small{display:block;color:#a4bdb0}.resultHead{text-align:center;padding:28px 20px 0}.resultBig{font-weight:1000;font-size:clamp(60px,9vw,105px);letter-spacing:-6px;line-height:1.1;color:var(--yellow)}.resultBig span{font-size:23px;letter-spacing:0}.resultTitle{font-size:28px;font-weight:900;letter-spacing:-1.2px;margin:6px 0}.resultGrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px;margin-top:22px;margin-bottom:30px}.resultTable{display:grid;gap:9px}.resultRow{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#253532;border:1px solid #3c5048;padding:11px 13px;border-radius:12px}.resultRow .idx{color:var(--lime);font-size:11px;font-weight:900}.resultRow b{display:block;font-size:12px}.resultRow small{display:block;color:#a8bdb1;font-size:11px}.resultRow strong{color:var(--yellow);white-space:nowrap}.resultActions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:22px auto}.kbd{background:#2e403b;padding:2px 5px;border-radius:5px;border:1px solid #597065;font-size:10px}.snackbar{position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px);background:#e5f2d7;color:#1e2e20;z-index:30;box-shadow:0 15px 40px #0009;border-radius:12px;padding:13px 20px;font-size:13px;font-weight:800;opacity:0;pointer-events:none;transition:.2s}.snackbar.show{transform:translate(-50%,0);opacity:1}.map-only-route{opacity:.7}.toplined{border-top:1px solid #ffffff24;padding-top:20px}.skeleton{animation:pulse 1.5s infinite alternate}@keyframes pulse{from{opacity:.6}to{opacity:1}}@media(max-width:950px){.hero{gap:22px;padding-top:49px}.tiers{gap:5px}.tier small{font-size:9px}.tier .emoji{font-size:22px}.gameGrid{grid-template-columns:1fr}.gameGrid .mapCard{position:static}.gameGrid .questionBox{order:-1}.resultGrid{grid-template-columns:1fr}.infoGrid{grid-template-columns:1fr}}@media(max-width:650px){.shell{width:min(100% - 26px,540px)}.topbar{padding:15px 0}.datepill{display:none}.brandname{font-size:17px}.brandmark{height:33px;width:33px}.navright{gap:6px}.navright select{min-width:99px;max-width:128px;font-size:12px;padding:9px 7px}.roundBtn{height:36px;width:36px}.hero{grid-template-columns:1fr;gap:28px;padding-top:42px;padding-bottom:35px}.roadsign{margin-left:5px}.roadsign span{font-size:clamp(45px,12vw,72px)}.hero p{font-size:14px}.hero h1{font-size:25px}.stats{margin-top:20px}.stats .stat{flex:1;min-width:0;padding:9px 10px}.stat strong{font-size:20px}.tiers{display:flex;overflow-x:auto;padding:5px 0 12px;scroll-snap-type:x mandatory;scrollbar-width:thin}.tier{min-width:104px;scroll-snap-align:start}.tier small{font-size:11px}.sectionTitle{font-size:16px}.tiersSection{padding-bottom:27px}.rulesGrid{grid-template-columns:1fr}.panel{padding:18px}.infoGrid{margin-bottom:25px}.footer{flex-direction:column;align-items:flex-start}.mapArea svg{min-height:235px}.mapTop{padding:14px 15px 6px}.mapBottom{padding:10px 15px 15px}.quizArea{padding-top:19px}.quizHeader strong{font-size:17px}.questionHead{padding:20px 19px 12px}.qtext{padding:8px 19px 5px;font-size:31px}.qdesc{padding:5px 19px 16px}.timerwrap{padding:0 19px 21px}.inputwrap{padding:18px 19px}.sendButton{padding:0 13px}.answerInput{padding:14px 10px}.feedbackContent{padding:19px}.resultBig{font-size:65px}.resultBig span{font-size:20px}.resultTitle{font-size:25px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* v2 refinements */
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
@media(max-width:430px){.topbar{gap:8px}.navright{gap:6px}.brandname{font-size:15px}.brandmark{width:34px;height:34px}.navright select{max-width:118px}.resultActions{flex-direction:column}.resultActions button{width:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.staticlinks{display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:center;font-size:12px;max-width:1100px;margin:12px auto 20px;color:var(--muted)}.staticlinks a{color:var(--muted)}

/* v3 UI and accessibility refinements */
body{overflow-x:clip}
.playnote:first-of-type{color:#bad4ad}
.roundBtn[aria-pressed="true"]{box-shadow:0 0 0 2px #bbed6c70;background:#28463c}
@media(max-width:360px){.shell{width:calc(100% - 22px)}.brandname{font-size:14px}.brandmark{width:31px;height:31px}.navright select{max-width:108px;font-size:11px}.qtext{font-size:27px}.resultBig{font-size:58px}.quizHeader strong{font-size:16px}.mapBottom{flex-wrap:wrap}.mapArea svg{min-height:205px}.stats .stat{padding:8px 7px}.stat strong{font-size:18px}}
/* V4 online layout */
.onlineBoard { margin-top: 14px; }
.onlineBoard .resultRow { padding: 10px 0; }
.onlineQuestion .inputLine { margin-top: 9px; }
.onlineQuestion form label { color:var(--muted);font-size:.85rem;font-weight:700; }
.onlineQuestion .feedbackContent .primary { margin-top:16px;width:100%; }
@media(max-width:420px){.onlineBoard { margin-top: 10px; }.onlineQuestion .inputLine{display:flex;flex-direction:column;gap:10px}.onlineQuestion .answerInput,.onlineQuestion .sendButton{width:100%;min-width:0}}


/* V5 — page layout inspired by traditional Croatian road signs, not third-party brand assets. */
:root{--bg:#12191b;--text:#e9ede5;--muted:#aeb9b7;--yellow:#ffd332;--lime:#97dc91;--green:#076e49}
body{background:#11191b}
#app{overflow:hidden}
.shell{width:min(1170px,calc(100% - 28px))}
.topbar{border:0;padding:14px 0;min-height:64px;position:relative;z-index:5}
.homeTopbar{background:transparent}
.topbar .headLeft{display:flex;align-items:center;gap:15px;min-width:0}
.headerIssue{font:600 11px/1.45 ui-monospace,SFMono-Regular,monospace;letter-spacing:.5px;color:#c2d0ca;white-space:nowrap}
.headerIssue small{display:block;color:#8fa69d;font-size:10px;letter-spacing:0;white-space:normal}
.miniRoadSign{background:#ffcd29;border:3px solid #181f1d;box-shadow:0 0 0 2px #ffcd29;color:#181d1c;border-radius:4px;padding:4px 10px;font-size:25px;font-weight:1000;letter-spacing:-1.3px;line-height:1.05;white-space:nowrap}
.navright{gap:8px}
.navright select{min-width:78px;max-width:84px;border-radius:8px;padding:9px 6px;font-size:12px;background:#223134}
.roundBtn{width:37px;height:36px;border-radius:8px;font-size:16px;background:#223134}
.homeMain{display:block;width:100%;min-height:calc(100dvh - 126px)}
.homeHero{min-height:calc(100dvh - 125px);position:relative;display:flex;justify-content:center;align-items:center;padding:50px 18px 80px;isolation:isolate;overflow:hidden}
.homeHero:before{content:"";position:absolute;inset:-8%;z-index:-2;background:url('terrain.webp') center/cover no-repeat;opacity:.72;filter:brightness(.78) saturate(.7)}
.homeHero:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 40% 43% at 50% 51%,rgba(15,25,23,.10),rgba(15,25,23,.77) 88%),linear-gradient(180deg,#11191bdb 0%,#11191b00 25%,#11191b13 67%,#11191bea 100%)}
.terrainVeil{position:absolute;inset:0;pointer-events:none;z-index:-1;background:repeating-radial-gradient(ellipse 350px 130px at 65% 40%,transparent 0 12px,#bdcba210 13px,transparent 14px 23px);mix-blend-mode:screen;opacity:.45}
.heroCenter{width:min(820px,100%);text-align:center;display:flex;flex-direction:column;align-items:center}
.heroSign{background:#ffcc29;border:4px solid #121817;border-radius:5px;box-shadow:0 0 0 5px #ffd133,0 14px 40px #0007;position:relative;padding:14px 31px 16px;margin:8px 0 20px}
.heroSign:before{content:"";position:absolute;inset:7px;border:2px solid #1a1b1c;border-radius:2px}
.heroSign span{position:relative;color:#101718;font-size:clamp(54px,8.5vw,94px);line-height:1.12;letter-spacing:-4px;font-weight:1000}
.heroRoute{font:800 12px/1.4 ui-monospace,monospace;color:#ffd652;letter-spacing:1.6px;margin-bottom:14px}
.heroRoute b{color:#ffe47e}
.heroRoute span{white-space:nowrap}
.heroIntro{font-size:clamp(14px,1.8vw,18px);line-height:1.55;max-width:530px;margin:0 auto 25px;color:#f0f2ec;text-shadow:0 2px 8px #0008}
.travelTiers{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;width:min(775px,100%);align-items:start;margin-top:10px}
.travelTier{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;text-shadow:0 1px 5px #000a}
.tierCircle{width:52px;height:52px;border:3px solid #e3eae1;outline:2px solid var(--tier);background:#26423e;border-radius:100%;display:grid;place-items:center;font-size:28px;box-shadow:0 7px 13px #0007}
.travelTier b{font-size:11px;font-weight:850;line-height:1.2;color:#f9faf8}
.travelTier small{font-size:10px;color:#ccd0cc}
.rarityBar{width:min(750px,100%);height:4px;margin-top:18px;background:linear-gradient(90deg,#f87164,#ec9c57,#e4ca5f,#a3ca66,#62b995,#a5a5e2);border-radius:10px}
.rarityCaption{width:min(750px,100%);display:flex;justify-content:space-between;font-size:10px;color:#b7c3bb;margin:5px 0 19px}
.startRoad{border-radius:12px;border:2px solid #f3c72a;background:#08623f;color:#fff;font-weight:850;font-size:18px;padding:14px 28px;box-shadow:0 4px 18px #0008;transition:background .15s,transform .15s}
.startRoad:hover:not(:disabled){background:#087f53;transform:translateY(-1px)}
.startRoad span{margin-left:7px}
.heroExtras{display:flex;gap:20px;justify-content:center;margin-top:13px;flex-wrap:wrap}
.textAction{color:#e3e8df;background:transparent;border:0;padding:8px;font-size:13px;text-decoration:underline;text-underline-offset:3px}
.heroRules{color:#d2dfd6;margin-top:10px;font-size:12px;max-width:540px}
.heroRules summary{cursor:pointer;font-weight:750;list-style-position:inside}
.heroRules div{text-align:left;border:1px solid #ffffff2a;border-radius:10px;background:#132521e8;margin:10px 0;padding:8px 18px}
.heroRules p{margin:8px 0}
.heroDisclaimer{font-size:10px;color:#acbcb6;max-width:560px;margin:16px auto 0;line-height:1.5}
/* The journey map fills most of the screen, with the question immediately below. */
.playPage{width:min(1220px,calc(100% - 24px));padding:0 0 30px}
.gameStage{margin:0 auto}
.journeyMap{height:clamp(500px,70dvh,790px);width:100%;position:relative;overflow:hidden;border:1px solid #6d7b68;border-radius:11px;background:#cdd2b9;color:#1b271f;isolation:isolate;box-shadow:0 20px 50px #0004}
.mapViewport,.mapFallback,.liveMap{position:absolute;inset:0}
.mapFallback{background:linear-gradient(138deg,#ccd8ad,#f0e9d4);overflow:hidden}
.mapFallback svg{width:100%;height:100%;object-fit:cover;opacity:.75;filter:sepia(.4) saturate(.55)}
.liveMap{z-index:1;opacity:0;transition:opacity .35s}
.liveMap.mapLoaded{opacity:1}
.journeyMap .leaflet-container{background:#d5d8c6;z-index:1!important;font-family:inherit}

.journeyMap .leaflet-control-container{z-index:2;position:relative}
.journeyMap .leaflet-control-attribution{background:rgba(255,255,255,.84);font-size:10px;padding:1px 4px}
.km-player-marker{border:2px solid #fff;border-radius:100%;background:#976d4c;display:grid;place-items:center;box-shadow:0 1px 0 3px #153b2d,0 6px 15px #0007;font-size:23px}
.km-player-marker span{line-height:1;display:block}
.journeyGlass{background:#ffffffed;box-shadow:0 5px 18px #253b292d;border:1px solid #d8ddda;border-radius:8px}
.positionBubble{position:absolute;z-index:3;top:12px;left:12px;padding:10px 13px;display:flex;flex-direction:column;gap:3px;max-width:48%}
.positionBubble b{font-size:14px}
.positionBubble small{font-size:11px;color:#5a655e}
.directionSign{position:absolute;z-index:3;top:12px;right:12px;width:195px;padding:8px 12px;background:#08643e;color:#fff;border:2px solid #e9f4ea;box-shadow:0 0 0 2px #18643e,0 6px 20px #0003}
.directionSign strong{font-size:9px;letter-spacing:1px;display:block;margin-bottom:3px;color:#d3eadb}
.directionSign div{display:flex;justify-content:space-between;gap:9px;font-size:12px;line-height:1.6}
.directionSign b{font:700 12px ui-monospace,monospace}
.journeyMapBottom{position:absolute;bottom:23px;left:12px;right:12px;z-index:3;display:flex;justify-content:space-between;gap:10px;align-items:end}
.mapDistance{display:flex;align-items:center;gap:7px;padding:8px 11px;font-size:11px}
.mapDistance span{color:#2f865c}
.mapButtons{display:flex;gap:3px;padding:4px;border-radius:8px;background:#fffffff2;box-shadow:0 4px 10px #0002}
.mapButtons button{background:#f7faf6;color:#1e2c25;font-size:11px;font-weight:700;padding:9px 11px;border-radius:5px}
.mapButtons button:first-child{background:#1c2824;color:#fff}
.mapButtons button:hover{filter:brightness(.93)}
.fallbackAttribution{position:absolute;z-index:3;left:12px;bottom:4px;font-size:9px;color:#36453c;background:#eeefe2ce;padding:1px 3px;border-radius:3px;pointer-events:none}
.stageQuestion{max-width:1050px;margin:0 auto;background:transparent;border:0;border-radius:0;box-shadow:none;padding:8px 0 15px}
.stageQuestion .questionHead{padding:10px 10px 5px}
.stageQuestion .qtext{font-size:clamp(23px,3vw,33px);padding:3px 10px 0}
.stageQuestion .qdesc{margin:3px 10px 10px;padding-left:10px;font-size:13px;border-left:3px solid #edc83b;color:#d5e2dd}
.stageQuestion .timerwrap{margin:0 10px 10px;padding:0}
.stageQuestion .timerHead{margin-bottom:5px}
.stageQuestion .timerTrack{height:7px}
.stageQuestion .inputLine{padding:0 10px}
.stageQuestion .answerInput{border-radius:9px;height:48px;background:#1c2a2b;border:1px solid #37654e}
.stageQuestion .sendButton{border-radius:9px;min-width:105px;background:#08754a;color:white}
.stageQuestion .qhelp{margin:5px 10px;font-size:11px;color:#afbbb4}
.stageQuestion .errorText{padding:0 10px}
.stageQuestion .feedbackContent{max-width:640px;margin:0 auto;padding:12px;text-align:center}
.stageQuestion .feedbackTitle{margin:6px auto;font-size:27px}
.nextRoad{font-size:16px;margin-top:16px}
.resultStage{text-align:center;max-width:850px}
.resultStage .resultTable{text-align:left;margin:18px 0}
.returnHome{margin:10px 0}
.onlineBoard{width:100%;max-width:820px;margin:16px auto}
.footer{justify-content:center;padding:12px 0 25px;font-size:10px;text-align:center;line-height:1.5}
@media(max-width:780px){.homeHero{min-height:calc(100dvh - 120px);padding-top:55px;padding-bottom:95px}.heroSign span{font-size:clamp(48px,11vw,81px)}.playPage{width:calc(100% - 14px)}.journeyMap{height:min(67dvh,740px);min-height:430px}.positionBubble{padding:7px 9px}.directionSign{width:160px}.directionSign div{font-size:10px}.directionSign b{font-size:10px}}
@media(max-width:520px){.topbar{padding:10px 0;min-height:60px}.miniRoadSign{font-size:18px;padding:5px 7px}.headerIssue{font-size:9px;white-space:normal}.headerIssue small{font-size:8px}.headLeft{gap:8px!important}.navright{gap:5px}.roundBtn{width:34px;height:34px}.navright select{min-width:67px;max-width:68px;font-size:11px}.homeHero{padding:45px 10px 65px}.heroSign{padding:9px 18px 11px;margin-bottom:16px}.heroSign:before{inset:5px}.heroSign span{font-size:clamp(47px,12vw,69px);letter-spacing:-2px}.heroRoute{font-size:10px;letter-spacing:1px}.heroIntro{font-size:14px;margin-bottom:20px;max-width:340px}.travelTiers{gap:3px}.tierCircle{height:37px;width:37px;font-size:20px;border-width:2px;outline-width:1px}.travelTier b{font-size:8px}.travelTier small{font-size:8px}.rarityBar{margin-top:12px}.startRoad{font-size:15px;padding:13px 20px}.heroDisclaimer{font-size:10px}.journeyMap{height:57dvh;min-height:420px}.positionBubble{top:8px;left:8px;max-width:40%}.positionBubble b{font-size:11px}.positionBubble small{font-size:9px}.directionSign{top:8px;right:8px;width:142px;padding:5px 8px}.directionSign strong{font-size:8px}.directionSign div{font-size:9px}.directionSign b{font-size:9px}.journeyMapBottom{left:8px;right:8px;bottom:19px}.mapDistance{font-size:10px;padding:5px}.mapButtons button{font-size:9px;padding:7px 5px}.fallbackAttribution{font-size:7px;left:8px}.stageQuestion .qtext{font-size:26px;padding-left:10px}.stageQuestion .qdesc{font-size:12px}.stageQuestion .answerInput{height:43px;font-size:14px}.stageQuestion .sendButton{min-width:82px;font-size:13px}.footer{font-size:9px}.footer span{max-width:340px}}
@media(max-width:345px){.tierCircle{height:33px;width:33px;font-size:17px}.travelTier b{font-size:7px}.heroSign span{font-size:44px}.miniRoadSign{font-size:15px}.directionSign{width:127px}.positionBubble small{font-size:8px}.mapDistance{font-size:9px}}

/* V7: leaderboard, accessibility and user privacy controls */
.skipLink{position:fixed;z-index:999;left:12px;top:-65px;color:#13221c;background:#ffe075;border-radius:8px;padding:12px;text-decoration:none;font-weight:800}
.skipLink:focus{top:12px}
.leaderboard-section{max-width:900px;padding:25px 12px 65px}
.board-head{display:flex;justify-content:space-between;gap:20px;align-items:center}
.board-head h2{margin:2px 0 4px;font-size:clamp(21px,4vw,31px);letter-spacing:-.5px}
.board-kicker{font-size:11px;font-weight:900;letter-spacing:2px;color:#e6cf5e}
.board-head p{margin:3px 0;color:#b7c6bc;font-size:13px}
.boardRefresh{padding:10px 18px;font-size:12px;border-radius:10px;flex-shrink:0}
.publicBoard{margin:15px 0;border-radius:16px;border:1px solid #425a50;background:#1a2927;padding:14px 20px;min-height:74px}
.publicBoard p{margin:7px 0;color:#c7d7cc}
.boardMeta{font-size:11px;color:#b8c5b9;margin-bottom:8px}
.boardMeta strong{color:#ffd84a}
.boardEntries{display:flex;flex-direction:column}
.boardEntry{display:flex;align-items:center;gap:12px;padding:13px 8px;border-top:1px solid #ffffff16}
.boardEntry:first-child{border-top:0}
.boardEntry .boardRank{width:43px;text-align:center;font-weight:900;font-size:17px;color:#ffd75f}
.boardEntry .boardPlayer{flex:1;color:#d7e2d7;font-size:13px}
.boardEntry strong{font-size:18px;font-variant-numeric:tabular-nums;color:white}
.player-controls{display:flex;gap:15px;justify-content:space-between;align-items:center;margin-top:18px}
.player-controls p{margin:0;font-size:11px;color:#a2b5a9;max-width:590px}
.deleteAction{color:#f5bbab;text-align:left;font-size:11px;white-space:nowrap}
@media(max-width:520px){.leaderboard-section{padding:15px 7px 52px}.board-head{align-items:start}.board-head h2{font-size:21px}.boardRefresh{padding:9px 10px}.publicBoard{padding:10px}.boardEntry{padding:13px 3px}.boardEntry .boardPlayer{font-size:12px}.boardEntry strong{font-size:16px}.player-controls{flex-direction:column;align-items:start;gap:8px}.deleteAction{padding-left:0}}

.suggestAnswer{display:block;margin:9px 0 4px;padding:8px 11px;border:1px solid #dcbf5d;border-radius:9px;color:#f9df87;background:#262d27;font-size:12px;font-weight:650;text-align:left}
.suggestAnswer:disabled{opacity:.67;cursor:default}
:focus-visible{outline:3px solid #fbe084!important;outline-offset:3px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* V8: compact mobile game and non-identifying weekly/personal statistics */
.boardTabs{display:inline-flex;gap:5px;padding:4px;border:1px solid #41594f;border-radius:12px;background:#12221e;margin-top:16px}
.boardTab{border:0;border-radius:8px;background:transparent;color:#c9d9d0;padding:9px 14px;font-size:13px;font-weight:800;cursor:pointer}
.boardTab.active{background:#f6d454;color:#151d18}
.personalPanel{margin:16px 0 2px;border-radius:15px;border:1px solid #425a50;background:#172623;padding:18px}
.personalHead{display:flex;justify-content:space-between;align-items:center;gap:15px}
.personalHead h3{font-size:18px;margin:0 0 3px}
.personalHead p,.personalNote{margin:4px 0;font-size:12px;color:#aebfb3}
.personalHead button{font-size:12px;padding:9px 15px}
.personalMetrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:17px 0}
.personalMetrics>div{padding:11px;background:#23342d;border-radius:10px;min-width:0}
.personalMetrics small{font-size:10px;color:#bac6bc;display:block}
.personalMetrics strong{font-size:20px;color:#f6d454;display:block;margin-top:5px;white-space:nowrap}
.personalPanel h4{font-size:13px;letter-spacing:.02em;margin:16px 0 7px}
.personalHistory{max-height:250px;overflow:auto}
.personalHistory>div{padding:9px 5px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #ffffff12;font-size:12px}
.personalHistory strong{font-size:13px;color:#fff}
@media(max-width:520px){
 .journeyMap{height:clamp(300px,45dvh,420px);min-height:300px}
 .personalPanel{padding:12px}.personalMetrics{grid-template-columns:repeat(2,minmax(0,1fr))}
 .personalMetrics strong{font-size:18px}.boardTabs{margin-top:10px}.boardTab{padding:9px 12px}
}

/* Turnstile is displayed only when the site key is configured and a new anonymous session is required. */
.captchaOverlay{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;background:#07140ee8;padding:16px}
.captchaDialog{width:min(420px,100%);background:#182820;color:#fff;border:1px solid #c1d3aa;border-radius:16px;box-shadow:0 20px 70px #0009;padding:22px;display:flex;flex-direction:column;gap:14px}
.captchaDialog h2{font-size:22px;margin:0}.captchaDialog p{margin:0;color:#dae4d7;font-size:13px}
.captchaSlot{min-height:70px;display:grid;place-items:center;max-width:100%;overflow:hidden}
.captchaCancel{align-self:flex-end}

/* V9 player-experience enhancements */
.nextChallenge{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;color:#d3dfcd;font-size:12px!important;margin:0 auto 18px!important}
.nextChallenge strong{font-variant-numeric:tabular-nums;color:#f9d95b;font-size:15px;letter-spacing:1px}
.nextChallenge small{font-size:10px;color:#9daea4}
.connectionNotice:not([hidden]){position:sticky;top:0;z-index:2000;display:block;text-align:center;background:#f2c86b;color:#1f281b;padding:9px 12px;font-size:12px;font-weight:800}
.journeyBadge{display:flex;align-items:center;justify-content:center;gap:12px;max-width:430px;margin:15px auto 20px;padding:13px 18px;border:1px solid #6f7b4a;background:#293c2b;border-radius:14px;text-align:left}
.journeyBadge>span{font-size:35px;line-height:1.1}.journeyBadge strong{display:block;color:#f6da67;font-size:17px}.journeyBadge small{display:block;color:#ced9c1;font-size:11px}
.personalMetrics{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:520px){.personalMetrics{grid-template-columns:repeat(2,minmax(0,1fr))}.journeyBadge{margin:12px 8px}.nextChallenge{font-size:11px!important}}
@media(min-width:700px){.personalMetrics{grid-template-columns:repeat(6,minmax(0,1fr))}.personalMetrics strong{font-size:18px}}

/* Keep question, timer and answer in the first mobile viewport. */
@media(max-width:520px){
 .playPage.is-answering .journeyMap{height:clamp(185px,27dvh,245px);min-height:185px}
 .playPage.is-answering .directionSign{display:none}
 .playPage.is-answering .mapButtons{display:none}
 .playPage.is-answering .journeyMapBottom{bottom:13px}
 .playPage.is-answering .positionBubble{max-width:72%}
 .playPage.is-answering .stageQuestion{padding-top:6px}
}
@media(min-width:521px) and (max-width:850px){
 .playPage.is-answering .journeyMap{height:clamp(240px,33dvh,340px);min-height:240px}
}

/* V10: accessible lightweight onboarding dialog */
.quickGuide{width:min(550px,calc(100% - 24px));max-height:min(90dvh,720px);overflow:auto;margin:auto;border:1px solid #5b756a;border-radius:22px;padding:0;color:#eaf3e9;background:#192b28;box-shadow:0 30px 120px #000b}
.quickGuide::backdrop{background:rgba(7,17,17,.82);backdrop-filter:blur(6px)}
.guideInner{padding:clamp(19px,4vw,30px);line-height:1.58}.guideTop{display:flex;align-items:center;justify-content:space-between;gap:10px}.guideTop button{background:#29413b;color:#fff;border:1px solid #627c70;border-radius:10px;min-width:36px;min-height:36px}.guideAccent{color:#f8da61;letter-spacing:2px;font-size:11px;font-weight:900}.quickGuide h2{font-size:clamp(22px,5vw,31px);line-height:1.15;letter-spacing:-.6px;margin:16px 0}.quickGuide p,.quickGuide li{color:#d7e2dc;font-size:14px}.quickGuide ol{padding-left:22px}.quickGuide li{margin:9px 0}.quickGuide strong{color:#fae484}.guideFoot{font-size:12px!important;color:#aec1b7!important}.guideDone{display:block;margin:18px auto 0;width:100%}
@media(max-width:400px){.heroExtras{gap:9px}.heroExtras .textAction{font-size:11px;padding:6px}}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   V11 MOBILE FOCUS — independent Kilometar! journey-first interface.
   Priorities: readable prompt, trustworthy timer, one-line submit,
   keyboard-safe entry, route always accessible. No change to score rules.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.kmPlayRibbon{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px 4px;font-size:12px;color:#bbcec4}
.kmLocation{display:flex;align-items:center;gap:9px;min-width:0;overflow:hidden}
.kmPlaceText{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.kmPulse{height:7px;width:7px;border-radius:50%;background:#99ed8d;box-shadow:0 0 0 4px #79e2a719;flex:none}
.kmDistance{display:flex;align-items:center;gap:9px;flex:none}
.kmDistance strong{color:#ffdf6a;white-space:nowrap;font-size:13px;font-variant-numeric:tabular-nums}
.kmMapPeek{display:none;border:1px solid #526d63;background:#294039;color:#eff9ed;border-radius:10px;padding:6px 8px;white-space:nowrap;font-size:11px;font-weight:800}
.kmSegments{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;padding:8px 10px 4px}
.kmSegments i{height:4px;background:#4c6058;border-radius:10px}
.kmSegments i.passed{background:#51d59c}
.kmSegments i.current{background:#f5d85a;box-shadow:0 0 9px #f2d96370}
@media(max-width:760px){
 .playPage.is-answering{display:flex;flex-direction:column;gap:0;width:min(calc(100% - 24px),690px);padding:8px 0 30px}
 .playPage.is-answering .stageQuestion{order:0;width:100%;margin:0 auto;padding:14px 12px 15px;border-radius:21px;background:linear-gradient(157deg,#1d2e2b,#131e20 73%);border:1px solid #456356;box-shadow:0 18px 42px #0004}
 .playPage.is-answering .gameStage{order:1;width:100%;margin:14px auto 0}
 .playPage.is-answering .journeyMap{min-height:150px;height:clamp(150px,23dvh,215px);border-radius:17px}
 .playPage.is-answering .directionSign{display:none}
 .playPage.is-answering .mapButtons{display:none}
 .playPage.is-answering .positionBubble{max-width:67%}
 .playPage.is-answering .stageQuestion .questionHead{padding:8px 10px 0}
 .playPage.is-answering .stageQuestion .qtext{padding:2px 10px 0;margin:5px 0 8px;font-size:clamp(24px,6.7vw,35px);line-height:1.12;letter-spacing:-.75px;overflow-wrap:break-word}
 .playPage.is-answering .stageQuestion .qdesc{margin:0 10px 13px;padding:2px 0 2px 11px;font-size:clamp(12px,3.55vw,15px);line-height:1.42;color:#dbe6df}
 .playPage.is-answering .stageQuestion .timerwrap{margin:0 10px 9px}
 .playPage.is-answering .stageQuestion .timerHead{font-size:12px;margin-bottom:5px}
 .playPage.is-answering .stageQuestion .timerNum{font-size:18px;font-weight:900;font-variant-numeric:tabular-nums}
 .playPage.is-answering .stageQuestion .timerTrack{height:7px;background:#36483e;border-radius:8px}
 .playPage.is-answering .stageQuestion .inputLine{display:grid;grid-template-columns:minmax(0,1fr) 94px;gap:8px;align-items:stretch;padding:0 10px}
 .playPage.is-answering .stageQuestion .answerInput{width:100%;min-width:0;height:51px;padding:0 12px;font-size:16px;border:1.5px solid #557a64;background:#0f1d1b;color:#fff;border-radius:13px}
 .playPage.is-answering .stageQuestion .answerInput:focus{border-color:#a2e98c;box-shadow:0 0 0 3px #a2e98c25;outline:0}
 .playPage.is-answering .stageQuestion .sendButton{min-width:0;width:100%;height:51px;padding:0 9px;border-radius:13px;background:linear-gradient(150deg,#1ac27c,#0c8559);color:#fff;font-size:14px;font-weight:900}
 .playPage.is-answering .stageQuestion .qhelp{margin:8px 10px 0;font-size:10px}
 .playPage.is-answering .stageQuestion .errorText{font-size:12px;margin:4px 0;padding:0 10px;color:#ff9c8d}
 .playPage.is-answering .kmPlayRibbon{padding:0 10px 3px}
 .playPage.is-answering .kmSegments{padding:8px 10px 4px}
}
/* Fixed to the VISUAL (keyboard-excluding) viewport on modern Android/iOS.
   The existing input DOM node stays in place: no duplicated fields or drafts. */
@media(max-width:760px){
 body.kmKeyboardMode{overflow:hidden;overscroll-behavior:none}
 body.kmKeyboardMode .playPage.is-answering .stageQuestion{
  position:fixed;z-index:4000;inset:auto 0 auto 0;
  top:var(--kmVisibleTop,0px);left:0;right:0;
  width:100%;max-width:none;min-height:0;
  height:var(--kmVisibleHeight,100dvh);
  margin:0;padding:max(9px,env(safe-area-inset-top)) 12px 12px;
  border:none;border-radius:0;
  background:linear-gradient(164deg,#1e332c 0%,#101b1d 53%,#0d1618 100%);
  display:flex;flex-direction:column;overflow-y:auto;
  overscroll-behavior:contain;box-shadow:none;
 }
 body.kmKeyboardMode .playPage.is-answering .kmMapPeek{display:inline-flex;align-items:center;justify-content:center;min-height:33px}
 body.kmKeyboardMode .playPage.is-answering .kmPlayRibbon{padding:3px 3px 6px;gap:8px}
 body.kmKeyboardMode .playPage.is-answering .kmSegments{padding:4px 4px 7px}
 body.kmKeyboardMode .playPage.is-answering .questionHead{padding:5px 4px 0}
 body.kmKeyboardMode .playPage.is-answering .qtext{padding:0 4px;font-size:clamp(23px,6.7vw,31px);margin:7px 0;line-height:1.13}
 body.kmKeyboardMode .playPage.is-answering .qdesc{margin:0 4px 11px;font-size:13px;line-height:1.35}
 body.kmKeyboardMode .playPage.is-answering .timerwrap{margin:0 4px 10px}
 body.kmKeyboardMode .playPage.is-answering #answerForm,
 body.kmKeyboardMode .playPage.is-answering #onlineAnswerForm{margin-top:auto;flex:none}
 body.kmKeyboardMode .playPage.is-answering .inputLine{padding:0 4px;gap:8px}
 body.kmKeyboardMode .playPage.is-answering .qhelp{display:none}
 body.kmKeyboardMode .playPage.is-answering .errorText{margin:4px 4px 0;padding:0;font-size:11px;min-height:0}
 body.kmKeyboardMode .snackbar{display:none}
}
@media(max-width:760px){
 body.kmKeyboardTight .playPage.is-answering .stageQuestion{padding:7px 12px 9px}
 body.kmKeyboardTight .playPage.is-answering .qtext{font-size:clamp(22px,6.1vw,27px);margin:3px 0 5px}
 body.kmKeyboardTight .playPage.is-answering .qdesc{margin-bottom:6px;font-size:12px}
 body.kmKeyboardTight .playPage.is-answering .kmSegments{padding-top:2px;padding-bottom:3px}
 body.kmKeyboardTight .playPage.is-answering .questionHead{padding-top:2px}
 body.kmKeyboardTight .playPage.is-answering .timerwrap{margin-bottom:6px}
 body.kmKeyboardTight .playPage.is-answering .timerTrack{height:5px}
 body.kmKeyboardTight .playPage.is-answering .answerInput,
 body.kmKeyboardTight .playPage.is-answering .sendButton{height:45px}
 body.kmKeyboardTiny .playPage.is-answering .kmSegments{display:none}
 body.kmKeyboardTiny .playPage.is-answering .kmLocation{max-width:48%}
 body.kmKeyboardTiny .playPage.is-answering .qtext{font-size:21px}
 body.kmKeyboardTiny .playPage.is-answering .qdesc{font-size:11px}
}
@media(min-width:761px){.kmPlayRibbon{padding-top:12px}.kmSegments{margin-bottom:7px}}

/* Final V11 refinement: feedback comes before the map on phones, too. */
.kmQuestionCore{min-width:0}
@media(max-width:760px){
 .playPage.is-answering .stageQuestion .kmQuestionCore{margin:0}
 .playPage.is-answering .returnHome{order:2;align-self:center;text-align:center;margin:14px 0}
 .playPage:not(.is-answering){display:flex;flex-direction:column;gap:0;width:min(calc(100% - 24px),690px)}
 .playPage:not(.is-answering)>.stageQuestion{order:0;width:100%;background:linear-gradient(155deg,#1d2e2b,#131e20 74%);border:1px solid #426153;border-radius:18px;padding:10px;margin:8px 0 0}
 .playPage:not(.is-answering)>.gameStage{order:1;width:100%;margin:14px 0}
 .playPage:not(.is-answering)>.onlineBoard{order:2}
 .playPage:not(.is-answering)>.returnHome{order:3;align-self:center}
 .playPage:not(.is-answering) .journeyMap{height:clamp(155px,26dvh,225px);min-height:155px;border-radius:17px}
 .playPage:not(.is-answering) .directionSign,.playPage:not(.is-answering) .mapButtons{display:none}
}
@media(max-width:760px){
 body.kmKeyboardMode .playPage.is-answering .kmQuestionCore{min-height:0;flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
 body.kmKeyboardMode .playPage.is-answering .timerwrap{flex:none}
 body.kmKeyboardMode .playPage.is-answering #answerForm,
 body.kmKeyboardMode .playPage.is-answering #onlineAnswerForm{margin-top:0;flex:none;padding-top:2px}
 body.kmKeyboardMode .playPage.is-answering #onlineError,
 body.kmKeyboardMode .playPage.is-answering #error{flex:none}
}

/* V12 SIMPLY MORE — advanced features live one layer below the core gameplay. */
.kmMoreHub{width:min(600px,100%);margin:18px auto 4px;border:1px solid #5b6d5c;background:#172824d6;border-radius:18px;text-align:left;color:#e7f1e8;overflow:hidden}
.kmMoreHub>summary{padding:13px 17px;cursor:pointer;font-weight:850;font-size:13px;display:flex;justify-content:space-between;align-items:center;gap:10px;list-style:inside}
.kmMoreHub>summary span{font-weight:500;font-size:10px;color:#a6bdb0}
.kmMoreHub[open]>summary{border-bottom:1px solid #ffffff19;background:#263b30}
.kmMoreGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:13px}
.kmMoreGrid>.secondary{padding:11px 10px;font-size:12px;border-radius:12px;min-height:47px}
.kmChoice{grid-column:1/-1;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:space-between;gap:8px}
.kmChoice select{max-width:55%;border:1px solid #506c5b;background:#243a30;border-radius:10px;color:white;padding:9px;font-weight:700;font-size:12px}
.kmMoreNote{font-size:11px!important;color:#afc5b7!important;line-height:1.55;margin:3px 13px 14px!important}
.kmQuestBox{border:1px solid #668166;background:linear-gradient(100deg,#24392d,#1a312b);padding:13px;border-radius:12px;margin:16px 0;color:#ecf8eb;display:flex;flex-direction:column;gap:4px}
.kmQuestBox strong{font-size:14px}.kmQuestBox span{font-size:12px}.kmQuestBox small{font-size:10px;color:#bed0bf}
.kmQuestProgress{height:7px;background:#0e2119;border-radius:10px;overflow:hidden;margin:4px 0}
.kmQuestProgress i{display:block;background:#a2e776;height:100%;border-radius:10px;transition:width .3s}
.kmStatsDetails{margin:15px 0;padding:11px;border-radius:12px;border:1px solid #516957}
.kmStatsDetails summary{cursor:pointer;font-size:13px;font-weight:800}
.kmStatsDetails>p{font-size:12px;color:#d3e4d9}
.kmAchievementGrid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:13px 0}
.kmAchievementGrid span{display:block;background:#2c4135;border-radius:10px;padding:8px;font-size:11px}
.kmAchievementGrid span.locked{opacity:.5;filter:grayscale(.95)}
.kmHistoryBars{height:78px;display:flex;align-items:end;gap:5px;margin:15px 2px 4px;padding-bottom:4px;border-bottom:1px solid #57725d}
.kmHistoryBars i{min-width:4px;flex:1;max-width:40px;background:linear-gradient(0deg,#3fb782,#cbe97a);border-radius:4px 4px 1px 1px}
.kmInsights{max-width:800px;margin:20px auto;border:1px solid #4d6b58;border-radius:15px;background:#1a3029;overflow:hidden;text-align:left}
.kmInsights summary{cursor:pointer;font-weight:800;padding:14px 16px;color:#e8f3e9}
.kmInsights[open] summary{border-bottom:1px solid #577560}
.kmInsights>#answerInsights,.kmInsights>.resultTable{margin:12px 14px}
.kmInsightList{display:flex;flex-direction:column;gap:7px}
.kmInsightItem{display:flex;justify-content:space-between;align-items:center;gap:10px;border-radius:10px;background:#253a31;padding:9px 11px;font-size:12px}
.kmInsightItem>span{min-width:0;max-width:60%}.kmInsightItem>span:last-child{text-align:right;max-width:42%}
.kmInsightItem small{display:block;color:#bdd4c2;font-size:10px;overflow-wrap:break-word}
.kmInsightItem b{color:#f0f5ec}
.kmFriendsDialog{background:#15251f;color:#edf3eb;border:1px solid #587560;border-radius:22px;box-shadow:0 20px 70px #000a;padding:0;width:min(95vw,540px);max-height:min(91dvh,840px);overflow:auto;margin:auto}
.kmFriendsDialog::backdrop{background:#070f0fcb;backdrop-filter:blur(3px)}
.kmFriendsInner{padding:clamp(18px,4vw,26px)}
.kmFriendsHeader{display:flex;justify-content:space-between;align-items:start;gap:12px}
.kmFriendsHeader small{font-weight:900;font-size:11px;color:#e5cc68;letter-spacing:1px}
.kmFriendsHeader h2{font-size:24px;margin:6px 0 10px;line-height:1.1}
.kmFriendsHeader button{color:#eef5eb;background:#2b4334;border:1px solid #637567;border-radius:10px;width:39px;height:39px}
.kmFriendsInner>p{font-size:13px;color:#cbdbcd}
.kmFriendActions{display:grid;grid-template-columns:1fr 110px;gap:9px;align-items:end;margin:18px 0}
.kmFriendActions>.primary{grid-column:1/-1;min-height:50px;padding:10px;font-size:15px}
.kmFriendActions>.secondary{padding:13px 7px;font-size:12px}
.kmFriendActions label{display:block;font-size:12px;color:#d4e0d8;font-weight:700}
.kmFriendActions input{width:100%;display:block;margin-top:6px;border-radius:11px;padding:12px;border:1px solid #6b8a73;background:#0f211b;color:#fff;font-size:15px;letter-spacing:1px;text-transform:uppercase}
.kmFriendCode{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:7px;border-radius:13px;padding:13px;background:#223b2a}
.kmFriendCode small{flex-basis:100%;font-size:10px;color:#cbdcc8;font-weight:800}.kmFriendCode strong{font-size:clamp(18px,5vw,29px);color:#f8df67;letter-spacing:2px;overflow-wrap:anywhere}.kmFriendCode button{font-size:12px;padding:11px}
.kmFriendPeople{margin:12px 0}.kmFriendPeople>div{display:flex;justify-content:space-between;gap:10px;padding:10px 6px;border-bottom:1px solid #3f5845;font-size:13px}.kmFriendPeople b{color:#dfebbc}
/* Joy without distracting movement: transitions are disabled by reduced-motion setting. */
.feedbackContent .gain{animation:kmGain .45s ease both}
.journeyBadge{animation:kmRise .55s ease both}
@keyframes kmGain{from{transform:translateY(8px);opacity:.1}to{transform:translateY(0);opacity:1}}
@keyframes kmRise{from{transform:translateY(12px);opacity:.1}to{transform:translateY(0);opacity:1}}
/* A light theme in optional settings, without altering the core game layout. */
html[data-theme="light"]{color-scheme:light;--bg:#e8f0e9;--bg2:#eef4ef;--card:#fff;--card2:#f5faf4;--line:#91b3a0;--text:#14251b;--muted:#476352;--lime:#267848;--green:#186b48;--yellow:#edc44f}
html[data-theme="light"] body{background:linear-gradient(170deg,#f3f8ed,#dce9dd 100%);color:#19382a}
html[data-theme="light"] .topbar{border-color:#aabfaf}
html[data-theme="light"] .headerIssue{color:#355342}
html[data-theme="light"] .navright select,html[data-theme="light"] .roundBtn{background:#e5f0e7;color:#173321;border-color:#afc6b5}
html[data-theme="light"] .homeHero:before{filter:brightness(1.5) saturate(.65);opacity:.7}
html[data-theme="light"] .homeHero:after{background:linear-gradient(180deg,#f2f8ebd5,#e9f2e8cf 55%,#dce8dbf5)}
html[data-theme="light"] .homeHero{color:#193523}
html[data-theme="light"] .heroIntro,html[data-theme="light"] .heroRules,html[data-theme="light"] .heroDisclaimer{color:#2d4a37}
html[data-theme="light"] .heroRoute,html[data-theme="light"] .nextChallenge{color:#1f402a}
html[data-theme="light"] .travelTier b,html[data-theme="light"] .travelTier small{color:#203e29}
html[data-theme="light"] .rarityCaption{color:#2b5036}
html[data-theme="light"] .kmMoreHub{background:#ffffffec;color:#153324;border-color:#b3cdb8}
html[data-theme="light"] .kmMoreHub[open]>summary{background:#e5f2e5;border-color:#d0e0d2}
html[data-theme="light"] .kmMoreHub>summary span,html[data-theme="light"] .kmMoreNote{color:#42634c!important}
html[data-theme="light"] .kmChoice select{background:#e7f4e9;border-color:#acccae;color:#1a3b2a}
html[data-theme="light"] .leaderboard-section,html[data-theme="light"] .board-head,html[data-theme="light"] .personalPanel,html[data-theme="light"] .personalMetrics>div{background:#ffffff!important;color:#203b2c;border-color:#b7cfbd!important}
html[data-theme="light"] .leaderboard-section h2,html[data-theme="light"] .leaderboard-section h3,html[data-theme="light"] .personalPanel strong,html[data-theme="light"] .boardEntry,html[data-theme="light"] .boardMeta{color:#163a23}
html[data-theme="light"] .personalPanel p,html[data-theme="light"] .personalNote,html[data-theme="light"] .board-head p{color:#42664e}
html[data-theme="light"] .boardEntry,html[data-theme="light"] .resultRow{background:#f0f8ed;color:#1d3d2e;border-color:#b2ceb9}
html[data-theme="light"] .boardEntry strong,html[data-theme="light"] .resultRow strong{color:#236e39}
html[data-theme="light"] .kmQuestBox,html[data-theme="light"] .kmStatsDetails{background:#e2efe3;color:#143622;border-color:#b8cfb7}
html[data-theme="light"] .kmQuestBox strong,html[data-theme="light"] .kmQuestBox span,html[data-theme="light"] .kmStatsDetails>p{color:#163b25}
html[data-theme="light"] .kmQuestBox small{color:#466c4d}
html[data-theme="light"] .kmAchievementGrid span{background:#cfe6d4;color:#1a3a26}
html[data-theme="light"] .playPage .stageQuestion{background:#f8fbf8;color:#172d20!important;border-color:#a2bfa9}
html[data-theme="light"] .playPage .qdesc,html[data-theme="light"] .playPage .qhelp,html[data-theme="light"] .playPage .muted{color:#355740}
html[data-theme="light"] .playPage .qnum{background:#dce9dc;color:#254930}
html[data-theme="light"] .playPage .overline{color:#207343}
html[data-theme="light"] .playPage .answerInput{background:#fff;border-color:#89b09a;color:#162e20}
html[data-theme="light"] .playPage .resultBig,html[data-theme="light"] .playPage .kmDistance strong{color:#956a14}
html[data-theme="light"] .kmInsights{background:#f8fbf7;color:#173925;border-color:#a8c2b1}
html[data-theme="light"] .kmInsights summary{color:#1a4829}
html[data-theme="light"] .kmInsightItem{background:#e5f0e4;color:#15321d}
html[data-theme="light"] .kmInsightItem small,html[data-theme="light"] .kmInsightItem b{color:#28583b}
html[data-theme="light"] .footer{border-color:#bad0bf;color:#4e6a55}
html[data-theme="light"] .footer a{color:#27533c}
@media(max-width:520px){.kmMoreHub>summary span{display:none}.kmFriendActions{grid-template-columns:1fr 95px}.kmFriendCode strong{font-size:21px}.kmInsightItem{font-size:11px}}
/* Focused keyboard mode is deliberately dark for maximum contrast during timed answers. */
@media(max-width:760px){html[data-theme="light"] body.kmKeyboardMode .playPage.is-answering .stageQuestion{background:#142a23;color:white!important}
 html[data-theme="light"] body.kmKeyboardMode .playPage.is-answering .qdesc{color:#e1ebe4}
 html[data-theme="light"] body.kmKeyboardMode .playPage.is-answering .qnum{background:#234e3b;color:#fff}
 html[data-theme="light"] body.kmKeyboardMode .playPage.is-answering .kmDistance strong{color:#ffde74}}
/* Final light-theme contrast sweep (core dark appearance is unchanged). */
html[data-theme="light"] .heroExtras .textAction,html[data-theme="light"] .heroRules,html[data-theme="light"] .heroRules summary{color:#183d27}
html[data-theme="light"] .heroExtras .textAction:hover{color:#096733}
html[data-theme="light"] .heroRules div{background:#fff;color:#254a32;border-color:#a5c6a9}
html[data-theme="light"] .heroRoute b,html[data-theme="light"] .heroRoute{color:#3a693f}
html[data-theme="light"] .heroIntro{color:#25452f;text-shadow:none}
html[data-theme="light"] .nextChallenge strong{color:#845c02}
html[data-theme="light"] .travelTier{text-shadow:none}
html[data-theme="light"] .publicBoard{background:#f0f8ef;color:#193d2a;border-color:#9ebba4}
html[data-theme="light"] .publicBoard p,html[data-theme="light"] .publicBoard .boardMeta,html[data-theme="light"] .boardMeta strong{color:#294c36}
html[data-theme="light"] .boardEntry .boardPlayer{color:#1d4029}
html[data-theme="light"] .boardEntry .boardRank{color:#976b13}
html[data-theme="light"] .board-kicker{color:#275d3b}
html[data-theme="light"] .personalMetrics>div{background:#f1f8f0!important}
html[data-theme="light"] .personalMetrics small{color:#365c42}
html[data-theme="light"] .personalHistory strong{color:#1b5e37}
html[data-theme="light"] .player-controls p{color:#43654b}
html[data-theme="light"] .deleteAction{color:#954e41}
html[data-theme="light"] .kmStatsDetails summary,html[data-theme="light"] .personalPanel h4{color:#1a4b2a}
html[data-theme="light"] .kmAchievementGrid span.locked{opacity:.6}
html[data-theme="light"] .footer{color:#48614f}
/* Keep the finish screen focused on just two decisions; secondary tools are tucked away. */
.kmResultMore{margin:2px auto 16px;max-width:500px;border:1px solid #4e6a53;border-radius:14px;background:#20372b;text-align:left}
.kmResultMore summary{cursor:pointer;padding:11px 14px;font-size:12px;font-weight:800;color:#d8ead9}
.kmResultMoreBtns{padding:5px 12px 14px;display:flex;flex-wrap:wrap;gap:8px}
.kmResultMoreBtns button{font-size:12px;padding:11px}
html[data-theme="light"] .kmResultMore{background:#f3faf2;border-color:#a6c2ab}
html[data-theme="light"] .kmResultMore summary{color:#205335}

/* V13: iOS Safari does not zoom into focused 16px input fields. */
@media(max-width:760px){
 .playPage .answerInput,.playPage.is-answering .stageQuestion .answerInput,#friendCode{font-size:16px!important}
 .playPage.is-answering .sendButton{touch-action:manipulation}
}
/* Visible keyboard focus with no permanent visual clutter. */
:where(button,a,input,select,summary):focus-visible{outline:3px solid #f8db65;outline-offset:3px}
.kmFriendsDialog input:focus-visible{outline-offset:1px}
/* Footer contains a legacy inline dark-theme color; ensure accessible contrast on light mode. */
html[data-theme="light"] .footer a{color:#145237!important;text-decoration:underline}
@media(prefers-reduced-motion:reduce){.kmPulse{animation:none!important}}