@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shojumaru&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#111513;--panel:#191e1a;--line:#2b332d;--text:#e9ede4;--muted:#899489;--accent:#f78044}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px Inter,Arial,sans-serif}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,.map:focus-visible{outline:2px solid var(--accent);outline-offset:4px}header{max-width:1540px;margin:auto;padding:28px 4%;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;gap:6px;align-items:center;text-decoration:none;font:800 24px 'Barlow Condensed',sans-serif;letter-spacing:.7px}.brand>span:last-child{color:var(--accent)}.crest{font-family:serif;font-size:27px;margin-right:9px}header button,footer button,.mapcredit button{padding:0;background:none;border:0;color:var(--muted);font-size:11px}main{max-width:1540px;margin:auto;padding:20px 4% 0}.topline{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}h1{font-size:clamp(25px,3vw,37px);font-weight:500;letter-spacing:-1.3px;margin:0 0 10px}.topline p{color:var(--muted);font-size:11px;margin:0}.topline p span{margin-left:10px;color:#b4bfb0}.stats{display:flex;gap:45px}.stats div{display:flex;flex-direction:column;gap:8px;min-width:70px}.stats small{color:var(--muted);font-size:9px;letter-spacing:1.4px}.stats strong{font-size:22px;font-weight:500;font-variant-numeric:tabular-nums}.stats em{font-style:normal;color:var(--muted);font-size:13px}.progress{display:flex;gap:7px;margin-bottom:24px}.progress span{height:2px;flex:1;background:var(--line)}.progress .current{background:var(--accent)}.progress .done{background:#8fa77e}.game{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(330px,1fr);gap:28px;align-items:start}.scene{position:relative;background:#080b09;border-radius:7px;overflow:hidden;align-self:stretch;min-height:390px;display:flex;align-items:center;justify-content:center}.scene img{width:100%;height:100%;position:absolute;object-fit:contain}.scene button{position:absolute;bottom:12px;right:12px;background:#101a13bb;border:1px solid #ffffff25;border-radius:4px;color:white;font-size:22px;width:34px;height:34px}aside{display:flex;flex-direction:column;gap:20px}.episode{padding:0 0 8px}.controlhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;font-size:12px}.epfield{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:11px}.epfield input{width:82px;border:1px solid #394036;background:var(--panel);border-radius:5px;color:var(--text);padding:8px 4px 8px 10px;font-size:23px;text-align:center;font-variant-numeric:tabular-nums}input[type=range]{width:100%;margin:0;accent-color:var(--accent);cursor:pointer}.rangeLabels{display:flex;position:relative;justify-content:space-between;color:var(--muted);font-size:9px;margin:9px 0}.boundary{position:absolute;left:30.5%;transform:translateX(-50%);opacity:.7}#seriesHint{margin:13px 0 0;font-size:10px;color:var(--muted)}.mapsection{overflow:hidden}.mapsection .controlhead{margin-bottom:10px}.maptools{display:flex;gap:5px}.maptools button{background:var(--panel);border:1px solid var(--line);color:#c4cdbd;border-radius:4px;min-width:29px;height:26px;font-size:15px}.maptools #zoomReset{font-size:10px}.map{position:relative;border-radius:6px;overflow:hidden;cursor:crosshair;touch-action:none;aspect-ratio:1500/882.2204;background:#a1b3c7}.map svg{display:block;width:100%;height:100%;user-select:none}.map svg image{filter:saturate(.6)}.maphint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);padding:7px 10px;border-radius:4px;font-size:10px;white-space:nowrap;background:#182418df;color:#eee;pointer-events:none}.mapcredit{display:flex;justify-content:space-between;align-items:center;margin-top:9px;color:var(--muted);font-size:9px}.mapcredit button{font-size:9px}#pinStatus{color:#aebba4}.submit{display:flex;justify-content:space-between;align-items:center;background:var(--accent);border:0;border-radius:5px;padding:15px 18px;color:#1b2119;font-weight:700}.submit:disabled{opacity:.35;cursor:default}#hint{color:var(--muted);font-size:11px;margin:0}#hint:empty{display:none}footer{display:flex;justify-content:space-between;color:#6f7c70;font-size:9px;padding:26px 0;margin-top:15px}footer button{font-size:9px}#result{margin-top:25px;padding:24px;border:1px solid var(--line);background:var(--panel);border-radius:7px}#result h2{font-weight:500;font-size:25px;margin:0 0 12px;letter-spacing:-.6px}#result h2 strong{color:var(--accent);font-weight:500}#result p{font-size:12px;color:#a7b2a1;line-height:1.8;margin:5px 0}#result .resulttitle{color:var(--text)}#result .breakdown{display:flex;gap:36px;margin:22px 0}#result .breakdown span{display:flex;flex-direction:column;gap:7px;font-size:10px;color:var(--muted)}#result .breakdown strong{font-size:18px;font-weight:500;color:var(--text)}#result button{background:var(--accent);border:0;color:#172015;border-radius:4px;padding:12px 21px;font-weight:600}#result a{color:var(--muted);font-size:10px;margin-left:14px}dialog{max-width:500px;background:#1b231b;color:var(--text);border:1px solid #46533f;border-radius:9px;padding:30px}dialog::backdrop{background:#000b}dialog h2{font-size:23px;font-weight:500;margin-top:0}dialog p{font-size:12px;line-height:1.8;color:#aab5a2}dialog a{color:#dedfd3}dialog .close{float:right;border:0;background:none;color:var(--muted);font-size:23px}.map:fullscreen{border-radius:0;background:#111513;display:flex;align-items:center;justify-content:center;aspect-ratio:auto;cursor:crosshair}.map:fullscreen svg{width:100vw;height:100vh}.map:fullscreen .maphint{bottom:20px}.scene img:fullscreen{background:#050905;object-fit:contain}@media(min-width:1500px){.scene{min-height:530px}}@media(max-width:950px){.game{grid-template-columns:1fr}.scene{height:auto;min-height:0;aspect-ratio:4/3;max-height:650px}.scene img{height:100%;width:100%}aside{display:grid;grid-template-columns:1fr 1fr;gap:22px}.mapsection{grid-column:2;grid-row:1/4}.submit,#hint{grid-column:1}.stats{gap:25px}.map{aspect-ratio:1.4}.map svg{height:100%;width:100%}}@media(max-width:600px){header{padding:22px 5%}.brand{font-size:21px}.crest{font-size:23px}main{padding:16px 5% 0}.topline{gap:15px;align-items:flex-start;margin-bottom:22px}h1{font-size:26px;letter-spacing:-1px}.stats{gap:18px}.stats div{min-width:45px;gap:7px}.stats strong{font-size:18px}.stats small{font-size:8px}.topline p{font-size:9px}.topline p span{margin-left:5px}.game{gap:23px}.scene{aspect-ratio:4/3}.progress{margin-bottom:20px}aside{display:flex;gap:22px}.map{aspect-ratio:1500/882.2204}.maplabels{font-size:23px}.breakdown{gap:20px!important;flex-wrap:wrap}#result{padding:20px}#result h2{font-size:22px}.controlhead{font-size:13px}.episode{padding:0}}
.headeractions{display:flex;align-items:center;gap:25px}.headeractions #musicToggle{font-size:11px;color:#b6c0ae}.seriesTabs{display:flex;gap:5px;margin-bottom:20px;padding:4px;background:#1b211c;border-radius:6px}.seriesTabs button{flex:1;border:0;border-radius:4px;padding:9px;color:var(--muted);background:transparent;font-size:11px}.seriesTabs button.selected{background:#35402f;color:#edf0e6}.seriesTabs button:disabled{cursor:default}.scene{min-height:560px}.scene #expand{bottom:auto;top:12px;z-index:2}.scene #result{position:absolute;left:0;right:0;bottom:0;z-index:3;margin:0;border:0;border-top:1px solid #ffffff24;border-radius:0;padding:23px 25px;background:linear-gradient(110deg,#111c18b8,#111c18d9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 -20px 60px #0003}.scene #result[hidden]{display:none}.answerhead{display:flex;align-items:center;justify-content:space-between;gap:15px}.answerhead>div>small{color:#b6c5ad;font-size:8px;letter-spacing:1.8px}.scene #result h2{font-size:24px;margin:6px 0;letter-spacing:-.5px}.earned{font-size:28px;font-weight:500;color:var(--accent);text-align:right;white-space:nowrap}.earned>small{display:block;font-size:8px;letter-spacing:1.4px;font-weight:400;color:#bdc8b6;margin-top:5px}.scene #result .resulttitle{color:#d5ddcd;font-size:11px;line-height:1.5}.scene #result .breakdown{gap:25px;margin:18px 0}.scene #result .breakdown>span{flex:1;min-width:0;gap:6px;color:#c3cfbb;line-height:1.45}.scene #result .breakdown strong{font-size:20px;color:#f2f3e8}.scene #result .breakdown strong small{font-size:10px;color:#adbaa5}.scene #result .breakdown small{font-size:10px}.answeractions{display:flex;align-items:center;justify-content:space-between;gap:10px}.scene #result a{margin:0;color:#c5d0bb}.scene #result button{padding:11px 17px;font-size:12px}.map{overscroll-behavior:contain}.scene:has(#result:not([hidden])) img{opacity:.9}@media(max-width:950px){.scene{min-height:0;aspect-ratio:4/3;max-height:none}.scene:has(#result:not([hidden])){min-height:540px}.headeractions{gap:18px}}@media(max-width:600px){header{gap:12px}.brand{font-size:17px;gap:3px}.crest{margin-right:3px}.headeractions{gap:12px;flex-shrink:0}.headeractions button,.headeractions #musicToggle{font-size:9px}.scene #result{padding:18px}.scene #result h2{font-size:22px}.earned{font-size:25px}.scene #result .breakdown{gap:15px!important}.scene:has(#result:not([hidden])){min-height:500px;aspect-ratio:auto}.topline p span{margin-left:2px}}
.scene #result button{position:static;top:auto;right:auto;bottom:auto;width:auto;height:auto}.scene #result .answeractions{display:flex;align-items:center;justify-content:space-between}.scene #result .answeractions a{margin:0}
/* The game starts immediately below the logo. */
header{padding-top:25px;padding-bottom:24px}main{padding-top:0}.soundtrack{max-width:440px;margin:24px 0 0 auto}.soundtrack iframe{display:block;border:0;border-radius:8px;width:100%;height:152px}.soundtrack>a{display:block;text-align:right;margin-top:7px;color:var(--muted);font-size:9px;text-decoration:none}footer>div{display:flex;gap:22px}@media(max-width:600px){header{padding-top:20px;padding-bottom:20px}.brand{font-size:21px}.soundtrack{max-width:none;margin-top:20px}main{padding-top:0}}
.mapnav{display:flex;gap:6px;margin:0 0 8px}.mapnav button{background:#1c251d;border:1px solid #354333;border-radius:4px;color:#adbba5;font-size:9px;padding:6px 9px}.mapnav button.selected{border-color:#b7804c;color:#f4d7b7}#mapDetailNote{font-size:8px;color:#97a48e;margin:9px 0 0;line-height:1.6;min-height:13px}.village-layer{display:none}.map svg .village-layer image{filter:none}.poi{cursor:pointer}.poi text{pointer-events:auto}.maplabels{transition:opacity .15s}#detailLayers{pointer-events:auto}.mapcredit{gap:10px}#pinStatus{text-align:right}
header{gap:24px;align-items:center}.soundtrack{width:420px;max-width:46%;margin:0 0 0 auto;flex-shrink:0}.soundtrack iframe{height:152px}.soundtrack>a{margin-top:4px}.map{aspect-ratio:1080/650}.scene{min-height:560px}@media(max-width:950px){header .soundtrack{max-width:52%;width:360px}.map{aspect-ratio:1080/650}}@media(max-width:600px){header{flex-wrap:wrap;gap:14px;padding-bottom:18px}.brand{font-size:21px}header .soundtrack{max-width:none;width:100%;margin:0}.soundtrack iframe{height:152px}.soundtrack>a{font-size:9px}.map{aspect-ratio:1080/650}}

.seriesTimeline{display:grid;grid-template-columns:30.6% 69.4%;font-size:11px;letter-spacing:.07em;text-transform:uppercase;margin:12px 0 4px}.seriesTimeline span:first-child{color:#eea369}.seriesTimeline span:last-child{padding-left:10px;color:#b6c5a9;border-left:1px solid #76826c}.timelineTrack{position:relative}.timelineTrack input{width:100%;margin:10px 0;background:linear-gradient(to right,#b56e43 0%,#b56e43 30.6%,#677b61 30.6%,#677b61 100%)}.timelineTrack i{position:absolute;left:30.6%;top:4px;height:18px;width:1px;background:#e0e5d5;pointer-events:none}.timelineLabels{position:relative;display:flex;justify-content:space-between;font-size:10px;color:#9ba694;height:20px}.timelineLabels .boundary{position:absolute;left:30.6%;transform:translateX(-50%);font-size:9px}.timelineLabels b{color:#d7dac8}.epfield #ep{width:90px;text-align:right}.world-poi{cursor:crosshair}.world-poi:hover text{fill:#ffc590}.world-poi use{pointer-events:none}

.brand{color:var(--text)}

/* Brand aligns with the frame column; Spotify stays above the controls. */
header{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(330px,1fr);gap:28px;align-items:end;padding-bottom:16px}.brand{font-size:72px;gap:18px;line-height:.95;letter-spacing:1px;min-width:0}.brand .crest{font-size:81px;margin-right:9px;flex-shrink:0;color:var(--text)}.brandwords{display:flex;flex-wrap:wrap;gap:0 15px;color:var(--text)}.brandwords>span{color:var(--accent)}header .soundtrack{width:100%;max-width:100%;margin:0}.village-emblem,.country-emblem{filter:drop-shadow(0 0 2px #fff9db) drop-shadow(0 0 1px #fff9db);pointer-events:none}.map svg .village-emblem,.map svg .country-emblem image{filter:none}.maplabels{transition:none}.country-emblem{opacity:.85}
@media(max-width:950px){header{grid-template-columns:1fr;gap:18px}header .soundtrack{grid-row:1;max-width:420px;justify-self:end}.brand{grid-row:2;font-size:72px}.brand .crest{font-size:81px}}
@media(max-width:600px){header{padding:18px 5% 16px;gap:20px}.brand{font-size:63px;gap:12px;line-height:.9}.brand .crest{font-size:69px;margin:0}.brandwords{gap:4px 12px}.brandwords>span{display:block}header .soundtrack{max-width:100%;width:100%}}

.brand>.brandwords{color:var(--text)}

.brand>.brandwords:last-child{color:var(--text)}

.brand{transform:translateY(-16px)}.sceneColumn{min-width:0;display:flex;flex-direction:column;gap:18px}.sceneColumn>.scene{min-height:560px;flex:none}.ranking{padding:24px;border:1px solid var(--line);background:#161d18;border-radius:8px}.rankHeading{display:flex;align-items:center;gap:16px}.rankHeading small{font-size:9px;color:var(--muted);letter-spacing:1.4px}.rankHeading h2{margin:5px 0;font-size:24px;font-weight:500}.rankBadge{display:grid;place-items:center;flex-shrink:0;width:58px;height:64px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:#344239;color:#cfdbbc;font:32px serif}.rankBadge.tier-5{background:#9c6a2e;color:#fff0b8}.ranking p{font-size:12px;color:#acb6a6;line-height:1.6}.ranking .nickname{font-size:12px;margin:0}.rankStats{display:flex;gap:36px;margin:22px 0}.rankStats>span{display:flex;flex-direction:column;gap:8px;font-size:10px;color:var(--muted)}.rankStats strong{font-size:23px;color:var(--text);font-weight:500}.rankStats strong small{font-size:10px;color:var(--muted)}.rankProgress{height:4px;border-radius:4px;background:#344036;overflow:hidden}.rankProgress i{display:block;height:100%;background:var(--accent)}.ranking .nextRank{font-size:10px;margin-top:9px}.rankLadder{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0}.rankLadder span{padding:6px 8px;border:1px solid #303c32;border-radius:4px;font-size:9px;color:#70816f}.rankLadder .unlocked{color:#edc9ac;border-color:#8a6447;background:#513a232a}.rankNote{display:block;font-size:9px;color:var(--muted);line-height:1.7}.ranking form{display:flex;gap:8px;margin:16px 0}.ranking input{min-width:0;flex:1;padding:10px;border:1px solid #3e4d3c;background:#111913;border-radius:4px;color:var(--text)}.ranking button,.rankSignIn{padding:11px 14px;border:0;border-radius:4px;background:var(--accent);color:#162015;font-size:11px;text-decoration:none;font-weight:600}.rankSignIn{display:inline-block;margin:5px 0 16px}.signOut{margin-left:auto;font-size:10px;color:var(--muted);text-decoration:none}@media(max-width:950px){.sceneColumn>.scene{min-height:0;aspect-ratio:4/3}.sceneColumn>.scene:has(#result:not([hidden])){min-height:540px}}@media(max-width:600px){.ranking{padding:18px}.ranking form{flex-direction:column}.sceneColumn>.scene:has(#result:not([hidden])){min-height:500px}}

.rankBadge{clip-path:none;border-radius:10px;overflow:hidden;background:#121913;border:1px solid #526247;width:68px;height:68px}.rankBadge img{width:100%;height:100%;object-fit:cover;display:block}.rankLadder span{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:64px;padding:8px}.rankLadder img{width:32px;height:32px;object-fit:cover;border-radius:5px;opacity:.5}.rankLadder .unlocked img{opacity:1}.rankBadge.tier-5{border-color:#e0b66e}

.rankThumb{display:block;width:32px;height:32px;overflow:hidden;border-radius:5px;font-style:normal}.rankLadder .rankThumb img{display:block;width:100%;height:100%;border-radius:0}

/* A parchment rank scroll, framed by lacquered wooden rollers. */
.ranking{--ink:#393b2e;--faded-ink:#686b53;position:relative;isolation:isolate;margin:12px 0;padding:40px 38px 36px 62px;border:1px solid #b4a27b;border-radius:3px 12px 12px 3px;color:var(--ink);background:repeating-linear-gradient(3deg,#8b704108 0 1px,transparent 1px 5px),radial-gradient(ellipse at 50% 30%,#f8f2dc 0,#e8dfbd 75%,#cdbb8d 100%);box-shadow:inset 0 0 32px #8a69352a,0 12px 30px #0003;overflow:visible}
.ranking:before{content:"";position:absolute;z-index:-1;inset:-9px auto -9px 0;width:30px;border:1px solid #343e33;border-radius:50% / 8px;background:linear-gradient(90deg,#0004,transparent 30%,#fff2 50%,#0003),linear-gradient(to bottom,#343b32 0 9px,#aa595b 9px 32px,#c8ad60 32px 36px,#4d6b60 36px calc(100% - 36px),#c8ad60 calc(100% - 36px) calc(100% - 32px),#aa595b calc(100% - 32px) calc(100% - 9px),#343b32 calc(100% - 9px));box-shadow:4px 3px 6px #0004}
.ranking:after{content:"";position:absolute;z-index:-1;inset:0 0 0 30px;pointer-events:none;border-top:17px solid #667a66;border-bottom:17px solid #667a66;border-radius:0 10px 10px 0;box-shadow:inset 0 1px #c7b57f,inset 0 -1px #c7b57f}
.ranking .rankHeading small,.ranking .rankStats>span,.ranking .rankStats strong small,.ranking .rankNote,.ranking .signOut{color:var(--faded-ink)}
.ranking .rankHeading h2{color:#30392e;font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:600;letter-spacing:.3px}.ranking p{color:#60634e}.ranking .rankStats strong{color:#333b2e}.ranking .rankBadge{border:2px solid #8f9b78;box-shadow:0 2px 4px #55452425}.ranking .rankBadge.tier-5{border-color:#a67636}.ranking .rankProgress{background:#b9b99a;height:5px}.ranking .rankProgress i{background:#b56540}.ranking .rankLadder{gap:7px}.ranking .rankLadder>span{min-width:61px;border-color:#a9aa8b;color:#62684f;background:#f8f4df45}.ranking .rankLadder .unlocked{color:#633f29;border-color:#aa7044;background:#d2b87c40}.ranking .rankLadder img{opacity:.75}.ranking .rankLadder .unlocked img{opacity:1}.ranking .rankNote{line-height:1.6}.ranking input{background:#f5eed7;color:#30392e;border-color:#a6aa8d}.ranking input::placeholder{color:#777e64}.ranking button,.ranking .rankSignIn{background:#4d6b60;color:#fff7df}.ranking a:focus-visible,.ranking button:focus-visible,.ranking input:focus-visible{outline-color:#89512e}
@media(max-width:600px){.ranking{padding:34px 20px 30px 43px}.ranking:before{width:23px}.ranking:after{left:23px;border-top-width:13px;border-bottom-width:13px}.ranking .rankHeading{gap:12px;flex-wrap:wrap}.ranking .rankHeading h2{font-size:27px}.ranking .rankBadge{width:58px;height:58px}.ranking .signOut{margin-left:0}.ranking .rankStats{gap:25px}.ranking .rankLadder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.ranking .rankLadder>span{min-width:0;padding:8px 3px;text-align:center}}

/* Flat anime parchment with illustrated textile borders. */
.ranking{padding:48px 34px 44px 66px;background:#f3efdc;border:2px solid #554b3a;border-radius:3px;color:#393b2e;box-shadow:2px 5px 0 #0003;}
.ranking:before{inset:-8px auto -8px -2px;width:35px;border:2px solid #4b453b;border-radius:48% / 7px;background:linear-gradient(90deg,#00000012 0 9%,transparent 9% 80%,#00000010 80%),linear-gradient(to bottom,#343c36 0 7px,#bc696b 7px 34px,#d8bd72 34px 39px,#517367 39px calc(100% - 39px),#d8bd72 calc(100% - 39px) calc(100% - 34px),#bc696b calc(100% - 34px) calc(100% - 7px),#343c36 calc(100% - 7px));box-shadow:2px 1px 0 #483e3433}
.ranking:after{inset:0 0 0 32px;border:0;border-radius:0;box-shadow:inset 0 1px #e5d3ac,inset 0 -1px #e5d3ac;background-image:url('assets/scroll-border.svg'),url('assets/scroll-border.svg');background-position:top left,bottom left;background-repeat:repeat-x;background-size:240px 28px}
.ranking .rankHeading h2{font-family:Inter,Arial,sans-serif;font-weight:600;font-size:25px;letter-spacing:-.5px}.ranking .rankLadder>span{background:#f3efdc;border-color:#b0aa91}.ranking .rankLadder .unlocked{background:#e5dac0;border-color:#a9754b}.ranking .rankBadge{box-shadow:none}.ranking .rankProgress{background:#cbc9ac}.ranking .rankProgress i{background:#a96542}
@media(max-width:600px){.ranking{padding:43px 17px 39px 47px}.ranking:before{width:27px}.ranking:after{left:24px;background-size:205px 24px}.ranking .rankHeading h2{font-size:23px}}

/* Series-aware episode selection. */
.episode>.controlhead{justify-content:flex-start;gap:10px;align-items:center;margin-bottom:23px}.episode>.controlhead>label{font-family:'Barlow Condensed',sans-serif;font-size:29px;font-weight:600;letter-spacing:1px;white-space:nowrap}.episode>.controlhead>label span{font-size:21px;letter-spacing:.5px}.episode .epfield #ep{width:111px;padding:3px 0;text-align:left;font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:600;background:transparent;border:0;border-radius:0;color:var(--text)}
.seriesTimeline{grid-template-columns:30.5285% 69.4715%;text-align:center}.seriesTimeline span:last-child{padding-left:0;color:#9aacc5}.timelineTrack input[type=range]{appearance:none;-webkit-appearance:none;height:8px;border-radius:8px;border:1px solid #ffffff09;display:block;outline-offset:6px}.timelineTrack input::-webkit-slider-runnable-track{height:8px;background:transparent;border-radius:8px}.timelineTrack input::-moz-range-track{height:8px;background:transparent;border-radius:8px}.timelineTrack input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:21px;height:17px;background:#f4f2e7;border:1px solid #ffffff75;border-radius:10px;margin-top:-4.5px;box-shadow:0 1px 3px #0004}.timelineTrack input::-moz-range-thumb{width:21px;height:17px;background:#f4f2e7;border:1px solid #ffffff75;border-radius:10px;box-shadow:0 1px 3px #0004}.timelineTrack i{left:30.5285%;top:-6px;height:20px;background:#a8b39d}.timelineTrack input:disabled{opacity:.7}.timelineLabels .boundary{left:30.5285%}
@media(max-width:600px){.episode>.controlhead>label{font-size:28px}.episode .epfield #ep{font-size:29px}}

.episode .epfield{position:relative;width:122px;min-height:40px}.episode .epfield #ep{width:122px;letter-spacing:2px;color:transparent;caret-color:var(--text);position:relative;z-index:1}.episode .epfield #epDisplay{position:absolute;left:0;top:3px;font:600 30px 'Barlow Condensed',sans-serif;letter-spacing:2px;line-height:normal;white-space:nowrap;pointer-events:none;color:var(--text)}#epDisplay small{font:600 10px Inter,Arial,sans-serif;letter-spacing:.6px;margin-left:5px;vertical-align:baseline}.epfield:focus-within #epDisplay{visibility:hidden}.episode .epfield:focus-within #ep{color:var(--text)}.mapsection>.controlhead{align-items:flex-end;margin-bottom:6px;gap:12px}.mapsection #mapLevel{font:600 29px 'Barlow Condensed',sans-serif;letter-spacing:1px}.mapsection .maptools{gap:4px}.mapsection .maptools button{height:28px;min-width:29px}.mapsection .maptools #zoomReset{font-size:11px}

.seriesTimeline span:last-child{color:#527fba}.episode .epfield{width:180px}.episode .epfield #epDisplay{color:#f78044;display:flex;align-items:baseline}.episode .epfield #epDisplay sup{position:relative;top:-1.4em;font:600 9px Inter,Arial,sans-serif;letter-spacing:.5px;margin-left:5px}.episode .epfield.is-shippuden #epDisplay{color:#527fba}.episode .epfield:focus-within #ep{color:#f78044}.episode .epfield.is-shippuden:focus-within #ep{color:#527fba}.episode .epfield #ep{width:180px}.episode>.controlhead{gap:9px}@media(max-width:380px){.episode>.controlhead>label{font-size:25px}.episode .epfield{width:148px}.episode .epfield #ep{width:148px}}
.mapsection>.controlhead{flex-wrap:wrap}.mapsection #mapLevel{white-space:nowrap}.mapsection .maptools{margin-left:auto}

/* Align the brand center with the Spotify player, excluding its link. */
@media(min-width:951px){header .brand{align-self:center;transform:translateY(-8px)}}

.submit{font:600 29px "Barlow Condensed",sans-serif;letter-spacing:1.5px;text-transform:uppercase;padding:14px 18px}.submit span{font-size:26px}

#mapDetailNote:empty{display:none}#pinStatus:empty{display:none}


/* Two vertical parchment scrolls with substantial top rollers. */
.rankScrolls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start;margin:10px 0}.rankScrolls .ranking{--roller:#517367;--roller-end:#b9666b;--roller-gold:#d6bd78;--scroll-height:500px;position:relative;isolation:isolate;width:100%;max-width:100%;max-height:68px;margin:0;padding:0;border:0;border-radius:10px;background:transparent;overflow:clip;box-shadow:0 6px 12px #0003;transition:max-height .8s cubic-bezier(.22,1,.36,1);will-change:max-height;cursor:pointer}.rankScrolls .ranking:before{content:"";position:absolute;z-index:3;left:0;right:0;top:0;bottom:auto;width:100%;height:68px;border:2px solid #4a4540;border-radius:12px / 28px;background:linear-gradient(to bottom,#fff2,transparent 25% 70%,#0002),linear-gradient(to right,var(--roller-end) 0 20px,var(--roller-gold) 20px 24px,var(--roller) 24px calc(100% - 24px),var(--roller-gold) calc(100% - 24px) calc(100% - 20px),var(--roller-end) calc(100% - 20px));box-shadow:inset 3px 0 #ffffff25,inset -5px 0 #0002,0 3px 4px #0003;pointer-events:none}.rankScrolls .ranking:after{content:"";position:absolute;z-index:2;inset:65px 9px 0;pointer-events:none;background-image:url('assets/scroll-side.svg'),url('assets/scroll-side.svg');background-position:top left,top right;background-repeat:repeat-y;background-size:16px 137px;border:1px solid #685d46;border-top:0;border-bottom:5px solid #b5a27e;border-radius:0;box-shadow:none}.rankScrolls .blueScroll{--roller:#3d6388;--roller-end:#6c8dab;--roller-gold:#9db6bf}.rankScrolls .rankScrollContent{width:100%;min-width:0;padding:89px 31px 27px;margin:0;opacity:0;transform:translateY(-10px);transition:opacity .2s ease,transform .6s cubic-bezier(.22,1,.36,1);background:#f3efdc;color:#393b2e;cursor:default}.rankScrolls .ranking.scrollOpen{width:100%;max-height:var(--scroll-height);box-shadow:0 8px 18px #0003}.rankScrolls .ranking.scrollOpen .rankScrollContent{opacity:1;transform:translateY(0);transition:opacity .35s ease .14s,transform .7s cubic-bezier(.22,1,.36,1)}.rankScrolls .ranking .scrollToggle,.rankScrolls .ranking.scrollOpen .scrollToggle{position:absolute;z-index:4;left:25px;right:25px;top:0;width:calc(100% - 50px);height:68px;margin:0;padding:0;display:flex;align-items:center;justify-content:center;writing-mode:horizontal-tb;background:transparent;border:0;border-radius:2px;text-align:center;color:#fff6df;text-shadow:0 1px 2px #14231f99;font:600 24px 'Barlow Condensed',sans-serif;letter-spacing:2px;cursor:pointer}.rankScrolls .scrollToggle:after{content:'⌄';position:absolute;right:0;font:16px Inter,sans-serif;transform:rotate(0);transition:transform .6s}.rankScrolls .scrollOpen .scrollToggle:after{content:'⌄';transform:rotate(180deg)}.rankScrolls .ranking .scrollToggle:focus-visible{outline:2px solid #fff0b8;outline-offset:-7px}.rankScrolls .rankHeading{gap:10px;flex-wrap:wrap}.rankScrolls .rankHeading h2{font-size:21px;letter-spacing:-.5px}.rankScrolls .rankBadge{width:49px;height:49px;border-radius:7px}.rankScrolls .rankHeading>div{flex:1;min-width:100px}.rankScrolls .signOut{margin-left:auto;font-size:9px}.rankScrolls .rankStats{gap:20px;flex-wrap:wrap;margin:20px 0}.rankScrolls .rankStats strong{font-size:21px}.rankScrolls .rankStats strong small{font-size:9px}.rankScrolls .rankLadder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.rankScrolls .rankLadder>span{min-width:0;padding:8px 3px;text-align:center;font-size:8px}.rankScrolls .ranking p{font-size:11px}.rankScrolls .rankNote{font-size:9px}.rankScrolls .ranking form{flex-direction:column}.leaderboardHeading h2{margin:0 0 5px;font-size:21px;font-weight:600;letter-spacing:-.5px}.leaderboardHeading>small{font-size:9px;color:#6a705b}.leaderboardRows{max-height:340px;overflow:auto;margin:16px 0;scrollbar-width:thin;scrollbar-color:#90a1a2 #e2dfcc}.leaderboardRow{display:flex;align-items:center;gap:8px;padding:12px 0;border-bottom:1px solid #b8b7a155}.playerPosition{font-size:10px;color:#7a806b;min-width:12px}.leaderboardRow .rankThumb{flex-shrink:0;width:30px;height:30px}.leaderboardRow img{width:100%;height:100%;object-fit:cover}.playerInfo{flex:1;min-width:0}.playerInfo strong{display:block;font-size:11px;overflow-wrap:anywhere}.playerInfo small{display:block;font-size:8px;color:#6a705b;margin-top:4px;line-height:1.5}.playerAverage{font-size:12px;color:#375e7d;font-variant-numeric:tabular-nums}.leaderboardActions{display:flex;justify-content:space-between;gap:8px;margin:12px 0}.blueScroll .leaderboardActions button{background:#3d6388;font-size:10px;padding:8px 10px}.rankScrolls .ranking button:disabled{opacity:.5;cursor:wait}@media(max-width:600px){.rankScrolls{grid-template-columns:1fr;gap:18px}.rankScrolls .rankScrollContent{padding:89px 32px 27px}.rankScrolls .ranking .scrollToggle{font-size:26px}}@media(prefers-reduced-motion:reduce){.rankScrolls .ranking,.rankScrolls .rankScrollContent,.rankScrolls .scrollOpen .rankScrollContent,.rankScrolls .scrollToggle:after{transition:none}}

.rankScrolls .rankHeading .signOut{flex-basis:100%;text-align:right;margin-top:-3px}

.map svg .atlas-poi[data-inset="true"] .village-emblem{filter:invert(1)}

/* Shared scene baseline and primary action row. */
@media(min-width:951px){.game{grid-template-rows:auto auto;row-gap:38px;align-items:stretch}.sceneColumn{grid-column:1;grid-row:1}.sceneColumn .scene{height:100%}.game>aside{grid-column:2;grid-row:1;display:flex;flex-direction:column;height:100%;gap:20px}.mapsection{position:relative;margin-top:auto}.mapcredit{position:absolute;top:100%;left:0;right:0;min-height:32px;align-items:center;margin-top:4px}.mapsection #mapDetailNote{position:absolute;top:100%;margin-top:35px}.game>.rankScrolls{grid-column:1;grid-row:2;margin:0}.roundActions{grid-column:2;grid-row:2}.roundActions .submit{height:68px;width:100%;margin:0}.roundActions #hint{margin:8px 0 0}}
@media(max-width:950px){.game>.sceneColumn{grid-row:1}.game>.rankScrolls{grid-row:2;margin:0}.game>aside{grid-row:3}.roundActions{grid-row:4}.roundActions .submit{width:100%;min-height:68px}}
#unmappedInset,.atlas-poi[data-inset="true"]{display:none!important}
.mapcredit{gap:12px;flex-wrap:nowrap}.mapcredit #mapExtras{margin-left:auto;white-space:nowrap;border:1px solid #a18d62;border-radius:7px / 12px;padding:7px 16px;background:linear-gradient(90deg,#9b5d5d 0 6px,#d6bd78 6px 9px,#527367 9px calc(100% - 9px),#d6bd78 calc(100% - 9px) calc(100% - 6px),#9b5d5d calc(100% - 6px));color:#fff2d5;font:600 13px 'Barlow Condensed',sans-serif;letter-spacing:.6px;text-transform:uppercase}.mapcredit #mapExtras.hasSelection{outline:2px solid #f78044;outline-offset:2px}
#unmappedPanel{position:fixed;inset:0;margin:auto;width:min(820px,92vw);max-height:84vh;padding:0 18px 22px;border:2px solid #645942;border-radius:14px 14px 4px 4px;background:#f3efdc;color:#303b32;box-shadow:0 22px 80px #0009;overflow:auto;background-image:url('assets/scroll-side.svg'),url('assets/scroll-side.svg');background-repeat:repeat-y;background-position:0 70px,100% 70px;background-size:16px 137px}#unmappedPanel::backdrop{background:#07100bc9;backdrop-filter:blur(4px)}#unmappedPanel .unmappedRoller{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:center;width:calc(100% + 36px);margin:0 -18px 22px;padding:18px 46px;height:76px;border-bottom:3px solid #9c895b;border-radius:10px / 24px;background:linear-gradient(180deg,#ffffff20,transparent 35% 70%,#0003),linear-gradient(90deg,#b9666b 0 20px,#d6bd78 20px 25px,#517367 25px calc(100% - 25px),#d6bd78 calc(100% - 25px) calc(100% - 20px),#b9666b calc(100% - 20px));color:#fff3d5}#unmappedTitle{margin:0;font:600 28px 'Barlow Condensed',sans-serif;letter-spacing:2px}#closeUnmapped{position:absolute;right:30px;top:20px;background:transparent;color:#fff3d5;border:0;font-size:28px;padding:0 6px}#unmappedChoices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0 16px}#unmappedChoices button{min-height:90px;padding:16px 12px;border:1px solid #b2a586;border-radius:4px;background:#e9e1c9;color:#303b32;font:600 18px/1.35 Inter,Arial,sans-serif;text-align:center;box-shadow:0 2px 0 #b2a58633}#unmappedChoices button:hover{background:#dfd1ad;border-color:#8d734a}#unmappedChoices button.chosen{border:2px solid #bf6b39;background:#f4dbb5}#unmappedChoices button.correct{border:2px solid #347149;background:#d9e4cb}#unmappedChoices button:disabled{opacity:1;cursor:default}#unmappedChoices small{display:block;margin-top:7px;font-size:12px}#unmappedPanel :focus-visible{outline:3px solid #ba7039;outline-offset:3px}@media(max-width:600px){#unmappedChoices{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:0 8px}#unmappedChoices button{font-size:16px;min-height:90px}#unmappedTitle{font-size:23px;letter-spacing:1px}}

.mapsection{overflow:visible}

/* Map-sized parchment drawer, with breathing room above the action. */
@media(min-width:951px){.mapsection{margin-bottom:28px}}
.mapcredit{display:grid;grid-template-columns:1fr auto 1fr;min-height:36px}.mapcredit #mapSource{justify-self:start;grid-column:1}.mapcredit #mapExtras{grid-column:2;justify-self:center;margin-left:0}.mapcredit #pinStatus{grid-column:3;text-align:right}.mapViewport{position:relative;isolation:isolate}
#unmappedPanel{position:absolute;inset:0;margin:0;width:100%;height:100%;max-height:none;z-index:5;box-shadow:0 4px 12px #0004;border-radius:6px;padding:0 12px 14px;background-size:12px 100px}#unmappedPanel[hidden]{display:none}#unmappedPanel .unmappedRoller{width:calc(100% + 24px);height:52px;padding:12px 36px;margin:0 -12px 12px;border-radius:6px / 16px}#unmappedTitle{font-size:20px;letter-spacing:1px}#closeUnmapped{right:19px;top:10px;font-size:25px}#unmappedChoices{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 10px}#unmappedChoices button{min-height:62px;padding:10px 8px;font-size:15px;line-height:1.3}#unmappedChoices small{font-size:11px}#unmappedPanel header{max-width:none}#unmappedPanel::backdrop{background:transparent;backdrop-filter:none}@media(max-width:600px){.mapcredit #mapExtras{font-size:12px;padding:7px 12px}#unmappedChoices button{font-size:15px}}

.map{aspect-ratio:1080/950}

#unmappedChoices button{position:relative;overflow:hidden}#unmappedChoices button.chosen{padding-right:42px}.locationKunai{position:absolute;right:0;top:50%;transform:translateY(-50%) rotate(-8deg);width:42px;height:64px;filter:drop-shadow(2px 3px 1px #0003);pointer-events:none}

.map{aspect-ratio:1080/1100}#unmappedChoices .locationSymbol{display:block;width:34px;height:34px;object-fit:contain;margin:0 auto 7px;opacity:.95}#unmappedChoices button{min-height:108px}#unmappedChoices button.chosen .locationSymbol{margin-left:auto;margin-right:auto}

/* Compact header and a cropped map, with the action on the scene baseline. */
body>header{padding-top:10px;padding-bottom:12px;align-items:center}body>header .brand{transform:none;align-self:center}body>header .soundtrack{max-width:360px;justify-self:end}body>header .soundtrack iframe{height:80px}body>header .soundtrack>a{margin-top:3px;font-size:8px}.map{aspect-ratio:1080/825}
@media(min-width:951px){.game{row-gap:24px}.game>aside{gap:16px}.game>aside .mapsection{margin-top:auto;margin-bottom:34px;flex-shrink:0}.game>aside .roundActions{margin:0;grid-column:auto;grid-row:auto;flex-shrink:0}.game>aside .roundActions .submit{width:100%;height:68px}.game>.rankScrolls{grid-row:2}.sceneColumn>.scene{min-height:560px}}
@media(max-width:950px){body>header{gap:12px}body>header .brand{grid-row:1}body>header .soundtrack{grid-row:2;max-width:360px}.game>aside{display:flex;flex-direction:column;gap:20px}.game>aside .roundActions{width:100%;grid-row:auto}.game>aside .roundActions .submit{width:100%}}@media(max-width:600px){body>header{padding-top:12px;gap:12px}body>header .soundtrack{max-width:100%}}

/* Clickable rank progress with locked portraits in grayscale. */
.rankScrolls .rankLadder>button{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;padding:8px 3px;border:1px solid #b0aa91;border-radius:4px;background:#f3efdc;color:#72746a;font:400 10px Inter,Arial,sans-serif;text-align:center}.rankScrolls .rankLadder>button.unlocked{background:#e5dac0;border-color:#a9754b;color:#68452c}.rankLocked .rankThumb img{filter:grayscale(1);opacity:.45}.rankScrolls .rankLadder>button[aria-expanded=true]{outline:2px solid #a9754b;outline-offset:2px}#rankDetails{margin-top:18px;padding:14px;border:1px solid #b0aa91;border-radius:4px;background:#eee7d2}.rankDetailHeading{display:flex;align-items:center;gap:10px;margin-bottom:12px}.rankDetailHeading h3{margin:0 0 4px;font-size:17px}.rankDetailHeading small{font-size:10px}.rankRequirement{display:flex;flex-direction:column;gap:4px;padding:9px 0;font-size:11px}.rankRequirement small{font-size:10px}.rankRequirement.met{color:#347046}.rankRequirement.missing{color:#8b8d82}.rankScrolls .rankDetailHeading .rankThumb{width:42px;height:42px}

/* All eleven locations fit inside the map overlay. */
#unmappedPanel:not([hidden]){display:flex;flex-direction:column;overflow:hidden}#unmappedPanel .unmappedRoller{flex-shrink:0;height:42px;margin-bottom:8px}#unmappedPanel #closeUnmapped{top:5px}#unmappedChoices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:5px;flex:1;min-height:0;padding:0 6px}#unmappedChoices button{min-height:0;padding:3px 4px;font-size:11px;line-height:1.15;display:flex;flex-direction:column;align-items:center;justify-content:center}#unmappedChoices .locationSymbol{width:21px;height:21px;margin:0 auto 3px;flex-shrink:0}#unmappedChoices button.chosen{padding-right:21px}#unmappedChoices .locationKunai{width:25px;height:42px;right:-2px}#unmappedChoices small{font-size:8px;margin-top:3px}@media(max-width:600px){#unmappedTitle{font-size:17px}#unmappedChoices button{font-size:10px}#unmappedChoices .locationSymbol{width:19px;height:19px}}

html{overflow-anchor:none}@media(max-width:400px){#unmappedChoices button{font-size:9px;padding:2px}#unmappedChoices .locationSymbol{width:14px;height:14px;margin-bottom:2px}#unmappedChoices small{font-size:7px}#unmappedPanel .unmappedRoller{height:36px}#unmappedTitle{font-size:15px}}

/* Fill the frame without letterboxing or interactive image zoom. */
.scene #frame{object-fit:cover;object-position:center;width:100%;height:100%;transform:none;cursor:default;touch-action:auto;will-change:auto}

.episode>.controlhead #roundTimer{margin-left:auto;flex-shrink:0;width:58px;height:58px;border:2px solid #527367;border-radius:50%;display:grid;place-items:center;color:#e9ede4;font:600 31px 'Barlow Condensed',sans-serif;font-variant-numeric:tabular-nums;letter-spacing:1px;transition:color .2s,border-color .2s}#roundTimer.urgent{color:#f78044;border-color:#f78044}#roundTimer.expired{opacity:.6}@media(max-width:400px){.episode>.controlhead #roundTimer{width:45px;height:45px;font-size:26px}.episode .epfield,.episode .epfield #ep{width:105px}}

/* Prominent numeric countdown with a final-ten-second pulse. */
.episode>.controlhead #roundTimer{width:92px;height:76px;border:2px solid #849f88;border-radius:12px;background:#26392c;color:#f2f3e8;font-size:56px;line-height:1;box-shadow:0 3px 12px #0003;letter-spacing:2px}.episode>.controlhead #roundTimer.urgent{color:#fff0d9;border-color:#f78044;background:#853e25;animation:timerFlash .8s ease-in-out infinite}.episode>.controlhead #roundTimer.expired,.episode>.controlhead #roundTimer.stopped{animation:none}@keyframes timerFlash{0%,100%{background:#853e25;box-shadow:0 0 0 0 #f7804440}50%{background:#d56630;box-shadow:0 0 18px 3px #f7804466}}
@media(max-width:600px){.episode>.controlhead #roundTimer{width:74px;height:66px;font-size:48px}.episode .epfield,.episode .epfield #ep{width:110px}}@media(max-width:400px){.episode>.controlhead #roundTimer{width:62px;height:60px;font-size:42px}.episode>.controlhead>label{font-size:23px}.episode .epfield,.episode .epfield #ep{width:83px}}@media(prefers-reduced-motion:reduce){.episode>.controlhead #roundTimer.urgent{animation:none;background:#b64e2b}}

/* Round debrief: episode context and map beside the frame. */
#reviewIntro[hidden],#reviewStats[hidden],#reviewLocation[hidden]{display:none}.game.is-review{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);grid-template-rows:auto auto auto auto;gap:20px 30px;align-items:start}.game.is-review>aside{display:contents}.is-review .episode,.is-review>.rankScrolls{display:none}.game.is-review #reviewIntro{grid-column:1;grid-row:1}.reviewEyebrow{display:block;color:#a5b5a0;font-size:10px;letter-spacing:1.8px;margin-bottom:14px}.game.is-review #reviewIntro h1{font:600 clamp(23px,2.2vw,34px)/1.16 'Barlow Condensed',sans-serif;color:#f78044;letter-spacing:.3px;margin:0 0 18px}.reviewEpisode{display:flex;align-items:center;gap:14px}.reviewEpisode>b{background:#f78044;color:#142019;padding:9px 14px;border-radius:4px;font:600 30px 'Barlow Condensed',sans-serif}.reviewEpisode>span{font-size:16px;font-weight:500}.reviewEpisode small{display:block;font-size:10px;color:#9fad9b;margin-top:6px}.game.is-review .sceneColumn{grid-column:2;grid-row:1/3;height:100%;min-height:0}.game.is-review .sceneColumn>.scene{height:100%;min-height:360px;aspect-ratio:auto}.game.is-review .mapsection{grid-column:1;grid-row:2;margin:0!important;position:relative}.is-review .mapsection>.controlhead{margin-bottom:7px}.is-review .mapsection #mapLevel{font-size:20px}.is-review .map{aspect-ratio:1080/650}.is-review .mapcredit{position:static;margin-top:9px}.is-review #mapDetailNote{position:static;margin-top:8px}.game.is-review #reviewLocation{grid-column:1;grid-row:3/5}.game.is-review #reviewStats{grid-column:2;grid-row:3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.reviewScore{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:5px 7px}.reviewScore>small{grid-column:1/-1;font-size:14px;font-weight:500;color:#b8c4b1}.reviewScore>strong{font:600 33px 'Barlow Condensed',sans-serif;background:#29382c;padding:8px 13px;border-radius:4px;color:#e9ede4;font-variant-numeric:tabular-nums}.reviewScore>span{font-size:10px;color:#8d9b85}.reviewScore.reviewTotal>strong{background:#f78044;color:#172019}#reviewLocation p{font-size:15px;margin:0 0 7px;color:#d3ddcd}#reviewLocation>span{display:block;font-size:12px;color:#a4b39c;line-height:1.5}#reviewLocation>a{display:inline-block;margin-top:13px;color:#8f9f87;font-size:10px}.game.is-review .roundActions{grid-column:2;grid-row:4;width:100%}.game.is-review .roundActions .submit{height:58px;width:100%;font-size:25px}.game.is-review .scene #result{display:none}.game.is-review.is-finished .scene #result{display:block}.is-review .scene #expand{top:12px}.game.is-review.is-finished #reviewIntro h1{color:#e9ede4}@media(max-width:950px){.game.is-review{grid-template-columns:1fr;gap:20px}.game.is-review #reviewIntro{grid-column:1;grid-row:1}.game.is-review .sceneColumn{grid-column:1;grid-row:2}.game.is-review .sceneColumn>.scene{height:auto;min-height:0;aspect-ratio:16/10}.game.is-review .mapsection{grid-column:1;grid-row:3}.game.is-review #reviewLocation{grid-column:1;grid-row:4}.game.is-review #reviewStats{grid-column:1;grid-row:5}.game.is-review .roundActions{grid-column:1;grid-row:6}.game.is-review #reviewIntro h1{font-size:28px}.reviewScore>strong{font-size:28px;padding:8px 10px}}

/* Smaller guessing frame; keep natural proportions without letterbox bars. */
@media(min-width:951px){.game:not(.is-review){grid-template-rows:440px auto}.game:not(.is-review) .sceneColumn>.scene{height:440px;min-height:0}.game:not(.is-review)>aside{height:440px;gap:9px;min-height:0}.game:not(.is-review)>aside .episode{padding:0}.game:not(.is-review) .episode>.controlhead{margin-bottom:12px}.game:not(.is-review)>aside .mapsection{flex:1;min-height:0;margin-top:0;margin-bottom:32px;display:flex;flex-direction:column}.game:not(.is-review) .mapViewport{flex:1;min-height:0}.game:not(.is-review) .map{height:100%;aspect-ratio:auto}.game:not(.is-review) .roundActions .submit{height:52px}}
@media(max-width:950px){.game:not(.is-review) .sceneColumn>.scene{aspect-ratio:2/1;height:auto;min-height:0}}
/* A fixed, complete debrief. Keep the Spotify iframe mounted and playing offscreen. */
body.review-mode{height:100dvh;overflow:hidden}body.review-mode>header{position:fixed;left:-10000px;top:0;visibility:hidden;pointer-events:none}body.review-mode main{padding:0;max-width:none}body.review-mode footer{display:none}.game.is-review{position:fixed;inset:0;margin:0;padding:clamp(14px,2vw,28px);width:100vw;height:100dvh;overflow:hidden;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);grid-template-rows:minmax(118px,.42fr) minmax(0,1fr) 62px 52px;gap:14px 24px}.game.is-review #reviewIntro{min-height:0;overflow:hidden}.game.is-review .reviewEyebrow{font-size:10px;margin-bottom:8px}.game.is-review #reviewIntro h1{font-size:clamp(20px,2.2vw,32px);line-height:1.08;margin-bottom:11px}.game.is-review .reviewEpisode>b{font-size:27px;padding:6px 12px}.game.is-review .reviewEpisode>span{font-size:15px}.game.is-review .reviewEpisode small{font-size:10px;margin-top:4px}.game.is-review .sceneColumn{min-height:0;height:100%}.game.is-review .sceneColumn>.scene{height:100%;min-height:0;max-height:none;aspect-ratio:auto}.game.is-review .mapsection{height:100%;min-height:0;display:flex;flex-direction:column}.game.is-review .mapViewport{flex:1;min-height:0}.game.is-review .map{height:100%;aspect-ratio:auto}.game.is-review .mapcredit{display:none}.game.is-review #mapDetailNote{display:none}.game.is-review .maphint{display:none}.game.is-review #reviewLocation{grid-row:3/5;overflow:hidden;min-height:0}.game.is-review #reviewLocation p{font-size:13px;line-height:1.3;margin-bottom:8px}.game.is-review .reviewDistance{font-size:20px!important;color:#f78044!important;font-weight:600}.game.is-review #reviewLocation>a{font-size:9px;margin-top:8px}.game.is-review #reviewStats{gap:10px;align-self:stretch}.game.is-review .reviewScore>small{font-size:13px}.game.is-review .reviewScore>strong{font-size:29px;padding:6px 10px}.game.is-review .reviewScore>span{font-size:10px}.game.is-review .roundActions .submit{height:52px}.game.is-review .roundActions #hint{position:absolute;bottom:3px;font-size:9px}.game.is-review .rankScrolls{display:none!important}#reviewMapInset{position:absolute;inset:0;z-index:4;background:#263b31;border:1px solid #526650;border-radius:6px;padding:15px;display:flex;flex-direction:column;justify-content:center;color:#e9ede4}#reviewMapInset>small{font-size:10px;letter-spacing:1px;color:#b3c1aa}#reviewMapInset svg{width:100%;height:60%;min-height:0}#reviewMapInset>div{display:flex;justify-content:space-between;gap:25px;font-size:13px}#reviewMapInset>div>span{max-width:45%}#reviewMapInset>div>span:last-child{text-align:right}#reviewMapInset small{display:block;font-size:9px;color:#a9bba0;margin-bottom:4px}
@media(max-width:950px){.game.is-review{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:minmax(116px,.4fr) minmax(0,1fr) 58px 48px;gap:10px 13px}.game.is-review #reviewIntro{grid-column:1;grid-row:1}.game.is-review .sceneColumn{grid-column:2;grid-row:1/3}.game.is-review .mapsection{grid-column:1;grid-row:2}.game.is-review #reviewLocation{grid-column:1;grid-row:3/5}.game.is-review #reviewStats{grid-column:2;grid-row:3}.game.is-review .roundActions{grid-column:2;grid-row:4}.game.is-review .roundActions .submit{height:48px}.game.is-review #reviewIntro h1{font-size:21px}.game.is-review .reviewScore>strong{font-size:24px;padding:6px}.game.is-review .reviewScore>span{font-size:8px}.game.is-review .reviewDistance{font-size:16px!important}}
@media(max-width:600px){.game.is-review{padding:12px;grid-template-columns:1fr 1fr;grid-template-rows:126px minmax(0,1fr) 70px 48px;gap:10px}.game.is-review #reviewIntro{grid-column:1/-1;grid-row:1}.game.is-review .sceneColumn{grid-column:2;grid-row:2}.game.is-review .mapsection{grid-column:1;grid-row:2}.game.is-review #reviewStats{grid-column:1/-1;grid-row:3}.game.is-review #reviewLocation{grid-column:1;grid-row:4}.game.is-review .roundActions{grid-column:2;grid-row:4}.game.is-review #reviewLocation p,.game.is-review #reviewLocation>a{display:none}.game.is-review .reviewDistance{font-size:12px!important}.game.is-review .reviewEpisode>span{font-size:13px}.game.is-review .reviewEyebrow{font-size:9px}.game.is-review #reviewIntro h1{font-size:22px}.game.is-review .mapsection #mapLevel{font-size:16px}.game.is-review .maptools{display:none}.game.is-review .roundActions .submit{font-size:20px}.game.is-review #reviewStats .reviewScore>strong{font-size:28px}}

@media(min-width:601px){.game.is-review{grid-template-rows:minmax(154px,.42fr) minmax(0,1fr) 62px 52px}}@media(max-width:600px){.game.is-review{grid-template-rows:160px minmax(0,1fr) 70px 48px}.game.is-review #reviewIntro h1{font-size:20px}}

/* Only the guessing photograph shrinks; retain a useful full-sized map. */
@media(min-width:951px){.game:not(.is-review){grid-template-rows:auto auto}.game:not(.is-review)>aside{height:660px;gap:16px}.game:not(.is-review)>aside .mapsection{flex:none;min-height:0;margin-top:auto;margin-bottom:34px;display:block}.game:not(.is-review) .mapViewport{flex:none;min-height:0}.game:not(.is-review) .map{height:auto;aspect-ratio:1080/825}.game:not(.is-review) .roundActions .submit{height:68px}.game:not(.is-review)>.rankScrolls{grid-row:1;align-self:start;margin-top:464px}}

/* Episode selection lives below the image; the right column starts with the map. */
@media(min-width:951px){.game:not(.is-review){grid-template-rows:auto auto;align-items:start}.game:not(.is-review)>.sceneColumn{height:auto;gap:16px}.game:not(.is-review) .sceneColumn>.scene{height:min(440px,calc(100dvh - 320px));min-height:220px;flex:none}.game:not(.is-review) .sceneColumn>.episode{margin:0;padding:0}.game:not(.is-review)>.sceneColumn .episode>.controlhead{margin-bottom:13px}.game:not(.is-review)>aside{grid-column:2;grid-row:1;height:min(650px,calc(100dvh - 145px));min-height:380px;gap:14px}.game:not(.is-review)>aside .mapsection{display:flex;flex-direction:column;flex:1;min-height:0;margin-top:0;margin-bottom:34px}.game:not(.is-review) .mapViewport{flex:1;min-height:0}.game:not(.is-review) .map{height:100%;aspect-ratio:auto}.game:not(.is-review) .roundActions{flex-shrink:0}.game:not(.is-review) .roundActions .submit{height:62px}.game:not(.is-review)>.rankScrolls{grid-column:1/-1;grid-row:2;align-self:start;margin:max(60px,calc(100dvh - 750px)) 0 0;max-width:100%}}
@media(max-width:950px){.game:not(.is-review)>.rankScrolls{grid-row:3;margin:45px 0 0}.game:not(.is-review)>aside{grid-row:2}.game:not(.is-review)>.sceneColumn{gap:18px}.game:not(.is-review) .sceneColumn>.episode{padding:0}}
/* Keep labels readable even when a very short result distance requires a close zoom. */
.review-mode .maplabels text{font-weight:500}.game.is-review .reviewEpisode>span{font-size:clamp(12px,1.2vw,17px)}

/* Match each guessing frame's native aspect ratio: preserve the entire image. */
.game:not(.is-review) .sceneColumn>.scene{width:min(100%,calc(max(190px,100dvh - 315px) * var(--frame-aspect,1.7777778)));height:auto;min-height:0;max-height:none;aspect-ratio:var(--frame-aspect,1.7777778);align-self:center;flex:none}.game:not(.is-review) .scene #frame{object-fit:contain;width:100%;height:100%;object-position:center}.roundClock{display:flex;justify-content:center;align-items:center;margin:0 0 14px;height:36px}.roundClock #roundTimer{display:flex;align-items:center;justify-content:center;gap:13px;width:146px;height:36px;margin:0;padding:5px 13px;border:1px solid #718974;border-radius:7px;background:#26392c;box-shadow:none;color:#f2f3e8;font:600 25px/1 'Barlow Condensed',sans-serif;letter-spacing:1px;font-variant-numeric:tabular-nums}.timerTrack{width:78px;height:4px;overflow:hidden;border-radius:3px;background:#ffffff20}.timerTrack i{display:block;width:100%;height:100%;background:#a9c2a2;border-radius:3px}.roundClock #roundTimer.urgent{border-color:#f78044;background:#853e25;animation:timerFlash .8s ease-in-out infinite}.roundClock #roundTimer.urgent .timerTrack i{background:#ffd6a3}.roundClock #roundTimer.expired,.roundClock #roundTimer.stopped{animation:none}.review-mode .roundClock{display:none}
.mapcredit{grid-template-columns:minmax(0,1fr) auto;gap:10px;min-height:36px}.mapcredit .mapPrompt{grid-column:1;justify-self:start;color:#a8b6a0;font-size:12px;line-height:1.35}.mapcredit #mapExtras{grid-column:2;justify-self:end;margin-left:0}.mapcredit #pinStatus{display:none}
@media(min-width:951px){.game:not(.is-review)>aside{height:min(650px,calc(100dvh - 200px));min-height:350px}.game:not(.is-review)>.sceneColumn .episode>.controlhead{margin-bottom:15px}.game:not(.is-review) .mapcredit{margin-top:5px}.game:not(.is-review)>aside .mapsection{margin-bottom:38px}.game:not(.is-review)>.rankScrolls{margin-top:max(60px,calc(100dvh - 750px))}}
@media(max-width:950px){.roundClock{margin-bottom:12px}.game:not(.is-review) .sceneColumn>.scene{width:min(100%,calc(max(180px,100dvh - 360px) * var(--frame-aspect,1.7777778)));aspect-ratio:var(--frame-aspect,1.7777778);height:auto;min-height:0}.game:not(.is-review) .sceneColumn>.episode{width:100%}}@media(max-width:600px){.mapcredit .mapPrompt{font-size:10px}.mapcredit{gap:6px}.mapcredit #mapExtras{padding:7px 10px;font-size:11px}.roundClock #roundTimer{height:34px;width:134px;font-size:23px}}@media(prefers-reduced-motion:reduce){.roundClock #roundTimer.urgent{animation:none}}

/* Clock over the map, with zoom controls beside it. */
.mapStage{display:flex;align-items:stretch;gap:8px;flex:1;min-height:0}.mapStage>.mapViewport{flex:1;min-width:0;min-height:0}.mapStage>.maptools{display:flex;flex-direction:column;justify-content:center;gap:6px;flex:0 0 31px;margin:0}.mapStage>.maptools button{width:31px;height:30px;min-width:0;padding:0}.mapStage>.maptools #zoomReset{font-size:10px}.mapsection>.controlhead{display:none}.mapStage .map{height:100%;aspect-ratio:auto}.roundClock{height:48px;margin:0;flex-shrink:0}.roundClock #roundTimer{width:174px;height:44px;gap:15px;border-radius:8px;font-size:31px}.roundClock .timerTrack{width:91px;height:5px}.mapcredit{display:flex;justify-content:flex-end;align-items:center;gap:6px;flex-wrap:nowrap}.mapcredit .mapPrompt{flex:0 1 auto;margin-left:auto;justify-self:auto;font:600 13px/1.25 Inter,Arial,sans-serif;color:#d9e3d0}.mapcredit #mapExtras{flex-shrink:0;justify-self:auto;margin:0}.mapcredit #pinStatus{display:none}
@media(min-width:951px){.game:not(.is-review){grid-template-columns:minmax(0,1.7fr) minmax(330px,1fr)}.game:not(.is-review)>aside{height:min(680px,calc(100dvh - 145px));gap:12px}.game:not(.is-review) .sceneColumn>.scene{width:min(100%,calc(max(200px,100dvh - 265px) * var(--frame-aspect,1.7777778)));height:auto;aspect-ratio:var(--frame-aspect,1.7777778)}.game:not(.is-review)>aside .mapsection{margin-bottom:40px}.game:not(.is-review) .mapViewport{height:100%}.game:not(.is-review) .mapcredit{margin-right:39px}.game:not(.is-review)>.rankScrolls{margin-top:max(60px,calc(100dvh - 750px))}}
.game.is-review .mapStage{height:100%}.game.is-review .mapStage>.maptools{display:flex}.game.is-review .mapsection{margin:0}.game.is-review .mapcredit{display:none}
@media(max-width:950px){.mapsection{display:flex;flex-direction:column}.mapStage{height:340px;flex:none}.mapStage>.mapViewport{height:100%}.mapStage .map{height:100%;aspect-ratio:auto}.game:not(.is-review)>aside{gap:14px}.mapcredit{margin-right:39px}.game.is-review .mapStage{height:100%;flex:1}}@media(max-width:600px){.roundClock #roundTimer{width:162px;height:42px;font-size:29px}.mapcredit .mapPrompt{font-size:10px}.mapcredit #mapExtras{font-size:10px;padding:7px 10px}.mapcredit{gap:4px}.game.is-review .mapStage>.maptools{display:none}} 

aside>.roundClock{margin-right:39px}@media(min-width:951px) and (max-width:1100px){.mapcredit .mapPrompt{font-size:11px}.mapcredit #mapExtras{font-size:11px;padding:7px 10px}}

/* Episode selection and the guided action share one panel. */
.guessPanel{width:100%;border:1px solid #626a60;border-radius:12px;background:#303630;overflow:hidden;transition:background .25s,border-color .25s;box-shadow:0 8px 24px #0002}.guessPanel .episode{padding:14px 20px 10px!important;margin:0!important}.guessPanel .episode>.controlhead{margin-bottom:9px!important}.guessPanel .roundActions{margin:0!important;padding:0;position:relative}.guessPanel .submit{width:100%;height:50px!important;border:0;border-radius:0;background:#72776f;color:#e4e7df;opacity:1;font:600 19px/1.2 'Barlow Condensed',sans-serif;letter-spacing:.4px;justify-content:center;text-align:center;padding:10px 15px}.guessPanel .submit:disabled{background:#61675f;color:#d5dbd0;opacity:1;cursor:default}.guessPanel.ready{background:#583a27;border-color:#f78044}.guessPanel.ready .submit{background:#f78044;color:#172019}.guessPanel #hint:empty{display:none}.guessPanel #hint{margin:0;padding:5px 15px;font-size:11px}.mapTop{display:flex;justify-content:flex-end;margin:0 39px 10px 0;flex-shrink:0}.mapTop #mapExtras{margin:0;font-size:13px;padding:9px 20px}.game.is-review .guessPanel,.game.is-review .mapTop{display:none}.game:not(.is-review) .sceneColumn{gap:12px}.game:not(.is-review)>aside .mapsection{margin-bottom:0}.game:not(.is-review) .sceneColumn>.scene{width:min(100%,calc(max(180px,100dvh - 325px) * var(--frame-aspect,1.7777778)))}
@media(max-width:950px){.guessPanel .episode{padding:12px 15px 9px!important}.guessPanel .submit{font-size:17px}.mapTop{margin-top:0}.game:not(.is-review) .sceneColumn>.scene{width:min(100%,calc(max(180px,100dvh - 325px) * var(--frame-aspect,1.7777778)))}}

/* The selection panel belongs to the map; rounds currently have no time limit. */
.roundClock{display:none!important}.game:not(.is-review)>aside .mapsection{gap:12px}.game:not(.is-review) .mapTop{margin-bottom:0}.mapsection>.guessPanel{width:calc(100% - 39px);flex-shrink:0;margin:0}.game:not(.is-review) .sceneColumn>.scene{width:min(100%,calc(max(230px,100dvh - 145px) * var(--frame-aspect,1.7777778)))}.game:not(.is-review) .sceneColumn{gap:0}.game:not(.is-review) .mapsection>.guessPanel .episode{padding:12px 16px 9px!important}.game:not(.is-review) .mapsection>.guessPanel .submit{font-size:17px;height:48px!important}.game.is-review .mapsection>.guessPanel{display:none}.game:not(.is-review) .mapStage{flex:1;min-height:180px}.game:not(.is-review) .mapViewport{height:100%}
@media(max-width:950px){.game:not(.is-review) .mapStage{height:340px;flex:none}.game:not(.is-review) .sceneColumn>.scene{width:100%;max-height:none}.mapsection>.guessPanel{margin-bottom:12px}}

/* Wider edge-aligned play area and a continuous map/episode card. */
#maphint{display:none!important}
body:not(.review-mode)>header{max-width:none;padding-left:1.333333vw;padding-right:1.333333vw}
body:not(.review-mode)>main{max-width:none;padding-left:1.333333vw;padding-right:1.333333vw}
.game:not(.is-review) .sceneColumn>.scene{align-self:flex-start}
.game:not(.is-review) .mapsection{gap:0!important}
.game:not(.is-review) .mapTop{margin:0 0 10px}
.game:not(.is-review) .mapStage{position:relative;gap:0}
.game:not(.is-review) .mapStage>.mapViewport{width:100%;border:1px solid #626a60;border-bottom:0;border-radius:12px 12px 0 0;overflow:hidden}
.game:not(.is-review) .mapStage .map{border-radius:0}
.game:not(.is-review) .mapStage>.maptools{position:absolute;right:9px;top:50%;transform:translateY(-50%);z-index:5}
.game:not(.is-review) .maptools button{background:#19251ee8}
.game:not(.is-review) .mapsection>.guessPanel{width:100%;margin:0;border-top:0;border-radius:0 0 12px 12px;box-shadow:none}
@media(min-width:951px){.game:not(.is-review){grid-template-columns:minmax(0,1.4fr) minmax(360px,1fr);gap:26px}.game:not(.is-review) .sceneColumn>.scene{width:min(100%,calc(max(230px,100dvh - 145px) * var(--frame-aspect,1.7777778)))}.soundtrack{width: min(100%,420px);max-width:420px}}
@media(max-width:600px){body:not(.review-mode)>header,body:not(.review-mode)>main{padding-left:12px;padding-right:12px}}
@media(min-width:951px){body>header .soundtrack{flex:0 1 420px;width:420px;max-width:420px}}

/* Fixed tile contents and a centered kunai impact. */
.mapStage.unmappedOpen>.maptools{display:none!important}
.game:not(.is-review) .mapTop{justify-content:center}
.mapTop #mapExtras{border:1px solid #a18d62;border-radius:12px / 24px;padding:10px 30px;background:linear-gradient(180deg,#ffffff25,transparent 40% 65%,#0003),linear-gradient(90deg,#b9666b 0 13px,#d6bd78 13px 17px,#527367 17px calc(100% - 17px),#d6bd78 calc(100% - 17px) calc(100% - 13px),#b9666b calc(100% - 13px));color:#fff2d5;font:600 18px 'Barlow Condensed',sans-serif;letter-spacing:1px;text-transform:uppercase;min-width:220px;box-shadow:0 3px 8px #0003}
#unmappedChoices button,#unmappedChoices button.chosen,#unmappedChoices button.correct{border-width:2px;padding:3px 4px}
#unmappedChoices .locationKunai{position:absolute;left:50%;top:50%;right:auto;width:68px;height:85px;transform:translate(-20%,-96%);overflow:visible;z-index:3;filter:drop-shadow(2px 4px 2px #0005)}
#unmappedChoices .locationSymbol,#unmappedChoices button>span{position:relative;z-index:1}
.tileCracks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;animation:tileCrack .18s ease-out both}.tileCracks path{fill:none;stroke:#6d513c;stroke-width:1.05;stroke-linejoin:bevel;opacity:.8;vector-effect:non-scaling-stroke}
@keyframes tileCrack{from{opacity:0;transform:scale(.65)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.tileCracks{animation:none}}
#unmappedChoices button.chosen{overflow:visible;z-index:3}#unmappedChoices button.chosen .tileCracks{overflow:hidden;border-radius:3px}

/* Countdown and location scroll share the space above the map. */
.game:not(.is-review) .mapTop{justify-content:space-between;align-items:center;gap:14px;min-height:44px}
.game:not(.is-review) .mapTop>.roundClock{display:flex!important;margin:0;height:44px;flex:0 0 auto}
.mapTop #roundTimer{width:152px;height:40px;font-size:29px}
.mapTop #roundTimer .timerTrack{width:72px}
.mapTop #roundTimer.urgent{background:#851e25;border-color:#ff6267;color:#fff1ed;animation:countdownRed .7s ease-in-out infinite}
.mapTop #roundTimer.urgent .timerTrack i{background:#ffb1a8}
@keyframes countdownRed{0%,100%{box-shadow:0 0 0 1px #ff626730;background:#701b22}50%{box-shadow:0 0 20px #ee343c80;background:#bf2631}}
.mapTop #roundTimer.expired,.mapTop #roundTimer.stopped{animation:none}
.guessPanel.ready{background:#303630;border-color:#626a60}
.guessPanel.ready .submit{background:#f78044;color:#172019}
@media(max-width:600px){.mapTop #mapExtras{min-width:0;font-size:15px;padding:10px 23px}.mapTop #roundTimer{width:126px;font-size:27px}.mapTop #roundTimer .timerTrack{width:53px}.game:not(.is-review) .mapTop{gap:8px}}
@media(prefers-reduced-motion:reduce){.mapTop #roundTimer.urgent{animation:none}}

:root{--ninja-font:'Shojumaru',Inter,sans-serif}
.scrollToggle,.mapTop #mapExtras,#unmappedTitle,.episode .controlhead label,.episode .controlhead label>span,.submit,.contractRoller{font-family:var(--ninja-font)!important;font-weight:400!important;letter-spacing:.2px!important}
.scrollToggle{font-size:clamp(16px,1.8vw,24px)!important}.episode .controlhead label{font-size:clamp(16px,1.7vw,23px)!important}.episode .controlhead label>span{font-size:.65em!important}.guessPanel .submit{font-size:13px!important}.mapTop #mapExtras{font-size:13px!important}#unmappedTitle{font-size:15px!important}.game.is-review .roundActions .submit{font-size:19px!important}
#lobby[hidden]{display:none}body.menu-mode{min-height:100dvh;overflow-x:hidden;background:radial-gradient(ellipse at 50% 45%,#263d30 0%,#15231c 35%,#0d1511 80%)}body.menu-mode::before{content:'';position:fixed;inset:0;background:linear-gradient(#081421b8,#070c16ed),url('assets/world-clean.png') center 42%/cover;opacity:.4;pointer-events:none}body.menu-mode>header{position:relative;z-index:2;justify-content:flex-start;padding:20px 30px}body.menu-mode>header .brand{font-size:clamp(26px,3vw,47px)}body.menu-mode>header .crest{font-size:clamp(40px,5vw,65px)}body.menu-mode .soundtrack,body.menu-mode>main{display:none}
#lobby{position:relative;z-index:1;min-height:calc(100dvh - 130px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 20px 25px}.scrollContract{position:relative;width:min(440px,90vw);height:540px;perspective:1200px}.contractRoller{position:absolute;z-index:3;left:50%;top:50%;width:360px;height:90px;transform:translate(-50%,-50%) rotate(-90deg);transition:transform .65s cubic-bezier(.22,.85,.25,1);border:3px solid #a39268;border-radius:20px / 43px;color:#fff0cf;background:linear-gradient(180deg,#ffffff25 0%,transparent 30% 65%,#0005),linear-gradient(90deg,#292f2b 0 5px,#ba6e72 5px 28px,#d4ba76 28px 34px,#507267 34px calc(100% - 34px),#d4ba76 calc(100% - 34px) calc(100% - 28px),#ba6e72 calc(100% - 28px) calc(100% - 5px),#292f2b calc(100% - 5px));font-size:25px;box-shadow:6px 12px 30px #0007;text-shadow:0 2px 2px #0006;white-space:nowrap;cursor:pointer}
.contractPaper{position:absolute;left:50%;top:92px;width:350px;max-width:calc(90vw - 35px);height:390px;background:#f0ebd3;color:#31372b;border:2px solid #8f805d;border-top:0;border-bottom-width:6px;box-shadow:0 18px 35px #0006;transform:translateX(-50%) scaleY(0);transform-origin:top;opacity:0;transition:transform .6s cubic-bezier(.2,.75,.25,1),opacity .25s;transition-delay:0s;overflow:hidden;text-align:center;background-image:linear-gradient(90deg,#00000009,transparent 15% 85%,#0000000d)}
.contractOpen .contractRoller{transform:translate(-50%,-235px) rotate(0)}.contractOpen .contractPaper{transform:translateX(-50%) scaleY(1);opacity:1;transition-delay:.35s}.contractBorder{height:29px;background:url('assets/scroll-border.svg') repeat-x center/240px 28px;border-bottom:1px solid #9c8c67}.contractBorder.bottom{position:absolute;bottom:0;left:0;right:0;border-bottom:0;border-top:1px solid #9c8c67}.contractWriting{display:grid;grid-template-columns:1fr 1fr;gap:0;height:64px;align-items:center;border-bottom:1px solid #9c8c67;font:24px serif;letter-spacing:5px;opacity:.75}.contractWriting span+span{border-left:1px solid #9c8c67}.contractName{padding:13px 22px;border-bottom:1px solid #9c8c67}.contractName label{display:block;font:10px Inter,sans-serif;letter-spacing:2px;margin-bottom:8px;color:#6a705b}.contractName input{display:block;width:100%;text-align:center;border:0;background:transparent;color:#31372b;font:24px var(--ninja-font);outline-offset:2px}.contractName input::placeholder{font:18px Inter,sans-serif;color:#8b8a70}#contractSeal{display:block;width:78px;height:78px;padding:9px;margin:12px auto 0;border:1px dashed #9b6c55;border-radius:50%;background:#d8cdb32e;color:#a04032;cursor:pointer;transition:background .2s,transform .2s}#contractSeal svg{width:100%;height:100%;fill:none;stroke:#a57660;stroke-width:1.4;opacity:.4}#contractSeal:not(:disabled):hover{background:#b76d4b15;transform:scale(1.04)}#contractSeal:disabled{cursor:default}.contractSigned #contractSeal svg{fill:#994537;stroke:#783c2e;opacity:1;animation:sealStamp .4s cubic-bezier(.2,.8,.2,1)}#contractStatus{font:11px/1.4 Inter,sans-serif;margin:8px 16px 4px;color:#73765f;min-height:16px}#contractSignIn{font:12px Inter,sans-serif;color:#7b4d33;text-underline-offset:3px}.practiceStart{position:relative;margin:-10px 0 0;padding:9px 14px;background:transparent;border:0;color:#9dad96;font:12px Inter,sans-serif;text-underline-offset:4px}.practiceStart:hover{color:#e9edde;text-decoration:underline}
@keyframes sealStamp{from{transform:scale(1.7) rotate(-12deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
@media(max-height:750px){#lobby{min-height:calc(100dvh - 105px);padding-bottom:12px}.scrollContract{height:480px}.contractOpen .contractRoller{transform:translate(-50%,-220px) rotate(0)}.contractPaper{top:65px}.contractRoller{height:80px}}
@media(max-width:600px){body.menu-mode>header{padding:20px}.contractRoller{width:320px;max-width:85vw;font-size:23px}.scrollContract{height:480px}.contractPaper{width:310px}.contractName input{font-size:20px}.practiceStart{font-size:11px}}
@media(prefers-reduced-motion:reduce){.contractRoller,.contractPaper{transition:none}.contractSigned #contractSeal svg{animation:none}}

/* A horizontal roller turns upright, then opens across the contract. */
.scrollContract{--paper-w:min(534px,70vw);--paper-h:calc(var(--paper-w) * .6864);width:min(760px,96vw);height:520px}
.contractRoller{width:var(--paper-h);height:80px;transform:translate(-50%,-50%) rotate(0deg);font-size:24px}
.contractOpen .contractRoller{transform:translate(calc(-50% - var(--paper-w)/2),-50%) rotate(90deg)}
.contractPaper{top:calc(50% - var(--paper-h)/2);left:calc(50% - var(--paper-w)/2 + 40px);width:var(--paper-w);height:var(--paper-h);max-width:none;border:0;background:#f1ecd7 url('assets/contract-reference-paper.jpg') center/100% 100% no-repeat;transform:scaleX(0);transform-origin:left center;opacity:0;transition:transform .65s cubic-bezier(.2,.8,.2,1),opacity .2s;box-shadow:6px 14px 30px #0006}
.contractOpen .contractPaper{transform:scaleX(1);opacity:1;transition-delay:.35s}
.contractPlayer{position:absolute;left:39.1%;top:12.7%;width:14.4%;height:69.7%;background:#f3efdb;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:8px 1px 0;border-left:1px solid #a69e86;border-right:1px solid #a69e86}
#contractVerticalName{writing-mode:vertical-rl;text-orientation:upright;white-space:nowrap;letter-spacing:-.04em;font-family:var(--ninja-font);font-size:min(19px,calc(var(--paper-h) * .47 / var(--letters,10)));line-height:1.1;color:#39382d;flex:1;min-height:0}
.contractPlayer #contractSeal{flex:0 0 22%;width:80%;height:auto;aspect-ratio:.9;margin:2px 0 0;padding:0;border:1px dashed #9e8b6c66;border-radius:40%;background:transparent}
#contractSeal svg{stroke:none;fill:#3b3027;opacity:0;transition:opacity .15s} .contractSigned #contractSeal svg{stroke:none;fill:#3b3027;opacity:1}
.contractMeta{position:absolute;top:calc(50% + var(--paper-h)/2 + 20px);left:50%;width:min(420px,85vw);transform:translateX(-50%);text-align:center;opacity:0;visibility:hidden;transition:opacity .25s}.contractOpen .contractMeta{opacity:1;visibility:visible;transition-delay:.7s}.contractMeta #contractStatus{color:#c4c9b5;margin:7px 0;font-size:11px}.contractMeta #contractSignIn{color:#e7c79d}.contractMeta input{background:#18291e;border:1px solid #6f8069;color:#f1edda;padding:8px 12px;border-radius:4px;text-align:center;width:220px;max-width:100%}.contractNameLabel{display:block;font:10px Inter,sans-serif;letter-spacing:2px;color:#b8c4aa;margin:0 0 6px}.contractNameLabel[hidden]{display:none}
#summoningClouds[hidden]{display:none}#summoningClouds{position:fixed;inset:0;z-index:9999;pointer-events:auto;overflow:hidden;isolation:isolate}#summoningClouds::before{content:'';position:absolute;inset:0;background:#fffdf7;opacity:0;animation:summonWhite .65s ease forwards}#summoningClouds i{position:absolute;left:var(--x);top:var(--y);width:38vmax;height:29vmax;margin:-16vmax 0 0 -16vmax;border-radius:48%;background:radial-gradient(ellipse at 40% 40%,#fffefb 45%,#edece6 78%,#fff 100%);box-shadow:9vmax 2vmax 0 2vmax #fffdf8,-5vmax 7vmax 0 1vmax #f9f8f2,3vmax -6vmax 0 1vmax #fffefb;animation:summonPuff .65s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--delay)}#summoningClouds.clearing::before{animation:clearWhite .8s ease both}#summoningClouds.clearing i{animation:clearPuff .8s cubic-bezier(.4,0,.8,.5) both;animation-delay:var(--delay)}
@keyframes summonPuff{from{opacity:0;transform:rotate(var(--spin)) scale(.08)}to{opacity:1;transform:rotate(0deg) scale(1.35)}}@keyframes summonWhite{to{opacity:1}}@keyframes clearWhite{from{opacity:1}to{opacity:0}}@keyframes clearPuff{from{opacity:1;transform:scale(1.35)}to{opacity:0;transform:translate(calc((var(--x) - 50%) * 2),-12vh) scale(1.9)}}
@media(max-width:600px){.scrollContract{--paper-w:70vw;height:450px}.contractRoller{height:56px;font-size:clamp(14px,3.6vw,22px)}.contractPaper{left:calc(50% - var(--paper-w)/2 + 28px)}.contractPlayer{padding-top:4px}.contractMeta{top:calc(50% + var(--paper-h)/2 + 18px)}}
@media(prefers-reduced-motion:reduce){.contractRoller,.contractPaper,.contractMeta{transition:none}#summoningClouds i{animation-duration:.1s}#summoningClouds::before{animation-duration:.1s}}
.scrollContract{--paper-h:calc(var(--paper-w) * .64267)}.contractPlayer{left:33.93%;width:14.14%;top:13.2%;height:74.8%}.contractRoller{font-size:clamp(14px,calc(var(--paper-h) * .062),23px)}

/* Match the original paper, handwritten ink and five fingertip marks. */
.contractPlayer{background:#f1efdf url('assets/contract-paper-tone.png') center/100% 100%;border-color:#8b806e}
#contractVerticalName{font-family:'Kalam',cursive;font-weight:700;color:#503d36;font-size:min(32px,calc(var(--paper-h) * .67 / var(--letters,6)));letter-spacing:0;line-height:1;flex:1}
.contractPlayer #contractSeal{border:0;border-radius:0;aspect-ratio:auto;flex-basis:18%;width:74%;margin:0 0 1px;background:transparent;padding:0}
#contractSeal img{display:block;width:100%;height:100%;object-fit:contain;opacity:0}
.contractSigned #contractSeal img{opacity:1;animation:sealStamp .35s cubic-bezier(.2,.8,.2,1)}
.contractMeta #contractStatus:empty{display:none}
#summoningClouds::before{animation-duration:.95s}#summoningClouds i{animation-duration:.95s}
#summoningClouds.clearing::before,#summoningClouds.clearing i{animation-duration:1.825s;animation-delay:0s}
@media(prefers-reduced-motion:reduce){.contractSigned #contractSeal img{animation:none}}
#contractVerticalName{font-size:min(32px,calc(var(--paper-h) * .38 / var(--letters,6)))}

/* The short summon cue closes the contract before smoke arrives. */
.contractSigned:not(.contractOpen) .contractPaper{transition-delay:0s;transition-duration:.55s}
.contractSigned:not(.contractOpen) .contractRoller{transition-duration:.7s}
.contractSigned .contractMeta{opacity:0;visibility:hidden;transition-delay:0s}
#summoningClouds::before,#summoningClouds i{animation-duration:.45s}
#summoningClouds.clearing::before,#summoningClouds.clearing i{animation-duration:.85s;animation-delay:0s}

/* Paper reaches the roller's body, with the source image's white margin trimmed. */
.scrollContract{--paper-h:calc(var(--paper-w) * .622108)}
.contractRoller{width:calc(var(--paper-h) + 24px)}
.contractPaper{left:calc(50% - var(--paper-w)/2 + 36px)}
.contractPlayer{top:10.744%;height:77.273%}
.contractSigned:not(.contractOpen) .contractPaper{transition-duration:2.55s;transition-timing-function:cubic-bezier(.35,0,.3,1)}
.contractSigned:not(.contractOpen) .contractRoller{transition-duration:2.8s;transition-timing-function:cubic-bezier(.35,0,.3,1)}
#summoningClouds i{width:42vmax;height:32vmax;border-radius:0;background:transparent url('assets/summoning-smoke.svg') center/contain no-repeat;box-shadow:none;animation-duration:.32s;animation-delay:0s}
#summoningClouds::before{animation-duration:.32s}
#summoningClouds.clearing::before,#summoningClouds.clearing i{animation-duration:.42s}
@media(max-width:600px){.contractPaper{left:calc(50% - var(--paper-w)/2 + 24px)}}

/* Rewind full-size paper into the stationary tube, then turn the closed scroll. */
.contractPaper{transform:translateX(-100%)!important;opacity:1;clip-path:inset(0 0 0 100%);transition:transform .65s cubic-bezier(.35,0,.3,1),clip-path .65s cubic-bezier(.35,0,.3,1);transition-delay:0s}
.contractOpen .contractPaper{transform:translateX(0)!important;clip-path:inset(0 0 0 0);transition-delay:.35s}
.contractRolling .contractPaper,.contractSigned.contractRolling .contractPaper{transform:translateX(-100%)!important;clip-path:inset(0 0 0 100%);transition:transform var(--rewind-time,1.9s) cubic-bezier(.35,0,.3,1),clip-path var(--rewind-time,1.9s) cubic-bezier(.35,0,.3,1);transition-delay:0s}
.contractRolling .contractRoller,.contractSigned.contractRolling .contractRoller{transition-duration:.58s;transition-delay:0s}
.contractRolling .contractMeta{opacity:0;visibility:hidden;transition-delay:0s}
.contractPaper::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#24251c38,transparent 15px);z-index:4}
.contractPlayer #contractSeal:not(:disabled):hover,.contractPlayer #contractSeal:focus-visible{background:transparent!important;transform:none}
#contractSeal{position:relative}#contractSeal::before{content:'';position:absolute;inset:0;background:url('assets/contract-fingerprint-outline.png') center/contain no-repeat;opacity:0;transition:opacity .18s;pointer-events:none}
#contractSeal:not(:disabled):hover::before,#contractSeal:focus-visible::before{opacity:.32}.contractSigned #contractSeal::before{opacity:0}
@media(prefers-reduced-motion:reduce){.contractPaper,.contractRolling .contractPaper{transition-duration:.01s!important}}

/* The paper and its tube rotate as one assembly while the paper rewinds. */
.contractAssembly{position:absolute;inset:0;transform-origin:calc(50% - var(--paper-w)/2) 50%;transform:translate3d(0,0,0) rotate(0deg);transition:transform 2.62s cubic-bezier(.35,0,.3,1);will-change:transform;backface-visibility:hidden}
.contractSigned.contractRolling .contractAssembly{transform:translate3d(calc(var(--paper-w)/2),0,0) rotate(-90deg)}
.contractSigned.contractRolling .contractRoller{transform:translate(calc(-50% - var(--paper-w)/2),-50%) rotate(90deg);transition:none}
.contractSigned.contractRolling .contractPaper{clip-path:inset(0 0 0 100%);transition-duration:2.62s;transition-timing-function:cubic-bezier(.35,0,.3,1)}
#summoningClouds{contain:layout paint;transform:translateZ(0)}
#summoningClouds i{width:62vmax;height:47vmax;margin:-23vmax 0 0 -31vmax;will-change:transform,opacity;backface-visibility:hidden;animation-name:smokeEnter;animation-duration:.44s;animation-timing-function:cubic-bezier(.22,.61,.36,1)}
#summoningClouds::before{will-change:opacity;animation-duration:.44s}
#summoningClouds.clearing i{animation-name:smokeExit;animation-duration:.65s;animation-timing-function:cubic-bezier(.4,0,.6,1)}
#summoningClouds.clearing::before{animation-duration:.65s}
@keyframes smokeEnter{from{opacity:0;transform:translate3d(0,6vh,0) rotate(var(--spin)) scale(.55)}to{opacity:1;transform:translate3d(0,0,0) rotate(0deg) scale(1.2)}}
@keyframes smokeExit{from{opacity:1;transform:translate3d(0,0,0) rotate(0deg) scale(1.2)}to{opacity:0;transform:translate3d(0,-10vh,0) rotate(0deg) scale(1.48)}}
@media(prefers-reduced-motion:reduce){.contractAssembly{transition:none}}

/* Review navigation belongs beneath the map, including final-game actions. */
#mainMenu[hidden]{display:none!important}
.game.is-review .roundActions{grid-column:1;grid-row:4;width:calc(100% - 39px);display:flex;gap:12px;position:relative;align-self:start}
.game.is-review .roundActions .submit{width:100%;min-width:0}
.game.is-review #reviewLocation{grid-column:1;grid-row:3}
.game.is-review #reviewLocation p{margin-bottom:3px;font-size:12px;line-height:1.2}
.game.is-review #reviewLocation .reviewDistance{font-size:17px!important;line-height:1.3}
.game.is-review #reviewLocation>a{margin-top:4px}
.game.is-review.is-finished .roundActions .submit{flex:1 1 0;width:0;font-size:15px!important;padding:12px 14px}
@media(min-width:601px){.game.is-review{grid-template-rows:minmax(154px,.42fr) minmax(0,1fr) 86px 52px}}
@media(max-width:600px){.game.is-review .roundActions{grid-column:1;grid-row:4;width:100%;gap:7px}.game.is-review #reviewLocation{grid-column:2;grid-row:4}.game.is-review.is-finished .roundActions .submit{font-size:10px!important;padding:8px 6px}.game.is-review .roundActions .submit{font-size:15px!important;padding:10px}}

/* Profile scrolls live in the lower third of the lobby. */
#lobby{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:clamp(330px,calc(100dvh - 350px),670px) auto auto;align-content:start;justify-items:center;align-items:start;gap:0;min-height:calc(100dvh - 110px);padding:0 24px 35px}
#lobby>.scrollContract{grid-row:1;height:100%;align-self:stretch;margin:0}
#lobby .scrollContract:not(.contractOpen):not(.contractSigned) .contractRoller{transform:translate(-50%,calc(-50% - 100px)) rotate(0deg)}
#lobby>.rankScrolls{grid-column:1;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;width:min(1100px,94vw);max-width:none;margin:0;align-items:start}
#lobby>.rankScrolls>.ranking{min-width:0;width:100%;margin:0}
#lobby>.practiceStart{grid-row:3;margin:20px 0 0}
.contractPlayer{overflow:hidden}
.contractPlayer #contractSeal{overflow:hidden;isolation:isolate}
.contractSigned #contractSeal img{animation:cleanFingerprint .25s ease-out both;transform:none!important}
@keyframes cleanFingerprint{from{opacity:0}to{opacity:1}}
@media(max-width:600px){#lobby{padding:0 12px 25px;grid-template-rows:330px auto auto}#lobby>.rankScrolls{gap:12px;width:100%}#lobby>.rankScrolls .scrollToggle{font-size:13px!important;padding-left:12px;padding-right:12px}#lobby .scrollContract:not(.contractOpen):not(.contractSigned) .contractRoller{transform:translate(-50%,calc(-50% - 75px)) rotate(0deg)}}

/* All three lobby rollers share the same proportions and construction. */
#lobby{--menu-scroll-width:calc(min(534px,70vw) * .622108 + 24px);--menu-scroll-height:80px;padding-top:32px}
#lobby>.rankScrolls{width:min(100%,calc(var(--menu-scroll-width) * 2 + 80px));gap:80px}
#lobby>.rankScrolls>.ranking{max-height:var(--menu-scroll-height);border-radius:20px / 43px;box-shadow:6px 12px 30px #0007}
#lobby #ranking{--roller:#934c50;--roller-end:#713b42;--roller-gold:#d4ba76}
#lobby #leaderboard{--roller:#3d6388;--roller-end:#6c8dab;--roller-gold:#d4ba76}
#lobby>.rankScrolls>.ranking::before{height:var(--menu-scroll-height);border:3px solid #a39268;border-radius:20px / 43px;background:linear-gradient(180deg,#ffffff25 0%,transparent 30% 65%,#0005),linear-gradient(90deg,#292f2b 0 5px,var(--roller-end) 5px 28px,var(--roller-gold) 28px 34px,var(--roller) 34px calc(100% - 34px),var(--roller-gold) calc(100% - 34px) calc(100% - 28px),var(--roller-end) calc(100% - 28px) calc(100% - 5px),#292f2b calc(100% - 5px));box-shadow:none}
#lobby>.rankScrolls .scrollToggle{height:var(--menu-scroll-height);font-size:clamp(14px,calc((var(--menu-scroll-width) - 24px) * .062),23px)!important;text-shadow:0 2px 2px #0006;left:34px;right:34px;width:calc(100% - 68px)}
#lobby>.rankScrolls .scrollToggle::after{display:none}
#lobby>.rankScrolls .rankScrollContent{padding-top:101px}
#lobby>.rankScrolls>.ranking::after{top:77px}
#lobby>.rankScrolls>.ranking.scrollOpen{max-height:var(--scroll-height);border-radius:20px 20px 4px 4px}
@media(max-width:600px){#lobby{--menu-scroll-height:56px;padding-top:24px}#lobby>.rankScrolls{gap:18px;width:100%}#lobby>.rankScrolls>.ranking,#lobby>.rankScrolls>.ranking::before{border-radius:15px / 28px}#lobby>.rankScrolls .scrollToggle{left:21px;right:21px;width:calc(100% - 42px);font-size:clamp(9px,2.5vw,14px)!important;padding:0}#lobby>.rankScrolls>.ranking::before{background:linear-gradient(180deg,#ffffff25,transparent 30% 65%,#0005),linear-gradient(90deg,#292f2b 0 3px,var(--roller-end) 3px 15px,var(--roller-gold) 15px 19px,var(--roller) 19px calc(100% - 19px),var(--roller-gold) calc(100% - 19px) calc(100% - 15px),var(--roller-end) calc(100% - 15px) calc(100% - 3px),#292f2b calc(100% - 3px))}#lobby>.rankScrolls .rankScrollContent{padding-top:77px}#lobby>.rankScrolls>.ranking::after{top:53px}}
#lobby>.rankScrolls>.ranking::before{box-sizing:border-box}

/* Click-operated lobby scrolls keep room for the open ranked contract. */
#lobby>.scrollContract{transform:translateY(24px)}
#lobby>.rankScrolls{transform:translate3d(0,0,0);transition:transform .8s cubic-bezier(.22,1,.36,1);will-change:transform}
#lobby.contract-active>.rankScrolls{transform:translate3d(0,clamp(85px,15dvh,145px),0)}
#lobby>.practiceStart{transition:transform .8s cubic-bezier(.22,1,.36,1)}
#lobby.contract-active>.practiceStart{transform:translateY(clamp(85px,15dvh,145px))}
@media(prefers-reduced-motion:reduce){#lobby>.rankScrolls,#lobby>.practiceStart{transition:none}}

/* One continuous paper image, with the player's writing layered directly over it. */
.contractPlayer{background:transparent;border:0}
#lobby>.rankScrolls>.ranking{background:transparent}
#lobby>.rankScrolls .rankScrollContent{width:calc(100% - 24px);margin:0 12px;padding-left:25px;padding-right:25px;background:linear-gradient(transparent 0 77px,#f0e9d4 77px 100%)}
#lobby>.rankScrolls>.ranking::after{left:12px;right:12px;top:77px;border-left:0;border-right:0;border-bottom-color:#a68d65;background-position:left top,right top;background-size:16px 137px}
@media(max-width:600px){#lobby>.rankScrolls .rankScrollContent{width:calc(100% - 18px);margin:0 9px;padding-left:18px;padding-right:18px;background:linear-gradient(transparent 0 53px,#f0e9d4 53px 100%)}#lobby>.rankScrolls>.ranking::after{left:9px;right:9px;top:53px}}

/* Shared compact brand and soundtrack on both the lobby and guessing screen. */
body>header .brand{font-size:clamp(26px,3vw,47px)}
body>header .brand .crest{font-size:clamp(40px,5vw,65px)}
body.menu-mode>header{grid-template-columns:minmax(0,1.4fr) minmax(280px,420px);justify-content:space-between;align-items:center}
body.menu-mode>header>.soundtrack{display:block;width:100%;max-width:420px;justify-self:end}
.rankThumb img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0}
.rankLocked .rankThumb img{filter:grayscale(1) blur(1.15px);opacity:.65}
.rankScrolls .rankDetailHeading .rankThumb{width:60px;height:60px;flex-shrink:0}
.rankScrolls .rankDetailHeading h3{overflow-wrap:anywhere}
@media(max-width:700px){body.menu-mode>header{grid-template-columns:1fr;gap:12px}body.menu-mode>header .brand{grid-row:1}body.menu-mode>header>.soundtrack{grid-row:2;max-width:360px}}
.rankLocked .rankThumb img{filter:grayscale(1) blur(.8px);opacity:.7}
/* Shared brand coordinates on the lobby and guessing screen. */
body:not(.review-mode)>header,body.menu-mode>header{padding:8px 12px!important;box-sizing:border-box}
body:not(.review-mode)>header .brand{font-size:clamp(26px,3vw,47px)!important;margin:0!important}
body:not(.review-mode)>header .crest{font-size:clamp(40px,5vw,65px)!important}
body.auth-mode>header{display:flex!important;justify-content:center!important;padding-top:24px!important}
body.auth-mode>header .soundtrack,body.auth-mode #lobby,body.auth-mode>main{display:none!important}
#ninjaGate{min-height:calc(100dvh - 120px);padding:55px 24px 40px;box-sizing:border-box;text-align:center;color:#f4ebcf}
#ninjaGate[hidden]{display:none}
#authChoices,#ninjaSetup{max-width:680px;margin:0 auto}
.authChoices{display:flex;gap:24px;justify-content:center}
#ninjaGate button,#ninjaGate a{border:2px solid #a49368;border-radius:12px;background:#496d60;color:#fff2d0;padding:18px 24px;font:inherit;font-size:20px;text-decoration:none;cursor:pointer;display:inline-block}
#ninjaGate button:disabled{opacity:.5;cursor:default}
#authProviders{margin-top:28px}#authProviders a,#authProviders button{margin:8px}#authProviders p{font-size:14px;color:#c9c6b5}
#ninjaSetup{max-width:600px;padding:26px;background:#e9dfc1;color:#503d36;border:4px solid #a49368;border-radius:18px;text-align:left}
#ninjaSetup h1{text-align:center;margin-top:0}#ninjaSetup label{display:block;margin:18px 0 9px}#ninjaName{width:100%;box-sizing:border-box;padding:12px;font:inherit;border:1px solid #a49368;border-radius:6px;background:#f3ecd6;color:#503d36}
#signaturePad{display:block;width:100%;background:#f3ecd6;border:1px solid #ad9b76;border-radius:6px;touch-action:none;cursor:crosshair;user-select:none}
.signatureActions{display:flex;justify-content:space-between;gap:12px;margin-top:18px}#ninjaGate .signatureActions button{font-size:16px;padding:12px}#signatureStatus{font-size:14px;min-height:36px}
#contractSignature{position:absolute;width:180%;height:66%;left:-40%;top:0;transform:rotate(90deg);transform-origin:center;pointer-events:none;overflow:visible}#contractSignature[hidden]{display:none}
@media(max-width:600px){#ninjaGate{padding:32px 15px}.authChoices{flex-direction:column;gap:12px}body.auth-mode>header .brand{font-size:26px!important}#ninjaSetup{padding:18px}}
#ninjaGate [hidden]{display:none!important}
#contractSignature{display:block;width:calc(var(--paper-h)*.52);height:calc(var(--paper-h)*.18);left:50%;top:35%;transform:translate(-50%,-50%) rotate(90deg)}
#contractSignature[hidden]{display:none!important}
/* The mark stays at the foot of the contract, independent of the signature. */
.contractPlayer #contractSeal{position:absolute;bottom:0;left:13%;height:18%;width:74%;margin:0;flex:none}
body.auth-mode #authChoices{padding-top:clamp(70px,15vh,170px)}
#gateSignOut{margin-left:18px}
@media(max-width:600px){body.auth-mode #authChoices{padding-top:clamp(50px,10vh,100px)}#gateSignOut{margin-left:8px}}
/* Hover feedback never opens a scroll or changes its layout. */
#lobby .contractRoller{scale:1;translate:0 0}
#lobby .scrollContract:not(.contractOpen):not(.contractSigned):not(.contractRolling) .contractRoller{transition:transform .65s,scale .3s,translate .3s,filter .3s}
@media(hover:hover){#lobby .scrollContract:not(.contractOpen):not(.contractSigned):not(.contractRolling) .contractRoller:hover{scale:1.045;translate:0 -5px;filter:drop-shadow(0 12px 13px #0006);animation:scrollHoverFloat 2.6s ease-in-out infinite}#lobby>.rankScrolls>.ranking:not(.scrollOpen):has(.scrollToggle:hover){scale:1.045;translate:0 -5px;animation:scrollHoverFloat 2.6s ease-in-out infinite}}
#lobby>.rankScrolls>.ranking{transition:transform .65s,scale .3s,translate .3s,filter .3s}
@keyframes scrollHoverFloat{0%,100%{translate:0 -5px}50%{translate:0 -10px}}
#ninjaRegistration{max-width:1000px;margin:35px auto 0;padding:0 16px 45px}
#ninjaRegistration[hidden]{display:none}
#ninjaGate #registrationToggle{position:relative;z-index:2;display:block;width:min(480px,100%);height:90px;margin:0 auto;padding:12px 45px;border:3px solid #a49368;border-radius:20px/45px;background:linear-gradient(#ffffff20,transparent 35% 65%,#0004),linear-gradient(90deg,#b66b72 0 7%,#d4ba76 7% 9%,#4b7062 9% 91%,#d4ba76 91% 93%,#b66b72 93%);font:24px var(--ninja-font);text-shadow:0 2px 2px #0006;transition:width .55s,transform .35s}
#ninjaGate .registrationOpen #registrationToggle{width:100%;border-radius:18px/40px}
#ninjaRegistration #ninjaSetup{position:relative;max-width:none;border:0;border-radius:0;margin:-6px 20px 0;padding:45px 40px 35px;background:#eee6ca;box-shadow:0 20px 40px #0006;isolation:isolate;animation:registrationUnroll .65s cubic-bezier(.2,.8,.2,1);transform-origin:top}
#ninjaSetup::before,#ninjaSetup::after{content:'';position:absolute;top:0;bottom:0;width:18px;background:#b5a27d url('assets/scroll-side.svg') repeat-y center/18px auto;z-index:-1}#ninjaSetup::before{left:0}#ninjaSetup::after{right:0;transform:scaleX(-1)}
@keyframes registrationUnroll{from{clip-path:inset(0 0 100% 0);opacity:.4}to{clip-path:inset(0);opacity:1}}
.registrationIntro{text-align:center;color:#6c614f;margin:0 0 25px}#ninjaSetup h1{font-family:var(--ninja-font);font-size:25px}
#villageChoice{border:0;padding:0;margin:32px 0 20px}#villageChoice legend{font-size:22px;font-weight:bold}.villagePromise{color:#8e332e;font-size:14px;margin:8px 0 15px}
#villageMap{border:3px solid #a49368;border-radius:8px;overflow:hidden;background:#7c9aa3}#villageMap svg{display:block;width:100%;height:auto}.villageCountry{cursor:pointer;outline:none}.villageCountry path{fill:#fff3cf;fill-opacity:.02;stroke:transparent;stroke-width:5;transition:fill-opacity .2s,stroke .2s}.villageCountry:hover path,.villageCountry:focus-visible path{fill-opacity:.32;stroke:#ffdc85}.villageCountry.selected path{fill:#ffb94d;fill-opacity:.45;stroke:#fff0ac;stroke-width:7}.villageCountry text{font:bold 27px Inter,Arial;fill:#fff7df;stroke:#373f35;stroke-width:4;paint-order:stroke;text-anchor:middle;pointer-events:none}
.villageButtons{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:12px 0}#ninjaGate .villageButtons button{padding:9px 5px;font-size:12px;background:#ded3b4;color:#503d36;border:1px solid #ad9a71;border-radius:5px}#ninjaGate .villageButtons button.selected{background:#d7a56b;border:2px solid #91562e}.villageButtons img{display:block;height:26px;width:30px;margin:0 auto 5px}
#villageDetails{display:flex;gap:18px;padding:20px;background:#e2d8b9;border:1px solid #b4a27c;border-radius:6px;min-height:90px}#villageDescription>img{width:54px;height:54px}#villageDetails h2{font-size:24px;margin:0}#villageDetails p{margin:7px 0;line-height:1.5}#villageDetails dl{display:flex;gap:30px;margin:12px 0}#villageDetails dt{font-size:12px;color:#756950}#villageDetails dd{margin:3px 0 0;font-weight:bold}#villageDetails strong{color:#8e332e;font-size:12px}
@media(max-width:600px){#ninjaRegistration{padding:0 0 30px}#ninjaRegistration #ninjaSetup{margin:-6px 8px 0;padding:30px 24px}#ninjaGate #registrationToggle{font-size:19px;height:70px}.villageButtons{grid-template-columns:repeat(3,1fr)}#villageDetails{padding:12px;gap:10px}#villageDescription>img{width:32px;height:32px}#villageDetails h2{font-size:20px}}
@media(prefers-reduced-motion:reduce){#lobby .contractRoller,#lobby>.rankScrolls>.ranking{animation:none!important}#ninjaRegistration #ninjaSetup{animation:none}}
#lobby .scrollContract.contractOpen .contractRoller,#lobby .scrollContract.contractRolling .contractRoller,#lobby .scrollContract.contractSigned .contractRoller{scale:1!important;translate:0 0!important;animation:none!important;filter:none!important}
.signatureRedo{margin:14px 0 24px}#ninjaGate .signatureRedo button{font-size:16px;padding:12px 20px}.signatureRedo #signatureStatus{margin:12px 0 0;min-height:20px}
.villageCountry path{fill:var(--country-color);stroke:transparent;stroke-width:2}.villageCountry:hover path,.villageCountry:focus-visible path{fill:var(--country-color);fill-opacity:.45;stroke:var(--country-color);stroke-width:3}.villageCountry.selected path{fill:var(--country-color);fill-opacity:.58;stroke:var(--country-color);stroke-width:4}
#ninjaGate #registrationToggle{transition:width .55s cubic-bezier(.2,.8,.2,1),transform .35s}
.submit.isChecking{opacity:1;cursor:wait;justify-content:center;gap:0}.checkingDots{display:inline-block;width:1.4em;text-align:left;font-family:Arial,sans-serif}.checkingDots::after{content:'.';animation:checkingDots 1.2s steps(1,end) infinite}@keyframes checkingDots{0%{content:'.'}33.33%{content:'..'}66.66%{content:'...'}}
/* Center the loading dots optically beside the lettering. */
.checkingDots{align-self:center;display:inline-flex;align-items:center;height:1em;line-height:1;transform:translateY(-.24em)}
.villageCountry image{pointer-events:none}.villageCountry:hover path,.villageCountry:focus-visible path{fill-opacity:.6;stroke-width:4;filter:drop-shadow(0 0 7px var(--country-color))}.villageCountry.selected path{fill-opacity:.75;stroke-width:5;filter:drop-shadow(0 0 9px var(--country-color))}
#lobby>.rankScrolls{width:min(1400px,100%);grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,52px)}
#lobby #nationRanking{--roller:#735580;--roller-end:#493650;--roller-gold:#d4ba76}
#lobby>.rankScrolls .scrollToggle{font-size:clamp(12px,1.6vw,23px)!important}
#lobby #ranking .rankProgress i{background:var(--nation-color,#f78044)}
.portraitNote{display:block;margin-top:5px;font-size:11px!important}
.nationMethod{font-size:12px;line-height:1.5;color:#73705b}.nationStanding{display:grid;grid-template-columns:22px 34px minmax(0,1fr);gap:9px;align-items:center;padding:15px 8px;border-bottom:1px solid #b5a789;border-left:4px solid var(--nation-color)}.nationStanding>img{width:32px;height:32px}.nationStanding h3{font:700 17px Inter,Arial;margin:0 0 5px}.nationStanding small{display:block;font:11px/1.5 Inter,Arial;color:#77725f}.nationStanding>strong{grid-column:3;font-size:24px}.nationPosition{font-size:20px}#refreshNations{margin-top:18px;padding:10px 15px;border:1px solid #a49268;background:#dbd1b1;color:#503d36;border-radius:5px;cursor:pointer}
@media(max-width:900px){#lobby>.rankScrolls{gap:14px}#lobby>.rankScrolls .scrollToggle{left:22px;right:22px;width:calc(100% - 44px);font-size:12px!important}#lobby>.rankScrolls .rankScrollContent{padding-left:15px;padding-right:15px}.rankLadder{grid-template-columns:repeat(2,minmax(0,1fr))}.leaderboardRow{gap:7px}.playerAverage{font-size:14px}}
@media(max-width:600px){#lobby>.rankScrolls{grid-template-columns:1fr;width:min(440px,100%);gap:24px}#lobby>.rankScrolls .scrollToggle{font-size:18px!important}#lobby>.rankScrolls .rankScrollContent{padding-left:25px;padding-right:25px}.rankLadder{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){#lobby>.rankScrolls{grid-template-columns:1fr;width:min(560px,100%);gap:24px}#lobby>.rankScrolls .scrollToggle{font-size:18px!important}#lobby>.rankScrolls .rankScrollContent{padding-left:28px;padding-right:28px}.rankLadder{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Round dots share the text's vertical center instead of a punctuation baseline. */
.checkingDots{position:relative;display:inline-flex;align-items:center;align-self:center;width:1.2em;height:1em;margin-left:.3em;transform:none;font-size:inherit!important;line-height:1}
.checkingDots::after{content:'';display:block;width:.13em;height:.13em;border-radius:50%;background:currentColor;box-shadow:.36em 0 transparent,.72em 0 transparent;animation:checkingCircles 1.2s steps(1,end) infinite}
@keyframes checkingCircles{0%{box-shadow:.36em 0 transparent,.72em 0 transparent}33.33%{box-shadow:.36em 0 currentColor,.72em 0 transparent}66.66%{box-shadow:.36em 0 currentColor,.72em 0 currentColor}}
@media(min-width:901px){#lobby>.rankScrolls{width:min(100%,calc(var(--menu-scroll-width) * 3 + clamp(16px,3vw,52px) * 2))}}
#ninjaGate .testNinjaCard{max-width:510px;margin:24px auto 0;padding:20px;border:1px dashed #b69f68;border-radius:12px;background:#233a30b8;text-align:center}
.testNinjaCard>small{display:block;color:#d9bc79;letter-spacing:2px;font-size:11px;margin-bottom:12px}#ninjaGate .testNinjaCard button{display:block;width:100%;font-size:18px;padding:16px;background:#615b37}.testNinjaCard p{font-size:13px;color:#d2d0bb;line-height:1.6;margin:12px 0 0}#testSessionNotice{grid-row:3;margin:20px auto 0;color:#d9c48d;text-align:center;font-size:13px}#testSessionNotice a{color:#f3e3b3;display:block;margin-top:9px}
/* A fixed-width name field and stable registration geometry. */
html{scrollbar-gutter:stable}
#ninjaRegistration,#ninjaRegistration *{overflow-anchor:none}
.ninjaNameField{text-align:center;margin:18px auto 4px;max-width:100%}
#ninjaSetup .ninjaNameField label{text-align:center;margin:0 0 9px}
#ninjaSetup #ninjaName{display:block;width:calc(13ch + 26px);max-width:100%;margin:0 auto;font:17px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;padding:12px;text-align:center}
#nameFeedback{height:2.8em;line-height:1.4;font-size:13px;margin:8px 0 0;color:#70654d}#nameFeedback[data-state=error]{color:#a3322b}#nameFeedback[data-state=available]{color:#39694d}
#villageDetails{height:270px;min-height:270px;overflow:auto}
#ninjaGate .villageButtons button{border-width:2px}
@media(max-width:600px){#villageDetails{height:350px;min-height:350px}}

/* The fixed mouth clips moving paper; its edge cannot drift away from the roller. */
.contractPaperViewport{position:absolute;top:calc(50% - var(--paper-h)/2);left:calc(50% - var(--paper-w)/2 + 36px);width:var(--paper-w);height:var(--paper-h);overflow:hidden;pointer-events:none}
.contractPaperViewport .contractPaper{position:absolute;inset:0;width:100%;height:100%;clip-path:none!important;pointer-events:auto;transition:transform .65s cubic-bezier(.35,0,.3,1);transition-delay:0s}
.contractOpen .contractPaperViewport .contractPaper{transform:translateX(0)!important;transition-delay:.65s}
.contractRolling .contractPaperViewport .contractPaper{transform:translateX(-100%)!important;transition:transform var(--rewind-time,.65s) cubic-bezier(.35,0,.3,1);transition-delay:0s}
.contractPaperViewport::after{content:'';position:absolute;inset:0 auto 0 0;width:12px;background:linear-gradient(90deg,#24251c66,transparent);pointer-events:none;opacity:0;transition:opacity .2s}
.contractOpen .contractPaperViewport::after{opacity:1;transition-delay:.65s}
.contractPaper::after{display:none}
@media(max-width:600px){.contractPaperViewport{left:calc(50% - var(--paper-w)/2 + 24px)}}
.rankLocked .rankThumb img{filter:grayscale(1) blur(3px);opacity:.55}
.timelineTrack input[type=range]{background-clip:padding-box!important}
@media(prefers-reduced-motion:reduce){.contractPaperViewport .contractPaper{transition:none!important}}

/* No residual shadow at the closed paper mouth. */
.contractPaperViewport::after{display:none}

/* Retracted paper must not cast a clipped shadow beyond the roller. */
.contractPaperViewport .contractPaper{box-shadow:none}
.contractPaperViewport{visibility:hidden;box-shadow:none}
.contractOpen .contractPaperViewport,.contractRolling .contractPaperViewport{visibility:visible}

/* The paper travels out of the top roller while its lower reel follows its edge. */
#lobby>.rankScrolls>.ranking{height:var(--menu-scroll-height);max-height:none!important;transition:height .85s cubic-bezier(.35,0,.3,1),border-radius .85s;overflow:hidden;will-change:height}
#lobby>.rankScrolls .rankScrollContent{opacity:1;transform:translateY(calc(-100% + var(--menu-scroll-height)));transition:transform .85s cubic-bezier(.35,0,.3,1);will-change:transform}
#lobby>.rankScrolls>.ranking.scrollOpen .rankScrollContent{transform:translateY(0);opacity:1;transition:transform .85s cubic-bezier(.35,0,.3,1)}
.rankReel{position:absolute;z-index:3;bottom:0;left:12px;right:12px;height:13px;border:2px solid #a39268;border-radius:50% / 35%;background:linear-gradient(#eee0b5,#a18b5f 48%,#675539 65%,#c0a778);pointer-events:none;opacity:0;transition:opacity .15s .65s}
.scrollOpen .rankReel{opacity:1;transition:opacity .12s}
#soundToggle{position:fixed;z-index:10001;right:16px;bottom:14px;border:1px solid #a39268;border-radius:22px;padding:9px 14px;background:#18342feb;color:#fff0cf;font:13px Inter,sans-serif;box-shadow:0 3px 12px #0005;cursor:pointer}
#soundToggle:focus-visible{outline:3px solid #f78044;outline-offset:3px}
@media(prefers-reduced-motion:reduce){#lobby>.rankScrolls>.ranking,#lobby>.rankScrolls .rankScrollContent,.rankReel{transition:none!important}}

/* Closed scrolls never expose their translated contents during lobby movement. */
#lobby>.rankScrolls>.ranking:not(.scrollOpen) .rankScrollContent{visibility:hidden}
#lobby>.rankScrolls>.ranking:not(.scrollOpen)::after{visibility:hidden}
#lobby>.rankScrolls>.ranking::before{z-index:4}
#lobby>.rankScrolls .scrollToggle{z-index:5}
#lobby .contractRoller{text-shadow:0 1px 1px #0005;-webkit-font-smoothing:antialiased}
.contractPaperViewport .contractPaper{filter:url(#crispPaper)}
#sealHintText{position:absolute;left:50%;bottom:3%;transform:translateX(-50%);color:#8f1e24;font:600 12px/1.3 Inter,sans-serif;white-space:nowrap;pointer-events:none}
.sealHint #contractSeal::before{opacity:.65;animation:sealInvitation 1.4s ease-in-out infinite}
@keyframes sealInvitation{50%{opacity:.25;filter:drop-shadow(0 0 5px #b13e2d)}}
#lobbyHelp{position:absolute;right:26px;top:8px;display:flex;align-items:center;gap:8px;background:#19382e;color:#eadab2;border:1px solid #a39268;border-radius:20px;padding:7px 12px;font:12px Inter,sans-serif;cursor:pointer;transition:transform .2s,background .2s}
#lobbyHelp b{border:1px solid currentColor;border-radius:50%;width:19px;height:19px;line-height:19px}#lobbyHelp:hover{transform:translateY(-3px);background:#315045}
#lobby{position:relative}
.tourOverlay{position:fixed;inset:0;z-index:20000;cursor:pointer;background:transparent}
.tourSpot{position:fixed;z-index:20001;box-shadow:0 0 0 200vmax #08120dcc;border:2px solid #e7c67d;border-radius:8px;pointer-events:none;box-sizing:border-box}
.tourCard{position:fixed;z-index:20002;width:min(350px,calc(100vw - 24px));padding:22px;box-sizing:border-box;background:#f0e8ce;color:#354034;border:2px solid #aa9462;border-radius:12px;box-shadow:0 10px 40px #0008;font:14px/1.6 Inter,sans-serif}
.tourCard h2{font-size:22px;margin:8px 20px 8px 0}.tourCard p{margin:0 0 16px}.tourCard small{font-size:10px;letter-spacing:1px;color:#766443}.tourCard button{cursor:pointer}.tourClose{position:absolute;right:10px;top:5px;border:0;background:transparent;color:#53432f;font-size:25px}.tourNext{border:0;border-radius:6px;background:#bc632f;color:#fff6de;padding:10px 16px;font:600 14px Inter,sans-serif}
@media(prefers-reduced-motion:reduce){.sealHint #contractSeal::before{animation:none}}

#sealHintText{padding:4px 8px;border-radius:8px;background:#f6edcce8;box-shadow:0 1px 5px #58452c33}

.tourActions{display:flex;align-items:center;justify-content:space-between;gap:15px}.tourFinish{border:0;background:transparent;color:#74623f;font:13px Inter,sans-serif;padding:10px 0 10px 12px}.tourFinish span{font-size:20px;margin-right:3px}
.sealHint #contractSeal::before{animation:sealReveal 1s ease-out both,sealInvitation 1.4s ease-in-out 1s infinite}
@keyframes sealReveal{from{opacity:0}to{opacity:.65}}
.tutorial-mode #slider{background:linear-gradient(to right,#f78044 0% 30.53%,#527fba 30.53% 100%)!important}
@media(prefers-reduced-motion:reduce){.sealHint #contractSeal::before{animation:none;opacity:.65}}

.tourCursor{position:fixed;z-index:20002;width:28px;height:36px;pointer-events:none;filter:drop-shadow(0 2px 2px #0008)}.tourCursor svg{width:100%;height:100%}.tourCursor[hidden]{display:none}
.tourCursor::after{content:'';position:absolute;left:-12px;top:-12px;width:24px;height:24px;border:3px solid #ff9c50;border-radius:50%;opacity:0}.tourClick::after{animation:tourTap .35s ease-out}
@keyframes tourTap{from{opacity:1;transform:scale(.3)}to{opacity:0;transform:scale(1.8)}}
#contract #lobbyHelp{position:absolute;left:50%;right:auto;top:calc(50% - 28px);transform:translateX(-50%);display:block;width:190px;height:46px;padding:6px 22px;border:2px solid #c3a56c;border-radius:14px/25px;background:linear-gradient(#fff2,transparent 40% 70%,#0003),linear-gradient(90deg,#a95629 0 8%,#e7c580 8% 11%,#e78b3d 11% 89%,#e7c580 89% 92%,#a95629 92%);color:#fff2d4;font:15px var(--ninja-font);text-shadow:0 1px 1px #613615;box-shadow:0 5px 12px #0003;transition:opacity .25s,translate .25s;z-index:4}
#contract #lobbyHelp:hover{transform:translateX(-50%);translate:0 -4px}
#contract.contractOpen #lobbyHelp,#contract.contractRolling #lobbyHelp,#contract.contractSigned #lobbyHelp{opacity:0;visibility:hidden;pointer-events:none}
@media(max-width:600px){#contract #lobbyHelp{top:calc(50% - 16px);width:165px;height:42px;font-size:13px}.tutorial-mode .tourCard{padding:14px 18px}.tourCard h2{font-size:19px}.tourCard p{font-size:13px;line-height:1.45}}
/* Spotlight the existing layout; only the explanation changes position. */
.tutorial-mode .tourOverlay{background:transparent}
.tutorial-mode .tourCard{width:min(350px,calc(100vw - 24px));bottom:auto;transform:none;overflow:auto;z-index:20003;padding:18px 22px}
.tourSpot{z-index:20001}.tourScrollRoom{pointer-events:none}

/* Lock scrolling without overriding any game dimensions or positions. */
html.tutorial-locked{overflow:hidden;overscroll-behavior:none}
body.tutorial-mode{position:fixed;inset:0;width:100%;height:100dvh;overflow:hidden;overscroll-behavior:none}
body.tutorial-mode:not(.tutorial-ready)>main{visibility:hidden}
body.tutorial-mode .tourCard{font-size:13px;line-height:1.45;padding:16px 18px}
body.tutorial-mode .tourCard h2{font-size:20px}
/* The supplied HD sheet is cropped in CSS; the original image stays intact. */
.contractPaperViewport .contractPaper{background-image:url('assets/contract-hd-v76.png');background-size:121.7009% 111.2676%;background-position:100% 20.8333%;filter:none}
.contractPlayer{left:33.8%;width:13.65%;top:11.5%;height:76.5%;background:linear-gradient(90deg,#f0edda,#f6f3e3 45%,#f2efdc)}

#ninjaSetup #ninjaName{font-size:24px;line-height:1.4;width:calc(13ch + 34px);padding:14px 16px}

/* Compact village information with the action on the parchment below. */
#villageDetails{display:block;height:auto;min-height:0;overflow:visible;padding:18px 20px 14px}
#villageDescription{display:flex;gap:18px;overflow:visible}
#ninjaSetup>.signatureActions{display:flex;align-items:center;justify-content:center;margin:14px 0 0;padding:0}
#ninjaSetup #saveSignature{margin:0;max-width:100%}
#ninjaRegistration #ninjaSetup{padding-bottom:20px}
#villageChoice{margin-bottom:0}
#ninjaGate #registrationToggle.registrationInvite{animation:registrationInvite 2s ease-in-out infinite}
#registrationToggle.registrationInvite::after{content:'';position:absolute;inset:-7px;border:2px solid #e5ca82;border-radius:inherit;pointer-events:none;animation:registrationRing 2s ease-out infinite}
@keyframes registrationInvite{0%,100%{translate:0 0;filter:brightness(1)}50%{translate:0 -4px;filter:brightness(1.18)}}
@keyframes registrationRing{0%{opacity:0;scale:.98}30%{opacity:.65}100%{opacity:0;scale:1.045}}
@media(max-width:600px){#villageDetails{padding:14px 12px 10px}#villageDescription{gap:10px}}
@media(prefers-reduced-motion:reduce){#ninjaGate #registrationToggle.registrationInvite{animation:none;box-shadow:0 0 0 3px #e5ca8277}#registrationToggle.registrationInvite::after{animation:none;opacity:.5}}

/* A shared circular clock for real rounds and the tutorial. */
.game:not(.is-review) .mapTop>.roundClock{width:96px;height:96px;flex:0 0 96px;margin:0}
.mapTop .roundClock #roundTimer{position:relative;display:grid;place-items:center;width:92px;height:92px;padding:0;gap:0;border:0;border-radius:50%;background:#1e3027;box-shadow:0 4px 16px #0005;font:700 39px/1 Inter,sans-serif;letter-spacing:0;color:#f4f0d8}
.timerRing{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}.timerRing circle{fill:none;stroke-width:7}.timerBase{stroke:#ffffff20}#timerFill{stroke:#b7d0a2;stroke-dasharray:100;stroke-dashoffset:0;stroke-linecap:round;transition:stroke-dashoffset .1s linear}#timerDigits{position:relative;z-index:1}
.mapTop .roundClock #roundTimer.urgent{background:#853e25;color:#fff0d9;animation:timerFlash .8s ease-in-out infinite}.mapTop .roundClock #roundTimer.urgent #timerFill{stroke:#ff985a}.mapTop .roundClock #roundTimer.stopped,.mapTop .roundClock #roundTimer.expired{animation:none}
.game:not(.is-review) .mapTop{align-items:center;min-height:96px}
@media(max-width:600px){.game:not(.is-review) .mapTop>.roundClock{width:82px;height:82px;flex-basis:82px}.mapTop .roundClock #roundTimer{width:80px;height:80px;font-size:33px}.game:not(.is-review) .mapTop{min-height:82px}}
@media(prefers-reduced-motion:reduce){.mapTop .roundClock #roundTimer.urgent{animation:none}#timerFill{transition:none}}
@media(hover:hover){#lobby .scrollContract:not(.contractOpen):not(.contractSigned):not(.contractRolling) .contractRoller:hover{scale:1;translate:0 0;animation:none;transform:translate(-50%,calc(-50% - 96px)) scale(1.045)} }
@media(hover:hover) and (max-width:600px){#lobby .scrollContract:not(.contractOpen):not(.contractSigned):not(.contractRolling) .contractRoller:hover{transform:translate(-50%,calc(-50% - 71px)) scale(1.045)}}

/* Slider-only episode choice, clockwise ring depletion and a stronger final warning. */
.epfield:has(#ep[type=hidden]){cursor:default}.epfield:has(#ep[type=hidden]) #epDisplay{pointer-events:none}
.timerRing{transform:rotate(-90deg) scaleY(-1)}
.mapTop .roundClock #roundTimer.critical{background:#922d30;animation:timerFlash .35s ease-in-out infinite;color:#fff}
.mapTop .roundClock #roundTimer.critical #timerFill{stroke:#ff4b4b}
.roundActions.reviewPending{opacity:0;pointer-events:none}
.roundActions.reviewNextIn{animation:reviewNextIn .45s ease-out both}
@keyframes reviewNextIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.mapTop .roundClock #roundTimer.critical{animation:none}.roundActions.reviewNextIn{animation:none}}

/* Separate red keyframes prevent the older amber animation overriding the warning. */
.mapTop .roundClock #roundTimer{font-size:27px;font-variant-numeric:tabular-nums}
.mapTop .roundClock #roundTimer.critical{animation-name:timerRedFlash}
@keyframes timerRedFlash{0%,100%{background:#8b1c28;box-shadow:0 0 0 0 #ff334455}50%{background:#dc263a;box-shadow:0 0 18px 3px #ff334488}}
@media(max-width:600px){.mapTop .roundClock #roundTimer{font-size:24px}}
@media(prefers-reduced-motion:reduce){.mapTop .roundClock #roundTimer.critical{animation:none;background:#a61e2e}}

/* Give the clock ring breathing room around the time. */
.game:not(.is-review) .mapTop>.roundClock{width:116px;height:116px;flex-basis:116px;transform:translateY(-4px)}
.mapTop .roundClock #roundTimer{width:112px;height:112px;font-size:27px}
.game:not(.is-review) .mapTop{min-height:116px}
.game.is-review .reviewScore>span{font-size:clamp(12px,1.1vw,17px);font-weight:700;color:#b6c3ac}
.game.is-review .reviewEpisode>b{display:flex;align-items:center;gap:5px;white-space:nowrap;font-size:25px}
.game.is-review .reviewEpisode>b>small{font:700 12px/1.1 Inter,sans-serif;letter-spacing:.5px;margin:0}
.game.is-review #reviewIntro .episodeSource{display:inline-block;font:600 .46em/1 Inter,sans-serif;color:#a9bda0;text-decoration:none;vertical-align:middle;margin-left:3px}
.game.is-review #reviewIntro .episodeSource:hover{color:#eee8d6}
#chakraCanvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:120;contain:strict}
@media(max-width:600px){.game:not(.is-review) .mapTop>.roundClock{width:100px;height:100px;flex-basis:100px}.mapTop .roundClock #roundTimer{width:98px;height:98px;font-size:24px}.game:not(.is-review) .mapTop{min-height:100px}.game.is-review .reviewScore>span{font-size:12px}.game.is-review .reviewEpisode>b{font-size:21px}.game.is-review .reviewEpisode>b>small{font-size:9px}}

.game.is-review .reviewEpisode>b>small{color:inherit}

.game:not(.is-review) .mapTop{align-items:flex-end;margin-bottom:6px}.mapTop #mapExtras{margin-bottom:0}#ninjaSetup #villageChoice{margin-bottom:24px}#ninjaSetup label[for=signaturePad]{display:block;margin-top:20px}
#rankCelebration{padding:0;border:0;background:transparent;width:min(1000px,94vw);max-width:1000px;max-height:92dvh;overflow:auto;color:#34271f}#rankCelebration::backdrop{background:#06100cbb;backdrop-filter:blur(3px)}.promotionScroll{position:relative;margin:14px 0 14px 30px;padding:32px 36px 30px 54px;border:10px solid #aa2821;background:#f2e6c2;box-shadow:inset 0 0 0 3px #cbb776,0 18px 60px #0008;display:grid;grid-template-columns:42% 1fr;gap:30px;animation:promotionUnroll .55s ease-out}.promotionRoller{position:absolute;left:-40px;top:-24px;bottom:-24px;width:52px;border:5px solid #71251f;border-radius:22px;background:linear-gradient(#a72925 0 8%,#45774a 8% 92%,#a72925 92%);display:grid;place-items:center;font-size:42px;color:#173a23}.promotionArt{width:100%;height:100%;max-height:390px;min-height:260px;object-fit:cover;object-position:center;border:3px solid #443d2b}.promotionScroll section{display:flex;flex-direction:column;align-items:flex-start}.promotionScroll h1{font:700 clamp(32px,5vw,58px)/1.1 sans-serif;color:#b42b23;margin:8px 0 12px}.promotionScroll h2{font-size:25px;margin:0 0 16px;color:#443323}.promotionEyebrow{text-transform:uppercase;letter-spacing:.1em;font-size:12px;margin:0}.promotionMessage{font-size:19px;line-height:1.5;margin:0 0 30px}.promotionContinue{margin-top:auto;background:transparent;color:#ae2721;border:0;padding:12px 0;font-size:24px;font-weight:800}.promotionContinue:hover{color:#e04c24;transform:scale(1.03)}@keyframes promotionUnroll{from{opacity:0;transform:scaleX(.85)}to{opacity:1;transform:scaleX(1)}}@media(max-width:650px){.promotionScroll{grid-template-columns:1fr;padding:24px 20px 24px 32px;gap:20px}.promotionArt{height:210px;min-height:0;object-fit:contain;background:#dbd2b7}.promotionMessage{font-size:17px}}@media(prefers-reduced-motion:reduce){.promotionScroll{animation:none}}

#rankCelebration .promotionMessage{color:#443323}#rankCelebration .promotionEyebrow{color:#786349}
/* Registration: village picker and details share a row; signing ends on one action row. */
.villageSelection{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:18px;align-items:stretch}.villagePicker{min-width:0}#ninjaSetup #villageDetails{min-width:0;padding:16px;align-self:stretch}#ninjaSetup #villageDescription{display:block}#ninjaSetup #villageDescription>img{float:left;margin:0 12px 10px 0;width:40px;height:40px}#ninjaSetup #villageDetails h2{font-size:22px;line-height:1.2;overflow-wrap:anywhere}#ninjaSetup #villageDetails dl{gap:18px;flex-wrap:wrap}#ninjaSetup #villageDetails p{font-size:14px;line-height:1.5}#ninjaSetup #villageDetails strong{display:block;font-size:12px}#ninjaSetup .villageButtons{gap:5px;margin:8px 0 0}#ninjaGate #ninjaSetup .villageButtons button{padding:7px 3px;font-size:10px}#ninjaSetup .villageButtons img{height:22px;width:26px;margin-bottom:4px}
#ninjaSetup .signatureFooter{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:10px 16px;margin-top:12px}#ninjaGate #ninjaSetup .signatureFooter button{font-size:16px;padding:12px 20px;margin:0;width:auto}#ninjaSetup #resetSignature{justify-self:start}#ninjaSetup #saveSignature{justify-self:end}#ninjaSetup #signatureStatus{grid-column:1/-1;margin:0;min-height:20px}#ninjaRegistration #ninjaSetup{padding-bottom:16px}
/* One boundary marker, with both series endpoints on the same baseline. */
.seriesTimeline span:last-child{border-left:0}.timelineLabels .boundary{display:flex;gap:5px;align-items:center;line-height:20px}.timelineLabels .boundary b{font-weight:400;line-height:20px}.timelineTrack i{display:none}
.game.is-review .roundActions #submit:has(.nextRoundLabel){font-size:17px!important;gap:20px}.nextRoundLabel{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}.nextRoundLabel small{font:500 12px/1.4 Inter,Arial,sans-serif;letter-spacing:.03em}.nextRoundArrow{font:500 22px/1 Arial,sans-serif!important}
#rankCelebration .promotionContinue{align-self:flex-end;margin-top:auto;background:#284c3e;color:#f5edcf;border:2px solid #a79565;border-radius:8px;padding:12px 24px;font-size:21px}#rankCelebration .promotionContinue:hover{background:#355e4e;color:#fff4d4;transform:none}.testNinjaCard #testRankUp{margin-top:10px;background:#315647}
.promotionPreviewTools{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 16px;margin:0 0 14px 30px;border:1px solid #b69f68;border-radius:8px;background:#18352b;color:#f5edcf}.promotionPreviewTools label{font-size:12px;display:flex;align-items:center;gap:6px}.promotionPreviewTools select{max-width:190px;font:inherit;padding:8px;border:1px solid #a79565;border-radius:5px;background:#284c3e;color:#fff0d1}.promotionPreviewTools button{padding:8px 12px;background:#365d4b;color:#fff0d1;border:1px solid #a79565;border-radius:5px}.promotionPreviewTools output{margin-left:auto;font-size:12px}.promotionPreviewTools+.promotionScroll{animation:none}
@media(max-width:700px){.villageSelection{grid-template-columns:1fr}#ninjaSetup #villageDescription{display:flex}#ninjaSetup #villageDescription>img{float:none;margin:0;flex:none}#ninjaSetup .villageButtons{grid-template-columns:repeat(5,1fr)}#ninjaGate #ninjaSetup .signatureFooter button{font-size:13px;padding:11px 12px}.game.is-review .roundActions #submit:has(.nextRoundLabel){font-size:15px!important}.nextRoundLabel{gap:5px}.nextRoundLabel small{font-size:10px}.promotionPreviewTools{gap:8px}.promotionPreviewTools select{max-width:150px}.promotionPreviewTools output{margin-left:0}}
.game.is-review .roundActions #submit .nextRoundLabel{font-size:inherit}.nextRoundLabel small{text-transform:none}
#registrationRanks{border-top:1px solid #b4a27c;margin-top:12px;padding-top:10px;clear:both}#registrationRanks h3{font-size:13px;margin:0 0 8px;color:#63563e}.registrationRankGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:64px;gap:7px 5px}.registrationRankGrid figure{margin:0;text-align:center;min-width:0}.registrationRankGrid i{display:block;width:33px;height:33px;overflow:hidden;margin:0 auto 3px;border:1px solid #a49368;border-radius:4px;background:#ccc3a7}.registrationRankGrid img{display:block;width:100%;height:100%}.registrationRankGrid figcaption{font-size:9px;font-weight:600;line-height:1.2;color:#503d36}#ninjaSetup #villageDetails{padding-bottom:12px}
/* Stable celebration geometry, independent of portrait aspect ratio and message length. */
#rankCelebration .promotionScroll{height:490px;grid-template-columns:minmax(0,42%) minmax(0,1fr);align-items:stretch}#rankCelebration .promotionArtFrame{width:100%;height:100%;min-height:0;overflow:hidden;border:3px solid #443d2b;background:#dbd2b7}#rankCelebration .promotionArt{display:block;width:100%;height:100%;min-height:0;max-height:none;object-fit:cover;border:0}#rankCelebration .promotionScroll section{min-width:0;min-height:0}#rankCelebration .promotionScroll h1{font-size:46px;margin:8px 0 12px}#rankCelebration .promotionScroll h2{font-size:24px;min-height:58px;line-height:1.2;margin-bottom:10px}#rankCelebration .promotionMessage{font-size:17px;line-height:1.45;margin-bottom:15px;min-height:100px}#rankCelebration .promotionReward{margin:0 0 16px;color:#284c3e;line-height:1.4}#rankCelebration .promotionReward strong{display:block;font-size:19px}#rankCelebration .promotionReward small{display:block;font-size:11px;color:#786349}.rankRewardNote{font-size:13px;color:#d8c897}
@media(max-width:650px){#rankCelebration .promotionScroll{height:665px;grid-template-columns:1fr;grid-template-rows:210px minmax(0,1fr);gap:18px}#rankCelebration .promotionScroll h1{font-size:32px;margin:6px 0 10px}#rankCelebration .promotionScroll h2{font-size:22px;min-height:53px;margin-bottom:8px}#rankCelebration .promotionMessage{font-size:16px;min-height:74px;margin-bottom:10px}#rankCelebration .promotionReward{margin-bottom:12px}#rankCelebration .promotionContinue{font-size:18px;padding:11px 20px}.registrationRankGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
#rankCelebration .promotionScroll{height:580px}
@media(max-width:650px){#rankCelebration .promotionScroll{height:550px;grid-template-rows:160px minmax(0,1fr)}#rankCelebration .promotionArtFrame{width:128px;height:160px;justify-self:center}#rankCelebration .promotionScroll h1{font-size:28px;margin:5px 0 8px}#rankCelebration .promotionScroll h2{font-size:20px;min-height:48px;margin-bottom:6px}#rankCelebration .promotionEyebrow{font-size:10px;line-height:1.4}#rankCelebration .promotionMessage{font-size:14px;line-height:1.4;min-height:84px;margin-bottom:8px}#rankCelebration .promotionReward{margin-bottom:10px}#rankCelebration .promotionReward strong{font-size:17px}#rankCelebration .promotionReward small{font-size:10px}#rankCelebration .promotionContinue{font-size:16px;padding:8px 18px}}
.villageWelcome .promotionMessage{min-height:0!important}.villageWelcome h1{color:#315f50!important}
#jutsuLessonDialog{padding:0;border:0;background:transparent;width:min(1040px,94vw);max-width:1040px;max-height:92dvh;overflow:auto;color:#34271f}#jutsuLessonDialog::backdrop{background:#06100ccc;backdrop-filter:blur(5px)}.jutsuLessonWindow{box-sizing:border-box;margin:14px;padding:30px;border:9px solid #a52b25;background:#f5e9c8;box-shadow:inset 0 0 0 3px #cbb776,0 20px 65px #0009;animation:promotionUnroll .5s ease-out}.jutsuUnlocked{margin:0 0 18px;color:#a12d25;font:900 18px/1.2 Arial,sans-serif;letter-spacing:.11em}.elementChoices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0 0 22px}.elementChoices button{padding:10px 7px;border:1px solid #9b8658;border-radius:5px;background:#e5d7ae;color:#493b2a;font:700 12px/1.2 Arial,sans-serif}.elementChoices button[aria-pressed="true"]{background:#315f50;color:#fff6d9}.jutsuTechnique{display:grid;grid-template-columns:minmax(260px,42%) minmax(0,1fr);gap:28px;align-items:center}.jutsuScene{width:100%;height:auto;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;border:3px solid #443d2b;background:#18251f}.jutsuScene img{display:block;width:100%;height:100%;object-fit:cover}.jutsuInstructions h2{margin:0 0 10px;color:#315f50;font:800 clamp(25px,3vw,38px)/1.1 Arial,sans-serif}.jutsuInstructions p{margin:0 0 16px;font-size:17px}.gestureSequence{display:flex;align-items:center;gap:9px;margin:0 0 22px}.gestureCard{flex:1;min-width:0;aspect-ratio:1.25;border:1px solid #d6dbe5;border-radius:12px;background:#f7f9fc;box-shadow:inset 0 0 20px #dce4ef66;color:#3b0757;display:grid;place-items:center}.gestureCard svg{width:72%;height:72%}.gestureCard polyline{fill:none;stroke:currentColor;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}.gestureArrow{font:700 28px/1 Arial,sans-serif;color:#586181}.jutsuInstructions small{display:block;color:#76664d;font-size:13px;line-height:1.45}.jutsuChoosePrompt{min-height:250px;display:grid;place-items:center;color:#76664d;font-size:18px}.jutsuLessonContinue{display:block;margin:24px 0 0 auto;padding:12px 26px;border:2px solid #a79565;border-radius:7px;background:#315f50;color:#fff6d9;font-size:18px;font-weight:800}
@media(max-width:700px){.jutsuLessonWindow{margin:8px;padding:20px}.elementChoices{grid-template-columns:repeat(2,minmax(0,1fr))}.jutsuTechnique{grid-template-columns:1fr;gap:18px}.jutsuScene{height:210px}.gestureSequence{gap:5px}.gestureArrow{font-size:20px}.jutsuInstructions h2{font-size:24px}}
@media(prefers-reduced-motion:reduce){.jutsuLessonWindow{animation:none}}
.jutsuTechnique{align-items:start}.jutsuInstructions{transform:translateY(-22px)}
@media(max-width:700px){.jutsuInstructions{transform:none}}
.registrationIdentity{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center;margin:26px 0 12px}#ninjaSetup .registrationIdentity .ninjaNameField label{text-align:left}#ninjaSetup .registrationIdentity #ninjaName{margin-left:0;margin-right:0}#ninjaSetup #equipmentChoice{border:0;margin:0;padding:0;min-width:0}#equipmentChoice legend{font-size:18px;font-weight:600;color:#503d36;margin-bottom:8px}.equipmentOptions{display:flex;gap:12px}#ninjaGate #equipmentChoice button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:116px;min-height:112px;margin:0;padding:8px 12px;border:2px solid #b0a17b;border-radius:10px;background:#e2d8bb;color:#6b6452;font-size:14px;transition:background .25s,border-color .25s,box-shadow .25s}#equipmentChoice button img{width:66px;height:66px;filter:grayscale(1);transition:transform .45s ease,filter .3s}#ninjaGate #equipmentChoice button[aria-pressed=true]{border-color:#a96735;background:#ead7af;color:#3d4d42;box-shadow:inset 0 0 0 1px #e7b15e}#equipmentChoice button[aria-pressed=true] img,#equipmentChoice button:hover img,#equipmentChoice button:focus-visible img{filter:grayscale(0) drop-shadow(0 3px 5px #5aa8c16b)}#equipmentChoice button[data-equipment=kunai]:hover img{transform:rotate(-12deg) scale(1.1)}#equipmentChoice button[data-equipment=shuriken]:hover img{transform:rotate(90deg) scale(1.1)}#equipmentChoice p{font-size:11px;line-height:1.5;color:#78694e;margin:8px 0 0}.profileEquipment{padding:12px 0;display:flex;gap:10px;flex-wrap:wrap;align-items:center}.profileEquipment label{font-size:12px}.profileEquipment select{max-width:100%;border:1px solid #9f936d;border-radius:5px;background:#e9dfc1;color:#503d36;padding:8px;font:12px Inter,Arial,sans-serif}.profileEquipment p{width:100%;margin:0;font-size:11px}.profileEquipment p:empty{display:none}
body[data-equipment=kunai] #map,body[data-equipment=kunai] #map .world-poi{cursor:url('assets/equipment/kunai-cursor.svg') 16 30,crosshair}body[data-equipment=shuriken] #map,body[data-equipment=shuriken] #map .world-poi{cursor:url('assets/equipment/shuriken-cursor.svg') 16 16,crosshair}#unmappedChoices .locationShuriken{width:68px;height:68px;transform:translate(-50%,-50%)}.shurikenStar{animation:shurikenLand .4s ease-out;transform-origin:0 0}@keyframes shurikenLand{from{transform:rotate(-100deg) scale(1.2);opacity:.5}to{transform:rotate(0) scale(1);opacity:1}}.promotionPreviewTools select#promotionEquipment{max-width:100px}
@media(max-width:700px){.registrationIdentity{gap:18px}#ninjaGate #equipmentChoice button{width:92px;min-height:98px;padding:6px}#equipmentChoice button img{width:56px;height:56px}#equipmentChoice legend{font-size:16px}}@media(max-width:560px){.registrationIdentity{grid-template-columns:1fr;gap:18px}}@media(prefers-reduced-motion:reduce){#equipmentChoice button img{transition:none}#equipmentChoice button:hover img{transform:none}.shurikenStar{animation:none}}

/* Balanced registration headings and fuller village cards. */
#ninjaSetup .registrationIdentity .ninjaNameField{justify-self:center;width:100%;max-width:320px}
#ninjaSetup .registrationIdentity .ninjaNameField label,#equipmentChoice legend{display:block;width:100%;text-align:center;font:600 18px/1.4 Inter,Arial,sans-serif;color:#503d36;margin-bottom:8px}
#ninjaSetup .registrationIdentity #ninjaName{margin-left:auto;margin-right:auto}
#ninjaSetup #equipmentChoice{justify-self:center;width:max-content;max-width:100%}.equipmentOptions{justify-content:center}
#equipmentChoice button img{object-fit:contain}#equipmentChoice button[data-equipment=kunai] img{object-fit:cover;object-position:50% 50%;width:48px;height:76px}
#ninjaGate #ninjaSetup .villageButtons button{min-height:112px;padding:12px 4px;font-size:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;line-height:1.2}
#ninjaSetup .villageButtons img{width:44px;height:44px;margin:0}
#soundToggle{width:44px;height:44px;min-width:44px;padding:10px;display:grid;place-items:center;border-radius:50%}#soundToggle svg{width:24px;height:24px}
@media(max-width:700px){#ninjaGate #ninjaSetup .villageButtons button{min-height:96px;font-size:11px}#ninjaSetup .villageButtons img{width:36px;height:36px}#ninjaSetup .registrationIdentity .ninjaNameField label,#equipmentChoice legend{font-size:16px}}
/* Equipment is an exposed weapon choice, with no card or visible label. */
.registrationIdentity{grid-template-columns:minmax(180px,.7fr) minmax(0,1.3fr);gap:20px}
#ninjaSetup #equipmentChoice{width:100%}.equipmentOptions{gap:0;align-items:center}
#ninjaGate #equipmentChoice button,#ninjaGate #equipmentChoice button[aria-pressed=true],#ninjaGate #equipmentChoice button:hover{width:50%;height:310px;min-height:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
#equipmentChoice button img{width:264px;height:264px;max-width:110%;object-fit:contain;filter:grayscale(1) brightness(.8);transition:transform .45s ease,filter .3s}
#equipmentChoice button[data-equipment=kunai] img{width:192px;height:304px;max-width:100%;object-fit:cover}
#equipmentChoice button[aria-pressed=true] img{filter:drop-shadow(0 5px 9px #b88d3b80)}
#equipmentChoice button:hover img,#equipmentChoice button:focus-visible img{filter:sepia(.35) saturate(1.6) drop-shadow(0 5px 10px #5aa8c190)}
#equipmentChoice button[data-equipment=kunai]:hover img,#equipmentChoice button[data-equipment=kunai]:focus-visible img{transform:rotate(18deg) scale(1.1)}
#equipmentChoice button[data-equipment=shuriken]:hover img,#equipmentChoice button[data-equipment=shuriken]:focus-visible img{transform:rotate(90deg) scale(1.1)}
#ninjaGate #equipmentChoice button:focus-visible{outline:2px dashed #967f50;outline-offset:-4px}
/* Each village uses the same header, country, statistics and description slots. */
#ninjaSetup #villageDescription{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start}
#ninjaSetup #villageDescription>img{float:none;margin:0;width:40px;height:40px}
#villageDescription>div{display:grid;grid-template-rows:28px 36px 20px 44px 84px 40px;gap:6px;min-width:0}
#ninjaSetup #villageDetails h2{font-size:20px;margin:0;line-height:28px;white-space:nowrap}
#ninjaSetup #villageDetails .villageAlias,#ninjaSetup #villageDetails .villageLand{margin:0;line-height:18px;font-size:13px}
#ninjaSetup #villageDetails dl{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;align-items:start}
#ninjaSetup #villageDetails dl div{min-width:0}#ninjaSetup #villageDetails dt{font-size:11px;white-space:nowrap}#ninjaSetup #villageDetails dd{margin:3px 0 0;font-size:13px}
#ninjaSetup #villageDetails .villageNote{margin:0;font-size:13px;line-height:19px}
#ninjaSetup #villageDescription strong{margin:0;font-size:11px;line-height:16px}
/* Fired into one tip: the projected star rises above the exact selected point. */
#unmappedChoices .locationShuriken{width:82px;height:82px;transform:translate(-50%,-91%)}
.shurikenStar{transform-origin:0 0;animation:shurikenEmbed .28s ease-out}
@keyframes shurikenEmbed{from{transform:translate(18px,-65px) rotate(20deg);opacity:.2}70%{transform:translate(0,0) rotate(-3deg)}to{transform:translate(0,0) rotate(0)}}
/* Thin glazed clay plaques; impact fractures stay when the marker moves away. */
#unmappedChoices button{background:radial-gradient(ellipse at 25% 20%,#fbf2db66,transparent 70%),linear-gradient(125deg,#e8dec4,#d5c8a7);border-color:#b5a17c #978362 #8b7656 #c5b28d;border-radius:2px;box-shadow:inset 0 1px 1px #fff9,inset 0 -2px 2px #66523330,1px 3px 2px #493b2733}
#unmappedChoices button.damaged{background-color:#d9c9aa;box-shadow:inset 0 0 10px #68503544,1px 3px 2px #493b2733}
#unmappedChoices .tileCracks{z-index:2;overflow:hidden;opacity:.95;clip-path:inset(0);animation:tileFracture .22s ease-out}
.tileCracks .crackRim path{stroke:#fff0cc;stroke-width:1.6;opacity:.8}
.tileCracks .crackDepth path{stroke:#644d37;stroke-width:.85;opacity:.9}
.tileCracks .impactChip{fill:#4d3a2b;stroke:#b8a17b;stroke-width:1}.tileCracks .looseChip{fill:#e9dab5;stroke:#947956;stroke-width:.8}
@keyframes tileFracture{from{opacity:0;clip-path:circle(2% at 50% 50%)}to{opacity:.95;clip-path:circle(80% at 50% 50%)}}
.game.is-review .roundActions:has(.nextRoundLabel){width:fit-content;max-width:calc(100% - 39px)}
.game.is-review .roundActions #submit:has(.nextRoundLabel){width:max-content;max-width:100%;flex:none;justify-content:center;padding:14px 20px;gap:0}
.nextRoundLabel{flex-wrap:nowrap;gap:12px}.nextRoundLabel small{white-space:nowrap}
@media(max-width:700px){.registrationIdentity{grid-template-columns:1fr;gap:24px}#equipmentChoice button img{width:264px;height:264px}#ninjaGate #equipmentChoice button{height:310px}#ninjaSetup #villageDescription{grid-template-columns:36px minmax(0,1fr)}#villageDescription>div{grid-template-rows:28px 36px 20px 44px 84px 40px}}
@media(max-width:400px){#equipmentChoice button img{width:160px;height:190px}#equipmentChoice button[data-equipment=kunai] img{width:140px;height:260px}#ninjaGate #equipmentChoice button{height:270px}.game.is-review .roundActions:has(.nextRoundLabel){max-width:100%}.game.is-review .roundActions #submit:has(.nextRoundLabel){padding:12px}.nextRoundLabel{gap:8px}.nextRoundLabel small{font-size:9px}}
@media(prefers-reduced-motion:reduce){.shurikenStar,#unmappedChoices .tileCracks{animation:none}#equipmentChoice button:hover img,#equipmentChoice button:focus-visible img{transform:none}}
#ninjaSetup #villageDescription>p{grid-column:1/-1}
#villageDescription>div{grid-template-rows:28px 20px 20px 44px 76px 36px;gap:4px}
@media(max-width:700px){#villageDescription>div{grid-template-rows:28px 20px 20px 44px 76px 36px}}
@media(max-width:400px){#ninjaGate #equipmentChoice button,#ninjaGate #equipmentChoice button[aria-pressed=true]{height:270px}}
/* A readable village dossier: identity, two facts, then the description. */
#ninjaSetup #villageDescription{display:block;position:relative}
#ninjaSetup #villageDescription>img{position:absolute;left:0;top:4px;width:38px;height:38px;margin:0}
#villageDescription>div{display:grid;grid-template-rows:30px 20px 20px 64px 104px 42px;gap:7px}
#ninjaSetup #villageDetails h2{font:700 22px/30px Inter,Arial,sans-serif;color:#302e25;letter-spacing:-.4px;padding-left:50px}
#ninjaSetup #villageDetails .villageAlias{font-size:13px;line-height:20px;color:#574d3c;padding-left:50px}
#ninjaSetup #villageDetails .villageLand{font-size:11px;line-height:20px;letter-spacing:.06em;text-transform:uppercase;color:#7c694b;padding-left:50px}
#ninjaSetup #villageDetails dl{grid-template-columns:1fr 1fr;gap:12px;padding:12px 10px;margin:4px 0 0;border-top:1px solid #b6a37d;border-bottom:1px solid #b6a37d;background:#f5eccb66}
#ninjaSetup #villageDetails dt{font:500 10px/15px Inter,Arial,sans-serif;text-transform:uppercase;letter-spacing:.035em;color:#796b50}
#ninjaSetup #villageDetails dd{font:700 14px/20px Inter,Arial,sans-serif;color:#3d4639;margin:1px 0 0}
#ninjaSetup #villageDetails .villageNote{font:400 14px/23px Inter,Arial,sans-serif;color:#4d4537;margin:0;padding-top:9px}
#ninjaSetup #villageDescription strong{display:flex;align-items:center;font:600 11px/17px Inter,Arial,sans-serif;color:#71503a;border-left:3px solid #aa794b;padding:0 0 0 9px;margin-top:2px;background:#b4975720}
#registrationRanks{margin-top:15px;padding-top:13px}#registrationRanks h3{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#655a42}
#equipmentChoice button[data-equipment=kunai] img{object-fit:contain;object-position:center}
@media(max-width:700px){#villageDescription>div{grid-template-rows:30px 20px 20px 64px 104px 42px}}
/* Consistent registration geometry before and after choosing the first nation. */
.registrationIdentity{align-items:start}
#ninjaSetup .registrationIdentity .ninjaNameField{align-self:start;padding-top:0}
#ninjaSetup .registrationIdentity .ninjaNameField label,#equipmentChoice legend{margin:0 0 12px;font:600 18px/26px Inter,Arial,sans-serif;min-height:26px}
#ninjaGate #equipmentChoice button,#ninjaGate #equipmentChoice button[aria-pressed=true]{height:215px}
#equipmentChoice button img{width:176px;height:176px}
#equipmentChoice button[data-equipment=kunai] img{width:128px;height:203px}
#ninjaSetup #villageDetails{display:grid;grid-template-rows:315px 235px;gap:15px;align-content:start;min-height:593px}
#ninjaSetup #villageDescription{height:315px;min-height:315px!important}
#ninjaSetup #registrationRanks{margin:0;padding-top:13px;min-height:235px}
#ninjaSetup #registrationRanks:empty{border-top-color:transparent}
body[data-equipment] #map,body[data-equipment] #map .world-poi{cursor:crosshair}
#unmappedChoices .locationShuriken{width:72px;height:72px;transform:translate(-50%,-91%)}
@media(max-width:700px){#equipmentChoice button img{width:176px;height:176px}#ninjaGate #equipmentChoice button,#ninjaGate #equipmentChoice button[aria-pressed=true]{height:215px}#ninjaSetup .registrationIdentity .ninjaNameField label,#equipmentChoice legend{font-size:16px}}
@media(max-width:400px){#equipmentChoice button img{width:107px;height:127px}#equipmentChoice button[data-equipment=kunai] img{width:94px;height:174px}#ninjaGate #equipmentChoice button,#ninjaGate #equipmentChoice button[aria-pressed=true]{height:180px}}
#ninjaSetup .registrationIdentity .ninjaNameField{margin:0}

#ninjaGate #equipmentChoice button,#ninjaGate #equipmentChoice button:hover,#ninjaGate #equipmentChoice button[aria-pressed=true]{overflow:hidden;contain:paint;flex:0 0 50%;transform:none;transition:none}#equipmentChoice button img{pointer-events:none;transform-origin:center}
#ninjaGate #equipmentChoice button:hover,#ninjaGate #equipmentChoice button:focus-visible{height:215px}
@media(max-width:400px){#ninjaGate #equipmentChoice button:hover,#ninjaGate #equipmentChoice button:focus-visible{height:180px}}
.equipmentOptions{position:relative}.equipmentOptions::after{content:'';position:absolute;left:50%;top:12%;height:76%;width:1px;background:#9b896480;transform:rotate(19deg);pointer-events:none}
#equipmentChoice button[data-equipment=kunai] img{width:148px;height:226px;transform:rotate(180deg)}
#equipmentChoice button[data-equipment=kunai]:hover img,#equipmentChoice button[data-equipment=kunai]:focus-visible img{transform:rotate(198deg) scale(1.06)}
#equipmentChoice button[data-equipment=shuriken] img{width:148px;height:148px}
#ninjaGate #equipmentChoice button,#ninjaGate #equipmentChoice button:hover,#ninjaGate #equipmentChoice button[aria-pressed=true]{height:245px;position:relative}
#equipmentChoice button[aria-pressed=true]::after{content:'✓';position:absolute;bottom:3px;left:calc(50% - 12px);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#355c46;color:#fff1c9;font:700 16px Arial}
#equipmentChoice button[aria-pressed=true] img{filter:drop-shadow(0 0 11px #d9ad46cc)}#equipmentChoice button[aria-pressed=false] img{opacity:.65}
@media(max-width:400px){#equipmentChoice button[data-equipment=kunai] img{width:110px;height:195px}#equipmentChoice button[data-equipment=shuriken] img{width:96px;height:96px}#ninjaGate #equipmentChoice button,#ninjaGate #equipmentChoice button:hover,#ninjaGate #equipmentChoice button[aria-pressed=true]{height:220px}}

/* Keep the contract name centered; tools share the village picker column. */
#ninjaSetup .registrationIdentity{display:block;margin:0 auto 24px;max-width:340px}
#ninjaSetup .registrationIdentity .ninjaNameField{width:100%;text-align:center}
#ninjaSetup .villageButtons button{min-height:82px;padding:4px}
#ninjaSetup .villagePicker #equipmentChoice{margin:14px 0 0;padding:0;border:0;min-width:0}
#ninjaSetup #equipmentChoice legend{float:none;width:100%;text-align:center;margin:0 0 4px;font-size:18px;line-height:26px}
#ninjaSetup #equipmentChoice .equipmentOptions button,#ninjaSetup #equipmentChoice .equipmentOptions button:hover,#ninjaSetup #equipmentChoice .equipmentOptions button:focus-visible,#ninjaSetup #equipmentChoice .equipmentOptions button[aria-pressed="true"]{height:142px;min-height:142px;padding:5px;transform:none}
#ninjaSetup #equipmentChoice button[data-equipment="kunai"] img{width:102px;height:131px;object-fit:contain}
#ninjaSetup #equipmentChoice button[data-equipment="shuriken"] img{width:103px;height:103px;object-fit:contain}
#ninjaSetup #equipmentChoice .equipmentOptions button[aria-pressed="true"]::after{bottom:0;width:18px;height:18px;font-size:12px;line-height:18px}
@media(max-width:600px){#ninjaSetup .villageButtons button{min-height:76px;padding:3px 1px}}
#ninjaSetup .villageButtons button,#ninjaSetup .villageButtons button:hover,#ninjaSetup .villageButtons button[aria-pressed="true"]{height:82px;min-height:82px}

#ninjaSetup #registrationRanks h3{margin-bottom:20px}

#ninjaSetup #registrationRanks .registrationRankGrid{padding-top:16px;grid-auto-rows:64px;row-gap:11px}
#unmappedChoices button,#unmappedChoices button:hover,#unmappedChoices button:active,#unmappedChoices button.chosen{transform:none;translate:none;transition:background-color .15s,border-color .15s}
#unmappedChoices .tileCracks{display:block;inset:0;transform:none;translate:none;animation:tileFracture .22s ease-out both;vertical-align:top}

.timelineTrack,.timelineLabels{--series-split:calc(30.5285118% + 4.0890125px)}
.timelineTrack i{left:var(--series-split);top:-4px;height:16px;z-index:2;width:1px;background:#b8c1ae;transform:translateX(-.5px)}
.timelineLabels .boundary{left:var(--series-split);display:grid;grid-template-columns:28px 1px 28px;gap:7px;align-items:center;transform:translateX(-50%)}
.timelineLabels .boundary span:first-child{text-align:right}.timelineLabels .boundary span:last-child{text-align:left}.timelineLabels .boundary b{font-size:0;width:1px;height:12px;background:#b8c1ae}
.timelineTrack i{display:block;top:-4px;height:34px;opacity:.7}

/* Shared rolled-paper construction, with each established colour palette retained. */
#lobby .contractRoller,#ninjaGate #registrationToggle,#unmappedPanel .unmappedRoller,.mapTop #mapExtras,#contract #lobbyHelp{--shell:#507267;--shell-end:#ba6e72;--shell-gold:#d4ba76}
#unmappedPanel .unmappedRoller,.mapTop #mapExtras{--shell:#517367;--shell-end:#b9666b}
#contract #lobbyHelp{--shell:#e78b3d;--shell-end:#a95629;--shell-gold:#e7c580}
#lobby .contractRoller,#ninjaGate #registrationToggle,#unmappedPanel .unmappedRoller,.mapTop #mapExtras,#contract #lobbyHelp{border:1px solid #514534;background:url('assets/scroll-shell-v105.svg') center/100% 100% no-repeat,linear-gradient(180deg,#fff2,transparent 35%,#0005),linear-gradient(90deg,var(--shell-end) 0 10%,var(--shell-gold) 10% 12%,var(--shell) 12% 88%,var(--shell-gold) 88% 90%,var(--shell-end) 90%);border-radius:18px/45%;box-shadow:inset 0 2px 2px #fff2,inset 0 -3px 4px #0005,3px 8px 16px #0005}
#lobby>.rankScrolls>.ranking::before{border:1px solid #514534;background:url('assets/scroll-shell-v105.svg') center/100% 100% no-repeat,linear-gradient(180deg,#fff2,transparent 35%,#0005),linear-gradient(90deg,var(--roller-end) 0 10%,var(--roller-gold) 10% 12%,var(--roller) 12% 88%,var(--roller-gold) 88% 90%,var(--roller-end) 90%);border-radius:18px/45%;box-shadow:inset 0 2px 2px #fff2,inset 0 -3px 4px #0005}
.promotionRoller{background:url('assets/scroll-shell-vertical-v105.svg') center/100% 100% no-repeat,linear-gradient(90deg,#0005,#fff1 35%,transparent 60%,#0006),linear-gradient(#a72925 0 10%,#d4ba76 10% 12%,#45774a 12% 88%,#d4ba76 88% 90%,#a72925 90%);border:1px solid #3f3026;border-radius:45%/18px;box-shadow:3px 6px 10px #0005}
#ninjaGate #registrationToggle{--shell:#4b7062;--shell-end:#b66b72;--shell-gold:#d4ba76}

/* The supplied illustration itself: only the coloured body panels are recoloured. */
#lobby .contractRoller,#ninjaGate #registrationToggle,#unmappedPanel .unmappedRoller,.mapTop #mapExtras,#contract #lobbyHelp{background:var(--scroll-art,url('assets/scroll-green-v137.svg')) center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none;filter:drop-shadow(3px 7px 8px #0006)}
#contract #lobbyHelp{--scroll-art:url('assets/scroll-orange-v137.svg')}
#lobby>.rankScrolls>.ranking::before{background:var(--scroll-art,url('assets/scroll-red-v137.svg')) center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none;filter:drop-shadow(3px 5px 5px #0005)}
#lobby #leaderboard{--scroll-art:url('assets/scroll-blue-v137.svg')}
#lobby #nationRanking{--scroll-art:url('assets/scroll-purple-v137.svg')}
.promotionRoller{background:url('assets/scroll-vertical-v117.svg') center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none;filter:drop-shadow(3px 5px 5px #0006)}

/* Paper exits inside the illustrated cap shoulders, with matching side bands. */
#lobby>.rankScrolls>.ranking{--paper-inset:3.8%;--paper-band:9.2%;border-radius:0}
#lobby>.rankScrolls .rankScrollContent{width:92.4%;margin-left:3.8%;margin-right:3.8%;padding-left:calc(9.2% + 12px);padding-right:calc(9.2% + 12px);background:linear-gradient(transparent 0 var(--menu-scroll-height),#f0e9d4 var(--menu-scroll-height) 100%)}
#lobby>.rankScrolls>.ranking::after{left:3.8%;right:3.8%;top:calc(var(--menu-scroll-height) * .76);bottom:0;border:0;background:linear-gradient(90deg,var(--roller-end) 0 9.2%,var(--roller-gold) 9.2% 10%,transparent 10% 90%,var(--roller-gold) 90% 90.8%,var(--roller-end) 90.8% 100%);background-size:100% 100%;background-repeat:no-repeat}
#lobby>.rankScrolls .rankReel{left:3.8%;right:3.8%}
#ninjaRegistration #ninjaSetup{margin-left:3.8%;margin-right:3.8%;padding-left:calc(9.2% + 16px);padding-right:calc(9.2% + 16px);overflow:hidden}
#ninjaSetup::before,#ninjaSetup::after{width:9.95%;background:linear-gradient(90deg,#b66b72 0 92%,#d4ba76 92% 100%)}
.contractPaperViewport{clip-path:inset(3.8% 0 3.8% 0)}
.contractPaperViewport .contractPaper{background-image:linear-gradient(180deg,#ba6e72 0 12%,#d4ba76 12% 13%,transparent 13% 87%,#d4ba76 87% 88%,#ba6e72 88% 100%),url('assets/contract-hd-v76.png');background-size:100% 100%,121.7009% 111.2676%;background-position:center,100% 20.8333%}

#lobby #leaderboard{--scroll-edge:url('assets/scroll-edge-blue-v114.svg')}
#lobby #nationRanking{--scroll-edge:url('assets/scroll-edge-purple-v114.svg')}
#lobby>.rankScrolls>.ranking::after{background:var(--scroll-edge,url('assets/scroll-edge-red-v114.svg')) center/100% 100% no-repeat;mask-image:linear-gradient(90deg,#000 0 11%,transparent 11% 89%,#000 89% 100%)}
/* The coloured shoulders continue outside the same frog-trimmed paper as Play Game. */
#lobby>.rankScrolls>.ranking::after{background-image:url('assets/scroll-side.svg'),url('assets/scroll-side.svg'),var(--scroll-edge,url('assets/scroll-edge-red-v114.svg'));background-position:10% top,90% top,center;background-size:16px 137px,16px 137px,100% 100%;background-repeat:repeat-y,repeat-y,no-repeat;mask-image:linear-gradient(90deg,#000 0 16%,transparent 16% 84%,#000 84% 100%)}
#lobby>.rankScrolls .rankScrollContent{padding-left:calc(9.2% + 24px);padding-right:calc(9.2% + 24px)}
#ninjaSetup::before,#ninjaSetup::after{width:calc(9.95% + 16px);background-image:url('assets/scroll-side.svg'),linear-gradient(90deg,#b66b72 0 calc(100% - 18px),#d4ba76 calc(100% - 18px) calc(100% - 16px),transparent calc(100% - 16px));background-position:right top,center;background-size:16px 137px,100% 100%;background-repeat:repeat-y,no-repeat}
.contractPaperViewport{top:calc(50% - var(--paper-h) * .462);height:calc(var(--paper-h) * .924);clip-path:none}
.contractPaperViewport .contractPaper{background-image:url('assets/contract-hd-v76.png');background-size:121.7009% 111.2676%;background-position:100% 20.8333%}
/* The contract roller already includes its cap allowance; paper matches its body height. */
.contractPaperViewport{top:calc(50% - var(--paper-h)/2);height:var(--paper-h)}
.contractPaperViewport .contractPaper{border-top:calc(var(--paper-h) * .098) solid #ba6e72;border-bottom:calc(var(--paper-h) * .098) solid #ba6e72;background-origin:padding-box;background-clip:padding-box;box-shadow:inset 0 2px #d4ba76,inset 0 -2px #d4ba76}
.contractPaperViewport .contractPaper{border-top-color:#b55460;border-bottom-color:#a64a56}
/* One paper mouth shared by closed caps and the extended sheet. */
#lobby>.rankScrolls>.ranking{--paper-inset:3.45%}
#lobby>.rankScrolls .rankScrollContent{width:93.1%;margin-left:3.45%;margin-right:3.45%;padding-left:calc(11.6% + 18px);padding-right:calc(11.6% + 18px)}
#lobby>.rankScrolls>.ranking::after{left:3.45%;right:3.45%;background-position:11.6% top,88.4% top,center;mask-image:linear-gradient(90deg,#000 0 16%,transparent 16% 84%,#000 84% 100%)}
#lobby>.rankScrolls .rankReel{left:3.45%;right:3.45%}
#ninjaRegistration #ninjaSetup{margin-left:3.45%;margin-right:3.45%}
/* Keep the unmapped sheet inside the illustrated cylinder, including while opening. */
#unmappedPanel{padding:0 0 14px;border:0;background:transparent;box-shadow:none;isolation:isolate;border-radius:0}
#unmappedPanel::before{content:'';position:absolute;z-index:-1;left:3.45%;right:3.45%;top:30px;bottom:0;background:linear-gradient(90deg,#b55460 0 9.4%,#d4ba76 9.4% 11.6%,#f3efdc 11.6% 88.4%,#d4ba76 88.4% 90.6%,#b55460 90.6% 100%);border-bottom:2px solid #a49368}
#unmappedPanel .unmappedRoller{width:100%;margin:0 0 8px;flex-shrink:0}
#unmappedPanel #unmappedChoices{margin:0 4%;padding-left:9%;padding-right:9%}
#unmappedPanel #closeUnmapped{right:12%;z-index:3}
/* Clip the contract sheet to the mouth; fixed bands occupy the same body fraction. */
.contractPaperViewport{top:calc(50% - var(--paper-h) * .4655);height:calc(var(--paper-h) * .931);overflow:hidden}
.contractPaperViewport .contractPaper{border-top-width:calc(var(--paper-h) * .087);border-bottom-width:calc(var(--paper-h) * .087)}
/* Original paper interiors within the current illustrated shell dimensions. */
#lobby>.rankScrolls .rankScrollContent{padding-left:25px;padding-right:25px}
#lobby>.rankScrolls>.ranking::after{background-image:url('assets/scroll-side.svg'),url('assets/scroll-side.svg');background-position:left top,right top;background-size:16px 137px,16px 137px;background-repeat:repeat-y;mask-image:none;border-bottom:2px solid #a68d65}
#ninjaRegistration #ninjaSetup{padding-left:40px;padding-right:40px}
#ninjaSetup::before,#ninjaSetup::after{width:18px;background:#b5a27d url('assets/scroll-side.svg') repeat-y center/18px auto}
.contractPaperViewport .contractPaper{border:0;background-image:url('assets/contract-hd-v76.png');background-size:121.7009% 111.2676%;background-position:100% 20.8333%;background-origin:padding-box;background-clip:padding-box;box-shadow:none}
#unmappedPanel::before{background:#f3efdc url('assets/scroll-side.svg') repeat-y left top/12px 100px}
#unmappedPanel::after{content:'';position:absolute;z-index:-1;right:3.45%;top:30px;bottom:0;width:12px;background:url('assets/scroll-side.svg') repeat-y right top/12px 100px;transform:scaleX(-1)}
#unmappedPanel #unmappedChoices{margin:0 4%;padding-left:6px;padding-right:6px}
@media(max-width:600px){#ninjaRegistration #ninjaSetup{padding-left:24px;padding-right:24px}#lobby>.rankScrolls .rankScrollContent{padding-left:25px;padding-right:25px}}

/* Original Play Game artwork supplies every paper border. Shell dimensions stay pre-expansion. */
#lobby>.rankScrolls>.ranking::after{background-image:url('assets/contract-band-vertical-v112.svg'),url('assets/contract-band-vertical-v112.svg');background-size:18px 229.5px,18px 229.5px;background-position:left top,right top;background-repeat:repeat-y}
#ninjaSetup::before,#ninjaSetup::after{background:#c3af88 url('assets/contract-band-vertical-v112.svg') repeat-y center/18px 229.5px}
.contractPaperViewport .contractPaper{background-image:url('assets/contract-hd-v76.png');background-repeat:no-repeat;background-size:121.7009% 111.2676%;background-position:100% 20.8333%;border:0}
/* Paper begins at the coloured cylinder shoulder; the original band meets its gold separator. */
.contractPaperViewport{top:calc(50% - var(--paper-h) * .4655);height:calc(var(--paper-h) * .931);overflow:hidden}
#unmappedPanel::before{background-image:url('assets/contract-band-vertical-v112.svg');background-size:12px 153px}
#unmappedPanel::after{background-image:url('assets/contract-band-vertical-v112.svg');background-size:12px 153px}
/* Include the roller's 24px cap allowance when matching its actual coloured body. */
.contractPaperViewport{height:calc((var(--paper-h) + 24px) * .931);top:calc(50% - (var(--paper-h) + 24px) * .4655)}
/* One casing mouth: paper is clipped throughout the unrolling animation. */
#lobby>.rankScrolls>.ranking{--trim-grow:18px;overflow:hidden;overflow:clip;border-radius:0;box-shadow:none}
#lobby>.rankScrolls>.ranking::before{left:0;right:0;width:100%;top:0}
#lobby>.rankScrolls>.ranking::after{left:3.8%;right:3.8%;top:calc(var(--menu-scroll-height)*.5);bottom:0;background-image:url('assets/contract-band-vertical-v114.svg'),url('assets/contract-band-vertical-v114.svg');background-size:9% auto,9% auto;background-position:left top,right top;background-repeat:repeat-y;border:0;z-index:2}
#lobby>.rankScrolls .rankScrollContent{width:93.1%;margin-left:3.45%;margin-right:3.45%;position:relative;z-index:1}
#lobby>.rankScrolls .rankReel{left:3.8%;right:3.8%;bottom:0}
#lobby>.rankScrolls{gap:clamp(40px,4vw,64px)}
#ninjaRegistration #ninjaSetup{overflow:hidden;margin-left:3.8%;margin-right:3.8%}
#ninjaSetup::before,#ninjaSetup::after{width:8.3%;background:#c3af88 url('assets/contract-band-vertical-v114.svg') repeat-y center/100% auto}
#ninjaSetup::before{left:0}#ninjaSetup::after{right:0}
.contractPaperViewport{height:calc((var(--paper-h) + 24px)*.924);top:calc(50% - (var(--paper-h) + 24px)*.462)}
.contractPaperViewport .contractPaper{background-image:url('assets/contract-paper-v117.svg');background-size:100% 100%;background-position:center;background-repeat:no-repeat}
.contractPaperViewport .contractPaper::before,.contractPaperViewport .contractPaper::after{display:none}
#unmappedPanel::before,#unmappedPanel::after{background-image:url('assets/contract-band-vertical-v114.svg')}
.promotionRoller{background-image:url('assets/scroll-vertical-v117.svg')}
/* Grow registration decoration around its existing content width, never across the fields. */
#ninjaRegistration{--registration-padding:80px;--registration-shell:calc((92.4% - var(--registration-padding)) / .758);--registration-sheet:calc((92.4% - var(--registration-padding)) * .924 / .758)}
#ninjaGate .registrationOpen #registrationToggle{width:var(--registration-shell);max-width:none;margin-left:calc((100% - var(--registration-shell)) / 2);margin-right:calc((100% - var(--registration-shell)) / 2)}
#ninjaRegistration #ninjaSetup{width:var(--registration-sheet);max-width:none;margin-left:calc((100% - var(--registration-sheet)) / 2);margin-right:calc((100% - var(--registration-sheet)) / 2);padding-left:calc((92.4% - var(--registration-padding)) * .083 / .758);padding-right:calc((92.4% - var(--registration-padding)) * .083 / .758)}
#ninjaSetup::before,#ninjaSetup::after{width:8.98%}
@media(max-width:600px){#ninjaRegistration{--registration-padding:48px}}
/* The map sheet shares the casing shoulders; its motif stays inside the red end width. */
#unmappedPanel::before{left:3.8%;right:3.8%;background-size:8.98% auto}
#unmappedPanel::after{right:3.8%;width:8.3%;background-size:100% auto}
#unmappedPanel #unmappedChoices{margin-left:12.1%;margin-right:12.1%;padding-left:6px;padding-right:6px}
/* Equal viewport gutters, longer casings, and a clear margin inside the frog trim. */
#lobby>.rankScrolls{--scroll-gap:clamp(16px,2vw,48px);width:calc(100vw - var(--scroll-gap)*2);max-width:none;gap:var(--scroll-gap);grid-template-columns:repeat(3,minmax(0,1fr))}
#lobby>.rankScrolls>.ranking{container-type:inline-size}
#lobby>.rankScrolls .rankScrollContent{width:92.4%;margin-left:3.8%;margin-right:3.8%;padding-left:calc(8.3% + 24px);padding-right:calc(8.3% + 24px)}
#lobby>.rankScrolls>.ranking::after{background-size:8.316cqw 106.029cqw,8.316cqw 106.029cqw}
#lobby>.rankScrolls .scrollToggle{left:14%;right:14%;width:72%;padding-left:0;padding-right:0;font-size:clamp(14px,1.6vw,23px)!important}
#ninjaRegistration{width:calc(100vw - 120px);max-width:1200px;--registration-padding:128px}
#ninjaRegistration #ninjaSetup{container-type:inline-size;padding-left:calc((92.4% - var(--registration-padding)) * .083 / .758 + 24px);padding-right:calc((92.4% - var(--registration-padding)) * .083 / .758 + 24px)}
#ninjaSetup::before,#ninjaSetup::after{background-size:100% 114.495cqw}
#unmappedPanel{container-type:inline-size}
#unmappedPanel::before{background-size:8.3cqw 105.825cqw}
#unmappedPanel::after{background-size:100% 105.825cqw}
@media(max-width:1000px){#lobby>.rankScrolls{grid-template-columns:1fr;width:min(620px,calc(100vw - 32px));gap:24px}#lobby>.rankScrolls .scrollToggle{font-size:clamp(16px,3.2vw,23px)!important}}
@media(max-width:600px){#ninjaRegistration{width:calc(100vw - 48px);--registration-padding:80px}#ninjaRegistration #ninjaSetup{padding-left:calc((92.4% - var(--registration-padding)) * .083 / .758 + 16px);padding-right:calc((92.4% - var(--registration-padding)) * .083 / .758 + 16px)}#lobby>.rankScrolls .rankScrollContent{padding-left:calc(8.3% + 16px);padding-right:calc(8.3% + 16px)}}
/* The trim belongs to the moving paper, not the stationary shell. */
#lobby>.rankScrolls>.ranking::after{display:none}
#lobby>.rankScrolls>.ranking:not(.scrollOpen) .rankScrollContent{visibility:visible}
#lobby>.rankScrolls .rankScrollContent::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:url('assets/contract-band-vertical-v117.svg'),url('assets/contract-band-vertical-v117.svg');background-position:left top,right top;background-size:8.316cqw 110.1cqw,8.316cqw 110.1cqw;background-repeat:repeat-y;z-index:2}
#lobby>.rankScrolls .rankReel{opacity:1;transition:none}
/* Fixed centre: width changes extend the registration shell equally in both directions. */
#ninjaGate #registrationToggle,#ninjaGate .registrationOpen #registrationToggle{left:50%;transform:translateX(-50%);margin-left:0;margin-right:0;transition:width .65s cubic-bezier(.35,0,.3,1)}
#registrationToggle.registrationInvite::after{display:none}
@keyframes registrationInvite{0%,100%{translate:0 0;filter:brightness(1) drop-shadow(0 0 3px #e5ca8244)}50%{translate:0 -4px;filter:brightness(1.13) drop-shadow(0 0 13px #e5ca82aa)}}
#ninjaSetup::before,#ninjaSetup::after{background-image:url('assets/contract-band-small-v118.svg');background-size:100% 79.26cqw}
#ninjaSetup #signatureStatus{grid-row:1;grid-column:1/-1;text-align:center;margin:0 0 4px}
#ninjaSetup #resetSignature,#ninjaSetup #saveSignature{grid-row:2}
@keyframes registrationRewind{from{clip-path:inset(0)}to{clip-path:inset(0 0 100% 0)}}
#ninjaRegistration.registrationClosing #ninjaSetup{animation:registrationRewind .65s cubic-bezier(.35,0,.3,1) both}
@media(prefers-reduced-motion:reduce){#ninjaGate #registrationToggle.registrationInvite{box-shadow:none;filter:drop-shadow(0 0 8px #e5ca82aa)}#ninjaGate #registrationToggle{transition:none}}
/* A fixed mouth hides the moving paper even through transparent casing corners. */
#lobby>.rankScrolls .rankPaperViewport{position:absolute;inset:var(--menu-scroll-height) 0 0;overflow:hidden;isolation:isolate}
#lobby>.rankScrolls .rankPaperViewport .rankScrollContent{top:calc(0px - var(--menu-scroll-height))}
#lobby>.rankScrolls .rankPaperViewport .rankReel{bottom:0}
/* Composite only the illustrated shell during enlargement, with no per-frame form layout. */
#ninjaGate #registrationToggle,#ninjaGate .registrationOpen #registrationToggle{width:var(--registration-shell);max-width:none;background:none;isolation:isolate;transition:none}
#registrationToggle::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--scroll-art,url('assets/scroll-green-v137.svg')) center/100% 100% no-repeat;transform:scaleX(var(--registration-closed-scale,.4));transform-origin:center;transition:transform .65s cubic-bezier(.35,0,.3,1);will-change:transform}
.registrationOpen #registrationToggle::before{transform:scaleX(1)}
.registrationPaperViewport{height:0;overflow:hidden;position:relative;transition:height .65s cubic-bezier(.35,0,.3,1);margin-top:-1px}
#ninjaRegistration #ninjaSetup,#ninjaRegistration.registrationClosing #ninjaSetup{margin-top:0;animation:none;opacity:1;transform:translate3d(0,-100%,0);transition:transform .65s cubic-bezier(.35,0,.3,1);clip-path:none;will-change:transform}
#ninjaRegistration.registrationPaperOpen #ninjaSetup{transform:translate3d(0,0,0)}
@media(prefers-reduced-motion:reduce){#registrationToggle::before,.registrationPaperViewport,#ninjaRegistration #ninjaSetup{transition:none}}
/* Map alternatives are plain fragile tiles, without a second scroll inside the map. */
.mapTop #mapExtras{min-width:260px;min-height:54px;padding:12px 40px;font-size:15px!important}
#unmappedPanel{padding:8px;background:none;border:0;box-shadow:none}
#unmappedPanel::before,#unmappedPanel::after,#unmappedPanel .unmappedRoller{display:none}
#unmappedPanel #unmappedChoices{margin:0;padding:0;gap:7px}
@media(max-width:600px){.mapTop #mapExtras{min-width:0;min-height:48px;padding:10px 28px;font-size:12px!important}.mapTop{gap:6px}}
#trainingTarget{position:fixed;width:76px;height:95px;z-index:119;pointer-events:none;filter:drop-shadow(2px 5px 5px #0008);animation:targetAppear .35s ease-out both}
#trainingTarget[hidden]{display:none}#trainingTarget svg{display:block;width:100%;height:100%}.targetSplit{opacity:0}
#trainingTarget.targetHit{animation:targetFall .65s ease-in both}#trainingTarget.targetHit .targetSplit{opacity:1}#trainingTarget.targetHit .targetDisc{transform-origin:45px 44px;animation:targetBreak .65s ease-out both}
@keyframes targetAppear{from{opacity:0;transform:translateY(12px) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes targetFall{0%{filter:brightness(2) drop-shadow(0 0 12px #d2f4ff);opacity:1}25%{filter:brightness(1)}100%{transform:translateY(30px) rotate(18deg);opacity:0}}
@keyframes targetBreak{to{transform:rotate(-20deg) translate(9px,4px)}}
@media(prefers-reduced-motion:reduce){#trainingTarget,#trainingTarget.targetHit,#trainingTarget.targetHit .targetDisc{animation-duration:.1s}}
@media(min-width:601px){.mapTop #mapExtras{min-width:320px;padding-left:50px;padding-right:50px}}
/* Supplied wooden target: its real illustrated surface separates into eight pieces. */
#trainingTarget{width:90px;height:90px}
#trainingTarget .targetWhole{display:block;width:100%;height:100%;object-fit:contain}
#trainingTarget .targetShard{position:absolute;inset:0;display:block;background:url('assets/training-target-v119.webp') center/100% 100% no-repeat;opacity:0}
#trainingTarget.targetHit{animation:none;filter:drop-shadow(2px 5px 5px #0008)}
#trainingTarget.targetHit .targetWhole{opacity:0}
#trainingTarget.targetHit .targetShard{animation:targetShatter .75s cubic-bezier(.2,.6,.5,1) both}
@keyframes targetShatter{0%{opacity:1;transform:none;filter:brightness(1.35)}65%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--spin));filter:brightness(1)}}
#toolRack{position:fixed;right:22px;z-index:118;display:flex;gap:20px;padding-top:12px;filter:drop-shadow(1px 4px 4px #0007)}
#toolRack[hidden]{display:none}#toolRack button{position:relative;width:45px;height:78px;border:0;padding:0;background:none;cursor:grab;touch-action:none}
#toolRack button::before{display:none}
#toolRack button img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
#toolRack[data-tool=shuriken] button{height:54px}
#toolRack .toolUsed{visibility:hidden;pointer-events:none}#toolRack button:focus-visible{outline:1px solid #b9e7e0;outline-offset:5px}
.thrownTool{position:fixed;left:0;top:0;width:30px;height:90px;object-fit:contain;pointer-events:none;z-index:121;will-change:transform;filter:drop-shadow(1px 3px 3px #0006)}
.thrownTool.shuriken{width:48px;height:48px}
#toolAim{position:fixed;height:24px;transform-origin:left center;pointer-events:none;z-index:122;opacity:.3;filter:drop-shadow(0 0 5px #61cfff)}
#toolAim[hidden]{display:none}#toolAim svg{display:block;width:100%;height:100%;overflow:visible}#toolAim path{stroke-dasharray:18 9;animation:toolEnergy .55s linear infinite}
@keyframes toolEnergy{to{stroke-dashoffset:-27}}
@media(max-width:700px){#toolRack{right:18px;gap:16px}#toolRack button{width:36px;height:64px}}
@media(prefers-reduced-motion:reduce){#toolAim path{animation:none}#trainingTarget.targetHit .targetShard{animation-duration:.2s}}
/* v121: floating tools, account drawer and Mizuki's invitation. */
#toolRack[data-tool=kunai] button{width:52px;height:112px}
.thrownTool.kunai{width:40px;height:116px}
#ninjaSetup #equipmentChoice button[data-equipment=kunai] img{width:122px;height:160px}
#profileToggle{position:fixed;left:28px;z-index:118;width:42px;height:42px;padding:9px;border:1px solid #b3a77b88;border-radius:50%;background:#22382e99;color:#eee9cf;cursor:pointer;transition:background .2s,box-shadow .2s}
#profileToggle:hover{background:#48665b;box-shadow:0 0 20px #83d1b344}#profileToggle svg{width:100%;height:100%}#profileToggle[hidden]{display:none}
#profileDrawer,#mizukiInvitation{color:#3e4031;background:#eee6c9;border:1px solid #a7996e;box-shadow:0 16px 70px #0008}
#profileDrawer::backdrop,#mizukiInvitation::backdrop{background:#09130c88;backdrop-filter:blur(8px)}
#profileDrawer{position:fixed;inset:0 auto 0 0;margin:0;width:min(460px,100vw);height:100dvh;max-height:100dvh;max-width:100vw;box-sizing:border-box;padding:38px 30px;overflow:auto;border-radius:0;animation:profileSlide .3s ease-out}
@keyframes profileSlide{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.panelClose{position:absolute;top:12px;right:16px;padding:0;border:0;background:none;font-size:28px;color:#605844;cursor:pointer}.profileEyebrow{letter-spacing:.17em;font-size:10px;font-weight:700;color:#837151;margin:0 0 22px}.drawerIdentity{display:flex;gap:18px;align-items:center}.drawerIdentity>img{width:72px;height:84px;object-fit:cover;border:2px solid #9e946e;border-radius:8px}.drawerIdentity h1{font-size:25px;margin:0 0 7px}.drawerIdentity p{font-size:14px;margin:0 0 5px}.drawerIdentity small{font-size:12px;color:#786e56}.drawerStats{display:flex;gap:34px;padding:24px 0;border-bottom:1px solid #b3a77b}.drawerStats span{font-size:11px;color:#817553}.drawerStats strong{display:block;font-size:24px;color:#3c493c;margin-bottom:5px}#profileDrawer section{padding:24px 0 0}#profileDrawer h2{font-size:16px;margin:0 0 13px;display:flex;align-items:baseline;justify-content:space-between;gap:10px}#profileDrawer h2 small{font:11px Inter,Arial,sans-serif;color:#80714f}#editNinjaName{display:flex;gap:9px}#settingsName{min-width:0;width:100%;background:#fff9;border:1px solid #ac9d73;border-radius:5px;padding:10px;color:#403f33;font-size:16px}#profileDrawer button:not(.panelClose){font:12px Inter,Arial,sans-serif;border:1px solid #a69b73;border-radius:5px;padding:10px 13px;background:#496b5f;color:#fff6d9;cursor:pointer}#profileDrawer button:disabled{opacity:.4;cursor:default}#settingsSignature{width:100%;height:110px;background:#fff5;border:1px solid #b3a77b;border-radius:5px;touch-action:none}#settingsSignature path{fill:none;stroke:#554036;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.settingsActions{display:flex;justify-content:space-between;margin-top:8px}.settingsTools{display:flex;gap:15px}#profileDrawer .settingsTools button{width:90px;height:96px;background:none;border-color:transparent}#profileDrawer .settingsTools button[aria-pressed=true]{background:#e3cf99;border-color:#a46b33;box-shadow:0 0 12px #ba8d3e33}.settingsTools img{width:100%;height:100%;object-fit:contain}.settingsTools [data-settings-tool=kunai] img{transform:rotate(180deg)}#settingsStatus,#mizukiStatus{font-size:13px;line-height:1.6;color:#8d3c31;min-height:20px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#mizukiInvitation{padding:0;border-radius:12px;width:min(780px,calc(100vw - 32px));max-height:90dvh;overflow:auto}#mizukiInvitation[open]{display:grid;grid-template-columns:38% 1fr}.mizukiArt{background:#192a23;min-height:350px}.mizukiArt img{width:100%;height:100%;object-fit:cover;object-position:45% 50%}#mizukiInvitation section{padding:36px 30px}#mizukiTitle{font-family:inherit;font-size:32px;margin:0 0 18px}#mizukiInvitation section>p{font-size:15px;line-height:1.7}.mizukiActions{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}#mizukiInvitation button{background:#476b5d;color:#fff6d9;border:1px solid #9c8f67;border-radius:6px;padding:12px 14px;cursor:pointer;font-size:12px}#mizukiInvitation button:disabled{opacity:.5}.mizukiVillages{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}#mizukiInvitation .mizukiVillages button{background:#e2d7b5;color:#4b4634;display:flex;flex-direction:column;align-items:center;gap:8px}.mizukiVillages img{width:36px;height:36px}.mizukiVillages strong{font-size:12px}.mizukiVillages small{font-size:10px}
@media(max-width:700px){#toolRack[data-tool=kunai] button{width:44px;height:98px}#profileToggle{left:18px}#mizukiInvitation[open]{grid-template-columns:1fr}.mizukiArt{height:180px;min-height:0}.mizukiArt img{object-position:50% 32%}#mizukiInvitation section{padding:25px}}

#profileDrawer .settingsTools{align-items:center}#profileDrawer .settingsTools [data-settings-tool=kunai]{height:124px;width:92px}#profileDrawer .settingsTools [data-settings-tool=shuriken]{height:84px;width:84px}
#mizukiInvitation{max-width:min(780px,calc(100vw - 32px))}#mizukiInvitation section>p{color:#5c503b}#mizukiInvitation .profileEyebrow{color:#81704b}#mizukiInvitation.choosingVillage{width:min(1000px,calc(100vw - 32px));max-width:min(1000px,calc(100vw - 32px));grid-template-columns:25% 1fr}.mizukiMap{height:230px;overflow:hidden;border:2px solid #a59972;border-radius:8px}.mizukiMap svg{width:100%;height:100%;background:#637c7f}.mizukiMap [aria-disabled=true]{opacity:.35;pointer-events:none}.mizukiMap .villageCountry{cursor:pointer}#mizukiInvitation .mizukiVillages{grid-template-columns:repeat(4,1fr)}#mizukiInvitation .mizukiVillages [aria-pressed=true]{background:#dfae70;border-color:#985e2e}.mizukiMap .selected path{fill:#ffa04788;stroke:#eab95b;stroke-width:3}#mizukiInvitation .newVillageName{font-weight:700;margin:12px 0}#mizukiInvitation.choosingVillage section{padding:24px}#mizukiInvitation.choosingVillage #mizukiTitle{font-size:27px;margin-bottom:10px}
@media(max-width:700px){#mizukiInvitation.choosingVillage{grid-template-columns:1fr}#mizukiInvitation.choosingVillage .mizukiArt{display:none}#mizukiInvitation .mizukiVillages{grid-template-columns:repeat(2,1fr)}.mizukiMap{height:190px}}
#mizukiInvitation.choosingVillage .profileEyebrow{margin-bottom:9px}#mizukiInvitation.choosingVillage section>p{font-size:13px;line-height:1.55}.mizukiMap{background:#bcb492;border-color:#a59972}.mizukiMap svg{background:transparent}#mizukiInvitation.choosingVillage .mizukiVillages{margin:12px 0}#mizukiInvitation.choosingVillage .mizukiActions{margin-top:12px}
#ninjaSetup #equipmentChoice .equipmentOptions button,#ninjaSetup #equipmentChoice .equipmentOptions button:hover,#ninjaSetup #equipmentChoice .equipmentOptions button:focus-visible,#ninjaSetup #equipmentChoice .equipmentOptions button[aria-pressed=true]{height:176px;min-height:176px}
/* v122: the profile starts as a dossier view; edits commit together. */
#profileDrawer{padding-top:48px}#profileDrawer .drawerIdentity h1{font-size:25px}.ninjaSince{font-size:12px;color:#776849;margin:18px 0 0}.profileFieldHeader{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}#profileDrawer .profileFieldHeader h2{display:block;margin:0}.profileFieldHeader h2 small{display:block;margin-top:5px}.profileCurrentName{font-size:21px;font-weight:600;margin:0;color:#554337}#settingsSignature{height:auto;aspect-ratio:3/1;background:#f3ecd6;border:1px solid #ad9b76;cursor:default}#settingsSignature path{fill:#604332;stroke:none}#settingsSignature[aria-label^="Draw"]{cursor:crosshair}.settingsDrawHint{font-size:12px!important;line-height:1.6;text-align:center;color:#76694f!important;margin:10px 0}#profileDrawer .currentTool{height:115px;margin:4px 0}.currentTool>div{height:100%;width:80px}.currentTool [data-settings-tool=shuriken]{height:80px}.settingsTools.currentTool img{height:100%;width:100%;object-fit:contain}.profileSaveBar{position:sticky;bottom:-38px;padding:16px 0;background:#eee6c9;box-shadow:0 -12px 12px #eee6c9}#profileDrawer #saveProfileChanges{width:100%;font-size:16px;padding:13px}#profileDrawer #settingsName{box-sizing:border-box;width:100%}
#menuAccountFooter{text-align:center;width:100%;margin:44px 0 12px;font:13px Inter,Arial,sans-serif}#menuAccountFooter a{color:#c1b994;text-decoration:none;padding:10px 20px}#menuAccountFooter a:hover{color:#fff0cb;text-decoration:underline}#menuAccountFooter[hidden]{display:none}
#lobby .rankScrolls #leaderboard{--scroll-art:url('assets/scroll-steel-v137.svg');--roller:#606762;--roller-end:#444b48}#leaderboard .playerAverage{color:#4b655b}
#unmappedChoices button:hover:not(.chosen):not(.correct){background:radial-gradient(ellipse at 25% 20%,#fbf2db66,transparent 70%),linear-gradient(125deg,#e8dec4,#d5c8a7);border-color:#b5a17c #978362 #8b7656 #c5b28d;box-shadow:inset 0 1px 1px #fff9,inset 0 -2px 2px #66523330,1px 3px 2px #493b2733;filter:none;animation:none;transform:none;scale:1}#unmappedChoices button:hover:not(.chosen):not(.correct).damaged{background-color:#d9c9aa;box-shadow:inset 0 0 10px #68503544,1px 3px 2px #493b2733}
#nukeninInvitation{width:min(820px,calc(100vw - 32px));max-width:min(820px,calc(100vw - 32px));max-height:90dvh;padding:0;border:1px solid #94715e;border-radius:10px;background:#eee6c9;color:#4b3e35;overflow:auto;box-shadow:0 20px 80px #0009}#nukeninInvitation[open]{display:grid;grid-template-columns:35% 1fr}#nukeninInvitation::backdrop{background:#100c13bb;backdrop-filter:blur(8px)}.nukeninMark{background:radial-gradient(#693d48,#182023);display:flex;align-items:center;justify-content:center;padding:25px}.nukeninMark img{width:100%;filter:drop-shadow(0 8px 14px #0008)}#nukeninInvitation section{padding:38px 30px}#nukeninInvitation h1{font:600 31px Inter,Arial,sans-serif;margin:0 0 20px}#nukeninInvitation p{font-size:14px;line-height:1.7;color:#675543}#nukeninInvitation .profileEyebrow{color:#987252;font-size:10px}.nukeninActions{display:flex;flex-wrap:wrap;gap:10px;margin-top:25px}#nukeninInvitation button{background:#50323c;color:#fff1d2;border:1px solid #ac9171;border-radius:6px;padding:12px 15px;cursor:pointer;font-size:12px}#nukeninInvitation button:disabled{opacity:.5}
@media(max-width:700px){#nukeninInvitation[open]{grid-template-columns:1fr}.nukeninMark{height:120px;padding:15px}.nukeninMark img{height:120px;width:120px}#nukeninInvitation section{padding:25px}}
/* Preview-only navigation; no account mutations or decisions are saved. */
.secretPreviewButtons{flex-basis:100%;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}.secretPreviewBar{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 18px;background:#293d34;color:#eee4c8;font:11px Inter,Arial,sans-serif}.secretPreviewBar button{font:11px Inter,Arial,sans-serif;padding:8px 12px}

/* Village-specific illustrated secret scenes. */
#nukeninInvitation[open]{grid-template-columns:46% 1fr}.nukeninMark{padding:0;overflow:hidden}.nukeninMark img{width:100%;height:100%;object-fit:cover;object-position:48% 50%;filter:none}.mizukiArt img{object-position:50% 50%}@media(max-width:700px){#nukeninInvitation[open]{grid-template-columns:1fr}.nukeninMark{height:200px}.nukeninMark img{width:100%;height:100%;object-position:50% 44%}}
@media(max-width:700px){.mizukiArt img{object-position:50% 30%}}

#mizukiInvitation.choosingVillage .mizukiActions{justify-content:space-between}#mizukiInvitation #sealVillageChoice{background:#843c3c;border:2px solid #b84e46;color:#fff1da}#mizukiInvitation #sealVillageChoice:disabled{opacity:.45}
/* Secret scenes keep their artwork mounted while a country is selected. */
#mizukiInvitation,#nukeninInvitation{position:relative}
#mizukiInvitation .secretPreviewBar,#nukeninInvitation .secretPreviewBar{position:absolute;z-index:3;top:10px;right:10px;width:auto;padding:0;background:transparent;display:block}
#mizukiInvitation .secretPreviewBar button,#nukeninInvitation .secretPreviewBar button{width:34px;height:34px;padding:0;border-radius:50%;background:#eee4c8e8;color:#4b3e35;font-size:21px;border:1px solid #9d8d68}
#mizukiInvitation section,#nukeninInvitation section{display:flex;flex-direction:column;min-height:460px;padding-top:48px;padding-bottom:26px;box-sizing:border-box}
#mizukiInvitation .mizukiActions,#nukeninInvitation .nukeninActions{margin-top:auto;padding-top:40px;width:100%;display:flex;justify-content:space-between;gap:16px}
#mizukiInvitation.choosingVillage .mizukiActions{padding-top:46px}
#mizukiStatus:empty,#nukeninStatus:empty{display:none}
#nukeninInvitation #remainShinobi{background:#476b5d;border-color:#9c8f67}
#nukeninInvitation #walkAway{margin-top:auto;align-self:flex-end}
#mizukiInvitation .mizukiArt,#nukeninInvitation .nukeninMark{min-height:100%}
#rankCelebration .bingoBook{margin:14px 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:530px;border:8px solid #45392d;border-radius:5px;background:#e4d5b9;box-shadow:0 20px 60px #0009;position:relative;color:#332d25;font-family:Georgia,serif}
.bingoLeaf{padding:30px 34px;box-sizing:border-box;background:radial-gradient(ellipse at 50% 30%,#f0e5cd,#ddcdb0);min-width:0}
.bingoPortrait{border-right:1px solid #9b8764;box-shadow:inset -15px 0 18px -16px #32251bcc;display:flex;flex-direction:column;align-items:center}
.bingoRecord{box-shadow:inset 15px 0 18px -16px #32251bcc;display:flex;flex-direction:column}
.bingoEyebrow{font:10px/1.5 Inter,Arial,sans-serif;letter-spacing:.15em;color:#77644e;margin:0 0 18px}
#rankCelebration .bingoBook h1{font:700 clamp(24px,3vw,35px)/1.1 Georgia,serif;letter-spacing:.08em;color:#312b25;margin:0 0 20px}
.bingoPhoto{width:100%;height:280px;border:1px solid #514432;padding:7px;background:#c1b49c;box-sizing:border-box;display:flex;align-items:center}
#rankCelebration .bingoPhoto img{width:100%;height:100%;object-fit:contain!important;object-position:center!important;filter:sepia(.12) contrast(.96)}
.bingoName{font-size:19px;margin:18px 0 10px}.bingoStamp{border:2px solid #9b3730;color:#9b3730;padding:7px 11px;transform:rotate(-5deg);font:700 12px Inter,Arial,sans-serif;letter-spacing:.13em}
#rankCelebration .bingoRecord h2{font:700 31px/1.15 Georgia,serif;margin:8px 0 24px;color:#3d3027}
.bingoRecord dl{margin:0 0 24px;border-block:1px solid #a49272;padding:12px 0;font-size:13px}.bingoRecord dl div{display:flex;justify-content:space-between;gap:12px;margin:7px 0}.bingoRecord dt{color:#7d6c54}.bingoRecord dd{margin:0;text-align:right}
.bingoRecord h3{font-size:14px;text-transform:uppercase;letter-spacing:.07em;margin:0 0 10px}#rankCelebration .bingoRecord .promotionMessage{font:16px/1.65 Georgia,serif;min-height:0;margin:0 0 18px}.bingoWarning{font:italic 11px Georgia,serif;color:#887457;margin-top:auto}.bingoRecord .promotionContinue{align-self:flex-end;font-size:15px;color:#533c2f;border:1px solid #9a8766;padding:10px 16px;background:#e9dcc1}
@media(max-width:700px){#mizukiInvitation section,#nukeninInvitation section{min-height:380px;padding-top:28px}.mizukiArt{min-height:0!important}#nukeninInvitation .nukeninMark{min-height:0}#mizukiInvitation .mizukiActions,#nukeninInvitation .nukeninActions{padding-top:35px}#rankCelebration .bingoBook{grid-template-columns:1fr;min-height:0}.bingoLeaf{padding:25px}.bingoPortrait{border-right:0;border-bottom:1px solid #a49272}.bingoPhoto{height:210px}.bingoRecord .bingoEyebrow{margin-bottom:8px}}
/* Secret map uses its native shape with no letterbox panel. */
#mizukiInvitation .mizukiMap{width:min(100%,620px);height:auto;aspect-ratio:1178/830;margin:0 auto;border:0;border-radius:0;background:transparent;overflow:hidden}
#mizukiInvitation .mizukiMap svg{display:block;width:100%;height:100%;background:transparent}
#mizukiInvitation .mizukiMap .villageCountry.selected path{fill:var(--country-color);fill-opacity:.66;stroke:var(--country-color);stroke-width:4;filter:drop-shadow(0 0 6px var(--country-color))}
#mizukiInvitation .mizukiVillages [aria-pressed=true]{background:color-mix(in srgb,var(--chosen-country,#dfae70) 40%,#e2d7b5);border-color:var(--chosen-country,#985e2e)}
#rankCelebration .bingoPhoto{width:240px;height:240px;max-width:100%;aspect-ratio:1;padding:0;border:2px solid #514432;background:none;flex-shrink:0}
#rankCelebration .bingoPhoto img{display:block;width:100%;height:100%;object-fit:cover!important;object-position:center!important}
#rankCelebration .bingoStamp{position:relative;display:inline-block;min-width:200px;max-width:100%;box-sizing:border-box;padding:17px 20px;border:5px double #9b3730;border-radius:4px;color:#a0352b;font:900 17px/1.25 Georgia,serif;letter-spacing:.12em;text-align:center;transform:rotate(-9deg);opacity:.85;text-shadow:.4px 0 currentColor,-.35px .3px currentColor;box-shadow:inset 0 0 0 1px #9b373050;filter:url('#stampInk')}
#rankCelebration .bingoStamp::after{content:'';position:absolute;inset:5px;border:1px solid currentColor;border-radius:1px;pointer-events:none}
.bingoName{margin-bottom:22px}
@media(max-width:700px){#mizukiInvitation .mizukiMap{width:100%;height:auto}#rankCelebration .bingoPhoto{width:210px;height:210px}.bingoPortrait{padding-bottom:34px}}

#rankCelebration .bingoPhoto img[alt="Madara Uchiha"]{object-position:25% center!important}
/* Identification set: front portrait plus two small views, like the source Bingo Book. */
#rankCelebration .bingoPhotoSet{display:grid;grid-template-columns:minmax(0,240px) 86px;gap:12px;width:338px;max-width:100%;align-items:stretch}
#rankCelebration .bingoPhotoSet .bingoPhoto{width:100%;height:auto;aspect-ratio:1;min-width:0}
.bingoOtherViews{display:grid;grid-template-rows:1fr 1fr;gap:10px;min-height:0}
.bingoSmallPhoto{border:2px solid #514432;background:#f5f2ea;overflow:hidden;min-height:0;position:relative}
#rankCelebration .bingoSmallPhoto img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:center;filter:sepia(.08) contrast(.98)}
#rankCelebration .bingoPhoto img[alt="Madara Uchiha"]{object-position:center!important}
@media(max-width:700px){#rankCelebration .bingoPhotoSet{grid-template-columns:minmax(0,210px) 76px;width:298px;gap:10px}.bingoOtherViews{gap:8px}}
@media(max-width:380px){#rankCelebration .bingoPhotoSet{grid-template-columns:minmax(0,1fr) 64px;gap:8px}}
#rankCelebration .bingoSmallPhoto img{object-fit:cover}

/* v129: opaque location tray and compact identification views. */
#unmappedPanel{background:#e2d5b5;border:1px solid #a18c65;border-radius:5px;box-shadow:0 8px 24px #0005}
#unmappedChoices button,#unmappedChoices button:hover,#unmappedChoices button:active{transition:none;animation:none;transform:none;translate:none;scale:1}
#unmappedChoices .tileCracks{animation:none;clip-path:inset(0);opacity:.95}
#mizukiInvitation.choosingVillage section>p:not(.profileEyebrow):not(#mizukiStatus){font-size:clamp(18px,1.6vw,23px);line-height:1.65}
#rankCelebration .bingoPhotoSet{grid-template-columns:minmax(0,240px) 64px;width:316px;align-items:start}
#rankCelebration .bingoOtherViews{grid-template-rows:86px 86px;gap:12px;align-self:start}
#rankCelebration .bingoSmallPhoto{height:86px;box-sizing:border-box}
.bingoRecord .promotionContinue{margin-top:auto}
@media(max-width:700px){#rankCelebration .bingoPhotoSet{grid-template-columns:minmax(0,210px) 56px;width:276px;gap:10px}#rankCelebration .bingoOtherViews{grid-template-rows:75px 75px;gap:10px}#rankCelebration .bingoSmallPhoto{height:75px}}
@media(max-width:380px){#rankCelebration .bingoPhotoSet{grid-template-columns:minmax(0,1fr) 48px}#rankCelebration .bingoOtherViews{grid-template-rows:65px 65px}#rankCelebration .bingoSmallPhoto{height:65px}}

/* v130: balance the offer map and identification photos. */
#mizukiInvitation.choosingVillage section>p:not(.profileEyebrow):not(#mizukiStatus){font-size:15px;line-height:1.6}
#mizukiInvitation .mizukiMap{width:min(100%,760px)}
#mizukiInvitation .mizukiVillages{gap:8px;margin:14px 0}
#mizukiInvitation .mizukiVillages button{padding:8px 6px;gap:4px}
#mizukiInvitation .mizukiVillages img{width:25px;height:25px}
#mizukiInvitation .mizukiVillages strong{font-size:11px}
#mizukiInvitation .mizukiVillages small{font-size:9px}
#rankCelebration .bingoPhotoSet{align-items:stretch}
#rankCelebration .bingoOtherViews{height:100%;align-self:stretch;align-content:space-evenly;gap:0}
#rankCelebration .bingoPhotoSet .bingoPhoto{position:relative;overflow:hidden;border:0;box-shadow:inset 0 0 0 2px #514432}
#rankCelebration .bingoPhotoSet .bingoPhoto::after{content:'';position:absolute;inset:0;border:2px solid #514432;pointer-events:none;z-index:1}
#rankCelebration .bingoPhotoSet .bingoPhoto img{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px)}

/* v131: stable lobby controls, roomier portraits and ranking filters. */
#toolRack{left:94px;right:auto;padding-top:0;gap:18px}
#profileToggle,#toolRack{position:fixed}
#menuAccountFooter{display:none!important}
.profileLogout{display:block;margin:24px 0;color:#654a3b;text-align:center}
#ranking .rankHeading>div{display:flex;flex-direction:column;justify-content:center;gap:7px}
#ranking .rankHeading h2,#ranking .rankHeading .nickname{margin:0}
#ninjaSetup .registrationRankGrid i{width:39px;height:39px}
.leaderboardFilters{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-bottom:22px}
.leaderboardPeriods{display:flex;gap:5px;width:100%}
.leaderboardFilters label{display:grid;gap:5px;font-size:11px;flex:1;min-width:100px}
.leaderboardFilters select{width:100%;max-width:100%;padding:6px;background:#f2e9d0;color:#344139;border:1px solid #a99a73;border-radius:4px;font:inherit}
.leaderboardPeriods button{padding:7px 12px;font-size:12px;background:#dfd7bb;color:#344139;border:1px solid #a99a73}
.leaderboardPeriods button[aria-pressed=true]{background:#48695c;color:#fff3d2}
@media(max-width:700px){#toolRack{left:78px;gap:12px}}

#toolRack button img{object-position:center top}

/* v132: controls belong to the logo's document position, not a viewport overlay. */
#profileToggle,#toolRack{position:absolute}
/* v133: identification card; existing profile drawer remains Settings. */
#profileToggle{width:44px;height:66px;padding:0;border:0;border-radius:5px;background:none;box-shadow:none;filter:drop-shadow(0 3px 6px #0009);transition:transform .25s,filter .25s}
#profileToggle img{width:100%;height:100%;object-fit:contain;border-radius:5px;display:block}
#profileToggle:hover{background:none;transform:translateY(-4px) rotate(-5deg);filter:drop-shadow(0 0 12px #ffd67599)}
#ninjaCard{position:fixed;inset:20px auto 20px 24px;margin:0;width:min(600px,calc(100vw - 48px));max-width:none;max-height:calc(100dvh - 40px);padding:0;border:0;border-radius:15px;background:#598b74;color:#263b32;box-shadow:0 15px 75px #000a;overflow:auto;animation:cardSlide .35s ease-out}
#ninjaCard::backdrop{background:#08130bb0;backdrop-filter:blur(7px)}
.ninjaIdentityCard{position:relative;margin:12px;padding:24px;border:2px solid #263b32;border-radius:6px;background:radial-gradient(ellipse at 35% 20%,#f5f0d7,#dfdabe);font-family:Inter,Arial,sans-serif}
.cardClose{position:absolute;right:8px;top:5px;padding:0 5px;border:0;background:none;color:#33493c;font-size:26px}
#ninjaCard .cardNation{display:flex;align-items:center;justify-content:flex-start;gap:14px;padding:0;margin:0 0 24px;max-width:none}
.cardNation>img{width:52px;height:52px;object-fit:contain}.cardNation>svg{width:34px;height:34px;flex-shrink:0;color:#9a353f}
.cardNation small{font-size:9px;letter-spacing:.13em}.cardNation h1{font:700 21px/1.2 Georgia,serif;margin:4px 0;letter-spacing:0}
.cardMain{display:grid;grid-template-columns:1.15fr 1fr;gap:18px}.cardFacts dl{margin:0}.cardFacts dl>div{padding:9px 10px;margin-bottom:10px;background:#fffbed99;box-shadow:0 0 8px #fff7e866}.cardFacts dt{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#64715c}.cardFacts dd{font-size:13px;font-weight:600;margin:5px 0 0;overflow-wrap:anywhere}
.cardPreferred{display:flex;align-items:center;gap:15px;margin-top:18px}.cardPreferred small{font-size:12px}.cardPreferred img{width:65px;height:100px;object-fit:contain}.cardPreferred img.shuriken{height:65px}
.cardRankPhoto{width:100%;aspect-ratio:1;object-fit:cover;border:2px solid #445641;display:block}.cardPortrait h2{font:700 24px/1.1 Georgia,serif;margin:12px 0 5px;overflow-wrap:anywhere}.cardPortrait p{font-size:11px!important;line-height:1.4!important;color:#526148!important;margin:0 0 8px}.cardSignature{width:100%;height:70px;border:1px solid #87947c;background:#e5eded;display:block}.cardSignature path{fill:#584737}
.cardBottom{display:grid;grid-template-columns:48px minmax(0,1fr) 80px;align-items:end;gap:7px;margin-top:20px}.ninjaRadar{width:100%;align-self:center;display:block;overflow:visible}.ninjaRadar text{font:11px Georgia,serif;fill:#263b32}.cardSettings{padding:0 0 15px;background:none;border:0;color:#395846;display:grid;gap:6px;justify-items:center}.cardSettings svg{width:32px;height:32px}.cardSettings span{font-size:10px}.cardMissions{align-self:center}.cardMissions h3{font:700 14px Georgia,serif;margin:0 0 6px}.cardMissions>div{display:flex;justify-content:space-between;border-top:1px solid #69775d;padding:5px 4px;font-size:17px}
@keyframes cardSlide{from{opacity:0;transform:translateX(-35px) rotateY(8deg)}to{opacity:1;transform:none}}
@media(max-width:480px){#ninjaCard{left:8px;top:8px;bottom:8px;width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}.ninjaIdentityCard{padding:18px;margin:8px}.cardMain{gap:12px}.cardNation h1{font-size:18px}.cardNation>img{width:40px;height:40px}.cardFacts dd{font-size:11px}.cardPortrait h2{font-size:21px}.cardBottom{grid-template-columns:36px minmax(0,1fr) 58px;gap:3px}.ninjaRadar text{font-size:11px}.cardMissions h3{font-size:12px}.cardPreferred{gap:5px}.cardPreferred small{font-size:10px}}
@media(prefers-reduced-motion:reduce){#ninjaCard{animation:none}#profileToggle{transition:none}}
#ninjaCard .ninjaRadar{max-width:250px;justify-self:center}.cardSignature{height:54px}.cardNation{margin-bottom:18px!important}.cardBottom{margin-top:10px}
/* v134: tight aligned ID-card photos, public cards and account actions. */
.ninjaIdentityCard,.ninjaIdentityCard *{box-sizing:border-box}
.ninjaIdentityCard .cardNation{display:flex;align-items:center;margin:0 0 18px;padding:0;max-width:none}
.ninjaIdentityCard .cardNation .cardLand{width:54px;height:54px;object-fit:contain}
.cardPhotoFrame{position:relative;width:100%;aspect-ratio:1;overflow:hidden;border:2px solid #445641;background:#e4dfc8}
.ninjaIdentityCard .cardRankPhoto{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border:0;margin:0;display:block}
.ninjaIdentityCard .cardPortrait h2{font:700 21px/1.25 Georgia,serif;text-align:center;margin:13px 0;min-height:52px;display:flex;align-items:center;justify-content:center}
.ninjaIdentityCard .cardSignature{width:100%;height:88px;border:1px solid #78816d;display:block;background:#e5eded}
.ninjaIdentityCard .cardSignature path{fill:#080808}
.cardFacts dd small{display:block;font-size:10px;font-weight:400;margin-top:5px}
.ninjaIdentityCard .cardBottom{grid-template-columns:64px minmax(0,1fr) 65px}
.cardAccountActions{display:grid;gap:10px;align-self:end;margin-bottom:12px}
.cardAccountActions .cardSettings,.cardLogout{display:grid;justify-items:center;gap:5px;background:#dae0c9;border:1px solid #778568;border-radius:5px;padding:8px 3px;color:#2d4739;text-decoration:none;font:11px Inter,Arial,sans-serif;transition:background .2s,box-shadow .2s,transform .2s}
.cardAccountActions .cardSettings span{font:28px/1 Arial}
.cardAccountActions .cardSettings:hover,.cardLogout:hover{background:#b4cbb3;box-shadow:0 2px 8px #34583a44;transform:translateY(-2px)}
#toolRack button:not(:disabled):hover img{filter:drop-shadow(0 0 10px #b0efffb0);transform:translateY(-3px)}
#toolRack button img{transition:filter .18s,transform .18s}
.playerCardLink{background:transparent;border:0;padding:0;color:inherit;text-align:left;font:700 11px Inter,Arial,sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.playerCardLink:hover{background:none;color:#9c5635}
.playerNinjaCard{width:100%;max-width:560px;margin:12px auto 20px;padding:5px;background:#598b74;border-radius:8px;color:#263b32}
.playerNinjaCard .ninjaIdentityCard{margin:4px;padding:14px}
.playerNinjaCard .cardMain{gap:10px;grid-template-columns:1.15fr 1fr}
.playerNinjaCard .cardFacts dd{font-size:11px}.playerNinjaCard .cardFacts dt{font-size:9px}
.playerNinjaCard .cardPortrait h2{font-size:16px}.playerNinjaCard .cardNation .cardLand{width:40px;height:40px}
.playerNinjaCard .cardBottom{grid-template-columns:0 minmax(0,1fr) 60px}.playerNinjaCard .cardSignature{height:70px}
.playerNinjaCard .ninjaRadar{max-width:240px;justify-self:center}
#profileDrawer #profileTitle{margin:0 0 25px;font-size:28px}
@media(max-width:480px){.ninjaIdentityCard .cardPortrait h2{font-size:17px}.ninjaIdentityCard .cardBottom{grid-template-columns:54px minmax(0,1fr) 50px}.ninjaIdentityCard .cardSignature{height:75px}}
@media(prefers-reduced-motion:reduce){.cardAccountActions .cardSettings,.cardLogout,#toolRack button img{transition:none}}

/* v135: reference-style village/land heading and compact portrait caption. */
.ninjaIdentityCard .cardNation,#ninjaCard .cardNation{justify-content:space-between;gap:16px;padding-right:8px;min-height:58px}
.ninjaIdentityCard .cardNation .cardVillage{width:68px;height:58px;object-fit:contain;flex-shrink:0}
.cardLandName{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-width:0}
.cardLandName span{font:700 clamp(22px,3vw,35px)/1.2 'Yu Mincho','Hiragino Mincho ProN',serif;white-space:nowrap;color:#151c15}
.ninjaIdentityCard .cardPortrait h2{margin:7px 0 8px;min-height:0;line-height:1.2}
.ninjaIdentityCard .cardPortrait{align-self:start}
.playerNinjaCard .cardNation .cardVillage{width:40px;height:40px}.playerNinjaCard .cardLandName{gap:6px}.playerNinjaCard .cardLandName span{font-size:22px}
@media(max-width:480px){.ninjaIdentityCard .cardNation .cardVillage{width:48px;height:46px}.cardLandName{gap:7px}.cardLandName span{font-size:26px}.ninjaIdentityCard .cardNation .cardLand{width:44px;height:44px}}
/* v136: roomy inline facts, larger insignia and unobstructed player links. */
.ninjaIdentityCard .cardNation .cardLand{width:64px;height:64px}.cardLandName span{font-size:42px}
.ninjaIdentityCard .cardNation,#ninjaCard .cardNation{min-height:70px}
.ninjaIdentityCard .cardSignature path{fill:#8f1e24}
.ninjaIdentityCard .cardFacts dl>div{display:flex;align-items:baseline;gap:8px;padding:12px 10px;flex-wrap:wrap}
.cardFacts dt:after{content:':'}
.ninjaIdentityCard .cardFacts dd{margin:0;flex:1;min-width:70px}
.ninjaIdentityCard .cardPreferred{justify-content:center;margin:12px 0 0}
.ninjaIdentityCard .cardPreferred img{width:110px;height:170px}.ninjaIdentityCard .cardPreferred img.shuriken{width:110px;height:110px}
#lobby .ranking .playerInfo .playerCardLink,#lobby .ranking .playerInfo .playerCardLink:hover{display:inline;background:none!important;border:0!important;border-radius:0;box-shadow:none!important;padding:0!important;color:inherit;font:700 12px Inter,Arial,sans-serif;text-decoration:none}
#lobby .ranking .playerInfo .playerCardLink:hover{text-decoration:underline;color:#8f5334}
#trainingTarget{width:72px;height:72px}
.playerNinjaCard .cardNation .cardLand{width:40px;height:40px}.playerNinjaCard .cardLandName span{font-size:25px}
@media(max-width:480px){.cardLandName span{font-size:32px}.ninjaIdentityCard .cardNation .cardLand{width:50px;height:50px}.ninjaIdentityCard .cardFacts dl>div{gap:5px;padding:9px 7px}.ninjaIdentityCard .cardPreferred img{width:90px;height:140px}.ninjaIdentityCard .cardPreferred img.shuriken{height:90px}}
/* Large mission grade and total occupy the former empty introduction. */
.game.is-finished #reviewIntro{display:flex;align-items:stretch;width:100%;padding-bottom:12px}
.missionHero{--grade:#bdc5bd;display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;min-height:190px;padding:10px 0}
.missionHero.grade-s{--grade:#f4cf63}.missionHero.grade-a{--grade:#aebdca}.missionHero.grade-b{--grade:#ce935c}.missionHero.grade-c{--grade:#69b9e5}.missionHero.grade-d{--grade:#83b67c}.missionHero.grade-f{--grade:#df665c}
.game.is-finished #reviewIntro h1{font:700 clamp(30px,3.5vw,58px)/1.05 'Barlow Condensed',sans-serif;letter-spacing:0;margin:8px 0 15px}
.missionHero .reviewEyebrow{font-size:10px;letter-spacing:.2em}.missionGrade{font:800 clamp(110px,12vw,200px)/.9 'Barlow Condensed',sans-serif;color:var(--grade);text-shadow:0 2px 0 #ffffff44,0 8px 20px #0006;transform:rotate(-7deg);padding:0 18px}
.missionTotal{display:flex;align-items:baseline;gap:10px;font-variant-numeric:tabular-nums}.missionTotal strong{font:700 clamp(32px,4vw,60px)/1 'Barlow Condensed',sans-serif;color:var(--grade)}.missionTotal span{font-size:16px;color:#9dab9b}
.game.is-finished #result{background:transparent;border:0;padding:0;margin-top:16px}.game.is-finished #result .breakdown{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0}
.roundResult{padding:14px 8px;border-top:2px solid #71816b;background:#1d261e;display:grid;gap:8px;text-align:center}.roundResult small{font-size:9px;letter-spacing:.1em;color:#a3b49d}.roundResult strong{font:600 25px 'Barlow Condensed',sans-serif!important;color:#f0f1df!important}.roundResult span{font-size:10px!important;color:#8f9c87!important}
@media(max-width:600px){.missionHero{min-height:150px;gap:10px}.missionGrade{font-size:100px;padding:0 8px}.game.is-finished #reviewIntro h1{font-size:30px}.missionTotal strong{font-size:35px}.missionTotal span{font-size:12px}.game.is-finished #result .breakdown{gap:4px}.roundResult{padding:10px 3px}.roundResult strong{font-size:21px!important}}
/* v137: readable inline card information, larger insignia and statistics. */
#ninjaCard{width:min(900px,calc(100vw - 48px))}
.ninjaIdentityCard .cardMain{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
.ninjaIdentityCard .cardNation .cardLand{width:96px;height:96px}.cardLandName span{font-size:63px}
.ninjaIdentityCard .cardNation,#ninjaCard .cardNation{min-height:105px}
.ninjaIdentityCard .cardFacts dl>div{display:block;white-space:nowrap;padding:16px 12px;color:#080808;overflow-x:auto;scrollbar-width:thin}
.ninjaIdentityCard .cardFacts dt,.ninjaIdentityCard .cardFacts dd,.ninjaIdentityCard .cardFacts dd small{display:inline;font:500 15px/1.5 Inter,Arial,sans-serif;letter-spacing:0;color:#080808;margin:0;text-transform:none}
.ninjaIdentityCard .cardFacts dt{font-weight:600;margin-right:7px;text-transform:uppercase;font-size:13px}.ninjaIdentityCard .cardFacts dd{font-weight:600}.ninjaIdentityCard .cardFacts dd small{font-weight:400;font-size:13px}
.ninjaIdentityCard .cardPreferred img.kunai{transform:rotate(90deg);width:180px;height:180px}
.ninjaIdentityCard .cardBottom{grid-template-columns:76px minmax(0,1fr) 135px;gap:16px;margin-top:24px}
#ninjaCard .ninjaRadar,.playerNinjaCard .ninjaRadar{max-width:350px}.ninjaRadar text{font-size:13px}
.ninjaIdentityCard .cardMissions h3{font-size:21px;margin-bottom:12px}.ninjaIdentityCard .cardMissions>div{font-size:26px;gap:15px;padding:7px 3px;font-variant-numeric:tabular-nums}.cardMissions>div span{min-width:4ch;text-align:right}
.playerNinjaCard .cardMain{grid-template-columns:1fr}.playerNinjaCard .cardFacts dt,.playerNinjaCard .cardFacts dd,.playerNinjaCard .cardFacts dd small{font-size:11px}.playerNinjaCard .cardNation .cardLand{width:50px;height:50px}.playerNinjaCard .cardLandName span{font-size:30px}.playerNinjaCard .cardBottom{grid-template-columns:0 minmax(0,1fr) 85px;gap:5px}.playerNinjaCard .cardMissions>div{font-size:18px}
@media(max-width:700px){#ninjaCard{width:calc(100vw - 32px);left:16px}.ninjaIdentityCard .cardMain{grid-template-columns:1fr}.cardFacts{order:2}.cardPortrait{order:1;width:min(260px,100%);justify-self:center;margin-bottom:16px}.ninjaIdentityCard .cardNation .cardVillage{width:46px}.ninjaIdentityCard .cardNation .cardLand{width:66px;height:66px}.cardLandName span{font-size:43px}.ninjaIdentityCard .cardNation,#ninjaCard .cardNation{min-height:76px}.ninjaIdentityCard .cardFacts dt,.ninjaIdentityCard .cardFacts dd,.ninjaIdentityCard .cardFacts dd small{font-size:clamp(10px,2.4vw,15px)}.ninjaIdentityCard .cardBottom{grid-template-columns:56px minmax(0,1fr) 92px;gap:5px}.ninjaIdentityCard .cardMissions>div{font-size:21px}.ninjaIdentityCard .cardMissions h3{font-size:17px}.ninjaRadar text{font-size:13px}}
/* Mission report has its own layout; the round-review map stays untouched. */
.game.is-finished{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);grid-template-rows:auto auto auto;gap:24px 32px;align-items:start}
.game.is-finished .mapsection,.game.is-finished #reviewLocation,.game.is-finished .sceneColumn>.scene{display:none!important}
.game.is-finished #reviewIntro{grid-column:1;grid-row:1;display:block;padding:0}
.missionHero{min-height:0;display:block;padding:10px 0}.missionTitle{display:flex;align-items:center;gap:18px;justify-content:flex-start;margin:5px 0 14px}.game.is-finished #reviewIntro .missionTitle h1{margin:0;font-size:clamp(30px,3.1vw,56px)}.missionTitle .missionGrade{font-size:clamp(72px,7vw,120px);padding:0 6px;flex-shrink:0}
.game.is-finished #reviewStats{grid-column:1;grid-row:2;display:grid;grid-template-columns:1fr;gap:20px;padding:25px;border:1px solid #52614c;background:linear-gradient(135deg,#26392b,#18251b);border-radius:10px}
.game.is-finished #reviewStats .reviewScore{grid-template-columns:auto 1fr;gap:6px 12px}.game.is-finished #reviewStats .reviewScore small{font-size:18px}.game.is-finished #reviewStats .reviewScore strong{font-size:clamp(36px,4.5vw,65px);padding:0;background:none}.game.is-finished #reviewStats .reviewScore span{font-size:14px}
.game.is-finished .sceneColumn{grid-column:2;grid-row:1/4;display:block;height:auto}.game.is-finished .roundActions{grid-column:1;grid-row:3;width:100%;margin:0}
#missionGallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.missionFrame{position:relative;overflow:hidden;border:1px solid #53624e;border-radius:8px;background:#1c271f}.missionFrame:first-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:center}.missionFrame img{display:block;width:100%;height:140px;object-fit:contain;background:#0b100d}.missionFrame:first-child img{height:175px}.missionFrame>div{padding:10px 12px}.missionFrame small{font-size:10px;letter-spacing:.13em;color:#aaba9f}.missionFrame strong{display:block;font:600 29px 'Barlow Condensed',sans-serif;color:#f6edd6;margin-top:3px}.missionFrame strong span{font:11px Inter,sans-serif;color:#a1af97}.missionFrame p{font:10px/1.5 Inter,sans-serif;color:#b6c7ac;margin:6px 0 0}.missionFrame p span{margin:0 4px}
@media(max-width:650px){.game.is-finished{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;gap:20px}.game.is-finished #reviewIntro{grid-column:1;grid-row:1}.game.is-finished #reviewStats{grid-column:1;grid-row:2;grid-template-columns:1fr 1fr;padding:18px;gap:12px}.game.is-finished .sceneColumn{grid-column:1;grid-row:3}.game.is-finished .roundActions{grid-column:1;grid-row:4}.missionFrame img{height:115px}.missionFrame:first-child img{height:140px}}
.ninjaIdentityCard .cardMissions{color:#080808}.ninjaIdentityCard .ninjaRadar text{fill:#080808}
@media(min-width:701px){.ninjaIdentityCard .cardFacts dt{font-size:15px}.ninjaIdentityCard .cardFacts dd{font-size:20px}.ninjaIdentityCard .cardFacts dd small{font-size:17px}.playerNinjaCard .cardFacts dt,.playerNinjaCard .cardFacts dd,.playerNinjaCard .cardFacts dd small{font-size:11px}}
@media(min-width:701px) and (max-width:1000px){#ninjaCard .cardFacts dt{font-size:13px}#ninjaCard .cardFacts dd{font-size:18px}#ninjaCard .cardFacts dd small{font-size:15px}}
/* v138: compact ID card, readable scores and full-bleed mission photographs. */
#ninjaCard{width:min(600px,calc(100vw - 48px))}
#ninjaCard .cardNation .cardLand{width:72px;height:72px}#ninjaCard .cardLandName span{font-size:46px}
#ninjaCard .cardNation{min-height:80px}
#ninjaCard .cardMain{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
#ninjaCard .cardFacts dl>div{padding:12px 9px}
#ninjaCard .cardFacts dt{font-size:13px}#ninjaCard .cardFacts dd{font-size:16px}#ninjaCard .cardFacts dd small{font-size:14px}
#ninjaCard .cardBottom{grid-template-columns:65px minmax(0,1fr) 100px;gap:8px}
#ninjaCard .cardMissions>div{font-size:21px;gap:6px}#ninjaCard .cardMissions h3{font-size:19px}
#ninjaCard .ninjaRadar{max-width:260px}
#ranking .nickname{font-size:17px}#ranking .rankStats>span{font-size:16px}#ranking .nextRank{font-size:15px}
.rankScrolls .rankLadder>button:disabled{cursor:default;opacity:.65}
.nationStanding h3{margin-bottom:0}.nationStanding>strong{font-size:34px}.nationStanding>strong small{font-size:14px}
.reviewEpisode{gap:20px;flex-wrap:wrap}.reviewEpisode>b{font-size:38px;padding:12px 18px}.reviewEpisode>b small{font-size:15px}.reviewEpisode>span{font-size:22px}.reviewEpisode>span small{font-size:15px;margin-top:8px}
.reviewScore>span{font-size:18px}.missionTotal span{font-size:clamp(22px,2.1vw,34px)}
.game.is-finished #reviewStats .reviewScore span{font-size:clamp(19px,1.8vw,28px)}
.missionFrame img{object-fit:cover;background:none;width:100%;height:160px}.missionFrame:first-child img{height:210px}
.missionFrame strong span{font-size:18px}.missionFrame p{font-size:12px}
@media(max-width:700px){#ninjaCard{width:calc(100vw - 32px)}#ninjaCard .cardMain{grid-template-columns:1fr}#ninjaCard .cardFacts dt{font-size:14px}#ninjaCard .cardFacts dd{font-size:16px}#ninjaCard .cardFacts dd small{font-size:14px}#ninjaCard .cardLandName span{font-size:40px}#ninjaCard .cardNation .cardLand{width:64px;height:64px}}
@media(max-width:650px){.reviewEpisode>span{font-size:19px}.reviewEpisode>b{font-size:32px}.missionFrame img{height:140px}.missionFrame:first-child{display:block}.missionFrame:first-child img{height:190px}.missionFrame strong span{font-size:16px}}
/* Compact cards keep whole inline facts readable instead of clipping their endings. */
#ninjaCard .cardFacts dl>div{white-space:normal;overflow:visible;line-height:1.5}

/* v139: viewport-safe mission report and crisp single-line identity facts. */
.game.is-finished #reviewIntro{position:relative;z-index:1}
.game.is-finished .missionHeading{display:grid;align-content:start;gap:0;padding-bottom:8px}
.game.is-finished .missionTotal{white-space:nowrap;line-height:1;margin-top:2px;padding-bottom:4px}
.game.is-finished #reviewStats{position:relative;z-index:0}
@media(min-width:651px){
  .game.is-finished{min-height:calc(100dvh - 40px)}
  .game.is-finished .sceneColumn{height:calc(100dvh - 40px);min-height:520px}
  #missionGallery{height:100%;grid-template-rows:minmax(0,1.05fr) repeat(2,minmax(0,1fr))}
  .missionFrame{min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto}
  .missionFrame:first-child{grid-template-rows:minmax(0,1fr);height:auto}
  .missionFrame img,.missionFrame:first-child img{height:100%;min-height:0}
  .missionFrame>div{padding:7px 10px}
  .missionFrame strong{font-size:clamp(22px,2vw,29px);line-height:1}
  .missionFrame p{margin-top:4px}
}
#ninjaCard .cardMain{grid-template-columns:minmax(0,1.8fr) minmax(155px,1fr);gap:14px}
#ninjaCard .cardFacts dl{display:grid;gap:9px}
#ninjaCard .cardFacts dl>div{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:baseline;gap:12px;margin:0;padding:11px 12px;white-space:nowrap;overflow:visible;border-left:3px solid #7b8d76;background:linear-gradient(90deg,#fffdf0d9,#fffbed8f);box-shadow:0 2px 8px #806f4930}
#ninjaCard .cardFacts dt,#ninjaCard .cardFacts dd,#ninjaCard .cardFacts dd small{white-space:nowrap;line-height:1.35}
#ninjaCard .cardFacts dt{margin:0;color:#53624f;letter-spacing:.075em}
#ninjaCard .cardFacts dd{min-width:0}
@media(max-width:700px){#ninjaCard .cardMain{grid-template-columns:1fr}#ninjaCard .cardFacts dl>div{grid-template-columns:max-content minmax(0,1fr);gap:10px}}
@media(max-width:420px){#ninjaCard .cardFacts dl>div{padding:9px 7px;gap:7px}#ninjaCard .cardFacts dt{font-size:11px}#ninjaCard .cardFacts dd,#ninjaCard .cardFacts dd small{font-size:12px}}

/* v140: stronger card hierarchy and legible photographic score overlays. */
#ninjaCard .cardNation .cardVillage{width:86px;height:76px}
#ninjaCard .cardFacts dl>div{grid-template-columns:160px minmax(0,1fr)}
#ninjaCard .cardFacts dt{text-align:left}
#ninjaCard .cardPortrait h2{margin-bottom:14px}
#ninjaCard .cardSignature{margin-top:5px}
#ninjaCard .cardPreferred img{width:135px;height:205px}
#ninjaCard .cardPreferred img.shuriken{width:140px;height:140px}
#ninjaCard .cardPreferred img.kunai{width:215px;height:215px}
#ninjaCard .cardBottom{margin-top:-8px;grid-template-columns:65px minmax(0,1fr) 112px;align-items:center}
#ninjaCard .ninjaRadar{max-width:300px;transform:translateY(-8px)}
#ninjaCard .ninjaRadar text{font-size:15px}
#ninjaCard .cardMissions{transform:translateY(-8px)}
#ninjaCard .cardMissions h3{font-size:22px}
#ninjaCard .cardMissions>div{font-size:25px;padding:8px 3px}
.game.is-review:not(.is-finished) #reviewIntro{align-self:end}
.missionFrame,.missionFrame:first-child{display:block}
.missionFrame img,.missionFrame:first-child img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.missionFrame>div{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:14px 20px 13px;background:linear-gradient(180deg,#1019140a 0,#101914b8 32%,#101914ed 100%);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border-top:1px solid #dbe8d522}
.missionFrame small{color:#d5e3ce;text-shadow:0 1px 3px #000}
.missionFrame strong{color:#fff7e5;text-shadow:0 2px 5px #000}
.missionFrame strong span,.missionFrame p{color:#dce8d5;text-shadow:0 1px 4px #000}
@media(max-width:700px){#ninjaCard .cardNation .cardVillage{width:62px;height:58px}#ninjaCard .cardFacts dl>div{grid-template-columns:145px minmax(0,1fr)}#ninjaCard .cardPreferred img.shuriken{width:125px;height:125px}#ninjaCard .ninjaRadar{transform:none}#ninjaCard .cardMissions{transform:none}}
@media(max-width:420px){#ninjaCard .cardFacts dl>div{grid-template-columns:112px minmax(0,1fr)}.missionFrame>div{padding:10px 12px}}

/* v141: contained facts, labelled equipment and larger final result typography. */
#ninjaCard .cardFacts dl>div{grid-template-columns:142px minmax(0,1fr);gap:8px}
#ninjaCard .cardPreferred{flex-direction:column;gap:3px;margin-top:2px;transform:translateY(-8px)}
#ninjaCard .cardPreferred small{display:block;color:#53624f;font:600 13px/1.2 Inter,Arial,sans-serif;letter-spacing:.075em;text-transform:uppercase;text-align:center}
#ninjaCard .cardPortrait h2{margin-bottom:16px}
#ninjaCard .cardSignature{margin-top:14px}
#ninjaCard .cardBottom{margin-top:-22px}
#ninjaCard .ninjaRadar,#ninjaCard .cardMissions{transform:translateY(-14px)}
.game.is-finished #reviewIntro .missionTitle h1{font-size:clamp(38px,4vw,68px)}
.game.is-finished .missionTitle .missionGrade{font-size:clamp(88px,8vw,138px)}
.game.is-finished .missionTotal strong{font-size:clamp(45px,5vw,78px)}
.game.is-finished .missionTotal span{font-size:clamp(27px,2.6vw,42px)}
@media(max-width:700px){#ninjaCard .cardFacts dl>div{grid-template-columns:132px minmax(0,1fr)}#ninjaCard .cardPreferred{transform:none}#ninjaCard .ninjaRadar,#ninjaCard .cardMissions{transform:translateY(-8px)}}
@media(max-width:420px){#ninjaCard .cardFacts dl>div{grid-template-columns:105px minmax(0,1fr);gap:5px}#ninjaCard .cardPreferred small{font-size:11px}}

/* v142: stronger village mark and precisely aligned lower card details. */
#ninjaCard .cardNation .cardVillage{width:129px;height:114px}
#ninjaCard .cardNation{min-height:118px}
#ninjaCard .cardMain{position:relative}
#ninjaCard .cardPreferred{position:absolute;left:0;bottom:44px;width:calc((100% - 14px) * .642857);margin:0;transform:translateY(50%);justify-content:center}
#ninjaCard .cardPreferred small{order:0;margin:0 0 5px;line-height:1.25}
#ninjaCard .cardPreferred img{order:1}
#ninjaCard .cardBottom{margin-top:-36px}
#ninjaCard .ninjaRadar,#ninjaCard .cardMissions{transform:translateY(-28px)}
@media(max-width:700px){#ninjaCard .cardNation .cardVillage{width:93px;height:87px}#ninjaCard .cardNation{min-height:95px}#ninjaCard .cardPreferred{position:static;width:auto;margin-top:2px;transform:none}#ninjaCard .cardBottom{margin-top:-28px}#ninjaCard .ninjaRadar,#ninjaCard .cardMissions{transform:translateY(-16px)}}

/* v143: collision-free identification card with deliberate spacing. */
#ninjaCard .ninjaIdentityCard{padding:18px 24px 26px}
#ninjaCard .cardNation{align-items:flex-start;min-height:0;margin:0 0 14px!important;padding:0 6px 0 0!important}
#ninjaCard .cardNation .cardVillage{width:129px;height:114px}
#ninjaCard .cardMain{position:static;align-items:start;gap:18px}
#ninjaCard .cardPreferred{position:static;width:100%;min-height:150px;margin:14px 0 0;transform:none;display:flex;align-items:center;justify-content:center}
#ninjaCard .cardPreferred small{display:none}
#ninjaCard .cardPreferred img{display:block;order:0;flex:none}
#ninjaCard .cardPreferred img.kunai{width:200px;height:200px;transform:rotate(-90deg)}
#ninjaCard .cardPreferred img.shuriken{width:130px;height:130px}
#ninjaCard .cardPortrait h2{margin:8px 0 10px}
#ninjaCard .cardSignature{height:88px;margin:0}
#ninjaCard .cardBottom{grid-template-columns:65px minmax(0,1fr) 94px;gap:12px;align-items:start;margin:24px 0 0}
#ninjaCard .ninjaRadar{max-width:280px;margin-top:18px;transform:none}
#ninjaCard .cardMissions{align-self:start;margin-top:46px;transform:none}
#ninjaCard .cardMissions h3{font-size:17px;margin-bottom:8px}
#ninjaCard .cardMissions>div{font-size:19px;gap:6px;padding:5px 3px}
#ninjaCard .cardAccountActions{margin:42px 0 0}
@media(max-width:700px){#ninjaCard .ninjaIdentityCard{padding:18px}#ninjaCard .cardNation{margin-bottom:14px!important}#ninjaCard .cardNation .cardVillage{width:93px;height:87px}#ninjaCard .cardFacts dl>div{grid-template-columns:145px minmax(0,1fr);gap:12px}#ninjaCard .cardPreferred{min-height:132px;margin-top:12px}#ninjaCard .cardPreferred img.kunai{width:180px;height:180px}#ninjaCard .cardBottom{margin-top:24px}#ninjaCard .ninjaRadar{margin-top:14px}#ninjaCard .cardMissions{margin-top:36px}}

/* v144: larger land identity and a shorter five-row card. */
#ninjaCard .cardNation .cardLand{width:108px;height:108px}
#ninjaCard .cardLandName{gap:14px}
#ninjaCard .cardLandName span{font-size:69px}
#ninjaCard .cardFacts dl{gap:7px}
#ninjaCard .cardFacts dl>div{padding-top:9px;padding-bottom:9px}
#ninjaCard .cardPreferred{min-height:112px;margin-top:8px;justify-content:flex-start}
#ninjaCard .cardPreferred img.kunai{width:105px;height:170px;margin-right:auto;transform:none}
#ninjaCard .cardPreferred img.shuriken{width:110px;height:110px}
#ninjaCard .cardSignature{margin-top:10px}
#ninjaCard .cardBottom{margin-top:8px;grid-template-columns:60px minmax(0,1fr) 88px;gap:10px}
#ninjaCard .ninjaRadar{max-width:245px;margin-top:0}
#ninjaCard .ninjaRadar text{font-size:13px}
#ninjaCard .cardMissions{margin-top:16px}
#ninjaCard .cardMissions h3{font-size:16px;margin-bottom:6px}
#ninjaCard .cardMissions>div{font-size:17px;padding:4px 3px}
#ninjaCard .cardAccountActions{margin-top:18px}
@media(max-width:700px){#ninjaCard .cardNation .cardLand{width:84px;height:84px}#ninjaCard .cardLandName span{font-size:52px}#ninjaCard .cardPreferred{min-height:104px;margin-top:8px}#ninjaCard .cardPreferred img.kunai{width:92px;height:150px}#ninjaCard .cardBottom{margin-top:8px}#ninjaCard .ninjaRadar{max-width:235px;margin-top:0}#ninjaCard .cardMissions{margin-top:14px}#ninjaCard .cardAccountActions{margin-top:16px}}

/* v145: tighter top identity and raised lower summary. */
#ninjaCard .ninjaIdentityCard{padding:10px 24px 18px}
#ninjaCard .cardNation{margin-bottom:7px!important}
#ninjaCard .cardNation .cardLand{width:81px;height:81px}
#ninjaCard .cardLandName{gap:11px}
#ninjaCard .cardLandName span{font-size:52px}
#ninjaCard .cardBottom{margin-top:-34px}
#ninjaCard .cardAccountActions{margin-top:58px}
#ninjaCard .ninjaRadar{margin-top:0}
#ninjaCard .cardMissions{margin-top:12px}
@media(max-width:700px){#ninjaCard .ninjaIdentityCard{padding:10px 18px 16px}#ninjaCard .cardNation{margin-bottom:7px!important}#ninjaCard .cardNation .cardLand{width:63px;height:63px}#ninjaCard .cardLandName span{font-size:39px}#ninjaCard .cardMain{margin-top:0}#ninjaCard .cardBottom{margin-top:0}#ninjaCard .cardAccountActions{margin-top:14px}#ninjaCard .cardMissions{margin-top:10px}}

/* v146: optical emblem alignment and identical tool-card geometry. */
#ninjaCard .cardNation .cardVillage{transform:translateY(-28px)}
#ninjaCard .cardNation{margin-bottom:-21px!important}
#ninjaCard .cardPreferred{height:170px;min-height:170px}
#ninjaCard .cardPreferred img.shuriken{margin-right:auto}
#ninjaCard .cardBottom{margin-top:-92px}
#ninjaCard .cardAccountActions{margin-top:116px}
@media(max-width:700px){#ninjaCard .cardNation .cardVillage{transform:translateY(-8px)}#ninjaCard .cardNation{margin-bottom:-1px!important}#ninjaCard .cardPreferred{height:150px;min-height:150px}#ninjaCard .cardBottom{margin-top:0}#ninjaCard .cardAccountActions{margin-top:14px}}

/* v147: viewport-height card with more legible radar labels. */
#ninjaCard .cardPreferred{height:150px;min-height:150px}
#ninjaCard .ninjaRadar{max-width:210px}
#ninjaCard .ninjaRadar text{font-size:15px}
#ninjaCard .cardMissions{margin-top:8px}
#ninjaCard .ninjaIdentityCard{padding-bottom:12px}
#ninjaCard .cardAccountActions{margin-top:124px}
@media(min-width:701px){#ninjaCard{overflow:hidden}}
@media(max-width:700px){#ninjaCard .cardPreferred{height:132px;min-height:132px}#ninjaCard .ninjaRadar{max-width:215px}#ninjaCard .ninjaIdentityCard{padding-bottom:14px}}

/* v149: larger, airier statistics chart and a lower missions summary. */
#ninjaCard .ninjaRadar{max-width:273px;overflow:visible}
#ninjaCard .ninjaRadar text{font-size:19.5px}
#ninjaCard .cardMissions{margin-top:42px}
@media(max-width:700px){#ninjaCard .ninjaRadar{max-width:280px}#ninjaCard .ninjaRadar text{font-size:19px}#ninjaCard .cardMissions{margin-top:40px}}

/* v150: audit-driven responsive and accessibility hardening. */
.roundProgress{margin:0;color:#f3e7c8;font:800 12px/1 Inter,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.generatedSeal{display:flex;align-items:center;justify-content:center;gap:12px;margin:10px 0 0;padding:10px 12px;border:1px dashed #9d8961;background:#f7edce}
.generatedSeal p{margin:0;font:600 12px/1.35 Inter,Arial,sans-serif;color:#5b4d39}
#ninjaGate .generatedSeal button{min-height:44px;padding:8px 14px;white-space:nowrap;background:#d6dfc6;color:#263a32;border:1px solid #75866f}
@media(max-width:1024px){
 #soundToggle{top:12px;right:12px;bottom:auto}
 .maptools button{width:44px;height:44px;min-width:44px;min-height:44px}
}
@media(max-width:600px){
 #ninjaSetup .villageButtons{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
 #ninjaGate #ninjaSetup .villageButtons button{min-height:48px;padding:6px 4px;font-size:10px}
 #ninjaSetup .villageButtons img{height:20px;width:24px;margin-bottom:2px}
 #ninjaSetup #villageDetails:not(:has(#registrationRanks figure)){display:block;min-height:0;grid-template-rows:none;padding:14px 12px}
 #ninjaSetup #villageDetails:not(:has(#registrationRanks figure)) #villageDescription{min-height:0}
 .generatedSeal{align-items:stretch;flex-direction:column;text-align:center}
 .mapTop{gap:8px;flex-wrap:wrap}
 .roundProgress{order:-1;width:100%}
}

/* v151: balanced identity card and restored game-stage hierarchy. */
#ninjaCard .ninjaIdentityCard{padding-bottom:24px}
#ninjaCard .cardNation{align-items:center;margin-bottom:8px!important}
#ninjaCard .cardNation .cardVillage{transform:none}
#ninjaCard .cardPreferred{height:122px;min-height:122px;margin-top:4px}
#ninjaCard .cardBottom{margin-top:-42px;margin-bottom:2px}
#ninjaCard .cardAccountActions{margin-top:72px}
#ninjaCard .cardMissions{margin-top:28px}
.scene{position:relative}
.game:not(.is-review) .sceneColumn{padding-top:26px}
.scene .roundProgress{position:absolute;z-index:4;top:-24px;right:0;text-align:right}
.mapTop{flex-wrap:nowrap}
@media(max-width:700px){
 #ninjaCard .ninjaIdentityCard{padding-bottom:22px}
 #ninjaCard .cardNation .cardVillage{transform:none}
 #ninjaCard .cardPreferred{height:112px;min-height:112px}
 #ninjaCard .cardBottom{margin-top:-16px;margin-bottom:4px}
 #ninjaCard .cardAccountActions{margin-top:38px}
 #ninjaCard .cardMissions{margin-top:24px}
 .scene .roundProgress{top:-20px;right:0}
 .mapTop{flex-wrap:nowrap}
}

/* v152: compact identity footer, visible round label and staged mission report. */
#ninjaCard{overflow:auto}
#ninjaCard .ninjaIdentityCard{box-sizing:border-box;min-height:100%;padding-bottom:34px;border-bottom:18px solid #65957e}
#ninjaCard .cardPreferred{display:none!important}
#ninjaCard .cardBottom{grid-template-columns:92px minmax(0,1fr) 104px;align-items:start;margin-top:12px;margin-bottom:0}
#ninjaCard .cardAccountActions{display:flex;align-items:center;gap:8px;margin:18px 0 0}
#ninjaCard .cardAccountActions .cardSettings,#ninjaCard .cardAccountActions .cardLogout{display:grid;place-items:center;box-sizing:border-box;width:42px;height:42px;min-width:42px;padding:0;border:1px solid #75866f;border-radius:7px;background:#d6dfc6;color:#263a32;font:700 24px/1 Inter,Arial,sans-serif;text-decoration:none}
#ninjaCard .cardAccountActions .cardLogout{font-size:28px}
#ninjaCard .ninjaRadar{max-width:300px;margin:-18px 0 0 -28px;transform:none}
#ninjaCard .cardMissions{margin-top:70px;transform:none}
.game:not(.is-review) .sceneColumn{padding-top:36px}
.scene .roundProgress{top:-30px;right:8px;display:block!important;color:#f3e7c8;font-size:14px}
.missionGrade{transition:opacity .22s ease,transform .72s cubic-bezier(.18,.89,.32,1.28)}
.missionGrade.gradeWaiting{opacity:0;transform:translateY(-180px) rotate(-7deg)}
.missionOutcome{transition:opacity .22s ease,transform .72s cubic-bezier(.18,.89,.32,1.18)}
.missionOutcome.outcomeWaiting{opacity:0;transform:translateY(-180px)}
#summoningClouds i{animation-duration:.72s;animation-timing-function:cubic-bezier(.16,.72,.28,1)}
#summoningClouds.clearing i{animation-duration:.92s;animation-timing-function:cubic-bezier(.42,0,.24,1)}
@keyframes smokeEnter{0%{opacity:0;transform:translate3d(-2vw,8vh,0) rotate(var(--spin)) scale(.48)}45%{opacity:.9;transform:translate3d(1vw,-1vh,0) rotate(calc(var(--spin) * -.16)) scale(1.06)}72%{opacity:1;transform:translate3d(-.4vw,.6vh,0) rotate(calc(var(--spin) * .06)) scale(1.16)}100%{opacity:1;transform:translate3d(0,0,0) rotate(0deg) scale(1.2)}}
@keyframes smokeExit{0%{opacity:1;transform:translate3d(0,0,0) rotate(0deg) scale(1.2)}38%{opacity:.98;transform:translate3d(.8vw,-1.5vh,0) rotate(calc(var(--spin) * .05)) scale(1.27)}100%{opacity:0;transform:translate3d(-2vw,-12vh,0) rotate(calc(var(--spin) * -.12)) scale(1.52)}}
@media(max-width:700px){#ninjaCard .ninjaIdentityCard{padding-bottom:28px;border-bottom-width:14px}#ninjaCard .cardBottom{grid-template-columns:88px minmax(0,1fr) 92px;margin-top:16px}#ninjaCard .cardAccountActions{margin-top:16px}#ninjaCard .ninjaRadar{max-width:255px;margin:-10px 0 0 -20px}#ninjaCard .cardMissions{margin-top:58px}.scene .roundProgress{top:-28px}}

/* v153: the complete ID card stays visible without an internal scrollbar. */
#ninjaCard{overflow:hidden}
#ninjaCard .ninjaIdentityCard{height:calc(100% - 24px);min-height:0;padding:10px 24px 16px;overflow:hidden;display:grid;grid-template-rows:auto auto minmax(0,1fr);align-content:start}
#ninjaCard .cardNation{margin-bottom:5px!important}
#ninjaCard .cardNation .cardVillage{width:82px;height:72px}
#ninjaCard .cardNation .cardLand{width:72px;height:72px}
#ninjaCard .cardLandName span{font-size:46px}
#ninjaCard .cardMain{gap:14px}
#ninjaCard .cardFacts dl{gap:5px}
#ninjaCard .cardFacts dl>div{padding:7px 10px}
#ninjaCard .cardPhotoFrame{max-width:190px;margin-left:auto}
#ninjaCard .cardSignature{height:56px;margin-top:7px}
#ninjaCard .cardBottom{align-self:start;display:grid;grid-template-columns:minmax(0,1fr) 104px;grid-template-rows:auto auto;column-gap:10px;row-gap:0;margin:-4px 0 0}
#ninjaCard .ninjaRadar{grid-column:1;grid-row:1;justify-self:start;width:235px;max-width:100%;margin:-12px 0 -24px -22px}
#ninjaCard .ninjaRadar text{font-size:17px}
#ninjaCard .cardAccountActions{grid-column:1;grid-row:2;justify-self:start;margin:0;z-index:1}
#ninjaCard .cardMissions{grid-column:2;grid-row:1/3;align-self:start;margin:18px 0 0}
#ninjaCard .cardMissions h3{font-size:16px;margin-bottom:5px}
#ninjaCard .cardMissions>div{font-size:17px;padding:4px 3px}
@media(max-height:760px) and (min-width:701px){
 #ninjaCard .ninjaIdentityCard{padding-top:7px;padding-bottom:12px}
 #ninjaCard .cardNation .cardVillage{width:70px;height:60px}
 #ninjaCard .cardNation .cardLand{width:60px;height:60px}
 #ninjaCard .cardLandName span{font-size:39px}
 #ninjaCard .cardFacts dl>div{padding:5px 9px}
 #ninjaCard .cardFacts dt{font-size:12px}
 #ninjaCard .cardFacts dd{font-size:15px}
 #ninjaCard .cardFacts dd small{font-size:13px}
 #ninjaCard .cardPhotoFrame{max-width:165px}
 #ninjaCard .cardSignature{height:48px;margin-top:5px}
 #ninjaCard .ninjaRadar{width:215px;margin-top:-15px;margin-bottom:-31px}
 #ninjaCard .ninjaRadar text{font-size:16px}
 #ninjaCard .cardMissions{margin-top:10px}
}
@media(max-width:700px){
 #ninjaCard{overflow:hidden}
 #ninjaCard .ninjaIdentityCard{height:calc(100% - 16px);padding:8px 16px 12px}
 #ninjaCard .cardNation .cardVillage{width:60px;height:54px}
 #ninjaCard .cardNation .cardLand{width:54px;height:54px}
 #ninjaCard .cardLandName span{font-size:34px}
 #ninjaCard .cardMain{grid-template-columns:minmax(0,1.55fr) minmax(125px,1fr);gap:10px}
 #ninjaCard .cardFacts{order:initial}
 #ninjaCard .cardPortrait{order:initial;width:auto;margin:0}
 #ninjaCard .cardFacts dl>div{grid-template-columns:105px minmax(0,1fr);gap:5px;padding:5px 7px}
 #ninjaCard .cardFacts dt{font-size:10px}
 #ninjaCard .cardFacts dd,#ninjaCard .cardFacts dd small{font-size:11px}
 #ninjaCard .cardPhotoFrame{max-width:150px}
 #ninjaCard .cardSignature{height:44px;margin-top:5px}
 #ninjaCard .cardBottom{grid-template-columns:minmax(0,1fr) 88px;margin-top:-2px}
 #ninjaCard .ninjaRadar{width:205px;margin:-12px 0 -31px -18px}
 #ninjaCard .ninjaRadar text{font-size:15px}
 #ninjaCard .cardMissions{margin-top:8px}
 #ninjaCard .cardMissions h3{font-size:14px}
 #ninjaCard .cardMissions>div{font-size:15px;padding:3px}
}

/* v154: fully framed, viewport-safe ID card and in-frame round marker. */
#ninjaCard{height:calc(100dvh - 40px);padding:12px;background:#65957e}
#ninjaCard .ninjaIdentityCard{width:100%;height:100%;margin:0;border-bottom:2px solid #263b32}
.game:not(.is-review) .sceneColumn{padding-top:0}
.game:not(.is-review) .scene .roundProgress{top:0;right:auto;left:0;min-width:88px;padding:8px 22px 9px 13px;background:#f78044;color:#172019;clip-path:polygon(0 0,100% 0,84% 100%,0 100%);font:800 13px/1 'Barlow Condensed',sans-serif;letter-spacing:.08em;text-align:left;text-shadow:none}
.game.is-review .scene .roundProgress{display:none!important}
@media(max-width:700px){
 #ninjaCard{height:calc(100dvh - 16px);padding:8px}
 #ninjaCard .ninjaIdentityCard{height:100%}
 .game:not(.is-review) .scene .roundProgress{min-width:76px;padding:7px 18px 8px 10px;font-size:12px}
}

/* v156: restore the identity scale and anchor the card statistics to the footer. */
#ninjaCard .ninjaIdentityCard{grid-template-rows:auto auto minmax(0,1fr);padding:18px 24px 20px}
#ninjaCard .cardNation{min-height:104px;margin-bottom:14px!important}
#ninjaCard .cardNation .cardVillage{width:129px;height:114px}
#ninjaCard .cardNation .cardLand{width:96px;height:96px}
#ninjaCard .cardLandName{gap:14px}
#ninjaCard .cardLandName span{font-size:63px}
#ninjaCard .cardMain{gap:18px}
#ninjaCard .cardFacts dl{gap:9px}
#ninjaCard .cardFacts dl>div{padding:11px 12px}
#ninjaCard .cardPhotoFrame{max-width:210px}
#ninjaCard .cardSignature{height:78px;margin-top:10px}
#ninjaCard .cardBottom{position:relative;align-self:stretch;display:grid;grid-template-columns:92px minmax(0,1fr) 104px;grid-template-rows:minmax(0,1fr);gap:12px;min-height:0;margin:8px 0 0;padding:8px 0 0}
#ninjaCard .cardAccountActions{grid-column:1;grid-row:1;align-self:end;justify-self:start;margin:0}
#ninjaCard .ninjaRadar{grid-column:1/3;grid-row:1;align-self:center;justify-self:center;width:min(100%,350px);max-width:none;margin:0;transform:none;overflow:visible}
#ninjaCard .ninjaRadar text{font-size:18px}
#ninjaCard .cardMissions{grid-column:3;grid-row:1;align-self:end;justify-self:stretch;margin:0;transform:none}
#ninjaCard .cardMissions h3{font-size:18px;margin-bottom:7px}
#ninjaCard .cardMissions>div{font-size:19px;padding:5px 3px}
@media(max-height:760px) and (min-width:701px){
 #ninjaCard .ninjaIdentityCard{padding:8px 20px 12px}
 #ninjaCard .cardNation{min-height:58px;margin-bottom:4px!important}
 #ninjaCard .cardNation .cardVillage{width:72px;height:62px}
 #ninjaCard .cardNation .cardLand{width:62px;height:62px}
 #ninjaCard .cardLandName{gap:9px}
 #ninjaCard .cardLandName span{font-size:40px}
 #ninjaCard .cardMain{gap:12px}
 #ninjaCard .cardFacts dl{gap:5px}
 #ninjaCard .cardFacts dl>div{padding:5px 9px}
 #ninjaCard .cardFacts dt{font-size:12px}
 #ninjaCard .cardFacts dd{font-size:15px}
 #ninjaCard .cardFacts dd small{font-size:13px}
 #ninjaCard .cardPhotoFrame{max-width:165px}
 #ninjaCard .cardSignature{height:48px;margin-top:5px}
 #ninjaCard .cardBottom{margin-top:2px;padding-top:2px}
 #ninjaCard .ninjaRadar{width:min(100%,230px)}
 #ninjaCard .ninjaRadar text{font-size:16px}
 #ninjaCard .cardMissions h3{font-size:15px;margin-bottom:4px}
 #ninjaCard .cardMissions>div{font-size:16px;padding:3px}
}
@media(max-width:700px){
 #ninjaCard .ninjaIdentityCard{padding:8px 16px 12px}
 #ninjaCard .cardNation{min-height:52px;margin-bottom:4px!important}
 #ninjaCard .cardNation .cardVillage{width:60px;height:54px}
 #ninjaCard .cardNation .cardLand{width:54px;height:54px}
 #ninjaCard .cardLandName{gap:8px}
 #ninjaCard .cardLandName span{font-size:34px}
 #ninjaCard .cardMain{gap:10px}
 #ninjaCard .cardFacts dl{gap:5px}
 #ninjaCard .cardFacts dl>div{padding:5px 7px}
 #ninjaCard .cardPhotoFrame{max-width:150px}
 #ninjaCard .cardSignature{height:44px;margin-top:5px}
 #ninjaCard .cardBottom{grid-template-columns:88px minmax(0,1fr) 88px;margin-top:2px;padding-top:2px}
 #ninjaCard .ninjaRadar{width:min(100%,215px)}
 #ninjaCard .ninjaRadar text{font-size:15px}
 #ninjaCard .cardMissions h3{font-size:14px}
 #ninjaCard .cardMissions>div{font-size:15px;padding:3px}
}

/* v157: enlarge the identity content while preserving the anchored account controls. */
#ninjaCard .cardNation{margin-bottom:8px!important}
#ninjaCard .cardNation .cardVillage{width:150px;height:132px}
#ninjaCard .cardNation .cardLand{width:115px;height:115px}
#ninjaCard .cardLandName span{font-size:75px}
#ninjaCard .cardMain{grid-template-columns:minmax(0,1fr) 230px;gap:14px}
#ninjaCard .cardFacts dl{gap:7px}
#ninjaCard .cardFacts dl>div{grid-template-columns:150px minmax(0,1fr);padding:13px 12px}
#ninjaCard .cardFacts dt{font-size:16px}
#ninjaCard .cardFacts dd{font-size:20px}
#ninjaCard .cardFacts dd small{font-size:17px}
#ninjaCard .cardPhotoFrame{max-width:240px}
#ninjaCard .cardSignature{height:90px;margin-top:7px}
#ninjaCard .cardBottom{margin-top:2px;padding-top:0}
#ninjaCard .ninjaRadar{width:min(100%,390px)}
#ninjaCard .ninjaRadar text{font-size:21px}
@media(max-height:760px) and (min-width:701px){
 #ninjaCard .cardNation{min-height:76px;margin-bottom:2px!important}
 #ninjaCard .cardNation .cardVillage{width:94px;height:81px}
 #ninjaCard .cardNation .cardLand{width:81px;height:81px}
 #ninjaCard .cardLandName{gap:10px}
 #ninjaCard .cardLandName span{font-size:52px}
 #ninjaCard .cardMain{grid-template-columns:minmax(0,1fr) 210px;gap:10px}
 #ninjaCard .cardFacts dl{gap:4px}
 #ninjaCard .cardFacts dl>div{grid-template-columns:142px minmax(0,1fr);padding:7px 9px}
 #ninjaCard .cardFacts dt{font-size:16px}
 #ninjaCard .cardFacts dd{font-size:19px}
 #ninjaCard .cardFacts dd small{font-size:17px}
 #ninjaCard .cardPhotoFrame{max-width:210px}
 #ninjaCard .cardSignature{height:62px;margin-top:4px}
 #ninjaCard .cardBottom{margin-top:0;padding-top:0}
 #ninjaCard .ninjaRadar{width:min(100%,299px)}
 #ninjaCard .ninjaRadar text{font-size:19px}
}
@media(max-width:700px){
 #ninjaCard .cardNation .cardVillage{width:72px;height:65px}
 #ninjaCard .cardNation .cardLand{width:65px;height:65px}
 #ninjaCard .cardLandName span{font-size:42px}
 #ninjaCard .cardMain{grid-template-columns:minmax(0,1fr) 180px;gap:8px}
 #ninjaCard .cardFacts dl>div{grid-template-columns:112px minmax(0,1fr);padding:6px 7px}
 #ninjaCard .cardFacts dt{font-size:13px}
 #ninjaCard .cardFacts dd{font-size:15px}
 #ninjaCard .cardFacts dd small{font-size:13px}
 #ninjaCard .cardPhotoFrame{max-width:180px}
 #ninjaCard .cardSignature{height:55px;margin-top:4px}
 #ninjaCard .ninjaRadar{width:min(100%,260px)}
 #ninjaCard .ninjaRadar text{font-size:17px}
}

/* v158: reference-matched desktop proportions and placement. */
@media(min-width:701px){
 #ninjaCard .ninjaIdentityCard{padding:14px 20px 18px;grid-template-rows:108px 278px minmax(0,1fr)}
 #ninjaCard .cardNation{min-height:0;height:108px;margin:0!important;align-items:center}
 #ninjaCard .cardNation .cardVillage{width:150px;height:88px}
 #ninjaCard .cardNation .cardLand{width:104px;height:104px}
 #ninjaCard .cardLandName{gap:12px}
 #ninjaCard .cardLandName span{font-size:68px}
 #ninjaCard .cardMain{grid-template-columns:minmax(0,1fr) 210px;gap:14px;align-items:start}
 #ninjaCard .cardFacts dl{gap:8px}
 #ninjaCard .cardFacts dl>div{grid-template-columns:142px minmax(0,1fr);gap:8px;padding:10px 11px}
 #ninjaCard .cardFacts dt{font-size:14px}
 #ninjaCard .cardFacts dd{font-size:18px}
 #ninjaCard .cardFacts dd small{font-size:15px}
 #ninjaCard .cardPhotoFrame{width:210px;max-width:none}
 #ninjaCard .cardSignature{height:66px;margin-top:9px}
 #ninjaCard .cardBottom{grid-template-columns:92px minmax(0,1fr) 104px;margin:0;padding:0}
 #ninjaCard .ninjaRadar{width:265px;max-width:none;align-self:center;justify-self:center;margin:0}
 #ninjaCard .ninjaRadar text{font-size:18px}
 #ninjaCard .cardAccountActions{align-self:end;margin:0}
 #ninjaCard .cardMissions{align-self:end;margin:0}
}

/* v159: measured alignment against the supplied Ninja-card reference. */
@media(min-width:701px){
 #ninjaCard .ninjaIdentityCard{padding:10px 20px 12px;grid-template-rows:104px 276px minmax(0,1fr)}
 #ninjaCard .cardNation{height:104px}
 #ninjaCard .cardNation .cardVillage{width:253px;height:115px;margin-left:-32px}
 #ninjaCard .cardNation .cardLand{width:90px;height:90px}
 #ninjaCard .cardLandName{gap:10px}
 #ninjaCard .cardLandName span{font-size:61px}
 #ninjaCard .cardFacts dl>div{grid-template-columns:120px minmax(0,1fr);padding:9px 10px}
 #ninjaCard .cardFacts dt{font-size:13px}
 #ninjaCard .cardFacts dd{font-size:16px}
 #ninjaCard .cardFacts dd small{font-size:14px}
 #ninjaCard .cardPhotoFrame{width:210px;height:195px;aspect-ratio:auto}
 #ninjaCard .cardSignature{height:65px;margin-top:8px}
 #ninjaCard .ninjaRadar{width:310px;transform:translate(-24px,-50px)}
 #ninjaCard .ninjaRadar text{font-size:18px}
 #ninjaCard .cardAccountActions{transform:translateY(6px)}
 #ninjaCard .cardMissions{transform:translateY(6px)}
 #ninjaCard .cardMissions h3{font-size:18px}
 #ninjaCard .cardMissions>div{font-size:19px;padding:6px 3px}
}

/* v163: public cards are proportional replicas; summoning smoke fades as one fluid veil. */
.playerAverage small{display:block;margin-top:3px;color:#7b7a69;font-size:8px;font-weight:500;white-space:nowrap}
.playerNinjaCard{container-type:inline-size;width:100%;max-width:none;margin:12px 0 20px;padding:10px;overflow:hidden;background:#65957e}
.playerNinjaCard .cardReplica{width:600px;height:650px;margin:0;zoom:.78;padding:10px 20px 12px;display:grid;grid-template-rows:104px 276px minmax(0,1fr);overflow:hidden;border:2px solid #263b32}
.playerNinjaCard .cardReplica .cardNation{height:104px;min-height:0;margin:0!important;align-items:center}
.playerNinjaCard .cardReplica .cardVillage{width:253px;height:115px;margin-left:-32px}
.playerNinjaCard .cardReplica .cardLand{width:90px;height:90px}
.playerNinjaCard .cardReplica .cardLandName{gap:10px}
.playerNinjaCard .cardReplica .cardLandName span{font-size:61px}
.playerNinjaCard .cardReplica .cardMain{grid-template-columns:minmax(0,1fr) 210px;gap:14px;align-items:start}
.playerNinjaCard .cardReplica .cardFacts dl{display:grid;gap:8px}
.playerNinjaCard .cardReplica .cardFacts dl>div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px;padding:9px 10px;overflow:visible;white-space:normal}
.playerNinjaCard .cardReplica .cardFacts dt{font-size:13px}
.playerNinjaCard .cardReplica .cardFacts dd{font-size:16px}
.playerNinjaCard .cardReplica .cardFacts dd small{font-size:14px}
.playerNinjaCard .cardReplica .cardPhotoFrame{width:210px;height:195px;max-width:none;aspect-ratio:auto}
.playerNinjaCard .cardReplica .cardSignature{height:65px;margin-top:8px}
.playerNinjaCard .cardReplica .cardBottom{position:relative;align-self:stretch;display:grid;grid-template-columns:92px minmax(0,1fr) 104px;grid-template-rows:minmax(0,1fr);gap:12px;min-height:0;margin:0;padding:0}
.playerNinjaCard .cardReplica .ninjaRadar{grid-column:1/3;grid-row:1;align-self:center;justify-self:center;width:310px;max-width:none;margin:0;transform:translate(-24px,-50px);overflow:visible}
.playerNinjaCard .cardReplica .ninjaRadar text{font-size:18px}
.playerNinjaCard .cardReplica .cardMissions{grid-column:3;grid-row:1;align-self:end;justify-self:stretch;margin:0;transform:translateY(6px)}
.playerNinjaCard .cardReplica .cardMissions h3{font-size:18px;margin-bottom:7px}
.playerNinjaCard .cardReplica .cardMissions>div{font-size:19px;padding:6px 3px}
@media(max-width:620px){.playerNinjaCard .cardReplica{zoom:.68}}

#summoningClouds::before{animation-duration:.78s;animation-timing-function:ease-in-out}
#summoningClouds i{animation-name:smokeEnter;animation-duration:.78s;animation-timing-function:cubic-bezier(.16,.72,.28,1);animation-delay:calc((var(--cloud-order,0)) * 22ms)}
#summoningClouds i:nth-child(1),#summoningClouds i:nth-child(5),#summoningClouds i:nth-child(9){--cloud-order:0}
#summoningClouds i:nth-child(2),#summoningClouds i:nth-child(6),#summoningClouds i:nth-child(10){--cloud-order:1}
#summoningClouds i:nth-child(3),#summoningClouds i:nth-child(7),#summoningClouds i:nth-child(11){--cloud-order:2}
#summoningClouds i:nth-child(4),#summoningClouds i:nth-child(8),#summoningClouds i:nth-child(12){--cloud-order:3}
#summoningClouds.clearing::before{animation-duration:.8s;animation-timing-function:ease-in-out}
#summoningClouds.clearing i{animation-name:smokeExit;animation-duration:.8s;animation-timing-function:cubic-bezier(.42,0,.24,1);animation-delay:calc((3 - var(--cloud-order,0)) * 18ms)}
@media(prefers-reduced-motion:reduce){#summoningClouds::before,#summoningClouds i,#summoningClouds.clearing::before,#summoningClouds.clearing i{animation-duration:.1s;animation-delay:0s}}

/* v176: the cloud transition is now rendered as layered anime smoke on Canvas. */
#summoningClouds::before,#summoningClouds::after,#summoningClouds i{display:none!important}
#smokeTransitionCanvas{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}

/* v177: exact cloud-transition presentation restored from site version 80. */
#summoningClouds::after{display:none!important}
#summoningClouds::before{
 display:block!important;content:'';position:absolute;inset:0;background:#fffdf7;opacity:0;
 will-change:opacity;animation:summonWhiteV80 .44s ease forwards
}
#summoningClouds i{
 display:block!important;position:absolute;left:var(--x);top:var(--y);width:62vmax;height:47vmax;
 margin:-23vmax 0 0 -31vmax;border-radius:0;box-shadow:none;
 background:transparent url('assets/summoning-smoke.svg') center/contain no-repeat;
 will-change:transform,opacity;backface-visibility:hidden;
 animation:smokeEnterV80 .44s cubic-bezier(.22,.61,.36,1) both;animation-delay:0s
}
#summoningClouds.clearing::before{animation:clearWhiteV80 .65s ease both}
#summoningClouds.clearing i{animation:smokeExitV80 .65s cubic-bezier(.4,0,.6,1) both;animation-delay:0s}
@keyframes smokeEnterV80{from{opacity:0;transform:translate3d(0,6vh,0) rotate(var(--spin)) scale(.55)}to{opacity:1;transform:translate3d(0,0,0) rotate(0deg) scale(1.2)}}
@keyframes smokeExitV80{from{opacity:1;transform:translate3d(0,0,0) rotate(0deg) scale(1.2)}to{opacity:0;transform:translate3d(0,-10vh,0) rotate(0deg) scale(1.48)}}
@keyframes summonWhiteV80{to{opacity:1}}
@keyframes clearWhiteV80{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){#summoningClouds::before,#summoningClouds i,#summoningClouds.clearing::before,#summoningClouds.clearing i{animation-duration:.1s}}

/* v178: grade-matched mission summon appears last in the report sequence. */
.game.is-finished .missionHero{position:relative;min-height:280px}
.missionSummon{position:absolute;z-index:2;right:0;top:50%;width:min(42%,250px);aspect-ratio:1;transform:translateY(-50%);visibility:hidden;pointer-events:none}
.missionSummon.summoned{visibility:visible}
.missionSummon img{position:absolute;z-index:2;inset:5%;width:90%;height:90%;object-fit:contain;opacity:0;filter:drop-shadow(0 12px 10px #0007)}
.missionSummon::before,.missionSummon::after{content:'';position:absolute;z-index:1;inset:-28%;background:url('assets/summoning-smoke.svg') center/contain no-repeat;opacity:0}
.missionSummon.summoned::before{animation:missionPigSmoke .72s cubic-bezier(.2,.75,.25,1) both}
.missionSummon.summoned::after{animation:missionPigSmokeSecond .78s .07s cubic-bezier(.2,.75,.25,1) both}
.missionSummon.summoned img{animation:missionPigArrive .58s .2s cubic-bezier(.18,.89,.32,1.28) both}
@keyframes missionPigSmoke{0%{opacity:0;transform:scale(.12) rotate(-16deg)}38%{opacity:1;transform:scale(.78) rotate(5deg)}100%{opacity:0;transform:scale(1.45) rotate(12deg)}}
@keyframes missionPigSmokeSecond{0%{opacity:0;transform:scale(.18) rotate(18deg)}42%{opacity:.9;transform:scale(.88) rotate(-4deg)}100%{opacity:0;transform:scale(1.55) rotate(-14deg)}}
@keyframes missionPigArrive{0%{opacity:0;transform:translateY(18px) scale(.18)}68%{opacity:1;transform:translateY(-5px) scale(1.06)}100%{opacity:1;transform:none}}
@media(max-width:650px){.game.is-finished .missionHero{min-height:230px}.missionSummon{width:min(38%,180px)}}
@media(prefers-reduced-motion:reduce){.missionSummon.summoned::before,.missionSummon.summoned::after{display:none}.missionSummon.summoned img{animation-duration:.1s;animation-delay:0s}}

/* v164: fit the complete public card and animate one composited smoke layer. */
.leaderboardRows:has(.playerNinjaCard){max-height:none}
.playerNinjaCard{height:478px;padding:8px}
.playerNinjaCard .cardReplica{zoom:1;transform:scale(.7);transform-origin:top left}
@media(max-width:620px){.playerNinjaCard{height:420px}.playerNinjaCard .cardReplica{zoom:1;transform:scale(.61)}}

#summoningClouds i{display:none}
#summoningClouds::after{content:'';position:absolute;inset:-12%;background:url('assets/summoning-smoke.svg') center/44vmax auto repeat;opacity:0;transform:translate3d(0,5vh,0) scale(.96);will-change:transform,opacity;backface-visibility:hidden;animation:smokeVeilIn .9s cubic-bezier(.2,.7,.25,1) forwards}
#summoningClouds.clearing::after{animation:smokeVeilOut .8s cubic-bezier(.4,0,.3,1) forwards}
@keyframes smokeVeilIn{from{opacity:0;transform:translate3d(0,5vh,0) scale(.96)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes smokeVeilOut{from{opacity:1;transform:translate3d(0,0,0) scale(1)}to{opacity:0;transform:translate3d(0,-4vh,0) scale(1.04)}}
@media(prefers-reduced-motion:reduce){#summoningClouds::after,#summoningClouds.clearing::after{animation-duration:.1s}}

/* v165: smaller complete ranking card; classic clouds remain game-start only. */
.playerNinjaCard{height:292px}
.playerNinjaCard .cardReplica{transform:scale(.42)}
@media(max-width:620px){.playerNinjaCard{height:266px}.playerNinjaCard .cardReplica{transform:scale(.38)}}
#summoningClouds::after{display:none}
#summoningClouds i{display:block}

/* v166: public-card graph clearance and Mist-only village mark sizing. */
.playerNinjaCard .cardReplica .ninjaRadar{transform:translate(-24px,10px)}
#ninjaCard .ninjaIdentityCard.village-mist .cardVillage{transform:scale(.8)}

/* v167: even public-card frame and Mist-specific symbol placement. */
.playerNinjaCard{width:268px;max-width:100%}
.playerNinjaCard .cardReplica.village-mist .cardVillage{transform:scale(.75)}
#ninjaCard .ninjaIdentityCard.village-mist .cardVillage{transform:translateX(-24px) scale(.8)}
@media(max-width:620px){.playerNinjaCard{width:244px}}

/* v168: test-mode village card gallery. */
.testVillageCards{margin-top:16px;padding-top:14px;border-top:1px solid #d9bc7955}
.testVillageCards>b{display:block;margin-bottom:9px;color:#e8d59f;font-size:13px;letter-spacing:.04em}
.testVillageCards>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
#ninjaGate .testNinjaCard .testVillageCards button{display:block;width:100%;margin:0;padding:9px 6px;background:#3e6657;font-size:12px}

/* v169: village marks share the facts-column left edge, with nation-specific scale. */
#ninjaCard .ninjaIdentityCard .cardVillage,
.playerNinjaCard .cardReplica .cardVillage{margin-left:0;object-position:left center;transform-origin:left center}
#ninjaCard .ninjaIdentityCard.village-mist .cardVillage{transform:scale(.8)}
.playerNinjaCard .cardReplica.village-mist .cardVillage{transform:scale(.75)}
#ninjaCard .ninjaIdentityCard.village-sand .cardVillage,
.playerNinjaCard .cardReplica.village-sand .cardVillage{transform:scale(.75)}
#ninjaCard .ninjaIdentityCard.village-cloud .cardVillage,
.playerNinjaCard .cardReplica.village-cloud .cardVillage{transform:scale(1.2)}

/* v170: keep missions inside the frame and further reduce the Mist mark. */
#ninjaCard .cardMissions{transform:translate(-18px,6px)}
#ninjaCard .ninjaIdentityCard.village-mist .cardVillage{transform:scale(.68)}
.playerNinjaCard .cardReplica.village-mist .cardVillage{transform:scale(.6375)}

/* v171: balance the card's horizontal gutters and lift the Cloud mark. */
#ninjaCard .ninjaIdentityCard>.cardNation,
#ninjaCard .ninjaIdentityCard>.cardMain,
#ninjaCard .ninjaIdentityCard>.cardBottom{position:relative;left:-12px}
#ninjaCard .ninjaIdentityCard.village-cloud .cardVillage{transform:translateY(-7px) scale(1.2)}

/* v172: document-anchored training targets and an opening mission-score scroll. */
#trainingTarget{position:absolute}
.game.is-finished #reviewStats.missionScoreScroll{
 margin:12px 0;padding:42px 34px;border:0;border-radius:2px;
 background:linear-gradient(90deg,#c8b98b 0 2%,#efe7ca 5% 95%,#c8b98b 98% 100%);
 box-shadow:inset 26px 0 28px -25px #665a3688,inset -26px 0 28px -25px #665a3688,inset 0 26px 28px -25px #665a3688,inset 0 -26px 28px -25px #665a3688,0 12px 30px #0005;
 color:#26352b
}
.game.is-finished #reviewStats.missionScoreScroll::before,
.game.is-finished #reviewStats.missionScoreScroll::after{display:none}
.game.is-finished #reviewStats.missionScoreScroll .reviewScore{position:relative;z-index:1}
.game.is-finished #reviewStats.missionScoreScroll .reviewScore small,
.game.is-finished #reviewStats.missionScoreScroll .reviewScore span{color:#66705d}
.game.is-finished #reviewStats.missionScoreScroll .reviewScore strong{color:#18271e}
@media(max-width:650px){.game.is-finished #reviewStats.missionScoreScroll{grid-template-columns:1fr;padding:38px 24px;margin:10px 0}}

/* v175: a simple six-puff smoke curtain that bursts upward and merges naturally. */
#summoningClouds::before{background:#f7f7f3;animation:smokeCurtainFill .58s ease-out both}
#summoningClouds i{
 display:block;width:42vmax;height:34vmax;margin:-17vmax 0 0 -21vmax;border-radius:0;box-shadow:none;
 background:transparent url('assets/summoning-smoke.svg') center/contain no-repeat;
 will-change:transform,opacity;animation:smokeCurtainBurst .58s cubic-bezier(.16,.76,.24,1) both;
 animation-delay:calc(var(--cloud-order,0) * 24ms)
}
#summoningClouds i:nth-child(n+7){display:none}
#summoningClouds i:nth-child(1){left:5%;top:70%;--cloud-order:1}#summoningClouds i:nth-child(2){left:23%;top:62%;--cloud-order:0}#summoningClouds i:nth-child(3){left:41%;top:68%;--cloud-order:1}
#summoningClouds i:nth-child(4){left:59%;top:61%;--cloud-order:0}#summoningClouds i:nth-child(5){left:77%;top:68%;--cloud-order:1}#summoningClouds i:nth-child(6){left:95%;top:63%;--cloud-order:0}
#summoningClouds.clearing::before{animation:smokeCurtainFade .7s ease-in both}
#summoningClouds.clearing i{animation:smokeCurtainClear .7s cubic-bezier(.4,0,.32,1) both;animation-delay:calc(var(--cloud-order,0) * 12ms)}
@keyframes smokeCurtainBurst{0%{opacity:0;transform:translate3d(0,18vh,0) scale(.18)}42%{opacity:1;transform:translate3d(0,-2vh,0) scale(.82)}100%{opacity:1;transform:translate3d(0,-8vh,0) scale(1.65)}}
@keyframes smokeCurtainFill{0%,48%{opacity:0}100%{opacity:.88}}
@keyframes smokeCurtainClear{from{opacity:1;transform:translate3d(0,-8vh,0) scale(1.65)}to{opacity:0;transform:translate3d(0,-20vh,0) scale(1.92)}}
@keyframes smokeCurtainFade{from{opacity:.88}to{opacity:0}}
@media(prefers-reduced-motion:reduce){#summoningClouds::before,#summoningClouds i,#summoningClouds.clearing::before,#summoningClouds.clearing i{animation-duration:.1s;animation-delay:0s}}

/* v179: keep the rank summon inside its own clear space. */
.missionSummon{right:2%;top:64%;width:min(28%,170px)}
@media(max-width:650px){.missionSummon{right:1%;top:68%;width:min(30%,125px)}}

/* v181: Fūton cycles the scroll-menu scenery while its dust veil is opaque. */
body.menu-mode::before{background-image:linear-gradient(#0814219d,#070c16c9),var(--menu-background,url('assets/world-clean.png'));background-position:center,center var(--menu-background-y,42%);background-size:auto,cover}
body:not(.review-mode)>header .crest,body.menu-mode>header .crest{display:none!important}
body:not(.review-mode)>header .brand,body.menu-mode>header .brand{transform:translate(9px,-20px)}

/* Test-mode comparison of every mission result treatment. */
#testSessionNotice #testMissionRanks{display:block;margin:10px auto 0;padding:7px 12px;border:1px solid #b69f68;border-radius:6px;background:#284c3e;color:#f5edcf}
#missionRankPreview{width:min(1060px,94vw);max-width:none;max-height:90vh;padding:25px;background:#101512;border:1px solid #667360;color:#edf1e8}
#missionRankPreview h2{margin:0 0 18px;font:700 30px 'Barlow Condensed',sans-serif}
#missionRankPreview .close{position:absolute;right:16px;top:10px}
.missionRankPreviewGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.missionRankPreviewGrid .missionHero{display:block;position:relative;min-height:210px;padding:18px;border:1px solid #3e4b40;border-radius:9px;background:#18201b;overflow:hidden}
.missionRankPreviewGrid .missionHero>div{position:relative;z-index:2}.missionRankPreviewGrid small{display:block;color:#dfe6da;font:700 17px 'Barlow Condensed',sans-serif}.missionRankPreviewGrid .missionGrade{display:block;width:max-content;margin:12px 0 6px;padding:0;font-size:78px}.missionRankPreviewGrid strong{display:block;color:var(--grade);font:700 22px 'Barlow Condensed',sans-serif}
.missionRankPreviewGrid img{position:absolute;right:5px;bottom:4px;width:43%;height:65%;object-fit:contain;filter:drop-shadow(0 8px 8px #0007)}
@media(max-width:750px){.missionRankPreviewGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.missionRankPreviewGrid .missionHero{min-height:180px}.missionRankPreviewGrid .missionGrade{font-size:64px}}

/* Interactive Konoha checkpoint shown before registration and the scroll lobby. */
body.auth-mode{min-height:100dvh;background:#07111a url('assets/entrance/konoha-checkpoint-v186.jpg') center/cover fixed no-repeat;overflow:hidden}
body.auth-mode::before{content:'';position:fixed;z-index:0;inset:0;background:linear-gradient(90deg,#06101ac4 0%,#07121c73 46%,#0610199e 100%);pointer-events:none}
body.auth-mode>header{position:relative;z-index:8;justify-content:flex-start!important;padding:18px 28px!important}body.auth-mode>header .brand{filter:drop-shadow(0 3px 5px #000a)}
body.auth-mode #ninjaGate{position:relative;z-index:4;min-height:calc(100dvh - 100px);padding:0}
body.auth-mode #authChoices{position:fixed;z-index:9;right:4vw;bottom:17vh;width:min(390px,42vw);padding:22px;border:2px solid #80663f;border-radius:8px;background:linear-gradient(#e9d6aee8,#c8aa76ed);box-shadow:0 16px 42px #000b,inset 0 0 0 2px #f5e1b54a;color:#30291f;text-align:center}
body.auth-mode .authChoices small{display:block;color:#7b3128;font:700 11px Inter,sans-serif;letter-spacing:.18em}body.auth-mode .authChoices h1{margin:8px 0 7px;font:400 clamp(23px,2.4vw,34px) var(--ninja-font);color:#27362e}body.auth-mode .authChoices p{margin:0 0 14px;font-size:13px;line-height:1.5;color:#5d513f}
body.auth-mode #authProviders{margin:10px 0 0}body.auth-mode #authProviders a,body.auth-mode #authProviders button{display:block;width:100%;margin:8px 0;padding:13px 12px;border-width:1px;border-radius:6px;font-size:15px}body.auth-mode #authProviders p{margin:10px 0 0;color:#665b49;font-size:11px}
body.auth-mode #authMessage{margin:0 0 12px;color:#4d4839;font-weight:700}body.auth-mode #gateSignOut{display:block;margin:12px 0 0;color:#70483b;font-size:11px}
body.auth-mode #enterLobby{position:fixed;z-index:12;left:50%;top:56%;width:min(330px,34vw);transform:translate(-50%,-50%);border-color:#d8bd72;background:linear-gradient(#5d876f,#315344);box-shadow:0 10px 28px #000b;font-family:var(--ninja-font);font-size:clamp(15px,1.5vw,22px);animation:checkpointInvite 1.8s ease-in-out infinite}
@keyframes checkpointInvite{50%{filter:brightness(1.18);transform:translate(-50%,-54%)}}
.villageDoors{position:fixed;z-index:5;left:36.7%;top:29%;width:27.7%;height:48%;display:flex;perspective:1000px;pointer-events:none}.villageDoors i{display:block;width:50%;height:100%;border:4px solid #293b31;background:repeating-linear-gradient(90deg,#486e54 0 18%,#3b6048 18% 21%);box-shadow:inset 0 0 35px #07110a88,0 10px 20px #0007;transition:transform .82s cubic-bezier(.65,.05,.36,1),opacity .2s .7s}.villageDoors i:first-child{transform-origin:left center;border-radius:2px 0 0 2px}.villageDoors i:last-child{transform-origin:right center;border-radius:0 2px 2px 0}.gateOpening .villageDoors i:first-child{transform:perspective(900px) rotateY(88deg)}.gateOpening .villageDoors i:last-child{transform:perspective(900px) rotateY(-88deg)}.gateOpening .villageDoors i{opacity:.15}
.fanNotice{position:fixed;z-index:20;right:22px;bottom:18px;display:none;max-width:390px;color:#94a3aa;text-align:right;font:12px/1.55 Inter,Arial,sans-serif;text-shadow:0 1px 2px #000}.fanNotice span{display:block}.fanNotice button{padding:0;border:0;background:none;color:#aab9c1;text-decoration:underline}.fanNotice strong{display:block;margin-top:3px;color:#46b997;font-size:14px}.menu-mode .fanNotice,.auth-mode .fanNotice{display:block}
body.auth-mode #testNinjaCard{max-height:32vh;overflow:auto;margin-top:14px;padding:12px;background:#243c31e6}body.auth-mode #testNinjaCard p{display:none}body.auth-mode #testNinjaCard button{padding:9px;font-size:12px}
body.auth-mode #ninjaRegistration{position:relative;z-index:14;max-height:calc(100dvh - 100px);overflow:auto;padding-top:24px}
@media(max-width:760px){body.auth-mode{background-position:43% center}body.auth-mode>header{justify-content:center!important}.villageDoors{left:23%;top:29%;width:54%;height:43%}body.auth-mode #authChoices{right:4vw;bottom:75px;width:92vw;max-height:48vh;overflow:auto;padding:16px}body.auth-mode #enterLobby{top:48%;width:70vw}.fanNotice{right:12px;bottom:8px;max-width:calc(100vw - 24px);font-size:10px}.fanNotice strong{font-size:12px}}
@media(prefers-reduced-motion:reduce){body.auth-mode #enterLobby{animation:none}.villageDoors i{transition:none}}

/* v187: living village gate and scroll-based identity checkpoint. */
body.auth-mode{background:#09151b;overflow:hidden}
body.auth-mode::before{display:none}
.gateScene{position:fixed;z-index:0;inset:-2.5%;overflow:hidden;background:#9fd6ef;transition:filter .55s ease,transform .55s ease}
.gateSceneImage{position:absolute;inset:0;background-position:center;background-size:cover;will-change:transform,opacity;animation:gateSceneBreathe 14s ease-in-out infinite alternate}
.gateClosed{background-image:url('assets/entrance/v187/konoha-gate-closed-v187.jpg');opacity:1;transition:opacity .7s ease}
.gateOpen{background-image:url('assets/entrance/v187/konoha-gate-open-v187.jpg');opacity:0;transition:opacity .7s ease}
.gate-authenticated .gateClosed,.gateOpening .gateClosed{opacity:0}.gate-authenticated .gateOpen,.gateOpening .gateOpen{opacity:1}
@keyframes gateSceneBreathe{from{transform:translate3d(-.35%,0,0) scale(1.025)}to{transform:translate3d(.35%,-.45%,0) scale(1.045)}}
.gateClouds{position:absolute;z-index:2;left:-16%;top:-7%;width:140%;height:28%;opacity:.56;background:radial-gradient(ellipse at 8% 60%,#fff 0 10%,transparent 11%),radial-gradient(ellipse at 31% 42%,#fff 0 12%,transparent 13%),radial-gradient(ellipse at 58% 55%,#f7fbff 0 13%,transparent 14%),radial-gradient(ellipse at 82% 38%,#fff 0 12%,transparent 13%);animation:gateCloudDrift 32s linear infinite;pointer-events:none}
@keyframes gateCloudDrift{from{transform:translateX(-6%)}to{transform:translateX(9%)}}
.gateTreeMotion{position:absolute;z-index:3;top:-4%;bottom:0;width:22%;opacity:.16;background:radial-gradient(ellipse at 45% 15%,#174b25 0 14%,transparent 15%),radial-gradient(ellipse at 24% 34%,#236c32 0 17%,transparent 18%),radial-gradient(ellipse at 56% 55%,#174b25 0 14%,transparent 15%);transform-origin:50% 0;animation:gateTreeSway 5.8s ease-in-out infinite alternate;pointer-events:none}.gateTreeMotion.left{left:-5%}.gateTreeMotion.right{right:-5%;animation-delay:-2.8s;transform:scaleX(-1)}
@keyframes gateTreeSway{from{rotate:-.7deg;translate:-.3% 0}to{rotate:.8deg;translate:.5% .2%}}
.gateShadows{position:absolute;z-index:4;inset:0;opacity:.13;background:linear-gradient(110deg,transparent 0 20%,#07110a 29% 34%,transparent 44% 57%,#07110a 65% 70%,transparent 78%);background-size:125% 100%;mix-blend-mode:multiply;animation:gateShadowSway 7s ease-in-out infinite alternate;pointer-events:none}
@keyframes gateShadowSway{from{background-position:0 0}to{background-position:11% 0}}
.gateLeaves{position:absolute;z-index:5;inset:0;overflow:hidden;pointer-events:none}.gateLeaves i{position:absolute;left:var(--leaf-x);top:-5%;width:10px;height:6px;border-radius:100% 0 100% 0;background:#448336;box-shadow:inset 2px 0 #8fc456;opacity:.8;animation:gateLeafFall var(--leaf-speed) linear var(--leaf-delay) infinite;will-change:transform}.gateLeaves i:nth-child(3n){background:#b3862e}.gateLeaves i:nth-child(4n){width:7px;height:4px}
@keyframes gateLeafFall{0%{transform:translate3d(0,-8vh,0) rotate(0);opacity:0}8%{opacity:.9}55%{transform:translate3d(7vw,52vh,0) rotate(360deg)}100%{transform:translate3d(-4vw,108vh,0) rotate(720deg);opacity:.15}}
body.identityPrompt .gateScene{filter:blur(10px) brightness(.58);transform:scale(1.035)}
body.identityPrompt>header{filter:blur(8px);opacity:.45;pointer-events:none}
body.registrationPrompt .gateScene{filter:blur(10px) brightness(.58);transform:scale(1.035)}
body.registrationPrompt>header{filter:blur(8px);opacity:.45;pointer-events:none}
body.auth-mode #identifyGate{position:fixed;z-index:12;left:50%;top:46%;transform:translate(-50%,-50%) rotate(-1deg);width:auto;margin:0;padding:8px 18px;border:0;background:transparent;color:#7c241d;font:700 clamp(22px,2.5vw,42px) var(--ninja-font);letter-spacing:.07em;text-shadow:0 2px #f1c17a,2px 3px 2px #30150b8c,-1px -1px #4c130f;animation:identifyBreathe 2.4s ease-in-out infinite;cursor:pointer}
body.auth-mode #identifyGate::after{content:'';position:absolute;left:8%;right:8%;bottom:3px;height:3px;background:#7b261f;opacity:.7;transform:rotate(-1deg);clip-path:polygon(0 20%,13% 70%,34% 28%,55% 75%,77% 31%,100% 65%,100% 100%,0 100%)}
@keyframes identifyBreathe{50%{filter:brightness(1.18);transform:translate(-50%,-53%) rotate(-1deg)}}
body.auth-mode #authChoices{position:fixed;z-index:30;left:50%;right:auto;top:50%;bottom:auto;width:min(560px,92vw);max-height:90vh;overflow:auto;transform:translate(-50%,-50%);padding:18px 24px 22px;border:1px solid #ceb878;border-radius:14px;background:linear-gradient(155deg,#10261fe8,#07120ff2);box-shadow:0 22px 70px #000d,inset 0 0 30px #72916b1f;color:#f5edcf;text-align:center;animation:identityPanelIn .4s ease both}
@keyframes identityPanelIn{from{opacity:0;transform:translate(-50%,-46%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
body.auth-mode #authChoices>.authChoices{display:block;position:relative}body.auth-mode #authChoices>.authChoices small{color:#d4b866}body.auth-mode #authChoices>.authChoices h1{margin:5px 0 4px;color:#f5edcf;font-size:clamp(22px,3vw,34px)}body.auth-mode #authChoices>.authChoices p{margin:0;color:#c9c2ac}
body.auth-mode #closeIdentity{position:absolute;right:-10px;top:-12px;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:#0b1713;color:#e8dab1;font:26px/1 Arial,sans-serif}
.identityScrolls{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:14px}.identityScrolls>p{margin:3px 0 0;color:#9da99c;font-size:11px}
.identityScroll{display:grid;grid-template-columns:82px 0fr;align-items:center;width:min(360px,100%);min-height:126px;overflow:hidden;transition:grid-template-columns .52s cubic-bezier(.2,.85,.25,1),filter .25s;filter:drop-shadow(0 8px 9px #0009)}.identityScroll.open{grid-template-columns:82px 1fr}.identityScroll:not(.open):hover{filter:brightness(1.1) drop-shadow(0 8px 9px #0009)}
body.auth-mode .identityScroll>button{position:relative;z-index:2;width:82px;height:126px;margin:0;padding:0;border:0;background:transparent;overflow:hidden}.identityScroll>button img{width:76px;height:220px;object-fit:contain;transform:translateY(-47px);transition:transform .48s ease}.identityScroll.open>button img{transform:translateY(-47px) scaleX(.92)}.identityScroll>button span{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);padding:2px 5px;border-radius:4px;background:#07120fc9;color:#fff5d6;font:700 10px Inter,sans-serif;letter-spacing:.05em}
.identityScrollPaper{min-width:0;height:94px;margin-left:-7px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(90deg,#cbbf98,#f2e6bf 9% 91%,#b7aa80);box-shadow:inset 0 5px 10px #705a2c35,inset 0 -5px 10px #705a2c35;opacity:0;transition:opacity .2s .22s}.identityScroll.open .identityScrollPaper{opacity:1}.identityScrollPaper a,.identityScrollPaper button{min-width:205px;margin:0!important;padding:14px 12px!important;border:1px solid #78643c!important;border-radius:3px!important;background:#365d4b!important;color:#fff2d2!important;font-size:14px!important;white-space:nowrap}.identityScroll.google .identityScrollPaper button{background:#6c7480!important;color:#e8e5dc!important}
body.auth-mode #authMessage:empty{display:none}
body.gate-authenticated #identifyGate{display:none}
body.auth-mode #enterLobby{position:fixed;z-index:12;left:50%;top:51%;width:min(430px,42vw);height:112px;margin:0;padding:18px 70px;transform:translate(-50%,-50%);border:0;border-radius:0;background:url('assets/scroll-green-v137.svg') center/100% 100% no-repeat;color:#fff0cf;box-shadow:none;filter:drop-shadow(4px 10px 10px #0009);font:clamp(16px,2vw,27px) var(--ninja-font);animation:checkpointInvite 1.8s ease-in-out infinite}
body.auth-mode #gateSignOut{position:fixed;z-index:12;left:50%;top:62%;width:min(230px,25vw);height:66px;margin:0;padding:18px 44px;transform:translateX(-50%);border:0;border-radius:0;background:url('assets/scroll-orange-v137.svg') center/100% 100% no-repeat;color:#fff1d2;font:15px var(--ninja-font);filter:drop-shadow(3px 7px 8px #0008)}
@keyframes checkpointInvite{50%{filter:brightness(1.15) drop-shadow(4px 10px 10px #0009);transform:translate(-50%,-54%)}}
.fanNotice{z-index:22}
body.auth-mode #testNinjaCard{position:fixed;z-index:12;left:50%;top:70%;width:min(330px,38vw);transform:translateX(-50%);max-height:22vh}
body.auth-mode #ninjaRegistration{position:relative;z-index:40;background:transparent;max-height:calc(100dvh - 90px)}
@media(max-width:760px){.gateSceneImage{background-position:50% center}.gateClouds{height:19%}body.auth-mode #identifyGate{top:45%;width:85vw}body.auth-mode #authChoices{padding:14px 16px}.identityScroll{min-height:105px;grid-template-columns:68px 0fr}.identityScroll.open{grid-template-columns:68px 1fr}body.auth-mode .identityScroll>button{width:68px;height:105px}.identityScroll>button img{width:62px;height:180px;transform:translateY(-38px)}.identityScroll.open>button img{transform:translateY(-38px) scaleX(.92)}.identityScrollPaper{height:78px}.identityScrollPaper a,.identityScrollPaper button{min-width:185px;font-size:12px!important}body.auth-mode #enterLobby{top:48%;width:80vw;height:90px}body.auth-mode #gateSignOut{top:57%;width:48vw}.fanNotice{display:none!important}body.auth-mode #testNinjaCard{top:65%;width:86vw}}
@media(prefers-reduced-motion:reduce){.gateSceneImage,.gateClouds,.gateTreeMotion,.gateShadows,.gateLeaves i,body.auth-mode #identifyGate{animation:none}}

/* v188: animate only details already painted into the supplied gate artwork. */
.gateScene{inset:0}.gateSceneImage{animation:none;will-change:opacity}
.gateNaturalMotion{position:absolute;z-index:2;inset:0;opacity:0;transition:opacity .7s ease;pointer-events:none}.gateClosedMotion{opacity:1}.gate-authenticated .gateClosedMotion,.gateOpening .gateClosedMotion{opacity:0}.gate-authenticated .gateOpenMotion,.gateOpening .gateOpenMotion{opacity:1}
.gateNaturalMotion i{position:absolute;inset:-1%;display:block;background-position:center;background-size:cover;background-repeat:no-repeat;will-change:transform}.gateClosedMotion i{background-image:url('assets/entrance/v187/konoha-gate-closed-v187.jpg')}.gateOpenMotion i{background-image:url('assets/entrance/v187/konoha-gate-open-v187.jpg')}
.naturalClouds{-webkit-mask-image:linear-gradient(to bottom,#000 0 12%,transparent 18%);mask-image:linear-gradient(to bottom,#000 0 12%,transparent 18%);animation:naturalCloudMove 28s ease-in-out infinite alternate}.gateOpenMotion .naturalClouds{-webkit-mask-image:linear-gradient(to bottom,#000 0 12%,transparent 18%),radial-gradient(ellipse 20% 17% at 50% 37%,#000 0 78%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0 12%,transparent 18%),radial-gradient(ellipse 20% 17% at 50% 37%,#000 0 78%,transparent 100%)}
@keyframes naturalCloudMove{from{transform:translate3d(-.55%,0,0) scale(1.012)}to{transform:translate3d(.7%,.12%,0) scale(1.018)}}
.naturalTreeLeft{clip-path:polygon(0 0,25% 0,23% 45%,30% 70%,46% 100%,0 100%);transform-origin:5% 78%;animation:naturalTreeLeftSway 5.5s ease-in-out infinite alternate}.naturalTreeRight{clip-path:polygon(75% 0,100% 0,100% 100%,54% 100%,70% 70%,77% 43%);transform-origin:95% 78%;animation:naturalTreeRightSway 6.2s ease-in-out -2.1s infinite alternate}
@keyframes naturalTreeLeftSway{from{transform:translate3d(-.08%,0,0) rotate(-.08deg)}to{transform:translate3d(.18%,-.08%,0) rotate(.12deg)}}
@keyframes naturalTreeRightSway{from{transform:translate3d(.08%,0,0) rotate(.08deg)}to{transform:translate3d(-.16%,-.07%,0) rotate(-.1deg)}}
.naturalShadows{opacity:.24;mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(ellipse 34% 28% at 34% 72%,#000 0 45%,transparent 100%),radial-gradient(ellipse 28% 25% at 67% 74%,#000 0 38%,transparent 100%),radial-gradient(ellipse 18% 28% at 29% 34%,#000 0 42%,transparent 100%);mask-image:radial-gradient(ellipse 34% 28% at 34% 72%,#000 0 45%,transparent 100%),radial-gradient(ellipse 28% 25% at 67% 74%,#000 0 38%,transparent 100%),radial-gradient(ellipse 18% 28% at 29% 34%,#000 0 42%,transparent 100%);animation:naturalShadowSway 5.5s ease-in-out infinite alternate}
@keyframes naturalShadowSway{from{transform:translate3d(-.12%,0,0) skewX(-.08deg)}to{transform:translate3d(.24%,.06%,0) skewX(.12deg)}}

/* Only the two supplied scrolls remain over the blurred gate. */
body.auth-mode #authChoices{width:min(620px,94vw);max-height:94vh;overflow:visible;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;animation:none}
.identityScrolls{gap:20px;margin:0}.identityScrolls>p,body.auth-mode #authChoices>.authChoices,body.auth-mode #closeIdentity{display:none!important}
.identityScroll{display:grid;grid-template-columns:112px 0fr;width:112px;min-height:286px;overflow:visible;transition:width .6s cubic-bezier(.35,0,.25,1),grid-template-columns .6s cubic-bezier(.35,0,.25,1);filter:drop-shadow(0 12px 13px #0009)}.identityScroll.open{grid-template-columns:112px 1fr;width:min(530px,90vw)}
body.auth-mode #ninjaGate .identityScroll>button{position:relative;z-index:2;width:112px;height:286px;margin:0;padding:0;border:0!important;border-radius:0;background:none!important;overflow:visible;box-shadow:none}.identityScroll>button img,.identityScroll.open>button img{display:block;width:100%;height:100%;object-fit:contain;transform:none;transition:filter .25s}.identityScroll>button:hover img,.identityScroll>button:focus-visible img{filter:brightness(1.08)}
.identityScrollPaper{height:210px;margin-left:-10px;border:1px solid #79663f;border-left:0;background:linear-gradient(90deg,#c7b990,#f4e8c2 10% 90%,#b8a97e);box-shadow:inset 0 7px 14px #6f592c35,inset 0 -7px 14px #6f592c35,5px 8px 12px #0005}.identityScrollPaper a,.identityScrollPaper button{min-width:250px!important}
@media(max-width:760px){body.auth-mode #authChoices{width:96vw}.identityScrolls{gap:10px}.identityScroll{grid-template-columns:78px 0fr;width:78px;min-height:196px}.identityScroll.open{grid-template-columns:78px 1fr;width:min(390px,94vw)}body.auth-mode #ninjaGate .identityScroll>button{width:78px;height:196px}.identityScroll>button img,.identityScroll.open>button img{width:100%;height:100%;transform:none}.identityScrollPaper{height:148px}.identityScrollPaper a,.identityScrollPaper button{min-width:200px!important}}
@media(prefers-reduced-motion:reduce){.naturalClouds,.naturalTreeLeft,.naturalTreeRight,.naturalShadows{animation:none}}

/* The legacy checkpoint now shares the current layered Konoha composition. */
.gateClosed,.gateOpen,.gateClosedMotion i,.gateOpenMotion i{background-image:url('konoha/25d/neutral.png')}
.gateNaturalMotion{display:none}
#entryFade:not(.isPending):not(.isActive){display:none}.entryFade.isPending,.entryFade.isActive{position:fixed;z-index:99999;inset:0;display:block;background:#fff;opacity:1;pointer-events:none}.entryFade.isActive.isLeaving{opacity:0;transition:opacity .35s ease-out}

/* Registration embedded over the live Konoha landing scene. */
html.registrationEmbedRoot{background:transparent!important}
body.registrationEmbed{min-height:100dvh;overflow-y:auto!important;background:transparent!important;color-scheme:light}
body.registrationEmbed::before{content:'';position:fixed;z-index:0;top:calc(-1 * var(--registration-backdrop-top));left:0;width:100vw;height:var(--registration-backdrop-height);display:block!important;background:url('/konoha/25d/neutral.webp') center/cover no-repeat;filter:blur(7px) brightness(.58);transform:scale(1.025);pointer-events:none}
body.registrationEmbed>header,body.registrationEmbed>main,body.registrationEmbed>footer,body.registrationEmbed #lobby,body.registrationEmbed .gateScene,body.registrationEmbed .fanNotice,body.registrationEmbed #authChoices,body.registrationEmbed #identifyGate,body.registrationEmbed #enterLobby,body.registrationEmbed #testNinjaCard,body.registrationEmbed #gateSignOut{display:none!important}
body.registrationEmbed #ninjaGate{position:relative;z-index:1;min-height:100dvh;padding:0;background:transparent}
body.registrationEmbed #ninjaRegistration{width:calc(100vw - 120px);max-width:1200px;max-height:none;margin:0 auto;padding:0 0 48px;overflow:visible}
body.registrationEmbed #registrationToggle{display:none!important}
body.registrationEmbed .registrationPaperViewport{transition:none}
@media(max-width:600px){body.registrationEmbed #ninjaRegistration{width:calc(100vw - 32px)}}