:root, [data-theme=dark] { --bg:#121214; --panel:#1c1c21; --panel2:#26262d; --line:#4a4a55; --text:#e8e8ec; --muted:#a6a6b2; --accent:#ff8a1f; --accent2:#ffb15c; --on-accent:#111; --header:#0d0d0f; --inset:#141417; --err:#ff7b7b; --focus:#ffb15c; color-scheme:dark; }
[data-theme=light] { --bg:#f6f3ef; --panel:#ffffff; --panel2:#f1ebe4; --line:#b9ada0; --text:#1d1b19; --muted:#57514b; --accent:#b84f00; --accent2:#9a4200; --on-accent:#fff; --header:#fff7ef; --inset:#faf7f3; --err:#b3261e; --focus:#b84f00; color-scheme:light; }
html { font-size:15px; } html[data-text=large] { font-size:17px; } html[data-text=xl] { font-size:20px; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:1rem/1.45 system-ui, Segoe UI, sans-serif; }
header { display:flex; justify-content:space-between; align-items:center; padding:10px 20px; border-bottom:2px solid var(--accent); background:var(--header); gap:10px; flex-wrap:wrap; }
h1 { margin:0; font-size:1.45rem; } h1 span { color:var(--accent); }
h2, h3 { color:var(--accent2); margin:.3em 0; }
main { padding:16px 20px; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px; margin-bottom:14px; }
button, select, input { background:var(--panel2); color:var(--text); border:1px solid var(--line); border-radius:6px; padding:7px 12px; font:inherit; }
button { cursor:pointer; } button:hover:not(:disabled) { border-color:var(--accent); }
button.primary { background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:600; }
button:disabled { opacity:.45; cursor:default; }
:focus-visible { outline:3px solid var(--focus) !important; outline-offset:2px; }
input:focus, select:focus { border-color:var(--accent); }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.grid2 { display:grid; grid-template-columns: 1fr 340px; gap:14px; align-items:start; }
.muted { color:var(--muted); } .err { color:var(--err); min-height:1.2em; } .accent { color:var(--accent); }
.code { font-size:28px; letter-spacing:4px; color:var(--accent); font-weight:700; }
.roomlist { list-style:none; margin:0; padding:0; } .roomlist li { padding:6px 8px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.chat { height:260px; overflow-y:auto; background:var(--inset); border:1px solid var(--line); border-radius:6px; padding:8px; font-size:.93rem; list-style:none; margin:0; }
.chat li { display:flex; justify-content:space-between; gap:6px; padding:3px 0; overflow-wrap:anywhere; } .chat li.sys { color:var(--muted); font-style:italic; }
.chat b { color:var(--accent2); }
.log { max-height:220px; overflow-y:auto; font-size:13px; color:var(--muted); }
.gamecards { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; }
.gamecard { padding:10px; border:1px solid var(--line); border-radius:8px; cursor:pointer; background:var(--panel2); display:flex; flex-direction:column; gap:3px; text-align:left; }
.gamecard.sel { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.pl { padding:3px 8px; border-radius:12px; background:var(--panel2); margin:2px; display:inline-block; }
.pl.turn { background:var(--accent); color:var(--on-accent); } .pl.off { opacity:.7; }
svg text { font-family: system-ui, sans-serif; user-select:none; }
.unocard { width:62px; height:92px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:20px; margin:3px; border:3px solid #fff2; cursor:pointer; color:#fff; text-shadow:0 1px 2px #000; vertical-align:top; }
.unocard.playable { border-color:var(--accent); transform:translateY(-4px); }
.modal { position:fixed; inset:0; background:#000a; display:flex; align-items:center; justify-content:center; z-index:9; }
.modal .panel { min-width:380px; max-height:85vh; overflow:auto; }

/* v4: accessibility + polish */
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip { position:absolute; left:-999px; top:6px; background:var(--accent); color:var(--on-accent); padding:8px 12px; border-radius:6px; z-index:50; }
.skip:focus { left:8px; }
.prefs { gap:8px; } .small { font-size:.85rem; } .narrow { max-width:440px; margin:50px auto; }
.stack { display:flex; flex-direction:column; gap:8px; } .check { display:inline-flex; gap:6px; align-items:center; cursor:pointer; }
.plist, .people { list-style:none; padding:0; margin:0; } .plist li { display:inline-block; }
.people li { display:flex; justify-content:space-between; align-items:center; gap:6px; padding:4px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.hosttools summary { cursor:pointer; } .hosttools h4 { margin:.8em 0 .3em; color:var(--accent2); } .hosttools label { display:block; margin:6px 0 2px; } .hosttools .check { display:inline-flex; }
button.icon { padding:0 6px; line-height:1.4; background:transparent; border-color:transparent; color:var(--muted); } button.icon:hover { color:var(--err); }
.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--panel2); color:var(--text); border:2px solid var(--accent); padding:10px 16px; border-radius:8px; z-index:60; max-width:90vw; box-shadow:0 4px 18px #0006; }
.toast.error { border-color:var(--err); }
.netstatus { background:var(--accent); color:var(--on-accent); text-align:center; padding:6px; font-weight:600; }
.spinner { width:28px; height:28px; border:3px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:spin 1s linear infinite; margin:12px 0; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width: 820px) { .grid2 { grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .unocard.playable { transform:none; }
}

/* v5: touch + mobile */
html { -webkit-text-size-adjust:100%; }
body { overflow-x:hidden; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.grid2 > * { min-width:0; } /* let boards shrink instead of overflowing */
#game svg, #game canvas { max-width:100%; height:auto; touch-action:manipulation; }
#game canvas[aria-label="Drawing canvas"] { touch-action:none; }
img, svg, canvas, table { max-width:100%; }
#game table { display:block; overflow-x:auto; }
.modal .panel { min-width:min(380px, 92vw); max-width:96vw; }
.toast { bottom:calc(20px + env(safe-area-inset-bottom)); }
input, select, textarea { font-size:max(16px, 1rem); } /* stops iOS zooming in on focus */
.swatch { width:36px; height:36px; padding:0; border-radius:50%; border:2px solid var(--line); }
.swatch[aria-pressed=true] { outline:3px solid var(--accent); outline-offset:2px; }
@media (pointer: coarse) {
  button, select, input:not([type=checkbox]):not([type=radio]), .gamecard, summary { min-height:44px; }
  button.icon { min-width:44px; }
  .swatch { width:44px; height:44px; }
  input[type=checkbox], input[type=radio] { width:22px; height:22px; }
  .check, label:has(> input[type=checkbox]), label:has(> input[type=radio]) { min-height:44px; display:inline-flex; align-items:center; gap:6px; }
  .unocard { width:58px; height:88px; }
}
/* On-screen controller (real-time games) */
.padwrap { margin-top:8px; }
.padtoggle { font-size:.9rem; }
.pad { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-top:8px; user-select:none; -webkit-user-select:none; touch-action:none; -webkit-touch-callout:none; }
.pad[hidden] { display:none; }
.dpad { display:grid; grid-template-columns:repeat(3,64px); grid-template-rows:repeat(3,64px); gap:4px; }
.dpad .d-up { grid-area:1/2; } .dpad .d-left { grid-area:2/1; } .dpad .d-right { grid-area:2/3; } .dpad .d-down { grid-area:3/2; }
.dpad.two { grid-template-columns:repeat(2,80px); grid-template-rows:72px; } .dpad.two .d-left { grid-area:1/1; } .dpad.two .d-right { grid-area:1/2; }
.pacts { display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end; }
.pbtn { min-width:64px; min-height:64px; font-size:1.4rem; border-radius:14px; background:var(--panel2); border:2px solid var(--line); touch-action:none; }
.pbtn.act { min-width:84px; min-height:84px; aspect-ratio:1; padding:4px; border-radius:50%; font-size:1rem; font-weight:700; background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.pbtn.on { transform:scale(.94); border-color:var(--accent); filter:brightness(1.15); }
@media (max-width: 600px) {
  header { padding:8px 10px; } h1 { font-size:1.2rem; }
  main { padding:10px 8px; }
  .panel { padding:10px; border-radius:8px; }
  .code { font-size:24px; letter-spacing:3px; }
  .gamecards { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
  .chat { height:200px; }
  #who { font-size:.9rem; }
  .narrow { margin:20px auto; }
  header .lbl { display:none; } /* icon-only header buttons on phones (they keep aria-labels) */
  header .prefs { gap:6px; } #textsize { max-width:9.5rem; }
}
/* Landscape phones: short screens. Keep the board and controls side by side-ish and compact. */
@media (max-height: 500px) and (orientation: landscape) {
  header { padding:4px 10px; } h1 { font-size:1.1rem; }
  main { padding:6px 8px; }
  .dpad { grid-template-columns:repeat(3,52px); grid-template-rows:repeat(3,52px); }
  .dpad.two { grid-template-columns:repeat(2,64px); grid-template-rows:60px; }
  .pbtn { min-width:52px; min-height:52px; } .pbtn.act { min-width:66px; min-height:66px; }
  .chat { height:160px; }
  header .lbl, #game .panel > .row .muted.small { display:none; }
  .grid2 { grid-template-columns:1fr; }
  /* controller floats over the bottom corners like a handheld: d-pad left, buttons right */
  .pad:not([hidden]) { position:fixed; left:0; right:0; bottom:0; padding:0 calc(10px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left)); z-index:20; pointer-events:none; margin:0; }
  .pad .pbtn { pointer-events:auto; opacity:.82; }
  #game canvas[style*="aspect-ratio"] { max-height:calc(100vh - 70px); width:auto !important; max-width:100%; margin-left:auto !important; margin-right:auto !important; }
}