/* ==========================================================================
   Pallanguzhi — woodcut desi tokens
   ========================================================================== */
:root {
  --ink: #1e1714;
  --ink-2: #3a2c25;
  --rust: #b4462b;
  --rust-d: #8e3420;
  --mustard: #e7a33a;
  --mustard-l: #f4c46a;
  --paper: #f3e6cc;
  --paper-l: #fbf4e4;
  --paper-d: #e3d0aa;
  --leaf: #3f7150;
  --wood: #5a2513;
  --wood-d: #3a160b;
  --brass-l: #ffe7a0;
  --brass: #d9a33a;
  --serif: 'Fraunces', 'Georgia', serif;
  --sans: 'Jost', 'Futura', 'Avenir Next', system-ui, sans-serif;
  --tamil: 'Arima', 'Noto Sans Tamil', sans-serif;
  --ease-out: cubic-bezier(.2, .9, .25, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  --grain-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .09 0 0 0 0 .07 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .2 0 0 0 0 .05 0 0 0 .32 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-wood: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .19' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .03 0 0 0 0 .01 1.6 0 0 0 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-wall: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='360'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.003 .09' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .03 0 0 0 0 .02 1.5 0 0 0 -.68'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overscroll-behavior: none; }
body {
  background: var(--grain-frame), var(--mustard);
  color: var(--ink);
  font-family: var(--sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
img { -webkit-user-drag: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
[hidden] { display: none !important; }

/* ---------- stage scaling ---------- */
#viewport {
  position: fixed;
  /* keep the stage clear of notches and the home indicator */
  top: env(safe-area-inset-top, 0px); right: env(safe-area-inset-right, 0px);
  bottom: env(safe-area-inset-bottom, 0px); left: env(safe-area-inset-left, 0px);
  /* same mustard + grain as the stamp frame so the letterbox and frame read as one surface */
  background: var(--grain-frame), var(--mustard);
}
#stage {
  position: absolute; left: 50%; top: 50%;
  width: 1280px; height: 720px;
  transform: translate(-50%, -50%) scale(var(--s, 1));
  transform-origin: 50% 50%;
}

/* scalloped woodcut frame (Sweet Karam Coffee style) */
.frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 40; pointer-events: none; }

.screen {
  position: absolute; inset: 16px;
  overflow: hidden;
  opacity: 0; visibility: hidden;
  /* the outgoing screen stays opaque underneath until the incoming one has faded in */
  transition: opacity 0s .5s, visibility 0s .5s;
}
.screen.is-active { opacity: 1; visibility: visible; z-index: 1; transition: opacity .5s var(--ease-out); }

.paper-grain { position: absolute; inset: 0; background: var(--grain-paper); opacity: .55; mix-blend-mode: multiply; pointer-events: none; }

/* ==========================================================================
   TITLE
   ========================================================================== */
#screen-title {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(255, 250, 235, .9), rgba(243, 230, 204, 0) 60%),
    var(--paper);
}
#screen-title::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 120px rgba(120, 70, 20, .22);
}
.t-banana { position: absolute; bottom: -18px; width: 360px; height: auto; pointer-events: none; transform-origin: 55% 100%; animation: sway 9s ease-in-out infinite; filter: drop-shadow(0 10px 18px rgba(80, 60, 20, .18)); }
.t-banana.left { left: -112px; }
.t-banana.right { right: -112px; scale: -1 1; animation-duration: 10.5s; animation-delay: -3s; }
@keyframes sway { 0%, 100% { rotate: -.5deg; } 50% { rotate: .6deg; } }
.t-lotus { position: absolute; bottom: -26px; width: 200px; height: auto; pointer-events: none; transform-origin: 60% 100%; animation: sway 7s ease-in-out infinite; animation-delay: -1.5s; filter: drop-shadow(0 8px 12px rgba(120, 40, 60, .16)); }
.t-lotus.left { left: 52px; }
.t-lotus.right { right: 18px; width: 186px; animation-delay: -4s; }
@keyframes glow { from { opacity: .7; } to { opacity: 1; } }

.t-badge {
  position: absolute; top: 46px; left: 50%; width: 660px; height: 196px;
  transform: translateX(-50%);
  display: grid; place-items: center;
  filter: drop-shadow(0 3px 0 rgba(30, 23, 20, .9)) drop-shadow(0 18px 24px rgba(142, 52, 32, .25));
  animation: badgeIn 1s var(--ease-spring) both;
}
@keyframes badgeIn { from { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(.96); } }
.badge-shape { position: absolute; inset: 0; width: 100%; height: 100%; }
.badge-title {
  position: relative; margin: -14px 0 0;
  font-family: var(--serif); font-weight: 600;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144;
  font-size: 66px; letter-spacing: -.5px; line-height: 1;
  color: var(--paper);
}
.badge-sub {
  position: absolute; bottom: 38px; left: 0; right: 0; text-align: center;
  font-size: 12px; letter-spacing: 4px; text-transform: uppercase; font-weight: 600; color: var(--mustard-l);
}
.badge-ta { position: absolute; top: 50%; font-family: var(--tamil); font-weight: 700; font-size: 14px; color: var(--paper); opacity: .85; transform: translateY(-62%); }
.badge-ta.left { left: 70px; }
.badge-ta.right { right: 70px; }

.t-tagline {
  position: absolute; top: 240px; left: 0; right: 0; margin: 0; text-align: center;
  font-family: var(--serif); font-style: italic; font-size: 21px; color: var(--ink-2);
  font-variation-settings: 'SOFT' 100, 'opsz' 24;
  animation: fadeUp .8s .2s var(--ease-out) both;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } }

