/* Home Is Where the Clues Are (Clue Rooms). Snack Quests palette plus white. */
@font-face { font-family: 'Bebas Neue'; src: url('assets/fonts/BebasNeue-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible'; src: url('assets/fonts/AtkinsonHyperlegible-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible'; src: url('assets/fonts/AtkinsonHyperlegible-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
  --plum: #411D4B; --purple: #77398E; --aqua: #93CCD3; --yellow: #E3DB49; --white: #FFFFFF;
  --plum-deep: #2a1131;
  --head: 'Bebas Neue', 'Oswald', system-ui, sans-serif;
  --body: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --hud-h: 92px;
  --btn-h: 58px;
  --round: 58px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--plum); color: var(--plum); font-family: var(--body);
  overflow: hidden; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
body { position: fixed; inset: 0; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }
.kb button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }   /* ring for keyboard users only */
button:focus { outline: none; }
img { -webkit-user-drag: none; user-select: none; }

/* every GUI panel is a nine-slice border-image; border-style solid keeps it painting everywhere */
#riddle-bar, #toast, .card, .riddle-box, .piece-art, .verse, #rotate-hint { border-style: solid; border-width: 0; }

/* ---------- HUD ---------- */
#hud { position: absolute; left: 0; right: 0; top: 0; height: var(--hud-h); z-index: 20;
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right));
  background: linear-gradient(var(--plum), #3a1843); box-shadow: 0 3px 0 var(--plum-deep), 0 6px 14px rgba(20, 6, 26, .35); }
#riddle-bar { flex: 1 1 auto; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: center;
  border-image: url('assets/gui/inner_panel_9s.png') 25 fill / 12px stretch; padding: 4px 14px; text-align: left; }
#riddle-bar .rb-label { font-family: var(--head); font-size: 17px; letter-spacing: .06em; color: var(--purple); line-height: 1; }
#riddle-bar .rb-text { font-size: 15px; line-height: 1.25; color: var(--plum); font-weight: 700;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.rbtn { position: relative; flex: 0 0 auto; width: var(--round); height: calc(var(--round) * 1.058);
  background: url('assets/gui/btn_round_purple_unpushed.png') center / contain no-repeat; }
.rbtn:active, .rbtn.pressed { background-image: url('assets/gui/btn_round_purple_pushed.png'); }
.rbtn img { position: absolute; left: 22%; top: 18%; width: 56%; height: 56%; pointer-events: none; }
.rbtn.aqua { background-image: url('assets/gui/btn_round_aqua_unpushed.png'); }
.rbtn.aqua:active { background-image: url('assets/gui/btn_round_aqua_pushed.png'); }
.rbtn.yellow { background-image: url('assets/gui/btn_round_yellow_unpushed.png'); }
.rbtn.yellow:active { background-image: url('assets/gui/btn_round_yellow_pushed.png'); }

#pieces-btn { flex: 0 0 auto; position: relative; height: 56px; width: calc(56px * 391 / 153);
  background: url('assets/gui/number_panel_purple.png') center / contain no-repeat; }
#pieces-btn svg { position: absolute; left: 9.5%; top: 25%; width: 23%; height: 44%; }
#pieces-btn .count { position: absolute; left: 35.3%; right: 4.9%; top: 27.5%; bottom: 21.5%; display: flex;
  align-items: center; justify-content: center; font-family: var(--head); font-size: 27px; color: var(--yellow);
  letter-spacing: .04em; line-height: 1; }
#pieces-btn.bump { animation: bump .5s ease; }
@keyframes bump { 30% { transform: scale(1.18); } 60% { transform: scale(.95); } }

/* ---------- room viewport ---------- */
#viewport { position: absolute; left: 0; right: 0; top: var(--hud-h); bottom: 0; overflow: hidden;
  background: var(--aqua); touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
#viewport.dragging { cursor: grabbing; }
#world { position: absolute; left: 0; top: 0; width: 5951px; height: 1080px; transform-origin: 0 0; will-change: transform; }
#room { position: absolute; left: 0; top: 0; width: 5951px; height: 1080px; display: block; pointer-events: none; }
#boy { position: absolute; left: 0; top: 0; background-repeat: no-repeat; pointer-events: none; transform-origin: 50% 50%; }
#boy.flip { transform: scaleX(-1); }
#tap-ring { position: absolute; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%;
  border: 8px solid var(--yellow); opacity: 0; pointer-events: none; }
