:root {
  --ink: #2b1b3d;
  --cream: #fff8ec;
  --ice: #d8f4f2;
  --tang: #ff8f5c;
  --tang-d: #c9542a;
  --sun: #ffd34d;
  --spruce: #1f6b63;
  --plum: #6c4f9c;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --font: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", Nunito, "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #6c4f9c; overflow: hidden; overscroll-behavior: none; font-family: var(--font); color: var(--ink); -webkit-user-select: none; user-select: none; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
#game:focus-visible { outline: 4px solid var(--ink); outline-offset: -8px; }
button, a { font: inherit; color: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 4px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 3px #fff; }

/* sticker look: white rim, soft plum shadow */
.icon { width: 52px; height: 52px; flex: none; padding: 11px; border: 3px solid #fff; border-radius: 16px; background: var(--ink); color: #fff; box-shadow: 0 3px 8px rgba(43,27,61,.35); display: grid; place-items: center; }
.icon svg { width: 100%; height: 100%; fill: currentColor; }
.icon:active { transform: translateY(2px); }
.icon-slot { width: 52px; height: 52px; flex: none; }
#btnMute { position: fixed; z-index: 30; right: calc(10px + env(safe-area-inset-right, 0px)); top: calc(10px + var(--sat)); }
#btnMute .off { display: none; }
#btnMute.muted .on { display: none; }
#btnMute.muted .off { display: inline; }

/* the card at the top holds the question and any explanation */
#top { position: fixed; z-index: 10; inset: 0 0 auto 0; padding: calc(10px + var(--sat)) 10px 0; display: flex; align-items: flex-start; gap: 8px; pointer-events: none; }
#top > * { pointer-events: auto; }
#card { flex: 1; min-width: 0; max-width: 680px; margin: 0 auto; background: var(--cream); border: 3px solid #fff; border-radius: 20px; padding: 8px 14px 10px; box-shadow: 0 4px 12px rgba(43,27,61,.3); }
#cardHead { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #5d4a6e; }
#cardLilies { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-weight: 800; color: var(--ink); }
#cardLilies svg { width: 18px; height: 18px; }
#cardBody { margin-top: 2px; font-size: 19px; font-weight: 800; line-height: 1.25; }
#cardBody .ask { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; justify-content: center; text-align: center; }
#cardBody .big-num { font-size: 34px; font-weight: 900; line-height: 1; }
#cardBody .say { font-size: 22px; font-weight: 900; text-align: center; }
#cardBody .words { display: block; text-align: center; font-size: 15px; font-weight: 700; color: #5d4a6e; margin-top: 1px; }
#cardBody p { margin: 3px 0 0; font-size: 17px; font-weight: 700; line-height: 1.32; text-align: center; }
#cardBtns { display: flex; justify-content: center; gap: 8px; }
#cardBtns:not(:empty) { margin-top: 8px; }

/* a real fraction: numerator over denominator */
.frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; font-size: .92em; line-height: 1.02; margin: 0 .12em; }
.frac .n { padding: 0 .2em; border-bottom: .12em solid currentColor; }
.frac .d { padding: 0 .2em; }
.mixed { display: inline-flex; align-items: center; vertical-align: middle; white-space: nowrap; }

.btn { min-height: 56px; padding: 10px 22px; border: 3px solid #fff; border-radius: 18px; background: var(--tang); box-shadow: 0 4px 10px rgba(43,27,61,.3); font-weight: 900; font-size: 19px; color: var(--ink); text-decoration: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; }
.btn:active { transform: translateY(2px); }
.btn.alt { background: var(--cream); }
.btn.big { min-height: 76px; font-size: 26px; }
.btn .s { font-size: 15px; font-weight: 700; margin-top: 2px; }

/* main screen */
#menu { position: fixed; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; padding: calc(16px + var(--sat)) 16px calc(12px + var(--sab)); overflow-y: auto; pointer-events: none; }
#menu > * { pointer-events: auto; }
#brandBox { text-align: center; max-width: 620px; }
#logo { margin: 0; font-size: clamp(42px, 11.5vmin, 80px); line-height: .92; font-weight: 900; letter-spacing: -.01em; color: #fff; -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; }
#logo .l2 { display: block; color: var(--sun); }
#tagline { display: inline-block; margin: 10px auto 0; max-width: 460px; padding: 6px 14px; border-radius: 14px; background: rgba(43,27,61,.72); font-size: 18px; font-weight: 800; color: #fff; line-height: 1.2; }
#menuBtns { margin-top: auto; width: min(100%, 420px); display: flex; flex-direction: column; gap: 10px; align-items: stretch; padding-top: 10px; }
.quiet { min-height: 44px; align-self: center; padding: 0 14px; border-radius: 12px; background: rgba(255,248,236,.85); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
#byline { margin: 0 auto; padding: 1px 10px; border-radius: 9px; background: rgba(255,248,236,.85); text-align: center; font-size: 14px; font-weight: 700; color: var(--ink); }

/* panels */
#panel { position: fixed; inset: 0; z-index: 20; display: flex; align-items: safe center; justify-content: center; padding: calc(12px + var(--sat)) 12px calc(12px + var(--sab)); background: rgba(43,27,61,.5); overflow-y: auto; }
.sheet { width: min(100%, 620px); background: var(--cream); border: 4px solid #fff; border-radius: 24px; padding: 18px; box-shadow: 0 8px 24px rgba(43,27,61,.45); margin: auto; }
.sheet h2 { margin: 0 0 10px; text-align: center; font-size: 28px; font-weight: 900; line-height: 1.1; outline: none; }
#pBody { font-size: 18px; font-weight: 700; line-height: 1.3; }
#pBody p { margin: 6px 0; text-align: center; }
#pBtns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
#pBtns .btn { flex: 1 1 200px; }
.pond-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 8px; }
.pond { position: relative; min-height: 58px; padding: 6px 12px; border: 3px solid var(--ink); border-radius: 16px; background: #fff; text-align: left; display: grid; grid-template-columns: 38px 1fr; column-gap: 10px; align-items: center; font-weight: 800; }
.pond .n { grid-row: 1 / span 2; align-self: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ice); display: grid; place-items: center; font-weight: 900; font-size: 19px; border: 2px solid var(--ink); }
.pond .nm { font-size: 17px; line-height: 1.12; }
.pond .tg { font-size: 14px; font-weight: 700; color: #5d4a6e; margin-top: 2px; }
.pond.up { background: var(--sun); border-width: 4px; }
.pond.up .tg { color: var(--ink); }
.nums { display: flex; flex-wrap: wrap; gap: 6px 10px; justify-content: center; margin: 4px 0 8px; font-size: 21px; font-weight: 900; }
.nums span.chip { background: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: 2px 8px; }
.sum-h { display: block; text-align: center; font-weight: 800; margin-top: 8px; }
.lily-row { display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 21px; font-weight: 900; }
.lily-row svg { width: 34px; height: 34px; }

@media (max-height: 500px) {
  #cardBody { font-size: 17px; }
  #cardBody .big-num { font-size: 26px; }
  #cardBody .say { font-size: 18px; }
  #cardBody p { font-size: 15px; line-height: 1.18; }
  #card { padding: 4px 10px 6px; border-radius: 16px; }
  #cardHead { font-size: 13px; }
  #cardBody .words { font-size: 13px; }
  #cardBtns:not(:empty) { margin-top: 4px; }
  #cardBtns .btn { min-height: 46px; padding: 4px 18px; font-size: 17px; }
  #menu { flex-direction: row; align-items: center; justify-content: center; gap: 24px; padding-top: 8px; }
  #logo { font-size: 44px; -webkit-text-stroke-width: 6px; }
  #tagline { font-size: 16px; }
  #menuBtns { margin-top: 0; width: 320px; gap: 6px; }
  .btn.big { min-height: 62px; font-size: 21px; }
  .btn { min-height: 48px; font-size: 17px; padding: 6px 16px; }
  .quiet { min-height: 34px; font-size: 15px; }
  .sheet { padding: 10px 14px; }
  .sheet h2 { font-size: 22px; margin-bottom: 4px; }
  #pBtns { margin-top: 8px; }
}
@media (max-width: 360px) {
  #card { padding: 6px 10px 8px; }
  #cardBody { font-size: 17px; }
  #cardBody p { font-size: 15.5px; }
  .icon, .icon-slot { width: 46px; height: 46px; padding: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .btn:active, .icon:active { transform: none; }
}
@media (max-width: 480px) {
  /* narrow phones: the question gets the full width, under the two round buttons */
  #top { flex-wrap: wrap; justify-content: space-between; padding-top: calc(6px + var(--sat)); gap: 6px; }
  #btnPause { order: 1; } .icon-slot { order: 2; } #card { order: 3; flex: 1 1 100%; margin: 0; }
  #btnMute { top: calc(6px + var(--sat)); }
  #cardHead { position: absolute; top: calc(8px + var(--sat)); left: 66px; right: 66px; padding: 7px 10px; background: var(--cream); border-radius: 14px; font-size: 13px; line-height: 1.15; }
  #panel { padding-top: calc(64px + var(--sat)); }
}