.hockey-mode{display:block;min-height:0;background:linear-gradient(160deg,#101d3c,#080e20);padding:24px;max-width:980px;margin:auto}
.hockey-shell{max-width:660px;margin:auto}
.hockey-eyebrow{color:#ffcfbf;font:900 12px Lato,Arial,sans-serif;letter-spacing:.2em}
.hockey-shell h2{font:italic 500 clamp(28px,5vw,40px) Georgia,serif;margin:7px 0 12px}
.hockey-help{font:700 12px Lato,Arial,sans-serif;color:#cfd5e4;letter-spacing:.08em;min-height:24px}
.hockey-score{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 15px;margin:15px 0;background:#1b2d55;border:1px solid #677393;border-radius:10px;font:900 16px Lato,Arial,sans-serif}
.hockey-score strong{font-size:30px;color:white;white-space:nowrap}.hockey-score strong::first-letter{color:#ea3054}
.hockey-table{position:relative;width:min(100%,440px,max(300px,calc(100dvh - 460px)));margin:auto}
#hockey-canvas{display:block;width:100%;height:auto;aspect-ratio:720/880;background:url('hockey_table.webp') center/100% 100% no-repeat;touch-action:none;border-radius:16px;cursor:crosshair}
.hockey-controls{display:flex;gap:9px;margin:15px auto 0;width:min(100%,510px)}
.hockey-controls button{flex:1;min-height:42px;border-radius:7px;border:1px solid #abb6d0;background:#1d2d52;color:#fff;font:900 12px Lato,Arial,sans-serif;letter-spacing:.07em}
.hockey-controls button:first-child{flex:1.5;background:linear-gradient(110deg,#d9173d,#a4102c);border-color:#ff9bab}
.hockey-controls button[hidden]{display:none}
.hockey-result{margin:20px auto 0;width:min(100%,510px);padding:18px;background:#223a70;border:1px solid #ffc6bd;border-radius:10px}
.hockey-result[hidden]{display:none}
.hockey-result h3{margin:0 0 8px;font:500 25px Georgia,serif}
.hockey-result p{margin:0 0 15px;font:italic 700 16px/1.45 Lato,Arial,sans-serif;color:#ffdbc9}
.hockey-result .choices{gap:8px}
@media(min-width:801px){
  .hockey-finished .hockey-shell{max-width:850px;display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:18px;align-items:start}
  .hockey-finished .hockey-eyebrow,.hockey-finished h2,.hockey-finished .hockey-help,.hockey-finished .hockey-score{grid-column:1/-1}
  .hockey-finished .hockey-table{grid-column:1;grid-row:5}
  .hockey-finished .hockey-controls{grid-column:1;grid-row:6;width:min(100%,440px);margin-top:12px}
  .hockey-finished .hockey-result{grid-column:2;grid-row:5/span 2;width:100%;margin-top:0;padding:16px}
  .hockey-finished .hockey-result .choice{font-size:11px;line-height:1.35}
}
.brand-corner{position:absolute;z-index:8;top:18px;right:18px;display:block;width:110px;padding:8px;border-radius:7px;background:rgba(4,9,24,.43)}
.brand-corner img{display:block;width:100%;height:auto}
.brand-corner:hover{background:rgba(4,9,24,.75)}
@media(max-width:800px){.hockey-table{width:min(100%,510px)}.hockey-shell{max-width:510px}}
@media(max-width:540px){.hockey-mode{padding:16px 11px}.hockey-score{font-size:12px;padding:10px}.hockey-score strong{font-size:25px}.hockey-controls{gap:6px}.hockey-controls button{font-size:11px}.brand-corner{width:84px;top:11px;right:11px}}