/* Cornhole Alternative Games – shared responsive styles (system fonts only) */
:root{
--bg:#f0f4f8;--card:#fff;--text:#1a1a2e;--muted:#4a5568;--border:#e2e8f0;
--red:#dc2626;--blue:#2563eb;--green:#10b981;--gold:#f4a020;
--team1:#dc2626;--team2:#2563eb;--shadow:0 4px 20px rgba(0,0,0,.08);
--display:"Bebas Neue",Impact,"Arial Narrow Bold","Roboto Condensed","Helvetica Neue",Arial,sans-serif;
--body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--tap:48px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--body);background:var(--bg);color:var(--text);min-height:100dvh;
 padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
 -webkit-tap-highlight-color:transparent}
button,input{font:inherit}
button{min-height:var(--tap);border:none;border-radius:12px;font-weight:700;cursor:pointer;padding:12px 20px;touch-action:manipulation}
button:disabled{opacity:.5;cursor:not-allowed}
.wrap{width:100%;max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
h1{font-family:var(--display);letter-spacing:2px;font-size:clamp(1.8rem,6vw,3rem);line-height:1.05;text-align:center;
 background:linear-gradient(135deg,var(--team1),var(--team2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.subtitle{text-align:center;font-size:.85rem;color:var(--muted);font-weight:600}
.card{background:var(--card);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.btn-blue{background:linear-gradient(135deg,var(--blue),#1d4ed8);color:#fff}
.btn-green{background:linear-gradient(135deg,var(--green),#059669);color:#fff}
.btn-red{background:linear-gradient(135deg,var(--red),#b91c1c);color:#fff}
.btn-grey{background:#e5e7eb;color:var(--text)}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.row>button{flex:1 1 200px}
.slider-header{display:flex;justify-content:space-between;font-weight:600;color:var(--muted)}
.slider-value{font-weight:800;color:var(--text)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:5px;background:var(--border);margin:18px 0 8px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:36px;height:36px;border-radius:50%;background:var(--blue);cursor:pointer}
input[type=range]::-moz-range-thumb{width:36px;height:36px;border-radius:50%;background:var(--blue);border:none}
.slider-ticks{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.team-name-input{display:block;width:100%;min-height:var(--tap);padding:10px;border-radius:10px;border:2px solid var(--border);text-align:center;font-weight:700;font-size:16px}
.team-name-input.team1{border-color:var(--team1);color:var(--team1)}
.team-name-input.team2{border-color:var(--team2);color:var(--team2)}
.overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1000;padding:12px;background:rgba(0,0,0,.5)}
.overlay.open{display:flex}
.dialog{background:#fff;border-radius:16px;padding:18px;width:100%;max-width:420px;max-height:calc(100dvh - 24px);overflow:auto;display:flex;flex-direction:column;gap:10px;text-align:center}
.dialog.wide{max-width:760px}
.dialog h2,.dialog h3{font-family:var(--display);letter-spacing:1px;font-size:1.8rem}
footer{margin-top:16px;text-align:center;font-size:12px;color:var(--muted)}
@media (max-height:500px) and (orientation:landscape){
 h1{font-size:1.8rem}.subtitle{display:none}.card{padding:12px}.wrap{gap:10px}
 .dialog{padding:12px;gap:6px}.dialog h2,.dialog h3{font-size:1.4rem}
}
/* end-of-game screen + sudden-death banner */
.end-winner{font-family:var(--display);font-size:clamp(2rem,8vw,3rem);line-height:1.05;overflow-wrap:anywhere}
.end-winner.team1{color:var(--team1)}.end-winner.team2{color:var(--team2)}.end-winner.tie{color:var(--gold)}
.end-reason{color:var(--muted);font-weight:600}
.end-table{width:100%;border-collapse:collapse;font-weight:600}
.end-table th,.end-table td{padding:6px;border-bottom:1px solid var(--border);overflow-wrap:anywhere}
.end-table td.num{font-family:var(--display);font-size:1.5rem}
.sd-banner{display:none;background:var(--gold);color:#1a1a2e;font-weight:800;text-align:center;border-radius:12px;padding:10px}
.sd-banner.show{display:block}

/* v1.3.0: Free Play + King of the Hill */
.btn-gold{background:linear-gradient(135deg,#f4a020,#e08a00);color:#1a1a2e}
.mode-card{display:flex;flex-direction:column;gap:10px;border:2px dashed var(--gold);border-radius:16px;padding:12px;background:#fffaf0}
.mode-card>button{width:100%}
.toggle-row{display:flex;justify-content:center;align-items:center;gap:14px;font-weight:600;min-height:var(--tap)}
.toggle-switch{position:relative;width:64px;height:36px;display:inline-block;flex:none}
.toggle-switch input{opacity:0;width:0;height:0}
.slider-toggle{position:absolute;inset:0;background:#d1d5db;border-radius:36px;transition:.3s;cursor:pointer}
.slider-toggle:before{content:"";position:absolute;height:28px;width:28px;left:4px;top:4px;background:#fff;border-radius:50%;transition:.3s}
.toggle-switch input:checked+.slider-toggle{background:var(--gold)}
.toggle-switch input:checked+.slider-toggle:before{transform:translateX(28px)}
.koth-label{display:block;font-size:.85rem;color:var(--muted);font-weight:600;margin-bottom:6px}
.koth-queue{width:100%;min-height:88px;border:2px solid var(--border);border-radius:10px;padding:10px;font:inherit;font-size:16px;resize:vertical}
.koth-bar{display:none;flex-wrap:wrap;gap:6px 14px;justify-content:center;align-items:center;background:#1a1a2e;color:#fff;border-radius:12px;padding:8px 12px;font-weight:700}
.koth-bar.show{display:flex}
.koth-bar .koth-streak{background:var(--gold);color:#1a1a2e;border-radius:999px;padding:2px 10px}
.koth-bar .koth-next{font-weight:600;opacity:.9;overflow-wrap:anywhere}
.koth-end{font-weight:700;overflow-wrap:anywhere}.koth-end:empty{display:none}
.koth-add{display:flex;gap:6px}.koth-add[hidden]{display:none}.koth-add input{flex:1;min-width:0}.koth-add button{flex:none}
.end-dialog .end-info{display:flex;flex-direction:column;gap:8px;min-width:0}
.end-actions{display:flex;flex-direction:column;gap:8px}
.end-actions button[hidden]{display:none}
/* end screen in landscape (phones, Fire tablets): two columns so the buttons are always visible */
@media (orientation:landscape) and (max-height:820px){
 .dialog.end-dialog{max-width:860px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(220px,1fr);gap:6px 18px;align-items:center;text-align:center}
 .end-dialog h3{grid-column:1/-1}
 .end-actions{align-self:center}
}
@media (orientation:landscape) and (max-height:500px){
 .dialog.end-dialog{padding:10px 14px}
 .end-dialog h3{font-size:1.2rem}
 .end-dialog .end-info{gap:4px}
 .end-dialog .end-winner{font-size:1.9rem}
 .end-dialog .end-reason,.koth-end{font-size:.85rem}
 .end-dialog .end-table th,.end-dialog .end-table td{padding:2px 6px}
 .end-dialog .end-table td.num{font-size:1.2rem}
 .end-actions{gap:6px}
 .end-actions button{min-height:44px;padding:6px 12px}
 .koth-add input{min-height:44px;padding:4px}
 .mode-card{padding:10px}
}

/* locked Director mode: no way back to the menu */
.cag-locked #return-btn,.cag-locked #setup-return-btn{display:none!important}

/* v1.4.0 Singles / Doubles */
.format-tag{align-self:center;background:#1a1a2e;color:#fff;border-radius:999px;padding:4px 14px;font-weight:700}
.format-tag[hidden]{display:none}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:0}
.pair input{min-width:0;width:100%}
.singles .pair{grid-template-columns:1fr}.singles .partner{display:none}