.t-cards {
  position: absolute; top: 312px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 26px;
}
.t-card {
  position: relative; width: 224px; height: 200px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 0 14px 20px;
  background: var(--paper-l) var(--grain-paper);
  border: 2.5px solid var(--ink); border-radius: 20px;
  box-shadow: 4px 5px 0 var(--ink);
  transition: transform .25s var(--ease-spring), box-shadow .25s var(--ease-spring);
  animation: fadeUp .7s var(--ease-out) both;
}
.t-card:nth-child(1) { animation-delay: .25s; }
.t-card:nth-child(2) { animation-delay: .35s; }
.t-card:nth-child(3) { animation-delay: .45s; }
.t-card:not(:disabled):hover { transform: translate(-2px, -4px) rotate(-.6deg); box-shadow: 7px 9px 0 var(--ink); }
.t-card:not(:disabled):active { transform: translate(2px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.t-card.primary { background-color: var(--rust); color: var(--paper); }
.t-card.soon { cursor: not-allowed; background-color: #efe3c8; }
.t-card.soon > :not(.stamp) { opacity: .5; }
.t-card-kicker { font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase; font-weight: 600; opacity: .8; }
.t-card-title { font-family: var(--serif); font-weight: 650; font-size: 27px; line-height: 1.05; margin: 3px 0 6px; white-space: nowrap; font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 72; }
.t-card-note { font-size: 13px; opacity: .78; }
.t-face {
  position: absolute; top: -34px; left: 50%; width: 106px; height: 106px; margin-left: -53px;
  border-radius: 50%; background: var(--mustard); border: 2.5px solid var(--ink); overflow: hidden;
  box-shadow: 3px 3px 0 var(--ink);
}
.t-face svg { width: 100%; height: 100%; }
.t-card.primary:hover .t-face .p-head { animation: nod .6s var(--ease-out); }
.t-icon { position: absolute; top: 22px; left: 50%; width: 176px; height: 80px; margin-left: -88px; }
.t-icon svg { width: 100%; height: 100%; overflow: visible; }
.t-card:not(:disabled):hover .board-icon { animation: nod .6s var(--ease-out); }
.stamp {
  position: absolute; top: 16px; right: 10px; padding: 5px 10px;
  border: 2.5px solid var(--rust); color: var(--rust); border-radius: 8px;
  font-weight: 700; font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
  transform: rotate(9deg); background: rgba(251, 244, 228, .7);
  mask-image: var(--grain-paper); -webkit-mask-image: var(--grain-paper);
  mask-size: 140px; -webkit-mask-size: 140px;
}

.t-options {
  position: absolute; top: 534px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 34px; align-items: flex-start; white-space: nowrap;
  animation: fadeUp .8s .55s var(--ease-out) both;
}
.opt { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.opt-label { font-size: 11.5px; letter-spacing: 2.4px; text-transform: uppercase; font-weight: 600; color: var(--rust-d); }
.chips { display: flex; align-items: center; padding: 4px; gap: 2px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper-l); box-shadow: 2px 3px 0 var(--ink); }
.chips button {
  height: 36px; padding: 0 16px; border-radius: 999px; font-size: 14.5px; font-weight: 500; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .2s, color .2s;
}
.chips button:hover { background: rgba(231, 163, 58, .25); }
.chips button.on { background: var(--ink); color: var(--paper); }
.chips button:focus-visible { outline: 2px solid var(--rust); outline-offset: 1px; }
.seed-swatch { position: relative; display: block; }

.t-links {
  position: absolute; top: 614px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; white-space: nowrap;
  font-family: var(--serif); font-style: italic; font-size: 17px;
  animation: fadeUp .8s .65s var(--ease-out) both;
}
.t-links a, .t-links button { color: var(--rust-d); text-decoration: none; border-bottom: 1.5px dashed currentColor; padding-bottom: 1px; font: inherit; }
.t-links a:hover, .t-links button:hover { color: var(--ink); }
.t-links span { color: var(--rust-d); opacity: .5; }
.t-links a[lang='ta'] { font-family: var(--tamil); font-style: normal; font-size: 15px; }
.t-credit {
  position: absolute; top: 648px; left: 0; right: 0; margin: 0; text-align: center;
  font-size: 12.5px; letter-spacing: .4px; color: var(--ink-2); opacity: .62;
  animation: fadeUp .8s .75s var(--ease-out) both;
}
.t-credit a { color: var(--rust-d); font-weight: 600; text-decoration: none; border-bottom: 1px dashed currentColor; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ==========================================================================
   GAME SCENE
   ========================================================================== */
#screen-game { background: var(--rust); }
.wall {
  position: absolute; left: 0; right: 0; top: 0; height: 366px;
  background:
    repeating-linear-gradient(180deg, transparent 0 52px, rgba(30, 23, 20, .5) 52px 54px, rgba(255, 190, 140, .08) 54px 56px),
    linear-gradient(180deg, #a63f26, #b4462b 60%, #9c3a22);
}
.wall-grain, .table-grain { position: absolute; inset: 0; background: var(--grain-wall); background-size: 1200px 360px; opacity: .8; mix-blend-mode: multiply; }
.wall::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 70% at 50% 30%, rgba(255, 210, 140, .22), transparent 70%),
              radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, .25), transparent 60%);
}
.table {
  position: absolute; left: 0; right: 0; top: 366px; bottom: 0;
  background: linear-gradient(180deg, #2a201b, #1b1411 70%);
  border-top: 3px solid var(--ink);
}
.table::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(178.6deg, transparent 0 9px, rgba(255, 220, 180, .045) 9px 10px, transparent 10px 23px);
}
.table-grain { background-image: var(--grain-wood); opacity: .5; mix-blend-mode: screen; filter: invert(1); }

.lamp-slot { position: absolute; top: -18px; width: 126px; pointer-events: none; z-index: 1; }
.lamp-slot.l1 { left: 300px; }
.lamp-slot.l2 { left: 818px; }
.lamp-slot svg { width: 100%; height: auto; display: block; overflow: visible; }
.lamp-swing { animation: lampSwing 9s ease-in-out infinite; }
.l2 .lamp-swing { animation-duration: 11s; animation-delay: -4s; }
@keyframes lampSwing { 0%, 100% { rotate: -.8deg; } 50% { rotate: .8deg; } }
.lamp-glow { animation: lampBreath 6s ease-in-out infinite alternate; }
.lamp-cone { animation: lampBreath 6s ease-in-out infinite alternate; transform-origin: 80px 0; mix-blend-mode: screen; }
.lamp-bulb { animation: bulb 7s infinite; }
@keyframes lampBreath { from { opacity: .78; } to { opacity: 1; } }
@keyframes bulb { 0%, 46%, 50%, 100% { opacity: 1; } 48% { opacity: .82; } }

.g-logo { position: absolute; left: 30px; top: 22px; color: var(--paper); line-height: 1; }
.g-logo-en { display: block; font-family: var(--serif); font-weight: 650; font-size: 32px; font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 72; text-shadow: 0 2px 0 var(--ink); }
.g-logo-ta { display: block; font-family: var(--tamil); font-size: 14px; color: var(--mustard-l); margin-top: 4px; letter-spacing: .5px; }

.g-tools { position: absolute; right: 26px; top: 22px; display: flex; gap: 10px; }
.tool {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper); border: 2.5px solid var(--ink); box-shadow: 2px 3px 0 var(--ink);
  font-family: var(--serif); font-weight: 700; font-size: 22px;
  transition: transform .2s var(--ease-spring), box-shadow .2s;
}
.tool:hover { transform: translateY(-2px); box-shadow: 3px 5px 0 var(--ink); }
.tool:active { transform: translateY(1px); box-shadow: 1px 1px 0 var(--ink); }
.tool svg { width: 22px; height: 22px; }
.tool .speed-label { font-family: var(--sans); font-size: 15px; font-weight: 700; }
.tool.muted .waves { opacity: 0; }
.tool.muted { background: var(--paper-d); }

