/* Gameplay-first layout: the goal is the interface, not decoration. */
header{height:58px}main{width:min(1180px,96vw)}
.intro{display:flex;align-items:center;justify-content:center;gap:18px;padding:12px 0 10px}
.intro>p{margin:0;font-size:10px}.intro h1{font-size:clamp(28px,4vw,44px);line-height:1}.intro .room{margin:0}
.game{border-radius:18px}.score{height:68px}.player strong{font-size:34px}.player small{font-size:11px}
.pitch{height:560px;background:linear-gradient(to bottom,#050c18 0 15%,#105c43 15%,#0b8a53 100%)}
.stands{height:84px}.field-lines{inset:84px 0 0}
.goal{width:78%;height:340px;left:11%;top:96px;border-width:11px}
.keeper{top:235px}.striker{bottom:48px}.ball,.spot{bottom:42px}
.aim-grid button:after,.dive-grid button:after{font-size:13px;padding:7px 10px;opacity:.72}
.aim-grid:before{bottom:-34px;font-size:11px}
.status{min-height:76px;padding:14px 26px}.status h2{margin-top:3px}
.controls{min-height:52px;padding:13px 24px}.result{padding:16px 24px}
aside{margin-top:16px}.power-key i{display:inline-block;width:8px;height:8px;border-radius:50%;margin:0 5px 0 13px}.power-key .weak{background:#65f4ff}.power-key .medium{background:#ffb638}.power-key .strong{background:#ff4b4b}

/* Goalkeeper camera: standing on the goal line and looking out at the taker. */
.pitch.keeper-view{height:560px;transform:none!important;background:linear-gradient(to bottom,#07111f 0 12%,#14724f 12%,#087447 100%);overflow:hidden}
.pitch.keeper-view .stands{height:68px;opacity:.78}
.pitch.keeper-view .field-lines{inset:68px -15% -12%;clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);background:linear-gradient(90deg,transparent 49.8%,#fff5 50%,transparent 50.2%),repeating-linear-gradient(90deg,#ffffff08 0 110px,#00000006 110px 220px)}
.pitch.keeper-view .field-lines:after{width:190px;height:72px;left:calc(50% - 95px);bottom:auto;top:110px}
.pitch.keeper-view .goal{inset:0;width:100%;height:100%;transform:none;border:0;filter:none;box-sizing:border-box}
.pitch.keeper-view .net{display:none}
.pitch.keeper-view .striker{top:116px;bottom:auto;transform:scale(1.15);z-index:6}
.pitch.keeper-view .ball{top:194px;bottom:auto;transform:scale(1.1);z-index:7;box-shadow:0 2px 8px #0008}
.pitch.keeper-view .spot{top:207px;bottom:auto;transform:scale(.8)}
.pitch.keeper-view .camera{display:block;top:76px;z-index:20;transform:translateX(-50%)!important}
.pitch.keeper-view:after{content:"";position:absolute;left:-5%;right:-5%;bottom:18px;height:90px;border-top:4px solid #ffffffcc;border-radius:50%;pointer-events:none;z-index:8}
.pitch.keeper-view .dive-grid.active{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}
.pitch.keeper-view .dive-grid button{display:flex;align-items:center;justify-content:center;background:#d7ff3805;min-height:0}
.pitch.keeper-view .dive-grid button:hover{background:#d7ff3837}
.pitch.keeper-view .dive-grid button:after{background:#03101bd9;border:1px solid #d7ff3899;border-radius:16px;padding:7px 10px}

@media(max-width:700px){header{height:52px}.intro{gap:8px;padding:8px 0}.intro>p{display:none}.intro h1{font-size:27px}.pitch,.pitch.keeper-view{height:min(500px,62vh)}.goal{width:92%;left:4%;height:66%;top:17%}.pitch.keeper-view .goal{inset:0;width:100%;height:100%}.pitch.keeper-view .striker{top:20%;transform:scale(.85)}.pitch.keeper-view .ball{top:35%;transform:scale(.9)}.pitch.keeper-view .spot{top:38%}.pitch.keeper-view .camera{top:10%}.score{height:60px}.status{padding:11px 14px;min-height:66px}.status h2{font-size:18px}.controls{padding:11px 14px}.aim-grid button:after,.dive-grid button:after{font-size:10px;padding:5px 6px}aside{display:none}}