/* Shared look for the card & board games — matches the landing page theme. */
:root{
  --bg:#f4f6fb; --panel:#ffffff; --panel2:#f6f8fc;
  --border:rgba(12,22,45,.12); --text:#0e1626; --text2:#54627a; --muted:#8b97a9;
  --accent:#1f6fe6; --accent2:#0ea5c4; --live:#0f9d63; --danger:#d93f3f; --warn:#e0a100;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --bg:#0a0e15; --panel:#111725; --panel2:#0d1320;
    --border:rgba(255,255,255,.10); --text:#eef2f7; --text2:#96a1b4; --muted:#5b6577;
    --accent:#2b7fff; --accent2:#22d3ee; --live:#34d399; --danger:#ff6b6b; --warn:#ffc233;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0a0e15; --panel:#111725; --panel2:#0d1320;
  --border:rgba(255,255,255,.10); --text:#eef2f7; --text2:#96a1b4; --muted:#5b6577;
  --accent:#2b7fff; --accent2:#22d3ee; --live:#34d399; --danger:#ff6b6b; --warn:#ffc233;
  color-scheme: dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--text);font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;text-wrap:pretty}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}

.kg-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;padding-top:max(10px,env(safe-area-inset-top))}
.kg-back{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-size:14px;color:var(--text2);padding:8px 12px;border-radius:999px;border:1px solid var(--border);background:var(--panel)}
.kg-back:hover{color:var(--text);border-color:var(--accent)}
.kg-title{font-weight:700;font-size:18px;letter-spacing:-.01em;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kg-iconbtn{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:var(--panel);display:inline-flex;align-items:center;justify-content:center;font-size:17px;line-height:1}
.kg-iconbtn:hover{border-color:var(--accent)}

.kg-btn{border:1px solid var(--border);background:var(--panel);padding:9px 16px;border-radius:12px;font-weight:600;font-size:14px;transition:border-color .15s,transform .1s}
.kg-btn:hover{border-color:var(--accent)}
.kg-btn:active{transform:scale(.97)}
.kg-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.kg-btn.danger{color:var(--danger)}
.kg-btn[disabled]{opacity:.45;cursor:default}
.kg-btn:focus-visible,.kg-iconbtn:focus-visible,.kg-back:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.kg-seg{display:inline-flex;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--panel)}
.kg-seg button{border:0;background:transparent;padding:8px 14px;font-size:13.5px;font-weight:600;color:var(--text2)}
.kg-seg button.on{background:var(--accent);color:#fff}

.kg-card{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--border);border-radius:18px;padding:22px}
.kg-mono{font-family:'Space Mono',monospace;letter-spacing:.08em}
.kg-muted{color:var(--text2)}

/* modal */
.kg-overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(5,9,16,.6);backdrop-filter:blur(4px)}
.kg-overlay[hidden]{display:none}
.kg-modal{width:min(420px,100%);max-height:92vh;overflow:auto;background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:24px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.kg-modal h2{margin:0 0 6px;font-size:22px;letter-spacing:-.01em}
.kg-modal p{margin:0 0 16px;color:var(--text2);font-size:14.5px;line-height:1.5}
.kg-modal .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.kg-modal .row>*{flex:1 1 auto}
.kg-modal input[type=text]{width:100%;padding:11px 13px;border-radius:11px;border:1px solid var(--border);background:var(--bg);color:var(--text);font:inherit;font-size:16px}
.kg-modal input[type=text]:focus{outline:2px solid var(--accent);border-color:transparent}
.kg-code{font-family:'Space Mono',monospace;font-size:34px;font-weight:700;letter-spacing:.2em;text-align:center;padding:12px;border:1px dashed var(--border);border-radius:14px;margin:8px 0 14px;user-select:all}
.kg-field{display:block;margin:0 0 12px;font-size:12.5px;color:var(--text2);font-weight:600}
.kg-field input{margin-top:5px}

.kg-toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;background:var(--text);color:var(--bg);padding:10px 16px;border-radius:12px;font-size:14px;font-weight:600;z-index:60;transition:all .25s;max-width:90vw;text-align:center}
.kg-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion: reduce){ *{transition:none!important;animation:none!important} }