*{box-sizing:border-box}body{margin:0;background:#101827;color:#f1f6ff;font:16px system-ui,sans-serif}button,input{font:inherit}button{cursor:pointer;touch-action:none;user-select:none;-webkit-tap-highlight-color:transparent}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,.pitch:focus-visible{outline:3px solid #d3fc85;outline-offset:3px}header{height:88px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:0 25px;max-width:2100px;margin:auto}.brand{font-size:22px;font-weight:850;font-style:italic;letter-spacing:-1px}.brand b{color:#d5fa8c}.scoreboard{display:flex;align-items:center;gap:27px}.scoreboard>span{font-size:45px;font-weight:850;min-width:52px;text-align:center;font-variant-numeric:tabular-nums}.blue{color:#78caff}.orange{color:#ffad75}.clock{display:flex;align-items:baseline;gap:5px;background:#243147;border:1px solid #3a4c65;border-radius:12px;padding:7px 16px}.clock>span{font-size:27px;font-weight:800;min-width:44px;text-align:center;font-variant-numeric:tabular-nums}.clock small{font-size:11px;color:#bcc9d9}.clock.urgent{color:#ffb292;border-color:#e1795c}nav{display:flex;justify-content:flex-end;gap:8px}nav button{border:1px solid #34465e;background:transparent;color:#c7d4e4;border-radius:9px;padding:10px 12px;font-size:13px;min-height:40px}nav button[aria-pressed=true]{color:#d5fa8c}main{max-width:2100px;margin:auto;display:grid;grid-template-columns:230px minmax(400px,1fr) 230px;gap:18px;padding:4px 22px 18px;align-items:start}.panel{background:#19263a;border:1px solid #33455d;border-top:3px solid #6ac6ff;border-radius:16px;padding:14px}.orange-panel{border-top-color:#ffad75}.panel h2{font-size:16px;margin:0 0 14px;font-weight:750}.question{font-size:30px;line-height:1.3;text-align:center;font-weight:850;letter-spacing:.3px;margin:0 0 10px}.answer-display{width:100%;height:46px;margin-bottom:10px;border:1px solid #45627d;background:#0f1b2b;border-radius:9px;text-align:center;font-size:27px;font-weight:750;color:#d5fa8c;caret-color:transparent}.answer-display::placeholder{color:#6c7f98}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.key{height:43px;background:#293c54;border:1px solid #3d526c;border-radius:8px;color:#fff;font-size:23px;font-weight:700}.key-edit{background:#1e2f46;color:#a9bbd1;font-size:20px}.key:active,.key.pressed{background:#476581;scale:.96}.check-answer{grid-column:1/-1;height:41px;margin-top:2px;border:0;border-radius:8px;background:#7acfff;color:#112f45;font-size:13px;font-weight:850;letter-spacing:.7px}.orange-panel .check-answer{background:#ffb480;color:#472b1b}.feedback{font-size:12px;line-height:1.35;color:#bbcadd;min-height:33px;margin:11px 0 9px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.slot{height:64px;border:1px solid #364b65;border-radius:10px;background:#101e30;display:flex;justify-content:center;align-items:center;color:#3a506b;font-size:23px;touch-action:none}.ball{width:100%;height:100%;padding:0;position:relative;display:flex;justify-content:center;align-items:center;background:#23374b;border:1px solid #698297;border-radius:9px;touch-action:none;color:#fff;overflow:hidden}.ball[data-level="2"]{background:#123f5b;border-color:#4dafd8}.ball[data-level="3"]{background:#37204e;border-color:#9a6fbf}.ball[data-level="4"]{background:#582518;border-color:#f0a74b}.ball b{position:absolute;bottom:3px;font-size:10px;font-weight:800;text-shadow:0 1px 3px #000}.ball-art{width:58px;height:58px;display:block;flex-shrink:0;background-image:url('ball-levels.png');background-size:200% 200%;background-repeat:no-repeat;pointer-events:none}.ball .ball-art{margin-top:-8px}.ball-art[data-level="1"]{background-position:0 0}.ball-art[data-level="2"]{background-position:100% 0}.ball-art[data-level="3"]{background-position:0 100%}.ball-art[data-level="4"]{background-position:100% 100%;filter:drop-shadow(0 0 3px #ff8118)}.ball.selected{outline:3px solid #d5fa8c;outline-offset:1px}.ball.held{opacity:.3}.field-wrap{min-width:0}.pitch{height:calc(100dvh - 155px);min-height:490px;max-height:960px;position:relative;overflow:hidden;border:7px solid #385f50;border-radius:20px;background:repeating-linear-gradient(90deg,#266d50 0,#266d50 12.5%,#2b7657 12.5%,#2b7657 25%);box-shadow:inset 0 0 100px #0e392952;touch-action:none;isolation:isolate}.pitch.drag-active{box-shadow:inset 0 0 0 3px #dbfa9c,inset 0 0 100px #0e392952}.lines{position:absolute;inset:28px;border:2px solid #d9fce177;pointer-events:none}.lines:before{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:2px solid #d9fce177}.circle{position:absolute;width:23%;aspect-ratio:1;border:2px solid #d9fce177;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}.box{position:absolute;width:15%;height:48%;border:2px solid #d9fce177;top:26%}.left{left:-2px}.right{right:-2px}.goal{position:absolute;width:24px;height:24%;top:38%;border:3px solid #e6f6e9;background:repeating-linear-gradient(0deg,transparent 0 8px,#ffffff55 8px 9px),repeating-linear-gradient(90deg,transparent 0 8px,#ffffff55 8px 9px)}.goal.left{left:0}.goal.right{right:0}.actor,.keeper{position:absolute;pointer-events:none;width:clamp(100px,9vw,175px);aspect-ratio:3/4;left:24%;top:50%;transform:translate(-50%,-78%);z-index:3}.actor#f1{left:76%}.keeper{width:clamp(75px,6vw,120px);left:7%;transform:translate(-50%,-65%);z-index:2}.keeper#k1{left:93%}.sprite{width:100%;height:100%;background-image:url('football-sprites.png');background-size:400% 200%;background-position:0 0;background-repeat:no-repeat;filter:drop-shadow(0 4px 3px #0004);animation:breathe 2s ease-in-out infinite}.orange-player .sprite{background-image:url('orange-sprites.png');transform:scaleX(-1);mask-image:url('football-sprites.png');mask-size:400% 200%;mask-repeat:no-repeat;-webkit-mask-image:url('football-sprites.png');-webkit-mask-size:400% 200%;-webkit-mask-repeat:no-repeat}#k1 .sprite{transform:scaleX(-1)}.sprite[data-frame="1"]{background-position:33.333333% 0}.sprite[data-frame="2"]{background-position:66.666667% 0}.sprite[data-frame="3"]{background-position:100% 0}.sprite[data-frame="4"]{background-position:0 100%}.sprite[data-frame="5"]{background-position:33.333333% 100%;clip-path:inset(0 4% 0 0)}.sprite[data-frame="6"]{width:132%;margin-left:-16%;background-size:303.030303% 200%;background-position:71.905% 100%}.sprite[data-frame="7"]{background-position:100% 100%;clip-path:inset(0 0 0 24%)}.running .sprite{animation:run .16s ease-in-out infinite alternate}.striking .sprite,.winding .sprite,.diving .sprite{animation:none}.celebrating .sprite{animation:jump .35s ease-in-out infinite alternate}.field-hint{position:absolute;bottom:40px;left:0;right:0;text-align:center;color:#d4edda;font-size:14px;pointer-events:none;opacity:.8}.flight{position:absolute;z-index:6;width:44px;height:44px;pointer-events:none}.flight .ball-art{width:44px;height:44px}.drag-ghost{position:fixed!important;z-index:2147483647!important;pointer-events:none!important;width:86px!important;height:86px!important;transform:translate(-50%,-50%);filter:drop-shadow(0 9px 6px #0006);opacity:1}.drag-ghost .ball-art{width:86px;height:86px}.shot-banner{position:absolute;top:12%;left:8%;width:40%;pointer-events:none;text-align:center;font-weight:900;font-style:italic;color:#e3ff9d;font-size:clamp(24px,3vw,48px);z-index:7;text-shadow:0 3px 2px #123923}#banner1{left:52%}#result{font-size:14px;color:#b8c9d9;text-align:center;min-height:22px;margin:12px 0 0}.reward-pop{animation:pop .4s ease-out}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}dialog{width:min(570px,92vw);padding:32px;border:1px solid #48607e;border-radius:22px;background:#17263b;color:#f4f7fc;box-shadow:0 24px 90px #0008}dialog::backdrop{background:#081020cc;backdrop-filter:blur(6px)}dialog h1{font-size:30px;letter-spacing:-.7px;margin:10px 0 27px}.eyebrow{font-size:11px;letter-spacing:2px;color:#cafa89;font-weight:800}fieldset{border:0;padding:0;margin:0 0 22px}legend{font-weight:700;font-size:14px;margin-bottom:12px;color:#c6d6e9}.duration-options,.operation-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.operation-options{grid-template-columns:repeat(3,1fr)}fieldset label{position:relative;cursor:pointer;touch-action:manipulation}fieldset input{position:absolute;opacity:0}fieldset label span{min-height:67px;display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid #405875;border-radius:11px;background:#20324b;font-size:23px;font-weight:750}fieldset label small{font-size:13px;font-weight:400}fieldset input:checked+span{border-color:#d4f88f;background:#304b39;color:#e6ffb9;box-shadow:inset 0 0 0 1px #d4f88f}fieldset input:focus-visible+span{outline:3px solid #fff;outline-offset:3px}.operation-options span{flex-direction:column;font-size:13px;gap:2px;min-height:78px}.operation-options b{font-size:28px}.setup-note{font-size:14px;line-height:1.6;color:#becde0;margin:2px 0 22px}.primary{width:100%;min-height:54px;border:0;border-radius:11px;background:#d4f88f;color:#22351a;font-size:15px;font-weight:850;letter-spacing:.6px}#finish{text-align:center}#final-score{font-size:60px;font-weight:850;margin:0 0 25px}@keyframes breathe{50%{translate:0 -2px}}@keyframes run{to{translate:0 -5px}}@keyframes jump{to{translate:0 -17px;rotate:-4deg}}@keyframes pop{40%{scale:1.1;filter:brightness(1.4)}}@media(min-width:1650px){main{grid-template-columns:255px minmax(400px,1fr) 255px;gap:22px}.panel{padding:17px}.key{height:49px}.slot{height:72px}.ball-art{width:65px;height:65px}.question{font-size:34px}.answer-display{height:51px}.check-answer{height:45px}.feedback{font-size:13px}}@media(max-height:750px) and (min-width:1000px){header{height:72px}.pitch{height:calc(100dvh - 129px);min-height:475px}.panel{padding:11px}.panel h2{margin-bottom:9px}.question{font-size:27px;margin-bottom:7px}.answer-display{height:40px;margin-bottom:7px}.key{height:38px}.check-answer{height:36px}.slot{height:57px}.feedback{margin:8px 0 7px;min-height:32px}.grid{gap:6px}}@media(max-width:1100px){main{grid-template-columns:200px minmax(300px,1fr) 200px;gap:12px;padding:4px 12px 14px}header{padding:0 14px;gap:10px}.brand{font-size:18px}nav button{font-size:11px;padding:8px}.scoreboard{gap:15px}.panel{padding:10px}.question{font-size:27px}.ball-art{width:50px;height:50px}.field-hint{font-size:12px}}@media(max-width:800px){header{height:auto;min-height:95px;grid-template-columns:1fr 1fr;padding:12px}.scoreboard{grid-column:2;grid-row:1/3;justify-content:flex-end}nav{justify-content:flex-start;grid-column:1;gap:5px}.scoreboard>span{font-size:35px;min-width:25px}.clock{padding:7px 10px}.clock>span{font-size:23px;min-width:30px}.brand{font-size:20px}main{grid-template-columns:1fr 1fr;gap:10px}.field-wrap{grid-column:1/-1;grid-row:1}.pitch{height:300px;min-height:0}.panel{grid-row:2}.actor{width:90px}.keeper{width:68px}.field-hint{bottom:18px}.slot{height:66px}.ball-art{width:58px;height:58px}#result{margin:8px 0}.panel h2{font-size:15px}.key{height:45px}.question{font-size:28px}.grid{gap:6px}.shot-banner{font-size:23px}}@media(prefers-reduced-motion:reduce){.sprite,.running .sprite,.celebrating .sprite,.reward-pop{animation:none}}
.shot-trail{position:absolute;z-index:5;pointer-events:none;height:7px;border-radius:50%;transform-origin:0 50%;--trail:#e6f1ff;background:linear-gradient(90deg,transparent,var(--trail));box-shadow:0 0 9px var(--trail);animation:trail-fade .3s linear forwards}.shot-trail[data-level="2"]{--trail:#5bd9ff;height:9px}.shot-trail[data-level="3"]{--trail:#c389ff;height:11px}.shot-trail[data-level="4"]{--trail:#ff982f;height:14px;box-shadow:0 0 13px #ff7426,0 0 5px #ffda6c}@keyframes trail-fade{from{opacity:.9}to{opacity:0}}@media(prefers-reduced-motion:reduce){.shot-trail{display:none}}
.difficulty-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.difficulty-options span{min-height:49px;font-size:16px}.operation-options{grid-template-columns:repeat(4,1fr);gap:8px}.operation-options span{min-height:64px;font-size:13px}.selection-note{font-size:12px;line-height:1.4;color:#b6c7dc;margin:8px 0 12px}#setup-error{font-size:14px;color:#ffb995;margin:0 0 12px}#setup-error:empty{display:none}dialog{max-height:92dvh;overflow-y:auto;padding:26px}dialog h1{margin:8px 0 20px;font-size:27px}fieldset{margin-bottom:16px}.duration-options span{min-height:54px}.learning-summary{width:100%;border-collapse:collapse;font-size:15px;margin:0 0 24px}.learning-summary caption{text-align:left;font-size:15px;font-weight:700;color:#d0f490;margin-bottom:13px}.learning-summary th,.learning-summary td{padding:11px 6px;border-bottom:1px solid #34475f}.learning-summary th{text-align:left;font-weight:600}.learning-summary td{text-align:center;font-weight:750;font-variant-numeric:tabular-nums}.learning-summary thead th:not(:first-child){text-align:center}#final-score{font-size:48px;margin-bottom:20px}@media(max-width:430px){dialog{padding:20px}.operation-options{grid-template-columns:repeat(2,1fr)}.selection-note{font-size:12px}}

/* Moral shows player strength, never individual shot odds. */
.morale{margin:-5px 0 12px}.morale-label{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1px;color:#bdcbdf;margin-bottom:5px}.morale-label strong{font-size:13px;letter-spacing:0;color:#eef6ff}.morale-track{height:8px;background:#0c1727;border-radius:8px;overflow:hidden}.morale-track>span{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#329ae4,#9ae4ff);transition:width .3s ease}.orange-panel .morale-track>span{background:linear-gradient(90deg,#ea803e,#ffd29b)}
@media(prefers-reduced-motion:reduce){.morale-track>span{transition:none}}

/* Smartboard: allow independent pointers without browser gestures. */
main,main *{touch-action:none;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
.morale-label strong{display:none}

/* Stop browser pinch recognition at the page boundary, retaining modal scroll. */
html,body{touch-action:pan-x pan-y;overscroll-behavior:none}
main,main *,.drag-ghost{touch-action:none!important}
dialog{touch-action:pan-y;overscroll-behavior:contain}

/* Touch-only controls: selected ball is visible until the next tap. */
.ball,.slot,.pitch{cursor:pointer;-webkit-user-drag:none}
.ball-art{-webkit-user-drag:none;pointer-events:none}
.ball.selected{outline:3px solid #e7ff91;outline-offset:-3px;border-radius:10px;background:#d5fa8c22;box-shadow:inset 0 0 0 1px #e7ff91}
.field-hint{pointer-events:none}

/* Tournament update: compact match UI, touch controls remain tap-only. */
[hidden]{display:none!important}
.brand small{display:block;font-size:10px;font-weight:600;font-style:normal;letter-spacing:1px;color:#acbed2;margin-top:4px}
.panel h2{overflow-wrap:anywhere;line-height:1.2;min-height:20px}
.grid{margin-top:12px}
.shot-status{margin-top:8px;font-size:11px;font-weight:750;color:#d5fa8c;min-height:16px}
.shot-status.waiting{color:#ffd399}
.feedback{margin:5px 0 0;min-height:48px;overflow-wrap:anywhere}
.clock.overtime{flex-direction:column;align-items:center;gap:0;padding:5px 12px;border-color:#d5fa8c}
.clock.overtime>span{font-size:18px;letter-spacing:.3px}
.clock.overtime small{font-size:9px;color:#d5fa8c}
.overtime-badge{position:absolute;top:18px;left:50%;transform:translateX(-50%);background:#142c22e8;border:1px solid #daf89d;color:#e2fda9;border-radius:20px;padding:8px 16px;font-size:12px;font-weight:800;white-space:nowrap;z-index:8;pointer-events:none}
body.last-seconds{animation:warning-background 2s ease-in-out infinite}
body.last-seconds .pitch::after{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;box-shadow:inset 0 0 90px #eb353585;animation:warning-glow 2s ease-in-out infinite}
@keyframes warning-background{0%,100%{background-color:#101827}50%{background-color:#641f2b}}
@keyframes warning-glow{0%,100%{opacity:.15}50%{opacity:.85}}
.mode-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mode-options span{min-height:48px;font-size:17px}
.roster-label{display:flex;flex-wrap:wrap;gap:6px;justify-content:space-between;font-weight:700;font-size:14px;margin-bottom:8px}
.roster-label small{font-weight:400;color:#b6c7dc}
#roster{width:100%;resize:vertical;min-height:108px;max-height:260px;background:#101e30;border:1px solid #526b87;border-radius:10px;padding:12px;color:#f1f6ff;font:16px/1.6 system-ui,sans-serif;touch-action:pan-y}
.saved-tournament{background:#304b3933;border:1px solid #759053;border-radius:11px;padding:12px;margin-bottom:16px}
.saved-tournament p{margin:0 0 10px;font-size:14px;color:#d9efb8}
.secondary{min-height:44px;border:1px solid #526b87;border-radius:10px;background:#21364d;color:#e0ecfa;padding:10px 16px;font-weight:700;font-size:13px;width:100%}
.storage-note{color:#aabbd0;font-size:12px;line-height:1.5;margin:12px 0 0}
#tournament{width:min(1040px,94vw)}
#tournament-info{line-height:1.65}
.bracket{display:flex;align-items:flex-start;gap:16px;overflow-x:auto;padding:6px 3px 15px;touch-action:pan-x pan-y}
.bracket-round{flex:1 0 190px;min-width:190px}
.bracket-round h2{font-size:14px;color:#b8cde3;margin:0 0 12px}
.pair{border:1px solid #3d536f;border-radius:11px;background:#112035;overflow:hidden;margin-bottom:10px}
.pair.next{border:2px solid #d5fa8c}
.pair-player{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px;font-size:14px;color:#b7c8dc;min-height:41px}
.pair-player+ .pair-player{border-top:1px solid #31445c}
.pair-player span{overflow-wrap:anywhere}
.pair-player.winner{background:#334b293d;color:#d5fa8c;font-weight:750}
.pair-player b{flex-shrink:0}
#next-match{font-size:17px;font-weight:750;color:#dcebbf;overflow-wrap:anywhere}
#tournament-champion{font-size:27px;font-weight:850;background:#314a33;border:1px solid #a4c076;border-radius:14px;padding:20px;text-align:center;overflow-wrap:anywhere}
.dialog-actions{display:flex;gap:10px;margin-top:18px}
.dialog-actions .primary{flex:3}
.dialog-actions .secondary{flex:1}
#finish-title,#finish-note,.learning-summary th{overflow-wrap:anywhere}
.learning-summary{table-layout:fixed}
#finish-note{color:#d5fa8c;line-height:1.5}
@media(max-width:430px){.clock.overtime>span{font-size:13px}.clock.overtime{padding:5px 7px}.scoreboard{gap:8px}.brand{font-size:17px}.overtime-badge{font-size:10px;padding:7px 10px}.dialog-actions{flex-direction:column}}
@media(prefers-reduced-motion:reduce){body.last-seconds{animation:none;background:#461d28}body.last-seconds .pitch::after{animation:none;opacity:.4}}
@media(min-width:801px) and (max-height:900px){
 .panel{padding:10px}
 .panel h2{font-size:15px;margin-bottom:7px;min-height:18px}
 .morale{margin:0 0 8px}
 .morale-label{font-size:10px;margin-bottom:4px}
 .morale-track{height:7px}
 .question{font-size:27px;line-height:1.2;margin-bottom:6px}
 .answer-display{height:38px;margin-bottom:6px;font-size:25px}
 .keypad{gap:5px}
 .key{height:34px;font-size:22px}
 .check-answer{height:34px;margin-top:2px}
 .grid{margin-top:10px;gap:6px}
 .slot{height:50px}
 .ball-art{width:46px;height:46px}
 .shot-status{font-size:11px;min-height:14px;margin-top:7px}
 .feedback{font-size:11px;line-height:1.3;min-height:40px;margin:4px 0 0}
}