: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: clamp(58px, 6vmin, 92px); height: clamp(86px, 8.9vmin, 136px); 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: clamp(1.55rem, 2.6vmin, 2.4rem); z-index: 1; color: var(--col, #888); }
.uno-card.small .ctr { font-size: .95rem; }
.uno-card .cnr { position: absolute; font-size: clamp(.72rem, 1.2vmin, 1.05rem); 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%) * 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, 120px); height: clamp(34px, 8vmin, 120px); 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, clamp(860px, 90vmin, 1250px)); }
.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, 150px); 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%); 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, 1.4rem); 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, 68px); 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, 38px); 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: clamp(460px, 46vmin, 660px); 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, 2rem); 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%); 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, 1.35rem);
  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, .85rem); letter-spacing: .18em; font-weight: 900; opacity: .65; }
.sy-pack-uh { font-size: clamp(0.9rem, 2.6vmin, 2.1rem); font-weight: 900; }
.sy-pack-n { font-size: clamp(.4rem, .9vmin, .85rem); 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, 2rem); font-weight: 900; line-height: 1; white-space: nowrap; letter-spacing: -0.02em; }
/* move chooser below the board */
.sy-actions { width: min(78vh, 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, 128px); 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, 3rem); line-height: 1; }
.zp-pile-num { font-size: clamp(1.2rem, 3vmin, 2.7rem); font-weight: 900; }
/* hands */
.zp-hands { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: clamp(760px, 82vmin, 1120px); }
.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, 136px); 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, 3.2rem); opacity: 0.9; }
.zp-card-animal { font-size: clamp(1.3rem, 3.2vmin, 2.9rem); line-height: 1; }
.zp-card-num { font-size: clamp(1.2rem, 3vmin, 2.7rem); 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: clamp(64px, 7vmin, 100px); 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: clamp(1.7rem, 3vmin, 2.4rem); 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, 130px); height: clamp(48px, 9vmin, 130px); 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: clamp(64px, 6.6vmin, 98px); height: clamp(90px, 9.3vmin, 138px); 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: clamp(1.1rem, 1.8vmin, 1.6rem); }
.c8-card .c8-suit { font-size: clamp(1.9rem, 3.1vmin, 2.8rem); 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: clamp(150px, 22vmin, 270px); height: clamp(180px, 26.4vmin, 324px); }
.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: clamp(26px, 3.6vmin, 40px); border-bottom: 3px solid #5b4636; text-align: center; font-size: clamp(1.6rem, 2.6vmin, 2.3rem); 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: clamp(560px, 58vmin, 800px); 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, 140px); 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, 84px); 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, 110px); 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, 66px); }
.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, 50px);
  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, 34px); 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, 50px);
  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, 34px); 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, 140px); 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, 34px);
  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, 34px); --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, 34px);
  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, 260px)); grid-template-rows: repeat(3, clamp(64px, 22vmin, 260px)); 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, 7rem); 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.8rem); }
.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: clamp(560px, 62vmin, 820px); }
.cv-cat { font-weight: 800; color: #6a3fb5; font-size: 1.05rem; }
.cv-card {
  width: 100%; min-height: clamp(160px, 34vmin, 360px); 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, 2.3rem); 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, 1400px); 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: clamp(720px, 78vmin, 1100px); }
.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; }

/* ======================= DBT SKILLS ======================= */
.db-activity {
  flex: 1; min-height: 0; overflow: auto; padding: 16px;
  background: linear-gradient(160deg, #f3f7fb, #e3ecf5);
}
.db-msg { color: var(--muted); text-align: center; padding: 30px; }
.db-wrap { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.db-head {
  background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--db-accent);
  border-radius: 14px; padding: 12px 16px; box-shadow: 0 4px 14px rgba(40,60,90,.08);
}
.db-module { font-size: .78rem; font-weight: 700; color: var(--db-accent); letter-spacing: .02em; }
.db-title-row { display: flex; align-items: center; gap: 10px; margin: 2px 0; }
.db-emoji { font-size: 1.7rem; line-height: 1; }
.db-title { margin: 0; font-size: 1.25rem; color: var(--ink); }
.db-tagline { color: var(--muted); font-size: .9rem; }
.db-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: center; }
.db-bar select { max-width: 100%; }