#tap-ring.go { animation: ring .55s ease-out; }
@keyframes ring { 0% { transform: scale(.3); opacity: .95; } 100% { transform: scale(1.4); opacity: 0; } }
.pan { position: absolute; top: 50%; margin-top: calc(var(--round) * -.53); z-index: 5; }
#pan-left { left: max(10px, env(safe-area-inset-left)); }
#pan-right { right: max(10px, env(safe-area-inset-right)); }
.pan[disabled] { opacity: .35; pointer-events: none; }
/* up / down panning (kitchen on wide phones: the room fills the width and scrolls vertically) */
.pan-v { display: none; left: auto; right: max(10px, env(safe-area-inset-right)); }
.pan-y .pan-v { display: block; }
#pan-up { margin-top: calc(var(--round) * -1.25); }
#pan-down { margin-top: calc(var(--round) * .2); }
#pan-up img { transform: rotate(-90deg); }
#pan-down img { transform: rotate(90deg); }
.no-pan-x #pan-left, .no-pan-x #pan-right { display: none; }

/* debug overlay */
#debug-layer { position: absolute; inset: 0; pointer-events: none; display: none; }
.debug #debug-layer { display: block; }
.hs-box { position: absolute; border: 6px solid var(--yellow); background: rgba(227, 219, 73, .16); }
.hs-box.decoy { border: 6px dashed var(--aqua); background: rgba(147, 204, 211, .18); }
.hs-box.exit { border: 6px solid var(--aqua); background: rgba(147, 204, 211, .28); }
.hs-box.target { border-color: #fff; box-shadow: 0 0 0 6px var(--plum); }
.hs-label { position: absolute; left: 0; top: 0; transform: translateY(-100%); white-space: nowrap; padding: 4px 10px;
  font: 700 30px/1 var(--body); color: #fff; background: var(--plum); }
.hs-stand { position: absolute; width: 18px; height: 60px; margin-left: -9px; background: var(--plum); border: 3px solid #fff; }
#debug-readout { position: absolute; left: 8px; bottom: 8px; z-index: 6; display: none; padding: 6px 10px; border-radius: 6px;
  font: 700 13px/1.3 var(--body); color: #fff; background: rgba(65, 29, 75, .85); pointer-events: none; }
.debug #debug-readout { display: block; }

/* ---------- toast (wrong tap) ---------- */
#toast { position: absolute; left: 50%; top: calc(var(--hud-h) + 12px); z-index: 30; transform: translate(-50%, -20px);
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; display: flex; align-items: center; gap: 12px;
  max-width: min(92vw, 520px); padding: 6px 18px 6px 6px; border-image: url('assets/gui/inner_panel_9s.png') 25 fill / 12px stretch;
  filter: drop-shadow(0 4px 0 var(--plum)) drop-shadow(0 8px 12px rgba(20, 6, 26, .35)); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast .ticon { flex: 0 0 auto; width: 48px; height: 51px; background: url('assets/gui/btn_round_purple_unpushed.png') center / contain no-repeat; position: relative; }
#toast .ticon img { position: absolute; left: 22%; top: 18%; width: 56%; height: 56%; }
#toast p { margin: 0; font-weight: 700; font-size: 17px; line-height: 1.25; color: var(--plum); }

/* ---------- modal cards ---------- */
.overlay { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  padding: 14px; padding-top: max(38px, env(safe-area-inset-top)); background: rgba(42, 17, 49, .62);
  opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility 0s linear .22s; }
.overlay:not(.open) { pointer-events: none; }
.overlay.open { opacity: 1; visibility: visible; transition: opacity .22s ease; }
.card { position: relative; width: min(560px, 100%); max-height: 100%; display: flex; flex-direction: column;
  border-image: url('assets/gui/panel_purple_9s.png') 116 fill / 46px stretch; padding: 50px 26px 26px;
  filter: drop-shadow(0 10px 18px rgba(20, 6, 26, .45)); transform: scale(.94); transition: transform .22s ease; }
.overlay.open .card { transform: none; }
.card .scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; flex: 1 1 auto; padding: 4px 2px; }
.card-foot { flex: 0 0 auto; }
.card-foot:empty { display: none; }
.card-foot .btns { margin-top: 0; padding-top: 10px; border-top: 2px solid rgba(65, 29, 75, .12); }
.ribbon { position: absolute; left: 50%; top: -18px; transform: translateX(-50%); height: 58px; min-width: 62%; max-width: 104%;
  border-style: solid; border-width: 0 76px; border-image: url('assets/gui/ribbon_yellow.png') 0 200 fill / 0 76px stretch;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 7px; white-space: nowrap; }
.ribbon h2 { margin: 0; font-family: var(--head); font-weight: 400; font-size: 34px; line-height: 1; letter-spacing: .04em; color: var(--plum); }
.card .close { position: absolute; right: -8px; top: -14px; --round: 50px; }
.card h3 { margin: 6px 0 6px; font-family: var(--head); font-weight: 400; font-size: 30px; line-height: 1.05; letter-spacing: .03em; color: var(--purple); text-align: center; }
.card p { margin: 0 0 10px; font-size: 17px; line-height: 1.4; }
.card .lead { text-align: center; }
.riddle-box { border-image: url('assets/gui/inner_panel_9s.png') 25 fill / 14px stretch; padding: 12px 16px; margin: 8px 0 4px; }
.riddle-box .rl { font-family: var(--head); font-size: 20px; letter-spacing: .06em; color: var(--purple); margin: 0 0 2px; }
.riddle-box .rt { font-size: 19px; line-height: 1.4; font-weight: 700; margin: 0; color: var(--plum); }
.found-row { display: flex; align-items: center; gap: 14px; justify-content: center; margin: 2px 0 6px; }
.found-row img.tick { width: 52px; height: 52px; flex: 0 0 auto; }
.found-row h3 { margin: 0; text-align: left; }
.piece-row { display: flex; align-items: center; gap: 16px; justify-content: center; margin: 6px 0 4px; }
.piece-art { flex: 0 0 auto; width: 128px; height: 100px; display: flex; align-items: center; justify-content: center;
  border-image: url('assets/gui/inner_panel_9s.png') 25 fill / 12px stretch; }
.piece-art canvas { max-width: 118px; max-height: 92px; animation: pop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { 0% { transform: scale(.2) rotate(-25deg); } 100% { transform: none; } }
.piece-info { min-width: 0; }
.piece-info .pl { font-family: var(--head); font-size: 24px; letter-spacing: .04em; color: var(--plum); line-height: 1.05; }
.slots { display: flex; gap: 3px; margin-top: 6px; flex-wrap: wrap; }
.slots img { width: 24px; height: 24px; padding: 3px; border-radius: 6px; background: var(--purple); }
.slots img.got { background: var(--aqua); }
.btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.btn { min-width: 150px; height: var(--btn-h); padding: 0 22px 5px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-style: solid; border-width: 0; border-image: url('assets/gui/btn_long_yellow_unpushed.png') 56 40 fill / calc(var(--btn-h) / 2) 21px stretch;
  font-family: var(--head); font-size: 27px; letter-spacing: .05em; color: var(--plum); white-space: nowrap; }
.btn:active { border-image-source: url('assets/gui/btn_long_yellow_pushed.png'); }
.btn.purple { border-image-source: url('assets/gui/btn_long_purple_unpushed.png'); color: #fff; }
.btn.purple:active { border-image-source: url('assets/gui/btn_long_purple_pushed.png'); }
.btn.aqua { border-image-source: url('assets/gui/btn_long_aqua_unpushed.png'); }
.btn.aqua:active { border-image-source: url('assets/gui/btn_long_aqua_pushed.png'); }
.btn img { width: 26px; height: 26px; }
.answer-img { display: block; width: 100%; max-height: 44vh; object-fit: cover; border-radius: 10px; border: 3px solid var(--plum); margin: 4px 0 10px; }
.verse { border-image: url('assets/gui/inner_panel_9s.png') 25 fill / 14px stretch; padding: 12px 16px; margin: 10px 0; }
.verse p { margin: 0; }
.verse .ref { margin-top: 6px; font-style: normal; font-weight: 700; color: var(--purple); text-align: right; }
.tag.alt { background: var(--purple); color: #fff; }
.tag { display: inline-block; font: 700 12px/1 var(--body); letter-spacing: .04em; padding: 4px 8px; border-radius: 4px;
  background: var(--plum); color: var(--yellow); text-transform: uppercase; }
.card.win { width: min(640px, 100%); }
.win-stars { display: flex; justify-content: center; gap: 8px; margin: 0 0 4px; }
.win-stars img { width: 40px; height: 40px; filter: drop-shadow(0 3px 0 var(--plum)); }
.win-stars img:nth-child(2) { width: 54px; height: 54px; margin-top: -8px; }

/* ---------- doors between rooms ---------- */
.door-sign { position: absolute; z-index: 2; transform: translate(-50%, -50%) scale(var(--inv, 1)); transform-origin: 50% 50%;
  pointer-events: none; white-space: nowrap; padding: 6px 14px 3px; border: 3px solid var(--plum); border-radius: 8px;
  font-family: var(--head); font-size: 26px; line-height: 1; letter-spacing: .06em; color: var(--plum); background: var(--yellow);
  box-shadow: 0 3px 0 var(--plum-deep), 0 6px 10px rgba(20, 6, 26, .3); }
.door-sign::after { content: ''; position: absolute; left: 50%; bottom: -11px; margin-left: -8px; border: 8px solid transparent;
  border-top-color: var(--plum); border-bottom: 0; }
#fade { position: absolute; inset: 0; z-index: 60; background: var(--plum); opacity: 0; pointer-events: none; transition: opacity .35s ease; }
#fade.on { opacity: 1; pointer-events: auto; }

/* ---------- the house card ---------- */
.rooms { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; }
.room-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; background: #e2f2f5; border: 3px solid var(--aqua); }
.room-row.here { border-color: var(--purple); background: #f4eafa; }
.room-row.done { background: #eef8e6; border-color: var(--aqua); }
.room-row.soon { opacity: .62; background: #ece6ef; border-color: #cbbfd2; }
.rr-icon { flex: 0 0 auto; width: 30px; height: 30px; padding: 4px; border-radius: 7px; background: var(--purple); }
.room-row.done .rr-icon { background: var(--aqua); }
.rr-info { flex: 1 1 auto; min-width: 0; }
.card .rr-name { margin: 0; font-family: var(--head); font-size: 25px; line-height: 1.05; letter-spacing: .04em; color: var(--plum); }
.card .rr-status { margin: 0; font-size: 15px; line-height: 1.25; color: var(--purple); font-weight: 700; }
.room-row .btn { min-width: 0; height: 44px; font-size: 22px; padding: 0 16px 4px; --btn-h: 44px; }
.house-done { margin-top: 4px; }
.house-title { margin: 0 0 4px; }

/* ---------- jigsaw overlay ---------- */
#jigsaw { position: absolute; inset: 0; z-index: 35; display: flex; flex-direction: column; padding: 10px 12px 12px;
  padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right));
  background: radial-gradient(ellipse at 50% 30%, #5a2a69, var(--plum) 70%); visibility: hidden; opacity: 0; transition: opacity .22s ease; }
#jigsaw.open { visibility: visible; opacity: 1; }
#jigsaw .jhead { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; min-height: 60px; }
#jigsaw .jtitle { flex: 1 1 auto; min-width: 0; color: #fff; }
#jigsaw .jtitle h2 { margin: 0; font-family: var(--head); font-weight: 400; font-size: 32px; letter-spacing: .05em; color: var(--yellow); line-height: 1; }
#jigsaw .jtitle p { margin: 2px 0 0; font-size: 15px; line-height: 1.3; color: #fff; }
.puzzle-host { flex: 1 1 auto; min-height: 0; position: relative; display: none; }
.puzzle-host.on { display: block; }

/* ---------- rotate hint ---------- */
#rotate-hint { position: absolute; left: 50%; bottom: 14px; z-index: 25; transform: translateX(-50%); display: none; align-items: center; gap: 10px;
  padding: 8px 10px 8px 14px; border-image: url('assets/gui/inner_panel_9s.png') 25 fill / 12px stretch; font-weight: 700; font-size: 15px;
  width: max-content; max-width: 92vw; filter: drop-shadow(0 3px 0 var(--plum)); }
#rotate-hint button { --round: 40px; }
.portrait #rotate-hint.show { display: flex; }

/* ---------- sizes ---------- */
@media (max-height: 500px) {           /* landscape phones */
  :root { --hud-h: 66px; --btn-h: 48px; --round: 48px; }
  #riddle-bar .rb-label { font-size: 14px; }
  #riddle-bar .rb-text { font-size: 13.5px; line-height: 1.18; -webkit-line-clamp: 2; }
  #hud { padding-top: 6px; padding-bottom: 6px; }
  #riddle-bar { padding: 2px 12px; }        /* label + two full lines fit in the 66 px bar */
  #pieces-btn { height: 44px; width: calc(44px * 391 / 153); }
  #pieces-btn .count { font-size: 22px; }
  .card { padding: 40px 20px 16px; border-image-width: 36px; }
  .ribbon { height: 48px; border-width: 0 62px; border-image-width: 0 62px; top: -16px; padding-top: 6px; }
  .ribbon h2 { font-size: 28px; }
  .card h3 { font-size: 25px; }
  .card p { font-size: 15px; margin-bottom: 6px; }
  .riddle-box { padding: 8px 12px; margin: 4px 0 2px; }
  .riddle-box .rt { font-size: 16px; }
  .riddle-box .rl { font-size: 17px; }
  .btn { font-size: 23px; min-width: 130px; }
  .btns { margin-top: 8px; }
  .card-foot .btns { padding-top: 8px; }
  .door-sign { font-size: 21px; padding: 5px 11px 2px; }
  .card .rr-name { font-size: 21px; }
  .card .rr-status { font-size: 13px; }
  .room-row { padding: 5px 10px; }
  .rooms { gap: 5px; }
  .overlay { padding: 8px; padding-top: 26px; }
  .found-row img.tick { width: 40px; height: 40px; }
  .piece-art { width: 104px; height: 80px; }
  .piece-art canvas { max-width: 96px; max-height: 72px; }
  #jigsaw { padding-top: 6px; padding-bottom: 6px; }
  #jigsaw .jhead { min-height: 50px; }
  #jigsaw .jtitle h2 { font-size: 26px; }
  #jigsaw .jtitle p { font-size: 13px; }
  .card.landscape-wide { width: min(760px, 100%); }
  .card.win.landscape-wide { width: min(820px, 100%); }
  .card.win p { font-size: 14px; line-height: 1.35; margin-bottom: 5px; }
  .card.win .win-stars img { width: 28px; height: 28px; }
  .card.win .win-stars img:nth-child(2) { width: 36px; height: 36px; margin-top: -4px; }
  .card.win .verse { margin-top: 2px; }
  .card.win .verse p { font-size: 14px; line-height: 1.3; }
  .card.win .btns { gap: 8px; margin-top: 6px; }
  .card.win .btn { --btn-h: 42px; font-size: 21px; min-width: 120px; }
  .card.landscape-wide .split { display: flex; gap: 16px; align-items: flex-start; }
  .card.landscape-wide .split > * { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 560px) {            /* portrait phones */
  .card .rr-name { font-size: 22px; }
  .room-row { gap: 10px; padding: 8px 10px; }
  .room-row .tag { white-space: nowrap; }
  :root { --hud-h: 150px; }
  #hud { flex-wrap: wrap; align-content: center; row-gap: 8px; }
  #riddle-bar { order: 5; flex: 1 1 100%; height: 84px; }
  #riddle-bar .rb-text { -webkit-line-clamp: 3; font-size: 14px; }
  #pieces-btn { margin-left: auto; margin-right: auto; }
  .card { padding: 44px 18px 18px; border-image-width: 38px; }
  .ribbon h2 { font-size: 29px; }
  .btn { min-width: 0; flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .overlay, .card, #toast, #jigsaw, #fade { transition: none; }
  #tap-ring.go, .piece-art canvas, #pieces-btn.bump { animation: none; }
}