/* carved teak plaque, screwed onto the wall */
.nameplate {
  position: absolute; left: 290px; top: 206px; z-index: 1;
  padding: 11px 34px 12px; text-align: center;
  background:
    var(--grain-wood),
    radial-gradient(ellipse at 40% 20%, rgba(255, 190, 130, .25), transparent 60%),
    linear-gradient(180deg, #7a3a1c, #5a2612 60%, #431a0b);
  background-size: 500px 160px, auto, auto;
  border: 2.5px solid var(--ink); border-radius: 12px;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 210, 160, .35), inset 0 -2px 0 rgba(0, 0, 0, .3),
    0 2px 0 #2a0e05, 0 3.5px 0 var(--ink),
    0 12px 18px rgba(40, 8, 0, .45);
}
.nameplate::before {
  content: ''; position: absolute; inset: 5px 22px; border-radius: 7px; pointer-events: none;
  border: 1px solid rgba(231, 163, 58, .55);
  box-shadow: inset 0 0 0 2.5px rgba(0, 0, 0, .2), 0 0 0 2.5px rgba(0, 0, 0, .15);
}
.screw {
  position: absolute; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #e2ac44 45%, #7a4a0c 95%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .6), inset 0 0 0 .8px rgba(0, 0, 0, .4);
}
.screw::after { content: ''; position: absolute; left: 1.5px; right: 1.5px; top: 50%; height: 1.4px; margin-top: -.7px; background: #5a3608; transform: rotate(-35deg); }
.screw.l { left: 8px; } .screw.r { right: 8px; }
.screw.r::after { transform: rotate(50deg); }
.np-name {
  position: relative; display: block; font-family: var(--serif); font-weight: 700; font-size: 23px; line-height: 1.1;
  font-variation-settings: 'SOFT' 100, 'WONK' 1; color: #f6d48a;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 220, 160, .25);
}
.np-mood { position: relative; display: block; margin-top: 2px; font-size: 10.5px; letter-spacing: 2.2px; text-transform: uppercase; font-weight: 600; color: rgba(243, 230, 204, .7); }

/* Paati */
.paati-slot { position: absolute; left: 486px; top: 32px; width: 276px; height: 313px; z-index: 2; }
.paati-slot svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 10px 16px rgba(40, 10, 0, .35)); }
.paati .e, .paati .m { opacity: 0; }
.paati .p-breathe { animation: breathe 4.2s ease-in-out infinite; transform-origin: 150px 340px; }
@keyframes breathe { 0%, 100% { scale: 1 1; } 50% { scale: 1.006 1.012; } }
.paati .p-head { transform-origin: 150px 190px; transition: rotate .5s var(--ease-out), translate .5s var(--ease-out); }
.paati .blink { transform-origin: 150px 118px; animation: blink 5.2s infinite; }
@keyframes blink { 0%, 95%, 100% { scale: 1 1; } 97% { scale: 1 .1; } }
.paati .p-steam path { animation: steam 3.2s ease-in-out infinite; stroke-dasharray: 60; }
.paati .p-steam path:nth-child(2) { animation-delay: -1.1s; }
.paati .p-steam path:nth-child(3) { animation-delay: -2.2s; }
@keyframes steam { 0% { stroke-dashoffset: 60; opacity: 0; translate: 0 6px; } 30% { opacity: .9; } 100% { stroke-dashoffset: -60; opacity: 0; translate: 0 -10px; } }
.paati .p-mookuthi circle:last-child { animation: sparkle 2.6s ease-in-out infinite; }
@keyframes sparkle { 0%, 80%, 100% { opacity: .9; } 90% { opacity: .2; } }
.paati .p-brows path { transition: translate .3s var(--ease-out), rotate .3s; transform-box: fill-box; transform-origin: center; }

/* moods — big, readable, theatrical */
.paati .fx { opacity: 0; transition: opacity .25s; transform-box: fill-box; transform-origin: center; }
.paati .p-cheek { transition: opacity .4s, scale .4s var(--ease-spring); transform-box: fill-box; transform-origin: center; }
.paati .p-specs { transition: translate .35s var(--ease-spring); }
.paati .p-jimikki { animation: jhumka 3.4s ease-in-out infinite; }
.paati .p-jimikki + .p-jimikki { animation-delay: -1.2s; }
@keyframes jhumka { 0%, 100% { rotate: -5deg; } 50% { rotate: 5deg; } }

.paati[data-mood='normal'] .e-normal, .paati[data-mood='normal'] .m-smile,
.paati[data-mood='happy'] .e-happy, .paati[data-mood='happy'] .m-laugh, .paati[data-mood='happy'] .fx-happy,
.paati[data-mood='think'] .e-think, .paati[data-mood='think'] .m-smug, .paati[data-mood='think'] .fx-think,
.paati[data-mood='shock'] .e-wide, .paati[data-mood='shock'] .m-o, .paati[data-mood='shock'] .fx-shock,
.paati[data-mood='smug'] .e-smug, .paati[data-mood='smug'] .m-smug, .paati[data-mood='smug'] .fx-smug,
.paati[data-mood='sad'] .e-normal, .paati[data-mood='sad'] .m-o, .paati[data-mood='sad'] .fx-sad { opacity: 1; }

.paati[data-mood='happy'] .p-head { animation: laughBob .32s ease-in-out 6; rotate: -3deg; }
.paati[data-mood='happy'] .p-cheek { scale: 1.25; }
.paati[data-mood='happy'] .p-specs { translate: 0 -2px; }
.paati[data-mood='happy'] .b-l, .paati[data-mood='happy'] .b-r { translate: 0 -3px; }
.paati[data-mood='happy'] .fx-happy { animation: fxPulse .5s ease-in-out infinite alternate; }
.paati[data-mood='happy'] .p-jimikki { animation-duration: .5s; }

