html,body{width:100%;height:100%;overflow:hidden;background:#122a3b}#game{position:fixed;inset:0;width:100%;max-width:none;height:100svh;height:100dvh;min-height:0;padding:0;display:block;border:0;box-shadow:none;isolation:isolate}header{position:absolute;z-index:4;top:env(safe-area-inset-top);left:0;width:100%;height:32px;padding:0 16px;background:#0a1928b8}.wordmark{font-size:12px}.wordmark small{display:none}.header-actions{gap:16px}.header-actions button{font-size:10px;font-weight:700;color:#e4eaf0}#pause{font-size:20px;min-width:28px}.scoreboard{position:absolute;z-index:3;top:calc(env(safe-area-inset-top) + 37px);left:10px;right:10px;height:49px;padding:0 13px;border:1px solid #91a9b64a;border-bottom:2px solid #eea15b;border-radius:4px;background:linear-gradient(#1c3445ed,#101f2eed);box-shadow:0 3px 15px #0003}.team i{height:23px}.team strong{font-size:27px}.team span,.drive>span{font-size:10px}.situation{gap:3px}.situation b{font-size:13px}.situation>span{font-size:10px;color:#b8cad4}.drive strong{font-size:17px}#field-wrap{position:absolute;inset:0;min-height:0}#field{width:100%;height:100%}.field-tag{display:none}#banner{top:calc(env(safe-area-inset-top) + 97px);z-index:5}#overlay{padding:calc(env(safe-area-inset-top) + 106px) 18px calc(env(safe-area-inset-bottom) + 222px);z-index:6}#overlay.active{background:#03131c45}.panel{max-height:100%;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;background:#102434f5;border-color:#637e90}.panel p{color:#c5d4df}.primary{background:#ffb568}.play-card{background:#1e394b;border-color:#587385}.play-card small{color:#b7ccda}.status{position:absolute;z-index:4;bottom:calc(env(safe-area-inset-bottom) + 205px);left:14px;right:14px;height:auto;padding:7px 10px;background:#0c2332a6;border:1px solid #ffffff12;border-radius:5px;pointer-events:none}#hint{font-size:10px;line-height:1.3;color:#e1eaf0}.meters{display:grid;grid-template-columns:20px 32px;align-items:center;gap:4px;flex-shrink:0}.meter-label{font-size:8px;letter-spacing:.5px;color:#b6d0dd}#stamina,#balance{width:32px;height:4px;background:#395463;border-radius:3px;overflow:hidden}#stamina i,#balance i{display:block;width:100%;height:100%;background:#ffb263}#balance i{background:#8cdbd1}.controller{position:absolute;z-index:5;bottom:calc(env(safe-area-inset-bottom) + 12px);left:13px;right:13px;height:176px;padding:0;background:none;box-shadow:none;pointer-events:none}.stick-area{width:143px;align-self:flex-end;pointer-events:auto}#joystick{width:138px;height:138px;background:radial-gradient(circle,#0d263276 0 52%,#b1c6d04d 53% 54%,#0a202e66 55% 66%,#b9cbd778 67% 68%,#132b3933 69%);backdrop-filter:blur(2px)}#stick{width:72px;height:72px;left:33px;top:33px;background:radial-gradient(circle at 42% 35%,#5e788bbc,#3e5a6dcc 57%,#233f51bc 58%,#8cabbca8 64%,#294454be 67%);box-shadow:0 5px 12px #0005,inset 0 1px 2px #ffffff3f}.control-caption{color:#d3e3e8;text-shadow:0 1px 4px #000;margin-top:7px}.middle{margin-bottom:12px}.grip{display:none}#mode{letter-spacing:.8px;color:#e4eef2;text-shadow:0 1px 4px #000}.face{width:168px;height:176px;transform:none;pointer-events:auto}.pad{width:56px;height:56px;border-color:#c4d6e080;background:linear-gradient(135deg,#3e5969ce,#132e40c7);box-shadow:0 3px 0 #0a1e2cbb,0 5px 12px #0004;backdrop-filter:blur(2px)}.pad small{bottom:-13px;font-weight:800;color:#e1ecf3;text-shadow:0 1px 4px #000}.pad.pressed{transform:translateY(2px);background:#648094de}.triangle{top:0;left:56px;color:#8ff3d7}.square{top:53px;left:0;color:#f8b8ed}.circle{top:53px;right:0;color:#ffb0a4}.cross{top:107px;left:56px;color:#b1d0ff}footer{display:none}
@media(min-width:650px){#game{height:100dvh}.controller{left:30px;right:30px;bottom:30px}.status{bottom:225px;width:450px;left:50%;right:auto;transform:translateX(-50%)}header{padding-inline:25px}.scoreboard{max-width:500px;left:50%;right:auto;width:calc(100% - 20px);transform:translateX(-50%)}#overlay{padding-bottom:140px}.middle{position:absolute;bottom:0;left:50%}}
@media(max-width:360px){.controller{left:8px;right:8px}.stick-area{width:130px}#joystick{width:126px;height:126px}#stick{left:27px;top:27px}.face{transform:scale(.91);transform-origin:right bottom}.middle{display:none}}
@media(max-height:700px){#overlay{padding-top:calc(env(safe-area-inset-top) + 100px);padding-bottom:calc(env(safe-area-inset-bottom) + 205px)}.panel{padding:15px}.panel h1,.panel h2{font-size:24px}.tutorial{margin:10px 0}.play-card{padding:8px}.play-card svg{height:25px}.controller{height:156px}.face{transform:scale(.88);transform-origin:right bottom}.stick-area{transform:scale(.9);transform-origin:left bottom}.status{bottom:calc(env(safe-area-inset-bottom) + 181px)}}
@media(orientation:landscape) and (max-height:550px){#overlay{padding:95px 175px 20px}.status{bottom:10px;left:175px;right:175px;width:auto;transform:none}.middle{display:none}.controller{height:155px}}

#field-wrap{z-index:0}

#overlay.playbook-panel{align-items:flex-end;padding:110px 12px calc(env(safe-area-inset-bottom) + 14px);background:linear-gradient(transparent 45%,#061524aa);backdrop-filter:none}#overlay.playbook-panel .panel{max-width:540px;padding:13px;background:#102434ee;box-shadow:0 4px 24px #0005}.playbook-heading{display:flex;justify-content:space-between;align-items:center}.playbook-heading b{font-size:13px;letter-spacing:1.5px}.playbook-heading span{font-size:11px;color:#c4d7e3}.playbook-panel .play-grid{margin-top:10px;gap:8px}.playbook-panel .play-card{padding:8px 10px}.playbook-panel .play-card svg{height:26px}.calling-play .controller,.calling-play .status{opacity:0;pointer-events:none}.calling-play .controller *{pointer-events:none}

/* Team identity and a compact live field-position readout. */
.team i{background:#176bdd;box-shadow:inset 0 -5px #ffa324;border-radius:2px}
.field-info{position:absolute;z-index:3;top:calc(env(safe-area-inset-top) + 91px);left:12px;right:12px;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:8px;letter-spacing:.6px;color:#e4edf5;text-shadow:0 1px 3px #000;pointer-events:none}
.field-info>span{display:flex;align-items:center;gap:5px;flex-shrink:0}.field-info i{display:inline-block;width:8px;height:9px;border:1px solid #ffffff66;border-radius:2px}.blue-kit{background:#176bdd}.white-kit{background:linear-gradient(#f2f4ef 65%,#96101a 65%);margin-left:6px}
#live-gain{font-size:9px;letter-spacing:.2px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#live-gain.first-down{color:#a1f1d0}#banner{top:calc(env(safe-area-inset-top) + 113px)}
@media(min-width:650px){.field-info{max-width:480px;left:50%;right:auto;width:calc(100% - 28px);transform:translateX(-50%)}}

html,body{position:fixed;inset:0;overscroll-behavior:none;touch-action:none}#game,#overlay,.panel,button{touch-action:none;overscroll-behavior:none}.panel{overflow:hidden}#overlay{padding:calc(env(safe-area-inset-top) + 110px) 12px calc(env(safe-area-inset-bottom) + 16px)}
.formation-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:10px 0 8px}.formation-tabs button{padding:9px 2px;background:#1e394b;border:1px solid #587385;border-radius:4px;color:#d6e4ed;font-size:12px;font-weight:700}.formation-tabs button[aria-pressed=true]{background:#e9b16b;color:#15273a;border-color:#e9b16b}.playbook-panel .play-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0;gap:6px}.playbook-panel .play-card{min-width:0;padding:6px 8px}.playbook-panel .play-card b{font-size:13px}.playbook-panel .play-card svg{height:34px}.playbook-panel .play-card small{font-size:9px}.panel h2{margin:5px 0 8px}.tutorial{margin:10px 0}.tutorial>div{padding:6px 0}
@media(max-height:650px){.panel{padding:12px}.panel p{font-size:13px;margin:7px 0}.panel h2{font-size:24px}.tutorial{font-size:12px}.primary,.secondary{padding:10px}.playbook-panel .play-card svg{height:25px}.formation-tabs button{padding:7px 1px}.playbook-panel .play-card{padding:4px 7px}}
@media(orientation:landscape) and (max-height:550px){#overlay,#overlay.playbook-panel{padding:94px 12px 8px}.playbook-panel .panel{max-width:700px}.playbook-panel .play-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.formation-tabs{margin:5px 0}.playbook-panel .play-card svg{height:20px}.tutorial{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.panel p{margin:4px 0}}

#hint{display:none}.status{left:50%;right:auto;width:auto;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 23px);background:none;border:0;padding:0}.status .meters{grid-template-columns:20px 36px;gap:5px}.status #stamina,.status #balance{width:36px}

.play-filters{display:flex;align-items:center;gap:5px;margin:0 0 8px}.play-filters button,.play-pages button{border:1px solid #587385;background:#1c3646;color:#e7eef3;padding:6px 10px;border-radius:4px;font-size:11px;font-weight:700}.play-filters button[aria-pressed=true]{background:#cba36c;color:#122737}.play-filters>span{margin-left:auto;font-size:10px;color:#b2c5d4}.playbook-panel .play-card{padding:0 0 7px;overflow:hidden}.play-card img{display:block;width:100%;height:auto;aspect-ratio:2;object-fit:contain}.playbook-panel .play-card b{display:block;padding:5px 6px 0;font-size:13px}.play-pages{display:flex;align-items:center;justify-content:space-between;margin-top:8px}.play-pages span{font-size:11px;color:#d2e0e9}.play-pages button:disabled{opacity:.30}.playbook-panel .play-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-height:650px){.play-card img{max-height:73px;object-fit:cover}.playbook-panel .play-card b{font-size:12px;padding-top:3px}.play-pages{margin-top:6px}.playbook-panel .play-card{padding-bottom:4px}}
@media(orientation:landscape) and (max-height:550px){.playbook-panel .play-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.play-card img{max-height:90px}.play-pages{margin-top:4px}.formation-tabs{margin-top:4px}}