.db-steps { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.db-step {
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  padding: 7px 14px; border-radius: 999px; font-weight: 700; font-size: .88rem; cursor: pointer;
}
.db-step.active { background: var(--db-accent); color: #fff; border-color: var(--db-accent); }
.db-step:disabled { cursor: default; opacity: .85; }

.db-body {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 16px; box-shadow: 0 4px 14px rgba(40,60,90,.08);
}
.db-idea { margin: 0 0 12px; color: var(--ink); line-height: 1.55; font-size: 1rem; }
.db-hint { color: var(--muted); font-size: .82rem; text-align: center; margin: 12px 0 0; }

/* Learn — tap-to-reveal cards */
.db-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.db-card {
  text-align: left; cursor: pointer; border: 2px solid var(--line); background: #fbfdff;
  border-radius: 12px; padding: 10px 12px; transition: border-color .15s, background .15s;
}
.db-card:hover { border-color: var(--db-accent); }
.db-card.open { background: #fff; border-color: var(--db-accent); }
.db-card-k {
  display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px;
  border-radius: 8px; background: var(--db-accent); color: #fff; font-weight: 800; font-size: 1rem;
}
.db-card-t { font-weight: 700; color: var(--ink); margin-top: 6px; }
.db-card-d { display: none; color: var(--muted); font-size: .86rem; line-height: 1.45; margin-top: 4px; }
.db-card.open .db-card-d { display: block; }

/* Spot it — scenario check */
.db-q { padding: 12px 0; border-bottom: 1px dashed var(--line); }
.db-q:last-of-type { border-bottom: 0; }
.db-q-text { font-weight: 600; color: var(--ink); line-height: 1.5; margin-bottom: 8px; }
.db-opts { display: flex; flex-direction: column; gap: 6px; }
.db-opt {
  text-align: left; border: 2px solid var(--line); background: #fff; color: var(--ink);
  padding: 9px 12px; border-radius: 10px; cursor: pointer; font-size: .92rem;
}
.db-opt:hover { border-color: var(--db-accent); }
.db-opt.chosen { font-weight: 700; }
.db-opt.right { border-color: #3fa96a; background: #eefaf1; }
.db-opt.wrong { border-color: #d9534f; background: #fdeeee; }
.db-why { display: none; }
.db-why.show { display: block; margin-top: 8px; font-size: .88rem; color: #8a6d1f; background: #fdf6e3; border-radius: 8px; padding: 8px 10px; }
.db-why.show.ok { color: #24693f; background: #eefaf1; }

/* My turn — the fillable worksheet */
.db-field { margin-bottom: 14px; }
.db-label { display: block; font-weight: 600; color: var(--ink); margin-bottom: 5px; font-size: .93rem; }
.db-input {
  width: 100%; box-sizing: border-box; resize: vertical; font: inherit; font-size: .95rem;
  border: 2px solid var(--line); border-radius: 10px; padding: 9px 11px; background: #fcfdff; color: var(--ink);
}
.db-input:focus { outline: none; border-color: var(--db-accent); background: #fff; }
.db-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.db-chip {
  border: 2px solid var(--line); background: #fff; color: var(--muted);
  padding: 6px 12px; border-radius: 999px; cursor: pointer; font-size: .87rem; font-weight: 600;
}
.db-chip.on { background: var(--db-accent); color: #fff; border-color: var(--db-accent); }

.db-nav { display: flex; gap: 8px; justify-content: center; }

/* DBT — developmental path picker (clinician only) */
.db-levels { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.db-level {
  flex: 1 1 170px; max-width: 230px; text-align: left; cursor: pointer;
  border: 2px solid var(--line); background: #fff; border-radius: 12px; padding: 8px 12px;
  display: flex; flex-direction: column; gap: 2px; font-family: inherit;
}
.db-level:hover { border-color: var(--db-accent); }
.db-level.active { border-color: var(--db-accent); background: #fff; box-shadow: 0 0 0 2px var(--db-accent) inset; }
.db-level-name { font-weight: 700; color: var(--ink); font-size: .9rem; }
.db-level-hint { color: var(--muted); font-size: .74rem; line-height: 1.3; }

/* DBT — "why it works" box */
.db-whybox { border: 1px dashed var(--db-accent); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; background: #fcfdff; }
.db-whybox-t { font-weight: 700; color: var(--db-accent); font-size: .85rem; margin-bottom: 2px; }
.db-whybox-d { margin: 0; color: var(--ink); font-size: .92rem; line-height: 1.5; }

/* DBT — worked story + talk-about-it */
.db-story { background: #fbfaf6; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.db-story-t { font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.db-story-p { margin: 0 0 10px; color: var(--ink); line-height: 1.6; font-size: .97rem; }
.db-story-p:last-child { margin-bottom: 0; }
.db-ask { margin-top: 12px; border-left: 4px solid var(--db-accent); background: #fcfdff; border-radius: 0 10px 10px 0; padding: 10px 14px; }
.db-ask-t { font-weight: 700; color: var(--db-accent); font-size: .85rem; margin-bottom: 2px; }
.db-ask-d { margin: 0; color: var(--ink); font-size: .95rem; line-height: 1.5; }

/* DBT — take-home practice */
.db-practice { margin-top: 6px; border: 2px solid var(--db-accent); border-radius: 12px; padding: 12px 14px; background: #fff; }
.db-practice-t { font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.db-practice-d { margin: 0 0 10px; color: var(--ink); font-size: .93rem; line-height: 1.5; }
.db-practice .db-field { margin-bottom: 0; }

/* DBT — clinician-only notes */
.db-notes { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 10px; }
.db-notes summary { cursor: pointer; font-weight: 700; color: var(--muted); font-size: .88rem; }
.db-notes ul { margin: 8px 0 0; padding-left: 20px; }
.db-notes li { color: var(--muted); font-size: .88rem; line-height: 1.5; margin: 5px 0; }

/* DBT — shared draw pad (answer by drawing) */
.db-drawbar { display: flex; justify-content: center; margin-top: 14px; }
.db-drawbar .btn.active { background: #6b4fa0; color: #fff; border-color: #6b4fa0; }
.db-pad { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.db-canvas {
  width: 100%; height: auto; display: block; border-radius: 12px; border: 2px solid var(--line);
  background: #fff; touch-action: none; cursor: crosshair;
}
.db-pad-tools { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; }
.db-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(0,0,0,.15); cursor: pointer; padding: 0; }
.db-swatch.active { outline: 3px solid #6b4fa0; outline-offset: 2px; }
.db-padtool {
  border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 4px 10px;
  font-size: 1rem; cursor: pointer; font-family: inherit;
}
.db-padtool.active, .db-eraser.active { background: #6b4fa0; color: #fff; border-color: #6b4fa0; }

/* ======================= SLAPJACK ======================= */
.sj-activity {
  flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 16px; overflow: auto; position: relative;
  background: radial-gradient(ellipse at center, #2e7d5b, #1b5e42);
}
.sj-msg { color: #fff; margin: auto; }
.sj-lobby { text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; margin: auto; background: rgba(255,255,255,.93); border-radius: 18px; padding: 26px 30px; max-width: 460px; }
.sj-logo { font-size: 2rem; font-weight: 900; color: #1b5e42; }
.sj-sub { color: var(--ink); line-height: 1.5; margin: 0; }
.sj-row { display: flex; align-items: center; gap: 12px; }
.sj-who { color: #eaf6ef; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.sj-back {
  width: clamp(58px, 7vmin, 100px); height: clamp(80px, 9.7vmin, 138px); border-radius: 8px; border: 2px solid #fff;
  background: repeating-linear-gradient(45deg, #7b4fc2, #7b4fc2 6px, #6a3fb0 6px, #6a3fb0 12px);
  box-shadow: 0 3px 8px rgba(0,0,0,.35);
}
.sj-banner { min-height: 1.6em; font-size: 1.15rem; font-weight: 800; color: #ffe9a8; text-shadow: 0 1px 3px rgba(0,0,0,.5); text-align: center; }
.sj-center {
  position: relative; width: min(clamp(340px, 44vmin, 620px), 70vw); height: clamp(200px, 26vmin, 360px); display: grid; place-items: center;
  cursor: pointer; border-radius: 18px; border: 3px dashed rgba(255,255,255,.35); touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}
.sj-center:active { transform: scale(.98); }
.sj-empty { color: rgba(255,255,255,.5); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.sj-card {
  position: absolute; width: clamp(110px, 14vmin, 200px); height: clamp(154px, 19.6vmin, 280px); border-radius: 10px; background: #fff; color: #1c1c1c;
  border: 1px solid #ccc; box-shadow: 0 5px 14px rgba(0,0,0,.4); transform: rotate(var(--tilt, 0deg));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.sj-card.red { color: #c62828; }
.sj-rank { font-size: clamp(2.4rem, 4.2vmin, 3.8rem); font-weight: 900; line-height: 1; }
.sj-suit { font-size: clamp(2rem, 3.5vmin, 3.2rem); line-height: 1; }
.sj-count { position: absolute; bottom: 6px; right: 10px; color: rgba(255,255,255,.75); font-size: .8rem; font-weight: 700; }
.sj-flip { font-size: 1.1rem; padding: 12px 22px; }
.sj-flip:disabled { opacity: .5; }
.sj-over {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center;
  background: rgba(20, 45, 34, .82); z-index: 5;
}
.sj-over-msg { color: #fff; font-size: 1.4rem; font-weight: 900; text-align: center; padding: 0 20px; text-shadow: 0 2px 6px rgba(0,0,0,.5); }
@keyframes sjTake { 0% { box-shadow: 0 0 0 0 rgba(110,231,160,.9); } 100% { box-shadow: 0 0 0 26px rgba(110,231,160,0); } }
.sj-flash-take { animation: sjTake .5s ease-out; }
@keyframes sjFalse { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
.sj-flash-false { animation: sjFalse .3s ease-in-out; }


/* ======================= SKILL QUEST (roll-and-move board) ======================= */
.sq-activity {
  flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 14px; overflow: auto; position: relative;
  background: linear-gradient(160deg, #2b6777, #1c4a57);
}
.sq-msg { color: #fff; margin: auto; }
.sq-lobby { text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; margin: auto; background: rgba(255,255,255,.94); border-radius: 18px; padding: 26px 30px; max-width: 520px; }
.sq-logo { font-size: 2rem; font-weight: 900; color: #1c4a57; }
.sq-sub { color: var(--ink); line-height: 1.5; margin: 0; }
.sq-lobby-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.sq-hud { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.sq-chip {
  display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
  background: rgba(255,255,255,.92); border: 2px solid transparent; font-weight: 700; color: var(--ink);
}
.sq-chip.turn { border-color: #ffd23f; box-shadow: 0 0 0 3px rgba(255,210,63,.35); }
.sq-chip-tok { font-size: 1.2rem; }
.sq-chip-skip { font-size: .85rem; }
.sq-board {
  display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px;
  width: min(96vw, clamp(780px, 88vmin, 1150px)); background: rgba(255,255,255,.12); padding: 10px; border-radius: 16px;
}
.sq-cell {
  position: relative; aspect-ratio: 1 / 1; border-radius: 10px; background: var(--cell, #e9eef2);
  display: grid; place-items: center; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18);
}
.sq-free, .sq-start { --cell: #cfd8de; }
.sq-lucky { --cell: #ff7bd5; }
.sq-star { --cell: #ffd23f; }
.sq-finish { --cell: #ffffff; background-image: repeating-conic-gradient(#2c2c2c 0% 25%, #fff 0% 50%); background-size: 12px 12px; }
.sq-glyph { font-size: 1rem; opacity: .9; }
.sq-tokens { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.5rem; text-shadow: 0 2px 4px rgba(0,0,0,.35); letter-spacing: -6px; pointer-events: none; }
.sq-controls { display: flex; align-items: center; gap: 14px; }
.sq-die { font-size: clamp(2.6rem, 4.4vmin, 3.8rem); line-height: 1; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.4); min-width: 1.2em; text-align: center; }
.sq-die.rolled { animation: sqPop .3s ease-out; }
@keyframes sqPop { 0% { transform: scale(.4) rotate(-40deg); } 100% { transform: scale(1) rotate(0); } }
.sq-roll { font-size: 1.05rem; padding: 12px 22px; }
.sq-roll:disabled { opacity: .55; }
.sq-cardwrap { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(15, 40, 48, .72); z-index: 6; padding: 18px; }
.sq-card {
  max-width: 460px; width: 100%; background: #fff; border-radius: 16px; padding: 18px 20px;
  border-top: 10px solid var(--cell, #5aa9e6); box-shadow: 0 16px 40px rgba(0,0,0,.4); text-align: center;
}
.sq-card-t { font-weight: 900; font-size: 1.1rem; color: var(--ink); margin-bottom: 8px; }
.sq-card-d { color: var(--ink); font-size: 1.08rem; line-height: 1.55; }
.sq-card-move { margin-top: 10px; font-weight: 800; color: #1c4a57; }
.sq-card-row { margin-top: 14px; display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
.sq-over { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center; background: rgba(15, 40, 48, .82); z-index: 7; }
.sq-over-msg { color: #fff; font-size: 1.4rem; font-weight: 900; text-align: center; padding: 0 20px; text-shadow: 0 2px 6px rgba(0,0,0,.5); }

/* ======================= SKILL SHOWDOWN (scenario cards) ======================= */
.sd-activity {
  flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 12px; padding: 16px; overflow: auto; position: relative;
  background: linear-gradient(160deg, #4a3f6b, #322a4d);
}
.sd-msg { color: #fff; margin: auto; }
.sd-lobby { text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; margin: auto; background: rgba(255,255,255,.94); border-radius: 18px; padding: 26px 30px; max-width: 520px; }
.sd-logo { font-size: 2rem; font-weight: 900; color: #4a3f6b; }
.sd-sub { color: var(--ink); line-height: 1.5; margin: 0; }
.sd-lobby-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.sd-hud { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.sd-chip {
  display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-radius: 999px;
  background: rgba(255,255,255,.92); border: 2px solid transparent; font-weight: 700; color: var(--ink);
}
.sd-chip.picking { border-color: #ffd23f; box-shadow: 0 0 0 3px rgba(255,210,63,.3); }
.sd-chip-score { color: #4a3f6b; font-variant-numeric: tabular-nums; }
.sd-scenario { width: min(96vw, clamp(640px, 68vmin, 920px)); }
.sd-scene {
  background: #fff; border-radius: 14px; padding: 14px 18px; border-left: 8px solid var(--edge, #5aa9e6);
  box-shadow: 0 10px 26px rgba(0,0,0,.3);
}
.sd-scene-k { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 4px; }
.sd-scene-t { font-size: 1.12rem; font-weight: 700; color: var(--ink); line-height: 1.5; }
.sd-banner { min-height: 1.5em; color: #ffe9a8; font-weight: 800; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.sd-hand { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; width: min(96vw, clamp(820px, 88vmin, 1180px)); }
.sd-card {
  text-align: left; background: #fff; border: 3px solid transparent; border-radius: 12px; padding: 10px 12px;
  cursor: pointer; font-family: inherit; box-shadow: 0 6px 14px rgba(0,0,0,.28); transition: transform .08s ease, border-color .12s ease;
  display: flex; flex-direction: column; gap: 4px; min-height: 108px;
}
.sd-card:not(:disabled):hover { transform: translateY(-4px); border-color: #ffd23f; }
.sd-card:disabled { cursor: default; }
.sd-card.comedy { background: #fff8e8; }
.sd-card.picked { border-color: #4a3f6b; box-shadow: 0 0 0 4px rgba(255,210,63,.5), 0 10px 24px rgba(0,0,0,.35); transform: translateY(-4px); }
.sd-card.dimmed { opacity: .45; }
.sd-card-t { font-weight: 800; font-size: .88rem; color: #4a3f6b; }
.sd-card-d { color: var(--ink); font-size: .92rem; line-height: 1.45; }
.sd-judge { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; min-height: 44px; }
.sd-over { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center; background: rgba(30, 24, 50, .85); z-index: 7; }
.sd-over-msg { color: #fff; font-size: 1.4rem; font-weight: 900; text-align: center; padding: 0 20px; text-shadow: 0 2px 6px rgba(0,0,0,.5); }

/* DBT umbrella: mode picker + nested game panes */
.db-modes { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; max-width: 760px; margin: 0 auto 12px; }
.db-mode {
  border: 1px solid var(--line); background: #fff; color: var(--muted); padding: 8px 18px;
  border-radius: 999px; font-weight: 800; font-size: .92rem; cursor: pointer; font-family: inherit;
}
.db-mode.active { background: #6b4fa0; color: #fff; border-color: #6b4fa0; }
.sq-nested, .sd-nested { min-height: 620px; border-radius: 14px; }
.sq-bar, .sd-bar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; background: rgba(255,255,255,.14); padding: 8px 12px; border-radius: 12px; }
.sq-bar .btn, .sd-bar .btn { padding: 6px 12px; font-size: .84rem; }

/* ======================= RUMMY ======================= */
.ry-activity {
  flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 14px; overflow: auto; position: relative;
  background: radial-gradient(ellipse at top, #2f7d5b, #14523a);
}
.ry-msg { color: #fff; margin: auto; }
.ry-lobby { text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; margin: auto; background: rgba(255,255,255,.94); border-radius: 18px; padding: 26px 30px; max-width: 520px; }
.ry-logo { font-size: 2rem; font-weight: 900; color: #14523a; }
.ry-sub { color: var(--ink); line-height: 1.55; margin: 0; }
.ry-lobby-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ry-bar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; background: rgba(255,255,255,.14); padding: 7px 12px; border-radius: 12px; }
.ry-bar .btn.active { background: #f5c518; border-color: #f5c518; color: #2a2200; }
.ry-hud { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; }
.ry-chip {
  display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-radius: 999px;
  background: rgba(255,255,255,.93); border: 2px solid transparent; font-weight: 700; color: var(--ink);
}
.ry-chip.turn { border-color: #f5c518; box-shadow: 0 0 0 3px rgba(245,197,24,.32); }
.ry-chip-cards { font-size: .82rem; color: var(--muted); }
.ry-chip-score { font-size: 1.05rem; color: #14523a; font-variant-numeric: tabular-nums; }
.ry-goal { color: #eaf6ef; font-weight: 700; font-size: .84rem; }
.ry-banner { min-height: 1.4em; color: #ffe9a8; font-weight: 700; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.ry-zone { width: 100%; max-width: clamp(900px, 92vmin, 1280px); display: flex; flex-direction: column; gap: 6px; }
.ry-zone.opp { margin-bottom: 2px; }
.ry-zone-head { display: flex; gap: 10px; align-items: center; justify-content: center; }
.ry-melds {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  min-height: 74px; padding: 8px; border-radius: 14px; background: rgba(0,0,0,.16);
}
.ry-zone.me .ry-melds { background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.ry-empty { color: rgba(255,255,255,.45); font-size: .8rem; margin: auto; font-style: italic; }
.ry-meld { background: rgba(255,255,255,.9); border: 2px solid transparent; border-radius: 12px; padding: 6px 8px; }
.ry-meld.mine { background: #fffdf2; }
.ry-meld.can-add { border-color: #f5c518; cursor: pointer; box-shadow: 0 0 0 3px rgba(245,197,24,.35); }
.ry-meld.can-add:hover { transform: translateY(-2px); }
.ry-meld-k { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 4px; }
.ry-meld-cards { display: flex; gap: 3px; }
.ry-piles { display: flex; gap: 18px; align-items: flex-start; justify-content: center; }
.ry-pile { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ry-pile-l { color: rgba(255,255,255,.8); font-size: .74rem; font-weight: 700; }
.ry-card {
  width: clamp(58px, 6vmin, 88px); height: clamp(82px, 8.5vmin, 124px); border-radius: 9px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 2px 6px rgba(0,0,0,.25); display: flex; flex-direction: column; align-items: center;
  justify-content: center; font-weight: 800; color: #1a1a1a; flex: none; transition: transform .08s ease;
}
.ry-card.red { color: #d33; }
.ry-card .ry-rank { font-size: clamp(1.05rem, 1.7vmin, 1.5rem); }
.ry-card .ry-suit { font-size: clamp(1.7rem, 2.8vmin, 2.5rem); line-height: 1; }
.ry-card.small { width: 42px; height: 60px; }
.ry-card.small .ry-rank { font-size: .82rem; }
.ry-card.small .ry-suit { font-size: 1.15rem; }
.ry-card.back { background: linear-gradient(135deg, #3a6ea5, #244a73); color: #cfe0f5; font-size: 1.7rem; }
.ry-card.ghost { background: rgba(255,255,255,.12); border-style: dashed; box-shadow: none; }
.ry-card.tappable { cursor: pointer; }
.ry-card.tappable:hover { transform: translateY(-5px); }
.ry-card.sel { outline: 3px solid #f5c518; transform: translateY(-10px); }
.ry-card.hint { box-shadow: 0 0 0 3px #4d96ff, 0 2px 8px rgba(0,0,0,.3); }
.ry-hand { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding-top: 10px; max-width: clamp(900px, 92vmin, 1280px); }
.ry-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ry-tip { color: rgba(255,255,255,.85); font-size: .82rem; text-align: center; min-height: 1.2em; }
.ry-over {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 6;
  background: rgba(10, 45, 32, .62); padding: 18px;   /* interactive: the round-end actions live in here */
}
.ry-over-box {
  background: #fff; border-radius: 18px; padding: 20px 24px; max-width: 420px; width: 100%;
  box-shadow: 0 18px 44px rgba(0,0,0,.45); text-align: center; display: flex; flex-direction: column; gap: 10px;
}
.ry-over-msg { color: var(--ink); font-size: 1.3rem; font-weight: 900; }
.ry-over-sub { color: var(--muted); font-size: .92rem; }
.ry-over-scores { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
.ry-over-score { display: flex; flex-direction: column; padding: 6px 14px; border-radius: 10px; background: #f4f7f5; min-width: 84px; }
.ry-over-score.me { background: #fffbe8; box-shadow: inset 0 0 0 2px #f5c518; }
.ry-over-score-n { font-size: .74rem; font-weight: 700; color: var(--muted); }
.ry-over-score-v { font-size: 1.5rem; font-weight: 900; color: #14523a; font-variant-numeric: tabular-nums; }
.ry-over-goal { color: var(--muted); font-size: .8rem; font-weight: 700; }
.ry-over-acts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 2px; }
.ry-over-wait { color: var(--muted); font-size: .88rem; margin: 0; }

/* ======================= MINDFULNESS ======================= */
.mf-activity {
  flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 16px; overflow: auto;
  background: linear-gradient(160deg, #e8f7f1, #bfe8dc);
}
.mf-msg { color: var(--muted); margin: auto; }
.mf-head { text-align: center; }
.mf-logo { font-size: 2.2rem; font-weight: 900; color: #1f7a63; }
.mf-sub { margin: 4px 0 0; color: var(--muted); font-weight: 600; }
/* category filter chips (per-person; not synced) */
.mf-filterbar { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.mf-filter {
  border: 1px solid var(--line); background: var(--panel); color: var(--muted);
  padding: 7px 14px; border-radius: 999px; font-weight: 700; font-size: .86rem; cursor: pointer; font-family: inherit;
}
.mf-filter:hover { border-color: #1f7a63; color: #1f7a63; }
.mf-filter.active { background: #1f7a63; color: #fff; border-color: #1f7a63; }
/* the practice grid: compact rows — small icon tile, name, one-glance description */
.mf-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(250px, 24vmin, 340px), 1fr));
  gap: clamp(8px, 1.1vmin, 12px); width: min(96vw, clamp(900px, 96vmin, 1560px));
}
.mf-card {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border: 2px solid transparent; border-radius: 14px; cursor: pointer;
  background: var(--panel); box-shadow: 0 3px 9px rgba(20,70,55,.13); text-align: left; font-family: inherit;
  transition: transform .1s ease, box-shadow .12s ease, border-color .12s ease;
}
.mf-card:hover { transform: translateY(-2px); border-color: #1f7a63; box-shadow: 0 8px 18px rgba(20,70,55,.22); }
.mf-card.static { cursor: default; }
.mf-card.static:hover { transform: none; border-color: transparent; box-shadow: 0 3px 9px rgba(20,70,55,.13); }
.mf-icon { width: clamp(46px, 5vmin, 62px); aspect-ratio: 1; flex: none; border-radius: 12px; display: grid; place-items: center; }
.mf-icon-emoji { font-size: clamp(1.6rem, 2.8vmin, 2.2rem); line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.mf-art { display: grid; place-items: center; }
.mf-art-emoji { font-size: clamp(2.6rem, 6vmin, 4.6rem); line-height: 1; filter: drop-shadow(0 3px 4px rgba(0,0,0,.25)); }
.mf-card-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.mf-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mf-card-name { font-weight: 800; color: var(--ink); font-size: clamp(.88rem, 1.35vmin, 1.05rem); line-height: 1.2; }
.mf-card-desc {
  color: var(--muted); font-size: clamp(.75rem, 1.15vmin, .88rem); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mf-chip { font-size: .7rem; font-weight: 800; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.mf-mins { font-size: .7rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
/* an open practice: big read-aloud step card */
.mf-ex-top { width: min(96vw, clamp(640px, 68vmin, 920px)); display: flex; gap: 10px; align-items: center; }
.mf-ex-hero { width: min(96vw, clamp(640px, 68vmin, 920px)); display: flex; gap: 16px; align-items: center; }
.mf-art-hero { aspect-ratio: 1; width: clamp(84px, 12vmin, 150px); border-radius: 20px; flex: none; box-shadow: 0 6px 16px rgba(20,70,55,.25); }
.mf-ex-intro { min-width: 0; }
.mf-ex-name { font-weight: 900; color: var(--ink); font-size: clamp(1.3rem, 2.6vmin, 2rem); line-height: 1.15; }
.mf-ex-tagline { margin: 4px 0 0; color: var(--muted); font-weight: 600; font-size: clamp(.9rem, 1.5vmin, 1.15rem); }
.mf-step-card {
  width: min(96vw, clamp(640px, 68vmin, 920px));
  padding: clamp(14px, 2vmin, 24px) clamp(16px, 2.4vmin, 30px);
  background: #fff; border-radius: 22px; border: 1px solid var(--line); box-shadow: 0 10px 28px rgba(20,70,55,.16);
}
.mf-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mf-step {
  display: flex; gap: 12px; align-items: flex-start;
  padding: clamp(8px, 1.2vmin, 13px) 10px; border-bottom: 1px dashed var(--line);
  border-radius: 12px; border-left: 4px solid transparent;
}
.mf-step:last-child { border-bottom: none; }
.mf-step.clickable { cursor: pointer; }
.mf-step.clickable:hover { background: rgba(31,122,99,.07); }
/* the step the CLIENT is currently seeing */
.mf-step.on { background: rgba(31,122,99,.12); border-left-color: #1f7a63; border-bottom-color: transparent; }
.mf-step.on .mf-step-text { font-weight: 800; }
.mf-step.on .mf-step-n { box-shadow: 0 0 0 3px rgba(31,122,99,.3); }
.mf-step.solo { border-bottom: none; padding: clamp(10px, 1.6vmin, 18px) 6px; }
.mf-step.solo .mf-step-text { font-size: clamp(1.15rem, 2.2vmin, 1.7rem); }
.mf-step-n {
  flex: none; width: 1.7em; height: 1.7em; display: grid; place-items: center; border-radius: 50%;
  background: #1f7a63; color: #fff; font-weight: 800; font-size: clamp(.82rem, 1.3vmin, 1rem); margin-top: 2px;
}
.mf-step-text { font-size: clamp(1rem, 1.7vmin, 1.35rem); font-weight: 600; color: var(--ink); line-height: 1.5; }
/* clinician-only banner: the highlighted step is what the client sees */
.mf-sync-note {
  width: min(96vw, clamp(640px, 68vmin, 920px)); display: flex; gap: 8px; align-items: center;
  background: #fff7dd; border: 1px solid #e8d48a; border-radius: 12px; padding: 8px 14px;
  font-size: .88rem; font-weight: 700; color: #6b5410;
}
.mf-sync-eye { font-size: 1.05rem; }
.mf-ex-count { font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: .74rem; color: #1f7a63; }
.mf-follow { color: var(--muted); font-weight: 700; margin: 0; }
.mf-tip {
  width: min(96vw, clamp(640px, 68vmin, 920px)); border: 1px dashed #1f7a63; border-radius: 12px;
  padding: 10px 14px; background: rgba(255,255,255,.75);
}
.mf-tip-t { font-weight: 800; color: #1f7a63; font-size: .82rem; margin-bottom: 2px; }
.mf-tip-d { margin: 0; color: var(--ink); font-size: .9rem; line-height: 1.5; }