.paati[data-mood='think'] .p-head { rotate: -6deg; translate: -2px 0; }
.paati[data-mood='think'] .b-l { translate: 0 -4px; rotate: -8deg; }
.paati[data-mood='think'] .b-r { translate: 0 2px; rotate: 6deg; }
.paati[data-mood='think'] .fx-think circle { animation: thinkDot 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.paati[data-mood='think'] .fx-think circle:nth-child(2) { animation-delay: .2s; }
.paati[data-mood='think'] .fx-think circle:nth-child(3) { animation-delay: .4s; }

.paati[data-mood='shock'] .p-head { animation: jolt .45s var(--ease-spring); }
.paati[data-mood='shock'] .p-brows path { translate: 0 -8px; }
.paati[data-mood='shock'] .p-specs { translate: 0 -5px; }
.paati[data-mood='shock'] .fx-shock { animation: fxPop .4s var(--ease-spring) both; }
.paati[data-mood='shock'] .p-cheek { opacity: .4; }

.paati[data-mood='smug'] .p-head { rotate: 5deg; }
.paati[data-mood='smug'] .b-r { translate: 0 -6px; rotate: 10deg; }
.paati[data-mood='smug'] .b-l { translate: 0 2px; }
.paati[data-mood='smug'] .p-specs { translate: 0 2px; }
.paati[data-mood='smug'] .fx-smug { animation: twinkle 1.2s ease-in-out infinite; }

.paati[data-mood='sad'] .b-l { rotate: 14deg; translate: 0 -2px; }
.paati[data-mood='sad'] .b-r { rotate: -14deg; translate: 0 -2px; }
.paati[data-mood='sad'] .p-head { rotate: 3deg; translate: 0 3px; }

@keyframes laughBob { 50% { translate: 0 4px; rotate: 1deg; } }
@keyframes jolt { 30% { translate: 0 -10px; } }
@keyframes nod { 40% { rotate: 6deg; } }
@keyframes fxPulse { from { scale: .9; } to { scale: 1.12; } }
@keyframes fxPop { from { scale: .2; opacity: 0; } }
@keyframes thinkDot { 50% { translate: 0 -3px; } }
@keyframes twinkle { 50% { scale: .6; opacity: .5; } }
/* lip-sync while text types */
.paati.talking[data-mood='normal'] .m-smile, .paati.talking[data-mood='smug'] .m-smug { animation: talkA .28s steps(1) infinite; }
.paati.talking[data-mood='normal'] .m-talk, .paati.talking[data-mood='smug'] .m-talk { animation: talkB .28s steps(1) infinite; }
@keyframes talkA { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes talkB { 0% { opacity: 0; } 50% { opacity: 1; } }

/* speech bubble */
.bubble {
  position: absolute; left: 784px; top: 84px; width: 392px; min-height: 96px;
  padding: 16px 20px 15px;
  background: var(--paper-l) var(--grain-paper); border: 2.5px solid var(--ink); border-radius: 20px 20px 20px 6px;
  box-shadow: 4px 5px 0 var(--ink);
  transform-origin: 0 100%;
  z-index: 3;
}
.bubble::before {
  /* a rotated square cut on its diagonal: the outlined half pokes out over the bubble border */
  content: ''; position: absolute; left: -12px; bottom: 24px; width: 22px; height: 22px;
  background: var(--paper-l); border-left: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  transform: rotate(45deg);
}
.bubble.pop { animation: pop .45s var(--ease-spring); }
@keyframes pop { 0% { scale: .9; opacity: .4; } 100% { scale: 1; opacity: 1; } }
.bubble-t { margin: 0; font-family: var(--serif); font-weight: 560; font-size: 21px; line-height: 1.28; font-variation-settings: 'SOFT' 100, 'opsz' 24; min-height: 27px; }
.bubble-rest { visibility: hidden; }
.bubble-e { margin: 6px 0 0; font-size: 14px; font-style: italic; color: #7a6656; opacity: 0; transition: opacity .4s; }
.bubble-e.show { opacity: 1; }
.bubble-actions { display: flex; gap: 10px; margin-top: 12px; }
.bubble-actions:empty { display: none; }
.bubble-dots { position: absolute; right: 18px; bottom: 12px; display: none; gap: 5px; }
.bubble.thinking .bubble-dots { display: flex; }
.bubble-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--rust); animation: dots 1s infinite; }
.bubble-dots i:nth-child(2) { animation-delay: .15s; }
.bubble-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dots { 0%, 100% { opacity: .25; translate: 0 0; } 40% { opacity: 1; translate: 0 -4px; } }

/* ==========================================================================
   BOARD
   ========================================================================== */
.board {
  position: absolute; left: 84px; top: 330px; width: 1080px; height: 252px; z-index: 4;
  border-radius: 64px / 90px;
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(255, 170, 110, .18), transparent 70%),
    linear-gradient(180deg, #74321a 0%, #5a2513 45%, #431a0c 100%);
  border: 3px solid var(--ink);
  box-shadow:
    inset 0 2px 0 rgba(255, 200, 150, .28),
    inset 0 -6px 12px rgba(0, 0, 0, .35),
    0 7px 0 #2a0e05,
    0 9px 0 var(--ink),
    0 26px 40px rgba(0, 0, 0, .6);
}
.board::before {
  content: ''; position: absolute; inset: 9px; border-radius: 56px / 80px;
  border: 1.5px solid rgba(255, 200, 150, .14);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
  pointer-events: none;
}
.board-grain { position: absolute; inset: 0; border-radius: inherit; background: var(--grain-wood); background-size: 900px 300px; opacity: .95; mix-blend-mode: multiply; pointer-events: none; }
.board-inlay {
  position: absolute; left: 150px; right: 150px; top: 125px; height: 2px; margin-top: -1px;
  background: linear-gradient(90deg, transparent, #c8902e 10%, #f1cf7a 50%, #c8902e 90%, transparent);
  opacity: .55;
}
.board-inlay::before, .board-inlay::after {
  content: ''; position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  background: #e8bd5a; transform: rotate(45deg); box-shadow: 0 0 0 2px #5a2513;
}
.board-inlay::before { left: 30%; }
.board-inlay::after { left: 70%; }
.brass { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3c4, #e2ac44 40%, #8a5a12 90%); border: 1.5px solid var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.brass.c1 { left: 62px; top: 4px; } .brass.c2 { right: 62px; top: 4px; }
.brass.c3 { left: 140px; top: 117px; } .brass.c4 { right: 140px; top: 117px; }

.pit, .store {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #150602 0%, #2a1007 48%, #46200e 82%, #5c2a15 100%);
}
.store {
  box-shadow: inset 0 12px 18px rgba(0, 0, 0, .72), inset 0 -3px 6px rgba(255, 180, 120, .14),
    0 0 0 3px rgba(0, 0, 0, .28), 0 0 0 5px rgba(255, 205, 160, .1), 0 0 0 8px rgba(0, 0, 0, .14);
}
/* turned-wood kuzhi: a round bowl with concentric lathe rings around the rim */
.pit {
  width: 90px; height: 90px; margin: -45px 0 0 -45px;
  box-shadow:
    inset 0 11px 16px rgba(0, 0, 0, .74),
    inset 0 -3px 6px rgba(255, 180, 120, .12),
    0 0 0 2.5px rgba(0, 0, 0, .3),
    0 0 0 4.5px rgba(255, 205, 160, .13),
    0 0 0 7.5px rgba(0, 0, 0, .16),
    0 0 0 9px rgba(255, 205, 160, .07);
  transition: transform .2s var(--ease-spring);
}
.pit .glow {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  --gc: rgba(231, 163, 58, .55); --gh: rgba(244, 196, 106, .4);
  box-shadow: 0 0 0 11px var(--gc), 0 0 30px 10px var(--gh);
  opacity: 0; transition: opacity .3s;
}
.pit::before {
  content: ''; position: absolute; inset: 9px; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(255, 190, 140, .06);
  box-shadow: inset 0 -1px 0 rgba(255, 190, 140, .06);
}
.store { width: 106px; height: 204px; top: 24px; border-radius: 50% / 50%; }
.store[data-store='1'] { left: 18px; }
.store[data-store='0'] { right: 18px; }
.store-n {
  position: absolute; left: 50%; bottom: -12px; min-width: 40px; padding: 2px 10px; transform: translateX(-50%);
  background: radial-gradient(circle at 40% 30%, #fff3c4, #e2ac44 50%, #a46d18); border: 2px solid var(--ink); border-radius: 999px;
  font-weight: 700; font-size: 17px; text-align: center; color: var(--ink);
  box-shadow: 0 2px 0 var(--ink);
  z-index: 3;
}
.seeds, .store-seeds { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }

.pit .count {
  position: absolute; right: -8px; min-width: 25px; height: 25px; padding: 0 5px; z-index: 3;
  display: grid; place-items: center;
  font-weight: 700; font-size: 13.5px; color: var(--ink);
  background: radial-gradient(circle at 40% 30%, #fff3c4, #e2ac44 50%, #a46d18);
  border: 1.8px solid var(--ink); border-radius: 999px;
  box-shadow: 0 1.5px 0 var(--ink);
  transition: scale .2s var(--ease-spring);
}
.pit.top .count { top: -8px; }
.pit.bottom .count { bottom: -8px; }
.pit .count.zero { background: #6b3a22; color: #d9b98c; }

.pit.playable { cursor: pointer; }
.pit.playable::after {
  content: ''; position: absolute; inset: -14px; border-radius: 50%;
  border: 2px dashed rgba(244, 196, 106, .42);
  animation: spin 22s linear infinite;
}
@keyframes spin { to { rotate: 360deg; } }
@media (hover: hover) {
  .pit.playable:hover { transform: translateY(-2px); }
  .pit.playable:hover .glow { opacity: 1; }
}
.pit.target .glow { --gc: rgba(255, 228, 150, .65); --gh: rgba(255, 220, 140, .5); opacity: 1; }
.pit.mark-cap .glow { --gc: rgba(127, 212, 139, .85); --gh: rgba(127, 212, 139, .55); opacity: 1; }
.pit.mark-empty .glow { --gc: rgba(243, 230, 204, .55); --gh: transparent; opacity: 1; }
.pit.mark-pasu .glow { --gc: rgba(255, 156, 110, .9); --gh: rgba(255, 140, 90, .6); opacity: 1; }
.pit.dim { opacity: .45; }
.pv { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: var(--mustard-l); box-shadow: 0 0 10px var(--mustard-l); opacity: .85; pointer-events: none; animation: pv .3s var(--ease-spring) both; z-index: 4; }
.pv.last { width: 16px; height: 16px; margin: -8px; background: #fff3c4; }
@keyframes pv { from { scale: 0; } }

.row-glow { position: absolute; left: 140px; width: 800px; height: 112px; border-radius: 60px; pointer-events: none; opacity: 0; transition: opacity .5s; background: radial-gradient(ellipse at 50% 50%, rgba(244, 196, 106, .2), transparent 70%); }
.row-glow.top { top: 14px; }
.row-glow.bottom { top: 124px; }
.row-glow.on { opacity: 1; }

/* ---------- seeds ---------- */
.seed {
  position: absolute; width: 15px; height: 13px; margin: -6.5px 0 0 -7.5px;
  border-radius: 52% 48% 46% 54% / 56% 50% 50% 44%;
  box-shadow: 0 1.6px 1.4px rgba(0, 0, 0, .6);
  rotate: var(--r, 0deg);
}
[data-seed='manjadi'] .seed, .seed-swatch.manjadi {
  background: radial-gradient(circle at 34% 30%, #fff 0 1.3px, #ff8f70 2.4px, #df3a22 4.8px, #a8160d 8.5px, #5c0805 12px);
}
[data-seed='puli'] .seed, .seed-swatch.puli {
  width: 16px; height: 12px; margin: -6px 0 0 -8px; border-radius: 42% 58% 45% 55% / 50%;
  background: radial-gradient(circle at 36% 30%, #ffe0b8 0 1.2px, #b8763e 3px, #73401a 7px, #3d1c08 11px);
}
[data-seed='sozhi'] .seed, .seed-swatch.sozhi {
  width: 21px; height: 17px; margin: -8.5px 0 0 -10.5px; border-radius: 0;
  background: url(../assets/sozhi.webp) center / contain no-repeat;
  box-shadow: none; filter: drop-shadow(0 1.6px 1.2px rgba(0, 0, 0, .6));
}
.seed-swatch { width: 15px; height: 13px; border-radius: 50%; box-shadow: 0 1px 1px rgba(0, 0, 0, .5); flex: none; }
.seed-swatch.sozhi { width: 18px; height: 14px; margin: 0; filter: drop-shadow(0 1px .8px rgba(0, 0, 0, .5)); }
.seed.drop { animation: seedDrop .32s var(--ease-spring) both; }
@keyframes seedDrop { 0% { translate: 0 -26px; scale: 1.25; opacity: .2; } 60% { opacity: 1; } 100% { translate: 0 0; scale: 1; } }

/* ---------- hand, flying seeds, pointer ---------- */
.fly-layer { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.fly-layer .seed { will-change: transform; }
.hand {
  position: absolute; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px; z-index: 21;
  pointer-events: none; opacity: 0; scale: .6;
  transition: translate var(--hand-ms, 220ms) var(--ease-out), opacity .2s, scale .25s var(--ease-spring);
}
.hand.on { opacity: 1; scale: 1; }
.hand::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #f2c8a0, #c98c5c 70%, #a96a3e);
  border: 2.5px solid var(--ink); box-shadow: 0 10px 18px rgba(0, 0, 0, .45);
}
.hand-seeds { position: absolute; left: 50%; top: 50%; }
.hand-n {
  position: absolute; right: -10px; top: -10px; min-width: 28px; height: 28px; padding: 0 6px;
  display: grid; place-items: center;
  background: var(--rust); color: var(--paper); font-weight: 700; font-size: 15px;
  border: 2.2px solid var(--ink); border-radius: 999px;
}

.pointer {
  position: absolute; left: 0; top: 0; width: 56px; height: 64px; z-index: 22; pointer-events: none;
  opacity: 0; transition: opacity .3s;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 64'%3E%3Cpath d='M22 6c0-4 7-4 7 0v22l2-1c0-4 7-4 7 0v3c0-4 7-4 7 0v3c0-4 7-4 7 0v13c0 9-6 16-15 16H30c-6 0-9-3-12-7L7 40c-2-3 2-7 5-5l10 7z' fill='%23F3E6CC' stroke='%231E1714' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  filter: drop-shadow(2px 3px 0 rgba(30, 23, 20, .6));
}
.pointer.on { opacity: 1; animation: pointBob 1s ease-in-out infinite; }
@keyframes pointBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* ---------- labels + narration ---------- */
.store-label {
  position: absolute; top: 596px; width: 140px; text-align: center; color: var(--paper);
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
}
.store-label b { display: block; font-weight: 600; opacity: .7; }
.store-label .sl-n { display: block; font-family: var(--serif); font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: 0; margin-top: 2px; color: var(--mustard-l); }
.store-label.s1 { left: 86px; }
.store-label.s0 { right: 86px; }
.row-label {
  position: absolute; left: 250px; font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase; font-weight: 600;
  color: var(--paper); opacity: .55; z-index: 5;
}
.row-label.top { top: 308px; }
.row-label.bottom { top: 594px; left: 256px; }

.narrate {
  position: absolute; left: 244px; right: 244px; top: 612px; height: 56px; z-index: 6;
  display: flex; align-items: center; gap: 14px; padding: 0 18px 0 10px;
  background: var(--paper) var(--grain-paper); border: 2.5px solid var(--ink); border-radius: 16px;
  box-shadow: 3px 4px 0 #0c0806;
}
.narrate-chip {
  flex: none; padding: 6px 12px; border-radius: 10px; border: 2px solid var(--ink);
  font-size: 11.5px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
  background: var(--mustard);
}
.narrate-chip.paati { background: var(--rust); color: var(--paper); }
.narrate-chip.learn { background: var(--leaf); color: var(--paper); }
.narrate-text { margin: 0; flex: 1; font-size: 16.5px; line-height: 1.22; font-weight: 500; }
.narrate-text b { color: var(--rust-d); }
.narrate-text.swap { animation: narr .35s var(--ease-out); }
@keyframes narr { from { opacity: 0; translate: 0 6px; } }
.narrate-hand { flex: none; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #7a6656; }

/* ==========================================================================
   OVERLAYS
   ========================================================================== */
.overlay {
  position: absolute; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: rgba(30, 23, 20, .55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: fade .3s var(--ease-out);
}
@keyframes fade { from { opacity: 0; } }
.sheet {
  position: relative;
  background: var(--paper-l) var(--grain-paper);
  border: 3px solid var(--ink); border-radius: 24px;
  box-shadow: 7px 8px 0 var(--ink);
  animation: sheetIn .5s var(--ease-spring);
}
@keyframes sheetIn { from { opacity: 0; translate: 0 24px; scale: .96; } }
.sheet-close {
  position: absolute; right: 14px; top: 12px; width: 40px; height: 40px; border-radius: 50%;
  font-size: 28px; line-height: 1; display: grid; place-items: center;
}
.sheet-close:hover { background: rgba(231, 163, 58, .3); }

.btn {
  padding: 12px 24px; border-radius: 14px; border: 2.5px solid var(--ink);
  background: var(--rust); color: var(--paper); font-weight: 600; font-size: 17px;
  box-shadow: 3px 4px 0 var(--ink);
  transition: transform .2s var(--ease-spring), box-shadow .2s;
}
.btn:hover { transform: translate(-1px, -2px); box-shadow: 4px 6px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn.ghost { background: var(--paper-l); color: var(--ink); }
.btn.small { padding: 7px 14px; font-size: 14.5px; border-radius: 11px; box-shadow: 2px 3px 0 var(--ink); }
.btn:disabled { opacity: .35; pointer-events: none; }

/* rules */
.rules-sheet {
  width: 960px; height: 600px; padding: 34px 50px 28px; display: flex; flex-direction: column;
  background:
    radial-gradient(ellipse 70% 60% at 30% 20%, rgba(255, 252, 240, .7), transparent 70%),
    radial-gradient(ellipse at 100% 100%, rgba(196, 140, 70, .18), transparent 60%),
    var(--grain-paper),
    linear-gradient(180deg, #fbf3e1, #f1e2c3);
}
.rules-sheet::before {
  content: ''; position: absolute; inset: 12px; border-radius: 15px; pointer-events: none;
  border: 1.5px solid rgba(142, 52, 32, .55);
  box-shadow: inset 0 0 0 4px rgba(251, 244, 228, .9), inset 0 0 0 5.5px rgba(200, 144, 46, .55);
}
.rules-sheet::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 60px rgba(150, 90, 30, .18);
}
.orn { position: absolute; width: 54px; height: 54px; pointer-events: none; opacity: .85; z-index: 1; }
.orn svg { width: 100%; height: 100%; }
.orn.tl { left: 4px; top: 4px; } .orn.tr { right: 4px; top: 4px; transform: scaleX(-1); }
.orn.bl { left: 4px; bottom: 4px; transform: scaleY(-1); } .orn.br { right: 4px; bottom: 4px; transform: scale(-1); }
.rules-kicker { position: relative; z-index: 2; font-size: 12px; letter-spacing: 2.6px; text-transform: uppercase; font-weight: 600; color: var(--rust-d); text-align: center; }
.rules-kicker .ta { font-family: var(--tamil); letter-spacing: 0; text-transform: none; font-size: 14px; }
.rules-kicker::after {
  content: ''; display: block; width: 150px; height: 10px; margin: 8px auto 0;
  background:
    radial-gradient(circle, var(--rust) 2.4px, transparent 3px) center / 10px 10px no-repeat,
    linear-gradient(90deg, transparent, rgba(142, 52, 32, .6) 30%, transparent 46%, transparent 54%, rgba(142, 52, 32, .6) 70%, transparent) center / 100% 1.5px no-repeat;
}
.rules-pages { position: relative; flex: 1; z-index: 2; }
.rule-page { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; opacity: 0; visibility: hidden; transition: opacity .4s, translate .45s var(--ease-out); translate: 24px 0; }
.rule-page.on { opacity: 1; visibility: visible; translate: 0 0; }
.rule-page > div:first-child { position: relative; }
.rule-ta-num { position: absolute; right: 6px; top: -46px; font-family: var(--tamil); font-weight: 700; font-size: 130px; line-height: 1; color: var(--mustard); opacity: .16; pointer-events: none; }
.rule-num { position: relative; font-family: var(--serif); font-size: 15px; font-style: italic; color: var(--rust); }
.rule-page h3 { position: relative; margin: 4px 0 14px; font-family: var(--serif); font-weight: 650; font-size: 42px; line-height: 1.02; font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 72; }
.rule-page h3 .ta { display: block; font-family: var(--tamil); font-size: 17px; font-weight: 500; color: var(--rust-d); margin-top: 6px; }
.rule-page p { margin: 0 0 10px; font-size: 16.5px; line-height: 1.55; color: var(--ink-2); }
.rule-page p b { color: var(--ink); font-weight: 600; box-shadow: inset 0 -6px 0 rgba(231, 163, 58, .28); }
.rule-tip { position: relative; margin-top: 16px; padding: 12px 16px 12px 44px; border: 1.5px dashed rgba(142, 52, 32, .35); background: rgba(231, 163, 58, .1); border-radius: 12px; font-size: 14.5px; line-height: 1.45; font-style: italic; color: var(--ink-2); }
.rule-tip::before { content: ''; position: absolute; left: 14px; top: 13px; width: 18px; height: 16px; border-radius: 52% 48% 46% 54% / 56% 50% 50% 44%; background: radial-gradient(circle at 34% 30%, #fff 0 1.3px, #ff8f70 2.4px, #df3a22 4.8px, #a8160d 8.5px, #5c0805 12px); box-shadow: 0 1.5px 1.5px rgba(0, 0, 0, .45); }
.rule-art {
  position: relative; height: 340px; border-radius: 20px; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 30%, #3a2c24, #1b1411 75%);
  border: 2.5px solid var(--ink);
  box-shadow: inset 0 0 0 5px #2a201b, inset 0 0 0 6.5px rgba(231, 163, 58, .35), 4px 5px 0 var(--ink);
}
.rule-art::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(178.6deg, transparent 0 9px, rgba(255, 220, 180, .045) 9px 10px, transparent 10px 23px); }
.rule-art::after { content: ''; position: absolute; left: 50%; top: -40px; width: 300px; height: 220px; margin-left: -150px; background: radial-gradient(ellipse, rgba(255, 210, 140, .16), transparent 70%); pointer-events: none; }
.mini {
  position: relative; width: 440px; height: 166px; border-radius: 46px / 70px; margin-top: -26px; scale: .88;
  background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(255, 170, 110, .2), transparent 70%), linear-gradient(180deg, #74321a, #5a2513 45%, #431a0c);
  border: 2.5px solid var(--ink);
  box-shadow: inset 0 2px 0 rgba(255, 200, 150, .28), 0 5px 0 #2a0e05, 0 7px 0 var(--ink), 0 20px 30px rgba(0, 0, 0, .55);
}
.mini::before { content: ''; position: absolute; inset: 7px; border-radius: 40px / 62px; border: 1px solid rgba(255, 200, 150, .14); }
.mini-grain { position: absolute; inset: 0; border-radius: inherit; background: var(--grain-wood); background-size: 600px 200px; mix-blend-mode: multiply; opacity: .9; }
.mstore { position: absolute; top: 24px; width: 34px; height: 118px; border-radius: 50%; background: radial-gradient(ellipse at 50% 38%, #1a0904, #2b1108 50%, #4a1f0f); box-shadow: inset 0 8px 12px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 210, 170, .2); }
.mstore.l { left: 14px; } .mstore.r { right: 14px; }
.mini .mpit {
  position: absolute; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #170703 0%, #2b1108 55%, #4a1f0f 100%);
  --glow: 0 0 0 0 transparent;
  box-shadow: inset 0 6px 9px rgba(0, 0, 0, .72), 0 0 0 2px rgba(0, 0, 0, .28), 0 0 0 3.5px rgba(255, 205, 160, .1), var(--glow);
  transition: box-shadow .3s;
}
.mini .seed { scale: .66; }
.mcount { position: absolute; right: -7px; bottom: -6px; min-width: 17px; height: 17px; padding: 0 3px; display: grid; place-items: center; font-weight: 700; font-size: 10.5px; color: var(--ink); background: radial-gradient(circle at 40% 30%, #fff3c4, #e2ac44 50%, #a46d18); border: 1.4px solid var(--ink); border-radius: 999px; z-index: 2; }
.mcount.zero { background: #6b3a22; color: #d9b98c; }
.mini .mpit.hl { --glow: 0 0 0 3px var(--mustard-l), 0 0 16px rgba(244, 196, 106, .7); }
.mini .mpit.cap { --glow: 0 0 0 3px #7fd48b, 0 0 16px rgba(127, 212, 139, .8); }
.mini .mpit.pasu { --glow: 0 0 0 3px #ff9c6e, 0 0 18px rgba(255, 140, 90, .9); }
.mini .mpit.empty { --glow: 0 0 0 2px rgba(243, 230, 204, .75); }
.mini svg.flow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 3; }
.mini-cap { position: absolute; bottom: 22px; left: 24px; right: 24px; text-align: center; color: var(--paper); font-family: var(--serif); font-style: italic; font-size: 15.5px; opacity: .85; }
.rules-nav { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding-top: 14px; }
.rules-dots { display: flex; gap: 12px; align-items: center; }
.rules-dots button { position: relative; width: 18px; height: 18px; display: grid; place-items: center; }
.rules-dots .seed { position: static; margin: 0; scale: .8; opacity: .3; filter: grayscale(.6); transition: scale .3s var(--ease-spring), opacity .3s, filter .3s; }
.rules-dots button.on .seed { scale: 1.15; opacity: 1; filter: none; }
.rules-dots button:hover .seed { opacity: .7; }

/* end */
.end-sheet { width: 560px; padding: 70px 40px 30px; text-align: center; }
.end-face { position: absolute; top: -70px; left: 50%; width: 140px; height: 140px; margin-left: -70px; border-radius: 50%; background: var(--mustard); border: 3px solid var(--ink); overflow: hidden; box-shadow: 4px 4px 0 var(--ink); }
.end-face svg { width: 100%; height: 100%; }
.end-kicker { font-size: 12px; letter-spacing: 2.6px; text-transform: uppercase; font-weight: 600; color: var(--rust-d); margin-top: 10px; }
.end-title { margin: 4px 0 14px; font-family: var(--serif); font-weight: 700; font-size: 48px; line-height: 1; font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 96; }
.end-score { display: flex; align-items: center; justify-content: center; gap: 28px; margin-bottom: 16px; }
.end-score > div { display: flex; flex-direction: column; }
.es-n { font-family: var(--serif); font-weight: 700; font-size: 54px; line-height: 1; color: var(--rust); }
.es-l { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; }
.es-vs { font-family: var(--serif); font-style: italic; font-size: 20px; opacity: .6; }
.end-line { margin: 0 auto; max-width: 440px; font-family: var(--serif); font-size: 21px; line-height: 1.3; font-weight: 520; }
.end-line-e { margin: 6px 0 22px; font-size: 14px; font-style: italic; color: #7a6656; }
.end-actions { display: flex; gap: 14px; justify-content: center; }
.petals { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.petal { position: absolute; top: -30px; width: 16px; height: 11px; border-radius: 50% 50% 50% 0; background: #fffdf4; border: 1.2px solid rgba(30, 23, 20, .5); animation: fall linear forwards; }
@keyframes fall { to { translate: var(--dx) 800px; rotate: var(--rot); } }

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


/* ==========================================================================
   PASU BURST
   ========================================================================== */
.pasu-burst { position: absolute; width: 0; height: 0; z-index: 25; pointer-events: none; }
.pb-rays i {
  position: absolute; left: -2px; top: -2px; width: 4px; height: 26px; border-radius: 4px;
  background: linear-gradient(180deg, #fff3c4, #e7a33a);
  transform-origin: 2px 2px; rotate: var(--a);
  animation: ray .9s var(--d) var(--ease-out) both;
}
@keyframes ray { 0% { translate: 0 0; scale: 1 .2; opacity: 0; } 25% { opacity: 1; } 100% { translate: 0 0; scale: 1 1; opacity: 0; transform: translateY(54px); } }
.pb-badge {
  position: absolute; left: 0; top: 0; translate: -50% -50%;
  padding: 7px 16px 8px; text-align: center; white-space: nowrap;
  background: var(--mustard) var(--grain-paper); border: 2.5px solid var(--ink); border-radius: 14px;
  box-shadow: 3px 4px 0 var(--ink);
  animation: pbIn 1.6s var(--ease-spring) both;
}
.pasu-burst.paati .pb-badge { background-color: var(--rust); color: var(--paper); }
.pb-badge b { display: block; font-family: var(--serif); font-size: 26px; line-height: 1; font-weight: 800; font-variation-settings: 'SOFT' 100, 'WONK' 1; }
.pb-badge span { display: block; font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 700; margin-top: 2px; }
@keyframes pbIn { 0% { scale: .2; rotate: -14deg; opacity: 0; } 18% { scale: 1.12; rotate: 4deg; opacity: 1; } 30% { scale: 1; rotate: -2deg; } 75% { opacity: 1; translate: -50% -80%; } 100% { opacity: 0; translate: -50% -120%; } }

.rules-sheet .sheet-close { right: 30px; top: 24px; z-index: 3; }

/* ==========================================================================
   TOUCH SCREENS
   ========================================================================== */
.side { display: contents; }
@media (hover: none) {
  /* no sticky hover lifts after a tap */
  .t-card:not(:disabled):hover { transform: none; box-shadow: 4px 5px 0 var(--ink); }
  .t-card:not(:disabled):active { transform: translate(2px, 3px); box-shadow: 1px 1px 0 var(--ink); }
  .tool:hover, .btn:hover { transform: none; }
  .tool:hover { box-shadow: 2px 3px 0 var(--ink); }
  .btn:hover { box-shadow: 3px 4px 0 var(--ink); }
  .tool:active, .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
  .chips button:hover { background: none; }
  .chips button.on:hover { background: var(--ink); }
}
@media (pointer: coarse) {
  /* cheaper paint on phones: no blur behind sheets, no live filters on animated art */
  .overlay { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(30, 23, 20, .66); }
  .t-banana, .t-lotus { filter: none; will-change: transform; }
  .paati-slot svg { filter: none; }
}
/* .lite is set from JS on touch devices: no blend modes (each one forces an extra offscreen layer),
   and no endless decorative animations that repaint big SVGs every frame */
.lite .paper-grain, .lite .wall-grain, .lite .board-grain, .lite .mini-grain, .lite .lamp-cone { mix-blend-mode: normal; }
.lite .paper-grain { opacity: .35; }
.lite .wall-grain { opacity: .6; }
.lite .board-grain { opacity: .7; }
.lite .table-grain { display: none; }
.lite .paati .p-breathe, .lite .paati .p-jimikki, .lite .paati .p-mookuthi circle:last-child,
.lite .lamp-swing, .lite .lamp-glow, .lite .lamp-cone, .lite .lamp-bulb,
.lite .pit.playable::after { animation: none; }
.lite .paati .p-steam { display: none; }

/* ==========================================================================
   PORTRAIT (phones held upright) — stage is 720 wide × phone-height tall
   ========================================================================== */
/* ---- title ---- */
.portrait #screen-title {
  display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
  padding: 34px 20px 26px;
}
.portrait #screen-title > :not(.paper-grain, .t-banana, .t-lotus) { position: relative; top: auto; left: auto; right: auto; transform: none; }
.portrait .t-badge { width: 640px; height: 190px; flex: none; animation-name: badgeInP; }
@keyframes badgeInP { from { opacity: 0; translate: 0 -14px; scale: .96; } }
.portrait .badge-ta.left { left: 66px; } .portrait .badge-ta.right { right: 66px; }
.portrait .t-tagline { font-size: 25px; line-height: 1.3; padding: 0 30px; }
.portrait .t-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 22px; width: 600px; margin-top: 30px; }
.portrait .t-card { width: auto; height: 214px; }
.portrait .t-icon { top: 18px; }
.portrait .t-card.primary { grid-column: 1 / -1; height: 210px; }
.portrait .t-card-title { font-size: 32px; }
.portrait .t-card.primary .t-card-title { font-size: 40px; }
.portrait .t-card-kicker { font-size: 14px; }
.portrait .t-card-note { font-size: 16px; }
.portrait .t-options { flex-direction: column; align-items: center; gap: 24px; }
.portrait .opt { gap: 10px; }
.portrait .opt-label { font-size: 14px; }
.portrait .chips { padding: 5px; }
.portrait .chips button { height: 58px; padding: 0 22px; font-size: 20px; }
.portrait .seed-swatch { scale: 1.25; }
.portrait .t-links { flex-wrap: wrap; justify-content: center; gap: 8px 14px; font-size: 24px; white-space: normal; padding: 0 20px; }
.portrait .t-links a, .portrait .t-links button { padding: 6px 0 2px; }
.portrait .t-links a[lang='ta'] { font-size: 21px; }
.portrait .t-credit { font-size: 16px; }
.portrait .t-banana { width: 250px; bottom: -14px; }
.portrait .t-banana.left { left: -118px; } .portrait .t-banana.right { right: -118px; }
.portrait .t-lotus { width: 136px; bottom: -20px; }
.portrait .t-lotus.left { left: 8px; } .portrait .t-lotus.right { right: 0; width: 126px; }

/* ---- game: board upright on the right, Ammachi + talk on the left ---- */
.portrait .wall { height: 380px; }
.portrait .table { top: 380px; }
.portrait .lamp-slot, .portrait .g-logo { display: none; }
.portrait .g-tools { top: 22px; width: 144px; flex-wrap: wrap; justify-content: flex-end; gap: 12px; z-index: 7; }
.portrait .tool { width: 66px; height: 66px; font-size: 28px; }
.portrait .tool svg { width: 28px; height: 28px; }
.portrait .tool .speed-label { font-size: 19px; }
.portrait .side {
  position: absolute; left: 16px; top: 18px;
  display: flex; flex-direction: column; align-items: flex-start; z-index: 6;
}
.portrait .side > * { position: relative; left: auto; top: auto; right: auto; }
.portrait .paati-slot { order: 1; width: 214px; height: 243px; flex: none; margin-left: -6px; }
.portrait .nameplate { order: 2; margin: -34px 0 0 8px; padding: 8px 26px 9px; z-index: 3; }
.portrait .np-name { font-size: 22px; }
.portrait .np-mood { font-size: 11px; }
.portrait .bubble { order: 3; width: 100%; min-height: 0; margin-top: 30px; padding: 16px 20px; border-radius: 20px; }
.portrait .bubble::before {
  left: 74px; top: -13px; bottom: auto;
  border: 0; border-left: 2.5px solid var(--ink); border-top: 2.5px solid var(--ink);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.portrait .bubble-t { font-size: 23px; }
.portrait .bubble-e { font-size: 16.5px; }
.portrait .bubble-actions { flex-wrap: wrap; margin-top: 14px; }
.portrait .bubble .btn.small { padding: 13px 22px; font-size: 20px; border-radius: 13px; }
.portrait .narrate {
  order: 4; width: 100%; height: auto; margin-top: auto;
  flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 16px 14px;
}
.portrait .narrate-chip { font-size: 13px; padding: 6px 12px; }
.portrait .narrate-text { flex: none; font-size: 20px; line-height: 1.3; }
.portrait .narrate-hand { position: absolute; right: 14px; top: 16px; font-size: 13px; }
.portrait .narrate-hand:empty { display: none; }
.portrait .store-label { width: 150px; text-align: right; font-size: 12px; z-index: 7; }
.portrait .store-label .sl-n { font-size: 44px; }
.portrait .row-label { display: none; }
.portrait .store-n { font-size: 22px; padding: 2px 12px; }

/* the board is rotated 90° in JS; keep its light coming from the top of the screen */
.portrait .board {
  transform-origin: 0 0;
  box-shadow:
    inset 2px 0 0 rgba(255, 200, 150, .28),
    inset -6px 0 12px rgba(0, 0, 0, .35),
    7px 0 0 #2a0e05, 9px 0 0 var(--ink),
    26px 0 40px rgba(0, 0, 0, .6);
}
.portrait .pit {
  box-shadow:
    inset 11px 0 16px rgba(0, 0, 0, .74),
    inset -3px 0 6px rgba(255, 180, 120, .12),
    0 0 0 2.5px rgba(0, 0, 0, .3),
    0 0 0 4.5px rgba(255, 205, 160, .13),
    0 0 0 7.5px rgba(0, 0, 0, .16),
    0 0 0 9px rgba(255, 205, 160, .07);
}
.portrait .store {
  box-shadow: inset 12px 0 18px rgba(0, 0, 0, .72), inset -3px 0 6px rgba(255, 180, 120, .14),
    0 0 0 3px rgba(0, 0, 0, .28), 0 0 0 5px rgba(255, 205, 160, .1), 0 0 0 8px rgba(0, 0, 0, .14);
}
.portrait .pit .count, .portrait .store-n { rotate: -90deg; }
.portrait .pit .count { font-size: 15px; min-width: 28px; height: 28px; }
.portrait .pits .seed.drop { animation-name: seedDropP; }
@keyframes seedDropP { 0% { translate: -26px 0; scale: 1.25; opacity: .2; } 60% { opacity: 1; } 100% { translate: 0 0; scale: 1; } }
.portrait .fly-layer .seed { scale: var(--bk, 1); }
.portrait .pointer { rotate: 90deg; }
.portrait .pointer.on { animation-name: pointBobX; }
@keyframes pointBobX { 0%, 100% { translate: 0 0; } 50% { translate: 10px 0; } }

/* ---- sheets ---- */
.portrait .rules-sheet { width: 660px; height: calc(100% - 70px); max-height: 1240px; padding: 36px 30px 26px; }
.portrait .rule-page { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; gap: 26px; overflow-y: auto; translate: 0 16px; }
.portrait .rule-page.on { translate: 0 0; }
.portrait .rule-page h3 { font-size: 44px; }
.portrait .rule-page p { font-size: 21px; }
.portrait .rule-tip { font-size: 18px; }
.portrait .rule-art { height: 300px; }
.portrait .rules-dots button { width: 30px; height: 30px; }
.portrait .rules-nav .btn { padding: 14px 24px; font-size: 20px; }
.portrait .rules-sheet .sheet-close { width: 56px; height: 56px; font-size: 36px; right: 22px; top: 18px; }
.portrait .end-sheet { width: 620px; }
.portrait .end-line { font-size: 24px; }
.portrait .end-actions .btn { padding: 16px 28px; font-size: 21px; }