/* The game's fonts, served with it (assets/fonts, SIL Open Font License; see
   THIRD_PARTY_NOTICES.md): Pangolin, for all text and numbers. */
@font-face { font-family: "Pangolin"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../assets/fonts/pangolin-400-latin.woff2") format("woff2"); }

/* Ranglu — all DOM styling. The game draws into a fixed 540×960 frame
   that main.js scales to fit the window, so sizes here are in game pixels. */

/* Shared cream (set from config CREAM at boot; this is only the fallback). */
:root { --cream: #fff8e7; }

/* ── Page shell: the portrait game, centred on a dark page ──────────────── */
html, body { margin: 0; height: 100%; background: #f6e3c8; } /* warm cream round the game */
body { overflow: hidden; -webkit-tap-highlight-color: transparent; }
.page { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
.game-box { position: relative; overflow: hidden; }
.game-frame {
  position: absolute; left: 0; top: 0; width: 540px; height: var(--game-h, 960px); overflow: hidden;
  transform-origin: 0 0; user-select: none; -webkit-user-select: none;
  touch-action: none; /* game gestures only; the page outside the frame can still be zoomed */
}
.game-canvas { position: absolute; left: 0; top: 0; }
#dom-layer { position: absolute; left: 0; top: 0; width: 540px; height: var(--game-h, 960px); pointer-events: none; }
.fatal-error {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 48px;
  background: var(--cream); color: #8a5a2b; font: 24px/1.4 "Pangolin", sans-serif; text-align: center;
}

/* ── Shared controls ───────────────────────────────────────────────────── */
.screen-root { width: 100%; height: 100%; position: absolute; left: 0; top: 0; pointer-events: auto; }
.screen-root button { cursor: pointer; }

/* Buttons grow slightly under the pointer. The grow is a transform, so it never moves the
   layout around the button. Icon buttons are ringed in their text colour. */
.icon-button, .text-button { background: none; padding: 0; transition: transform .25s ease-out; }
.icon-button:hover, .text-button:hover { transform: scale(1.08); }
.icon-button:active, .text-button:active { transform: scale(1); }
.icon-button { border: 4px solid; border-radius: 50%; margin: 16px; }
/* Top-bar icons that bring their own look from the icon sheet (Sound / Mute, Pause / Resume
   and Back have their ring drawn in; Home has none): no CSS ring. 56 px icons with a 12 px margin keep
   their centres where the ringed 48 px buttons had them. */
.mute-button, .pause-button, .end-home-button, .pause-home-button, .save-back { border: none; border-radius: 0; margin: 12px; line-height: 0; }

/* Text buttons (every one but the start screen's mode buttons): the sheet's hexagon filled warm
   orange (--button-shape), its chalky edge in gold (--button-outline), a darker orange shadow
   underneath, cream labels and icons, and cream petal flourishes at both ends (added by
   components/game-buttons.js, decorateButtons). Hover and press only scale the whole button.
   The buttons keep the art's proportions so the points never stretch: give each a width and its
   height follows (.flat-button: a little shorter, --flat-aspect). */
.text-button {
  position: relative; isolation: isolate; box-sizing: border-box; margin: 0; border: none; background: none;
  width: var(--button-width, 180px); aspect-ratio: var(--button-aspect, 262 / 86);
  display: inline-flex; align-items: center; justify-content: center; padding: 0 20%; white-space: nowrap;
  color: #FFF6E6; filter: drop-shadow(0 5px 0 #A8441B); text-shadow: 0 1px 0 rgba(120, 40, 10, .3);
}
.text-button::before, .text-button::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.text-button::before {
  background: linear-gradient(to bottom, #DF7034, #C8531F);
  -webkit-mask: var(--button-shape) center / 100% 100% no-repeat; mask: var(--button-shape) center / 100% 100% no-repeat;
}
.text-button::after {
  background: #F3A93C;
  -webkit-mask: var(--button-outline) center / 100% 100% no-repeat; mask: var(--button-outline) center / 100% 100% no-repeat;
}
.text-button.flat-button { aspect-ratio: var(--flat-aspect, 262 / 70); }
.text-button.flat-button::before { -webkit-mask-image: var(--button-shape-flat); mask-image: var(--button-shape-flat); }
.text-button.flat-button::after { -webkit-mask-image: var(--button-outline-flat); mask-image: var(--button-outline-flat); }
/* The cream petal flourishes at both ends */
/* (.text-button in front, so these win over the logo's own .brand-swash size, offset and outline) */
.text-button .button-flourish { filter: none; position: absolute; top: 50%; width: 30px; height: 43px; margin-top: -21px; pointer-events: none; }
.text-button .button-flourish.brand-swash-left { left: 10%; }
.text-button .button-flourish.brand-swash-right { right: 10%; }
.icon-text-button { font-family: "Pangolin", sans-serif; font-size: 32px; line-height: 40px; display: flex; align-items: center; }
.icon-text-button .icon-button-icon { margin-inline-end: 8px; flex-shrink: 0; }

/* Mute: top-left on every screen; in gameplay it sits in the toolbar next to Pause. */
.mute-button {
  position: absolute; left: 0; top: 0; z-index: 5; pointer-events: auto; cursor: pointer;
  color: #00859a; fill: #00859a;
}
.mute-button.mute-button-on-overlay { color: #fff; fill: #fff; } /* over the orange pause menu */
.mute-button { transition: transform .25s ease-out; } /* only the hover scale: the top bar never moves about */
.mute-button.mute-button-shifted { left: 64px; } /* one place right, while a Back icon is top left */

/* ── Loading ───────────────────────────────────────────────────────────── */
.loading-screen {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--cream); font-family: "Pangolin", sans-serif; font-size: 24px; color: #8a5a2b;
}
.rangoli-loader-slot { height: 190px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.rangoli-loader { line-height: 0; transform-origin: 50% 50%; will-change: transform; }

/* ── A game's ending (animations/ending-sequence.js): the caption under the Rangoli outline;
   its opacity and drift are driven by the ending's timeline ── */
.ending-caption {
  position: absolute; left: 0; right: 0; z-index: 4; text-align: center; pointer-events: none;
  font-family: "Pangolin", sans-serif; font-size: 32px; line-height: 40px; color: #8a3b12;
  will-change: opacity, transform;
}

/* ── Start screen (screens/start-screen.js, START_SCREEN; the owner's Figma design): the
   gradient (set from config), title and tagline, the three mode buttons, the scene along the
   bottom ── */
.start-screen { position: absolute; inset: 0; overflow: hidden; font-family: "Pangolin", sans-serif; color: #4a2c14; text-align: center; background: #fff2db; }
.start-scene-art { position: absolute; display: block; height: auto; pointer-events: none; user-select: none; }
/* The design's pink petals falling slowly down both sides (START_SCREEN.petals): the lane
   falls, the petal in it sways and rocks. Reduced motion: each rests at --rest-y. */
.start-falling { position: absolute; top: 0; pointer-events: none; animation: start-fall var(--fall, 30s) linear var(--delay, 0s) infinite; }
.start-falling img { display: block; width: 100%; height: auto; animation: start-sway 5.5s ease-in-out var(--delay, 0s) infinite alternate; }
@keyframes start-fall { from { transform: translateY(-70px); } to { transform: translateY(calc(var(--game-h, 960px) + 70px)); } }
@keyframes start-sway {
  from { transform: translateX(-8px) rotate(calc(var(--turn, 0deg) - 16deg)); }
  to { transform: translateX(8px) rotate(calc(var(--turn, 0deg) + 16deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .start-falling { animation: none; transform: translateY(var(--rest-y, 0px)); }
  .start-falling img { animation: none; transform: rotate(var(--turn, 0deg)); }
}
/* The logo (components/brand-title.js): each letter its own colour, bold (a stroke in its own
   colour), a white outline and a soft shadow round the word, on a gentle arch, petal swashes
   either side. Everything is in em, so the font-size sets its size. */
.brand-title { display: inline-flex; align-items: center; gap: .1em; font-family: "Pangolin", sans-serif; font-weight: normal; letter-spacing: .025em; }
.brand-word {
  -webkit-text-stroke: .042em currentColor;
  filter: drop-shadow(.03em 0 0 #fff) drop-shadow(-.03em 0 0 #fff) drop-shadow(0 .03em 0 #fff) drop-shadow(0 -.03em 0 #fff)
    drop-shadow(0 .048em 0 rgba(150, 70, 20, .22));
}
.brand-word span { display: inline-block; -webkit-text-stroke-color: currentColor; transform-origin: 50% 100%; } /* colour and arch set per letter */
.brand-swash { /* the letters' own white outline and soft shadow (.brand-word) */
  flex: none; width: .66em; height: .95em; margin-top: .1em; overflow: visible;
  filter: drop-shadow(.03em 0 0 #fff) drop-shadow(-.03em 0 0 #fff) drop-shadow(0 .03em 0 #fff) drop-shadow(0 -.03em 0 #fff)
    drop-shadow(0 .048em 0 rgba(150, 70, 20, .22));
}
.brand-swash-right { transform: scaleX(-1); }
.start-title { position: absolute; left: 0; right: 0; top: calc(92px + var(--mid, 0px)); margin: 0; font-weight: normal; font-size: 84px; line-height: 96px; }
.start-tagline { position: absolute; left: 0; right: 0; top: calc(200px + var(--mid, 0px)); margin: 0 auto; max-width: 270px; font-size: 25px; line-height: 31px; color: #5a2d16; }
.start-mode-buttons { position: absolute; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; } /* top, gap: START_SCREEN.buttons */
/* A mode button: the design's hexagon in the mode's colours (--mode-art), its icon and its
   name in the mode's colour. */
.text-button.start-mode { justify-content: center; gap: 16px; padding: 0 30px; text-align: left; font-family: "Pangolin", sans-serif; } /* icon and name centred together */
.text-button.start-mode { filter: none; text-shadow: none; }
.text-button.start-mode::before { background: var(--mode-art) center / 100% 100% no-repeat; -webkit-mask: none; mask: none; }
.text-button.start-mode::after { display: none; }
/* The sheet's icons are fine line art: an outline in their own colour round the lines makes
   them bolder (on a wrapper, because a filter on the masked icon itself would be cut away). */
.start-mode-icon-wrap {
  flex-shrink: 0; line-height: 0;
  filter: drop-shadow(0.9px 0 0 currentColor) drop-shadow(-0.9px 0 0 currentColor) drop-shadow(0 0.9px 0 currentColor) drop-shadow(0 -0.9px 0 currentColor);
}
.start-mode-icon { flex-shrink: 0; }
.start-mode-label { display: flex; flex-direction: column; }
.start-mode-title { font-size: 31px; line-height: 36px; -webkit-text-stroke: .8px currentColor; } /* a touch bolder, for the lighter colours; in its mode's colour (START_SCREEN.modes[].tint) */

/* Icons from the owner's icon sheet (white art), tinted to the text colour via a mask.
   The mask position / size are set per icon from ICONS in config.js (utils/dom.js). */
.sheet-icon { width: 40px; height: 40px; background: currentColor; }

/* ── Board ─────────────────────────────────────────────────────────────── */
/* An invisible table of buttons over the Pixi board: pointer, keyboard and screen-reader input. */
.board { position: absolute; line-height: 0; border-collapse: collapse; touch-action: none; }
.board td { padding: 0; }
.board button {
  width: var(--cell, 64px); height: var(--cell, 64px); background: none; border: none; padding: 0;
  display: block; touch-action: none; border-radius: 12px;
}
.board button:focus-visible { outline: 3px solid #ffbd3a; outline-offset: -3px; }
.board caption { opacity: 0; display: block; width: 0; height: 0; overflow: hidden; }

/* Toolbar: Pause (mute sits beside it) */
/* Combo word over the top of the board (components/combo-feedback.js): above the tiles,
   below the pause button and menu, and never in the way of a touch. Its centre is placed
   by COMBO_FEEDBACK.centreY; script drives its scale and opacity. */
.combo-feedback { position: absolute; left: 50%; z-index: 1; pointer-events: none; opacity: 0; transform: translate(-50%, -50%); will-change: transform, opacity; }
.combo-feedback-art { display: block; filter: drop-shadow(0 6px 16px rgba(120, 40, 10, .35)); } /* sized and painted from the sprite sheet by script; a soft lift */
/* While a combo word is up (game-screen.js celebrate): the game behind it softly blurs and dims a
   touch, so the eye goes to the word; the word and the top bar stay sharp. */
.game-canvas, .rangoli-order { transition: filter .18s ease-out; }
#game-frame.combo-focus .game-canvas, #game-frame.combo-focus .rangoli-order { filter: blur(var(--focus-blur, 3px)) brightness(.95) saturate(.92); }
@media (prefers-reduced-motion: reduce) { .game-canvas, .rangoli-order { transition: none; } }
/* Home in the pause menu's top bar, next to Sound (white over the orange, like it) */
.pause-home-button { position: absolute; left: 64px; top: 0; color: #fff; }
.pause-button { position: absolute; right: 0; top: 0; z-index: 3; color: #00859a; } /* top right; Sound is top left */
.pause-button-paused { color: #fff; }

/* Timed-mode clock: compact chip in the order panel header */
.game-timer {
  font-family: "Pangolin", sans-serif; font-size: 18px; line-height: 22px; color: #fff; background: #00859a;
  border-radius: 12px; padding: 0 10px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.game-timer-warning { background: #d9381e; animation: timer-pulse 1s ease-in-out infinite; }
@keyframes timer-pulse { 50% { transform: scale(1.1); } }

/* Moves-mode counter: same chip, with the number large */
.game-moves {
  display: flex; align-items: center; gap: 8px; padding: 0 4px 0 12px; border-radius: 14px;
  font-family: "Pangolin", sans-serif; color: #fff; background: #00859a; white-space: nowrap;
}
.game-moves-label { font-size: 15px; line-height: 20px; text-transform: uppercase; letter-spacing: .04em; }
.game-moves-value {
  min-width: 34px; font-family: "Pangolin", sans-serif; font-weight: normal; font-size: 24px; line-height: 30px; text-align: center;
  background: #fff; color: #00859a; border-radius: 10px; margin: 3px 0;
}
.game-moves-bump .game-moves-value { animation: moves-bump .35s ease-out; }
@keyframes moves-bump { 40% { transform: scale(1.3); } }
.game-moves-warning { background: #d9381e; } /* 3 or fewer moves left */
.game-moves-warning .game-moves-value { color: #d9381e; }

/* "Your Rangoli Order" panel (top of gameplay) */
.rangoli-order {
  position: absolute; box-sizing: border-box; padding: 4px 30px 6px; isolation: isolate;
  display: flex; flex-direction: column; justify-content: center;
  font-family: "Pangolin", sans-serif; color: #2b2922; text-align: center; pointer-events: none;
}
/* The card itself: the owner's shape (ORDER_FRAME), drawn to the panel's size */
.rangoli-order-frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; overflow: visible; filter: drop-shadow(0 3px 0 rgba(120, 80, 20, .15)); }
.rangoli-order-head { display: flex; justify-content: center; align-items: center; gap: 12px; padding-bottom: 5px; margin: 0 26px 6px; border-bottom: 2px dashed #2b2922; }
.rangoli-order-title { font-size: 22px; line-height: 26px; white-space: nowrap; }
.rangoli-order-items { display: flex; justify-content: space-around; }
.rangoli-order-item { display: flex; align-items: center; gap: 6px; }
.rangoli-order-icon { position: relative; width: var(--order-icon); height: var(--order-icon); flex: none; } /* --order-icon: set from LAYOUT */
.rangoli-order-check { position: absolute; right: -10px; bottom: -6px; transform-origin: 100% 100%; opacity: 0; transition: opacity .2s; }
.rangoli-order-done .rangoli-order-check { opacity: 1; }
.rangoli-order-count { font-family: "Pangolin", sans-serif; font-weight: normal; font-size: 29px; line-height: 36px; white-space: nowrap; }
.rangoli-order-got { display: inline-block; -webkit-text-stroke: 1.6px currentColor; } /* bold: Pangolin has one weight, so a stroke in its own colour thickens it (as the titles do) */
.rangoli-order-need { font-size: 25px; opacity: .65; }
.rangoli-order-done .rangoli-order-count { color: #5da300; }
.rangoli-order-bump .rangoli-order-got { animation: order-bump .35s ease-out; }
@keyframes order-bump { 40% { transform: scale(1.45); } }
.rangoli-order-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── Pause menu ────────────────────────────────────────────────────────── */
.pause-overlay {
  width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2;
  background: rgba(176, 72, 58, .45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); /* the game, dimmed and blurred, behind the card */
  text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; font-family: "Pangolin", sans-serif; font-size: 48px;
}
.hidden { opacity: 0; visibility: hidden; }
.pause-card {
  position: relative; box-sizing: border-box; width: 400px; padding: 30px 36px 34px; border-radius: 36px;
  background: #FFF7EA; border: 3px solid #F6D59C; box-shadow: 0 18px 50px rgba(90, 30, 10, .35);
  display: flex; flex-direction: column; align-items: center; color: #7A1F3D;
}
.pause-title { margin: 0 0 22px; font-size: 44px; line-height: 50px; color: #7A1F3D; -webkit-text-stroke: 1px currentColor; }
.pause-resume-button { --button-width: 290px; --flat-aspect: 290 / 70; font-family: "Pangolin", sans-serif; font-size: 30px; line-height: 36px; } /* the main action */
.pause-restart-slot { margin-top: 14px; }
.pause-restart-button { --button-width: 290px; --flat-aspect: 290 / 64; font-family: "Pangolin", sans-serif; font-size: 26px; line-height: 32px; }
/* Start again: the same button as an outline (its edge in orange, no fill or shadow), dark text */
.text-button.outline-cta { color: #7A1F3D; filter: none; text-shadow: none; }
.text-button.outline-cta::before { display: none; }
.text-button.outline-cta::after { background: #E07B39; }
.text-button.outline-cta .button-flourish path { fill: #EBA35C; }
.pause-mode-label { display: flex; align-items: center; gap: 12px; margin: 30px 0 14px; font-size: 22px; line-height: 28px; color: #7A1F3D; }
.pause-mode-label::before, .pause-mode-label::after { content: ""; width: 48px; height: 2px; border-radius: 1px; background: #F0B860; }
.pause-mode-buttons { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pause-mode-buttons .start-mode-title { font-size: 25px; line-height: 30px; }
.pause-mode-buttons .start-mode-icon-wrap { transform: scale(.85); }
/* the chosen mode shows a ✓ after its name */
.pause-mode-tick { /* the sheet's fine ✓, made bolder by an outline in its own colour */
  flex-shrink: 0; margin-left: -4px; line-height: 0;
  filter: drop-shadow(1.2px 0 0 currentColor) drop-shadow(-1.2px 0 0 currentColor) drop-shadow(0 1.2px 0 currentColor) drop-shadow(0 -1.2px 0 currentColor);
}
.pause-mode-button:not(.pause-mode-selected) .pause-mode-tick { display: none; }

/* ── Story introduction ────────────────────────────────────────────────── */
.story-root { cursor: pointer; }
/* The story's characters (components/character-rig.js): inline SVG, placed in px by script. */
.story-cast { position: absolute; inset: 0; pointer-events: none; }
.character { position: absolute; will-change: transform; }
.character-body { width: 100%; height: 100%; will-change: transform; }
.character-body svg { display: block; width: 100%; height: 100%; overflow: visible; }
.story-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.story-scene img { position: absolute; display: block; height: auto; }
.story-arch { pointer-events: none; } /* the owner's arch, in its own colours */
.story-lantern { transform-origin: 50% 0; animation: story-sway 4.6s ease-in-out infinite; }
@keyframes story-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .story-lantern { animation: none; } }
.story-dialogue {
  position: absolute; visibility: hidden; text-align: center;
  font-family: "Pangolin", sans-serif; color: #3b2a1a;
}
.story-dialogue-visible { visibility: visible; }
.story-line-in { animation: story-in .25s ease-out; }
.story-line-out { opacity: 0; transition: opacity .2s ease-in; } /* the line before, on its way out */
.story-untyped { visibility: hidden; } /* the part of the line still to be typed: in place, so nothing moves */
/* Next / Let's Play and the hint come in once the line is complete */
.story-actions, .story-hint { transition: opacity .3s ease-out, transform .3s ease-out; }
.story-waiting .story-actions, .story-waiting .story-hint { opacity: 0; transform: translateY(6px); visibility: hidden; transition: none; }
.story-said { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@keyframes story-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* The speaker's name on a brush stroke, with the logo's petal swashes either side */
.story-speaker-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 12px; }
.story-speaker-row .brand-swash { font-size: 46px; width: 30px; height: 43px; margin-top: 4px; } /* the logo's swashes, smaller (font-size scales their outline) */
.story-speaker { position: relative; isolation: isolate; display: inline-block; padding: 8px 40px 10px; font-size: 25px; line-height: 32px; }
/* A dry-brush stroke of colour behind the name (a mask in the speaker's tint) */
.story-speaker::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--brush, #fcd9e1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 70' preserveAspectRatio='none'%3E%3Cg fill='%23000'%3E%3Cpath d='M20.5 5.1 L31.6 6.7 L42.7 5.2 L53.8 5.4 L64.9 5.4 L76.0 6.7 L87.2 7.1 L98.3 5.3 L109.4 5.5 L120.5 5.2 L131.6 5.2 L142.7 6.9 L153.8 7.3 L164.9 5.2 L176.0 6.8 L187.1 6.1 L198.2 7.2 L209.3 6.9 L220.4 6.9 L223.3 7.1 L220.4 8.1 L227.3 9.0 L219.6 10.0 L226.1 11.0 L220.6 11.9 L228.9 12.9 L219.6 13.8 L220.4 14.6 L209.3 13.0 L198.2 14.9 L187.1 15.0 L176.0 13.2 L164.9 13.1 L153.8 12.7 L142.7 14.0 L131.6 12.9 L120.5 13.5 L109.4 13.8 L98.3 12.8 L87.2 13.2 L76.0 13.4 L64.9 13.4 L53.8 14.2 L42.7 13.7 L31.6 14.3 L20.5 13.2 L21.0 13.8 L11.7 12.9 L20.7 11.9 L12.0 11.0 L21.1 10.0 L12.8 9.0 L19.8 8.1 L14.0 7.1 Z'/%3E%3Cpath d='M30.4 12.4 L41.6 11.6 L52.8 10.8 L64.0 11.9 L75.2 10.5 L86.5 12.0 L97.7 12.2 L108.9 10.4 L120.1 11.1 L131.4 10.9 L142.6 12.5 L153.8 11.4 L165.0 10.9 L176.3 11.1 L187.5 11.5 L198.7 12.4 L209.9 10.6 L221.2 11.2 L232.4 11.9 L235.8 12.6 L233.3 13.8 L241.0 15.0 L232.9 16.2 L238.7 17.5 L233.0 18.7 L236.0 19.9 L233.4 21.1 L232.4 19.9 L221.2 22.0 L209.9 21.8 L198.7 20.5 L187.5 21.9 L176.3 21.7 L165.0 22.2 L153.8 20.5 L142.6 20.7 L131.4 21.8 L120.1 21.2 L108.9 20.6 L97.7 21.5 L86.5 21.3 L75.2 20.2 L64.0 21.2 L52.8 20.0 L41.6 20.9 L30.4 21.6 L30.1 21.1 L25.7 19.9 L29.7 18.7 L25.6 17.5 L29.4 16.2 L27.0 15.0 L30.5 13.8 L23.6 12.6 Z'/%3E%3Cpath d='M21.9 17.0 L34.1 19.1 L46.3 18.9 L58.6 17.5 L70.8 18.0 L83.0 18.8 L95.2 18.7 L107.5 18.2 L119.7 17.9 L131.9 18.8 L144.2 19.2 L156.4 19.1 L168.6 17.0 L180.8 18.7 L193.1 18.8 L205.3 18.9 L217.5 17.7 L229.7 17.0 L242.0 17.4 L244.7 19.2 L242.2 20.3 L247.1 21.4 L242.2 22.5 L246.2 23.6 L242.4 24.7 L249.7 25.8 L241.3 27.0 L242.0 26.8 L229.7 28.1 L217.5 27.1 L205.3 26.1 L193.1 27.2 L180.8 27.9 L168.6 26.9 L156.4 25.8 L144.2 28.1 L131.9 27.1 L119.7 26.5 L107.5 26.4 L95.2 27.8 L83.0 27.3 L70.8 27.0 L58.6 26.1 L46.3 27.0 L34.1 28.1 L21.9 27.5 L22.2 27.0 L16.4 25.8 L21.4 24.7 L17.4 23.6 L21.7 22.5 L18.3 21.4 L21.6 20.3 L14.6 19.2 Z'/%3E%3Cpath d='M19.9 24.0 L32.3 25.2 L44.7 25.3 L57.1 24.6 L69.5 25.2 L81.9 24.9 L94.3 25.7 L106.7 24.9 L119.1 25.6 L131.5 25.2 L143.8 25.9 L156.2 25.5 L168.6 24.2 L181.0 23.8 L193.4 25.5 L205.8 24.8 L218.2 25.8 L230.6 24.4 L243.0 25.6 L250.6 25.7 L243.9 26.7 L250.5 27.7 L243.4 28.8 L251.6 29.8 L242.4 30.8 L250.0 31.8 L243.4 32.8 L243.0 32.7 L230.6 33.6 L218.2 31.9 L205.8 33.5 L193.4 33.1 L181.0 32.6 L168.6 32.9 L156.2 32.2 L143.8 33.4 L131.5 32.6 L119.1 32.4 L106.7 33.2 L94.3 33.1 L81.9 32.8 L69.5 33.2 L57.1 33.7 L44.7 32.5 L32.3 32.9 L19.9 32.6 L20.9 32.8 L12.1 31.8 L19.0 30.8 L12.2 29.8 L20.1 28.8 L15.9 27.7 L20.6 26.7 L13.2 25.7 Z'/%3E%3Cpath d='M15.5 31.4 L28.7 30.9 L41.9 30.3 L55.1 29.3 L68.3 30.2 L81.5 30.3 L94.7 30.1 L107.9 30.6 L121.1 31.3 L134.3 29.2 L147.5 30.5 L160.7 29.3 L173.9 30.8 L187.1 30.3 L200.3 29.4 L213.5 29.7 L226.7 29.9 L239.9 30.4 L253.1 31.0 L260.3 31.5 L253.6 32.6 L255.4 33.8 L252.5 35.0 L260.2 36.2 L253.4 37.4 L258.4 38.5 L253.7 39.7 L253.1 40.7 L239.9 40.3 L226.7 40.8 L213.5 39.8 L200.3 38.9 L187.1 40.1 L173.9 39.9 L160.7 40.4 L147.5 40.0 L134.3 40.2 L121.1 40.1 L107.9 39.3 L94.7 39.5 L81.5 38.8 L68.3 39.0 L55.1 38.9 L41.9 39.9 L28.7 40.5 L15.5 38.6 L14.7 39.7 L9.1 38.5 L15.2 37.4 L7.5 36.2 L15.1 35.0 L11.9 33.8 L14.7 32.6 L9.7 31.5 Z'/%3E%3Cpath d='M12.4 37.1 L25.0 36.2 L37.7 36.2 L50.4 36.2 L63.1 36.6 L75.7 37.3 L88.4 37.1 L101.1 35.8 L113.8 35.9 L126.4 37.6 L139.1 36.2 L151.8 36.6 L164.5 36.2 L177.1 35.9 L189.8 36.7 L202.5 37.6 L215.2 37.3 L227.8 35.7 L240.5 35.6 L244.0 37.7 L240.0 38.9 L247.8 40.1 L240.9 41.2 L243.9 42.4 L240.8 43.6 L245.6 44.8 L241.1 46.0 L240.5 45.2 L227.8 46.5 L215.2 45.0 L202.5 45.7 L189.8 46.0 L177.1 45.0 L164.5 45.3 L151.8 45.9 L139.1 47.1 L126.4 46.5 L113.8 47.0 L101.1 47.0 L88.4 46.4 L75.7 47.1 L63.1 45.8 L50.4 46.7 L37.7 46.7 L25.0 46.1 L12.4 46.4 L11.4 46.0 L4.4 44.8 L12.7 43.6 L5.9 42.4 L13.1 41.2 L7.6 40.1 L12.9 38.9 L7.4 37.7 Z'/%3E%3Cpath d='M18.7 43.8 L30.8 43.2 L43.0 42.7 L55.1 42.2 L67.3 43.2 L79.5 42.5 L91.6 43.3 L103.8 42.2 L115.9 42.2 L128.1 42.6 L140.3 41.9 L152.4 44.0 L164.6 43.1 L176.7 43.5 L188.9 41.9 L201.1 41.9 L213.2 42.6 L225.4 43.2 L237.5 43.9 L245.9 44.1 L238.5 45.2 L243.3 46.4 L237.6 47.5 L246.4 48.6 L238.1 49.8 L243.6 50.9 L238.1 52.1 L237.5 52.4 L225.4 52.0 L213.2 51.4 L201.1 51.9 L188.9 51.3 L176.7 51.8 L164.6 52.7 L152.4 52.8 L140.3 52.1 L128.1 52.7 L115.9 52.4 L103.8 52.4 L91.6 52.0 L79.5 51.7 L67.3 52.4 L55.1 52.4 L43.0 52.3 L30.8 51.5 L18.7 52.4 L18.4 52.1 L12.6 50.9 L18.0 49.8 L12.8 48.6 L19.6 47.5 L14.9 46.4 L18.4 45.2 L11.1 44.1 Z'/%3E%3Cpath d='M20.3 50.2 L32.3 50.2 L44.3 48.9 L56.3 49.9 L68.3 50.0 L80.4 49.3 L92.4 49.1 L104.4 48.9 L116.4 48.8 L128.4 48.9 L140.4 50.0 L152.4 49.9 L164.4 50.0 L176.5 49.7 L188.5 48.6 L200.5 50.2 L212.5 50.2 L224.5 49.7 L236.5 49.2 L238.9 50.7 L235.7 51.7 L239.3 52.7 L236.1 53.8 L242.6 54.8 L235.5 55.8 L242.1 56.8 L235.9 57.8 L236.5 57.7 L224.5 58.0 L212.5 58.1 L200.5 58.7 L188.5 56.9 L176.5 57.0 L164.4 57.2 L152.4 56.9 L140.4 58.1 L128.4 58.7 L116.4 59.0 L104.4 57.2 L92.4 59.0 L80.4 58.4 L68.3 57.3 L56.3 58.3 L44.3 56.7 L32.3 57.5 L20.3 58.1 L20.4 57.8 L14.0 56.8 L20.5 55.8 L16.0 54.8 L20.4 53.8 L18.1 52.7 L20.3 51.7 L15.8 50.7 Z'/%3E%3Cpath d='M26.3 55.1 L37.5 56.4 L48.7 55.0 L59.9 55.2 L71.1 56.8 L82.3 56.0 L93.5 55.6 L104.6 56.9 L115.8 55.4 L127.0 56.4 L138.2 56.1 L149.4 56.0 L160.6 55.8 L171.8 57.2 L183.0 55.0 L194.1 56.3 L205.3 55.8 L216.5 55.0 L227.7 56.7 L231.5 57.0 L228.7 58.0 L232.7 59.0 L228.4 60.0 L230.0 61.0 L228.0 62.0 L235.2 63.0 L227.3 63.9 L227.7 64.7 L216.5 64.8 L205.3 64.2 L194.1 64.2 L183.0 64.5 L171.8 62.9 L160.6 63.5 L149.4 65.1 L138.2 63.3 L127.0 65.1 L115.8 63.0 L104.6 64.2 L93.5 63.8 L82.3 63.7 L71.1 63.3 L59.9 63.5 L48.7 64.7 L37.5 64.0 L26.3 64.6 L25.4 63.9 L22.4 63.0 L27.2 62.0 L21.4 61.0 L27.0 60.0 L23.2 59.0 L27.0 58.0 L23.0 57.0 Z'/%3E%3Ccircle cx='248.0' cy='20.6' r='1.3'/%3E%3Ccircle cx='252.5' cy='57.1' r='1.0'/%3E%3Ccircle cx='4.1' cy='46.9' r='1.4'/%3E%3Ccircle cx='20.5' cy='35.8' r='0.8'/%3E%3Ccircle cx='6.8' cy='56.6' r='1.2'/%3E%3Ccircle cx='257.7' cy='52.5' r='1.5'/%3E%3Ccircle cx='15.8' cy='41.7' r='0.9'/%3E%3Ccircle cx='18.5' cy='44.8' r='1.5'/%3E%3Ccircle cx='250.5' cy='17.1' r='1.5'/%3E%3Ccircle cx='3.6' cy='42.8' r='1.6'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 70' preserveAspectRatio='none'%3E%3Cg fill='%23000'%3E%3Cpath d='M20.5 5.1 L31.6 6.7 L42.7 5.2 L53.8 5.4 L64.9 5.4 L76.0 6.7 L87.2 7.1 L98.3 5.3 L109.4 5.5 L120.5 5.2 L131.6 5.2 L142.7 6.9 L153.8 7.3 L164.9 5.2 L176.0 6.8 L187.1 6.1 L198.2 7.2 L209.3 6.9 L220.4 6.9 L223.3 7.1 L220.4 8.1 L227.3 9.0 L219.6 10.0 L226.1 11.0 L220.6 11.9 L228.9 12.9 L219.6 13.8 L220.4 14.6 L209.3 13.0 L198.2 14.9 L187.1 15.0 L176.0 13.2 L164.9 13.1 L153.8 12.7 L142.7 14.0 L131.6 12.9 L120.5 13.5 L109.4 13.8 L98.3 12.8 L87.2 13.2 L76.0 13.4 L64.9 13.4 L53.8 14.2 L42.7 13.7 L31.6 14.3 L20.5 13.2 L21.0 13.8 L11.7 12.9 L20.7 11.9 L12.0 11.0 L21.1 10.0 L12.8 9.0 L19.8 8.1 L14.0 7.1 Z'/%3E%3Cpath d='M30.4 12.4 L41.6 11.6 L52.8 10.8 L64.0 11.9 L75.2 10.5 L86.5 12.0 L97.7 12.2 L108.9 10.4 L120.1 11.1 L131.4 10.9 L142.6 12.5 L153.8 11.4 L165.0 10.9 L176.3 11.1 L187.5 11.5 L198.7 12.4 L209.9 10.6 L221.2 11.2 L232.4 11.9 L235.8 12.6 L233.3 13.8 L241.0 15.0 L232.9 16.2 L238.7 17.5 L233.0 18.7 L236.0 19.9 L233.4 21.1 L232.4 19.9 L221.2 22.0 L209.9 21.8 L198.7 20.5 L187.5 21.9 L176.3 21.7 L165.0 22.2 L153.8 20.5 L142.6 20.7 L131.4 21.8 L120.1 21.2 L108.9 20.6 L97.7 21.5 L86.5 21.3 L75.2 20.2 L64.0 21.2 L52.8 20.0 L41.6 20.9 L30.4 21.6 L30.1 21.1 L25.7 19.9 L29.7 18.7 L25.6 17.5 L29.4 16.2 L27.0 15.0 L30.5 13.8 L23.6 12.6 Z'/%3E%3Cpath d='M21.9 17.0 L34.1 19.1 L46.3 18.9 L58.6 17.5 L70.8 18.0 L83.0 18.8 L95.2 18.7 L107.5 18.2 L119.7 17.9 L131.9 18.8 L144.2 19.2 L156.4 19.1 L168.6 17.0 L180.8 18.7 L193.1 18.8 L205.3 18.9 L217.5 17.7 L229.7 17.0 L242.0 17.4 L244.7 19.2 L242.2 20.3 L247.1 21.4 L242.2 22.5 L246.2 23.6 L242.4 24.7 L249.7 25.8 L241.3 27.0 L242.0 26.8 L229.7 28.1 L217.5 27.1 L205.3 26.1 L193.1 27.2 L180.8 27.9 L168.6 26.9 L156.4 25.8 L144.2 28.1 L131.9 27.1 L119.7 26.5 L107.5 26.4 L95.2 27.8 L83.0 27.3 L70.8 27.0 L58.6 26.1 L46.3 27.0 L34.1 28.1 L21.9 27.5 L22.2 27.0 L16.4 25.8 L21.4 24.7 L17.4 23.6 L21.7 22.5 L18.3 21.4 L21.6 20.3 L14.6 19.2 Z'/%3E%3Cpath d='M19.9 24.0 L32.3 25.2 L44.7 25.3 L57.1 24.6 L69.5 25.2 L81.9 24.9 L94.3 25.7 L106.7 24.9 L119.1 25.6 L131.5 25.2 L143.8 25.9 L156.2 25.5 L168.6 24.2 L181.0 23.8 L193.4 25.5 L205.8 24.8 L218.2 25.8 L230.6 24.4 L243.0 25.6 L250.6 25.7 L243.9 26.7 L250.5 27.7 L243.4 28.8 L251.6 29.8 L242.4 30.8 L250.0 31.8 L243.4 32.8 L243.0 32.7 L230.6 33.6 L218.2 31.9 L205.8 33.5 L193.4 33.1 L181.0 32.6 L168.6 32.9 L156.2 32.2 L143.8 33.4 L131.5 32.6 L119.1 32.4 L106.7 33.2 L94.3 33.1 L81.9 32.8 L69.5 33.2 L57.1 33.7 L44.7 32.5 L32.3 32.9 L19.9 32.6 L20.9 32.8 L12.1 31.8 L19.0 30.8 L12.2 29.8 L20.1 28.8 L15.9 27.7 L20.6 26.7 L13.2 25.7 Z'/%3E%3Cpath d='M15.5 31.4 L28.7 30.9 L41.9 30.3 L55.1 29.3 L68.3 30.2 L81.5 30.3 L94.7 30.1 L107.9 30.6 L121.1 31.3 L134.3 29.2 L147.5 30.5 L160.7 29.3 L173.9 30.8 L187.1 30.3 L200.3 29.4 L213.5 29.7 L226.7 29.9 L239.9 30.4 L253.1 31.0 L260.3 31.5 L253.6 32.6 L255.4 33.8 L252.5 35.0 L260.2 36.2 L253.4 37.4 L258.4 38.5 L253.7 39.7 L253.1 40.7 L239.9 40.3 L226.7 40.8 L213.5 39.8 L200.3 38.9 L187.1 40.1 L173.9 39.9 L160.7 40.4 L147.5 40.0 L134.3 40.2 L121.1 40.1 L107.9 39.3 L94.7 39.5 L81.5 38.8 L68.3 39.0 L55.1 38.9 L41.9 39.9 L28.7 40.5 L15.5 38.6 L14.7 39.7 L9.1 38.5 L15.2 37.4 L7.5 36.2 L15.1 35.0 L11.9 33.8 L14.7 32.6 L9.7 31.5 Z'/%3E%3Cpath d='M12.4 37.1 L25.0 36.2 L37.7 36.2 L50.4 36.2 L63.1 36.6 L75.7 37.3 L88.4 37.1 L101.1 35.8 L113.8 35.9 L126.4 37.6 L139.1 36.2 L151.8 36.6 L164.5 36.2 L177.1 35.9 L189.8 36.7 L202.5 37.6 L215.2 37.3 L227.8 35.7 L240.5 35.6 L244.0 37.7 L240.0 38.9 L247.8 40.1 L240.9 41.2 L243.9 42.4 L240.8 43.6 L245.6 44.8 L241.1 46.0 L240.5 45.2 L227.8 46.5 L215.2 45.0 L202.5 45.7 L189.8 46.0 L177.1 45.0 L164.5 45.3 L151.8 45.9 L139.1 47.1 L126.4 46.5 L113.8 47.0 L101.1 47.0 L88.4 46.4 L75.7 47.1 L63.1 45.8 L50.4 46.7 L37.7 46.7 L25.0 46.1 L12.4 46.4 L11.4 46.0 L4.4 44.8 L12.7 43.6 L5.9 42.4 L13.1 41.2 L7.6 40.1 L12.9 38.9 L7.4 37.7 Z'/%3E%3Cpath d='M18.7 43.8 L30.8 43.2 L43.0 42.7 L55.1 42.2 L67.3 43.2 L79.5 42.5 L91.6 43.3 L103.8 42.2 L115.9 42.2 L128.1 42.6 L140.3 41.9 L152.4 44.0 L164.6 43.1 L176.7 43.5 L188.9 41.9 L201.1 41.9 L213.2 42.6 L225.4 43.2 L237.5 43.9 L245.9 44.1 L238.5 45.2 L243.3 46.4 L237.6 47.5 L246.4 48.6 L238.1 49.8 L243.6 50.9 L238.1 52.1 L237.5 52.4 L225.4 52.0 L213.2 51.4 L201.1 51.9 L188.9 51.3 L176.7 51.8 L164.6 52.7 L152.4 52.8 L140.3 52.1 L128.1 52.7 L115.9 52.4 L103.8 52.4 L91.6 52.0 L79.5 51.7 L67.3 52.4 L55.1 52.4 L43.0 52.3 L30.8 51.5 L18.7 52.4 L18.4 52.1 L12.6 50.9 L18.0 49.8 L12.8 48.6 L19.6 47.5 L14.9 46.4 L18.4 45.2 L11.1 44.1 Z'/%3E%3Cpath d='M20.3 50.2 L32.3 50.2 L44.3 48.9 L56.3 49.9 L68.3 50.0 L80.4 49.3 L92.4 49.1 L104.4 48.9 L116.4 48.8 L128.4 48.9 L140.4 50.0 L152.4 49.9 L164.4 50.0 L176.5 49.7 L188.5 48.6 L200.5 50.2 L212.5 50.2 L224.5 49.7 L236.5 49.2 L238.9 50.7 L235.7 51.7 L239.3 52.7 L236.1 53.8 L242.6 54.8 L235.5 55.8 L242.1 56.8 L235.9 57.8 L236.5 57.7 L224.5 58.0 L212.5 58.1 L200.5 58.7 L188.5 56.9 L176.5 57.0 L164.4 57.2 L152.4 56.9 L140.4 58.1 L128.4 58.7 L116.4 59.0 L104.4 57.2 L92.4 59.0 L80.4 58.4 L68.3 57.3 L56.3 58.3 L44.3 56.7 L32.3 57.5 L20.3 58.1 L20.4 57.8 L14.0 56.8 L20.5 55.8 L16.0 54.8 L20.4 53.8 L18.1 52.7 L20.3 51.7 L15.8 50.7 Z'/%3E%3Cpath d='M26.3 55.1 L37.5 56.4 L48.7 55.0 L59.9 55.2 L71.1 56.8 L82.3 56.0 L93.5 55.6 L104.6 56.9 L115.8 55.4 L127.0 56.4 L138.2 56.1 L149.4 56.0 L160.6 55.8 L171.8 57.2 L183.0 55.0 L194.1 56.3 L205.3 55.8 L216.5 55.0 L227.7 56.7 L231.5 57.0 L228.7 58.0 L232.7 59.0 L228.4 60.0 L230.0 61.0 L228.0 62.0 L235.2 63.0 L227.3 63.9 L227.7 64.7 L216.5 64.8 L205.3 64.2 L194.1 64.2 L183.0 64.5 L171.8 62.9 L160.6 63.5 L149.4 65.1 L138.2 63.3 L127.0 65.1 L115.8 63.0 L104.6 64.2 L93.5 63.8 L82.3 63.7 L71.1 63.3 L59.9 63.5 L48.7 64.7 L37.5 64.0 L26.3 64.6 L25.4 63.9 L22.4 63.0 L27.2 62.0 L21.4 61.0 L27.0 60.0 L23.2 59.0 L27.0 58.0 L23.0 57.0 Z'/%3E%3Ccircle cx='248.0' cy='20.6' r='1.3'/%3E%3Ccircle cx='252.5' cy='57.1' r='1.0'/%3E%3Ccircle cx='4.1' cy='46.9' r='1.4'/%3E%3Ccircle cx='20.5' cy='35.8' r='0.8'/%3E%3Ccircle cx='6.8' cy='56.6' r='1.2'/%3E%3Ccircle cx='257.7' cy='52.5' r='1.5'/%3E%3Ccircle cx='15.8' cy='41.7' r='0.9'/%3E%3Ccircle cx='18.5' cy='44.8' r='1.5'/%3E%3Ccircle cx='250.5' cy='17.1' r='1.5'/%3E%3Ccircle cx='3.6' cy='42.8' r='1.6'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.story-dialogue[data-speaker="customer"] .story-speaker { color: #c2255c; --brush: #f9c4d2; }
.story-dialogue[data-speaker="shopkeeper"] .story-speaker { color: #2b6e2e; --brush: #cde8c6; }
.story-text { font-size: 29px; line-height: 39px; margin-bottom: 22px; color: #3b2414; white-space: pre-line; } /* a \n in a line breaks it there */
.story-actions { display: flex; justify-content: center; }
.story-actions button { --button-width: 250px; font-family: "Pangolin", sans-serif; font-size: 30px; line-height: 36px; }
.story-hint { font-size: 19px; line-height: 24px; color: #8a6a4b; margin-top: 12px; }

/* ── End screen (win / time up / out of moves). The gradient, decorations and the hero
   Rangoli are drawn in Pixi (END_SCREEN in config.js, centre y 388, radius 158): the
   heading block sits above it and the summary below it. ── */
.end-screen { position: absolute; inset: 0; font-family: "Pangolin", sans-serif; }
/* Until the Rangoli has filled in, the text and buttons wait out of sight (and can't be
   pressed); then each eases in from its side after its --reveal-delay. */
.end-from-top, .end-from-bottom {
  opacity: 0; pointer-events: none;
  transition: opacity var(--reveal-ms, 700ms) ease-out var(--reveal-delay, 0ms),
    transform var(--reveal-ms, 700ms) cubic-bezier(.22,.61,.36,1) var(--reveal-delay, 0ms);
}
.end-from-top { transform: translateY(calc(-1 * var(--reveal-distance, 18px))); }
.end-from-bottom { transform: translateY(var(--reveal-distance, 18px)); }
.end-revealed .end-from-top, .end-revealed .end-from-bottom { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .end-from-top, .end-from-bottom { transition: none; } }
.end-header {
  position: absolute; left: 0; right: 0; top: 82px; height: 142px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.end-heading { font-family: "Pangolin", sans-serif; font-weight: normal; font-size: 44px; line-height: 52px; color: #3b2a1a; margin: 0 40px; text-align: center; }
.end-text { font-size: 23px; line-height: 30px; color: #8a5a2b; margin: 8px 40px 0; text-align: center; }
.end-summary { position: absolute; left: 0; right: 0; top: 566px; display: flex; flex-direction: column; align-items: center; }
.end-score { display: flex; align-items: baseline; gap: 10px; font-size: 24px; line-height: 44px; color: #6b4a2b; }
.end-score span { font-size: 40px; color: #3b2a1a; }
.end-colors { display: flex; justify-content: center; gap: 30px; margin-top: 10px; }
.end-color { display: flex; align-items: center; gap: 12px; color: #3b2a1a; font-family: "Pangolin", sans-serif; font-weight: normal; font-size: 26px; }
.end-color-icon { position: relative; width: 52px; height: 52px; }
.end-color-mark { position: absolute; right: -10px; bottom: -6px; transform-origin: 100% 100%; } /* ✓ when collected, ✗ when not */
.end-buttons { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 66px; }
.end-buttons .icon-text-button .icon-button-icon { margin-inline-end: 12px; } /* icon and label centred together */
/* Play Again / Try Again first (the larger label), then Share; same width */
.end-screen .end-replay, .end-screen .end-share { --button-width: 280px; --flat-aspect: 280 / 74; font-size: 28px; }
/* Home: top bar, right of the Sound button (same size and colour) */
.end-home-button { position: absolute; left: 64px; top: 0; z-index: 5; color: #00859a; }
/* Gift: at the top right (the optional Diwali gift; gift.js) */
.end-gift-button { position: absolute; right: 0; top: 0; z-index: 5; color: #00859a; border: none; border-radius: 0; margin: 14.5px 14px 0 0; line-height: 0; } /* 51 px: centred on the 56 px Sound / Home icons' line */

/* The gift card over the game (components/gift-modal.js): the creator's photo in a circle on
   its top edge, then the amounts, a message and Send; or the pay step (QR / UPI ID). */
.gift-modal { position: absolute; inset: 0; z-index: 8; font-family: "Pangolin", sans-serif; pointer-events: auto; }
.gift-modal[hidden], .gift-modal [hidden] { display: none !important; }
.gift-scrim { position: absolute; inset: 0; background: rgba(59, 42, 26, .5); }
.gift-card {
  position: absolute; left: 22px; right: 22px; top: 50%; transform: translateY(-50%);
  padding: 30px 26px 24px; border-radius: 34px; background: #fff8ea; text-align: center;
  box-shadow: 0 14px 40px rgba(59, 42, 26, .3); display: flex; flex-direction: column; align-items: center;
}
.gift-step { display: flex; flex-direction: column; align-items: center; width: 100%; }
.gift-close { position: absolute; right: 26px; top: 26px; margin: 0; border: none; color: #6b4a2b; line-height: 0; }
/* The creator's photo in a soft round frame, a little gift on its edge */
.gift-avatar {
  position: relative; flex: none; width: 128px; height: 128px; margin: 4px 0 16px; border-radius: 50%;
  background: #fde2b0; border: 6px solid #fffdf8; box-shadow: 0 0 0 1.5px #f1d9bd, 0 6px 16px rgba(59, 42, 26, .16);
  display: flex; align-items: center; justify-content: center;
}
.gift-avatar-photo { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.gift-avatar-initial { font-size: 60px; line-height: 1; color: #c8553d; }
.gift-avatar-badge {
  position: absolute; right: -12px; bottom: -4px; width: 48px; height: 48px; border-radius: 50%;
  background: #fffdf8; box-shadow: 0 2px 8px rgba(59, 42, 26, .22); font-size: 26px; line-height: 48px;
}
.gift-heading { margin: 0 8px 18px; font-family: "Pangolin", sans-serif; font-weight: normal; font-size: 36px; line-height: 44px; color: #3b2414; -webkit-text-stroke: .6px currentColor; }
.gift-text { margin: 0 0 18px; font-size: 20px; line-height: 27px; color: #6b4a2b; }
/* Four equal pills in a soft peach tray: the amounts, and "₹ Other" to type one */
.gift-amounts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; box-sizing: border-box;
  padding: 12px; border-radius: 26px; background: #fdeee3;
}
.gift-pill {
  box-sizing: border-box; height: 56px; min-width: 0; border-radius: 28px; border: 2px solid #e3a593; background: #fffdf8;
  font-family: "Pangolin", sans-serif; font-size: 25px; color: #c8553d;
}
.gift-amount { padding: 0; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.gift-amount[aria-checked="true"] { background: #c8553d; border-color: #c8553d; color: #fff8ea; }
.gift-custom { display: flex; align-items: center; justify-content: center; padding: 0 10px; border-color: #ead2bf; color: #9a7b62; }
.gift-custom-active { border-color: #c8553d; color: #c8553d; }
.gift-custom-input {
  width: 100%; min-width: 0; border: none; outline: none; background: none; padding: 0 0 0 3px;
  font-family: "Pangolin", sans-serif; font-size: 23px; color: #3b2a1a;
}
.gift-custom-input::placeholder { color: #9a7b62; }
.gift-message {
  width: 100%; box-sizing: border-box; height: 60px; margin-top: 16px; padding: 0 22px; border-radius: 22px;
  border: 1.5px solid #ecdcc8; background: #f6efe5; outline: none;
  font-family: "Pangolin", sans-serif; font-size: 22px; color: #3b2a1a;
}
.gift-message:focus { border-color: #e3a593; background: #fffdf8; }
.gift-message::placeholder { color: #8e7660; }
.gift-modal .gift-send { --button-width: 380px; --flat-aspect: 380 / 84; margin-top: 22px; font-family: "Pangolin", sans-serif; font-size: 27px; text-decoration: none; }

.gift-send-waiting { opacity: .7; }
.gift-later { margin-top: 6px; padding: 8px 16px; border: none; background: none; font-family: "Pangolin", sans-serif; font-size: 21px; color: #8a5a2b; cursor: pointer; }
.gift-note { margin: 10px 0 0; font-size: 18px; line-height: 24px; color: #8a7a66; }
.gift-bmc { margin-top: 6px; font-size: 15px; line-height: 20px; color: #8a5a2b; }
.gift-qr { line-height: 0; margin: 2px 0 10px; }
.gift-qr canvas { border-radius: 14px; box-shadow: 0 2px 10px rgba(59, 42, 26, .15); }
.gift-upi { margin: 0; font-size: 20px; line-height: 26px; color: #3b2a1a; word-break: break-all; }
.gift-upi-label { color: #8a7a66; font-size: 16px; }
.gift-pay-links { display: flex; gap: 18px; justify-content: center; margin-top: 4px; }
.gift-link-button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 4px; border: none; background: none; font-family: "Pangolin", sans-serif; font-size: 19px; color: #c8553d; text-decoration: underline; cursor: pointer; }
.gift-copy-icon { flex-shrink: 0; }
.gift-preview-note { margin: 6px 0 0; font-size: 14px; color: #b0412b; }
.gift-toast {
  position: absolute; left: 50%; bottom: -54px; transform: translateX(-50%); white-space: nowrap;
  padding: 8px 18px; border-radius: 18px; background: #3b2a1a; color: #fff8e7; font-size: 18px;
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
.gift-toast-visible { opacity: 1; }
/* The win view steps aside (fades) while "Save your Rangoli" is open. */
.end-content { position: absolute; inset: 0; transform: translateY(var(--mid, 0px)); transition: opacity .25s ease; } /* centred on a tall phone, with the Rangoli */
.end-content.end-away { opacity: 0; pointer-events: none; }
/* Download: the owner's ringed ↓, just off the Rangoli's lower right (placed from SAVE_RANGOLI);
   the ring is the button, nothing behind it */
.end-download-wrap { position: absolute; }
.end-download-button { /* a filled orange chalk disc with a cream arrow into a tray, and the orange buttons' shadow */
  margin: 0; border: none; border-radius: 50%; background: none; line-height: 0; overflow: visible;
  display: flex; align-items: center; justify-content: center; color: #D9652A;
  filter: drop-shadow(0 3px 0 #A8441B); transition: transform .15s ease-out;
}
.end-download-button:hover { transform: scale(1.06); }
.end-download-button:active { transform: scale(.96); }
.end-download-button .icon-button-icon { flex-shrink: 0; } /* a little wider than the button: only its ring's margin spills over */

/* ── Save your Rangoli (components/save-rangoli-view.js): over the end screen's gradient ── */
.save-view { position: absolute; inset: 0; z-index: 4; font-family: "Pangolin", sans-serif; }
.save-view[hidden] { display: none; }
/* Back: the owner's ringed ← icon, top left, teal like Sound */
.save-back { position: absolute; left: 0; top: 0; z-index: 5; color: #00859a; }
.end-toolbar { position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 5; } /* Home and Gift: the end screen's top bar */
.save-header { position: absolute; left: 0; right: 0; top: calc(116px + var(--mid, 0px)); text-align: center; }
.save-heading { font-family: "Pangolin", sans-serif; font-weight: normal; font-size: 44px; line-height: 52px; color: #3b2a1a; margin: 0 40px; }
.save-text { font-size: 23px; line-height: 30px; color: #8a5a2b; margin: 8px auto 0; max-width: 270px; }
.save-polaroid { position: absolute; left: 50%; transform: translate(-50%, -50%); line-height: 0; } /* top: SAVE_RANGOLI.preview.centreY */
.save-polaroid canvas { transform: rotate(-3deg); transform-origin: 50% 50%; }
.save-actions { position: absolute; left: 0; right: 0; top: calc(792px + var(--mid, 0px)); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.save-view .save-device { --button-width: 300px; font-size: 30px; }
.save-device[aria-busy="true"] { opacity: .8; }
.save-open-image { background: none; border: none; padding: 4px 8px; font-family: "Pangolin", sans-serif; font-size: 18px; color: #8a5a2b; text-decoration: underline; }
.save-open-image[hidden] { display: none; }
.save-fallback {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 24px; background: rgba(40, 24, 10, .9); color: #fff; text-align: center;
}
.save-fallback-image { max-width: 86%; max-height: 66%; box-shadow: 0 8px 30px rgba(0, 0, 0, .4); }
.save-fallback-hint { font-size: 21px; line-height: 28px; max-width: 420px; }
.save-fallback-done { --button-width: 200px; font-family: "Pangolin", sans-serif; font-size: 28px; }

.end-share-toast {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); white-space: nowrap; z-index: 7;
  padding: 6px 16px; border-radius: 100px; background: #3b2a1a; color: #fff;
  font-family: "Pangolin", sans-serif; font-size: 20px; line-height: 26px; opacity: 0; transition: opacity .2s;
}
.end-share-toast:empty { visibility: hidden; }
.end-share-toast-visible { opacity: 1; }


/* ── Desktop page around the game (src/desktop-page.js): wide screens with a mouse only.
   The game stays phone-sized in the middle; a welcome on the left, the creator and the
   optional gift on the right, on warm cream with two faint Rangolis. ── */
.desktop-side { display: none; }
@media (min-width: 1100px) and (min-height: 600px) and (hover: hover) and (pointer: fine) {
  /* The Polaroid's terracotta (with its faint white dots), so the cream game is what catches the eye. */
  body {
    background:
      radial-gradient(circle, rgba(255, 255, 255, .1) 1.6px, transparent 2.2px) 0 0 / 30px 30px,
      radial-gradient(circle, rgba(255, 255, 255, .1) 1.6px, transparent 2.2px) 15px 15px / 30px 30px,
      radial-gradient(ellipse at 50% 45%, #bd654f 0%, #ad5743 70%, #9c4c3a 100%) #ad5743;
    background-attachment: fixed;
  }
  .page { gap: clamp(40px, 5vw, 96px); }
  .game-box { flex-shrink: 0; border-radius: 22px; box-shadow: 0 18px 50px rgba(60, 20, 8, .38); }
  .desktop-side {
    display: flex; flex-direction: column; justify-content: center; gap: 22px; position: relative; z-index: 1;
    width: clamp(220px, 21vw, 320px); font-family: "Pangolin", sans-serif; color: #fff3e2;
  }
  .desktop-title { margin: 0 0 0 -8px; font-size: 56px; line-height: 70px; } /* the logo (.brand-title), as on the start screen */

  .desktop-about { margin: -6px 0 0; font-size: 20px; line-height: 29px; color: #fff3e2; }
  .desktop-by { position: relative; margin: 0; display: flex; align-items: center; gap: 8px; font-size: 17px; color: #f6d9bf; }
  .desktop-by-name {
    display: inline-flex; align-items: center; gap: 7px; padding: 2px 4px; margin: 0 -4px; border: none; border-radius: 16px;
    background: none; font: inherit; color: #fff3e2;
  }
  button.desktop-by-name { cursor: pointer; }
  button.desktop-by-name:focus-visible { outline: 2px solid #ffd27a; outline-offset: 2px; }
  .desktop-by-avatar {
    position: relative; z-index: 1; flex: none; width: 26px; height: 26px; border-radius: 50%; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fde2b0; border: 1.5px solid #fff3e2; box-shadow: 0 1px 4px rgba(60, 20, 8, .25);
    font-size: 13px; line-height: 1; color: #c8553d;
  }
  .desktop-by-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  /* The creator's links: two circles like the photo's, sliding out from behind it to the right
     (and back in, to the left, when closed); --i: 1, 2 = how far each travels */
  .desktop-social { position: absolute; top: 50%; z-index: 0; display: flex; align-items: center; gap: 6px; transform: translateY(-50%); }
  .desktop-social-link {
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 29px; height: 29px; border-radius: 50%; /* the photo's size, border included */
    background: #fde2b0; border: 1.5px solid #fff3e2; box-shadow: 0 1px 4px rgba(60, 20, 8, .25); color: #4a2c14;
    opacity: 0; transform: translateX(calc(var(--i, 1) * -32px)) scale(.6); pointer-events: none;
    transition: transform .28s cubic-bezier(.3, .7, .3, 1), opacity .2s ease, background .15s, color .15s;
  }
  .desktop-social-open .desktop-social-link { opacity: 1; transform: none; pointer-events: auto; transition-delay: calc((var(--i, 1) - 1) * 50ms), calc((var(--i, 1) - 1) * 50ms), 0s, 0s; }
  .desktop-social-link svg { width: 13px; height: 13px; }
  .desktop-social-link:hover { background: #c8553d; color: #fff8ea; }
  .desktop-social-link:focus-visible { outline: 2px solid #ffd27a; outline-offset: 2px; }
  .desktop-card { padding: 0; } /* just the text and the button, no box */
  .desktop-card-text { margin: 0; font-size: 18px; line-height: 26px; color: #fff3e2; }
  .desktop-gift-button {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 8px 18px 8px 12px; border-radius: 14px; border: 2px solid #fff3e2; cursor: pointer;
    font-family: "Pangolin", sans-serif; font-size: 19px; color: #4a2c12; text-decoration: none; background: #fff3e2; transition: transform .2s ease-out;
  }
  .desktop-gift-button:hover { transform: scale(1.04); }
  .desktop-gift-icon { flex-shrink: 0; color: #c8661f; } /* the sheet's gift, in the game's orange */
  .desktop-gift-button:focus-visible { outline: 3px solid #ffd27a; outline-offset: 3px; }
}

/* Focus rings: the game moves focus to each screen's main button (for keyboards), and phone
   browsers draw their own blue box round it. No ring for taps and clicks; a soft gold ring only
   once the player uses the keyboard (main.js sets html.using-keyboard on Tab / arrow keys). */
button:focus, a:focus, [role="button"]:focus { outline: none; }
html.using-keyboard button:focus-visible, html.using-keyboard a:focus-visible, html.using-keyboard [role="button"]:focus-visible {
  outline: 3px solid #ffbd3a; outline-offset: 3px;
}