:root {
  --bg: #2b2340;
  --panel: #3b3156;
  --panel-2: #4a3f6b;
  --ink: #fff8ec;
  --muted: #cbbfe0;
  --gold: #f4c542;
  --accent: #ff7a59;
  --accent-strong: #b5573f; /* the accent dark enough for light text on it (WCAG AA) */
  --good: #3fbf7f;
  --card: #fff8ec;
  --card-ink: #3b2a1e;
  --radius: 16px;
  font-family: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); overflow: hidden; -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; touch-action: manipulation; }
[hidden] { display: none !important; }
.muted { color: #6a607a; font-size: .92em; }

.btn { background: var(--panel-2); color: var(--ink); border: none; border-radius: 999px; padding: 10px 20px; font-weight: 600; font-size: 1rem; box-shadow: 0 4px 0 rgba(0,0,0,.25); transition: transform .1s; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.25); }
.btn.primary { background: var(--accent-strong); }
.btn.big { font-size: 1.2rem; padding: 14px 28px; }
.link { background: none; border: none; color: var(--muted); text-decoration: underline; padding: 6px; min-height: 40px; }
.row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }

/* ---------- title ---------- */
#title-screen { height: 100%; overflow-y: auto; text-align: center; padding: 0 16px 40px; background: linear-gradient(#1e2a5a, var(--bg) 60%); }
#title-art svg { width: min(100%, calc(34vh * 2.4)); max-width: 900px; display: block; margin: 0 auto; border-radius: 0 0 24px 24px; }
.logo { font-size: clamp(2.4rem, 8vw, 4.4rem); margin: -10px 0 0; color: var(--gold); text-shadow: 0 4px 0 #8a5a0a, 0 8px 18px rgba(0,0,0,.4); letter-spacing: 1px; }
.logo span { color: #fff; text-shadow: 0 4px 0 #6b4f8f, 0 8px 18px rgba(0,0,0,.4); }
.tagline { color: var(--muted); font-size: 1.2rem; margin: 6px 0 22px; }
#slots { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.slot-card { background: var(--panel); border-radius: var(--radius); padding: 16px; width: 200px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.slot-card h3 { margin: 0; max-width: 100%; overflow-wrap: anywhere; } .slot-card p { margin: 0 0 8px; color: var(--muted); }
.save-warn { flex-basis: 100%; max-width: 640px; margin: 0 auto; padding: 10px 16px; border-radius: var(--radius); background: #5a2a10; color: #ffe9a8; }
.slot-card.empty { border: 2px dashed var(--panel-2); background: transparent; }
.slot-face { width: 80px; height: 80px; background: #7ec3ef; border-radius: 50%; }
#new-game { max-width: 640px; margin: 0 auto; background: var(--panel); padding: 20px; border-radius: var(--radius); }
#new-game h2 { margin-top: 0; }
.name-label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
#player-name { font: inherit; font-size: 1.4rem; padding: 10px 14px; border-radius: 12px; border: 3px solid var(--panel-2); text-align: center; max-width: 320px; margin: 0 auto; width: 100%; }
.avatars { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.avatar-pick { background: #7ec3ef; border: 4px solid transparent; border-radius: 16px; width: 110px; height: 150px; padding: 4px; }
.avatar-pick.on { border-color: var(--gold); transform: scale(1.05); }
.avatar-pick svg { width: 100%; height: 100%; }

/* ---------- game layout ---------- */
#game { height: 100dvh; display: flex; flex-direction: column; }
#topbar { display: flex; align-items: center; gap: 12px; padding: 6px 16px; background: var(--panel); min-height: 52px; }
.coins-pill { background: #241d36; padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: 1.15rem; color: var(--gold); }
.titles { flex: 1; text-align: center; line-height: 1.15; }
#chapter { font-weight: 700; font-size: 1.05rem; }
#room-name { color: var(--muted); font-size: .9rem; }
.icon-btn { background: var(--panel-2); border: none; color: var(--ink); border-radius: 14px; min-width: 48px; min-height: 48px; font-size: 1.4rem; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px 10px; box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.icon-btn small { font-size: .7rem; font-weight: 600; }
.icon-btn.hint { background: #99690e; }
#stage-wrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px; }
#stage { position: relative; width: min(100%, calc((100dvh - 200px) * 16 / 9)); aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.4); background: #000; transition: filter .25s; }
#stage.fading #scene { opacity: 0; }
#scene { width: 100%; height: 100%; display: block; transition: opacity .25s; user-select: none; cursor: pointer; }
#stage.using #scene { cursor: crosshair; }
.hs { fill: transparent; cursor: pointer; }
.hs:hover { fill: rgba(255,255,255,.08); }
.exit-arrow { pointer-events: none; }
.exit-arrow .bob { animation: bob 1.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }

#avatar.walking .legL, #pip.walking .pip-hop { animation: step .3s infinite alternate; transform-box: fill-box; transform-origin: top center; }
#avatar.walking .legR { animation: step .3s infinite alternate-reverse; transform-box: fill-box; transform-origin: top center; }
#avatar.walking .kid { animation: walkbob .3s infinite alternate; }
@keyframes step { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes walkbob { to { transform: translateY(-4px); } }
.twinkle { animation: twinkle 1.6s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .2; } }
.flicker { animation: flicker .5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: bottom center; }
@keyframes flicker { to { transform: scaleY(.9); opacity: .85; } }
.zzz { animation: twinkle 2.4s infinite; }
.sparkle { fill: #fff6a8; stroke: #e0a800; stroke-width: 2; pointer-events: none; animation: sparkle 1.2s ease-in-out 2; transform-box: fill-box; transform-origin: center; }
@keyframes sparkle { 0%, 100% { opacity: 0; scale: .4; } 50% { opacity: 1; scale: 1.3; } }

#hover-label { position: absolute; transform: translate(-50%, -150%); background: rgba(20,14,34,.85); color: #fff; padding: 4px 12px; border-radius: 999px; font-size: .95rem; pointer-events: none; opacity: 0; transition: opacity .1s; white-space: nowrap; }
#hover-label.show { opacity: 1; }

#dialogue { position: absolute; inset: 0; display: none; align-items: flex-end; padding: 2.5%; gap: 12px; cursor: pointer; background: linear-gradient(transparent 55%, rgba(0,0,0,.35)); }
#dialogue.show { display: flex; }
#dlg-portrait { flex: 0 0 auto; width: clamp(64px, 12%, 120px); aspect-ratio: 1; background: #fff8ec; border-radius: 50%; border: 4px solid var(--gold); overflow: hidden; }
#dlg-portrait svg { width: 100%; height: 100%; }
.dlg-body { flex: 1; background: rgba(255,248,236,.97); color: var(--card-ink); border-radius: 18px; padding: 12px 18px; min-height: 26%; box-shadow: 0 6px 20px rgba(0,0,0,.3); }
#dlg-name { font-weight: 700; color: #a8432a; font-size: clamp(.9rem, 2vw, 1.15rem); }
#dlg-text { font-size: clamp(1rem, 2.5vw, 1.5rem); line-height: 1.3; }
.who-narrator .dlg-body { background: rgba(43,35,64,.95); color: #fff; } .who-narrator #dlg-name { color: var(--gold); }
.dlg-next { position: absolute; right: 4%; bottom: 6%; color: #a8432a; font-size: 1.3rem; animation: bob 1s infinite; }
.who-narrator .dlg-next { color: var(--gold); }

#toast { position: absolute; top: 12px; left: 50%; transform: translate(-50%, -220%); opacity: 0; background: rgba(20,14,34,.92); color: #fff; padding: 10px 20px; border-radius: 999px; font-weight: 600; transition: transform .3s, opacity .3s; pointer-events: none; max-width: 90%; text-align: center; }
#toast.show { transform: translate(-50%, 0); opacity: 1; }

#bottombar { background: var(--panel); padding: 6px 16px calc(8px + env(safe-area-inset-bottom)); }
#item-info { font-size: .95rem; padding: 2px 4px 6px; display: none; }
#item-info.show { display: block; }
#item-info .muted { color: var(--muted); }
.bar-row { display: flex; gap: 12px; align-items: center; }
/* The bag scrolls, which clips anything outside it, so the padding leaves room for the raised selected item and its badge. */
#inventory { flex: 1; display: flex; gap: 8px; overflow-x: auto; min-height: 64px; align-items: center; padding: 10px 8px 4px 4px; }
.inv-empty { color: var(--muted); font-size: .95rem; }
#inventory.more-x { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); }
#inventory.more-y { -webkit-mask-image: linear-gradient(#000 calc(100% - 36px), transparent); mask-image: linear-gradient(#000 calc(100% - 36px), transparent); }
.item { position: relative; flex: 0 0 auto; width: 62px; height: 62px; border-radius: 14px; background: #241d36; border: 3px solid transparent; padding: 4px; }
.item svg { width: 100%; height: 100%; }
.item.selected { border-color: var(--gold); background: #4a3f20; transform: translateY(-4px); }
.badge { position: absolute; top: -6px; right: -6px; background: var(--accent-strong); color: #fff; border-radius: 999px; font-size: .8rem; font-weight: 700; padding: 1px 7px; }
.tools { display: flex; gap: 8px; }

/* ---------- modals ---------- */
#modals .modal { position: fixed; inset: 0; background: rgba(15,10,25,.7); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 50; animation: fadein .2s; }
@keyframes fadein { from { opacity: 0; } }
.modal-card { position: relative; background: var(--card); color: var(--card-ink); border-radius: 22px; padding: 22px; max-width: 760px; width: 100%; max-height: calc(100dvh - 32px); overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.5); text-align: center; }
.modal-card h2 { margin: 0 0 10px; color: #7a3b1e; }
.modal-x ~ h2:first-of-type, .modal-x ~ .round-title { padding: 0 36px; } /* keeps long titles clear of the ✕ and 💡 */
.modal-card h3 { margin: 12px 0 6px; color: #7a3b1e; font-size: 1.05rem; }
.modal-x { position: absolute; top: 10px; right: 10px; width: max(40px, 2.2em); height: max(40px, 2.2em); border-radius: 50%; border: none; background: #eadfcd; font-size: 1.1rem; color: var(--card-ink); }
.modal-hint-btn { position: absolute; top: 10px; left: 10px; width: max(40px, 2.2em); height: max(40px, 2.2em); border-radius: 50%; border: none; background: #f6d77a; font-size: 1.1rem; }
.modal-hint { margin: 10px auto 0; max-width: 620px; color: var(--card-ink); background: #fff1c7; border-radius: 12px; padding: 0 12px; }
.modal-hint:not(:empty) { padding: 8px 12px; }
.modal .btn { background: #6b4f8f; }
.modal .btn.primary { background: var(--accent-strong); }

.journal .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; text-align: left; }
.goals, .french { list-style: none; padding: 0; margin: 0; }
.goals li { padding: 6px 0; font-size: 1.05rem; } .goals li.done { color: #6a8a5a; text-decoration: line-through; }
.french li { padding: 2px 0; }
.tune { display: flex; gap: 8px; } .tune.big { justify-content: center; margin: 16px 0; }
.note { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; box-shadow: 0 3px 0 rgba(0,0,0,.2); transition: transform .1s; }
.tune.big .note { width: 56px; height: 56px; font-size: 1.6rem; }
.note.lit, .bell-btn.lit { transform: scale(1.25); filter: brightness(1.3); box-shadow: 0 0 24px var(--c, #fff); }
.riddle { display: block; color: #7a3b1e; }

.map-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, auto); gap: 10px; margin-top: 10px; }
.map-room { border: none; border-radius: 14px; background: #eadfcd; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; font-weight: 600; color: var(--card-ink); min-height: 76px; justify-content: center; }
.map-room span { font-size: 1.6rem; } .map-room small { color: #87412f; }
.map-room.here { background: var(--gold); }
.map-room[disabled] { opacity: .45; cursor: default; }

.menu .toggle { display: flex; width: fit-content; margin: 0 auto; align-items: center; gap: 10px; font-size: 1.15rem; padding: 8px; }
.menu input { width: 22px; height: 22px; }
.menu-buttons { display: flex; gap: 10px; justify-content: center; margin: 12px 0; flex-wrap: wrap; }

.parchment { background: #f3e2b8; border-radius: 12px; padding: 20px; border: 3px solid #c9a227; font-size: 1.2rem; }
.parchment p { line-height: 1.6; }
.riddle-note .modal-card { background: none; box-shadow: none; padding: 0; overflow: visible; max-width: 560px; }
.riddle-note .parchment { box-shadow: 0 20px 60px rgba(0,0,0,.5); transform-origin: top center; animation: unfurl .9s cubic-bezier(.2,.8,.3,1.1) both; }
.riddle-note .parchment > * { animation: fadein .4s .7s both; }
@keyframes unfurl { 0% { clip-path: inset(0 0 100% 0); transform: scale(.6) rotate(-6deg); } 60% { transform: scale(1.03) rotate(1deg); } 100% { clip-path: inset(0 0 0 0); transform: none; } }
.chapter-end .stars { font-size: 3rem; animation: bob 1.2s infinite; }
.chapter-end .coming { font-size: 1.15rem; }

/* puzzles */
.bells { display: flex; gap: 14px; justify-content: center; margin: 16px 0; }
.bell-btn { width: 84px; height: 96px; border: none; background: var(--c); color: #fff; font-size: 2rem; border-radius: 42px 42px 14px 14px; box-shadow: 0 6px 0 rgba(0,0,0,.25); transition: transform .1s; }
.bell-btn:active { transform: translateY(4px); }
.progress { display: flex; gap: 8px; justify-content: center; }
.progress .dot { width: 18px; height: 18px; border-radius: 50%; background: #e0d3bd; }
.progress .dot.on { background: var(--good); }
.msg { min-height: 1.4em; font-weight: 600; color: #7a3b1e; }
.shake { animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

.tables .modal-card { max-width: 860px; }
.round-title { font-weight: 700; font-size: 1.1rem; margin: 0; }
.tables-wrap { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; align-items: start; }
.card-side, .live-side { background: #f3e9d6; border-radius: 14px; padding: 8px; }
.table-card, .table-live { width: 100%; display: block; }
.slot { fill: rgba(255,255,255,.01); stroke: #c9a227; stroke-width: 3; stroke-dasharray: 8 6; cursor: pointer; }
.slot:hover { fill: rgba(244,197,66,.18); }
.slot.wrong { stroke: #e74c3c; fill: rgba(231,76,60,.2); }
.card-back { aspect-ratio: 400 / 220; border-radius: 14px; background: repeating-linear-gradient(45deg, #8e1b3b 0 14px, #a8264a 14px 28px); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 2rem; }
.card-back span { font-size: .85rem; font-weight: 600; padding: 0 10px; }
.peek-btn { margin-top: 6px; min-height: 40px; }
.card-note { margin: 6px 0 0; font-weight: 700; font-size: .9rem; color: #8e1b3b; }
.live-side .msg { margin: 6px 0 0; min-height: 2.6em; } /* feedback right under the table you are setting */
.tray { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.tray-item { width: 4.75rem; border: 3px solid transparent; background: #eadfcd; border-radius: 14px; padding: 4px; display: flex; flex-direction: column; align-items: center; color: var(--card-ink); font-size: .8rem; font-weight: 600; }
.tray-item svg { width: 48px; height: 48px; }
.tray-item.picked { border-color: var(--accent); background: #ffe2d6; transform: translateY(-4px); }

/* design studio */
/* The studio always fits the screen: the room and the buttons stay put and only the catalogue scrolls,
   so turning the phone never leaves the room or the Reveal button out of sight. */
.studio-modal { padding: 8px; }
.studio-modal .modal-card { max-width: 1400px; height: min(calc(100dvh - 16px), 900px); max-height: none; display: flex; flex-direction: column; overflow: hidden; padding: 16px; }
.studio-modal h2 { flex: none; font-size: clamp(1.05rem, 2.4vw, 1.5rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 8px; }
.studio { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "room controls" "actions controls"; gap: 10px 16px; text-align: left; }
.preview-col { grid-area: room; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.room-wrap { flex: 1 1 auto; min-height: 90px; container-type: size; display: flex; align-items: center; justify-content: center; }
.room-wrap .room-edit { width: min(100cqw, 100cqh * 16 / 9); height: auto; }
.controls { grid-area: controls; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.controls .tab-body { flex: 1 1 auto; min-height: 0; max-height: none; overscroll-behavior: contain; }
.preview svg { width: 100%; border-radius: 14px; display: block; }
.budget { font-size: 1.2rem; font-weight: 700; color: #8a5a0a; }
.bruno-says { display: flex; gap: 10px; align-items: center; background: #f3e9d6; border-radius: 14px; padding: 8px; margin: 8px 0; }
.bruno-face svg { width: 52px; height: 52px; background: #fff; border-radius: 50%; }
.bruno-says p { margin: 0; font-style: italic; }
.opts { display: flex; gap: 6px; flex-wrap: wrap; }
.opt { border: 3px solid transparent; background: #eadfcd; border-radius: 12px; padding: 6px 8px; display: flex; flex-direction: column; align-items: center; min-width: 84px; color: var(--card-ink); }
.opt .emo { font-size: 1.5rem; } .opt .nm { font-size: .82rem; font-weight: 600; } .opt .cost { font-size: .78rem; color: #7f5209; }
.opt.on { border-color: var(--accent); background: #ffe2d6; }
/* Too expensive: the picture fades but the name and price stay readable. */
.opt.too-much { background: #f1eadf; } .opt.too-much svg, .opt.too-much .emo { opacity: .4; } .opt.too-much .nm, .opt.too-much .cost { color: #6e5a4b; }
.reveal-btn { width: 100%; margin-top: 14px; }

.icon-btn.decor { background: #387f5f; }
.room-edit { width: 100%; display: block; border-radius: 14px; background: #000; touch-action: none; user-select: none; }
.room-edit .fi { cursor: grab; }
.room-edit .fi:active { cursor: grabbing; }
.fi-hit { fill: transparent; }
.fi-sel { fill: rgba(255,255,255,.12); stroke: var(--gold); stroke-width: 3; stroke-dasharray: 10 6; pointer-events: none; }
.sel-bar { flex: none; margin-top: 6px; }
.sel-name { height: 1.4em; line-height: 1.4em; text-align: center; color: #7a3b1e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel-tools { display: flex; gap: 5px; margin-top: 4px; }
.tool { flex: 1 1 0; min-width: 0; min-height: 48px; border: none; border-radius: 12px; background: #6b4f8f; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3px 2px; font-size: 1.15rem; line-height: 1.1; box-shadow: 0 3px 0 rgba(0,0,0,.2); }
.tool small { font-size: .68rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tool.danger { background: #c0392b; }
.tool:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.2); }
.tool:disabled { opacity: .3; cursor: default; }
.btn.small { font-size: .85rem; padding: 6px 12px; box-shadow: 0 3px 0 rgba(0,0,0,.2); }
.btn.small:disabled { opacity: .4; }
.modal .btn.danger { background: #c0392b; }
.studio-actions { grid-area: actions; display: flex; gap: 10px; }
.studio-actions .reveal-btn { flex: 1; margin-top: 0; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.tab { border: none; background: #eadfcd; color: var(--card-ink); border-radius: 999px; padding: 6px 12px; min-height: 40px; font-weight: 600; font-size: .85rem; }
.tab.on { background: var(--accent-strong); color: #fff; }
.tab-body { max-height: 52vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.catalog .opt { position: relative; width: 6rem; }
.catalog .opt svg { width: 64px; height: 52px; }
.opt .have { position: absolute; top: -6px; right: -6px; background: var(--good); color: #fff; border-radius: 999px; font-size: .75rem; font-weight: 700; padding: 1px 7px; }
.party-board .modal-card { max-width: 640px; }
.parties { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.party { display: flex; gap: 12px; align-items: center; border: 3px solid transparent; background: #f3e9d6; border-radius: 14px; padding: 10px 14px; color: var(--card-ink); text-align: left; }
.party:not(.locked):hover { border-color: var(--accent); }
.party.locked { color: #5c4a3c; background: #efe7da; } .party.locked .p-emo { opacity: .6; }
.p-emo { font-size: 2.2rem; }
.p-body { display: flex; flex-direction: column; gap: 2px; }
.p-body em { font-style: normal; font-weight: 600; color: #8a5a0a; font-size: .9rem; }
.scrap small { color: #8a7d9e; font-weight: 400; }

/* before & after */
.ba { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; }
.ba-layer { position: absolute; inset: 0; }
.ba-layer svg { width: 100%; height: 100%; display: block; }
.ba-after { clip-path: inset(0 0 0 var(--split)); }
.ba-line { position: absolute; top: 0; bottom: 0; left: clamp(22px, var(--split), calc(100% - 22px)); width: 4px; margin-left: -2px; background: #fff; pointer-events: none; }
.ba-line span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; color: #333; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.ba-tag { position: absolute; top: 10px; background: rgba(0,0,0,.6); color: #fff; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: .85rem; pointer-events: none; }
.ba-tag.left { left: 10px; } .ba-tag.right { right: 10px; }
.ba input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.reveal-modal .modal-card { max-width: 1000px; background: #1b1430; color: #fff; }
.reveal-modal h2 { color: var(--gold); }
.reveal-stage { position: relative; border-radius: 14px; overflow: hidden; }
.curtain { position: absolute; top: 0; bottom: 0; width: 51%; background: repeating-linear-gradient(90deg, #8e1b3b 0 28px, #a8264a 28px 56px); transition: transform 1s ease-in; z-index: 2; }
.curtain.l { left: 0; } .curtain.r { right: 0; }
.reveal-stage.open .curtain.l { transform: translateX(-102%); } .reveal-stage.open .curtain.r { transform: translateX(102%); }
.drum { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; font-size: clamp(1.3rem, 4vw, 2.4rem); font-weight: 700; color: var(--gold); text-shadow: 0 3px 8px #000; }
.scrap { margin-bottom: 16px; }

@media (max-width: 760px) {
  .journal .cols, .tables-wrap { grid-template-columns: 1fr; }
  #topbar { padding: 6px 12px; } #bottombar { padding-left: 12px; padding-right: 12px; }
  .icon-btn small { display: none; }
  .bell-btn { width: 64px; height: 76px; }
  #stage { width: min(100%, calc((100dvh - 170px) * 16 / 9)); }
}

/* ---------- turn it sideways ---------- */
/* Touch devices (phones and tablets) are played sideways. Desktop browsers never see this, whatever the window shape. */
#rotate-overlay { display: none; }
@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
  #rotate-overlay { display: flex; position: fixed; inset: 0; z-index: 1000; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; background: linear-gradient(#1e2a5a, var(--bg) 70%); }
}
#rotate-overlay h2 { margin: 0; color: var(--gold); font-size: 2rem; text-shadow: 0 3px 0 #8a5a0a; }
#rotate-overlay p { margin: 0; max-width: 20em; color: var(--muted); font-size: 1.2rem; line-height: 1.4; }
.rotate-anim { position: relative; width: 170px; height: 170px; display: flex; align-items: center; justify-content: center; }
.rotate-phone { width: 80px; height: 136px; border: 6px solid var(--ink); border-radius: 18px; background: #7ec3ef; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; animation: turn-me 2.6s ease-in-out infinite; }
.rotate-arrow { position: absolute; top: 0; right: 0; color: var(--gold); font-size: 2.4rem; font-weight: 700; }
@keyframes turn-me { 0%, 25% { transform: rotate(0); } 55%, 85% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .rotate-phone { animation: none; } }
@media print {
  body * { visibility: hidden; } .scrapbook, .scrapbook * { visibility: visible; } .scrapbook { position: absolute; inset: 0; } .modal-x, .scrapbook .btn { display: none; }
}

/* Chapter 2 puzzles */
.seating .modal-card { max-width: 820px; }
.clues { list-style: none; padding: 0; margin: 8px auto 14px; text-align: left; max-width: 620px; }
.clues li { padding: 6px 10px; border-radius: 10px; margin: 4px 0; background: #f3e9d6; font-size: 1.02rem; }
.clues li.ok { background: #dff3e4; } .clues li.bad { background: #fde2dd; }
.seat-row { display: flex; gap: 8px; justify-content: center; align-items: stretch; background: #8b5a2b; padding: 10px; border-radius: 14px; margin: 0 auto 12px; max-width: 700px; }
.table-end { display: flex; align-items: center; justify-content: center; min-width: 70px; color: #fff; font-weight: 600; }
.seat { flex: 1; min-width: 92px; min-height: 104px; border: 3px dashed #e0c9a0; border-radius: 12px; background: #fff7e6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--card-ink); }
.seat.filled { border-style: solid; border-color: var(--accent); }
.seat small { color: #8a5a0a; font-weight: 600; } .seat span { font-size: 2rem; } .seat em { font-style: normal; font-size: .8rem; font-weight: 600; }
.guests { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.guest { border: 3px solid transparent; background: #eadfcd; border-radius: 12px; padding: 6px 12px; display: flex; flex-direction: column; align-items: center; font-weight: 600; color: var(--card-ink); min-width: 104px; }
.guest span { font-size: 1.8rem; }
.guest.picked { border-color: var(--accent); background: #ffe2d6; transform: translateY(-4px); }
.guest.seated { background: #f3ede3; color: #5c4a3c; } .guest.seated span { opacity: .55; }
.holes-svg, .bed-svg { width: 100%; max-width: 520px; display: block; margin: 10px auto; border-radius: 12px; }
.hole { cursor: pointer; } .hole:hover path { fill: #4a3a28; }
.carving { font-size: 1.1rem; }
@media (max-width: 760px) { .seat { min-width: 0; } .seat-row { gap: 4px; padding: 8px 6px; } .table-end { flex: none; min-width: 0; width: 38px; text-align: center; line-height: 1.25; font-size: .72rem; } .seat { padding: 0 1px; } .seat em { font-size: .66rem; line-height: 1.1; } .seat small { font-size: .7rem; } .seat span { font-size: 1.6rem; } }

/* Phones held sideways: the scene takes the full height and the HUD moves into a slim side column. */
@media (orientation: landscape) and (max-height: 540px) {
  #game { display: grid; grid-template-columns: 1fr minmax(150px, 22vw); grid-template-rows: auto 1fr; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  #stage-wrap { grid-column: 1; grid-row: 1 / span 2; padding: 4px; }
  #stage { width: min(100%, calc((100dvh - 8px) * 16 / 9)); border-radius: 12px; }
  #topbar { grid-column: 2; grid-row: 1; flex-wrap: wrap; gap: 6px; padding: 6px 8px; min-height: 0; }
  .titles { order: 3; flex-basis: 100%; text-align: left; }
  #chapter { font-size: .85rem; } #room-name { font-size: .78rem; }
  .coins-pill { font-size: 1rem; padding: 4px 12px; margin-right: auto; }
  #bottombar { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; min-height: 0; padding: 4px 8px calc(6px + env(safe-area-inset-bottom)); }
  .bar-row { flex: 1; min-height: 0; flex-direction: column; align-items: stretch; gap: 8px; }
  .tools { order: -1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .icon-btn { min-width: 0; min-height: 44px; font-size: 1.2rem; }
  .icon-btn small { display: block; font-size: .65rem; }
  #inventory { flex: 1; flex-wrap: wrap; overflow-x: hidden; overflow-y: auto; align-content: flex-start; min-height: 0; }
  .item { width: 52px; height: 52px; }
  .inv-empty { font-size: .8rem; }
  #item-info { font-size: .8rem; max-height: 35%; overflow-y: auto; }
}

/* Design Studio on a phone or tablet held upright: room on top, catalogue in the middle, Reveal at the bottom. */
@media (orientation: portrait) {
  .studio { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "room" "controls" "actions"; gap: 8px; }
  .room-wrap { container-type: normal; flex: none; }
  .room-wrap .room-edit { width: 100%; }
  .studio-modal .modal-card { padding: 12px; }
  .studio .budget { font-size: 1rem; }
  .studio .bruno-says { margin: 4px 0 6px; padding: 6px; font-size: .9rem; }
  .studio .bruno-face svg { width: 40px; height: 40px; }
  .studio .btn.big { font-size: 1.05rem; padding: 10px 20px; }
}
@media (orientation: portrait) and (max-height: 700px) { .studio .bruno-face { display: none; } .studio .bruno-says { font-size: .82rem; margin: 2px 0 4px; } .studio-modal h2 { margin-bottom: 4px; } .studio { gap: 6px; } .studio .tabs { gap: 3px; } .studio .tab { padding: 4px 8px; font-size: .78rem; } }
/* ...and held sideways: everything shrinks to fit the short screen. */
@media (orientation: landscape) and (max-height: 540px) {
  .studio-modal { padding: 4px calc(4px + env(safe-area-inset-right)) 4px calc(4px + env(safe-area-inset-left)); }
  .studio-modal .modal-card { height: calc(100dvh - 8px); padding: 8px 10px; border-radius: 16px; }
  .studio-modal h2 { font-size: 1rem; margin-bottom: 4px; }
  .studio { gap: 6px 10px; }
  .studio .budget { font-size: .95rem; }
  .studio .bruno-says { margin: 2px 0 4px; padding: 4px 6px; font-size: .78rem; }
  .studio .bruno-face { display: none; }
  .studio .tab { padding: 4px 9px; min-height: 36px; font-size: .78rem; }
  .studio .btn.big { font-size: 1rem; padding: 8px 18px; }
  .studio .btn { padding: 8px 16px; }
  .sel-name { font-size: .85rem; }
  .tool { min-height: 44px; font-size: 1rem; }
  .tool small { font-size: .6rem; }
}

/* ---------- popups on small screens ---------- */
@media (max-width: 480px) {
  #toast { top: 6px; padding: 6px 14px; font-size: .85rem; } /* the scene is small, so keep toasts from covering it */
  #modals .modal:not(.studio-modal) { padding: 8px; } /* the studio sizes itself */
  .modal-card { padding: 16px 12px; max-height: calc(100dvh - 16px); }
}
/* Upright phones: the tables shrink to share the screen with the tray, so card, table and tray are seen together. */
@media (orientation: portrait) and (max-width: 760px) {
  .tables h3 { margin: 0 0 2px; font-size: .9rem; }
  .card-side, .live-side { padding: 6px; }
  .table-card { max-height: 16dvh; } .table-live { max-height: 25dvh; }
  .card-back { height: 16dvh; max-width: 100%; margin: 0 auto; }
  .tables .tray { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
  .tables .tray-item { width: auto; }
  .tables .tray-item svg { width: 40px; height: 40px; }
}
@media (orientation: portrait) and (max-height: 700px) {
  .modal-card h2 { font-size: 1.25rem; margin-bottom: 6px; }
  .round-title { font-size: 1rem; }
  .clues { margin: 6px auto 10px; } .clues li { padding: 4px 8px; margin: 3px 0; font-size: .9rem; }
  .seat { min-height: 88px; } .guest { padding: 4px 10px; min-width: 92px; } .guest span { font-size: 1.5rem; }
  .tables .tray-item svg { width: 32px; height: 32px; } .table-live { max-height: 23dvh; }
}

/* Phones held sideways: puzzles go side by side, so what you copy from and what you play with fit on one screen. */
@media (orientation: landscape) and (max-height: 540px) {
  #modals .modal:not(.studio-modal) { padding: 4px calc(4px + env(safe-area-inset-right)) 4px calc(4px + env(safe-area-inset-left)); }
  .modal-card { padding: 10px 14px; max-height: calc(100dvh - 8px); border-radius: 16px; }
  .modal-card h2 { font-size: 1.15rem; margin-bottom: 4px; }
  .modal-card h3 { margin: 8px 0 4px; }
  .msg { font-size: .85rem; margin: 6px 0; }
  .modal-hint { grid-column: 1 / -1; margin-top: 4px; } /* the hint line spans side-by-side layouts */
  .modal-hint-btn + h2 { min-height: 40px; display: flex; align-items: center; justify-content: center; } /* content starts below the 💡 */
  .row { margin-top: 8px; }

  /* Tables: Céleste's card on the left, the live table in the middle, the tray on the right, all on one screen. */
  .tables .modal-card { max-width: 900px; height: calc(100dvh - 8px); overflow: hidden; display: grid; gap: 4px 10px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto; grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "head head head" "title title title" "card live tray" "row live tray"; }
  .tables h2 { grid-area: head; font-size: 1rem; margin: 0; }
  .tables .round-title { grid-area: title; font-size: .85rem; }
  .tables-wrap { display: contents; }
  .card-side { grid-area: card; } .live-side { grid-area: live; }
  .card-side, .live-side { display: flex; flex-direction: column; min-height: 0; padding: 6px; }
  .tables h3 { margin: 0 0 2px; font-size: .8rem; }
  .card, .live { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
  .table-card, .table-live { height: 100%; }
  .card-back { width: 100%; max-height: 100%; font-size: 1.4rem; }
  .peek-btn { min-height: 36px; margin-top: 4px; align-self: center; }
  .tables .tray { grid-area: tray; display: grid; grid-template-columns: repeat(2, 64px); align-content: center; gap: 6px; margin: 0; }
  .tables .tray-item { width: 64px; padding: 2px; font-size: .7rem; }
  .tables .tray-item svg { width: 36px; height: 36px; }
  .tables .msg { margin: 4px 0 0; font-size: .8rem; } .card-note { font-size: .75rem; margin-top: 4px; }
  .tables .row { grid-area: row; margin: 0; gap: 6px; align-self: center; }
  .tables .row .btn { padding: 6px 12px; min-height: 36px; font-size: .85rem; }

  /* Seating: clues on the left, the table and guests on the right. */
  .seating .modal-card { max-width: 900px; display: grid; gap: 4px 12px; align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    grid-template-areas: "head head" "title title" "clues seats" "clues guests" "clues msg" "clues row"; }
  .seating h2 { grid-area: head; font-size: 1rem; margin: 0; }
  .seating .round-title { grid-area: title; font-size: .85rem; }
  .clues { grid-area: clues; margin: 0; } .clues li { padding: 4px 8px; margin: 0 0 4px; font-size: .82rem; }
  .seat-row { grid-area: seats; margin: 0; gap: 4px; padding: 6px; }
  .table-end { flex: none; min-width: 0; width: 32px; text-align: center; line-height: 1.2; font-size: .62rem; }
  .seat { min-width: 0; min-height: 76px; padding: 0 1px; } .seat span { font-size: 1.4rem; }
  .seat em { font-size: .66rem; line-height: 1.1; } .seat small { font-size: .7rem; }
  .guests { grid-area: guests; gap: 6px; }
  .guest { min-width: 0; padding: 3px 10px; font-size: .8rem; } .guest span { font-size: 1.3rem; }
  .seating .msg { grid-area: msg; margin: 2px 0; }
  .seating .row { grid-area: row; margin: 0; }

  /* Holes and bed: words on the left, the picture on the right. */
  .holes-modal .modal-card, .bedfit .modal-card { display: grid; gap: 4px 14px; align-items: center; align-content: center; grid-template-columns: minmax(0, 1fr) auto; }
  .holes-modal .modal-card { grid-template-areas: "head pic" "carving pic" "msg pic"; }
  .bedfit .modal-card { grid-template-areas: "head pic" "text pic" "row pic" "msg pic"; }
  .holes-modal h2, .bedfit h2 { grid-area: head; }
  .carving { grid-area: carving; margin: 0; } .bedfit p:not(.msg) { grid-area: text; margin: 0; }
  .holes-modal .msg, .bedfit .msg { grid-area: msg; }
  .bedfit .row { grid-area: row; margin: 0; }
  .holes-svg { grid-area: pic; margin: 0; width: min(66vw, calc((100dvh - 28px) * 504 / 260)); }
  .bed-view { grid-area: pic; } .bed-svg { margin: 0; width: min(45vw, calc((100dvh - 28px) * 300 / 220)); }
  .holes-modal .modal-card { padding-right: 56px; } /* room for the ✕ beside the holes */
  .holes-modal .modal-x, .bedfit .modal-x { top: 6px; right: 6px; }

  /* Reveal: the photo on the left and the Ta-da and button beside it, so nobody has to scroll to carry on. */
  .reveal { display: flex; gap: 14px; align-items: center; }
  .reveal-stage { flex: none; width: min(68%, calc((100dvh - 28px) * 16 / 9)); }
  .reveal-after { flex: 1; min-width: 0; } .reveal-after h2 { font-size: 1.1rem; }

  /* Riddle notes scroll if Henri wrote a long one. */
  .riddle-note .modal-card { overflow-y: auto; }
  .parchment { padding: 10px 16px; font-size: 1rem; } .parchment p { line-height: 1.35; margin: 6px 0; }
}

/* ---------- accessibility ---------- */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* A clear ring on whatever the keyboard is on: gold on the dark game, blue on the cream windows. */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.modal-card :focus-visible { outline-color: #1a5fb4; }
.reveal-modal .modal-card :focus-visible { outline-color: var(--gold); }
.modal-card:focus { outline: none; }
.hs:focus-visible { outline: none; fill: rgba(255,255,255,.16); stroke: var(--gold); stroke-width: 5; }
.slot:focus-visible { outline: none; stroke: #1a5fb4; stroke-width: 6; stroke-dasharray: none; }
.hole:focus-visible { outline: none; } .hole:focus-visible path { stroke: var(--gold); stroke-width: 5; }
.room-edit .fi:focus-visible { outline: none; } .room-edit .fi:focus-visible .fi-hit { stroke: #fff; stroke-width: 4; stroke-dasharray: 6 4; }
/* The before & after slider is an invisible range input on top of the pictures, so the ring goes round the pictures. */
.ba:focus-within { outline: 3px solid var(--gold); outline-offset: 2px; }
.ba input:focus-visible { outline: none; }

/* Less movement for players who asked their device for it: no shaking, bobbing, unfurling or sliding curtains. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}

/* ---------- fingers ---------- */
/* Fingers need bigger targets than a mouse: 44px, or 40px on a short sideways phone. Last, so it wins. */
@media (pointer: coarse) {
  .btn, .link, .peek-btn, .tray-item, .tab { min-height: 44px; }
  .modal-x, .modal-hint-btn { width: max(44px, 2.2em); height: max(44px, 2.2em); }
}
@media (pointer: coarse) and (orientation: landscape) and (max-height: 540px) {
  .btn, .link, .peek-btn, .tables .row .btn, .studio .tab { min-height: 40px; }
  .modal-x, .modal-hint-btn { width: 40px; height: 40px; }
}