:root {
  --sand: #e9d6b0;
  --sand-deep: #d8bf90;
  --ink: #2f2a24;
  --muted: #7a7266;
  --paper: #fbf7ef;
  --panel: #ffffff;
  --line: #e7ddca;
  --accent: #2a9d8f;
  --accent-deep: #21867a;
  --warn: #e26d5c;
  --shadow: 0 6px 24px rgba(60, 50, 30, 0.14);
  --radius: 14px;
  /* playful palette — keep games cheerful, not clinical */
  --joy-red: #ff6b6b;
  --joy-orange: #ff9f45;
  --joy-yellow: #ffd23f;
  --joy-green: #3ddc97;
  --joy-blue: #4d96ff;
  --joy-purple: #b15eff;
  --joy-pink: #ff7bd5;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-tap-highlight-color: transparent;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
}

.screen { display: none; height: 100%; }
.screen.active { display: block; }
#room.active { display: flex; flex-direction: column; }

button { font-family: inherit; cursor: pointer; }

.muted { color: var(--muted); }
.small { font-size: 0.82rem; }

/* ---------- buttons ---------- */
.btn {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  transition: transform .05s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { background: #f4eee2; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(135deg, #2fb8a8, #1f9488); border-color: transparent; color: #fff; box-shadow: 0 3px 0 #15716a, 0 6px 14px rgba(33,134,122,.3); }
.btn-primary:hover { background: linear-gradient(135deg, #36c6b5, #239b8e); }
.btn-primary:active { box-shadow: 0 1px 0 #15716a; transform: translateY(2px); }
.btn-ghost { background: transparent; }
.btn-block { display: block; width: 100%; }
.btn-sm { padding: 7px 12px; font-size: 0.85rem; }
.btn-danger { background: var(--warn); border-color: transparent; color: #fff; }
.btn-danger:hover { background: #d35946; }

/* "Close room" lives in the share modal; shown only to the clinician, in the room. */
/* Dedicated "Close room" button in the toolbar — set apart and tinted so it isn't hit by accident. */
.tool-danger { color: var(--warn); border-color: var(--warn); font-weight: 700; }
.tool-danger:hover { background: var(--warn); color: #fff; }

/* Text-box editor: an HTML textarea overlaid on the canvas while editing a text object. */
.text-editor {
  position: absolute; z-index: 40; resize: none; overflow: hidden;
  font-family: 'Segoe UI', system-ui, sans-serif; font-weight: 600; line-height: 1.25; color: #2f2a24;
  background: rgba(255,255,255,0.97); border: 2px solid var(--accent); border-radius: 8px;
  padding: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.text-editor[hidden] { display: none; }

/* ======================= LOBBY ======================= */
#lobby, #blocked {
  display: none;
  place-items: center;
  background: radial-gradient(1200px 600px at 50% -10%, #fff 0%, var(--paper) 60%);
  overflow: auto;
  padding: 24px;
}
#lobby.active, #blocked.active { display: grid; }

.lobby-card {
  width: min(520px, 100%);   /* single-purpose lobby: one panel (Join, or Create on /clinician) */
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 36px;
}
/* The no-clinician / removed splash: a narrower, centered, controls-free card.
   (Defined after .lobby-card so its width wins on the shared .lobby-card element.) */
.blocked-card { width: min(460px, 100%); text-align: center; }
.lobby-brand { text-align: center; margin-bottom: 28px; }
.lobby-logo { font-size: 56px; }
.lobby-brand h1 { margin: 6px 0 4px; font-size: 2rem; }
.tagline { color: var(--muted); margin: 0 auto; max-width: 520px; }
.activities-hint { color: var(--muted); margin: 10px auto 0; max-width: 520px; font-size: 0.85rem; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; }

.lobby-panels { display: grid; grid-template-columns: 1fr; gap: 22px; }
/* Single-purpose lobby: hidden by default, revealed by the <html> mode class (set before
   paint in index.html, then kept in sync by setLobbyMode) — so the wrong panel never flashes. */
#createPanel, #joinPanel { display: none; }
html.lobby-create #createPanel { display: block; }
html.lobby-join #joinPanel { display: block; }
.lobby-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.lobby-panel h2 { margin: 0 0 4px; font-size: 1.2rem; }

.field { display: block; margin: 14px 0; }
.field > span { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; }
.field em { color: var(--muted); font-weight: 400; font-style: normal; }
.field input {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 10px;
  font-size: 0.95rem; background: #fff;
}
.field input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }

.lobby-error {
  margin-top: 18px; padding: 12px 14px; border-radius: 10px;
  background: #fdecea; color: #b3261e; border: 1px solid #f6cfca;
}

/* "Your rooms" — per-device list on the clinician create page */
.clin-rooms { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 14px; text-align: left; }
.clin-rooms-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.clin-rooms-head h3 { margin: 0; font-size: 1rem; }
.clin-rooms-head em { color: var(--muted); font-weight: 400; font-size: 0.8rem; }
.link-btn { background: none; border: none; color: var(--accent); font-size: 0.82rem; cursor: pointer; padding: 2px 4px; }
.link-btn:hover { text-decoration: underline; }
.clin-rooms-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.clin-room { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
.clin-room-name { font-weight: 600; }
.clin-room-btns { display: flex; gap: 6px; flex: none; }

/* ======================= MODALS ======================= */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(40, 34, 26, 0.45);
  display: grid; place-items: center; padding: 20px;
}
.modal {
  width: min(540px, 100%);
  background: var(--panel);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 28px;
}
.modal.modal-sm { width: min(420px, 100%); }
.modal h2 { margin: 0 0 6px; }
.modal-actions { margin-top: 22px; display: flex; justify-content: flex-end; gap: 10px; }

.link-block {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; margin-top: 16px; background: var(--paper);
}
.link-head { display: flex; align-items: center; gap: 10px; }
.copy-row { display: flex; gap: 8px; margin-top: 8px; }
.copy-row input {
  flex: 1; padding: 9px 11px; font-size: 0.85rem;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  color: var(--muted);
}

.badge {
  font-size: 0.72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: #eee; color: #555; text-transform: uppercase; letter-spacing: .03em;
}
.badge-clin { background: #d8f3ee; color: var(--accent-deep); }
.badge-client { background: #fdeede; color: #c4691f; }
.badge-role-clinician { background: #d8f3ee; color: var(--accent-deep); }
.badge-role-client { background: #fdeede; color: #c4691f; }

/* ======================= ROOM TOOLBAR ======================= */
.toolbar {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.tb-group { display: flex; align-items: center; gap: 8px; }
.tb-left { flex: 0 0 auto; }
.tb-tools { flex: 1 1 auto; justify-content: center; }
.tb-right { flex: 0 0 auto; gap: 6px; }
.tb-logo { font-size: 26px; }

.room-meta { display: flex; flex-direction: column; }
.room-name {
  border: none; background: transparent; font-size: 1.05rem; font-weight: 700;
  color: var(--ink); padding: 2px 4px; border-radius: 6px; width: 200px;
}
.room-name:not(:disabled):hover { background: #f1ebdd; }
.room-name:focus { outline: 2px solid var(--accent); }
.room-sub { display: flex; align-items: center; gap: 8px; padding-left: 4px; }
.conn-dot { width: 9px; height: 9px; border-radius: 50%; background: #c9a227; box-shadow: 0 0 0 3px rgba(201,162,39,.2); }
.conn-dot.on { background: #2ec27e; box-shadow: 0 0 0 3px rgba(46,194,126,.2); }
.conn-dot.off { background: #d33; box-shadow: 0 0 0 3px rgba(221,51,51,.2); }

.tool-set { display: flex; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 3px; }
.tool {
  border: 1px solid transparent; background: transparent;
  padding: 7px 11px; border-radius: 8px; font-size: 0.86rem; font-weight: 600;
  color: var(--ink); white-space: nowrap;
}
.tool:hover { background: #f1ebdd; }
.tool.active { background: var(--accent); color: #fff; }
.tool[data-on="true"] { background: var(--accent); color: #fff; }
.tb-right .tool { border: 1px solid var(--line); background: var(--panel); }
.tb-right .tool:hover { background: #f4eee2; }

.bg-select select {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel); font-size: 0.86rem; font-weight: 600; color: var(--ink);
}

.tool-divider { width: 1px; align-self: stretch; background: var(--line); margin: 0 4px; }

.activity-switch select {
  padding: 8px 10px; border: 1px solid var(--accent); border-radius: 9px;
  background: #eaf7f4; font-size: 0.86rem; font-weight: 700; color: var(--accent-deep);
  max-width: 180px;
}

/* compact mobile tool menus */
.mobile-only { display: none; }
.tool-select {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel); font-size: 0.9rem; font-weight: 700; color: var(--ink);
  max-width: 42vw;
}
.tool-select.tool-active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---------- contextual draw bar ---------- */
.draw-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 8px 14px; background: var(--paper); border-bottom: 1px solid var(--line);
}
.db-group { display: flex; align-items: center; gap: 6px; }
.db-group.db-end { margin-left: auto; }
.db-opt {
  border: 1px solid var(--line); background: var(--panel); border-radius: 9px;
  min-width: 38px; height: 36px; padding: 0 8px; font-size: 1.05rem; line-height: 1;
}
.db-opt:hover { background: #f1ebdd; }
.db-opt.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.db-label { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.db-val { font-size: 0.8rem; font-weight: 700; min-width: 20px; text-align: center; }
.db-check { font-size: 0.82rem; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.db-group input[type="range"] { width: 130px; accent-color: var(--accent); }

.swatches { display: flex; gap: 4px; }
.swatch {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0;
}
.swatch.active { box-shadow: 0 0 0 2px var(--accent); transform: scale(1.12); }
/* preset swatches (row 1) stacked over the recent custom-colour row (row 2) */
.swatch-stack { display: flex; flex-direction: column; gap: 4px; }
.swatches-recent { border-top: 1px dashed var(--line); padding-top: 4px; }
.swatches-recent[hidden] { display: none; }
.db-color { display: inline-flex; }
.db-color input[type="color"] {
  width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); padding: 2px; cursor: pointer;
}

.presence { display: flex; align-items: center; }
.avatar {
  position: relative;
  width: 30px; height: 30px; border-radius: 50%; margin-left: -6px;
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 0.8rem;
  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.avatar.observing { opacity: .55; }
.avatar:first-child { margin-left: 0; }

/* Clinician-only "remove from room" badge on each peer's avatar (reveals on hover/focus). */
.avatar-kick {
  position: absolute; top: -5px; right: -5px;
  width: 17px; height: 17px; padding: 0; border-radius: 50%;
  border: 1.5px solid #fff; background: var(--warn); color: #fff;
  font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  opacity: 0; transition: opacity .12s ease;
}
.avatar:hover .avatar-kick, .avatar-kick:focus-visible { opacity: 1; }

.clin-only { display: none; }
body.is-clinician .clin-only { display: inline-flex; align-items: center; }

/* ======================= WORKSPACE ======================= */
.workspace { flex: 1; display: flex; min-height: 0; position: relative; }

.palette {
  width: 280px; flex: 0 0 280px;
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0;
}
.palette-search { padding: 12px; border-bottom: 1px solid var(--line); }
.palette-search input {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; font-size: 0.9rem;
}
.cat-tabs {
  display: flex; flex-wrap: wrap; gap: 5px; padding: 10px 12px;
  border-bottom: 1px solid var(--line); max-height: 132px; overflow: auto;
}
.cat-tab {
  border: 1px solid var(--line); background: var(--paper);
  border-radius: 999px; padding: 5px 10px; font-size: 0.78rem; font-weight: 600;
}
.cat-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.toy-grid {
  flex: 1; overflow: auto; padding: 10px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px;
  align-content: start;
}
.toy {
  aspect-ratio: 1; border: 1px solid transparent; border-radius: 10px;
  background: var(--paper); font-size: 30px; line-height: 1;
  display: grid; place-items: center; cursor: grab; user-select: none;
  transition: transform .05s ease, background .12s ease;
}
.toy:hover { background: #f0e9d8; transform: translateY(-1px); }
.toy:active { cursor: grabbing; }
.toy.selected { outline: 2px solid var(--accent); background: #e7f5f2; }
.toy img { width: 78%; height: 78%; object-fit: contain; pointer-events: none; }
.palette-hint { margin: 0; padding: 10px 12px; font-size: 0.74rem; color: var(--muted); border-top: 1px solid var(--line); }

.cat-heading { grid-column: 1 / -1; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 2px 2px; }

/* ---------- stage ---------- */
.stage-wrap {
  flex: 1; position: relative; min-width: 0; z-index: 0;
  display: grid; place-items: center;
  background: #c9b485; /* surface colour set per-background in JS */
  overflow: hidden;
}
.stage, .stage .konvajs-content, .stage canvas { touch-action: none; }
.stage { overflow: hidden; }

.sel-bar {
  position: absolute; z-index: 20;
  display: flex; gap: 2px; padding: 4px;
  background: rgba(34,28,20,.92); border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
  transform: translate(-50%, 0);
}
.sel-bar button {
  border: none; background: transparent; color: #fff;
  width: 36px; height: 34px; border-radius: 8px; font-size: 16px;
}
.sel-bar button:hover { background: rgba(255,255,255,.18); }
.sel-bar button.danger:hover { background: var(--warn); }

.lock-banner {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  background: rgba(34,28,20,.9); color: #fff; padding: 8px 16px;
  border-radius: 999px; font-size: 0.85rem; font-weight: 600; z-index: 15;
}
.place-hint {
  position: absolute; bottom: 56px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff; padding: 8px 16px; border-radius: 999px;
  font-size: 0.85rem; font-weight: 600; z-index: 15; box-shadow: var(--shadow);
}
.toast {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 9px 18px; border-radius: 999px;
  font-size: 0.85rem; z-index: 30; box-shadow: var(--shadow);
}
.tray-actions { position: absolute; bottom: 12px; right: 14px; z-index: 15; }

.zoom-controls {
  position: absolute; bottom: 12px; left: 14px; z-index: 15;
  display: flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,.92); border: 1px solid var(--line);
  border-radius: 10px; padding: 4px; box-shadow: var(--shadow);
}
.zoom-controls button {
  border: none; background: transparent; width: 30px; height: 30px;
  border-radius: 7px; font-size: 1.1rem; font-weight: 700; color: var(--ink);
}
.zoom-controls button:hover { background: #f1ebdd; }
.zoom-label { font-size: 0.78rem; font-weight: 600; color: var(--muted); min-width: 38px; text-align: center; }

/* remote cursor labels handled on canvas; this is the name chip */
/* ---------- scenes panel ---------- */
.scenes-panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: 320px; background: var(--panel); border-left: 1px solid var(--line);
  box-shadow: -8px 0 24px rgba(60,45,20,.12); z-index: 25;
  display: flex; flex-direction: column; padding: 16px;
}
.scenes-head { display: flex; align-items: center; justify-content: space-between; }
.scenes-head h2 { margin: 0; font-size: 1.15rem; }
.icon-btn { border: none; background: transparent; font-size: 1.1rem; padding: 6px; border-radius: 8px; }
.icon-btn:hover { background: #f1ebdd; }
.scenes-list { flex: 1; overflow: auto; margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.scene-card {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--paper);
}
.scene-card img { width: 100%; height: 120px; object-fit: cover; display: block; background: #ddd; }
.scene-card .scene-meta { padding: 8px 10px; }
.scene-card .scene-name { font-weight: 600; font-size: 0.9rem; }
.scene-card .scene-date { font-size: 0.74rem; color: var(--muted); }
.scene-card .scene-btns { display: flex; gap: 6px; padding: 0 10px 10px; }
.scene-card .scene-btns .btn { flex: 1; }

/* ======================= GAME ACTIVITIES (UNO) ======================= */
/* Hide sandbox-only toolbar bits when a game activity is active. */
body:not([data-activity="sandbox"]) .tb-tools,
body:not([data-activity="sandbox"]) #drawBar,
body:not([data-activity="sandbox"]) #waterBtn,
body:not([data-activity="sandbox"]) #snapBtn,
body:not([data-activity="sandbox"]) #exportBtn,
body:not([data-activity="sandbox"]) #lockBtn,
body:not([data-activity="sandbox"]) #observeBtn,
body:not([data-activity="sandbox"]) .palette-toggle { display: none !important; }

.uno-activity {
  flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px; overflow: auto;
  background: radial-gradient(130% 120% at 50% 0%, #2f6e57 0%, #1d3b30 80%);
}
.uno-lobby { margin: auto; text-align: center; color: #fff; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.uno-logo { font-size: 3.2rem; font-weight: 900; font-style: italic; color: #f0b400; text-shadow: 3px 3px 0 #d8182a; letter-spacing: 2px; }
.uno-msg { color: #fff; margin: auto; }

.uno-opponents { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.uno-opp { background: rgba(255,255,255,.1); border-radius: 12px; padding: 8px 12px; color: #fff; text-align: center; }
.uno-opp.current { outline: 2px solid #f5c518; box-shadow: 0 0 14px rgba(245,197,24,.5); }
.uno-opp-name { font-weight: 700; font-size: .9rem; margin-bottom: 4px; }
.uno-opp-cards { display: flex; justify-content: center; min-height: 50px; }
.uno-opp-cards .uno-card { margin-left: -20px; }
.uno-opp-cards .uno-card:first-child { margin-left: 0; }
.uno-opp-count { font-size: .72rem; opacity: .85; margin-top: 2px; }
.uno-catch { margin-top: 6px; background: #fff; }

.uno-mid { display: flex; align-items: center; gap: 24px; }
.uno-pile { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.uno-pile-cap { color: #fff; font-size: .7rem; opacity: .8; }
.uno-info { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #fff; }
.uno-active-color { padding: 4px 14px; border-radius: 999px; color: #fff; font-weight: 700; text-transform: capitalize; }
.uno-dir { font-size: 1.6rem; }
.uno-message { color: #fff; font-weight: 600; background: rgba(0,0,0,.28); padding: 6px 16px; border-radius: 999px; text-align: center; }

.uno-lobby-opts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }
/* Running scoreboard (points toward the target). */
.uno-scores { background: rgba(0,0,0,.28); border-radius: 12px; padding: 8px 14px; color: #fff; min-width: 180px; }
.uno-scores-cap { font-size: .72rem; opacity: .85; text-align: center; margin-bottom: 4px; }
.uno-scores-rows { display: flex; flex-direction: column; gap: 2px; }
.uno-score { display: flex; justify-content: space-between; gap: 18px; padding: 2px 8px; border-radius: 7px; font-size: .9rem; }
.uno-score.leader { background: rgba(245,197,24,.28); font-weight: 700; }
.uno-score-pts { font-variant-numeric: tabular-nums; font-weight: 700; }

.uno-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }
.uno-colorpick { display: flex; gap: 8px; align-items: center; background: rgba(255,255,255,.14); padding: 6px 12px; border-radius: 10px; }
.uno-pick-label { color: #fff; font-size: .82rem; }
.uno-swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; cursor: pointer; }
.uno-shout { background: #f0b400; color: #2a2a2a; font-weight: 800; border-color: #f0b400; }
.uno-shout.urgent { animation: unoPulse 0.7s ease-in-out infinite; }
@keyframes unoPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(240,180,0,.6); } 50% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(240,180,0,0); } }

.uno-table { margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.uno-hand-wrap { width: 100%; }
.uno-hand-label { color: #fff; text-align: center; font-size: .85rem; margin-bottom: 6px; }
.uno-hand { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; min-height: 92px; align-items: flex-end; }
.uno-hand .uno-card:not(.playable) { opacity: .58; }

/* cards */
.uno-card {
  position: relative; width: 58px; height: 86px; border-radius: 9px; border: 3px solid #fff;
  box-shadow: 0 3px 7px rgba(0,0,0,.35); color: #fff; font-weight: 800; padding: 0; flex: 0 0 auto;
  background: #888;
}
.uno-card.small { width: 34px; height: 50px; border-width: 2px; border-radius: 6px; }
.uno-card.empty { background: rgba(255,255,255,.12); border-style: dashed; }
.uno-card::before { content: ''; position: absolute; inset: 8px 6px; background: rgba(255,255,255,.92); border-radius: 50% / 42%; transform: rotate(-22deg); }
.uno-card.small::before { inset: 5px 4px; }
.uno-card.empty::before, .uno-card.back::before { display: none; }
.uno-card .ctr { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.55rem; z-index: 1; color: var(--col, #888); }
.uno-card.small .ctr { font-size: .95rem; }
.uno-card .cnr { position: absolute; font-size: .72rem; color: #fff; z-index: 1; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
.uno-card .cnr.tl { top: 3px; left: 5px; }
.uno-card .cnr.br { bottom: 3px; right: 5px; transform: rotate(180deg); }
.uno-card.playable { cursor: pointer; }
.uno-card.playable:hover { transform: translateY(-10px); box-shadow: 0 8px 16px rgba(0,0,0,.4); }
.uno-card.back { background: #1c1c1c; }
.uno-card.back .ctr { color: #f0b400; font-style: italic; font-size: .8rem; transform: rotate(-20deg); }
.uno-draw { cursor: pointer; }
.uno-draw:disabled { cursor: default; opacity: .8; }

.c-red { --col: #d8182a; } .uno-card.c-red, .uno-swatch.c-red, .uno-active-color.c-red { background: #d8182a; }
.c-yellow { --col: #c99a00; } .uno-card.c-yellow, .uno-swatch.c-yellow, .uno-active-color.c-yellow { background: #f0b400; }
.c-green { --col: #1f9d4d; } .uno-card.c-green, .uno-swatch.c-green, .uno-active-color.c-green { background: #1f9d4d; }
.c-blue { --col: #1f5fd0; } .uno-card.c-blue, .uno-swatch.c-blue, .uno-active-color.c-blue { background: #1f5fd0; }
.uno-card.c-wild { --col: #2a2a2a; background: conic-gradient(from 0deg, #d8182a, #f0b400, #1f9d4d, #1f5fd0, #d8182a); }
.uno-active-color.c-wild { background: #2a2a2a; }

/* ---------- mandala colouring ---------- */
.mandala-activity {
  flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 14px; overflow: auto; background: radial-gradient(120% 120% at 50% 0%, #fbf7ef, #efe7d6);
}
.mandala-bar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; box-shadow: var(--shadow); }
.mandala-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.mandala-swatch.active { box-shadow: 0 0 0 2px var(--accent); transform: scale(1.14); }
/* preset swatches (row 1) stacked over the recent custom-colour row (row 2) */
.mandala-swatch-stack { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.mandala-swatches { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.mandala-recent { border-top: 1px dashed var(--line); padding-top: 6px; }
.mandala-recent[hidden] { display: none; }
.mandala-color { width: 32px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 2px; cursor: pointer; }
.mandala-level { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); font-size: 0.84rem; font-weight: 600; }
.mandala-bar .btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.mandala-board { flex: 1; min-height: 0; display: grid; place-items: safe center; width: 100%; overflow: auto; }
.mandala-svg { width: calc(min(84vh, 100%, 760px) * var(--mz, 1)); height: auto; background: #fff; border-radius: 14px; box-shadow: var(--shadow); padding: 6px; }
/* Only the colourable regions take clicks; veins, guide rings and the centre pin
   (all painted by the generator) pass clicks through to the region beneath. */
.mandala-svg path, .mandala-svg circle, .mandala-svg rect { pointer-events: none; }
.mandala-svg .mregion { pointer-events: fill; cursor: pointer; }   /* must out-specify the rule above */
.mandala-svg .mregion:hover { stroke: #1d6fe0 !important; stroke-width: 2.4 !important; }

/* ---------- Four in a Row (Connect 4) ---------- */
.c4-activity { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; overflow: auto; background: linear-gradient(160deg, #e4efff, #a7c8ff); }
.c4-lobby { text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.c4-logo { font-size: 2.4rem; font-weight: 900; color: #1f5fd0; letter-spacing: 0.5px; }
.c4-msg { color: var(--muted); }
.c4-players { display: flex; gap: 18px; }
.c4-player { display: flex; align-items: center; gap: 8px; font-weight: 700; padding: 6px 14px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); }
.c4-player.current { outline: 2px solid var(--accent); box-shadow: 0 0 12px rgba(42,157,143,.4); }
.c4-dot { width: 18px; height: 18px; border-radius: 50%; display: inline-block; }
.c4-dot.red, .c4-cell.red { background: #e23b3b; }
.c4-dot.yellow, .c4-cell.yellow { background: #f5c518; }
.c4-message { font-weight: 600; color: var(--ink); background: rgba(255,255,255,.7); padding: 6px 16px; border-radius: 999px; }
.c4-board { background: #1f5fd0; padding: 12px; border-radius: 16px; display: flex; gap: 8px; box-shadow: 0 10px 26px rgba(20,40,90,.4); }
.c4-col { display: flex; flex-direction: column; gap: 8px; padding: 4px; border-radius: 10px; transition: background .1s; }
.c4-col.playable { cursor: pointer; }
.c4-col.playable:hover { background: rgba(255,255,255,.18); }
.c4-cell { width: clamp(34px, 8vmin, 70px); height: clamp(34px, 8vmin, 70px); border-radius: 50%; background: #fbfdff; box-shadow: inset 0 3px 5px rgba(0,0,0,.28); }
.c4-cell.win { box-shadow: 0 0 0 4px #2ec27e, inset 0 3px 5px rgba(0,0,0,.28); }

/* ---------- memory match ---------- */
.mm-activity { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px; overflow: auto; background: linear-gradient(160deg, #ede9ff, #bcaaff); }
.mm-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; box-shadow: var(--shadow); }
.mm-level { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); font-size: 0.84rem; font-weight: 600; }
.mm-lobby { text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; margin: auto; }
.mm-logo { font-size: 2.2rem; font-weight: 900; color: #6a4fc2; }
.mm-msg { color: var(--muted); }
.mm-scores { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.mm-chip { display: flex; align-items: center; gap: 8px; font-weight: 700; padding: 6px 14px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); }
.mm-chip.current { outline: 2px solid var(--accent); box-shadow: 0 0 12px rgba(42,157,143,.4); }
.mm-dot { width: 16px; height: 16px; border-radius: 50%; display: inline-block; }
.mm-message { font-weight: 700; color: var(--ink); background: linear-gradient(90deg, #ffe3ec, #fff3cf, #d9fff0); border: 1px solid rgba(255,255,255,.7); padding: 8px 20px; border-radius: 999px; box-shadow: var(--shadow); }
.mm-board { display: grid; gap: 10px; width: min(94vw, 860px); }
.mm-card { aspect-ratio: 1; border-radius: 12px; border: 2px solid transparent; display: grid; place-items: center; background: linear-gradient(150deg, #7b6cf0, #5a8fd8); box-shadow: 0 4px 10px rgba(40,30,90,.25); user-select: none; container-type: size; }
.mm-card::after { content: '✦'; color: rgba(255,255,255,.55); font-size: 44cqmin; }
.mm-card.up { background: #ffffff; border-color: var(--line); box-shadow: inset 0 2px 6px rgba(0,0,0,.12); }
.mm-card.up::after { content: none; }
.mm-card.matched { opacity: .5; }
.mm-card.playable { cursor: pointer; }
.mm-card.playable:hover { transform: translateY(-2px); box-shadow: 0 7px 16px rgba(40,30,90,.35); }
.mm-face { font-size: 74cqmin; line-height: 1; }
.mm-wins { color: var(--muted); font-size: 0.84rem; }

/* ---------- chess & checkers (shared chrome) ---------- */
.cg-activity, .ck-activity { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px; overflow: auto; }
.cg-activity { background: linear-gradient(160deg, #fff4e2, #ffcf9e); }
.ck-activity { background: linear-gradient(160deg, #ffeede, #ffbe93); }
.cg-bar { display: flex; gap: 8px; justify-content: center; }
.cg-lobby { text-align: center; margin: auto; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.cg-logo { font-size: 2.2rem; font-weight: 900; color: #5b4636; }
.cg-msg { color: var(--muted); }
.cg-players { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; }
.cg-player { display: flex; align-items: center; gap: 8px; font-weight: 700; padding: 6px 14px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); }
.cg-player.current { outline: 2px solid var(--accent); box-shadow: 0 0 12px rgba(42,157,143,.4); }
.cg-dot { width: 16px; height: 16px; border-radius: 50%; display: inline-block; }
.cg-dot.cg-white { background: #f4f1ea; box-shadow: inset 0 0 0 1px #9a8f7c; }
.cg-dot.cg-black { background: #222; }
.cg-dot.ck-red { background: #c5372a; }
.cg-dot.ck-black { background: #1c1c1c; }
.cg-message { font-weight: 700; color: var(--ink); background: linear-gradient(90deg, #ffe3ec, #fff3cf, #d9fff0); border: 1px solid rgba(255,255,255,.7); padding: 8px 20px; border-radius: 999px; box-shadow: var(--shadow); }
.cg-winstxt { color: var(--muted); font-size: 0.84rem; }
/* Fixed square cells: every square is exactly --cell × --cell, so rows and columns
   match regardless of which pieces sit on them. */
.board8 { --cell: clamp(34px, 9vmin, 84px); display: grid; grid-template-columns: repeat(8, var(--cell)); grid-template-rows: repeat(8, var(--cell)); width: calc(var(--cell) * 8); height: calc(var(--cell) * 8); border: 3px solid #5b4636; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); }

/* chess board */
.cg-sq { position: relative; display: grid; place-items: center; }
.cg-sq.light { background: #f0d9b5; }
.cg-sq.dark { background: #b58863; }
.cg-sq.sel { box-shadow: inset 0 0 0 3px #2a9d8f; }
.cg-sq.last::before { content: ''; position: absolute; inset: 0; background: rgba(255,231,102,.45); }
.cg-sq.check::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(231,76,60,.85), rgba(231,76,60,0) 70%); }
.cg-sq.move::after { content: ''; position: absolute; width: 30%; aspect-ratio: 1; border-radius: 50%; background: rgba(20,70,20,.32); }
.cg-sq.capture::after { content: ''; position: absolute; inset: 7%; border-radius: 50%; border: 4px solid rgba(20,70,20,.32); }
.cg-pc { position: relative; font-size: calc(var(--cell) * 0.76); line-height: 1; cursor: pointer; }
.cg-pc.white { color: #fff; text-shadow: 0 0 3px #000, 0 1px 1px #000; }
.cg-pc.black { color: #141414; text-shadow: 0 0 2px rgba(255,255,255,.4); }

/* checkers board */
.ck-sq { position: relative; display: grid; place-items: center; }
.ck-sq.light { background: #e9c9a0; }
.ck-sq.dark { background: #7a4f2a; }
.ck-sq.sel { box-shadow: inset 0 0 0 3px #2a9d8f; }
.ck-sq.target::after { content: ''; position: absolute; width: 32%; aspect-ratio: 1; border-radius: 50%; background: rgba(42,157,143,.7); }
.ck-pc { width: 76%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 -3px 6px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.4); }
.ck-pc.red { background: radial-gradient(circle at 35% 30%, #ff7b6b, #c5372a); }
.ck-pc.black { background: radial-gradient(circle at 35% 30%, #5a5a5a, #161616); }
.ck-pc.king::after { content: '♔'; color: #ffd54a; font-size: calc(var(--cell) * 0.42); line-height: 1; }

/* promotion picker */
.cg-promo-back { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: grid; place-items: center; z-index: 50; }
.cg-promo { background: var(--panel); border-radius: 14px; padding: 16px 20px; box-shadow: var(--shadow); text-align: center; }
.cg-promo-title { font-weight: 700; margin-bottom: 10px; }
.cg-promo-row { display: flex; gap: 10px; }
.cg-promo .cg-pc { font-size: 44px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 10px; background: #cdbfae; }

/* ---------- batch: mancala / crazy 8s / hangman / bingo / battleship ---------- */
.mn-activity, .c8-activity, .hm-activity, .bg-activity, .bs-activity, .jg-activity, .tr-activity, .sy-activity, .zp-activity { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px; overflow: auto; }
.tr-activity { background: linear-gradient(160deg, #eaf3ff, #b9cdf0); }

/* Trouble: an octagonal Pop-O-Matic board. All four colours always show; cells/pegs placed by %. */
.tr-board { position: relative; width: min(80vh, 96%, 560px); aspect-ratio: 1; }
.tr-board-face { position: absolute; inset: 0; clip-path: polygon(15% 0,85% 0,100% 15%,100% 85%,85% 100%,15% 100%,0 85%,0 15%);
  background: radial-gradient(circle at 50% 34%, #ffffff, #eef2f7 60%, #d4dce6);
  box-shadow: 0 16px 34px rgba(40,60,90,.35), inset 0 3px 8px rgba(255,255,255,.95), inset 0 -14px 26px rgba(110,130,160,.4); }
.tr-cell { position: absolute; width: 6%; height: 6%; transform: translate(-50%, -50%); border-radius: 50%; z-index: 1;
  background: radial-gradient(circle at 50% 32%, #fbfdff, #c8d2de); box-shadow: inset 0 2px 4px rgba(70,90,120,.5), inset 0 -1px 1px rgba(255,255,255,.7); }
.tr-cell.tr-startcell { background: radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--c) 40%, #fff), var(--c)); box-shadow: inset 0 2px 4px rgba(0,0,0,.3), 0 0 0 2px rgba(255,255,255,.7); }
.tr-arrow { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.9); font-size: 0.6rem; font-weight: 900; }
.tr-finish { width: 4.9%; height: 4.9%; background: radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--c) 28%, #fff), color-mix(in srgb, var(--c) 78%, #fff)) !important; box-shadow: inset 0 2px 4px rgba(0,0,0,.28), 0 0 0 1.5px color-mix(in srgb, var(--c) 50%, #fff); }
.tr-home { width: 5.8%; height: 5.8%; background: radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--c) 34%, #fff), color-mix(in srgb, var(--c) 82%, #fff)) !important; box-shadow: inset 0 2px 5px rgba(0,0,0,.32); }
.tr-trouble { position: absolute; z-index: 1; font-weight: 900; font-style: italic; font-size: clamp(0.6rem, 1.7vmin, 0.95rem); letter-spacing: 1px;
  color: color-mix(in srgb, var(--c) 78%, #555); text-shadow: 0 1px 0 rgba(255,255,255,.6); white-space: nowrap; pointer-events: none; }
.tr-dome { position: absolute; left: 50%; top: 50%; width: 19%; height: 19%; transform: translate(-50%, -50%); border-radius: 50%; z-index: 4;
  --die-size: clamp(24px, 5.5vmin, 44px); display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 26%, rgba(255,255,255,.98), rgba(208,224,242,.6) 52%, rgba(120,150,185,.55));
  border: 1px solid rgba(255,255,255,.85); box-shadow: 0 10px 20px rgba(40,60,90,.45), inset 0 8px 16px rgba(255,255,255,.9), inset 0 -10px 16px rgba(80,110,150,.45); }
.tr-dome.poppable { cursor: pointer; animation: tr-popbob 1.3s ease-in-out infinite; }
.tr-dome.poppable:hover { filter: brightness(1.06); }
@keyframes tr-popbob { 0%,100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.05); } }
.tr-pop { position: absolute; bottom: 4%; left: 0; right: 0; text-align: center; font-weight: 900; font-size: 0.66rem; color: #2a9d8f; letter-spacing: 1.5px; }
.tr-die { box-shadow: 0 2px 5px rgba(0,0,0,.3); }
.tr-peg { position: absolute; width: 5.2%; height: 5.2%; transform: translate(-50%, -50%); border-radius: 50% 50% 50% 50% / 62% 62% 40% 40%; z-index: 3;
  background: radial-gradient(circle at 38% 24%, color-mix(in srgb, var(--c) 16%, #fff), var(--c) 70%);
  box-shadow: inset -1px -2px 3px rgba(0,0,0,.45), inset 1px 1px 2px rgba(255,255,255,.65), 0 3px 5px rgba(0,0,0,.4); }
.tr-peg.movable { cursor: pointer; outline: 3px solid #fff; box-shadow: 0 0 0 3px var(--accent), 0 3px 6px rgba(0,0,0,.45); animation: tr-bob 0.9s ease-in-out infinite; }
@keyframes tr-bob { 0%,100% { transform: translate(-50%, -50%) translateY(0); } 50% { transform: translate(-50%, -50%) translateY(-3px); } }
.tr-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; box-shadow: inset -1px -1px 2px rgba(0,0,0,.3); }
/* lobby colour seats */
.tr-seats { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.tr-claim { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 104px; padding: 12px; border-radius: 14px; cursor: pointer;
  background: var(--panel); border: 2px solid var(--line); box-shadow: var(--shadow); }
.tr-claim:hover { border-color: var(--c); }
.tr-claim.mine { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 40%, #fff), var(--shadow); }
.tr-claim.taken { opacity: .55; cursor: not-allowed; }
.tr-claim-dot { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 38% 28%, color-mix(in srgb, var(--c) 14%, #fff), var(--c) 72%); box-shadow: inset -1px -2px 3px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.3); }
.tr-claim-name { font-weight: 800; color: var(--ink); }
.tr-claim-who { font-size: 0.78rem; color: var(--muted); }
.mn-activity { background: linear-gradient(160deg, #fdf8d8, #ffdf85); }
.jg-activity { background: linear-gradient(160deg, #fbeee0, #e7c79b); padding: 8px; }
.jg3d-frame { flex: 1; width: 100%; min-height: 72vh; border: 0; border-radius: 14px; box-shadow: var(--shadow); background: #090b10; }

/* Emotions Jenga: a wooden tower beside a big prompt card. */
.jg-wrap { display: flex; gap: 26px; align-items: flex-start; justify-content: center; flex-wrap: wrap; width: 100%; }
.jg-towercol { display: flex; flex-direction: column; align-items: center; gap: 8px; }
/* A real Jenga tower: 3-wide, with every layer rotated 90° from the one below — so the front
   view alternates between one long face ("bar" layer) and three blocks seen end-on ("ends"
   layer). Pulled blocks leave a gap; they re-stack on top continuing the crisscross. */
.jg-tower { --jh: clamp(15px, 3.3vmin, 24px); width: calc(var(--jh) * 5.2); display: flex; flex-direction: column; gap: 2px;
  padding: 8px; background: rgba(120,84,44,.10); border-radius: 8px; }
.jg-row { display: flex; height: var(--jh); }
.jg-row.ends { gap: 5px; }          /* three blocks seen end-on, slight kerf between them */
.jg-row.bar { gap: 0; }             /* one continuous long face (three blocks deep) */
.jg-block { flex: 1; background: linear-gradient(180deg, #eccea0, #d4ab73 55%, #c0925e);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 3px rgba(120,80,40,.4); }
.jg-row.ends .jg-block { border: 1px solid rgba(120,84,44,.55); border-radius: 3px; background: linear-gradient(180deg, #e7c595, #cda16a 55%, #b98c57); }
.jg-row.bar .jg-block { border-top: 1px solid rgba(120,84,44,.5); border-bottom: 1px solid rgba(120,84,44,.5); }
.jg-row.bar .jg-block:first-child { border-left: 1px solid rgba(120,84,44,.5); border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.jg-row.bar .jg-block:last-child { border-right: 1px solid rgba(120,84,44,.5); border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.jg-gap { flex: 1; }
.jg-block.pullable { cursor: pointer; }
.jg-block.pullable:hover { filter: brightness(1.1); outline: 2px solid var(--accent); outline-offset: -1px; position: relative; z-index: 2; }
.jg-block.justpulled { animation: jg-place .5s cubic-bezier(.3,1.45,.5,1) both; }   /* lands on the top of the tower */
@keyframes jg-place { 0% { transform: translateY(-26px); opacity: 0; } 55% { opacity: 1; } 100% { transform: none; } }
.jg-progress { margin-top: 6px; }

.jg-prompt { align-self: center; min-width: min(360px, 90vw); max-width: 460px; background: #fff; border-radius: 18px;
  box-shadow: var(--shadow); border: 1px solid var(--line); overflow: hidden; }
.jg-prompt-cat { background: var(--jg-tint, #8a5a2b); color: #fff; font-weight: 800; text-align: center; padding: 10px 16px; font-size: 1.02rem; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.jg-prompt-text { padding: 26px 22px; font-size: clamp(1.15rem, 2.4vmin, 1.6rem); font-weight: 700; color: var(--ink); text-align: center; line-height: 1.4; }
.jg-prompt-text.muted { color: var(--muted); font-weight: 600; }
.c8-activity { background: linear-gradient(160deg, #e3fbe9, #8fe6a9); }
.hm-activity { background: linear-gradient(160deg, #f1e9ff, #c6a8ff); }
.bg-activity { background: linear-gradient(160deg, #ffe6f3, #ff9ecb); }
.bs-activity { background: linear-gradient(160deg, #e2f1ff, #92c6ff); }

/* ---------- Sorry ("Uh-Oh"): printed board art with pawns + draw pile overlaid ---------- */
.sy-activity { background: linear-gradient(160deg, #f3eee6, #cdbfa6); }
.sy-wrap { width: 100%; display: flex; justify-content: center; }
/* The board IS the PNG; everything else is positioned in % on top of it. Aspect matches the
   source image (1232×1277) so the % → pixel mapping stays linear with no distortion. */
.sy-board { position: relative; width: min(78vh, 96%, 560px); aspect-ratio: 1232 / 1277;
  background: url('/assets/sorry/sorry-board.png') center / 100% 100% no-repeat, #c9c9c2;
  border-radius: 12px; box-shadow: 0 16px 34px rgba(50,40,30,.4); }
/* glossy 3D pawn */
.sy-pawn { position: absolute; width: 4.4%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; z-index: 3;
  display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: clamp(0.5rem, 1.5vmin, 0.85rem);
  border: 2px solid #fff; background: radial-gradient(circle at 32% 24%, rgba(255,255,255,.95), var(--c) 46%, var(--d));
  box-shadow: inset -1px -2px 3px rgba(0,0,0,.4), 0 3px 6px rgba(0,0,0,.45);
  transition: left .35s cubic-bezier(.4,.8,.4,1), top .35s cubic-bezier(.4,.8,.4,1); }
.sy-pawn.active { box-shadow: inset -1px -2px 3px rgba(0,0,0,.4), 0 0 0 3px rgba(255,255,255,.85), 0 3px 7px rgba(0,0,0,.5); }
.sy-pawn.movable { animation: sy-bob 0.95s ease-in-out infinite; }
@keyframes sy-bob { 0%,100% { transform: translate(-50%,-50%) translateY(0); } 50% { transform: translate(-50%,-50%) translateY(-3px); } }
/* centre draw zone — sits on the printed "PLACE PACK" spot */
.sy-deck { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 7%; z-index: 4; width: 34%; justify-content: center; }
.sy-card { width: 45%; aspect-ratio: 3 / 4; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 2.5px solid #14110e; box-shadow: 0 6px 14px rgba(0,0,0,.4); }
.sy-pack { background: radial-gradient(circle at 40% 30%, #3a3530, #14110e); color: #fff; }
.sy-pack.can { cursor: pointer; animation: sy-pulse 1.3s ease-in-out infinite; }
.sy-pack.can:hover { filter: brightness(1.15); }
@keyframes sy-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.sy-pack-label, .sy-drawn-label { font-size: clamp(.4rem, .9vmin, .58rem); letter-spacing: .18em; font-weight: 900; opacity: .65; }
.sy-pack-uh { font-size: clamp(0.9rem, 2.6vmin, 1.4rem); font-weight: 900; }
.sy-pack-n { font-size: clamp(.4rem, .9vmin, .58rem); font-weight: 800; opacity: .65; }
.sy-drawn { background: radial-gradient(circle at 50% 30%, #ffffff, #efe9dd); color: #14110e; }
.sy-drawn-label { color: #9a9081; }
.sy-drawn-n { font-size: clamp(0.8rem, 2.4vmin, 1.3rem); font-weight: 900; line-height: 1; white-space: nowrap; letter-spacing: -0.02em; }
/* move chooser below the board */
.sy-actions { width: min(560px, 96%); display: flex; flex-direction: column; gap: 8px; align-items: center; }
.sy-actions-title { font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: .76rem; color: var(--muted); }
.sy-actions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; width: 100%; max-height: 168px; overflow-y: auto; }
.sy-action { text-align: left; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; box-shadow: var(--shadow); }
.sy-action:hover { background: #14110e; color: #fff; }
.sy-action-label { font-weight: 800; font-size: .86rem; line-height: 1.15; }
.sy-action-detail { font-size: .72rem; opacity: .7; margin-top: 2px; line-height: 1.1; }
.sy-hint { color: var(--muted); font-weight: 700; }
.sy-banner { font-size: 1.3rem; font-weight: 900; color: #5b4636; background: linear-gradient(90deg, #fff3cf, #ffe3ec); padding: 10px 26px; border-radius: 999px; box-shadow: var(--shadow); }
/* calibration overlay (window.__sorryDebug = true) */
.sy-dot { position: absolute; transform: translate(-50%, -50%); width: 3.4%; aspect-ratio: 1; border-radius: 50%; z-index: 9;
  background: rgba(255,0,200,.78); color: #fff; font-size: .5rem; font-weight: 900; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.sy-dot-s { background: rgba(0,140,255,.9); } .sy-dot-h { background: rgba(0,0,0,.85); } .sy-dot-f { outline: 1px solid #fff; }

/* ---------- Zoo Parade (co-operative Hanabi): animal parades, treats + lives, hidden own hand ---------- */
.zp-activity { background: linear-gradient(160deg, #eafbe8, #bfe6c6); }
.zp-status { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.zp-stat { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px; font-weight: 700; font-size: 0.9rem; display: flex; align-items: center; gap: 4px; box-shadow: var(--shadow); }
.zp-mini { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 20px; padding: 0 4px; border-radius: 5px; font-weight: 900; font-size: 0.72rem; color: #fff;
  background: radial-gradient(circle at 38% 26%, color-mix(in srgb, var(--c) 30%, #fff), var(--c) 70%, var(--d)); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
/* the five parade piles */
.zp-piles { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.zp-pile { width: clamp(58px, 12vmin, 88px); aspect-ratio: 3 / 4; border-radius: 12px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 24%, color-mix(in srgb, var(--c) 26%, #fff), var(--c) 70%, var(--d)); border: 2px solid rgba(255,255,255,.85);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.6), 0 4px 10px rgba(0,0,0,.28); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.zp-pile.full { outline: 3px solid #ffd54a; outline-offset: 1px; }
.zp-pile-animal { font-size: clamp(1.3rem, 3.4vmin, 2.1rem); line-height: 1; }
.zp-pile-num { font-size: clamp(1.2rem, 3vmin, 1.9rem); font-weight: 900; }
/* hands */
.zp-hands { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 760px; }
.zp-hand { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 8px 12px; box-shadow: var(--shadow); }
.zp-hand.current { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, #fff), var(--shadow); }
.zp-hand.mine { background: linear-gradient(180deg, #fffdf4, #f4f0e3); }
.zp-hand-head { font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.zp-hand-name { font-size: 0.95rem; }
.zp-cards { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.zp-cardwrap { width: clamp(60px, 13vmin, 94px); display: flex; flex-direction: column; align-items: center; gap: 5px; }
.zp-card { width: 100%; aspect-ratio: 3 / 4; border-radius: 12px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 2px solid rgba(255,255,255,.85); box-shadow: inset 0 1px 2px rgba(255,255,255,.55), 0 3px 7px rgba(0,0,0,.3); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.45);
  background: radial-gradient(circle at 40% 24%, color-mix(in srgb, var(--c) 26%, #fff), var(--c) 70%, var(--d)); }
.zp-card.back { background: repeating-linear-gradient(45deg, #6b8c5a, #6b8c5a 8px, #5d7d4e 8px, #5d7d4e 16px); color: #fff; }
.zp-card.empty { background: rgba(0,0,0,.06); border: 2px dashed var(--line); box-shadow: none; }
.zp-card .zp-back { font-size: clamp(1.5rem, 3.6vmin, 2.4rem); opacity: 0.9; }
.zp-card-animal { font-size: clamp(1.3rem, 3.2vmin, 2.1rem); line-height: 1; }
.zp-card-num { font-size: clamp(1.2rem, 3vmin, 1.9rem); font-weight: 900; }
/* hint chips on each card */
.zp-chips { position: absolute; left: 2px; right: 2px; bottom: 2px; display: flex; flex-direction: column; gap: 1px; align-items: center; }
.zp-chiprow { display: flex; gap: 2px; justify-content: center; flex-wrap: wrap; }
.zp-chip { width: 11px; height: 11px; border-radius: 50%; opacity: 0.45; box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); }
.zp-chip.dot.on { opacity: 1; box-shadow: 0 0 0 1.5px #fff, inset 0 0 0 1px rgba(0,0,0,.35); }
.zp-chip.num { width: auto; min-width: 12px; height: 12px; border-radius: 3px; background: rgba(0,0,0,.55); color: #fff; font-size: 0.6rem; font-weight: 900; display: flex; align-items: center; justify-content: center; padding: 0 2px; }
.zp-chip.num.on { background: #fff; color: #111; opacity: 1; }
/* play / discard as icon buttons directly under each of my cards */
.zp-cardbtns { display: flex; gap: 4px; width: 100%; }
.zp-actbtn { flex: 1; height: 30px; min-width: 0; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; font-size: 1.05rem; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); }
.zp-actbtn:hover { transform: translateY(-1px); }
.zp-actbtn.play { background: var(--accent); color: #fff; border-color: var(--accent); }
.zp-actbtn.play:hover { filter: brightness(1.08); }
.zp-actbtn.discard:hover { background: #ffe3e3; border-color: #e0726a; }
/* hint controls under a teammate's hand */
.zp-hintbar { margin-top: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.zp-hint-label { font-weight: 800; font-size: 0.85rem; color: var(--muted); }
.zp-hint-color { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.zp-hint-color:hover { transform: scale(1.12); }
.zp-hint-num { min-width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel); font-weight: 900; cursor: pointer; }
.zp-hint-num:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.zp-banner { font-size: 1.25rem; font-weight: 900; padding: 10px 26px; border-radius: 999px; box-shadow: var(--shadow); }
.zp-banner.won { background: linear-gradient(90deg, #fff3cf, #d9fff0); color: #1d6b46; }
.zp-banner.lost { background: linear-gradient(90deg, #ffe3e3, #ffe9d6); color: #9a3b2b; }
.zp-log { width: 100%; max-width: 760px; font-size: 0.8rem; color: var(--muted); display: flex; flex-direction: column; gap: 2px; }
.zp-log-line { padding: 2px 8px; border-bottom: 1px dotted var(--line); }
/* portrait / small screens: tighten spacing so a full hand still fits without horizontal scroll */
@media (max-width: 600px) {
  .zp-activity { padding: 10px 6px; }
  .zp-cards { gap: 6px; }
  .zp-piles { gap: 6px; }
  .zp-hand { padding: 6px 8px; border-radius: 12px; }
  .zp-status { gap: 6px; }
  .zp-stat { padding: 4px 10px; font-size: 0.8rem; }
  .zp-hint-color, .zp-hint-num { width: 24px; height: 24px; min-width: 24px; }
  .zp-actbtn { height: 26px; }
}

/* mancala */
.mn-board { display: flex; align-items: stretch; gap: 14px; background: #8a5a2b; padding: 16px; border-radius: 20px; box-shadow: var(--shadow); }
.mn-store { width: 64px; background: #6b4421; border-radius: 32px; position: relative; padding: 12px 0; box-shadow: inset 0 0 12px rgba(0,0,0,.45); }
.mn-store .mn-stones { position: absolute; inset: 9% 8%; }
.mn-store .mn-count { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); text-align: center; font-size: 1.7rem; font-weight: 900; color: #fff; text-shadow: 0 0 5px #000, 0 2px 3px rgba(0,0,0,.7); z-index: 2; }
.mn-store-lab { position: absolute; bottom: 7px; left: 0; right: 0; text-align: center; font-size: 0.66rem; color: #fff; opacity: 0.85; z-index: 2; }
.mn-mid { display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.mn-row { display: flex; gap: 12px; }
.mn-pit { width: clamp(48px, 9vmin, 88px); height: clamp(48px, 9vmin, 88px); border-radius: 50%; background: #c89b6a; box-shadow: inset 0 -4px 8px rgba(0,0,0,.3); position: relative; overflow: hidden; }
.mn-pit.playable { cursor: pointer; outline: 3px solid var(--accent); }
.mn-pit.playable:hover { background: #d8ab78; }
.mn-stones { position: absolute; inset: 0; }
/* One owner for the gem transform: centre it on its left/top anchor, then spin by the
   per-stone angle in --mn-rot. The drop keyframes reuse the exact same formula, so nothing
   ever competes to redefine the position (a separate `rotate` property used to rotate the
   centring offset and fling stones out of the pit). */
.mn-gem { position: absolute; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(var(--mn-rot, 0deg)); border-radius: 50% 50% 48% 52% / 55% 50% 50% 45%; box-shadow: inset -1px -2px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.45); }
.mn-gem.mn-drop { animation: mn-drop 0.8s cubic-bezier(.5,1.55,.6,1) both; }
@keyframes mn-drop {
  0% { transform: translate(-50%, -260%) rotate(var(--mn-rot, 0deg)); opacity: 0; }
  60% { transform: translate(-50%, -50%) rotate(var(--mn-rot, 0deg)); opacity: 1; }
  78% { transform: translate(-50%, -66%) rotate(var(--mn-rot, 0deg)); }
  100% { transform: translate(-50%, -50%) rotate(var(--mn-rot, 0deg)); }
}
.mn-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.mn-tally { font-weight: 800; font-size: 0.95rem; color: #ffe7bd; text-shadow: 0 1px 2px rgba(0,0,0,.65); line-height: 1; }

/* crazy 8s */
.c8-mid { margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.c8-opps { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.c8-opp { text-align: center; }
.c8-opp.current { filter: drop-shadow(0 0 6px rgba(245,197,24,.8)); }
.c8-opp-name { font-weight: 700; font-size: 0.85rem; margin-bottom: 4px; }
.c8-fan { display: flex; justify-content: center; padding-left: 34px; }
.c8-fan .c8-card { margin-left: -34px; }
.c8-table { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.c8-draw { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.c8-card { width: 64px; height: 90px; border-radius: 9px; background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 6px rgba(0,0,0,.2); display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; color: #1a1a1a; }
.c8-card.red { color: #d33; }
.c8-card .c8-rank { font-size: 1.1rem; }
.c8-card .c8-suit { font-size: 1.9rem; line-height: 1; }
.c8-card.back { background: linear-gradient(135deg, #3a6ea5, #244a73); color: #cfe0f5; font-size: 1.6rem; justify-content: center; }
.c8-card.playable { cursor: pointer; outline: 3px solid var(--accent); transition: transform .08s; }
.c8-card.playable:hover { transform: translateY(-6px); }
.c8-hand { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.c8-suitnow { font-size: 2rem; width: 48px; height: 48px; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; color: #1a1a1a; }
.c8-suitnow.red { color: #d33; }
.c8-suitbtn { font-size: 2rem; width: 60px; height: 72px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; color: #1a1a1a; }
.c8-suitbtn.red { color: #d33; }

/* hangman */
.hm-setup { text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; max-width: 480px; margin: auto; }
.hm-setrow { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.hm-input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; min-width: 200px; font-size: 1rem; }
.hm-stage { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; justify-content: center; }
.hm-gallows { width: 150px; height: 180px; }
.hm-gallows line, .hm-gallows circle { stroke: #3a2a4a; stroke-width: 4; fill: none; stroke-linecap: round; }
.hm-part.hidden { display: none; }
.hm-right { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.hm-word { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.hm-slot { min-width: 26px; border-bottom: 3px solid #5b4636; text-align: center; font-size: 1.6rem; font-weight: 800; min-height: 34px; }
.hm-slot.filled { border-bottom-color: transparent; }
.hm-space { width: 16px; }
.hm-wrong { color: #c0392b; font-weight: 600; }
.hm-keys { display: grid; grid-template-columns: repeat(13, 1fr); gap: 6px; max-width: 560px; width: 100%; }
.hm-key { padding: 9px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); font-weight: 700; cursor: pointer; }
.hm-key:disabled { cursor: default; opacity: .45; }
.hm-key.right { background: #2ecc71; color: #fff; border-color: #2ecc71; opacity: 1; }
.hm-key.wrong { background: #e74c3c; color: #fff; border-color: #e74c3c; opacity: 1; }

/* bingo */
.bg-called { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bg-last { font-size: 2rem; font-weight: 900; color: #c0397b; background: #fff; border-radius: 12px; padding: 6px 18px; box-shadow: var(--shadow); }
.bg-calllist { display: flex; flex-wrap: wrap; gap: 4px; max-width: 520px; justify-content: center; }
.bg-callchip { font-size: 0.72rem; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 2px 5px; }
.bg-cardwrap { background: #fff; border-radius: 14px; padding: 10px; box-shadow: var(--shadow); }
.bg-head { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 6px; }
.bg-h { text-align: center; font-weight: 900; font-size: 1.4rem; color: #c0397b; }
.bg-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.bg-cell { width: clamp(44px, 11vmin, 86px); aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; font-weight: 700; font-size: 1.1rem; background: #fdfdfd; }
.bg-cell.free { background: #ffe89a; }
.bg-cell.callable { cursor: pointer; }
.bg-cell.callable:hover { background: #eef; }
.bg-cell.marked { background: #3fa34d; color: #fff; border-color: #338a40; }
.bg-cell.win { outline: 3px solid #f1c40f; }
.bg-callbingo { padding: 10px 22px; border-radius: 999px; border: 2px solid var(--line); background: var(--panel); font-weight: 800; font-size: 1.05rem; opacity: .5; cursor: not-allowed; }
.bg-callbingo.ready { opacity: 1; cursor: pointer; background: #f1c40f; color: #5b4636; border-color: #d4a800; animation: bg-pulse 1s ease-in-out infinite; }
@keyframes bg-pulse { 0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(241,196,15,.5); } 50% { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(241,196,15,0); } }
.bg-allcards { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.bg-mini { background: #fff; border-radius: 12px; padding: 8px; box-shadow: var(--shadow); border: 2px solid transparent; }
.bg-mini.winner { border-color: #f1c40f; }
.bg-mini-name { text-align: center; font-weight: 700; margin-bottom: 4px; }
.bg-mini .bg-cell { width: clamp(24px, 5.4vw, 38px); font-size: 0.78rem; border-radius: 6px; }

/* battleship */
.bs-palette { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; }
.bs-shipbtn { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); cursor: pointer; font-weight: 600; font-size: 0.84rem; }
.bs-shipbtn.placed { opacity: .5; }
.bs-shipbtn.sel { outline: 2px solid var(--accent); background: #e7f5f2; }
.bs-label { font-weight: 700; margin: 4px 0; text-align: center; }
.bs-boards { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.bs-col { display: flex; flex-direction: column; align-items: center; }
.bs-col.winner { background: rgba(241,196,15,.14); border: 2px solid #f1c40f; border-radius: 14px; padding: 8px; }
.bs-gridwrap { --bcell: clamp(22px, 6vmin, 46px); position: relative; display: inline-block; }
.bs-grid { display: grid; grid-template-columns: repeat(10, var(--bcell)); grid-template-rows: repeat(10, var(--bcell)); gap: 2px; background: #2f5d86; padding: 5px; border-radius: 8px; }
.bs-cell { background: #cfe2f3; border-radius: 3px; display: grid; place-items: center; font-size: 0.7rem; }
.bs-cell.clickable { cursor: pointer; }
.bs-cell.clickable:hover { background: #a7cdec; }
.bs-cell.miss, .bs-cell.hit { position: relative; z-index: 3; }   /* markers sit above the ship layer */
.bs-cell.miss { background: #ffffff; box-shadow: inset 0 0 0 1px rgba(110,140,170,.45); }   /* full white cell = clearly a miss */
.bs-cell.miss::after { content: '•'; color: #7e98ad; }
.bs-cell.hit { background: rgba(231, 76, 60, 0.65); }   /* 65% so the ship underneath shows through */
.bs-cell.hit::after { content: '✕'; color: #fff; font-weight: 800; }
/* ship overlay: each ship spans its footprint, aligned to the same grid */
.bs-shiplayer { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(10, var(--bcell)); grid-template-rows: repeat(10, var(--bcell)); gap: 2px; padding: 5px; pointer-events: none; z-index: 1; }
.bs-ship { position: relative; margin: 1px; container-type: size; }
.bs-ship img { object-fit: contain; display: block; }
.bs-ship.h img { width: 100%; height: 100%; }
/* sprites are drawn horizontal (bow-right); rotate to fill a vertical placement, sized to the transposed box */
.bs-ship.v img { position: absolute; top: 50%; left: 50%; width: 100cqh; height: 100cqw; transform: translate(-50%, -50%) rotate(90deg); }
.bs-ship.hull img { display: none; }
.bs-ship.hull { background: linear-gradient(160deg, #9aa6b3, #59626f); box-shadow: inset 0 -2px 4px rgba(0,0,0,.35); border-radius: 30% / 46%; }
.bs-ship.sunk { filter: grayscale(1) brightness(.55); }

/* ---------- yahtzee & farkle (dice) ---------- */
.yz-activity, .fk-activity { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px; overflow: auto; }
.yz-activity { background: linear-gradient(160deg, #e3fbf6, #8ee6d7); }
.fk-activity { background: linear-gradient(160deg, #f0e9ff, #b59cff); }
.yz-dice { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
/* pip dice (shared by Yahtzee + Farkle, see dice.js) */
.die { --die-size: clamp(40px, 10vmin, 72px); position: relative; width: var(--die-size); height: var(--die-size); background: linear-gradient(145deg, #ffffff, #e6e6ee); border-radius: 20%; box-shadow: 0 4px 9px rgba(0,0,0,.32), inset 0 2px 3px rgba(255,255,255,.85), inset 0 -4px 6px rgba(0,0,0,.16); }
/* pips placed absolutely at the nine 3×3 positions (no grid track sizing to fight) */
.die-cell { position: absolute; width: 23%; height: 23%; transform: translate(-50%, -50%); }
.die-cell:nth-child(1) { left: 28%; top: 28%; }
.die-cell:nth-child(2) { left: 50%; top: 28%; }
.die-cell:nth-child(3) { left: 72%; top: 28%; }
.die-cell:nth-child(4) { left: 28%; top: 50%; }
.die-cell:nth-child(5) { left: 50%; top: 50%; }
.die-cell:nth-child(6) { left: 72%; top: 50%; }
.die-cell:nth-child(7) { left: 28%; top: 72%; }
.die-cell:nth-child(8) { left: 50%; top: 72%; }
.die-cell:nth-child(9) { left: 72%; top: 72%; }
.die-cell.pip::after { content: ''; display: block; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4a4f63, #14161e); box-shadow: inset 0 1px 1px rgba(255,255,255,.3); }
.die.held { outline: 3px solid var(--accent); outline-offset: 2px; }
.die.clickable { cursor: pointer; }
.die.blank::before { content: '?'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 46%; font-weight: 800; color: var(--muted); }
.die.rolling { animation: die-wobble 0.26s ease-in-out infinite; }
@keyframes die-wobble { 0%, 100% { transform: rotate(-7deg) scale(1.07); } 50% { transform: rotate(7deg) scale(1.07); } }
.die.settle { animation: die-settle 0.3s cubic-bezier(.34, 1.7, .5, 1); }
@keyframes die-settle { 0% { transform: scale(1.22) rotate(-5deg); } 100% { transform: scale(1) rotate(0); } }
.yz-roll { align-self: center; }
.yz-card { border-collapse: collapse; background: var(--panel); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); font-size: 0.92rem; }
.yz-card th, .yz-card td { border: 1px solid var(--line); padding: 4px 12px; text-align: center; min-width: 46px; }
.yz-card th { background: linear-gradient(180deg, #4d96ff, #3a7ce0); color: #fff; border-color: rgba(255,255,255,.35); }
.yz-card th.yz-cur { background: linear-gradient(180deg, #ffd23f, #f3b820); color: #5b4636; }
.yz-card .yz-catcol { text-align: left; font-weight: 600; white-space: nowrap; background: #f4f1ff; }
.yz-card th.yz-catcol { background: linear-gradient(180deg, #4d96ff, #3a7ce0); }
.yz-cell { min-height: 1.4em; }
.yz-preview { background: #e7f5f2; border: 1px dashed var(--accent); color: #0a7d6b; border-radius: 6px; cursor: pointer; padding: 2px 8px; font-weight: 700; }
.yz-preview:hover { background: var(--accent); color: #fff; }
.yz-sub { font-weight: 800; background: linear-gradient(90deg, #fff3cf, #ffe7a3); color: #6b4e00; }
.yz-total { font-weight: 800; background: linear-gradient(90deg, #d9fff0, #a6efd2); color: #0a6b50; }
.fk-aside { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; }
.fk-aside .die, .fk-farkle .die { --die-size: clamp(28px, 6vmin, 46px); }
.die.kept { box-shadow: 0 0 0 2px #2bbd86, 0 3px 6px rgba(0,0,0,.28); }
.fk-turnpts { font-weight: 800; color: #fff; background: linear-gradient(90deg, #3ddc97, #22b07d); padding: 5px 16px; border-radius: 999px; box-shadow: var(--shadow); }
.fk-farkle { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.die.fk-dead { filter: saturate(.45) brightness(.95); box-shadow: 0 0 0 2px #c0392b, 0 3px 6px rgba(0,0,0,.28); }
.fk-legend { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; box-shadow: var(--shadow); min-width: 240px; max-width: 320px; }
.fk-legend-title { font-weight: 800; text-align: center; margin-bottom: 6px; }
.fk-legrow { display: flex; justify-content: space-between; gap: 14px; padding: 2px 0; font-size: 0.86rem; border-top: 1px solid var(--line); }
.fk-legrow:first-of-type { border-top: none; }
.fk-legpts { font-weight: 700; color: #0a7d6b; white-space: nowrap; }

/* ======================= RESPONSIVE ======================= */
.palette-toggle { display: none; }

@media (max-width: 820px) {
  .lobby-panels { grid-template-columns: 1fr; }
  .tb-tools { order: 3; flex-basis: 100%; justify-content: flex-start; gap: 8px; }
  .room-name { width: 130px; }
  .palette-toggle { display: inline-flex; }
  .palette {
    position: absolute; z-index: 40; top: 0; left: 0; height: 100%;
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: var(--shadow);
  }
  body.palette-open .palette { transform: translateX(0); }
  .scenes-panel { width: 88%; }
}

/* Tools collapse into dropdowns only in PORTRAIT orientation ("mobile mode").
   Any landscape view (incl. every normal desktop browser) keeps the full tool
   row visible at all times, regardless of window width. */
@media (orientation: portrait) {
  .desktop-only { display: none !important; }
  .mobile-only { display: inline-flex; }
}

/* ======================= MOSAIC (Azul) ======================= */
.az-activity {
  flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 14px; overflow: auto;
  background: radial-gradient(140% 120% at 50% 0%, #f4eee1 0%, #d8ccb4 78%);
}
.az-lobby { margin: auto; text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; max-width: 460px; }
.az-logo { font-size: 2.6rem; font-weight: 900; letter-spacing: 3px; color: #2e6fb7; text-shadow: 2px 2px 0 #f2b705; }
.az-sub { color: var(--muted); }
.az-warn { color: #b3261e; font-weight: 600; background: #fdecea; border: 1px solid #f6cfca; border-radius: 8px; padding: 8px 12px; }
.az-msg { font-weight: 700; color: var(--ink); background: rgba(255,255,255,.75); border: 1px solid var(--line); padding: 6px 16px; border-radius: 999px; text-align: center; }
.az-head { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.az-hint { font-size: .85rem; font-weight: 600; color: #2e6fb7; }
.az-hint.muted { color: var(--muted); }
.az-overctrls { display: flex; gap: 8px; align-items: center; margin-top: 2px; }

/* a ceramic tile */
.az-tile {
  --ts: clamp(22px, 4.4vmin, 34px);
  width: var(--ts); height: var(--ts); border-radius: 6px; flex: none;
  background: linear-gradient(150deg, color-mix(in srgb, var(--tile) 80%, #fff), var(--tile) 42%, color-mix(in srgb, var(--tile) 72%, #000));
  box-shadow: inset 0 1px 2px rgba(255,255,255,.55), inset 0 -2px 3px rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.3);
}
.az-tile.sm { --ts: clamp(16px, 3.2vmin, 24px); border-radius: 4px; }
.az-tile.pick { cursor: pointer; }
.az-tile.pick:hover { outline: 2px solid #fff; outline-offset: 1px; }
.az-tile.sel { outline: 3px solid #2e6fb7; outline-offset: 1px; box-shadow: 0 0 0 2px #fff, 0 0 10px rgba(46,111,183,.7); }

/* first-player marker */
.az-first {
  --ts: clamp(22px, 4.4vmin, 34px);
  width: var(--ts); height: var(--ts); border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 900; color: #6b4b16;
  background: radial-gradient(circle at 35% 30%, #fff7df, #f0d98a); border: 1px solid #c9a94e;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.az-first.sm { --ts: clamp(16px, 3.2vmin, 24px); font-size: .7rem; }

/* factories + centre */
.az-table { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }
.az-factories { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.az-factory {
  width: clamp(72px, 15vmin, 98px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #fffdf8, #e7dcc6); border: 2px solid #b8a785;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.18);
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px; place-content: center; padding: 10px;
}
.az-factory.empty { opacity: .45; }
.az-center {
  display: flex; flex-wrap: wrap; gap: 6px; max-width: 320px; min-width: 130px; min-height: 56px;
  align-items: center; justify-content: center; padding: 10px 14px; border-radius: 16px;
  background: rgba(255,255,255,.45); border: 1px dashed #b8a785;
}
.az-center.empty { opacity: .55; }
.az-center-empty { color: var(--muted); font-size: .8rem; font-style: italic; }

/* player boards */
.az-boards { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: flex-start; }
.az-pb { background: rgba(255,255,255,.6); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; box-shadow: var(--shadow); }
.az-pb.you { background: rgba(255,255,255,.88); }
.az-pb.current { outline: 3px solid #f2b705; }
.az-pb-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 8px; }
.az-pb-name { font-weight: 800; color: var(--ink); }
.az-pb-score { font-weight: 900; font-size: 1.2rem; color: #2e6fb7; min-width: 1.6em; text-align: right; }
.az-pb-main { display: flex; gap: 10px; align-items: flex-start; }

/* pattern lines (fill right→left toward the wall) */
.az-lines { display: flex; flex-direction: column; gap: 4px; }
.az-line { display: flex; gap: 4px; justify-content: flex-end; padding: 2px; border-radius: 6px; }
.az-slot {
  --ts: clamp(16px, 3.2vmin, 24px);
  width: var(--ts); height: var(--ts); border-radius: 4px;
  background: rgba(0,0,0,.06); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
  display: grid; place-items: center;
}
.az-line.target { cursor: pointer; background: rgba(46,111,183,.18); outline: 2px dashed #2e6fb7; }
.az-line.target:hover { background: rgba(46,111,183,.34); }

/* wall (faint colour hint per cell) */
.az-wall { display: grid; grid-template-columns: repeat(5, auto); gap: 4px; padding-left: 8px; border-left: 3px solid #b8a785; }
.az-cell {
  --ts: clamp(16px, 3.2vmin, 24px); --hint: #999;
  width: var(--ts); height: var(--ts); border-radius: 4px;
  background: color-mix(in srgb, var(--hint) 16%, #efe7d6); box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
}
.az-cell.filled {
  background: linear-gradient(150deg, color-mix(in srgb, var(--tile) 80%, #fff), var(--tile) 42%, color-mix(in srgb, var(--tile) 72%, #000));
  box-shadow: inset 0 1px 2px rgba(255,255,255,.5), inset 0 -2px 3px rgba(0,0,0,.28);
}

/* floor line (penalty track) */
.az-floor { display: flex; gap: 4px; margin-top: 10px; padding: 4px; border-radius: 8px; }
.az-fslot {
  --ts: clamp(16px, 3.2vmin, 24px);
  width: var(--ts); height: calc(var(--ts) + 13px); border-radius: 4px;
  background: rgba(192,57,43,.08); box-shadow: inset 0 0 0 1px rgba(192,57,43,.25);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
}
.az-fpen { font-size: .58rem; font-weight: 700; color: #c0392b; line-height: 1.5; }
.az-floor.target { cursor: pointer; outline: 2px dashed #c0392b; background: rgba(192,57,43,.14); }
.az-floor.target:hover { background: rgba(192,57,43,.24); }

/* ======================= TIC-TAC-TOE ======================= */
.tt-activity { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; overflow: auto; background: linear-gradient(160deg, #eaf3ff, #cfe0ff); }
.tt-lobby { text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.tt-logo { font-size: 2.2rem; font-weight: 900; color: #2e6fb7; }
.tt-msg { font-weight: 700; color: var(--ink); background: rgba(255,255,255,.75); border: 1px solid var(--line); padding: 6px 16px; border-radius: 999px; }
.tt-grid { display: grid; grid-template-columns: repeat(3, clamp(64px, 22vmin, 110px)); grid-template-rows: repeat(3, clamp(64px, 22vmin, 110px)); gap: 8px; }
.tt-cell {
  border: none; border-radius: 14px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.12);
  font-size: clamp(2rem, 9vmin, 3.4rem); font-weight: 900; line-height: 1; display: grid; place-items: center; cursor: pointer;
}
.tt-cell:disabled { cursor: default; }
.tt-cell.x { color: #2e6fb7; }
.tt-cell.o { color: #c0392b; }
.tt-cell.win { background: #fff7d6; box-shadow: 0 0 0 3px #f2b705 inset; }
.tt-cell:not(:disabled):hover { background: #f3f8ff; }
.tt-scores { color: var(--ink); font-weight: 600; }
.tt-controls { display: flex; gap: 8px; align-items: center; }

/* ======================= DOTS & BOXES ======================= */
.dab-activity { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; overflow: auto; background: linear-gradient(160deg, #fff7ec, #ffe6c9); }
.dab-lobby { text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.dab-lobby-opts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.dab-logo { font-size: 2.1rem; font-weight: 900; color: #d2691e; }
.dab-msg { font-weight: 700; color: var(--ink); background: rgba(255,255,255,.8); border: 1px solid var(--line); padding: 6px 16px; border-radius: 999px; text-align: center; }
.dab-grid { display: grid; place-items: center; }
.dab-dot { width: 13px; height: 13px; border-radius: 50%; background: #6b4b2a; }
.dab-edge { background: transparent; border-radius: 4px; }
.dab-h { width: 100%; height: 7px; align-self: center; }
.dab-v { height: 100%; width: 7px; justify-self: center; }
.dab-edge.claimed { background: #6b4b2a; }
.dab-edge.playable { cursor: pointer; background: rgba(107,75,42,.15); }
.dab-edge.playable:hover { background: rgba(210,105,30,.6); }
.dab-box { width: 100%; height: 100%; display: grid; place-items: center; font-weight: 800; color: #fff; font-size: clamp(.8rem, 3vmin, 1.2rem); }
.dab-box.own0 { background: rgba(46,111,183,.85); }
.dab-box.own1 { background: rgba(192,57,43,.85); }
.dab-scores { font-weight: 700; color: var(--ink); }
.dab-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }

/* ======================= CONVERSATION CARDS ======================= */
.cv-activity { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; overflow: auto; background: linear-gradient(160deg, #f3ecff, #e3d4ff); }
.cv-msg { color: var(--ink); margin: auto; }
.cv-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 560px; }
.cv-cat { font-weight: 800; color: #6a3fb5; font-size: 1.05rem; }
.cv-card {
  width: 100%; min-height: clamp(160px, 34vmin, 240px); display: grid; place-items: center; text-align: center;
  background: #fff; border-radius: 20px; box-shadow: 0 8px 24px rgba(70,40,120,.18); border: 1px solid var(--line); padding: 28px;
}
.cv-prompt { font-size: clamp(1.15rem, 3.4vmin, 1.7rem); font-weight: 700; color: var(--ink); line-height: 1.4; }
.cv-pos { color: var(--muted); font-size: 0.85rem; }
.cv-picks { display: flex; gap: 8px; }
.cv-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }

/* ======================= JIGSAW PUZZLE ======================= */
.pz-activity { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 14px; overflow: auto; background: linear-gradient(160deg, #efe7f7, #d6c6ea); }
.pz-msg { color: var(--ink); margin: auto; }
.pz-bar { display: flex; align-items: center; gap: 12px; justify-content: center; flex-wrap: wrap; }
.pz-progress { font-weight: 700; color: var(--ink); background: rgba(255,255,255,.85); border: 1px solid var(--line); padding: 6px 14px; border-radius: 999px; }
.pz-ws {
  position: relative; height: min(80vh, 940px); max-width: 97vw; margin: 0 auto;   /* aspect-ratio set inline → width follows height; fills the screen */
  background: linear-gradient(160deg, #5d4576, #3d2c50); border-radius: 14px;
  box-shadow: inset 0 2px 14px rgba(0,0,0,.35); overflow: hidden; touch-action: none;
}
.pz-ws-inner { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.pz-frame {
  position: absolute; box-sizing: border-box; border: 3px dashed rgba(255,255,255,.5);
  border-radius: 6px; background-size: 100% 100%; background-repeat: no-repeat; opacity: .28;
}
.pz-piece {
  position: absolute; background-repeat: no-repeat; cursor: grab; touch-action: none;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.45));   /* follows the jigsaw clip-path outline */
}
.pz-piece.dragging { cursor: grabbing; filter: drop-shadow(0 7px 12px rgba(0,0,0,.55)); z-index: 50; }
.pz-piece.placed { cursor: default; filter: none; }
.pz-bar .btn.active { background: #6b4fa0; color: #fff; border-color: #6b4fa0; }
/* clinician-only picture picker */
.pz-picker {
  width: 100%; max-width: 820px; margin: -4px auto 0; background: rgba(255,255,255,.94);
  border: 1px solid var(--line); border-radius: 14px; padding: 10px; box-shadow: 0 6px 18px rgba(70,40,120,.16);
}
.pz-cats { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 8px; }
.pz-cat.active { background: #6b4fa0; color: #fff; border-color: #6b4fa0; }
.pz-thumbs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px;
  max-height: 300px; overflow-y: auto; padding: 4px;
}
.pz-thumb {
  padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; cursor: pointer;
  background: #eee; aspect-ratio: 1 / 1; line-height: 0;
}
.pz-thumb:hover { border-color: #6b4fa0; }
.pz-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pz-surprise {
  display: grid; place-items: center; white-space: pre-line; text-align: center; line-height: 1.15;
  font-weight: 700; font-size: 0.8rem; color: #fff; background: linear-gradient(150deg, #7b5bd0, #5a3fa0);
}

/* ======================= DRAW & GUESS ======================= */
.dg-activity { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px; overflow: auto; background: linear-gradient(160deg, #fff6f9, #ffe1ec); }
.dg-lobby { margin: auto; text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; max-width: 460px; }
.dg-logo { font-size: 2.3rem; font-weight: 900; color: #e84a8a; text-shadow: 2px 2px 0 #f4c430; }
.dg-sub { color: var(--muted); }
.dg-msg { color: var(--ink); margin: auto; }
.dg-banner { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; min-height: 34px; }
.dg-role { font-weight: 700; color: var(--ink); }
.dg-word { font-weight: 900; letter-spacing: 2px; font-size: 1.5rem; color: #c0227a; background: #fff; border: 2px solid #f3b6d3; border-radius: 10px; padding: 2px 14px; }
.dg-cat { font-weight: 700; color: #6a3fb5; background: rgba(255,255,255,.7); border-radius: 999px; padding: 3px 12px; }
.dg-peek { font-size: 0.82rem; color: var(--muted); font-style: italic; }
.dg-solved { font-weight: 800; color: #2e9e4f; background: rgba(255,255,255,.8); border-radius: 999px; padding: 3px 12px; }
.dg-canvas-wrap { width: 100%; max-width: 720px; }
.dg-canvas { width: 100%; height: auto; display: block; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); touch-action: none; }
.dg-canvas.drawable { cursor: crosshair; }
.dg-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.dg-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); cursor: pointer; }
.dg-swatch.active { outline: 3px solid #333; outline-offset: 1px; }
.dg-tool { padding: 5px 10px; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.dg-tool.dg-eraser { font-size: 1rem; }
.dg-tool.active { outline: 3px solid #333; }
.dg-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }