/* Rang Mahal — UI styles */
:root {
  --plum-950: #1E0A18;
  --plum-900: #2A0F22;
  --plum-800: #3A1830;
  --plum-700: #52203F;
  --maroon: #7A1F45;
  --gold: #E8B44A;
  --gold-hi: #FBE3A0;
  --gold-dk: #A8741E;
  --ivory: #FFF6E6;
  --ivory-dk: #EBD9BC;
  --ink: #2A1420;
  --ink-soft: #6B4A58;
  --rose: #E2457E;
  --green: #1E9E62;
  --serif: "Noto Serif", "Noto Serif Devanagari", Georgia, "Times New Roman", serif;
  --sans: "Noto Sans", "Noto Sans Devanagari", Roboto, "Segoe UI", system-ui, sans-serif;
  --safe-top: max(env(safe-area-inset-top, 0px), 6px);
  --safe-bot: max(env(safe-area-inset-bottom, 0px), 6px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--plum-800); color: var(--ivory);
  font-family: var(--sans);
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
  touch-action: manipulation;
}
#app { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }

.screen { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.screen.active { opacity: 1; pointer-events: auto; }
canvas { display: block; }
#scene, #board { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; }
#fx { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }

/* ---------- icons (inline svg) ---------- */
.ico { display: inline-block; width: 22px; height: 22px; background: center/contain no-repeat; flex: none; }
.ico-coin { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.35' cy='.3' r='.8'%3E%3Cstop offset='0' stop-color='%23FFF1B8'/%3E%3Cstop offset='.55' stop-color='%23F2C14E'/%3E%3Cstop offset='1' stop-color='%23B57A16'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='10.5' fill='url(%23g)' stroke='%238A5A0E' stroke-width='1'/%3E%3Ccircle cx='12' cy='12' r='7.2' fill='none' stroke='%23A8741E' stroke-width='1.1'/%3E%3Cpath d='M12 6.6c1.2 1.8 2.6 2.7 4 3-1 1.4-1.4 2.6-1.3 4.2-1.2-.6-2-.6-2.7.7-.7-1.3-1.5-1.3-2.7-.7.1-1.6-.3-2.8-1.3-4.2 1.4-.3 2.8-1.2 4-3z' fill='%23A8741E'/%3E%3C/svg%3E"); }
.ico-star { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FFF0B0'/%3E%3Cstop offset='1' stop-color='%23E8A325'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M12 1.8l3 6.3 6.9.9-5 4.8 1.3 6.8L12 17.3l-6.2 3.3 1.3-6.8-5-4.8 6.9-.9z' fill='url(%23g)' stroke='%23A8741E' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ico-gear { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF6E6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E"); }
.ico-pause { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFF6E6'%3E%3Crect x='6' y='5' width='4.2' height='14' rx='1.6'/%3E%3Crect x='13.8' y='5' width='4.2' height='14' rx='1.6'/%3E%3C/svg%3E"); }
.ico-brush { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A1F45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4.5l5 5-8.2 8.2-5-5z' fill='%23E8B44A'/%3E%3Cpath d='M6.3 12.7c-2 0-3.3 1.6-3.3 3.6 0 1.6-.6 2.6-1.5 3.2 3.6.9 7.4-.4 7.9-3.7z' fill='%23E2457E'/%3E%3Cpath d='M17 2l5 5'/%3E%3C/svg%3E"); }
.ico-undo { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A1F45' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14L4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 0 11H11'/%3E%3C/svg%3E"); }
.ico-bulb { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A1F45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2V16h5v-.1c0-.8.4-1.5 1-2A6 6 0 0 0 12 3z' fill='%23F8D98A'/%3E%3C/svg%3E"); }
.ico-rack { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A1F45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4v14'/%3E%3Crect x='3' y='18' width='10' height='3' rx='1' fill='%23C08A4A'/%3E%3Cpath d='M18 5v8M14 9h8' stroke-width='2.6'/%3E%3C/svg%3E"); }
.ico-restart { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A1F45' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.7'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E"); }

/* ---------- HUD ---------- */
.hud {
  position: absolute; left: 0; right: 0; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 8px;
  padding: calc(var(--safe-top) + 6px) 12px 6px;
}
.hud .pill:first-child { margin-right: 0; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px 0 6px; border-radius: 17px;
  background: rgba(30, 10, 24, .62);
  border: 1px solid rgba(232, 180, 74, .45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.25);
  font-weight: 700; font-size: 15px; letter-spacing: .2px;
  font-variant-numeric: tabular-nums;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pill b { min-width: 22px; }
.pill.bump { animation: bump .45s ease; }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 100% { transform: scale(1); } }
.icon-btn {
  width: 38px; height: 38px; border-radius: 19px; margin-left: auto;
  display: grid; place-items: center;
  background: rgba(30, 10, 24, .62); border: 1px solid rgba(232, 180, 74, .45);
}
.icon-btn:active { transform: scale(.94); }
.level-hud .icon-btn { margin-left: 0; }
.level-hud .pill { margin-left: auto; }
.level-title {
  font-family: var(--serif); font-size: 19px; letter-spacing: .3px;
  display: flex; align-items: center; gap: 6px; margin-left: 4px;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.level-title b { font-weight: 700; }
.hard-tag {
  font-family: var(--sans); font-size: 12.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 10px; color: #fff;
  background: linear-gradient(180deg, #F0566B, #B8203A);
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 2px 4px rgba(0,0,0,.3);
}

.level-goal {
  position: absolute; left: 0; right: 0; top: calc(var(--safe-top) + 98px); z-index: 9;
  text-align: center; font-size: 13px; color: var(--ivory-dk); opacity: .9;
  pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

/* ---------- buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 56px; padding: 0 22px; border-radius: 28px;
  font-weight: 800; font-size: 17px; letter-spacing: .3px;
  transition: transform .08s ease, filter .15s ease;
}
.btn:active { transform: translateY(2px) scale(.98); }
.btn[disabled] { filter: grayscale(.8) brightness(.8); pointer-events: none; }
.btn-gold {
  color: #4A1E05;
  background: linear-gradient(180deg, #FFE9A8 0%, #F4C452 45%, #D9962A 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 -3px 0 rgba(150,90,10,.45) inset, 0 6px 14px rgba(0,0,0,.35);
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
}
.btn-ivory {
  color: var(--maroon);
  background: linear-gradient(180deg, #FFFDF7 0%, #F6E7CC 100%);
  box-shadow: 0 1px 0 #fff inset, 0 -3px 0 rgba(160,120,70,.35) inset, 0 6px 14px rgba(0,0,0,.3);
}
.btn-rose {
  color: #fff;
  background: linear-gradient(180deg, #F27BA4 0%, #D63C72 55%, #A82556 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 -3px 0 rgba(100,10,40,.35) inset, 0 6px 14px rgba(0,0,0,.3);
}
.btn-ghost { height: 44px; color: var(--ivory-dk); font-weight: 700; font-size: 15px; }
.btn-small { height: 44px; font-size: 15px; padding: 0 18px; border-radius: 22px; }

.home-actions {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; gap: 12px; justify-content: center; align-items: flex-end;
  padding: 0 16px calc(var(--safe-bot) + 18px);
}
.home-actions .btn-ivory { flex: 0 0 auto; }
.home-actions { flex-wrap: wrap; }
.side-btns { position: absolute; left: 10px; top: calc(var(--safe-top) + 132px); z-index: 10; display: flex; flex-direction: column; gap: 12px; }
.side-btn { position: relative; width: 58px; height: 58px; border-radius: 50%; border: 2px solid #E9B949; color: #FBE3A0;
  background: radial-gradient(circle at 50% 35%, #7A1E4E, #3E0E2A); box-shadow: 0 4px 10px rgba(0,0,0,.45);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0; }
.side-btn[hidden] { display: none; }
.side-btn svg { width: 24px; height: 24px; }
.side-btn span[data-t] { font-size: 9.5px; font-weight: 800; letter-spacing: .3px; color: #FFF1D2; }
.side-btn .badge { position: absolute; top: -4px; right: -4px; }
.side-btn:active { transform: scale(.95); }
#chapter-banner { cursor: pointer; }
.level-title.daily [data-t="level"] { display: none; }
.fabric-chip { display: flex; gap: 10px; align-items: center; text-align: left; margin: 8px auto 2px; padding: 6px 12px 6px 6px; max-width: 280px;
  border-radius: 14px; background: #FBF1DF; border: 1.5px dashed #D9A93C; }
.fabric-chip canvas { border-radius: 9px; flex: none; }
.fabric-chip-k { font-size: 12.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #B07A2A; }
.fabric-chip-n { font-family: var(--serif); font-size: 16px; font-weight: 700; color: var(--maroon); }
.fabric-chip-b { font-size: 13px; color: #2E7D4F; font-weight: 700; }
.album-sub { font-size: 13px; color: var(--ink-soft); margin: 2px 0 10px; }
.album-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.album-cell { text-align: center; }
.album-cell canvas { border-radius: 12px; box-shadow: 0 2px 6px rgba(80,40,10,.25); }
.album-cell.locked canvas { box-shadow: none; opacity: .8; }
.album-n { font-size: 12.5px; font-weight: 700; color: var(--maroon); margin-top: 4px; line-height: 1.15; }
.album-f { font-size: 12.5px; color: var(--ink-soft); }
.journey { position: relative; padding: 4px 0 4px 6px; text-align: left; }
.journey::before { content: ''; position: absolute; left: 30px; top: 26px; bottom: 26px; border-left: 3px dashed #D9B98A; }
.j-stop { position: relative; display: flex; gap: 14px; align-items: center; padding: 8px 0; }
.j-node { width: 50px; height: 50px; border-radius: 50%; flex: none; display: grid; place-items: center; z-index: 1;
  font-weight: 800; font-size: 14px; background: #EFE2CA; color: #A08060; border: 3px solid #E0CBA6; }
.j-stop.done .j-node { background: linear-gradient(180deg, #F6D27A, #D9A93C); color: #5A2A10; border-color: #F9E3A6; font-size: 20px; }
.j-stop.now .j-node { background: #7A1E4E; color: #FBE3A0; border-color: #E9B949; box-shadow: 0 0 0 5px rgba(233,185,73,.3); }
.j-city { font-family: var(--serif); font-size: 18px; font-weight: 700; color: var(--maroon); }
.j-stop.soon .j-city, .j-stop.locked .j-city { color: #9A7E66; }
.j-craft { font-size: 13px; color: var(--ink-soft); }
.j-tag { font-size: 12.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #B07A2A; margin-top: 2px; }
.j-stop.now .j-tag { color: #7A1E4E; }
#next-up-home { flex: 0 0 100%; display: flex; justify-content: center; }
#next-up-home[hidden] { display: none; }
#next-up-home .next-up { max-width: 340px; width: 100%; margin: 0; background: rgba(40,10,28,.72); color: #FFF1D2; border-color: rgba(246,210,122,.5); cursor: pointer; }
#next-up-home .next-up-n { color: #FFF1D2; }
.next-up { display: flex; gap: 12px; align-items: center; text-align: left; margin: 10px 0 4px; padding: 8px 12px 8px 8px;
  border-radius: 16px; background: #FBF1DF; border: 1.5px solid #E6CFA5; }
.next-up.ready { border-color: #E9B949; box-shadow: 0 0 0 3px rgba(246,210,122,.35); }
.next-up-ico { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; flex: none; background: #F3E3C8; }
.next-up-ico canvas { width: 64px; height: 64px; display: block; }
.next-up-body { flex: 1; min-width: 0; }
.next-up-k { font-size: 12.5px; letter-spacing: .6px; text-transform: uppercase; font-weight: 800; color: #B07A2A; }
.next-up.ready .next-up-k { color: #D08A10; }
.next-up-n { font-family: var(--serif); font-size: 16px; font-weight: 700; color: var(--maroon); line-height: 1.2; margin: 1px 0 5px; }
.next-up-bar { height: 7px; border-radius: 4px; background: rgba(120,70,30,.18); overflow: hidden; }
.next-up-bar i { display: block; height: 100%; background: linear-gradient(90deg, #F6D27A, #E3A436); border-radius: 4px; }
.next-up-s { font-size: 13px; margin-top: 3px; opacity: .85; }
.next-up-s .ico { width: 13px; height: 13px; vertical-align: -2px; }
.btn-restore-x { font-size: 15px; line-height: 1.15; white-space: normal; }
.btn-play { flex: 1 1 auto; max-width: 260px; height: 64px; border-radius: 32px; font-size: 19px; }
.btn-play .play-num { font-family: var(--serif); font-size: 26px; font-weight: 700; }
.btn-play .hard-tag { position: absolute; top: -10px; right: 14px; }
.btn-play.pulse { animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.badge {
  position: absolute; top: -8px; right: -6px; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px;
  display: grid; place-items: center; gap: 2px;
  font-size: 13px; font-weight: 800; color: #fff;
  background: linear-gradient(180deg, #2BC27D, #148A52);
  box-shadow: 0 0 0 2px var(--ivory), 0 2px 6px rgba(0,0,0,.35);
  animation: bob 1.6s ease-in-out infinite;
}
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.chapter-banner {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(var(--safe-top) + 52px); z-index: 9;
  text-align: center; padding: 4px 18px 7px; min-width: 220px;
  pointer-events: auto;
  background: rgba(30, 10, 24, .55); border-radius: 18px;
  border: 1px solid rgba(232, 180, 74, .35);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.chapter-title { white-space: nowrap; font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--gold-hi); text-shadow: 0 2px 4px rgba(0,0,0,.7); letter-spacing: .3px; }
.chapter-sub { font-size: 13px; color: var(--ivory); opacity: .92; margin-top: 0; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.chapter-progress { margin: 5px auto 0; width: 150px; height: 6px; border-radius: 3px; background: rgba(0,0,0,.45); overflow: hidden; box-shadow: 0 0 0 1px rgba(232,180,74,.35); }
.chapter-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-dk), var(--gold-hi)); transition: width .8s ease; }
.festive-tag {
  position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; bottom: calc(var(--safe-bot) + 186px); z-index: 11;
  font-size: 13px; font-weight: 700; padding: 6px 10px; border-radius: 14px;
  background: rgba(30,10,24,.7); border: 1px solid rgba(232,180,74,.5); color: var(--gold-hi);
}

/* ---------- boosters ---------- */
.boosters {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; justify-content: center; gap: 12px;
  padding: 10px 12px calc(var(--safe-bot) + 12px);
  background: linear-gradient(180deg, rgba(30,10,24,0) 0%, rgba(30,10,24,.55) 40%);
}
.booster {
  position: relative; width: 70px; height: 70px; border-radius: 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: linear-gradient(180deg, #FFFDF7 0%, #F1DFC0 100%);
  box-shadow: 0 1px 0 #fff inset, 0 -3px 0 rgba(160,120,70,.35) inset, 0 4px 10px rgba(0,0,0,.35);
  color: var(--maroon);
}
.booster .ico { width: 26px; height: 26px; }
.booster:active { transform: translateY(2px) scale(.97); }
.booster[disabled] { opacity: .4; filter: grayscale(.85) !important; pointer-events: none; }
.sorted-pill {
  position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--safe-top) + 64px); z-index: 9;
  font-size: 12.5px; color: #FFF1D2; padding: 3px 12px; border-radius: 12px; white-space: nowrap;
  background: rgba(40,10,28,.62); border: 1px solid rgba(246,210,122,.45); pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.sorted-pill b { color: #F6D27A; font-size: 14px; }
.sorted-pill.all { background: rgba(120,80,10,.75); }
.b-label { font-size: 13px; font-weight: 800; letter-spacing: .2px; }
.b-count {
  position: absolute; top: -7px; right: -7px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; gap: 2px;
  font-size: 13px; font-weight: 800; color: #fff;
  background: linear-gradient(180deg, #F0566B, #B8203A);
  box-shadow: 0 0 0 2px #FFF6E6;
}
.b-count.price { background: linear-gradient(180deg, #5A2A48, #2E1026); color: var(--gold-hi); font-size: 12.5px; }
.b-count.price::before {
  content: ""; width: 11px; height: 11px; display: inline-block;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23F2C14E' stroke='%23B57A16' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
}
.b-count:empty { display: none; }

.coach {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 12;
  bottom: calc(var(--safe-bot) + 104px);
  max-width: 88%; padding: 12px 16px; border-radius: 16px;
  background: var(--ivory); color: var(--ink); font-weight: 600; font-size: 15px; line-height: 1.35; text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  animation: rise .35s ease;
}
.coach::after {
  content: ""; position: absolute; left: 50%; bottom: -8px; margin-left: -8px;
  border: 8px solid transparent; border-top-color: var(--ivory); border-bottom: 0;
}
.coach.top { bottom: auto; top: calc(var(--safe-top) + 122px); }
.coach.top::after { bottom: auto; top: -8px; border-top-color: transparent; border-bottom: 8px solid var(--ivory); border-top: 0; }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- modal ---------- */
.modal-wrap {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center; padding: 18px;
  background: rgba(20, 6, 16, .62);
  animation: fade .25s ease;
}
.modal-wrap.sheet { align-items: flex-end; padding: 0; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  position: relative; width: 100%; max-width: 380px;
  background: linear-gradient(180deg, #FFFBF2 0%, #F6E8D0 100%);
  color: var(--ink); border-radius: 26px;
  padding: 26px 20px 20px; text-align: center;
  box-shadow: 0 0 0 3px rgba(232,180,74,.9), 0 0 0 6px rgba(122,31,69,.9), 0 20px 50px rgba(0,0,0,.5);
  animation: pop .35s cubic-bezier(.2,1.4,.4,1);
}
.sheet .modal {
  max-width: 520px; border-radius: 26px 26px 0 0;
  padding-bottom: calc(var(--safe-bot) + 18px);
  max-height: 86%; overflow-y: auto;
  box-shadow: 0 -3px 0 rgba(232,180,74,.9), 0 -20px 50px rgba(0,0,0,.4);
  animation: slideup .35s cubic-bezier(.2,1,.4,1);
}
@keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes slideup { from { transform: translateY(100%); } to { transform: translateY(0); } }
.modal h2 { font-family: var(--serif); margin: 0 0 6px; font-size: 26px; color: var(--maroon); letter-spacing: .2px; }
.modal h3 { font-family: var(--serif); margin: 0 0 4px; font-size: 20px; color: var(--maroon); }
.modal p { margin: 6px 0 14px; color: var(--ink-soft); font-size: 15px; line-height: 1.45; }
.modal .row { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.modal .row .btn { flex: 1 1 0; min-width: 120px; }
.modal .ribbon {
  position: absolute; left: 50%; top: -22px; transform: translateX(-50%);
  padding: 8px 26px; border-radius: 6px; white-space: nowrap;
  font-family: var(--serif); font-weight: 700; font-size: 18px; color: #FFF6E6;
  background: linear-gradient(180deg, #A42F5E, #6E1640);
  box-shadow: 0 0 0 2px var(--gold), 0 6px 12px rgba(0,0,0,.35);
}
.close-x {
  position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 18px;
  display: grid; place-items: center; font-size: 22px; line-height: 1; color: var(--maroon);
  background: rgba(122,31,69,.08);
}

/* win */
.win-stars { display: flex; justify-content: center; margin: 4px 0 2px; }
.win-star { width: 86px; height: 86px; animation: spinin .8s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes spinin { from { transform: scale(0) rotate(-200deg); } to { transform: scale(1) rotate(0); } }
.reward-row { display: flex; justify-content: center; gap: 14px; margin: 10px 0 4px; }
.reward {
  display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 16px;
  background: rgba(122,31,69,.08); font-weight: 800; font-size: 18px; color: var(--maroon);
}
.reward .ico { width: 26px; height: 26px; }

/* restore list */
.task-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; text-align: left; }
.task {
  display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 18px;
  background: #fff; box-shadow: 0 1px 0 rgba(160,120,70,.25), 0 2px 8px rgba(80,30,50,.08);
}
.task.done { opacity: .55; background: transparent; box-shadow: none; }
.task-ico { width: 60px; height: 60px; border-radius: 14px; flex: none; background: #F3E3C8; display: grid; place-items: center; overflow: hidden; }
.task-ico canvas { width: 60px; height: 60px; }
.task-body { flex: 1; min-width: 0; }
.task-name { font-weight: 800; font-size: 15px; color: var(--ink); }
.task-desc { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.task-after { font-size: 13px; color: #9A6A3A; margin-top: 3px; font-style: italic; }
.task .btn { height: 42px; padding: 0 14px; font-size: 15px; border-radius: 21px; min-width: 76px; }
.task .btn .ico { width: 20px; height: 20px; }
.task-check { font-size: 22px; color: var(--green); font-weight: 800; padding: 0 8px; }
.sheet-handle { width: 44px; height: 5px; border-radius: 3px; background: rgba(122,31,69,.2); margin: -12px auto 12px; }

/* choice */
.choices { display: flex; gap: 12px; justify-content: center; margin: 10px 0 4px; }
.choice {
  flex: 1 1 0; max-width: 160px; border-radius: 18px; padding: 8px 8px 10px; background: #fff;
  box-shadow: 0 0 0 2px rgba(122,31,69,.12), 0 4px 10px rgba(80,30,50,.12);
  font-weight: 800; font-size: 14px; color: var(--maroon);
}
.choice canvas { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 12px; background: #F3E3C8; margin-bottom: 8px; }
.choice:active { transform: scale(.97); }
.choice.sel { box-shadow: 0 0 0 3px var(--gold), 0 4px 14px rgba(232,180,74,.5); }

/* daily */
.daily-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0 6px; }
.day {
  border-radius: 14px; padding: 8px 4px 6px; background: #fff; font-size: 12.5px; font-weight: 800; color: var(--ink-soft);
  box-shadow: 0 1px 0 rgba(160,120,70,.25);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.day .ico { width: 26px; height: 26px; }
.day b { font-size: 13px; color: var(--maroon); }
.day.claimed { opacity: .45; }
.day.today { box-shadow: 0 0 0 3px var(--gold), 0 4px 12px rgba(232,180,74,.45); background: #FFF7E2; }
.day.big { grid-column: span 2; }

/* settings */
.settings { text-align: left; margin-top: 8px; }
.set-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 4px; border-bottom: 1px solid rgba(122,31,69,.1); font-weight: 700; font-size: 15px; }
.set-row:last-child { border-bottom: 0; }
.set-row small { display: block; font-weight: 500; color: var(--ink-soft); font-size: 13px; margin-top: 2px; }
.toggle { width: 52px; height: 30px; border-radius: 15px; background: #D9C7AE; position: relative; transition: background .2s; flex: none; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.toggle.on { background: var(--green); }
.toggle.on::after { transform: translateX(22px); }
.seg { display: inline-flex; border-radius: 15px; background: #E9D9BF; padding: 3px; }
.seg button { padding: 6px 12px; border-radius: 12px; font-weight: 800; font-size: 13px; color: var(--ink-soft); }
.seg button.on { background: #fff; color: var(--maroon); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.fine { font-size: 13px; color: var(--ink-soft); margin-top: 14px; line-height: 1.5; }

/* toast */
.toast {
  position: absolute; left: 50%; top: calc(var(--safe-top) + 64px); transform: translateX(-50%); z-index: 70;
  padding: 10px 16px; border-radius: 14px; max-width: 86%; text-align: center;
  background: rgba(30,10,24,.92); color: var(--ivory); font-weight: 700; font-size: 14px;
  box-shadow: 0 0 0 1px rgba(232,180,74,.5), 0 8px 20px rgba(0,0,0,.4);
  animation: rise .25s ease;
}

/* splash */
#splash {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; display: grid; place-items: center;
  background: radial-gradient(120% 80% at 50% 35%, #6A2348 0%, #3A1830 55%, #22091B 100%);
  transition: opacity .6s ease;
}
#splash.gone { opacity: 0; pointer-events: none; }
.splash-inner { text-align: center; animation: rise2 .9s ease both; }
@keyframes rise2 { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.logo-mark {
  width: 120px; height: 120px; margin: 0 auto 14px; border-radius: 30px;
  background: center/contain no-repeat;
}
.logo { font-family: var(--serif); font-size: 44px; margin: 0; color: var(--gold-hi); letter-spacing: 1px; text-shadow: 0 3px 8px rgba(0,0,0,.6); }
.logo-hi { font-family: var(--serif); font-size: 22px; color: var(--ivory-dk); margin-top: 2px; }
.tagline { color: var(--ivory-dk); font-size: 15px; margin-top: 18px; letter-spacing: .3px; }

/* painted logo on the splash */
.splash-inner.has-logo .logo-mark { width: min(78vw, 360px); height: min(52vw, 240px); border-radius: 0; }
.splash-inner.has-logo .logo, .splash-inner.has-logo .logo-hi { display: none; }

/* ---------- layout editor ---------- */
#screen-home.editing .home-actions, #screen-home.editing .chapter-banner,
#screen-home.editing .festive-tag, #screen-home.editing .hud .pill { display: none !important; }
.ed-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 8px 8px calc(var(--safe-bot) + 8px);
  background: rgba(20, 6, 16, .92); border-top: 2px solid var(--gold);
  display: flex; flex-direction: column; gap: 6px;
}
.ed-row { display: flex; gap: 6px; align-items: center; }
.ed-btn {
  flex: 1 1 0; height: 40px; border-radius: 10px; font-weight: 800; font-size: 14px;
  background: #F6E8D0; color: var(--maroon); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px;
}
.ed-btn:active { transform: scale(.96); }
.ed-gold { background: linear-gradient(180deg, #FFE9A8, #D9962A); color: #4A1E05; }
.ed-label { flex: 3 1 0; text-align: center; font-weight: 700; font-size: 13px; color: var(--gold-hi); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ed-panel {
  position: absolute; left: 12px; right: 12px; top: calc(var(--safe-top) + 60px); z-index: 25;
  padding: 14px; border-radius: 14px; background: rgba(255, 246, 230, .96); color: var(--ink);
  font-size: 13px; line-height: 1.5; max-height: 55%; overflow-y: auto;
}
.ed-panel code { font-size: 12px; color: var(--maroon); }
.ed-text { width: 100%; height: 180px; font: 11px/1.35 monospace; border-radius: 10px; border: 1px solid #d9c7ae; padding: 8px; }

/* hint is being worked out in the background */
.booster.thinking { animation: thinking 0.9s ease-in-out infinite; }
@keyframes thinking { 0%,100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.06); filter: brightness(1.25); } }

/* older Android WebViews drop the space between flex items ("Level4") */
.btn-play .play-num, .level-title #level-num { margin-left: .28em; }

/* ================= version 1.1: home redesign ================= */
.home-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 0 12px calc(var(--safe-bot) + 14px); }
#next-up-home { flex: none; }
#next-up-home .next-up { max-width: 420px; margin: 0 auto; padding: 6px 12px 6px 6px; min-height: 66px; box-sizing: border-box; }
#next-up-home .next-up-ico, #next-up-home .next-up-ico canvas { width: 54px; height: 54px; }
.home-nav { display: flex; justify-content: space-around; align-self: center; width: 100%; max-width: 420px; box-sizing: border-box;
  padding: 4px 6px; border-radius: 18px; background: rgba(36,9,26,.78); border: 1px solid rgba(232,180,74,.35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.nav-btn { position: relative; width: 56px; height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #FBE3A0; border-radius: 12px; padding: 0; }
.nav-btn[hidden] { display: none; }
.nav-btn svg { width: 21px; height: 21px; }
.nav-btn span { font-size: 12px; font-weight: 800; letter-spacing: .2px; color: #FFF1D2; margin-top: 2px; }
.nav-btn:active { background: rgba(255,255,255,.08); transform: scale(.96); }
.nav-btn .dot { position: absolute; top: 3px; right: 9px; width: 11px; height: 11px; border-radius: 50%; background: #2ECC71; border: 2px solid #24091A; }
.nav-btn .dot[hidden] { display: none; }
.cta-row { display: flex; gap: 10px; align-items: center; justify-content: center; width: 100%; max-width: 420px; align-self: center; }
.cta-row .btn { transition: all .22s ease; }
.cta-row .btn-play { flex: 1 1 auto; max-width: none; height: 60px; }
#btn-restore { flex: 0 0 auto; height: 50px; }
/* when an upgrade is affordable, restoring becomes the main gold button */
.home-actions.restore-first #btn-restore { flex: 1 1 auto; height: 60px; order: 2; background: linear-gradient(180deg, #FFE69A 0%, #F2C14E 55%, #D99A22 100%); color: #5A2A10; font-size: 16px; line-height: 1.15; white-space: normal; padding: 0 14px; }
.home-actions.restore-first .btn-play { flex: 0 0 auto; height: 50px; order: 1; background: linear-gradient(180deg, #FFFDF7 0%, #F1DFC0 100%); color: var(--maroon); font-size: 16px; padding: 0 16px; animation: none; }
.home-actions.restore-first .btn-play .play-num { font-size: 20px; }
.btn-play.pulse { animation: pulse2 3s ease-in-out infinite; }
@keyframes pulse2 { 0%, 80%, 100% { transform: scale(1); } 90% { transform: scale(1.015); } }
.cam-btn { width: 40px; height: 40px; border-radius: 50%; margin-left: auto; display: grid; place-items: center; color: #FBE3A0;
  background: rgba(30,10,24,.62); border: 1px solid rgba(232,180,74,.45); }
.cam-btn svg { width: 22px; height: 22px; }
.hud .cam-btn + .icon-btn { margin-left: 0 !important; }
.letter-btn { position: absolute; right: 14px; bottom: calc(var(--safe-bot) + 268px); z-index: 11; width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #FFF6DE, #F1D9A8); border: 2px solid #E9B949; box-shadow: 0 6px 14px rgba(0,0,0,.4);
  display: grid; place-items: center; animation: letterBob 2.4s ease-in-out infinite; }
.letter-btn[hidden] { display: none; }
.letter-btn svg { width: 30px; height: 30px; }
@keyframes letterBob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(4deg); } }
.chapter-banner { animation: bannerSettle 0.4s ease 3s forwards; }
@keyframes bannerSettle { to { opacity: .72; } }
.festive-tag { bottom: calc(var(--safe-bot) + 336px); }

/* ---------- puzzle screen ---------- */
.diff-ribbon { position: absolute; left: 50%; top: calc(var(--safe-top) + 60px); z-index: 9; transform: translateX(-50%);
  height: 24px; line-height: 24px; padding: 0 14px; border-radius: 12px; font-size: 12.5px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase;
  color: #fff; background: #C74455; box-shadow: 0 2px 6px rgba(0,0,0,.35); animation: ribbonIn .18s ease-out; white-space: nowrap; }
.diff-ribbon.super { background: #782348; border: 1.5px solid #F6D27A; }
.diff-ribbon[hidden] { display: none; }
@keyframes ribbonIn { from { transform: translateX(-50%) scale(.92); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
.diff-ribbon:not([hidden]) ~ .sorted-pill { top: calc(var(--safe-top) + 90px); }
.sorted-pill b { display: inline-block; }
.sorted-pill b.tick { animation: tickUp .18s ease-out; }
.sorted-pill.flash { animation: pillFlash .24s ease-out; }
@keyframes tickUp { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes pillFlash { 0% { border-color: #FFE39A; box-shadow: 0 0 10px rgba(255,220,130,.8); } 100% { border-color: rgba(246,210,122,.45); box-shadow: none; } }
/* booster badges: owned uses in teal circles, prices in maroon pills with a coin */
.b-count { background: #087E7C !important; color: #fff !important; min-width: 23px; height: 23px; line-height: 23px; border-radius: 12px !important; border: 2px solid #E9F7F5; font-size: 13px; }
.b-count.price { background: linear-gradient(180deg, #8A2348, #5A1230) !important; color: #FFE7A3 !important; min-width: 34px; padding: 0 6px; border-color: #F6D27A; }
.b-free { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); font-size: 9.5px; font-weight: 800; color: #9FF3E7; letter-spacing: .5px; white-space: nowrap; text-shadow: 0 1px 2px #000; }
.booster[disabled] .b-count { display: none; }

/* ---------- win screen ---------- */
.modal .row.stack { flex-direction: column; align-items: stretch; }
.modal .row.stack .btn-main { height: 54px; width: 100%; }
.modal .row.stack .btn-quiet { height: 44px; width: 100%; background: transparent; box-shadow: none; border: 1.5px solid rgba(122,31,69,.25); color: var(--maroon); }
.guild-chip { display: flex; align-items: center; gap: 10px; width: 100%; margin: 8px 0 2px; padding: 6px 10px; border-radius: 14px; background: rgba(122,31,69,.07); text-align: left; font-size: 12.5px; font-weight: 700; color: var(--maroon); }
.guild-chip canvas { flex: none; }
.guild-chip-b { flex: 1; }
.guild-chip-b .next-up-bar { margin-top: 4px; height: 6px; }
.guild-chip.ready { background: #FFF3CF; box-shadow: 0 0 0 2px #E9B949; }
.first-win-scene { width: 100%; max-width: 260px; aspect-ratio: 4/3; margin: 6px auto 4px; border-radius: 16px; overflow: hidden; position: relative; box-shadow: 0 4px 12px rgba(60,20,10,.35); }
.first-win-scene canvas { width: 100%; height: 100%; display: block; }
.first-win-scene::after { content: ''; position: absolute; inset: 0; border-radius: 16px; box-shadow: inset 0 0 0 3px #E9B949; }

/* ---------- restore sheet ---------- */
.task { min-height: 76px; padding: 8px 10px 8px 10px; }
.task-ico, .task-ico canvas { width: 52px; height: 52px; }
.task-name { font-size: 14px; }
.task-desc { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.task.open { border-left: 4px solid #E9B949; }
.task .btn-restyle { height: 34px; min-width: 0; padding: 0 12px; font-size: 12.5px; }

/* ---------- guild, goals, letters, postcard ---------- */
.guild-head { display: flex; gap: 14px; align-items: center; text-align: left; margin: 6px 0 10px; }
.guild-head canvas { flex: none; filter: drop-shadow(0 3px 5px rgba(80,30,10,.35)); }
.guild-head-b { flex: 1; min-width: 0; }
.guild-rank { font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--maroon); }
.guild-sub { font-size: 12.5px; color: var(--ink-soft); margin: 3px 0; }
.guild-claim { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 8px 14px; border-radius: 14px; background: #FFF3CF; border: 1.5px solid #E9B949; font-weight: 800; color: #7A4A10; font-size: 13.5px; text-align: left; margin-bottom: 8px; }
.guild-list { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; }
.guild-row { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 12px; text-align: left; }
.guild-row.now { background: rgba(233,185,73,.16); }
.guild-row:not(.got) { opacity: .7; }
.guild-row-b { flex: 1; }
.guild-row-n { font-weight: 800; font-size: 14px; color: var(--maroon); }
.guild-row-s { font-size: 13px; color: var(--ink-soft); }
.guild-row-r { font-size: 13px; font-weight: 800; color: #7A4A10; display: flex; align-items: center; gap: 2px; white-space: nowrap; }
.guild-row-r .ico, .goal .btn .ico { width: 15px; height: 15px; }
.goal-list { display: flex; flex-direction: column; gap: 8px; }
.goal { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 14px; background: #fff; box-shadow: 0 1px 4px rgba(80,40,10,.12); text-align: left; }
.goal.ready { border-left: 4px solid #2ECC71; }
.goal.got { opacity: .6; }
.goal-b { flex: 1; min-width: 0; }
.goal-n { font-weight: 800; font-size: 14px; color: var(--ink); margin-bottom: 5px; }
.goal-s { font-size: 13px; color: var(--ink-soft); margin-top: 3px; }
.goal .btn { height: 38px; min-width: 70px; padding: 0 12px; font-size: 14px; }
.goal .btn.dim { opacity: .55; }
.goal-bonus { margin-top: 8px; background: #FFF3CF; border: 1.5px dashed #E9B949; }
.letter-box { padding-top: 22px; }
.letter { position: relative; text-align: left; padding: 22px 20px 16px; border-radius: 6px; background: repeating-linear-gradient(0deg, #FFF8E8 0 27px, #F1E3C6 27px 28px); box-shadow: 0 3px 10px rgba(80,40,10,.25); transform: rotate(-.6deg); }
.letter-seal { position: absolute; right: 14px; top: -16px; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #D9405A, #8A1030); color: #FFE3A0; display: grid; place-items: center; font-weight: 800; font-size: 18px; box-shadow: 0 2px 5px rgba(0,0,0,.35); }
.letter-to { font-family: var(--serif); font-style: italic; color: #7A4A10; margin-bottom: 6px; }
.letter-text { font-family: var(--serif); font-size: 16px; line-height: 28px; color: #3A2016; margin: 0; }
.letter-from { font-family: var(--serif); font-style: italic; text-align: right; color: #7A1E4E; margin-top: 10px; font-size: 14px; }
.letter-list { display: flex; flex-direction: column; gap: 8px; }
.letter-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: #fff; text-align: left; box-shadow: 0 1px 4px rgba(80,40,10,.12); width: 100%; }
.letter-row.locked { opacity: .55; background: transparent; box-shadow: none; }
.letter-row.new { border-left: 4px solid #2ECC71; }
.letter-env { font-size: 24px; }
.letter-row-n { font-weight: 800; font-size: 14px; color: var(--maroon); }
.letter-row-s { font-size: 13px; color: var(--ink-soft); }
.postcard-img { width: 100%; max-width: 300px; border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.35); display: block; margin: 6px auto 0; }
.journey-extra { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.j-node canvas { display: block; }

/* ---------- fabric reveal, lights, reduced motion ---------- */
.fabric-chip canvas { animation: clothOpen .45s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes clothOpen { 0% { transform: scale(.7) rotateX(70deg); opacity: 0; } 100% { transform: scale(1) rotateX(0); opacity: 1; } }
.lights-sweep { position: absolute; inset: 0; z-index: 8; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(90deg, rgba(255,214,140,0) 0%, rgba(255,214,140,.55) 45%, rgba(255,214,140,0) 60%); background-size: 250% 100%;
  animation: sweep .7s ease-out forwards; }
@keyframes sweep { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
.modal .row.stack .btn { flex: none; }

/* ================= milestone 2.0 ================= */
/* home: chapter banner with boutique switching */
.chapter-banner { display: flex; align-items: center; gap: 6px; padding: 4px 8px 6px; min-width: 0; max-width: 82vw;
  background: rgba(42,15,34,.84); border-radius: 16px; animation: none; }
.chapter-banner .ch-text { padding: 0 8px; min-width: 0; }
.chapter-title { font-size: 17px; overflow: hidden; text-overflow: ellipsis; }
.chapter-sub { font-size: 12.5px; }
.chapter-progress { width: 140px; height: 4px; margin-top: 4px; }
.ch-arrow { width: 28px; height: 28px; border-radius: 50%; color: #FBE3A0; font-size: 24px; line-height: 24px; background: rgba(255,255,255,.08); flex: none; padding: 0; }
.ch-arrow[hidden] { display: block !important; visibility: hidden; }
.peek-tag { position: absolute; left: 50%; top: calc(var(--safe-top) + 112px); transform: translateX(-50%); z-index: 12; padding: 6px 18px; border-radius: 16px;
  background: #F2C14E; color: #4A1E05; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; font-size: 13px; box-shadow: 0 3px 10px rgba(0,0,0,.45); pointer-events: none; }
.peek-tag[hidden] { display: none; }
/* bottom dock: actions on top, tab bar underneath */
.home-actions { gap: 8px; padding: 0 12px calc(var(--safe-bot) + 10px); }
.cta-row { gap: 10px; }
#btn-restore { flex: 1.15 1 0; height: 60px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 8px; text-align: left; justify-content: flex-start; min-width: 0; }
.home-actions.restore-first #btn-restore, .home-actions.restore-first .btn-play { order: 0 !important; }
#btn-restore .r-ico { width: 40px; height: 40px; border-radius: 10px; overflow: hidden; flex: none; background: #F3E3C8; box-shadow: inset 0 0 0 1.5px rgba(122,31,69,.2); }
#btn-restore .r-ico canvas { width: 40px; height: 40px; display: block; }
#btn-restore .r-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
#btn-restore .r-txt b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#btn-restore .r-txt small { font-size: 12.5px; font-weight: 700; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#btn-restore .r-txt small .ico { width: 12px; height: 12px; vertical-align: -2px; }
#btn-restore.ready { background: linear-gradient(180deg, #4ED89A 0%, #1FA366 55%, #137446 100%); color: #fff; box-shadow: 0 0 0 2px #FBE3A0, 0 4px 12px rgba(0,0,0,.35); animation: readyPulse 2.4s ease-in-out infinite; }
#btn-restore.ready small { opacity: .95; }
@keyframes readyPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
#btn-restore.chest.ready { background: linear-gradient(180deg, #FFE69A, #F2C14E 55%, #D99A22); color: #4A1E05; }
.cta-row .btn-play { flex: 1 1 0; height: 60px; }
.home-nav { padding: 2px 4px; border-radius: 16px; }
.nav-btn { width: 68px; height: 48px; }
.nav-btn .dot { right: 16px; background: #E8344E; }

/* puzzle: one sub-HUD row, free undo badge, order banner */
.sub-hud { position: absolute; left: 0; right: 0; top: calc(var(--safe-top) + 60px); z-index: 9; display: flex; justify-content: center; align-items: center; gap: 8px; pointer-events: none; }
.sub-hud .diff-ribbon, .sub-hud .sorted-pill { position: static; transform: none; }
.sub-hud .diff-ribbon { animation: ribbonIn2 .18s ease-out; }
@keyframes ribbonIn2 { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.diff-ribbon:not([hidden]) ~ .sorted-pill { top: auto; }
.sorted-pill { font-size: 13.5px; }
.sorted-pill b { font-size: 15px; color: #FFE9A8; }
.b-count.free { background: #1E9E62 !important; }
.b-free { display: none !important; }
.order-banner { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--safe-top) + 94px); z-index: 9; max-width: 90vw; display: flex; align-items: center; gap: 8px;
  padding: 5px 14px 5px 6px; border-radius: 16px; background: rgba(42,15,34,.88); border: 1px solid rgba(232,180,74,.5); color: #FFF1D2; font-size: 13px; pointer-events: none; }
.order-banner[hidden] { display: none; }
.order-banner .ob-sw canvas { border-radius: 6px; display: block; }
.order-banner .ob-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* win: compact, staggered */
.win-box .win-stars { margin-top: -6px; }
.win-box .win-star { width: 100px !important; height: 100px !important; animation: starPop .45s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes starPop { from { transform: scale(.3) rotate(-25deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
.win-box h2 { margin: 4px 0 2px; }
.win-sub { margin: 0 0 4px; font-size: 13.5px; }
.reward-row.stagger .reward { animation: popIn .3s ease-out both; }
.reward-row.stagger .reward:nth-child(1) { animation-delay: .18s; } .reward-row.stagger .reward:nth-child(2) { animation-delay: .28s; } .reward-row.stagger .reward:nth-child(3) { animation-delay: .38s; }
.row.stagger2 { animation: popIn .3s ease-out .4s both; }
@keyframes popIn { from { transform: translateY(8px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
.btn-rich { display: flex !important; align-items: center; gap: 10px; height: 66px !important; padding: 0 12px 0 8px !important; text-align: left; border-radius: 18px !important; }
.btn-rich .rich-ico { width: 48px; height: 48px; border-radius: 10px; overflow: hidden; flex: none; background: #F3E3C8; }
.btn-rich .rich-ico canvas { width: 48px; height: 48px; display: block; }
.btn-rich .rich-txt { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.btn-rich .rich-txt small { font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: #7A4A10; }
.btn-rich .rich-txt b { font-size: 16px; color: #4A1E05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-rich .rich-cost { flex: none; font-weight: 900; color: #4A1E05; background: rgba(255,255,255,.45); border-radius: 12px; padding: 4px 8px; font-size: 14px; }
.btn-rich .rich-cost .ico { width: 15px; height: 15px; vertical-align: -2px; }
.win-next { font-size: 12.5px; color: var(--ink-soft); margin: 6px 0 0; }
.win-next .ico { width: 13px; height: 13px; vertical-align: -2px; }
.fabric-chip.big canvas { width: 64px !important; height: 64px !important; }

/* restore sheet */
.sheet-head { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 6px; }
.sheet-head h3 { margin: 0; }
.star-pill { height: 30px !important; font-size: 14px; }
.star-pill .ico { width: 18px; height: 18px; }
.done-sum { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: rgba(46,125,79,.08); }
.done-strip { display: flex; }
.done-strip canvas { width: 28px; height: 28px; border-radius: 7px; margin-right: -6px; box-shadow: 0 0 0 2px #FFFBF2; }
.done-sum-t { font-size: 13px; font-weight: 800; color: #2E7D4F; margin-left: 8px; }
.task.done.restylable { opacity: 1; background: #fff; box-shadow: 0 1px 4px rgba(80,40,10,.12); }
.task.done { opacity: 1; }
.task.done .task-ico, .task.done .task-body { opacity: .85; }
.task.open { border: 2px solid #E9B949; border-left-width: 4px; background: #FFFDF9; }
.task.open .task-ico, .task.open .task-ico canvas { width: 60px; height: 60px; }
.task.upcoming { min-height: 56px; opacity: .8; background: transparent; box-shadow: none; }
.task.upcoming .task-ico, .task.upcoming .task-ico canvas { width: 44px; height: 44px; }
.lock-badge { flex: none; height: 32px; padding: 0 12px; border-radius: 16px; background: #EFE4D2; color: #8A6A4A; font-weight: 800; font-size: 13px; display: flex; align-items: center; gap: 3px; }
.lock-badge .ico { width: 14px; height: 14px; }
.btn-restyle .ico { width: 14px; height: 14px; vertical-align: -2px; }

/* today */
.gift-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 4px 0 8px; }
.gift-day { border-radius: 10px; padding: 5px 2px; background: #F5EAD6; text-align: center; font-size: 12px; color: #7A5A3A; }
.gift-day.got { opacity: .45; }
.gift-day.today { background: #FFF3CF; box-shadow: 0 0 0 2px #E9B949; color: #4A1E05; font-weight: 800; }
.gift-day.big { background: #F8E0E6; }
.gift-v { display: flex; flex-direction: column; align-items: center; font-weight: 800; font-size: 12.5px; margin-top: 2px; }
.gift-v .ico { width: 16px; height: 16px; }
.gift-claim { display: block; margin: 0 auto 10px; }
.goal-reward { flex: none; min-width: 64px; height: 32px; border-radius: 10px; background: #F3E5CE; color: #7A4A10; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 3px; }
.goal-reward .ico { width: 15px; height: 15px; }
.goal { min-height: 52px; }
.goal .next-up-bar { height: 7px; }
.pulse-soft { animation: readyPulse 1.8s ease-in-out infinite; }
.guild-card { display: block; width: 100%; margin-top: 12px; padding: 8px 10px; border-radius: 14px; background: rgba(122,31,69,.06); text-align: left; }
.guild-card.ready { box-shadow: 0 0 0 2px #E9B949; background: #FFF3CF; }
.guild-head.small { margin: 0; }
.guild-head.small .guild-rank { font-size: 17px; }
.guild-next-r { font-size: 13px; font-weight: 800; color: #7A4A10; display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.guild-next-r .ico { width: 14px; height: 14px; }
.guild-list.collapsed { display: none; }

/* collection */
.seg.tabs { display: flex; justify-content: center; margin: 2px auto 10px; }
.seg.tabs button { flex: 1; }
.album-ms { margin: -2px 4px 10px; }
.album-ms-l { display: flex; justify-content: space-between; font-size: 12px; font-weight: 800; color: #9A6A3A; margin-top: 3px; }
.album-cell { background: none; padding: 0; }
.album-cell canvas { box-shadow: 0 0 0 1.5px rgba(122,31,69,.18), 0 2px 6px rgba(80,40,10,.25); }
.fabric-big { width: 180px; height: 180px; border-radius: 16px; display: block; margin: 4px auto 10px; box-shadow: 0 4px 14px rgba(60,20,10,.35); }
.fabric-story { font-family: var(--serif); font-size: 15px; line-height: 1.5; color: #3A2016; margin: 8px 4px 0; text-align: left; }

/* journey */
.journey-cards { display: flex; flex-direction: column; gap: 10px; }
.j-card { display: flex; gap: 12px; padding: 8px; border-radius: 16px; background: #fff; box-shadow: 0 1px 5px rgba(80,40,10,.14); text-align: left; align-items: center; }
.j-card.viewing { box-shadow: 0 0 0 2px #E9B949; }
.j-card.locked { opacity: .65; }
.j-pic canvas { width: 96px; height: 120px; border-radius: 12px; display: block; }
.j-card .j-body { flex: 1; min-width: 0; }
.j-card .btn-small { height: 34px; margin-top: 6px; padding: 0 14px; font-size: 13.5px; }
.j-card .next-up-bar { margin: 6px 0 2px; }
.j-soon { margin-top: 12px; padding: 10px; border-radius: 14px; background: rgba(122,31,69,.05); }
.j-soon-t { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: #9A7E66; margin-bottom: 6px; }
.j-soon-row { display: flex; justify-content: space-around; }
.j-soon-it { font-size: 13px; color: #8A6E56; text-align: center; }
.j-soon-it canvas { display: block; margin: 0 auto 2px; }
.btn-quiet.btn-small { display: block; margin: 8px auto 0; height: 36px; }
.set-group { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; color: #9A6A3A; margin: 10px 2px 2px; text-align: left; }
.set-row { min-height: 48px; }
.reset-row { border-top: 1px solid rgba(122,31,69,.12); padding-top: 12px; margin-top: 12px; }
.btn-danger-quiet { background: transparent !important; color: #B8203A !important; border: 1px solid rgba(184,32,58,.3) !important; box-shadow: none !important; }
.j-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.first-win-scene { position: relative; }
.first-win-scene canvas { position: absolute; inset: 0; }
.first-win-scene canvas:first-child { position: relative; }
.first-win-scene .fw-after { opacity: 0; transition: opacity .45s ease; }
.first-win-scene.dream .fw-after { opacity: 1; }
.fw-cap { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-family: var(--serif); font-style: italic; font-size: 14px; color: #FFF1D2; text-shadow: 0 1px 4px rgba(0,0,0,.9); z-index: 2; }
/* the level plaque stays centred whatever the coin count */
.level-hud .level-title { position: absolute; left: 50%; transform: translateX(-50%); }
.level-hud #level-coins { margin-left: auto; }
/* round 2: restore button with a corner star badge and a two-line name */
#btn-restore { position: relative; flex: 1.2 1 0; }
#btn-restore[hidden] { display: none !important; }
.home-actions.solo-play .btn-play { flex: 1 1 100%; }
#btn-restore .r-txt small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 13px; line-height: 1.15; opacity: .85; }
#btn-restore .r-txt b { font-size: 14.5px; }
.r-badge { position: absolute; top: -9px; right: 10px; height: 20px; padding: 0 7px; border-radius: 10px; background: #3A1830; color: #FBE3A0; font-size: 12.5px; font-weight: 800;
  display: flex; align-items: center; gap: 2px; box-shadow: 0 1px 4px rgba(0,0,0,.35); border: 1px solid rgba(232,180,74,.6); }
.r-badge[hidden] { display: none; }
.r-badge .ico { width: 12px; height: 12px; }
#btn-restore.ready { animation: none; }
#btn-restore.pulse-once { animation: readyPulse .45s ease-in-out 1; }
.btn:active, .nav-btn:active { transform: scale(.97); filter: brightness(.92); transition: transform .09s, filter .09s; }
.chapter-progress { height: 6px; background: rgba(0,0,0,.45); }
.chapter-progress span { transition: width .4s ease; }
.choice.current { box-shadow: 0 0 0 3px var(--gold); }
.btn-rich .rich-txt b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14.5px; line-height: 1.15; }
.btn-rich { height: auto !important; min-height: 70px; padding-top: 6px !important; padding-bottom: 6px !important; }
.modal .row.stack .btn-quiet { height: 44px; border: 1.5px solid #D7BFA1; }
.peek-tag { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.peek-tag[hidden] { display: none; }
.peek-tag small { font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; opacity: .85; margin-top: 2px; }
.fabric-detail { position: relative; text-align: center; padding-top: 4px; }
.fabric-back { position: absolute; left: 0; top: 0; height: 34px; padding: 0 12px; }
.fabric-detail .fabric-big { margin: 6px auto 8px; display: block; }
.album-cell.locked .album-n { color: #B9A588; }
.album-cell.locked .album-f { opacity: .6; }
/* small screens: a tighter Today sheet so it fits without scrolling */
@media (max-height: 700px) {
  .gift-day { padding: 3px 1px; font-size: 11px; }
  .gift-strip { margin: 2px 0 6px; }
  .gift-claim { height: 38px; margin-bottom: 4px; }
  .goal { padding: 6px 10px !important; margin-bottom: 6px !important; }
  .goal .goal-n { font-size: 13px; }
  .goal-reward { height: 28px; min-width: 56px; }
  .guild-card { margin-top: 8px; padding: 6px 10px; }
  .modal .album-sub { margin: 2px 0 6px; }
}
.peek-tag { white-space: nowrap; padding: 6px 16px; }
.coach.home-coach { pointer-events: none; transition: opacity .4s; }
.coach.home-coach.fade { opacity: 0; }
/* Tangled sheet */
.modal.tangled { text-align: center; }
.tangle-ico { position: relative; width: 74px; height: 54px; margin: 0 auto 4px; }
.tangle-ico i { position: absolute; left: 6px; right: 6px; top: 22px; height: 8px; border-radius: 6px; animation: tangleWiggle 1.6s ease-in-out infinite; }
.tangle-ico i:nth-child(1) { background: #C2185B; transform: rotate(22deg); }
.tangle-ico i:nth-child(2) { background: #E9B949; transform: rotate(-18deg); animation-delay: .2s; }
.tangle-ico i:nth-child(3) { background: #1F7A8C; transform: rotate(4deg); animation-delay: .4s; }
@keyframes tangleWiggle { 0%,100% { margin-top: 0; } 50% { margin-top: -4px; } }
.btn-rewind { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; }
.btn-rewind small { font-size: 12.5px; font-weight: 700; opacity: .8; }
/* win: the big word over the board */
.win-word { position: absolute; left: 0; right: 0; top: 38%; z-index: 15; text-align: center; pointer-events: none;
  font-family: var(--serif, 'Noto Serif', serif); font-weight: 800; font-size: 46px; color: #FFE7A3; letter-spacing: .5px;
  text-shadow: 0 3px 0 #8A4B10, 0 6px 18px rgba(0,0,0,.55), 0 0 30px rgba(255,200,90,.55); }
.win-word[hidden] { display: none; }
.win-word.big { font-size: 54px; color: #FFF1C4; }
.win-word.go { animation: wordPop 1.7s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes wordPop { 0% { transform: scale(.2) rotate(-8deg); opacity: 0; } 18% { transform: scale(1.12) rotate(2deg); opacity: 1; }
  28% { transform: scale(1) rotate(0); } 80% { transform: scale(1.04); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
/* win sheet: the star slams in with a shine, coins count up */
.win-box .win-stars { position: relative; overflow: visible; }
.win-box .win-star { animation: starSlam .6s cubic-bezier(.3,1.5,.5,1) both !important; filter: drop-shadow(0 6px 10px rgba(160,90,0,.35)); }
@keyframes starSlam { 0% { transform: scale(2.4) rotate(-25deg); opacity: 0; } 55% { transform: scale(.92) rotate(4deg); opacity: 1; } 75% { transform: scale(1.06); } 100% { transform: scale(1) rotate(0); } }
.win-box .win-stars::after { content: ''; position: absolute; left: 50%; top: 50%; width: 180px; height: 180px; margin: -90px 0 0 -90px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,226,140,.55) 0%, rgba(255,226,140,0) 65%); animation: haloPulse 2.2s ease-in-out .5s infinite; pointer-events: none; z-index: -1; }
@keyframes haloPulse { 0%,100% { transform: scale(.85); opacity: .7; } 50% { transform: scale(1.1); opacity: 1; } }
.reward.landed { animation: rewardLand .35s ease-out; }
@keyframes rewardLand { 0% { transform: scale(1); } 45% { transform: scale(1.15); } 100% { transform: scale(1); } }
.chapter-progress.glow { animation: barGlow 1.4s ease-out; }
@keyframes barGlow { 0% { box-shadow: 0 0 0 0 rgba(255,214,120,0); } 30% { box-shadow: 0 0 14px 4px rgba(255,214,120,.85); } 100% { box-shadow: 0 0 0 0 rgba(255,214,120,0); } }

/* readability: tap targets of at least 44-48 px, Hindi a touch larger */
.close-x { width: 44px !important; height: 44px !important; }
.ch-arrow { width: 30px !important; height: 30px !important; position: relative; }
.ch-arrow::before { content: ''; position: absolute; inset: -9px; }   /* 48 px hit area, 30 px drawn */
.ch-arrow[hidden] { width: 0 !important; margin: 0 !important; }      /* no reserved space when there is nothing to switch to */
.seg button, .tabs button { min-height: 40px; }
.fabric-back { height: 40px; }
html[lang="hi"] .b-label, html[lang="hi"] .nav-btn span, html[lang="hi"] .goal-s, html[lang="hi"] .task-desc,
html[lang="hi"] .album-f, html[lang="hi"] #btn-restore .r-txt small { font-size: 13.5px; line-height: 1.35; }