.game-dialog { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 20px; }
.game-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.game-heading h2 { margin:0; font-size:20px; }
.game-dialog [data-game="status"] { margin:16px 0 8px; font-weight:600; }
.game-dialog [data-game="players"] { color:var(--text-secondary); font-size:13px; overflow-wrap:anywhere; margin:0 0 16px; }
.game-dialog details { margin:16px 0; color:var(--text-secondary); font-size:13px; }
.game-dialog summary { cursor:pointer; padding:8px 0; }
.game-dialog [data-game="error"]:empty { display:none; }
.game-options,.game-dialog [data-game="actions"] { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.game-options { margin-top:12px; }
.game-options select { min-height:44px; padding:8px; border:1px solid var(--border); border-radius:6px; background:var(--surface-2); color:var(--text); }
.game-picker { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.game-picker button,.game-options button,.game-dialog [data-game="actions"] button { min-height:44px; }
.game-card { width: min(280px, 100%); min-width:180px; height:132px; display:flex; flex-direction:column; gap:6px; justify-content:space-between; }
.game-card-status { font-size:12px; line-height:18px; height:36px; overflow:hidden; }
.game-card .btn { align-self:flex-start; min-height:40px; color:inherit; border-color:currentColor; }
.game-grid { display:grid; width:100%; max-width:448px; margin:auto; border:1px solid var(--separator); overflow:hidden; border-radius:8px; }
.game-grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); max-width:330px; }
.game-grid-7 { grid-template-columns:repeat(7,minmax(0,1fr)); }
.game-grid-8 { grid-template-columns:repeat(8,minmax(0,1fr)); }
.game-cell,.game-column { border:0; border-radius:0; min-width:0; padding:0; aspect-ratio:1; background:#b7c7d6; color:#162435; font-size:clamp(22px,6vw,38px); cursor:pointer; }
.game-column { min-height:44px; aspect-ratio:auto; background:var(--surface-2); color:var(--text); font-size:24px; }
.game-cell.game-square-dark { background:#607b94; }
.game-cell:disabled { opacity:1; cursor:default; }
.game-cell.is-legal:not(:disabled) { box-shadow:inset 0 0 0 2px #1b4c36; }
.game-cell.is-selected { box-shadow:inset 0 0 0 3px #174dad; background:#90bafb; }
.game-cell:focus-visible,.game-column:focus-visible { outline:3px solid #09192a; outline-offset:-4px; position:relative; z-index:1; }
.game-cell.piece-white { color:#fff; text-shadow:0 1px 1px #111,1px 0 1px #111,-1px 0 1px #111; }
.game-cell.piece-black { color:#111; text-shadow:0 1px 1px #e9edf2; }
.game-grid-3 .game-cell { font-size:48px; border:1px solid #607b94; }
.game-disc { font-size:clamp(24px,8vw,44px); }
.game-mancala { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; }
.game-pit { min-width:0; min-height:52px; padding:0; background:var(--surface-2); border:1px solid var(--separator); border-radius:40%; color:var(--text); font-size:18px; }
.game-pit:not(:disabled) { border-color:var(--focus); cursor:pointer; }
.game-pit:disabled { opacity:1; }
.game-pit.is-store { background:var(--surface-0); font-weight:bold; }
.game-heap h3 { font-size:14px; margin:16px 0 6px; }
.game-score { font-size:14px; text-align:center; }
.game-dartboard { display:block; width:100%; max-width:350px; margin:auto; touch-action:manipulation; }
.dart-zone { stroke:#c0c9ce; stroke-width:.003; }
.dart-black { fill:#20262c; }.dart-cream { fill:#e2d9bd; }.dart-red { fill:#a93942; }.dart-green { fill:#23745b; }
.dart-number { fill:var(--text); font-size:.085px; }
.dart-aim { fill:#fff; stroke:#173faa; stroke-width:.015; }
#game-open { flex-shrink:0; width:36px; min-height:44px; }
@media(max-width:480px) { .game-dialog { padding:12px; } .game-dialog .game-options { gap:6px; } }