:root{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;color:#123840;background:#eaf0eb;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button{cursor:pointer;touch-action:manipulation}button:focus-visible,canvas:focus-visible,select:focus-visible{outline:3px solid #efbd59;outline-offset:3px}main{max-width:480px;min-height:100svh;margin:auto;background:#f7f7ee}header{display:flex;justify-content:space-between;align-items:center;padding:22px 22px 16px}.brand{font-size:15px;font-weight:800;letter-spacing:.04em}.ball{font-size:25px;vertical-align:-2px;margin-right:4px}.mode{border:1px solid #cddbd1;border-radius:30px;padding:6px 11px;font-size:11px}.question{padding:0 24px 18px}.progress{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:#567069}.track{display:flex;gap:5px;margin:10px 0 21px}.track span{height:4px;border-radius:4px;background:#dae3d9;flex:1}.track .current{background:#183f45}.track .yes{background:#39a788}.track .no{background:#edb653}.eyebrow{margin:0 0 9px;font-size:13px;letter-spacing:.05em}h1{font-size:clamp(24px,7.1vw,34px);letter-spacing:.03em;margin:0;line-height:1.35;min-height:43px}.sample{font-size:10px;color:#74887e;margin:7px 0 0}.atlas{height:365px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 45% 50%,#184754,#081e29 80%);color:#dbece2;isolation:isolate}.atlas-top{position:absolute;top:17px;left:20px;right:20px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.12em;z-index:2;pointer-events:none}.live:before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:#a6e3b2;margin-right:7px}canvas{display:block;width:100%;height:365px;touch-action:none}#labels{position:absolute;inset:0;pointer-events:none}.country-label{position:absolute;transform:translate(-50%,-50%);background:#102d38dc;color:#eff9e8;border:1px solid #7599867a;border-radius:13px;padding:5px 8px;font-size:10px;white-space:nowrap;pointer-events:auto;min-height:27px;box-shadow:0 2px 6px #00151b77}.country-label.selected{background:#f4c568;color:#102d38;border-color:#ffe2a6;font-weight:800}.zoom{position:absolute;right:12px;bottom:44px;display:flex;flex-direction:column;gap:6px}.zoom button{width:42px;height:40px;background:#153744df;border:1px solid #55716c;border-radius:10px;color:#eef7ea;font-size:20px}.zoom #reset{font-size:10px}.compass{position:absolute;left:20px;bottom:55px;font-size:11px;color:#a1bbba}.gesture{position:absolute;bottom:7px;left:0;width:100%;text-align:center;font-size:10px;letter-spacing:.08em;color:#c0d1cb;pointer-events:none}.answer{padding:20px 24px 16px;min-height:154px}.feedback{font-size:20px;font-weight:800;margin:0 0 6px}.answer p#detail{font-size:12px;color:#577168;line-height:1.6;margin:0 0 14px;min-height:19px}.primary{width:100%;min-height:49px;border:0;border-radius:14px;background:#145849;color:white;font-size:15px;font-weight:700;box-shadow:0 4px 0 #093c32}.primary:disabled{background:#dde5d9;color:#788a7a;box-shadow:none;cursor:default}.answer.correct{background:#e2f0db}.answer.incorrect{background:#fff0d6}details{margin:0 24px;font-size:11px;color:#627a6e}summary{padding:9px 0;cursor:pointer}details label{display:block;margin:9px 0}select{width:100%;height:44px;background:white;border:1px solid #b1c5b6;border-radius:8px}details p{line-height:1.8}footer{text-align:center;font-size:9px;color:#87988d;padding:15px 0 18px}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}@media(min-width:500px){main{margin:20px auto;border-radius:24px;overflow:hidden;box-shadow:0 20px 70px #193c3522}}@media(max-height:750px){header{padding-top:14px}.track{margin-bottom:12px}.atlas,canvas{height:320px}.answer{padding-top:15px}}

.atlas{touch-action:none}#metrics{display:block;overflow-wrap:anywhere;font-size:11px;padding:12px}

html,body{overscroll-behavior:none}
.atlas,.country-label{touch-action:none;-webkit-user-select:none;user-select:none}
#input-diagnostic{position:sticky;top:0;z-index:10;display:block;white-space:pre-wrap;pointer-events:none;background:#102d38;color:#f5f8ec;font:10px/1.4 ui-monospace,monospace;padding:4px 8px}

[hidden]{display:none!important}
#stage-panel{padding:14px 24px 8px;min-height:330px}
#stage-panel h2{font-size:18px;margin:8px 0 20px}
.attack{text-align:center;font-size:11px;font-weight:700;margin:0 0 8px}
.pitch{position:relative;height:342px;border:2px solid #cce4c2;border-radius:10px;background:repeating-linear-gradient(to bottom,#226b54 0px,#226b54 43px,#29785d 43px,#29785d 86px);overflow:hidden;box-shadow:0 8px 20px #163d4320}
.pitch:before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid #cae1c380}
.pitch-center{position:absolute;border:1px solid #cae1c380;border-radius:50%;width:80px;height:80px;left:calc(50% - 40px);top:calc(50% - 40px)}
.penalty{position:absolute;left:24%;width:52%;height:48px;border:1px solid #cae1c380}.penalty.top{top:-1px}.penalty.bottom{bottom:-1px}
.position-pin{position:absolute;transform:translate(-50%,-50%);min-width:72px;min-height:44px;border:1px solid #ecf6e780;border-radius:12px;background:#f5f8ec;color:#19463d;font-size:12px;font-weight:800;box-shadow:0 3px 0 #123d3480}
.position-pin:disabled{opacity:1}.position-pin.chosen{background:#f4c568;border:2px solid #fff0bb}.position-pin.exact{outline:3px solid #8cedae;outline-offset:2px}
.choice{display:block;width:100%;min-height:60px;text-align:left;padding:15px 18px;margin-bottom:12px;border:1px solid #bed1c1;border-radius:14px;color:#173f3a;background:#fffef6;font-size:15px;font-weight:700;box-shadow:0 3px 0 #d9e4d6}
.choice:after{content:"›";float:right}.back{background:transparent;border:0;color:#376459;min-height:44px;text-decoration:underline}
.result-card{padding:13px 16px;margin:0 0 10px;background:#e8efe1;border-radius:14px;font-size:13px}
.result-card strong{display:block;margin-top:6px;line-height:1.55}.result-label{color:#4b6856;font-size:11px}
.trivia{background:#fff0c9;border-radius:14px;padding:14px 16px;margin-top:16px}.trivia span{font-size:11px;font-weight:800;color:#806326}.trivia p{font-size:13px;line-height:1.8;margin:6px 0 0}
.total{display:flex;align-items:center;justify-content:space-between;min-height:74px}.total strong{font-size:28px;margin:0}.bonus-total{font-size:14px;text-align:center;padding:12px;background:#ffedbd;border-radius:12px}
body:not([data-stage="country"]) .question{padding-bottom:8px}
body:not([data-stage="country"]) .answer{padding-top:14px}
body:not([data-stage="country"]) .track{margin-bottom:15px}

/* Original numbered pieces on a full eleven-player formation. */
ruby{ruby-align:center}rt{font-size:.55em;font-weight:500;letter-spacing:0}ruby rt{line-height:1}
header{padding:17px 20px 14px}.brand{font-size:14px}.mode{padding:5px 9px}.question{padding-bottom:14px}.eyebrow{line-height:1.9}.sample{line-height:1.8}
#input-diagnostic{font-size:9px;line-height:1.7}
#stage-panel{padding:9px 16px 5px}.attack{margin-bottom:9px;line-height:1.8}
.pitch{height:366px;border-radius:8px;border:3px solid #bce6b7;background:repeating-linear-gradient(to bottom,#26764b 0,#26764b 45px,#2d8252 45px,#2d8252 90px);box-shadow:0 7px 18px #153c4324}
.pitch:before{border-color:#e8f8d9aa}.pitch-center{border:2px solid #e8f8d9aa;width:84px;height:84px;left:calc(50% - 42px);top:calc(50% - 42px)}
.pitch-center:after{content:"";position:absolute;width:5px;height:5px;background:#e8f8d9;left:calc(50% - 2px);top:calc(50% - 2px);border-radius:50%}
.penalty{border:2px solid #e8f8d9aa;height:51px;left:24%;width:52%}.goal{position:absolute;left:40%;width:20%;height:12px;border:2px solid #fffbd8;background:repeating-linear-gradient(90deg,#fff9 0,#fff9 1px,transparent 1px,transparent 6px)}.goal.top{top:-3px}.goal.bottom{bottom:-3px}
.position-pin{min-width:0;width:78px;height:61px;min-height:0;border:0;border-radius:0;background:transparent!important;box-shadow:none;color:#fffbed;font-size:10px;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;-webkit-tap-highlight-color:transparent;z-index:1}
.jersey{display:grid;place-items:center;width:39px;height:35px;padding-top:3px;color:#382d5b;background:linear-gradient(105deg,#ffe2a0,#ffba90);font-size:17px;font-weight:900;clip-path:polygon(23% 0,37% 0,42% 8%,58% 8%,63% 0,77% 0,100% 24%,86% 43%,78% 34%,78% 100%,22% 100%,22% 34%,14% 43%,0 24%);filter:drop-shadow(0 3px 1px #112b3677)}
.position-pin[data-position="GK"] .jersey{background:linear-gradient(110deg,#dbd0ff,#b4b7ff)}
.position-name{display:block;text-align:center;max-width:78px;font-size:8px;white-space:nowrap;line-height:1.6;text-shadow:0 1px 2px #163b30;background:#143e32b8;border-radius:5px;padding:1px 3px}
.position-pin.chosen{border:0}.position-pin.chosen .jersey{animation:hop .4s ease-out;background:#fff3b2}.position-pin.chosen:before{content:"";position:absolute;top:0;left:17px;width:44px;height:42px;border-radius:50%;box-shadow:0 0 17px 8px #ffd97aaa;background:#ffec8644;z-index:-1}
.position-pin.exact{outline:0}.position-pin.exact .jersey{background:#caffd1;color:#174e33}.position-pin.exact .position-name{background:#e5ffe5;color:#194c36;text-shadow:none;outline:2px solid #8aeca1}
.position-pin.exact:after{content:"✓";position:absolute;right:10px;top:0;color:#154b30;background:#ddffcf;border-radius:50%;font-size:12px;width:16px;height:16px}
@keyframes hop{0%,100%{transform:translateY(0)}45%{transform:translateY(-10px) scale(1.12)}}
@media(prefers-reduced-motion:reduce){.position-pin.chosen .jersey{animation:none}}
.answer .feedback{line-height:1.65;font-size:18px}.answer p#detail{line-height:1.95}.primary{line-height:1.8;padding:8px}
.trivia,.quote{margin-top:10px;padding:10px 14px;border-radius:14px}.quote{background:#e9e6f4;border-left:3px solid #a99aca}.quote-label{font-size:11px;font-weight:800;color:#615479}.quote p{font-size:13px;line-height:2;margin:6px 0}.quote-note{display:block;font-size:10px;line-height:2;color:#554b66}.trivia p{line-height:2}.result-card{padding:9px 14px;margin-bottom:7px}.result-card strong{margin-top:3px;line-height:1.9}.result-label{line-height:1.9}

.league-country{display:block;font-size:11px;font-weight:400;color:#567069;margin-top:5px}.choice:disabled{opacity:.55}.club-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.club-grid .choice{margin:0;padding:10px;font-size:12px;min-height:64px;overflow-wrap:anywhere;line-height:1.8}.club-grid .choice:after{display:none}.data-note{font-size:11px;line-height:1.9;color:#567069}.position-pin.exact .jersey{filter:drop-shadow(0 0 5px #b9ffb4)}