:root { color-scheme: light dark; font-family: system-ui, sans-serif; font-size: 16px; }
body { margin: 0; background: light-dark(#f6f6f4, #181a1c); color: light-dark(#202427, #eee); }
main { max-width: 850px; padding: 16px; margin: auto; }
header, .game-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.1rem; margin: 0 0 12px; } small, .muted { color: light-dark(#60676c, #abb1b5); font-size: .85rem; }
section { background: light-dark(white, #24272a); border: 1px solid light-dark(#d6d9da, #444); border-radius: 6px; padding: 16px; margin: 12px 0; }
button, input, select { font: inherit; border: 1px solid light-dark(#aab0b3, #777); border-radius: 4px; padding: 10px 12px; max-width: 100%; box-sizing: border-box; }
button { cursor: pointer; background: light-dark(#f1f3f4, #343a3e); color: inherit; min-height: 44px; touch-action: manipulation; }
button:disabled { opacity: .45; cursor: default; } button[aria-pressed="true"] { background: light-dark(#d4e8fa, #204b6e); border-color: #4386bd; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid #4386bd; outline-offset: 2px; }
.actions, form, .target-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0; }
label { display: inline-flex; align-items: center; gap: 8px; } .target-actions select { width: 165px; } .settings-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 12px; width: 100%; } .settings-grid label { justify-content: space-between; } .settings-grid input { width: 95px; }
details { margin: 16px 0; } summary { cursor: pointer; } #qr { display: block; max-width: 100%; height: auto !important; margin: 12px 0; } #invite { overflow-wrap: anywhere; font-size: .85rem; }
a { color: light-dark(#155b94, #8cc9ff); } #timer { font-variant-numeric: tabular-nums; white-space: nowrap; } #pending { min-height: 1.5em; font-weight: 600; }
.table-scroll { overflow: auto; } table { width: 100%; border-collapse: collapse; font-size: .9rem; } th, td { text-align: left; padding: 10px 6px; border-bottom: 1px solid light-dark(#e3e5e6,#444); } th { white-space: nowrap; } tr.out { opacity: .6; }
#logs { max-height: 240px; overflow-y: auto; font-size: .85rem; line-height: 1.7; overflow-wrap: anywhere; } #logs p { margin: 4px 0; } #error { color: light-dark(#a62424,#ffa4a4); padding: 10px; border: 1px solid; }
[hidden] { display: none !important; }
@media(max-width: 480px) { main { padding: 10px; } section { padding: 12px; } header { align-items: baseline; } #connection { font-size: .8rem; } #name { width: 170px; } }
@media(max-width: 600px) {
  .game-heading { align-items: baseline; } .game-heading h2 { font-size: 1rem; }
  #discussion > .actions { display: grid; grid-template-columns: 1fr 1fr; }
  .target-actions { display: grid; grid-template-columns: minmax(0, 1fr) 80px; }
  .target-actions label { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
  .target-actions select { width: 100%; } .target-actions button { align-self: end; }
  #selection { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  #selection button { padding: 12px 6px; font-size: .9rem; min-height: 54px; }
  #self { line-height: 1.8; } th, td { padding: 9px 4px; } th:first-child,td:first-child { max-width: 100px; overflow-wrap: anywhere; }
  #name-form { align-items: stretch; } #name-form label { flex: 1; } #name { width: 100%; min-width: 0; }
}