/* ===========================================================================
   מפת האי האבוד — kids treasure-hunt PWA
   Mediterranean map / sunken-treasure aesthetic. RTL, touch-first, 375px up.
   =========================================================================== */

:root {
  /* sea + parchment */
  --sea-900: #062B38;
  --sea-800: #0A3D4E;
  --sea-700: #0E5266;
  --sea-600: #12697F;
  --foam:    #7FD8D0;

  --sand-100: #FFF8EA;
  --sand-200: #F7E7C8;
  --sand-300: #E8CFA3;
  --ink:      #2A1E12;
  --ink-soft: #6B5A45;

  --gold:   #FFC24B;
  --gold-d: #E09A18;
  --coral:  #FF6B5A;
  --violet: #A78BFA;
  --teal:   #2DD4BF;
  --green:  #4ADE80;

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;

  --shadow-card: 0 8px 0 rgba(0,0,0,.16), 0 14px 30px rgba(0,0,0,.28);
  --shadow-pop:  0 4px 0 rgba(0,0,0,.22);

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  overscroll-behavior: none;
}

body {
  font-family: 'Rubik', 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--sea-900);
  color: var(--sand-100);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

/* deep-sea backdrop with drifting light */
#bg {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, #17788F 0%, var(--sea-800) 45%, var(--sea-900) 100%);
  overflow: hidden;
}
#bg::after {
  content: ''; position: absolute; inset: -40%;
  background:
    radial-gradient(closest-side, rgba(127,216,208,.16), transparent 70%) 20% 25%/45% 45% no-repeat,
    radial-gradient(closest-side, rgba(255,194,75,.12), transparent 70%) 80% 70%/50% 50% no-repeat;
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: translate3d(-3%, -2%, 0) } to { transform: translate3d(4%, 3%, 0) } }

#app {
  position: relative; z-index: 1;
  min-height: 100%;
  display: flex; flex-direction: column;
  padding: calc(var(--safe-t) + 8px) 16px calc(var(--safe-b) + 20px);
  max-width: 560px; margin-inline: auto;
}

/* ---------------------------------------------------------------- typography */
h1, h2, h3 { margin: 0; font-weight: 900; line-height: 1.15; }
h1 { font-size: 30px; }
h2 { font-size: 24px; }
p  { margin: 0; font-size: 17px; line-height: 1.6; color: var(--sand-200); }
.muted { color: #A9C4CC; font-size: 14px; }

/* ------------------------------------------------------------------ topbar */
.topbar {
  display: flex; align-items: center; gap: 10px;
  min-height: 48px; margin-bottom: 12px;
}
.topbar .spacer { flex: 1; }

.iconbtn {
  width: 44px; height: 44px; flex: 0 0 44px;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: var(--sand-100);
  font-size: 20px; line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, opacity .2s ease;
}
.iconbtn:active { transform: scale(.9); }
.iconbtn.off { opacity: .38; }

.stars {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,194,75,.16);
  border: 2px solid rgba(255,194,75,.35);
  border-radius: 999px;
  padding: 6px 14px;
  min-height: 44px;                     /* it is a real touch target now */
  font-weight: 800; font-size: 16px; color: var(--gold);
  touch-action: manipulation;
  -webkit-touch-callout: none;          /* iOS raises a callout on long-press */
}
.stars .sv { position: relative; z-index: 1; }
/* fills while held, so it is obvious the press registered */
.starfill {
  position: absolute; inset: 0; z-index: 0;
  background: rgba(255,194,75,.45);
  transform: scaleX(0); transform-origin: right center;
}
.stars.holding .starfill { transform: scaleX(1); transition: transform 1.2s linear; }

