/* =====================================================================
   PENALTY KINGS · 32-bit Edition — styles
   ===================================================================== */
@import url("https://cdn.jsdelivr.net/npm/@fontsource/press-start-2p@5.0.18/index.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/silkscreen@5.0.18/index.css");
*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;background:#000;overflow:hidden;font-family:"Press Start 2P",monospace;color:#fff;image-rendering:pixelated;}
#wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#1a1040,#000);}
canvas{image-rendering:pixelated;image-rendering:crisp-edges;max-width:100%;max-height:100%;touch-action:none;cursor:crosshair;}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.panel{background:linear-gradient(180deg,#1a0d3a,#0a0520);border:4px solid #ffd74a;box-shadow:0 0 0 4px #000, 0 0 0 8px #ff5277, 0 0 60px #ffd74a55;padding:28px 36px;pointer-events:auto;text-align:center;min-width:360px;max-height:92vh;overflow-y:auto;}

.panel h1{font-size:22px;color:#ffd74a;margin-bottom:4px;text-shadow:3px 3px 0 #ff5277, -1px -1px 0 #fff;letter-spacing:2px;}
.panel h2{font-size:9px;color:#4cc2ff;margin-bottom:18px;letter-spacing:4px;}
.panel p{font-size:9px;line-height:1.9;margin-bottom:14px;color:#cfe9ff;}
.btn{display:block;width:100%;background:linear-gradient(180deg,#4cc2ff,#2878c8);color:#001;border:3px solid #fff;padding:13px 16px;margin:8px 0;font-family:inherit;font-size:11px;cursor:pointer;transition:transform .1s;text-shadow:1px 1px 0 #fff6;}
.btn:hover{background:linear-gradient(180deg,#ffd74a,#d89020);transform:translate(-2px,-2px);box-shadow:4px 4px 0 #ff5277;}
.btn.red{background:linear-gradient(180deg,#ff5277,#c01850);color:#fff;text-shadow:1px 1px 0 #0006;}
.btn.red:hover{background:linear-gradient(180deg,#ffd74a,#d89020);color:#001;}
.btn.green{background:linear-gradient(180deg,#4cff7c,#209050);color:#001;text-shadow:1px 1px 0 #fff6;}
.hidden{display:none!important;}
.teamPick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0;max-height:240px;overflow-y:auto;padding-right:4px;}
#teamFilter{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:8px 0;}
#teamFilter .featChip.sel{border-color:#4cff7c;background:#0a2820;color:#4cff7c;box-shadow:0 0 12px #4cff7c;}
.teamOpt{padding:14px 8px;border:3px solid #333;background:#1a1040;cursor:pointer;font-family:inherit;font-size:8px;color:#fff;transition:all .15s;}
.teamOpt:hover{border-color:#ffd74a;transform:translateY(-2px);}
.teamOpt.sel{border-color:#4cff7c;background:#0a2820;box-shadow:0 0 12px #4cff7c;}
.teamBadge{width:30px;height:30px;margin:0 auto 6px;border:2px solid #fff;border-radius:50%;display:block;}
#hud{position:absolute;top:8px;left:50%;transform:translateX(-50%);pointer-events:none;}
#scoreBox{background:linear-gradient(180deg,#1a0d3a,#000);border:3px solid #ffd74a;padding:6px 10px;display:flex;align-items:center;gap:10px;font-size:9px;box-shadow:0 4px 0 #000;}
.teamName{min-width:70px;text-align:center;font-size:8px;color:#cfe9ff;}
.scoreNum{font-size:18px;color:#ffd74a;text-shadow:2px 2px 0 #ff5277;min-width:16px;text-align:center;}
#roundChip{background:#ff5277;color:#fff;padding:2px 6px;font-size:7px;border:1px solid #fff;margin-left:6px;}
#clockChip{background:#000;color:#4cff7c;padding:2px 6px;font-size:8px;border:1px solid #4cff7c;margin-left:6px;font-family:"Silkscreen",monospace;}
#turnBar{position:absolute;top:58px;left:50%;transform:translateX(-50%);background:#000c;border:2px solid #ffd74a;padding:5px 12px;font-size:8px;color:#ffd74a;pointer-events:none;text-align:center;letter-spacing:1px;box-shadow:0 0 10px #ffd74a88;}
#dots{position:absolute;top:94px;left:50%;transform:translateX(-50%);display:flex;gap:16px;background:#000c;border:2px solid #fff;padding:5px 10px;pointer-events:none;}
.dotrow{display:flex;gap:4px;align-items:center;}
.dotrow .label{font-size:7px;width:34px;color:#ffd74a;}
.dot{width:9px;height:9px;background:#222;border:1px solid #555;}
.dot.g{background:#4cff7c;box-shadow:0 0 4px #4cff7c;}
.dot.s{background:#ff5277;box-shadow:0 0 4px #ff5277;}
.dot.m{background:#888;}
#hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);background:linear-gradient(180deg,#000c,#0008);border:2px solid #4cc2ff;padding:7px 14px;font-size:8px;color:#fff;pointer-events:none;max-width:90%;text-align:center;letter-spacing:1px;box-shadow:0 0 12px #4cc2ff88;}
#commentary{position:absolute;bottom:50px;left:50%;transform:translateX(-50%);font-size:9px;color:#ffd74a;text-shadow:2px 2px 0 #000;pointer-events:none;font-family:"Silkscreen",monospace;text-align:center;max-width:80%;}
.endStats{font-size:8px;color:#cfe9ff;line-height:2;text-align:left;background:#0008;padding:10px;margin:10px 0;border:2px solid #333;}
.endStats b{color:#ffd74a;}
#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;mix-blend-mode:screen;}
.crt{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,0.15) 0px,rgba(0,0,0,0.15) 1px,transparent 1px,transparent 3px);mix-blend-mode:multiply;opacity:0.4;}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 50%,#000 120%);}

/* feature-added UI (kept resilient if absent) */
#featBar{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:96%;max-width:560px;max-height:38vh;overflow-y:auto;pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:6px;background:linear-gradient(180deg,#000a,#0006);border:2px solid #ffd74a55;border-radius:8px;padding:6px 8px;box-shadow:0 0 18px #000a;}
#featBar.collapsed{max-height:none;}
#featBar.collapsed .featGroups{display:none;}
/* hide the floating feature chips while the title screen is showing (declutter) */
#wrap:has(#titleOverlay:not(.hidden)) #featBar{display:none;}
/* compact title buttons so all of them fit and scroll if needed */
#titlePanel .btn{padding:9px 16px;margin:6px 0;font-size:10px;}
.featToggle{align-self:center;background:#1a0d3a;border:2px solid #ffd74a;color:#ffd74a;font-family:inherit;font-size:8px;letter-spacing:1px;padding:5px 10px;border-radius:6px;cursor:pointer;transition:all .12s;}
.featToggle:hover{background:#ffd74a;color:#001;}
.featGroups{width:100%;display:flex;flex-direction:column;gap:6px;}
.featGroup{width:100%;}
.featGroupHead{font-size:6px;letter-spacing:2px;text-transform:uppercase;color:#cfe9ffaa;border-left:3px solid var(--accent,#fff);padding:2px 4px;margin-bottom:3px;}
.featGroupChips{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;}
.featChip{background:#000c;border:2px solid var(--accent,#4cc2ff);color:var(--accent,#4cc2ff);font-family:inherit;font-size:7px;padding:4px 7px;border-radius:6px;cursor:pointer;transition:all .12s;}
.featChip:hover{--accent:#ffd74a!important;border-color:#ffd74a!important;color:#ffd74a!important;background:#1a1040;}
.featChip.on{border-color:#ffd74a;background:#2a1d05;color:#ffd74a;box-shadow:0 0 10px #ffd74a88;font-weight:bold;}
#toast{position:absolute;top:170px;left:50%;transform:translateX(-50%);background:#1a0d3aee;border:2px solid #ffd74a;color:#ffd74a;font-size:8px;padding:8px 14px;pointer-events:none;opacity:0;transition:opacity .3s;text-align:center;max-width:80%;box-shadow:0 0 14px #ffd74a66;}
#toast.show{opacity:1;}