/* parent code keypad */
.pindots { display: flex; gap: 12px; justify-content: center; }
.pindots i {
  width: 16px; height: 16px; border-radius: 50%; display: block;
  background: #DDE5E8; transition: transform .15s ease, background .15s ease;
}
.pindots i.on { background: var(--gold-d); transform: scale(1.15); }
.pindots.bad i { background: var(--coral); animation: shake .35s; }
.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.pinkey {
  min-height: 62px; border: 3px solid #E2E8EB; border-radius: var(--r-md);
  background: #fff; color: var(--ink); font-family: inherit;
  font-size: 26px; font-weight: 900; cursor: pointer;
}
.pinkey:active { transform: scale(.93); background: #F4F8FA; }
.pinkey.del { font-size: 22px; color: var(--ink-soft); }

/* -------------------------------------------------------------------- card */
.card {
  background: linear-gradient(180deg, var(--sand-100), var(--sand-200));
  color: var(--ink);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: var(--shadow-card);
  border: 3px solid rgba(255,255,255,.6);
}
.card p { color: var(--ink-soft); }
.card h1, .card h2 { color: var(--ink); }

/* ------------------------------------------------------------------ button */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 60px;
  border: none; border-radius: var(--r-md);
  font-family: inherit; font-weight: 800; font-size: 19px;
  color: #24160B;
  background: linear-gradient(180deg, #FFD273, var(--gold));
  box-shadow: 0 5px 0 var(--gold-d);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, filter .2s ease;
  padding: 12px 18px;
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--gold-d); }
.btn[disabled] { filter: grayscale(.6) brightness(.85); pointer-events: none; }
.btn.ghost {
  background: rgba(255,255,255,.10); color: var(--sand-100);
  box-shadow: none; border: 2px solid rgba(255,255,255,.22);
  min-height: 52px; font-size: 17px;
}
.btn.coral { background: linear-gradient(180deg, #FF8B7C, var(--coral)); box-shadow: 0 5px 0 #C9432F; color: #fff; }
.btn.green { background: linear-gradient(180deg, #7BEBA3, var(--green)); box-shadow: 0 5px 0 #22A557; color: #0C3E22; }

/* ---------------------------------------------------------------- intro/hero */
.crest {
  width: 108px; height: 108px; margin: 0 auto;
  border-radius: 50%;
  display: grid; place-items: center; font-size: 54px; line-height: 1;
  background: radial-gradient(circle at 50% 35%, #FFE9A8, var(--gold));
  box-shadow: 0 0 0 6px rgba(255,194,75,.22), 0 10px 26px rgba(0,0,0,.22);
}
.kicker-dark {
  font-size: 13px; font-weight: 800; letter-spacing: .18em;
  color: var(--ink-soft); text-transform: none;
}
.subtitle-dark { font-size: 16px; font-weight: 800; color: var(--gold-d); letter-spacing: .08em; }

/* the "book inside the series" plate — the game is a series, this trip is book 1 */
.bookplate {
  border: 2px dashed #D9C39A; border-radius: var(--r-md);
  background: rgba(255,194,75,.10);
  padding: 12px 14px; text-align: center;
}
.bookplate .bookno {
  font-size: 11px; font-weight: 800; letter-spacing: .22em; color: var(--ink-soft);
}
.bookplate .booktitle {
  font-size: 19px; font-weight: 900; color: var(--ink); margin-top: 3px; line-height: 1.3;
}
.kicker2 { font-size: 12px; font-weight: 600; color: #8FB0BA; margin-top: 3px; }

/* optional illustrated artwork (see PROMPTS.md) */
#bg.art { background-size: cover; background-position: center top; }
#bg.art::after { opacity: .55; }   /* the drifting light is subtler over artwork */
.band.art {
  background-size: cover; background-position: center;
  min-height: 200px;                /* give the illustration room to read */
  display: flex; flex-direction: column; justify-content: flex-end;
}
.band.art .b-emoji { font-size: 44px; }
.rule {
  width: 120px; height: 4px; border-radius: 2px; margin: 2px auto;
  background: linear-gradient(90deg, transparent, var(--gold-d), transparent);
}
.lead { font-size: 19px !important; font-weight: 700; color: var(--ink) !important; line-height: 1.5; }
.bigstars { font-size: 34px; font-weight: 900; color: var(--gold-d); }
.hero-emoji { font-size: 74px; line-height: 1; text-align: center; }
.center { text-align: center; }

/* visual fact chips — used INSTEAD of paragraphs */
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 999px;
  background: #F1F5F7; border: 2px solid #E2E8EB;
  font-size: 14px; font-weight: 700; color: var(--ink);
}
.chip .ce { font-size: 19px; line-height: 1; }
.chip.chip-on { background: #E9FBEF; border-color: #9BE7B7; }

/* team strip on the intro */
.teamstrip { display: flex; gap: 10px; }
.teammate {
  flex: 1; text-align: center; padding: 14px 6px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.10);
  border: 2px solid rgba(255,255,255,.18);
}
.teammate.violet { border-color: var(--violet); }
.teammate.teal   { border-color: var(--teal); }
.teammate.coral  { border-color: var(--coral); }
.teammate .tav { font-size: 32px; line-height: 1; }
.teammate .tnm { font-weight: 900; font-size: 17px; margin-top: 5px; }
.teammate .ttr { font-size: 12px; color: #A9C4CC; font-weight: 600; }

/* per-task progress pips */
.taskprog { display: flex; gap: 6px; justify-content: center; margin-bottom: 4px; }
.taskprog i {
  width: 26px; height: 6px; border-radius: 3px; display: block;
  background: rgba(255,255,255,.20);
}
.taskprog i.on  { background: var(--green); }
.taskprog i.now { background: var(--gold); }

.nextlabel {
  font-size: 12px; font-weight: 800; letter-spacing: .2em;
  color: var(--ink-soft); margin-top: 8px;
}

@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(255,194,75,.10) } }
.btn.ghost.dark { color: var(--ink); border-color: #E2E8EB; background: #F7FAFB; }
.stack   { display: flex; flex-direction: column; gap: 16px; }
.stack-s { display: flex; flex-direction: column; gap: 10px; }
.grow    { flex: 1; }
.pre     { white-space: pre-line; }

/* ------------------------------------------------------------------- map */
.maptitle { text-align: center; margin-bottom: 4px; }
.maptitle .kicker { font-size: 13px; letter-spacing: .12em; color: var(--foam); font-weight: 700; }

/* the map, assembling strip by strip */
.mappanel {
  position: relative;
  aspect-ratio: 760 / 524;
  border-radius: var(--r-md);
  overflow: hidden;
  background-size: cover; background-position: center;
  background-color: #E8D9B8;
  border: 3px solid rgba(255,194,75,.45);
  box-shadow: inset 0 0 40px rgba(80,50,0,.25), 0 8px 24px rgba(0,0,0,.3);
}
.mapcover { position: absolute; inset: 0; display: grid; }
.mapslice {
  position: relative;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #12697F, #0A3D4E);
  border-inline-start: 1px solid rgba(255,255,255,.10);
  transform-origin: center;
  transition: opacity .55s ease, transform .55s cubic-bezier(.3,1.2,.4,1);
}
.mapslice .ms { font-size: 20px; font-weight: 900; color: rgba(255,255,255,.35); }
.mapslice.off { opacity: 0; transform: scaleY(1.15); pointer-events: none; }
.mapcap {
  position: absolute; inset-inline: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px; font-size: 13px; font-weight: 800; color: var(--sand-100);
  background: linear-gradient(to top, rgba(6,43,56,.88), transparent);
}
@keyframes pop { from { transform: scale(.4) rotate(-14deg); opacity: 0 } to { transform: none; opacity: 1 } }

/* rank strip */
.rankbar {
  background: rgba(255,255,255,.09);
  border: 2px solid rgba(255,255,255,.16);
  border-radius: var(--r-md);
  padding: 12px 14px;
}
.rankrow { display: flex; align-items: center; gap: 9px; }
.rankrow .re { font-size: 24px; line-height: 1; }
.rankrow .rn { flex: 1; font-weight: 900; font-size: 17px; color: var(--sand-100); }
.rankrow .rs { font-weight: 800; font-size: 15px; color: var(--gold); }
.rmeter {
  height: 10px; border-radius: 5px; margin-top: 9px; overflow: hidden;
  background: rgba(0,0,0,.28);
}
.rfill {
  height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, var(--gold-d), var(--gold));
  transform-origin: right center;
  transition: transform .6s cubic-bezier(.2,.9,.3,1);
}
.rnext { font-size: 12px; color: #A9C4CC; margin-top: 7px; font-weight: 600; }

/* treasure chest */
.chest {
  display: grid; grid-template-columns: auto 1fr; gap: 12px 14px;
  width: 100%; padding: 16px; border: 3px dashed rgba(255,194,75,.45);
  border-radius: var(--r-md); background: rgba(255,194,75,.10);
  font-family: inherit; text-align: start; cursor: pointer; color: inherit;
  transition: transform .12s ease;
}
.chest:active { transform: scale(.98); }
.chest.open {
  border-style: solid; border-color: var(--gold);
  background: linear-gradient(160deg, rgba(255,194,75,.30), rgba(255,107,90,.18));
  animation: pulse 1.6s ease-in-out infinite;
}
.chest-emoji { font-size: 36px; line-height: 1; align-self: center; }
.chest-title { font-weight: 900; font-size: 18px; color: var(--sand-100); }
.chest-sub { font-size: 13px; color: #CBDDE2; font-weight: 600; margin-top: 2px; }
.chest-meter {
  grid-column: 1 / -1; height: 8px; border-radius: 4px; overflow: hidden;
  background: rgba(0,0,0,.28);
}
.chest-fill {
  height: 100%; background: linear-gradient(90deg, var(--gold-d), var(--gold));
  transform-origin: right center; transition: transform .6s ease;
}
.chestbig {
  font-size: 96px; line-height: 1; text-align: center;
  animation: shardIn .9s cubic-bezier(.2,1.5,.35,1) both;
}
.codeword {
  border: 3px solid var(--gold); border-radius: var(--r-md);
  background: rgba(255,194,75,.16); padding: 16px; text-align: center;
}
.codeword .cwlbl { font-size: 12px; font-weight: 800; letter-spacing: .2em; color: var(--ink-soft); }
.codeword .cwval { font-size: 30px; font-weight: 900; color: var(--gold-d); margin-top: 4px; }

/* per-child star count on the player button */
.nmrow { display: flex; align-items: baseline; gap: 8px; }
.pstar { font-size: 13px; font-weight: 800; color: var(--gold-d); }

/* backup code box */
.codebox {
  width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.5; direction: ltr; text-align: left;
  border: 3px solid #E2E8EB; border-radius: var(--r-sm);
  background: #F7FAFB; color: var(--ink); padding: 12px;
  resize: vertical; user-select: text;
}
.codebox:focus { outline: none; border-color: var(--gold); }

/* stop hero card */
.stopcard { position: relative; overflow: hidden; }
.stopcard .band {
  margin: -22px -22px 18px; padding: 26px 22px 20px;
  text-align: center;
}
.band.sunset { background: linear-gradient(160deg, #FF9E6B, #FF5F6D); }
.band.olive  { background: linear-gradient(160deg, #A8C66C, #4F9D69); }
.band.night  { background: linear-gradient(160deg, #6C63C7, #2B2F77); }
.band.sea    { background: linear-gradient(160deg, #4FC3D9, #1B7A9B); }
.band .b-emoji { font-size: 56px; line-height: 1; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.band h2 { color: #fff; margin-top: 6px; text-shadow: 0 2px 6px rgba(0,0,0,.25); }
.band .sub { color: rgba(255,255,255,.92); font-size: 14px; font-weight: 600; margin-top: 4px; }

/* --------------------------------------------------------------- player row */
.players { display: flex; flex-direction: column; gap: 12px; }
.pbtn {
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 76px;
  padding: 12px 16px;
  border: 3px solid transparent;
  border-radius: var(--r-md);
  background: #fff;
  cursor: pointer; text-align: start;
  font-family: inherit;
  box-shadow: var(--shadow-pop);
  transition: transform .12s ease;
}
.pbtn:active { transform: translateY(3px); }
.pbtn.violet { border-color: var(--violet); }
.pbtn.teal   { border-color: var(--teal); }
.pbtn.coral  { border-color: var(--coral); }
.pbtn.done   { background: #EAFBEF; }
.pbtn .av {
  width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%;
  display: grid; place-items: center; font-size: 27px;
  background: #F1F5F7;
}
/* illustrated portraits (PROMPTS.md) drop in wherever an emoji face was */
.av.hasimg, .tav.hasimg {
  background-size: cover; background-position: center top;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.7);
}
.tav.hasimg {
  width: 54px; height: 54px; border-radius: 50%; margin: 0 auto;
  box-shadow: 0 0 0 3px rgba(255,255,255,.25);
}
.pbtn .who { flex: 1; }
.pbtn .who .nm { font-weight: 900; font-size: 20px; color: var(--ink); }
.pbtn .who .tr { font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.dots { display: flex; gap: 5px; margin-top: 6px; }
.dots i {
  width: 12px; height: 12px; border-radius: 50%;
  background: #D8DFE3; display: block;
}
.dots i.on { background: var(--green); }
.pbtn .chev { font-size: 22px; color: var(--ink-soft); }
.pbtn .tick { font-size: 26px; }

/* ------------------------------------------------------------------- task */
.qbox {
  background: #fff; color: var(--ink);
  border-radius: var(--r-lg);
  padding: 22px 20px;
  box-shadow: var(--shadow-card);
  border: 3px solid rgba(255,255,255,.7);
}
.qbox .q { font-size: 20px; font-weight: 700; line-height: 1.5; color: var(--ink); }
.qhead { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.qhead .badge {
  font-size: 12px; font-weight: 800; letter-spacing: .08em;
  padding: 5px 12px; border-radius: 999px;
  background: #F1F5F7; color: var(--ink-soft);
}
.qhead .badge.violet { background: #EDE8FE; color: #5B34C4; }
.qhead .badge.teal   { background: #DEF7F3; color: #12776B; }
.qhead .badge.coral  { background: #FFE9E5; color: #C24030; }

.opts { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.opt {
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 68px; padding: 12px 18px;
  border: 3px solid #E2E8EB; border-radius: var(--r-md);
  background: #FBFDFE; color: var(--ink);
  font-family: inherit; font-size: 20px; font-weight: 700;
  cursor: pointer; text-align: start;
  transition: transform .12s ease, border-color .2s ease, background .2s ease;
}
.opt:active { transform: scale(.97); }
.opt .oe { font-size: 34px; line-height: 1; }
.opt.big { min-height: 108px; justify-content: center; }
.opt.big .oe { font-size: 62px; }
.opt.right { border-color: var(--green); background: #E9FBEF; }
.opt.wrong { border-color: var(--coral); background: #FFECE8; animation: shake .35s; }
@keyframes shake { 25%{transform:translateX(-7px)} 50%{transform:translateX(7px)} 75%{transform:translateX(-4px)} }

/* input */
.field {
  width: 100%; min-height: 62px;
  font-family: inherit; font-size: 20px; font-weight: 700;
  text-align: center;
  border: 3px solid #E2E8EB; border-radius: var(--r-md);
  background: #FBFDFE; color: var(--ink);
  padding: 12px 16px; margin-top: 18px;
}
.field:focus { outline: none; border-color: var(--gold); }

/* cipher key */
.cipher-code {
  font-size: 30px; font-weight: 900; letter-spacing: .06em;
  text-align: center; direction: ltr;
  color: var(--sea-800); background: #E7F4F7;
  border-radius: var(--r-md); padding: 16px; margin-top: 16px;
  border: 3px dashed #9FC9D4;
}
.cipher-key {
  direction: ltr;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 5px; margin-top: 14px;
}
.cipher-key span {
  background: #F1F5F7; border-radius: 8px; padding: 5px 2px;
  text-align: center; font-size: 12px; font-weight: 700; color: var(--ink-soft);
}

/* gpt mission */
.gptbox {
  margin-top: 16px; padding: 16px;
  border-radius: var(--r-md);
  background: #10A37F14; border: 3px solid #10A37F55;
}
.gptbox .lbl { font-size: 12px; font-weight: 800; color: #0B7A5E; letter-spacing: .06em; }
.gptbox .ask { font-size: 18px; font-weight: 700; color: var(--ink); margin-top: 8px; line-height: 1.5; }
.gpt-actions { display: flex; gap: 10px; margin-top: 14px; }
.gpt-actions .btn { min-height: 52px; font-size: 16px; }
.tip { font-size: 13px; color: var(--ink-soft); margin-top: 12px; line-height: 1.55; }

/* memory */
.mem { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.mcard {
  aspect-ratio: 3/4; border: none; border-radius: var(--r-sm);
  background: linear-gradient(160deg, #2FA9C4, #12697F);
  display: grid; place-items: center; font-size: 34px; cursor: pointer;
  box-shadow: var(--shadow-pop);
  transition: transform .25s ease, background .25s ease;
}
.mcard .face { opacity: 0; transition: opacity .12s ease .1s; }
.mcard.up   { background: #fff; transform: rotateY(0deg) scale(1.03); }
.mcard.up .face { opacity: 1; }
.mcard.matched { background: #E9FBEF; box-shadow: none; opacity: .65; }
.mcard.matched .face { opacity: 1; }

/* count */
.countfield {
  position: relative; margin-top: 18px;
  min-height: 190px; border-radius: var(--r-md);
  background: #F1F8FA; border: 3px dashed #A9CED9;
  display: flex; flex-wrap: wrap; align-content: center; justify-content: center;
  gap: 6px; padding: 16px;
}
.cobj {
  font-size: 46px; line-height: 1; background: none; border: none; cursor: pointer;
  transition: transform .18s ease, filter .18s ease;
  padding: 4px;
}
.cobj.tapped { transform: scale(.82); filter: grayscale(1) opacity(.4); }
.numpad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 14px; }
.numpad button {
  min-height: 58px; border: 3px solid #E2E8EB; border-radius: var(--r-sm);
  background: #fff; color: var(--ink); font-family: inherit;
  font-size: 24px; font-weight: 900; cursor: pointer;
}
.numpad button:active { transform: scale(.92); }

/* ------------------------------------------------------------ parent area */
.previewbar {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; border-radius: 999px;
  background: rgba(167,139,250,.18); border: 2px solid var(--violet);
  color: #DCD2FF; font-size: 14px; font-weight: 800;
}
.pcard { padding-bottom: 18px; }
.pmeta { font-size: 12px; font-weight: 700; color: var(--ink-soft); letter-spacing: .04em; }
.pgroup { margin-top: 14px; }
.pgtitle {
  font-size: 14px; font-weight: 900; color: var(--ink);
  padding: 7px 12px; border-radius: 999px; display: inline-block;
  background: #F1F5F7;
}
.pgtitle.violet { background: #EDE8FE; color: #5B34C4; }
.pgtitle.teal   { background: #DEF7F3; color: #12776B; }
.pgtitle.coral  { background: #FFE9E5; color: #C24030; }
.trow {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px; padding: 12px;
  border: 2px solid #E8EDEF; border-radius: var(--r-sm);
  background: #FBFDFE;
}
.trow.tdone { background: #F2FBF5; border-color: #C7EBD4; }
.tinfo { flex: 1; min-width: 0; }
.ttags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 5px; }
.ttag {
  font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px;
  background: #EDF2F4; color: var(--ink-soft);
}
.ttag.star { background: #FFF3D6; color: #8A5D00; }
.ttag.ok   { background: #DCF6E4; color: #176B3A; }
.tq   { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.4; }
.tans { font-size: 13px; font-weight: 800; color: #12776B; margin-top: 4px; }
.thint { font-size: 12px; color: var(--ink-soft); margin-top: 3px; line-height: 1.45; }
.tplay {
  width: 46px; height: 46px; flex: 0 0 46px; border: none; border-radius: 50%;
  background: linear-gradient(180deg, #FFD273, var(--gold));
  box-shadow: 0 3px 0 var(--gold-d);
  font-size: 17px; color: #24160B; cursor: pointer;
  display: grid; place-items: center;
}
.tplay:active { transform: translateY(3px); box-shadow: none; }

/* photo puzzle (our own family photos, Gemini-illustrated) */
.puzwrap { margin-top: 18px; }
.puzreflbl { font-size: 12px; font-weight: 800; color: var(--ink-soft); letter-spacing: .06em; text-align: center; }
.puzref {
  width: 96px; height: 96px; margin: 6px auto 14px;
  border-radius: var(--r-sm); background-size: cover; background-position: center;
  border: 3px solid var(--gold); box-shadow: var(--shadow-pop);
}
.puzgrid {
  display: grid; gap: 4px; aspect-ratio: 1;
  padding: 4px; border-radius: var(--r-md);
  background: #E2E8EB;
}
.puztile {
  border: none; border-radius: 6px; padding: 0; cursor: pointer;
  background-repeat: no-repeat;
  transition: transform .12s ease, box-shadow .15s ease, outline-color .15s ease;
  outline: 3px solid transparent; outline-offset: -3px;
}
.puztile.sel { transform: scale(.92); outline-color: var(--gold); box-shadow: 0 0 0 4px rgba(255,194,75,.4); }
.puztile.placed { outline-color: rgba(74,222,128,.55); }
.puzgrid.solved { gap: 0; padding: 0; animation: pop .5s cubic-bezier(.2,1.6,.4,1) both; }
.puzgrid.solved .puztile { outline-color: transparent; border-radius: 0; }
.puzhint { text-align: center; font-size: 13px; color: var(--ink-soft); margin-top: 12px; font-weight: 600; }

/* hot & cold */
.hotmeter {
  margin-top: 18px; padding: 12px; border-radius: var(--r-md);
  background: #F1F8FA; border: 3px solid #A9CED9;
  text-align: center; font-weight: 800; font-size: 18px; color: var(--sea-800);
}
.hotgrid { display: grid; gap: 8px; margin-top: 12px; }
.hcell {
  aspect-ratio: 1; border: 3px solid #E2E8EB; border-radius: var(--r-sm);
  background: #FBFDFE; font-size: 26px; cursor: pointer; color: #B7C4CA;
  display: grid; place-items: center;
}
.hcell:active { transform: scale(.92); }
.hcell.used { background: #F4F8FA; color: inherit; }
.hcell.found { background: linear-gradient(160deg, #FFE9A8, var(--gold)); border-color: var(--gold-d); }

/* scramble */
.scrambled {
  margin-top: 18px; min-height: 66px; border-radius: var(--r-md);
  background: #E7F4F7; border: 3px dashed #9FC9D4;
  display: grid; place-items: center;
  font-size: 30px; font-weight: 900; letter-spacing: .08em; color: var(--sea-800);
}
.tilepool { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.tile {
  min-width: 54px; min-height: 60px; border: 3px solid #E2E8EB; border-radius: var(--r-sm);
  background: #fff; font-family: inherit; font-size: 26px; font-weight: 900;
  color: var(--ink); cursor: pointer;
}
.tile:active { transform: scale(.92); }
.tile.used { opacity: .25; pointer-events: none; }

/* order */
.orderpool { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; justify-content: center; }
.oitem {
  min-width: 92px; min-height: 92px; padding: 10px;
  border: 3px solid #E2E8EB; border-radius: var(--r-md);
  background: #FBFDFE; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-family: inherit; font-size: 14px; font-weight: 700; color: var(--ink);
}
.oitem .oe { font-size: 34px; }
.oitem.used { opacity: .3; pointer-events: none; }
.orderslots {
  display: flex; gap: 8px; margin-top: 16px; justify-content: center; flex-wrap: wrap;
}
.oslot {
  width: 74px; height: 74px; border-radius: var(--r-sm);
  border: 3px dashed #A9CED9; background: #F1F8FA;
  display: grid; place-items: center; font-size: 32px;
  position: relative;
}
.oslot .idx {
  position: absolute; top: -10px; inset-inline-start: -8px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--sea-700); color: #fff;
  font-size: 12px; font-weight: 800; display: grid; place-items: center;
}

/* feedback */
.feed {
  margin-top: 16px; padding: 14px 16px; border-radius: var(--r-md);
  font-weight: 700; font-size: 16px; line-height: 1.5;
  display: none;
}
.feed.show { display: block; animation: pop .3s cubic-bezier(.2,1.6,.4,1) both; }
.feed.ok  { background: #E9FBEF; color: #176B3A; border: 2px solid #9BE7B7; }
.feed.no  { background: #FFECE8; color: #B23A29; border: 2px solid #FFB9AC; }

/* reveal ceremony */
.reveal { text-align: center; }
.reveal .shardbig {
  width: 150px; height: 172px; margin: 0 auto 8px;
  clip-path: polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%);
  background: linear-gradient(160deg, #FFE9A8, var(--gold));
  display: grid; place-items: center;
  font-size: 62px;
  box-shadow: 0 0 60px rgba(255,194,75,.65);
  animation: shardIn .9s cubic-bezier(.2,1.5,.35,1) both;
}
@keyframes shardIn {
  0%   { transform: scale(.2) rotate(-40deg); opacity: 0 }
  60%  { transform: scale(1.15) rotate(8deg); opacity: 1 }
  100% { transform: scale(1) rotate(0) }
}
.rays {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: conic-gradient(from 0deg, transparent 0 8deg, rgba(255,194,75,.14) 8deg 16deg);
  animation: spin 22s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }

#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 50; }

/* toast */
#toast {
  position: fixed; inset-inline: 20px; bottom: calc(var(--safe-b) + 26px);
  z-index: 60; display: flex; justify-content: center;
  pointer-events: none;
}
#toast div {
  background: rgba(6,43,56,.95); color: #fff;
  padding: 12px 20px; border-radius: 999px;
  font-size: 15px; font-weight: 700;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  animation: pop .3s cubic-bezier(.2,1.6,.4,1) both;
}

/* screen transitions */
.screen { animation: slidein .32s cubic-bezier(.2,.9,.3,1) both; }
@keyframes slidein { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}