/* Chain World: consolidated production files. */

/* Source: assets/solitaire-v11.css */
:root {
  --bg-deep: #062c25;
  --bg: #0a7455;
  --bg-light: #10a16f;
  --ink: #103b34;
  --cream: #fffaf0;
  --gold: #ffd557;
  --accent: #76dfa7;
  --glass: rgba(3, 51, 42, .48);
  --line: rgba(255, 255, 255, .16);
  --shadow: 0 18px 40px rgba(0, 28, 21, .24);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { min-height: 100%; margin: 0; }
body {
  overflow-x: hidden;
  background: #041d19;
  color: #fff;
  font-family: Inter, ui-rounded, "SF Pro Rounded", "Segoe UI", Arial, sans-serif;
  user-select: none;
}
button { font: inherit; }
button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 20% 0%, rgba(71, 211, 143, .28), transparent 34%),
    radial-gradient(circle at 90% 70%, rgba(4, 55, 47, .64), transparent 42%),
    linear-gradient(155deg, #0d9b68 0%, #087451 47%, #064b3e 100%);
}

.ambient { position: fixed; border-radius: 50%; filter: blur(8px); opacity: .22; pointer-events: none; }
.ambient-one { width: 240px; height: 240px; background: #9cffc7; top: -120px; left: -80px; }
.ambient-two { width: 330px; height: 330px; background: #03352e; right: -130px; bottom: 40px; }

.app {
  position: relative;
  z-index: 1;
  width: min(100%, 760px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 18px max(14px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}

.topbar { min-height: 54px; display: flex; align-items: center; gap: 10px; }
.icon-button,
.currency-pill,
.streak-pill {
  border: 1px solid rgba(255,255,255,.13);
  color: #fff;
  background: rgba(3, 48, 40, .43);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 8px 24px rgba(3, 45, 35, .14);
  backdrop-filter: blur(12px);
}
.icon-button { width: 45px; height: 45px; border-radius: 15px; display: grid; place-content: center; gap: 5px; cursor: pointer; }
.icon-button span { width: 21px; height: 2px; background: currentColor; border-radius: 9px; }
.currency-pill { height: 45px; border-radius: 16px; padding: 0 8px 0 6px; display: flex; align-items: center; gap: 7px; cursor: pointer; }
.currency-pill strong { min-width: 30px; font-size: 15px; text-align: left; }
.coin-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; color: #8e5b00; background: linear-gradient(145deg, #fff18b, #ffc934); border: 2px solid #fff1a2; box-shadow: 0 3px 0 #b97900; }
.pill-plus { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 8px; color: #0a674e; background: #fff; font-weight: 900; }
.brand { margin: 0 auto; display: flex; align-items: center; gap: 8px; font-size: 10px; line-height: 1.02; letter-spacing: .03em; text-transform: uppercase; opacity: .94; }
.brand b { font-size: 13px; letter-spacing: .12em; }
.brand-mark { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 12px; color: #0a6f54; background: #fff; font-size: 25px; line-height: 1; font-weight: 800; transform: rotate(-8deg); }
.streak-pill { height: 45px; min-width: 59px; padding: 0 10px; border-radius: 16px; display: flex; gap: 5px; align-items: center; justify-content: center; cursor: pointer; }
.moves-pill { min-width: 65px; height: 45px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.13); border-radius: 14px; display: grid; grid-template-columns:auto auto; align-content:center; column-gap:5px; color:#fff; background:rgba(3,48,40,.43); box-shadow:inset 0 1px rgba(255,255,255,.08); }
.moves-pill span { grid-column:1/-1; color:rgba(255,255,255,.54); font-size:7px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.moves-pill b { font-size:15px; line-height:1; }
.moves-pill small { align-self:end; color:rgba(255,255,255,.47); font-size:7px; }
.moves-pill.danger { border-color:rgba(255,196,105,.55); background:rgba(125,61,20,.36); animation:targetPulse .8s ease infinite alternate; }

.level-heading { margin-top: 8px; }
.level-kicker { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.64); }
.level-kicker .dot { color: var(--accent); }
.goal-row { display: flex; align-items: center; gap: 12px; margin-top: 7px; }
.goal-icon { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; background: rgba(255,255,255,.95); box-shadow: 0 9px 20px rgba(1, 49, 38, .17); }
.goal-row p { margin: 0 0 2px; color: rgba(255,255,255,.7); font-size: 12px; }
.goal-row h1 { margin: 0; font-size: clamp(19px, 4.2vw, 26px); line-height: 1.08; letter-spacing: -.035em; }
.round-progress { margin-top: 9px; display: grid; grid-template-columns: repeat(var(--round-count, 3), 1fr); gap: 4px; }
.round-progress span { height: 4px; border-radius: 9px; background: rgba(255,255,255,.17); overflow: hidden; }
.round-progress span.done,
.round-progress span.current { background: var(--accent); box-shadow: 0 0 13px rgba(118,223,167,.46); }

.chain-area { margin-top: 12px; padding: 11px; border: 1px solid rgba(255,255,255,.13); border-radius: 21px; background: rgba(4,56,47,.36); box-shadow: inset 0 1px rgba(255,255,255,.05); backdrop-filter: blur(10px); }
.chain-slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.chain-slot { position: relative; min-height: 52px; border: 1px dashed rgba(255,255,255,.22); border-radius: 13px; display: grid; place-items: center; padding: 4px; color: rgba(255,255,255,.38); font-weight: 900; font-size: 18px; text-align: center; cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease; }
.chain-slot:not(:last-child)::after { content: "›"; position: absolute; right: -8px; z-index: 2; color: rgba(255,255,255,.4); font-size: 18px; }
.chain-slot.filled { border-style: solid; border-color: rgba(255,255,255,.7); background: var(--cream); color: var(--ink); box-shadow: 0 5px 0 rgba(2,57,45,.22), 0 10px 18px rgba(2,44,35,.18); font-size: clamp(9px, 2.3vw, 12px); animation: slotPop .32s cubic-bezier(.2,1.4,.4,1); }
.chain-slot.next { border-color: var(--accent); background: rgba(118,223,167,.09); box-shadow: 0 0 0 2px rgba(118,223,167,.08); }
.chain-slot.has-card { padding: 3px; border-style: solid; border-color: rgba(255,255,255,.34); }
.answer-card { width: 100%; min-height: 44px; padding: 5px 3px; border: 1px solid rgba(255,255,255,.9); border-radius: 10px; color: #5c4036; background: linear-gradient(160deg, #fffdf7, #fff4df); box-shadow: 0 4px 0 rgba(2,57,45,.23); font-size: clamp(8px, 2.15vw, 12px); font-weight: 800; line-height: 1.05; overflow-wrap: anywhere; }
.chain-area.answer-error { border-color: rgba(255,117,117,.8); animation: shake .35s ease 2; }
.chain-area.answer-success { border-color: rgba(255,225,91,.82); box-shadow: 0 0 0 3px rgba(255,225,91,.12), inset 0 1px rgba(255,255,255,.08); }
.chain-caption { margin: 8px 0 0; text-align: center; color: rgba(255,255,255,.63); font-size: 11px; }

.board-wrap { flex: 1; display: flex; align-items: center; min-height: 180px; padding: 8px 0 4px; }
.card-board { width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(5px, 1.4vw, 10px); align-items: end; }
.stack { position: relative; height: 168px; }
.back-card,
.card-face { position: absolute; left: 0; width: 100%; border-radius: 14px; }
.back-card { height: 74px; bottom: calc(18px + (var(--layer) * 16px)); border: 2px solid rgba(255,255,255,.89); background-color: #58aaf3; background-image: linear-gradient(135deg, rgba(255,255,255,.15) 25%, transparent 25%), linear-gradient(225deg, rgba(255,255,255,.15) 25%, transparent 25%), linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%), linear-gradient(315deg, rgba(255,255,255,.15) 25%, #4d9fe9 25%); background-position: 10px 0, 10px 0, 0 0, 0 0; background-size: 20px 20px; box-shadow: 0 4px 0 rgba(2,55,44,.22); }
.card-face { bottom: 0; min-height: 78px; padding: 9px 4px; border: 2px solid rgba(255,255,255,.94); color: #5c4036; background: linear-gradient(160deg, #fffdf7, #fff6e6); box-shadow: 0 6px 0 rgba(2,55,44,.25), 0 13px 18px rgba(1,45,35,.17); display: grid; place-items: center; text-align: center; font-weight: 750; font-size: clamp(10px, 2.35vw, 14px); line-height: 1.08; cursor: grab; transition: transform .16s ease, filter .16s ease, opacity .16s ease; overflow-wrap: anywhere; }
.card-face::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(105,74,55,.08); border-radius: 10px; pointer-events: none; }
.card-face:hover { transform: translateY(-4px); filter: brightness(1.025); }
.card-face:active { transform: translateY(1px) scale(.98); }
.card-face.hint { animation: hintPulse .8s ease infinite alternate; }
.card-face.blocker-hint::after { content: "Уберите эту карту"; position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: 86px; padding: 5px; border-radius: 7px; color: #0c4a3b; background: #fff5b7; font-size: 8px; box-shadow: 0 7px 15px rgba(0,0,0,.16); }
.stack.empty { display: grid; place-items: end center; }
.stack.empty::after { content: "✓"; width: 100%; height: 74px; border-radius: 14px; border: 1px dashed rgba(255,255,255,.16); display: grid; place-items: center; color: rgba(255,255,255,.22); font-size: 25px; }

.shelf-section { padding: 9px 11px 10px; border-radius: 18px; background: rgba(2,45,38,.35); border: 1px solid rgba(255,255,255,.1); }
.shelf-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.shelf-title span { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; }
.shelf-title small { color: rgba(255,255,255,.48); font-size: 9px; }
.shelf { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
.shelf-slot { min-height: 46px; border-radius: 11px; border: 1px dashed rgba(255,255,255,.2); display: grid; place-items: center; color: rgba(255,255,255,.25); font-size: 12px; cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease; }
.shelf-card { width: 100%; min-height: 46px; padding: 5px 3px; border: 0; border-radius: 11px; color: #5c4036; background: #fff8e9; box-shadow: 0 4px 0 rgba(1,44,35,.2); font-size: clamp(9px, 2.2vw, 12px); font-weight: 750; overflow-wrap: anywhere; cursor: pointer; }
.shelf-card.hint { animation: hintPulse .8s ease infinite alternate; }
.shelf.full { animation: shelfDanger .4s ease 2; }

.drag-card { touch-action: none; user-select: none; -webkit-user-drag: none; cursor: grab; }
.drag-card:active { cursor: grabbing; }
.drag-card.selected { outline: 3px solid var(--gold); outline-offset: 2px; transform: translateY(-5px); filter: brightness(1.04); }
.dragging-source { opacity: .24 !important; transform: scale(.95) !important; }
.drag-ghost { position: fixed; z-index: 100; left: 0; top: 0; pointer-events: none; }
.drop-zone.drop-hover { border-color: var(--gold) !important; background: rgba(255,221,87,.18) !important; transform: translateY(-3px) scale(1.025); box-shadow: 0 0 0 3px rgba(255,221,87,.12); }
.drop-zone.target-hint { border-color: var(--gold) !important; background: rgba(255,221,87,.16) !important; animation: targetPulse .8s ease infinite alternate; }

.actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 10px; }
.action-button { min-height: 59px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; color: #fff; background: rgba(3,48,40,.47); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 7px; padding: 7px 8px; text-align: left; cursor: pointer; }
.action-button .action-icon { grid-row: 1 / span 2; font-size: 22px; }
.action-button > span:not(.action-icon) { font-size: 11px; font-weight: 800; }
.action-button small { color: rgba(255,255,255,.54); font-size: 9px; }
.action-button.accent { color: #104a3b; background: var(--accent); border-color: rgba(255,255,255,.45); }
.action-button.accent small { color: rgba(16,74,59,.67); }
.action-button:disabled { opacity: .42; cursor: not-allowed; }

.toast { position: fixed; z-index: 20; left: 50%; top: max(70px, calc(env(safe-area-inset-top) + 54px)); transform: translate(-50%, -20px); max-width: calc(100% - 40px); padding: 10px 16px; border-radius: 14px; color: #17483c; background: #fff9df; box-shadow: 0 14px 30px rgba(0,35,27,.28); font-weight: 800; font-size: 12px; opacity: 0; pointer-events: none; transition: .25s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.modal-backdrop { position: fixed; z-index: 30; inset: 0; padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom)); display: grid; place-items: center; background: rgba(0,25,21,.62); backdrop-filter: blur(10px); transition: opacity .2s ease; }
.modal-backdrop.hidden { display: none; opacity: 0; pointer-events: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.modal { position: relative; width: min(100%, 430px); max-height: 92dvh; overflow: auto; padding: 28px 22px 22px; border: 1px solid rgba(255,255,255,.34); border-radius: 30px; color: #174b3e; background: linear-gradient(160deg, rgba(255,255,255,.98), rgba(242,255,249,.95)); box-shadow: 0 30px 90px rgba(0,25,20,.44); text-align: center; transform: translateY(0) scale(1); transition: .25s cubic-bezier(.2,.8,.2,1); }
.hidden .modal { transform: translateY(18px) scale(.97); }
.modal-close { position: absolute; z-index: 2; top: 14px; right: 14px; width: 34px; height: 34px; border: 0; border-radius: 12px; color: #3b665d; background: #e4f1ed; font-size: 24px; line-height: 1; cursor: pointer; }
.modal-logo { width: 60px; height: 60px; margin: 0 auto 8px; display: grid; place-items: center; border-radius: 20px; color: #fff; background: linear-gradient(145deg, #18aa76, #087054); font-size: 40px; font-weight: 900; transform: rotate(-6deg); box-shadow: 0 10px 25px rgba(7,115,83,.25); }
.modal h2 { margin: 6px 0 6px; font-size: 27px; letter-spacing: -.04em; }
.modal > p:not(.eyebrow) { margin: 0; color: #67827c; font-size: 13px; }
.eyebrow { margin: 0 !important; color: #1a9d73 !important; font-size: 10px !important; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.menu-list { display: grid; gap: 8px; margin-top: 20px; }
.menu-list button,
.menu-list .menu-link { width: 100%; min-height: 58px; padding: 9px 12px; border: 1px solid #d9ebe5; border-radius: 17px; color: #174b3e; background: #fff; display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; align-items: center; text-align: left; cursor: pointer; box-shadow: 0 6px 16px rgba(15,91,70,.05); text-decoration:none; }
.menu-list button > span,
.menu-list .menu-link > span { grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: #087253; background: #e8f7f1; font-weight: 900; }
.menu-list button b,
.menu-list .menu-link b { font-size: 13px; }
.menu-list button small,
.menu-list .menu-link small { color: #839a95; font-size: 10px; }
.menu-footer { margin-top: 16px; color: #91a39f; font-size: 10px; }

.account-modal { width: min(100%, 440px); }
.account-icon { width: 62px; height: 62px; margin: 0 auto 12px; border-radius: 20px; display: grid; place-items: center; background: #e4f7ef; font-size: 30px; }
.account-description { margin: 10px 0 0 !important; color: #67827c; font-size: 12px !important; line-height: 1.45; }
.account-tabs { margin: 18px 0 14px; padding: 4px; border-radius: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: #e8f3ef; }
.account-tabs button { min-height: 38px; border: 0; border-radius: 11px; color: #67827c; background: transparent; font-size: 12px; font-weight: 850; cursor: pointer; }
.account-tabs button.active { color: #087252; background: #fff; box-shadow: 0 4px 12px rgba(7,84,64,.09); }
.account-form { display: grid; gap: 11px; text-align: left; }
.account-form label { display: grid; gap: 5px; color: #4e7067; font-size: 10px; font-weight: 850; }
.account-form input { width: 100%; min-height: 45px; padding: 0 13px; border: 1px solid #d1e4de; border-radius: 13px; outline: 0; color: #174b3e; background: #fff; font: inherit; font-size: 13px; user-select: text; }
.account-form input:focus { border-color: #22aa7c; box-shadow: 0 0 0 3px rgba(34,170,124,.12); }
.account-form .primary-button { margin-top: 3px; }
.account-error { min-height: 16px; margin: -2px 0 0; color: #bd473c; font-size: 11px; line-height: 1.35; }
.account-hidden { display: none !important; }
.profile-card { margin: 20px 0 14px; padding: 18px; border-radius: 18px; display: grid; gap: 4px; background: #eaf7f2; }
.profile-card b { font-size: 18px; }
.profile-card span { color: #087252; font-size: 12px; font-weight: 800; }
.profile-card small { color: #78918a; font-size: 11px; }
.account-logout { margin-top: 20px; color: #aa493f; }

.levels-modal { width: min(100%, 520px); text-align: left; }
.levels-modal > .eyebrow,
.levels-modal > h2 { text-align: center; }
.levels-scroll { max-height: 64dvh; overflow: auto; margin-top: 18px; padding: 2px; }
.chapter-block + .chapter-block { margin-top: 19px; }
.chapter-title { display: flex; justify-content: space-between; align-items: center; margin: 0 2px 9px; }
.chapter-title b { font-size: 12px; }
.chapter-title small { color: #8aa099; font-size: 9px; }
.level-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.level-button { position: relative; min-height: 70px; padding: 8px 4px; border: 1px solid #dcece7; border-radius: 16px; color: #174b3e; background: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 5px 12px rgba(8,80,60,.07); }
.level-button span { font-size: 23px; }
.level-button b { font-size: 11px; }
.level-button small { color: #f2b825; font-size: 9px; letter-spacing: -1px; }
.level-button.current { border-color: #20aa7b; box-shadow: 0 0 0 2px rgba(32,170,123,.13); }
.level-button.locked { color: #9caaa6; background: #eef3f1; filter: grayscale(1); cursor: not-allowed; }
.development-block { margin-bottom:6px; }
.development-card { width:100%; padding:14px; border:1px dashed #b9d6cc; border-radius:17px; display:flex; align-items:center; gap:13px; color:#46675e; background:#f0f7f4; text-align:left; }
.development-card>span { width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:#fff;font-size:22px; }
.development-card b,.development-card small { display:block; }
.development-card b { font-size:12px; }
.development-card small { margin-top:3px;color:#829891;font-size:9px; }

.tutorial-visual { min-height: 88px; margin: 8px 0 19px; padding: 15px 8px; border-radius: 20px; background: #e9f7f2; display: flex; align-items: center; justify-content: center; gap: 7px; color: #52a58d; font-weight: 900; }
.mini-card { min-width: 66px; padding: 14px 5px; border: 2px solid #fff; border-radius: 12px; color: #5e473f; background: #fff9ec; box-shadow: 0 5px 0 #cce7de; font-size: 10px; }
.tutorial-modal ol { margin: 17px 0; padding-left: 22px; text-align: left; color: #5a756e; font-size: 12px; line-height: 1.5; }
.tutorial-modal li + li { margin-top: 8px; }
.primary-button { width: 100%; min-height: 52px; border: 0; border-radius: 16px; color: #fff; background: linear-gradient(145deg, #16a978, #087352); box-shadow: 0 7px 0 #075f45, 0 13px 20px rgba(8,115,82,.18); font-weight: 850; cursor: pointer; }
.primary-button:active { transform: translateY(4px); box-shadow: 0 3px 0 #075f45; }
.text-button { margin-top: 13px; border: 0; color: #6f8881; background: transparent; font-size: 12px; font-weight: 800; cursor: pointer; }

.reward-chest { width: 90px; height: 78px; margin: 7px auto 16px; border: 6px solid #fff3a3; border-radius: 26px 26px 20px 20px; display: grid; place-items: center; color: #9d6400; background: linear-gradient(145deg, #ffe96c, #f8b52b); box-shadow: 0 11px 0 #cb7d06, 0 22px 30px rgba(172,111,0,.22); font-size: 41px; transform: rotate(-3deg); }
.days-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 19px 0; }
.day-dot { min-height: 47px; border-radius: 11px; display: grid; place-items: center; color: #89a199; background: #e9f1ee; font-size: 9px; }
.day-dot b { font-size: 13px; }
.day-dot.active { color: #fff; background: #16a978; }
.day-dot.claimed { color: #087352; background: #c9eee0; }

.complete-badge { width: 83px; height: 83px; margin: 1px auto 16px; border-radius: 26px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #24b986, #087252); box-shadow: 0 12px 0 #066148, 0 23px 32px rgba(8,115,82,.21); font-size: 42px; }
.complete-badge.failed { background:linear-gradient(145deg,#ff9668,#c64f42);box-shadow:0 12px 0 #a83c32,0 23px 32px rgba(126,47,39,.2); }
.complete-badge.development { background:linear-gradient(145deg,#ffd963,#eca922);box-shadow:0 12px 0 #c78312,0 23px 32px rgba(146,94,12,.2); }
#movesFailedModal .primary-button,#developmentModal .primary-button{margin-top:20px}
.load-error { width:min(100%,430px);margin:auto;padding:42px 25px;text-align:center; }
.load-error span { font-size:44px; }.load-error h2{font-size:19px;line-height:1.35}.load-error button{min-height:45px;padding:0 18px;border:0;border-radius:13px;color:#0b6049;background:#fff;font-weight:850}
.admin-test-mode .menu-link,.admin-test-mode #dailyButton,.admin-test-mode #coinsButton{display:none}.admin-test-mode .brand{margin-left:auto}.admin-test-mode #hintButton{opacity:.42}
.stars { margin: 14px 0 6px; color: #ffc82f; font-size: 34px; letter-spacing: 3px; text-shadow: 0 3px 0 #d79500; }
.stars .off { color: #dbe7e3; text-shadow: none; }
.reward-line { margin: 18px 0; padding: 13px 15px; border-radius: 15px; display: flex; justify-content: space-between; color: #506d66; background: #eaf5f1; font-size: 12px; }
.reward-line b { color: #b47700; }

.confetti { position: fixed; z-index: 45; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -15px; width: 9px; height: 14px; border-radius: 3px; animation: confettiFall 1.8s ease-in forwards; }
.shake { animation: shake .35s ease; }
.card-fly { animation: cardFly .27s ease forwards; }

@keyframes slotPop { from { transform: scale(.75); opacity: .3; } to { transform: scale(1); opacity: 1; } }
@keyframes hintPulse { from { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(2,55,44,.25), 0 0 0 0 rgba(255,220,79,.7); } to { transform: translateY(-7px); box-shadow: 0 6px 0 rgba(2,55,44,.25), 0 0 0 7px rgba(255,220,79,.18); } }
@keyframes targetPulse { from { box-shadow: 0 0 0 0 rgba(255,220,79,.5); } to { box-shadow: 0 0 0 7px rgba(255,220,79,.08); } }
@keyframes shelfDanger { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes shake { 20% { transform: translateX(-7px) rotate(-2deg); } 40% { transform: translateX(6px) rotate(2deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes cardFly { to { transform: translateY(-35px) scale(.84); opacity: 0; } }
@keyframes confettiFall { to { transform: translateY(105vh) rotate(720deg); opacity: .75; } }

@media (min-width: 760px) {
  body::after { content: ""; position: fixed; z-index: 0; inset: 0; pointer-events: none; background: radial-gradient(circle at center, transparent 0 300px, rgba(1,22,18,.18)); }
  .app { padding-left: 34px; padding-right: 34px; }
  .stack { height: 185px; }
  .card-face, .back-card { height: 84px; }
  .board-wrap { min-height: 205px; }
}

@media (max-height: 720px) {
  .app { padding-top: 8px; padding-bottom: 8px; }
  .topbar { min-height: 46px; }
  .icon-button, .currency-pill, .streak-pill { height: 40px; }
  .level-heading { margin-top: 3px; }
  .goal-icon { width: 42px; height: 42px; font-size: 23px; }
  .chain-area { margin-top: 8px; padding: 8px; }
  .chain-slot { min-height: 45px; }
  .chain-caption { margin-top: 5px; }
  .board-wrap { min-height: 145px; padding-top: 3px; }
  .stack { height: 142px; }
  .card-face, .back-card { min-height: 65px; height: 65px; }
  .shelf-section { padding-top: 7px; padding-bottom: 7px; }
  .actions { padding-top: 7px; }
  .action-button { min-height: 51px; }
}

@media (max-width: 390px) {
  .app { padding-left: 11px; padding-right: 11px; }
  .topbar { gap: 6px; }
  .brand { display: none; }
  .moves-pill { margin-left:auto; }
  .streak-pill { margin-left: auto; }
  .card-board { gap: 4px; }
  .chain-slots { gap: 4px; }
  .chain-slot:not(:last-child)::after { right: -6px; }
  .shelf-title small { display: none; }
  .actions { gap: 5px; }
  .action-button { padding: 6px; column-gap: 4px; }
  .action-button .action-icon { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
:root {
  --bg-deep: #020817;
  --bg: #061d3d;
  --bg-light: #0a4b79;
  --ink: #eafaff;
  --cream: #f8fbec;
  --gold: #ffd84f;
  --accent: #58f29c;
  --cyan: #2fdfff;
  --glass: rgba(3, 20, 51, .76);
  --line: rgba(74, 225, 255, .38);
  --shadow: 0 18px 48px rgba(0, 5, 20, .48);
}

body { background: #020817; }
body::before {
  background:
    linear-gradient(180deg, rgba(1, 7, 24, .05), rgba(1, 7, 24, .2) 44%, rgba(1, 7, 24, .66)),
    url("game-background.png") center / cover no-repeat;
  filter: saturate(1.03) brightness(.8);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 16%, rgba(29, 210, 255, .12), transparent 34%),
    linear-gradient(90deg, rgba(0, 5, 17, .38), transparent 16% 84%, rgba(0, 5, 17, .38));
}
.ambient { display: none; }

.app {
  width: min(100%, 1024px);
  padding: max(14px, env(safe-area-inset-top)) clamp(9px, 2.4vw, 24px) max(12px, env(safe-area-inset-bottom));
}

.topbar { min-height: 60px; gap: clamp(6px, 1.2vw, 12px); }
.language-picker {
  height: 42px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(62, 219, 255, .62);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(12, 48, 98, .94), rgba(2, 19, 51, .94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 20px rgba(0,5,22,.35);
}
.language-picker select { max-width: 112px; border: 0; outline: 0; color: #e9fbff; background: transparent; font: inherit; font-size: 12px; font-weight: 850; cursor: pointer; }
.language-picker option { color: #071d3d; background: #effcff; }
.icon-button,.currency-pill,.streak-pill,.moves-pill {
  border: 2px solid rgba(48, 209, 255, .72);
  background: linear-gradient(180deg, rgba(12, 48, 98, .94), rgba(2, 19, 51, .94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.23), 0 0 0 2px rgba(0,78,180,.28), 0 10px 25px rgba(0,5,22,.42);
}
.icon-button { border-radius: 50%; width: 52px; height: 52px; }
.currency-pill { height: 50px; min-width: 138px; border-color: #e7b925; }
.coin-icon { color: #835100; background: linear-gradient(145deg,#fff69b,#ffc824 64%,#dc8b00); border-color:#fff4a8; }
.moves-pill { min-width: 92px; height: 56px; border-color: #87f346; background:linear-gradient(180deg,#22983e,#0e561f); text-align:center; }
.moves-pill span { color:#eaffd9; font-size:8px; }
.moves-pill b { font-size:22px; }
.moves-pill small { color:rgba(255,255,255,.72); }
.streak-pill { height:50px; border-color:#46dcff; }
.brand { color:#c9f7ff; }
.brand-mark { color:#06214d; background:linear-gradient(145deg,#67ecff,#52f0a2); }

.level-heading {
  margin-top: 7px;
  padding: 10px 13px 9px;
  border: 1px solid rgba(63,215,255,.42);
  border-radius: 20px;
  background: linear-gradient(180deg,rgba(8,42,88,.88),rgba(3,18,49,.82));
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 10px 30px rgba(0,5,24,.34);
  backdrop-filter: blur(12px);
}
.level-kicker { color:#8edff5; }
.goal-row { margin-top:5px; gap:10px; }
.goal-icon { width:40px; height:40px; border:1px solid rgba(255,255,255,.58); border-radius:11px; background:linear-gradient(150deg,#42d5ff,#53ef88); box-shadow:0 0 18px rgba(62,230,255,.34); font-size:22px; }
.goal-copy { min-width:0; flex:1; }
.goal-row p { color:#d8f8ff; font-size:11px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.goal-row h1 { overflow:hidden; color:#fff; font-size:clamp(15px,3.6vw,22px); text-overflow:ellipsis; white-space:nowrap; }
.round-counter { flex:0 0 auto; min-width:58px; padding:9px 10px; border:1px solid rgba(98,234,255,.55); border-radius:13px; color:#dcfbff; background:rgba(0,12,40,.55); text-align:center; font-weight:950; }
.round-progress { margin-top:7px; gap:3px; }
.round-progress span { height:5px; border:1px solid rgba(69,214,255,.16); background:rgba(0,9,30,.7); }
.round-progress span.done { background:linear-gradient(90deg,#29d9ff,#50f389); }
.round-progress span.current { background:#b9ff4e; box-shadow:0 0 12px rgba(145,255,62,.78); }

.chain-area { margin-top:9px; padding:8px; border:2px solid rgba(43,213,255,.66); border-radius:18px; background:rgba(1,13,40,.76); box-shadow:inset 0 1px rgba(255,255,255,.09),0 0 22px rgba(22,184,255,.16); }
.chain-slot { min-height:72px; border:2px solid rgba(57,210,255,.58); border-radius:13px; background:linear-gradient(180deg,rgba(4,34,75,.82),rgba(0,13,39,.88)); color:#61cdec; }
.chain-slot:not(:last-child)::after { color:#70ebff; }
.answer-card { min-height:64px; padding:3px; border:2px solid #dfffff; border-radius:10px; display:grid; grid-template-rows:1fr auto; gap:2px; color:#fff; background:linear-gradient(160deg,#26b7e9,#136ba9); box-shadow:0 4px 0 #064678,0 0 16px rgba(55,222,255,.28); }
.answer-card-image { width:100%; height:38px; border-radius:7px; object-fit:cover; }
.answer-card .card-label { font-size:clamp(7px,1.6vw,10px); text-transform:uppercase; }
.chain-caption { margin-top:5px; color:#92d7e7; }

.board-wrap { flex:1; min-height:390px; padding:7px 0 5px; display:block; overflow:hidden; }
.board-meta { height:25px; display:flex; align-items:center; justify-content:space-between; color:#bceef7; font-size:10px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.board-meta small { color:#75c7da; font-size:9px; letter-spacing:0; }
.board-meta b { color:#a9ff58; font-size:11px; }
.card-board { height:calc(100% - 25px); min-height:360px; grid-template-columns:repeat(8,minmax(0,1fr)); gap:clamp(3px,.8vw,7px); align-items:end; }
.stack { height:360px; }
.back-card,.card-face { border-radius:clamp(7px,1.2vw,12px); }
.back-card {
  height:92px;
  bottom:calc(84px + (var(--layer) * 22px));
  border:2px solid rgba(101,237,255,.88);
  background:
    radial-gradient(circle at 50% 32%,rgba(63,232,255,.34),transparent 38%),
    linear-gradient(145deg,#092e67,#03173d 68%,#07122c);
  box-shadow:0 3px 0 rgba(0,5,28,.7),inset 0 0 0 2px rgba(102,255,205,.08),0 0 12px rgba(25,202,255,.1);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.back-card::before { content:""; position:absolute; inset:7px; border:1px solid rgba(82,232,255,.28); border-radius:8px; }
.back-card .card-back-emblem { color:#57e9d1; font-size:22px; text-shadow:0 0 12px #23e8ff; transform:rotate(-22deg); }
.card-face {
  min-height:98px;
  height:98px;
  padding:4px;
  border:2px solid rgba(225,255,255,.96);
  display:grid;
  grid-template-rows:1fr auto;
  gap:3px;
  color:#fff;
  background:linear-gradient(160deg,#2ec86e,#0a713f);
  box-shadow:0 5px 0 #03442f,0 9px 18px rgba(0,5,24,.4),0 0 14px rgba(75,240,150,.25);
}
.card-face::before { inset:3px; border-color:rgba(255,255,255,.2); border-radius:8px; }
.card-face-image { width:100%; height:62px; border-radius:8px; object-fit:cover; background:#e8fff3; }
.card-face .card-label { position:relative; z-index:1; overflow:hidden; font-size:clamp(7px,1.15vw,11px); font-weight:950; line-height:1; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.card-picture-fallback { display:grid; place-items:center; }
.stack.empty::after { height:92px; border:2px dashed rgba(69,214,255,.2); color:#43bcd8; }

.shelf-section { padding:8px 10px 9px; border:2px solid rgba(45,210,255,.58); border-radius:19px; background:linear-gradient(180deg,rgba(5,36,77,.88),rgba(1,15,44,.9)); box-shadow:inset 0 1px rgba(255,255,255,.08); }
.shelf-title span { color:#4de5ff; font-size:11px; }
.shelf-title small { color:#8dcbd8; }
.shelf-slot { min-height:58px; border:2px solid rgba(67,206,255,.4); background:rgba(0,8,28,.55); }
.shelf-card { min-height:54px; padding:3px; display:grid; grid-template-columns:38px 1fr; align-items:center; gap:4px; color:#fff; background:linear-gradient(150deg,#148cca,#0a5d90); box-shadow:0 3px 0 #063b68; }
.shelf-card-image { width:36px; height:45px; border-radius:7px; object-fit:cover; }
.shelf-card .card-label { overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }

.actions { gap:9px; padding-top:9px; }
.action-button { min-height:58px; border:2px solid rgba(55,209,255,.62); border-radius:18px; background:linear-gradient(180deg,rgba(11,56,110,.95),rgba(2,22,58,.95)); box-shadow:0 5px 0 rgba(0,8,32,.62),inset 0 1px rgba(255,255,255,.12); }
.action-button.accent { color:#062548; border-color:#afff60; background:linear-gradient(145deg,#47e7f7,#74f43d); box-shadow:0 5px 0 #2a8c27; }

.modal-backdrop { background:rgba(0,5,20,.8); }
.modal { color:#eafaff; border:2px solid rgba(55,213,255,.58); background:linear-gradient(160deg,rgba(7,42,84,.98),rgba(1,16,45,.98)); box-shadow:0 30px 90px rgba(0,4,18,.7); }
.modal-close { color:#7ceaff; background:#0a3568; }
.modal > p:not(.eyebrow),.account-description,.tutorial-modal ol { color:#9acbd6; }
.eyebrow { color:#51e9ff !important; }
.menu-list button,.menu-list .menu-link,.account-form input,.profile-card,.reward-line,.tutorial-visual,.development-card { color:#e7faff; border-color:rgba(59,200,237,.25); background:rgba(5,35,72,.72); }
.menu-list button > span,.menu-list .menu-link > span { color:#061e45; background:linear-gradient(145deg,#4de7ff,#66ed74); }
.menu-list button small,.menu-list .menu-link small,.menu-footer,.chapter-title small { color:#83bdcb; }
.account-form label { color:#a6d8e2; }
.primary-button { color:#082343; background:linear-gradient(145deg,#32dfff,#6ef047); box-shadow:0 7px 0 #148b62,0 13px 20px rgba(0,8,30,.45); }

@media (min-width:760px) {
  .app { padding-left:26px; padding-right:26px; }
  .board-wrap { min-height:430px; }
  .card-board { min-height:400px; }
  .stack { height:400px; }
  .back-card { bottom:calc(92px + (var(--layer) * 24px)); }
}

@media (max-width:600px) {
  .app { padding-left:7px; padding-right:7px; }
  .topbar { min-height:48px; }
  .language-picker { width:74px; height:38px; padding:0 6px; gap:2px; }
  .language-picker span { display:none; }
  .language-picker select { width:100%; font-size:10px; }
  .icon-button { width:42px; height:42px; }
  .currency-pill { min-width:98px; height:42px; }
  .coin-icon { width:28px; height:28px; }
  .moves-pill { min-width:69px; height:46px; }
  .moves-pill b { font-size:17px; }
  .streak-pill { display:none; }
  .level-heading { padding:7px 9px; }
  .level-kicker { font-size:8px; }
  .goal-icon { width:34px; height:34px; font-size:18px; }
  .goal-row p { font-size:8px; }
  .goal-row h1 { font-size:14px; }
  .round-counter { min-width:48px; padding:7px 6px; font-size:11px; }
  .chain-area { margin-top:6px; padding:5px; }
  .chain-slot { min-height:58px; }
  .answer-card { min-height:52px; }
  .answer-card-image { height:28px; }
  .chain-caption { display:none; }
  .board-wrap { min-height:285px; padding-top:3px; }
  .board-meta { height:20px; font-size:8px; }
  .card-board { min-height:265px; gap:3px; }
  .stack { height:265px; }
  .back-card { height:68px; bottom:calc(62px + (var(--layer) * 14px)); border-width:1.5px; }
  .back-card::before { inset:4px; }
  .back-card .card-back-emblem { font-size:14px; }
  .card-face { min-height:72px; height:72px; padding:2px; border-width:1.5px; }
  .card-face-image { height:44px; border-radius:5px; }
  .card-face .card-label { font-size:6px; }
  .stack.empty::after { height:68px; }
  .shelf-section { padding:6px; }
  .shelf-title { margin-bottom:4px; }
  .shelf-title span { font-size:8px; }
  .shelf-slot { min-height:45px; }
  .shelf-card { min-height:42px; grid-template-columns:28px 1fr; }
  .shelf-card-image { width:27px; height:35px; }
  .actions { gap:4px; padding-top:5px; }
  .action-button { min-height:46px; padding:5px; border-radius:13px; }
  .action-button .action-icon { font-size:17px; }
  .action-button > span:not(.action-icon) { font-size:9px; }
  .action-button small { font-size:7px; }
}

@media (max-height:760px) and (max-width:600px) {
  .level-heading { margin-top:3px; }
  .board-wrap { min-height:235px; }
  .card-board { min-height:215px; }
  .stack { height:215px; }
  .back-card { bottom:calc(58px + (var(--layer) * 11px)); }
}
/* V10: one physical card shape; logo-led midnight / cyan / living lime. */
:root { --cyan:#5be5ff; --lime:#a3f442; --ink:#eafbff; --gold:#d5fc75; color-scheme:dark; }
html,body { perspective:none; transform:none; }
body { background:#040d1a; }
body::before { background:linear-gradient(180deg,rgba(2,10,25,.16),rgba(2,11,25,.86)),url('game-background.png') center/cover; filter:saturate(.85) brightness(.65); transform:none; }
body::after { background:radial-gradient(ellipse at 50% 20%,transparent 16%,rgba(1,6,17,.62) 95%); }
.world-scene { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.distant-glow { position:absolute; width:60vw; height:24vh; top:0; left:20%; background:radial-gradient(ellipse,rgba(57,220,255,.12),transparent 70%); }
.mist { position:absolute; width:140%; left:-20%; height:120px; opacity:.10; background:radial-gradient(ellipse,rgba(127,223,243,.38),transparent 65%); animation:mistDrift 25s ease-in-out infinite alternate; }
.mist-one { top:30%; } .mist-two { top:68%; animation-delay:-13s; }
.living-particles i { position:absolute; left:var(--x); top:var(--y); width:3px; height:3px; background:#adff64; border-radius:50%; box-shadow:0 0 9px #95eb3a; animation:firefly var(--duration) ease-in-out var(--delay) infinite; }
.foreground-leaves { display:none; }
.app { width:min(100%,1000px); max-width:1000px; min-height:100dvh; padding:12px 20px 20px; gap:0; transform:none; }
.topbar { display:flex; flex-wrap:wrap; min-height:90px; gap:10px; padding:0 0 10px; background:none; box-shadow:none; }
.brand { display:flex; align-items:center; justify-content:center; margin:auto; gap:7px; color:#b5f1ff; order:-1; }
.brand-emblem { width:98px; height:82px; object-fit:contain; filter:drop-shadow(0 5px 9px rgba(25,199,245,.16)); }
.brand #brandText { font-size:10px; max-width:120px; line-height:1.3; } .brand #brandText b { font-size:15px; }
.menu-emblem { display:block; width:158px; height:auto; margin:0 auto 4px; filter:drop-shadow(0 8px 18px #000b); }
.icon-button,.currency-pill,.moves-pill,.streak-pill,.language-picker { border:1px solid #387fa7; background:linear-gradient(160deg,#17486a,#071c37 70%); box-shadow:inset 0 1px 1px #a0e8ff66,0 3px 0 #020d20,0 7px 13px #0005; }
.icon-button { width:44px; height:44px; border-radius:16px; flex:0 0 auto; }
.language-picker { height:42px; max-width:136px; border-radius:13px; }
.language-picker select { color:#d8f7ff; } .language-picker option { background:#0b2442; color:white; }
.currency-pill { min-width:102px; height:44px; border-color:#5ca285; }
.currency-pill strong { min-width:26px; } .coin-icon { width:30px; height:30px; }
.moves-pill { min-width:90px; height:46px; border-color:#86c550; background:linear-gradient(155deg,#204748,#0b2828); }
.moves-pill b { font-size:22px; color:#e8ffa4; } .moves-pill span { color:#c4e5bd; }
.streak-pill { min-width:46px; height:44px; }
.level-heading { margin-top:2px; padding:11px 14px; border:1px solid #275e85; border-radius:19px; background:linear-gradient(130deg,rgba(17,49,81,.94),rgba(4,19,39,.94)); box-shadow:inset 0 1px #a8eaff22,0 8px 20px #0004; backdrop-filter:none; }
.level-kicker { color:#8dc7de; font-size:9px; letter-spacing:.12em; }
.goal-icon { width:38px; height:38px; border:1px solid #579ac2; background:linear-gradient(145deg,#164567,#082541); box-shadow:inset 0 1px #d2fbff55,0 3px 0 #020f25; }
.goal-row p { font-size:9px; color:#b0ee7e; letter-spacing:.12em; }
.goal-row h1 { white-space:normal; overflow:visible; font-size:clamp(13px,2.3vw,19px); line-height:1.25; letter-spacing:0; }
.round-counter { min-width:50px; padding:8px; font-size:13px; color:#cfff8b; border-color:#518c79; background:#061a2d; }
.round-progress { gap:4px; margin-top:10px; } .round-progress span { height:4px; }
.round-progress span.done { background:linear-gradient(90deg,#3dd4f7,#a7f14e); }
.round-progress span.current { background:#a4ef4b; box-shadow:0 0 8px #a7f14e88; }
.chain-area,.shelf-section { position:relative; border:1px solid #357fa7; background:linear-gradient(150deg,#163c59,#07192e 70%); box-shadow:inset 0 1px 1px #b5eeff66,inset 0 -3px 0 #020d1d,0 5px 0 #020b16,0 11px 21px #0005; border-radius:20px; padding:10px; backdrop-filter:none; }
.chain-area { margin-top:11px; }
.chain-area::before,.shelf-section::before { content:''; position:absolute; inset:4px; pointer-events:none; border:1px solid #38b9db22; border-radius:16px; }
.chain-slots { max-width:575px; margin:auto; gap:10px; }
.chain-slot,.shelf-slot { position:relative; width:100%; aspect-ratio:.7; min-height:0; padding:0; border:1px solid #2e6585; border-radius:11px; background:linear-gradient(145deg,#041425,#0a2239); box-shadow:inset 1px 3px 8px #0008,0 1px 0 #8dd7ff22; color:#6692aa; overflow:visible; }
.chain-slot.has-card,.shelf-slot.has-card { padding:0; border-color:transparent; background:#06182a; }
.chain-slot > span,.shelf-slot > span { font-size:18px; opacity:.6; }
.chain-slot:not(:last-child)::after { right:-9px; color:#71bccc; font-size:15px; }
.chain-caption { display:block; color:#9fc8da; font-size:10px; line-height:1.3; min-height:13px; margin-top:8px; }
.shelf-section { margin-top:0; }
.shelf { width:80%; max-width:450px; gap:10px; margin:0 auto; }
.shelf-title { margin-bottom:9px; } .shelf-title span { color:#b4ecf8; font-size:10px; } .shelf-title small { color:#7fb0c2; }
.board-wrap { display:block; flex:0 0 auto; min-height:0; margin:15px 0 13px; padding:35px 14px 18px; overflow:visible; border:1px solid #317196; border-radius:22px; background:radial-gradient(ellipse at 50% 90%,rgba(76,172,106,.12),transparent 65%),repeating-linear-gradient(90deg,transparent 0 80px,#6ed9ff05 81px 82px),linear-gradient(140deg,#0b2d44,#041222 70%); box-shadow:inset 0 2px 1px #8de2ff44,inset 0 -5px 10px #0006,0 7px 0 #020d17,0 18px 30px #0005; transform:none; }
.board-wrap::before { content:''; position:absolute; inset:5px; border:1px solid #25627e66; border-radius:17px; pointer-events:none; }
.board-meta { position:absolute; top:8px; left:17px; right:17px; height:18px; color:#98cddd; font-size:9px; letter-spacing:.13em; }
.board-meta small { color:#79a9bc; } .board-meta b { color:#b6f95a; }
.card-board { --columns:8; --stack-step:5px; --max-stack-count:20; --gap:9px; --card-w:calc((100% - (var(--columns) - 1)*var(--gap))/var(--columns)); display:grid; grid-template-columns:repeat(var(--columns),minmax(0,1fr)); align-items:start; gap:16px var(--gap); min-height:0; height:auto; perspective:none; }
.stack { position:relative; min-width:0; height:calc((var(--card-size, 104px) / .7) + (var(--max-stack-count) - 1) * var(--stack-step)); filter:none; isolation:isolate; }
.stack::before { content:''; position:absolute; inset:0; border-radius:12px; border:1px solid #326b852a; background:#010e1b28; pointer-events:none; }
.stack.empty::after { width:100%; height:auto; min-height:0; aspect-ratio:.7; position:absolute; top:0; color:#42657b; border:1px dashed #326078; background:#051625; box-shadow:inset 0 2px 8px #0005; }
.stack .back-card,.stack .card-face,.stack .covered-face { position:absolute; left:0; top:calc(var(--stack-index,0)*var(--stack-step)); bottom:auto; width:100%; height:auto; min-height:0; aspect-ratio:.7; transform:none; z-index:var(--stack-index,0); }
.back-card { display:block; padding:0; border:0; pointer-events:none; border-radius:10px; overflow:visible; background:transparent; box-shadow:none; }
.back-card::before,.back-card::after { content:none; }
.drag-card,.covered-face { display:block; position:relative; padding:0; width:100%; height:auto; min-height:0; aspect-ratio:.7; border:0; border-radius:10px; background:transparent; box-shadow:none; color:#e4f9ff; font-family:inherit; text-align:center; transform:none; animation:none; transition:none; overflow:visible; touch-action:none; }
.drag-card::before,.drag-card::after { content:none; }
/* Resting cards stay flat; only the short reveal needs two composited faces. */
.card-flip-inner { display:block; position:absolute; inset:0; width:100%; height:100%; border-radius:inherit; transform-style:flat; transform:none; }
.card-front,.card-reverse { display:block; position:absolute; inset:0; width:100%; height:100%; overflow:hidden; border-radius:inherit; backface-visibility:visible; -webkit-backface-visibility:visible; box-shadow:inset 0 1px #e5fdff,0 1px 0 #cbebea,0 2px 0 #246789,0 3px 0 #021124,0 7px 10px #0006; }
.card-front { padding:5%; border:1px solid #a3e6ed; display:flex; flex-direction:column; align-items:stretch; gap:3%; color:#e9f9ff; background:linear-gradient(160deg,#247ca4,#124965 60%,#082d4b); }
.card-front::after { content:''; position:absolute; inset:2px; border:1px solid #c5efff44; border-radius:7px; background:linear-gradient(125deg,rgba(255,255,255,.08),transparent 35% 80%,rgba(2,8,22,.10)); pointer-events:none; }
.card-front img,.card-front .card-picture-fallback { width:100%; height:auto; min-height:0; flex:1 1 0; object-fit:contain; border:1px solid #092b41; border-radius:6px; background:linear-gradient(160deg,#e4f9f5,#afd9ec); filter:none; }
.card-front .card-label { display:flex; align-items:center; justify-content:center; position:relative; flex:0 0 24%; width:100%; min-height:0; padding:1px 0; font-size:clamp(8px,1.1vw,11px); line-height:1.12; font-weight:800; color:#effdff; text-shadow:0 1px #021326; text-transform:none; white-space:normal; overflow-wrap:anywhere; overflow:hidden; }
.card-reverse { border:1px solid #60d3f1; background:radial-gradient(ellipse at 50% 50%,#135775,transparent 68%),repeating-linear-gradient(135deg,#16457722 0 2px,transparent 2px 7px),linear-gradient(155deg,#123967,#031731); transform:rotateY(180deg); }
.card-reverse::before { content:''; position:absolute; inset:5%; border:1px solid #38b9e1; border-radius:7px; box-shadow:inset 0 0 0 2px #020f2599; background:url('card-back-emblem.png') center/86% auto no-repeat; }
.card-reverse::after { content:''; position:absolute; inset:10%; border-top:1px solid #d2faff88; border-bottom:1px solid #75e7ac66; border-radius:5px; pointer-events:none; }
.card-back-emblem { display:none!important; }
.back-card > .card-reverse { display:block; transform:none; }
.card-flip-inner > .card-reverse { display:none; }
.is-revealing .card-flip-inner { transform-style:preserve-3d; }
.is-revealing .card-flip-inner > .card-reverse { display:block; }
.is-revealing .card-front,.is-revealing .card-reverse { backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.covered-face { pointer-events:none; }
.drag-card:hover,.drag-card:active { transform:none; filter:none; }
.drag-card.selected { outline:2px solid #b0f552; outline-offset:3px; transform:none; filter:none; }
.drag-card.hint,.drag-card.blocker-hint { animation:none; outline:2px solid #b0f552; outline-offset:3px; }
.card-face.blocker-hint::after { content:none; }
.dragging-source { opacity:0!important; transform:none!important; }
.drop-zone.drop-hover { transform:none; border-color:#b5f461!important; background:#124039!important; box-shadow:inset 0 0 0 1px #9bea5c,0 0 16px #80dc3f55!important; }
.drop-zone.target-hint { background:#153d39!important; }
.chain-area.answer-success { border-color:#a3eb58; box-shadow:inset 0 1px #d6ffb999,0 0 24px #7cd44266; }
#cardDragLayer { position:fixed; inset:0; z-index:9999; pointer-events:none; overflow:visible; perspective:none; }
#cardDragLayer .drag-ghost { position:absolute!important; width:var(--ghost-width,auto); height:var(--ghost-height,auto); min-width:0!important; min-height:0!important; max-width:none!important; max-height:none!important; aspect-ratio:auto; margin:0!important; padding:0; transform:none; transition:none!important; animation:none!important; opacity:1; pointer-events:none!important; box-shadow:none!important; }
#cardDragLayer .drag-ghost .card-front { box-shadow:inset 0 1px #e5fdff,0 2px 0 #87cbdc,0 3px 0 #246789,0 16px 25px #0007; }
.actions { padding-top:14px; gap:10px; }
.action-button { min-height:53px; border:1px solid #407b9c; border-radius:16px; color:#e0f5ff; background:linear-gradient(155deg,#164d6c,#071c35); box-shadow:inset 0 1px #b9ecff66,0 4px 0 #010b18,0 8px 17px #0005; }
.action-button.accent { border-color:#c6fb7a; color:#092e38; background:linear-gradient(130deg,#61e2ff,#b0ee49); box-shadow:inset 0 1px #eaffbb,0 4px 0 #366a38,0 8px 17px #0005; }
.action-button.accent small { color:#244d3c; }
.action-button:active { transform:translateY(2px); }
.modal { border-color:#3b9ac0; background:linear-gradient(150deg,#103858,#03152c); }
.modal-backdrop { background:#010818d9; backdrop-filter:blur(4px); }
.primary-button { color:#092b35; background:linear-gradient(130deg,#4de1ff,#a4ed4a); box-shadow:0 5px 0 #26643c; }
.tabletop-impact .board-wrap { animation:none; }
@keyframes firefly { 0%,100%{opacity:.1;transform:translate(0,0)} 45%{opacity:.7;transform:translate(12px,-20px)} 70%{opacity:.2;transform:translate(-6px,-30px)} }
@keyframes mistDrift { from{transform:translateX(-7%)} to{transform:translateX(7%)} }
@media(min-width:601px) { .card-board { --card-size:calc((min(100vw,1000px) - 70px - 63px)/8); } }
@media(max-width:600px) {
 .app { padding:8px 9px 18px; }
 .topbar { display:grid; grid-template-columns:42px minmax(70px,1fr) 100px 78px; gap:8px; min-height:0; padding-bottom:8px; }
 .brand { grid-column:1/-1; width:100%; order:-1; margin:0; justify-content:center; }
 .brand-emblem { width:84px; height:70px; } .brand #brandText { font-size:11px; max-width:170px; } .brand #brandText b { font-size:16px; }
 .icon-button { width:40px; height:40px; border-radius:14px; }
 .language-picker { width:auto; min-width:0; height:40px; max-width:none; padding:0 7px; }
 .language-picker span { display:none; } .language-picker select { width:100%; max-width:none; font-size:10px; }
 .currency-pill { width:100px; min-width:0; height:40px; padding:0 5px; gap:4px; border-radius:13px; }
 .currency-pill strong { font-size:13px; } .coin-icon { width:27px; height:27px; }
 .moves-pill { width:78px; min-width:0; height:40px; padding:3px 6px; margin:0; }
 .moves-pill b { font-size:18px; } .moves-pill span { font-size:7px; } .moves-pill small { font-size:7px; }
 .streak-pill { display:none; }
 .level-heading { margin:0; padding:9px 10px; border-radius:16px; }
 .level-kicker { font-size:8px; } .goal-icon { display:none; }
 .goal-row { gap:8px; margin-top:6px; } .goal-row h1 { font-size:13px; line-height:1.22; } .goal-row p { font-size:8px; }
 .round-counter { min-width:48px; padding:7px 5px; font-size:12px; }
 .chain-area { margin-top:10px; padding:8px; border-radius:15px; }
 .chain-slots { gap:7px; max-width:none; }
 .chain-caption { display:none; }
 .chain-slot,.shelf-slot { border-radius:8px; }
 .board-wrap { padding:29px 9px 14px; margin:12px 0; border-radius:18px; min-height:0; }
 .board-meta { font-size:8px; left:12px; right:12px; top:6px; }
 .card-board { --columns:4; --gap:10px; --stack-step:3.5px; --card-size:calc((100vw - 38px - 30px)/4); grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px var(--gap); min-height:0; }
 .card-front .card-label { font-size:9px; } .answer-card .card-label,.shelf-card .card-label { font-size:8px; }
 .shelf-section { padding:9px 8px 11px; border-radius:15px; }
 .shelf-title { margin-bottom:7px; } .shelf-title span { font-size:8px; } .shelf-title small { font-size:8px; }
 .shelf { width:82%; gap:7px; }
 .actions { padding-top:12px; gap:7px; } .action-button { min-height:46px; padding:6px; border-radius:13px; }
 .action-button .action-icon { font-size:19px; } .action-button > span:not(.action-icon) { font-size:10px; }
}
@media(max-width:359px) { .topbar { grid-template-columns:36px minmax(50px,1fr) 92px 68px; gap:6px; } .icon-button { width:36px; } .currency-pill { width:92px; } .moves-pill { width:68px; } .card-front .card-label { font-size:8px; } }
@media(prefers-reduced-motion:reduce) { .mist,.living-particles i { animation:none; } }
@media(hover:hover) { .drag-card:not(.selected):hover .card-front { border-color:#c4ffad; filter:brightness(1.04); } }


/* V11: complete, independently versioned stylesheet for the physical card renderer. */
:root { --card-renderer-version:11; }
.board-wrap { position:relative; }
.card-board { --stack-step:10px; }
.stack::before { content:none; }
.stack .card-face,.stack .covered-face,.stack .back-card { border-radius:8px; }
.stack .back-card { background:linear-gradient(145deg,#125280,#082344); box-shadow:0 1px 0 #54b3d5,0 2px 0 #020f25; }
.card-reverse { background:repeating-linear-gradient(45deg,#5daadd14 0 1px,transparent 1px 6px),linear-gradient(155deg,#12496e,#041c37); }
.card-reverse::before { border-color:#79d8f6; }
.card-front { background:linear-gradient(155deg,#227ca6,#124961 70%,#0b334b); border-color:#c0f3fa; }
.card-front img { object-fit:contain; }
@media(max-width:600px) {
 .card-board { --stack-step:9px; row-gap:22px; }
 .board-wrap { padding-top:31px; padding-bottom:20px; }
}
/* Keep fallback frames if an older external embed still loads a legacy renderer. */
html:not([data-card-renderer="11"]) .stack .back-card {
 top:calc((var(--depth,1) - 1 - var(--layer,0)) * var(--stack-step));
 border:1px solid #6ecbed;
 background:url('card-back-emblem.png') center/82% auto no-repeat,linear-gradient(145deg,#124f7b,#051c38);
}
html:not([data-card-renderer="11"]) .stack .back-card > span { display:none; }
html:not([data-card-renderer="11"]) .drag-card { border:1px solid #bcf0ff; background:linear-gradient(145deg,#226b91,#082943); }

/* Source: assets/navigation-v12.css */
/* Main menu and upward journey, sharing the original emblem's materials. */
html,body { height:100%; width:100%; overflow:hidden; overscroll-behavior:none; }
body { position:relative; }
body::before,body::after,.world-scene { pointer-events:none; }
.screen { display:none; position:relative; z-index:1; width:100%; height:100dvh; min-height:0; margin:0 auto; overflow:hidden; }
.screen[hidden] { display:none!important; }
.screen.is-active { display:flex; flex-direction:column; }
.screen-bar { flex:0 0 auto; min-height:64px; padding:10px 16px; display:flex; align-items:center; gap:12px; z-index:2; }
.screen-bar h1 { margin:0; flex:1; min-width:0; overflow-wrap:anywhere; font-size:clamp(17px,3.8vw,27px); line-height:1.15; color:#e7faff; text-shadow:0 2px 0 #174d77,0 0 18px #39c9ff55; text-align:center; }
.round-nav { flex:0 0 auto; width:46px; height:46px; border:1px solid #85e5ff; border-radius:50%; background:linear-gradient(150deg,#247db1,#06325e 58%,#061a34); color:#d8f8ff; box-shadow:inset 0 2px 1px #d9fbff88,inset 0 0 0 4px #093557,0 4px 0 #020c1c,0 0 18px #1f9cec44; font-size:34px; line-height:1; cursor:pointer; }
.round-nav:active,.home-play:active,.home-secondary button:active { transform:translateY(2px); }
.screen-coins { display:flex; align-items:center; gap:7px; padding:8px 10px; border:1px solid #d3b952; border-radius:24px; background:#05152cdd; font-size:13px; color:#fff8c8; box-shadow:inset 0 1px #ffff9d55; }
.screen-coins span { color:#ffe16c; font-size:22px; }
.home-screen { max-width:900px; padding:env(safe-area-inset-top) max(16px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); background:linear-gradient(180deg,#020c231a,#03102a00 42%,#020b21aa 80%,#01091bf2),url('journey-background.png') center 42%/cover no-repeat; }
.home-bar { justify-content:space-between; padding:10px 0; }
.home-bar .currency-pill { width:auto; min-width:120px; color:#fff; }
.home-hero { min-height:0; flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8px 0; text-align:center; }
.home-emblem { display:block; width:auto; max-width:68%; height:clamp(90px,27dvh,245px); object-fit:contain; min-height:0; filter:drop-shadow(0 7px 18px #000a) drop-shadow(0 0 18px #00ceff44); }
.home-hero h1 { max-width:100%; margin:8px 0 0; font-size:clamp(29px,8.5vw,64px); font-weight:950; text-transform:uppercase; line-height:1.04; letter-spacing:-.025em; color:#b8ffff; text-shadow:0 2px 0 #3789ac,0 4px 0 #06446a,0 7px 15px #000d; }
.home-hero p { max-width:320px; margin:12px 0 0; color:#d4f5ee; font-size:12px; line-height:1.45; text-shadow:0 2px 5px #00101c; }
.home-controls { flex:0 0 auto; width:min(100%,490px); margin:0 auto; display:grid; gap:14px; }
.home-play { width:88%; justify-self:center; min-height:83px; padding:12px 20px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; border:2px solid #e1ff9c; border-radius:27px; background:linear-gradient(155deg,#bdff4f,#5aba21 55%,#17744c); color:#ffffcd; box-shadow:inset 0 3px 1px #f3ffb899,inset 0 -4px 2px #216e37,0 5px 0 #0d4231,0 0 24px #84ec4566; cursor:pointer; }
.home-play>span { font-size:clamp(24px,6vw,36px); font-weight:950; text-transform:uppercase; text-shadow:0 2px #326c28; }
.home-play small { font-size:11px; font-weight:750; color:#eaffd0; }
.home-secondary { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.home-secondary button { min-height:71px; padding:10px 12px; display:flex; align-items:center; justify-content:center; gap:9px; border:1px solid #96eaff; border-radius:21px; color:#edfbff; background:linear-gradient(155deg,#217bb2,#0d426e 53%,#061d3b); box-shadow:inset 0 2px #c3f9ff99,0 4px #020d21,0 0 12px #069de333; cursor:pointer; }
.home-secondary button>span { font-size:28px; }
.home-secondary b { font-size:12px; line-height:1.25; text-transform:uppercase; }
.home-screen button:disabled { opacity:.58; cursor:wait; }
.map-screen { max-width:900px; padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); background:#030f24; }
.map-screen>.screen-bar { background:linear-gradient(180deg,#031327,#082646f2); border-bottom:1px solid #46b7d155; }
.map-scroll { flex:1; min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y; scrollbar-width:thin; scrollbar-color:#285979 transparent; }
.world-path { position:relative; width:100%; min-height:760px; isolation:isolate; background:linear-gradient(180deg,#03112c22,#02142655),url('journey-background.png') center/cover no-repeat; }
.journey-river { position:absolute; inset:0; width:100%; height:100%; z-index:0; overflow:visible; pointer-events:none; }
.river-shadow { stroke:#03182bdd; stroke-width:24; fill:none; stroke-linecap:round; }
.river-bank { stroke:#238caa; stroke-width:19; fill:none; stroke-linecap:round; }
.river-flow { stroke:#70ecff; stroke-width:10; fill:none; stroke-linecap:round; }
.river-light { stroke:#e9ffffaa; stroke-width:2; stroke-dasharray:4 12; fill:none; }
.river-done { stroke:#a0ec64; stroke-width:11; fill:none; stroke-linecap:round; }
.world-path .map-node { position:absolute; transform:translate(-50%,-50%); z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; width:72px; height:72px; min-height:0; padding:5px 0 0; border:2px solid #a0edff; border-radius:50%; background:linear-gradient(145deg,#2aa4df,#105483 60%,#042847); box-shadow:inset 0 2px 1px #fff9,inset 0 0 0 4px #126091,0 6px 0 #03223a,0 9px 18px #0009; color:white; text-align:center; cursor:pointer; }
.map-node b { font-size:29px; font-weight:950; line-height:1; text-shadow:0 2px #002c49; }
.map-node .map-stars { font-size:13px; line-height:1.1; color:#ffe75c; letter-spacing:-1px; text-shadow:0 2px #614615; margin-top:3px; }
.world-path .map-node.current { border-color:#e3ffb2; background:linear-gradient(145deg,#acfa45,#298936 70%); box-shadow:inset 0 2px #fff9,inset 0 0 0 4px #449945,0 6px 0 #15472f,0 0 0 6px #a4ff5940,0 0 28px #8cfa7788; }
.world-path .map-node.locked { cursor:default; opacity:1; color:#b9c6d5; border-color:#8195ab; background:linear-gradient(145deg,#607991,#2b3f55 60%,#15243a); box-shadow:inset 0 2px #d9e3ee66,inset 0 0 0 4px #30465c,0 5px 0 #102034,0 8px 18px #0007; filter:none; }
.map-node .map-lock { position:absolute; bottom:-8px; right:-7px; width:27px; height:29px; border:1px solid #b6cadb; border-radius:9px; display:grid; place-items:center; background:#293c4d; color:#dbe9f3; font-size:16px; }
.map-node .map-level-name { position:absolute; top:calc(100% + 15px); width:160px; max-width:42vw; font-size:10px; line-height:1.2; font-weight:750; color:#e8f9ff; text-shadow:0 2px 4px #000,0 0 6px #001226; pointer-events:none; white-space:normal; }
.map-chapter { position:absolute; z-index:1; left:12px; max-width:28%; padding:7px 9px; border:1px solid #89c65088; border-radius:12px; color:#dbffc1; background:#153c31dc; box-shadow:0 3px 8px #0005; font-size:10px; line-height:1.2; font-weight:800; overflow-wrap:anywhere; }
.map-coming { position:absolute; top:20px; left:8%; width:84%; display:grid; gap:3px; padding:12px; text-align:center; color:#e3f6ff; background:#07294bde; border:1px solid #54b4d0; border-radius:18px; box-shadow:inset 0 1px #a1eaff66,0 5px 0 #03172c; }
.map-coming b { font-size:12px; }.map-coming small { font-size:10px; color:#afd1e5; }
.map-footer { flex:0 0 auto; display:grid; gap:4px; text-align:center; padding:10px 16px; background:linear-gradient(180deg,#0b2944,#04132a); border-top:1px solid #367f9d; color:#ceff9d; }
.map-footer>span { font-size:12px; font-weight:850; }.map-footer small { color:#a2c7d8; font-size:10px; }
.settings-screen { max-width:760px; padding:env(safe-area-inset-top) max(12px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(12px,env(safe-area-inset-left)); background:linear-gradient(180deg,#06192bef,#08283aeb),url('journey-background.png') center/cover; }
.settings-content { flex:1; min-height:0; overflow:auto; padding:8px 6px 24px; }
.settings-emblem { display:block; width:110px; height:92px; object-fit:contain; margin:0 auto 16px; }
.settings-card { width:min(100%,470px); margin:0 auto; padding:4px 18px; border:1px solid #438aac; border-radius:24px; background:linear-gradient(150deg,#164466,#061c34); box-shadow:inset 0 1px #b4e5ff77,0 8px 30px #0006; }
.settings-language { display:grid; gap:6px; padding:16px 0; font-size:15px; color:#eefaff; }
.settings-language small { font-size:11px; color:#9cbfce; }
.settings-language select { margin-top:7px; width:100%; min-height:47px; padding:8px 12px; color:#eeffff; background:#05182a; border:1px solid #438daa; border-radius:12px; font:inherit; }
.settings-language option { color:#e8fbff; background:#0b2543; }
.settings-row { width:100%; min-height:62px; border:0; border-top:1px solid #5589a444; background:none; display:flex; align-items:center; justify-content:space-between; gap:14px; text-align:left; color:#e4f7ff; font:inherit; font-size:13px; cursor:pointer; }
.settings-row b { color:#b6f771; font-size:14px; }.settings-row[aria-pressed=false] b { color:#96b0c6; }
.settings-note { text-align:center; color:#9ac0d0; font-size:11px; margin:18px 0; }
.modal-backdrop { padding-top:max(10px,env(safe-area-inset-top)); padding-bottom:max(10px,env(safe-area-inset-bottom)); }
.modal { max-height:calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
.toast { top:auto; bottom:max(65px,calc(env(safe-area-inset-bottom) + 60px)); font-size:11px; }
.map-node:focus-visible,.round-nav:focus-visible,.home-play:focus-visible { outline:3px solid #e7ff93; outline-offset:6px; }
@media(max-height:640px) { .home-emblem { height:23dvh; }.home-hero h1 { font-size:30px; }.home-hero p { margin-top:7px;font-size:10px; }.home-play { min-height:65px; }.home-controls { gap:10px; }.home-secondary button { min-height:57px; }.home-screen { padding-bottom:12px; }.home-secondary b { font-size:10px; } }
@media(orientation:landscape) and (max-height:560px) { .home-screen { display:none; }.home-screen.is-active { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:55px minmax(0,1fr); gap:8px 22px; max-width:100%; }.home-bar { grid-column:1/-1; }.home-hero { grid-column:1; }.home-emblem { height:24dvh; }.home-hero h1 { font-size:28px; }.home-controls { grid-column:2; align-self:center; }.home-hero p { font-size:10px; }.home-secondary button { min-height:50px; }.home-play { min-height:67px; }.settings-emblem { display:none; }.screen-bar { min-height:52px; padding:5px 12px; }.round-nav { width:39px;height:39px; }.map-footer { padding:6px 12px; } }

/* Source: assets/foundations-v13.css */
/* The playing surface is deliberately quiet: felt, ivory cards, five clear destinations. */
body[data-screen="game"] {background:#07884b; overflow:hidden; overscroll-behavior:none;}
body[data-screen="game"]::before {background:linear-gradient(180deg,#057f43,#119854 75%,#159e59); filter:none;}
body[data-screen="game"]::after {background:none;}
body[data-screen="game"] .world-scene,body[data-screen="game"] .ambient {display:none;}
body[data-screen="game"] #app {
 position:fixed; inset:auto; left:var(--fit-left,0px); top:var(--fit-top,0px);
 width:var(--fit-width,100vw); height:var(--fit-height,100dvh); min-height:0; max-width:none;
 margin:0; padding:var(--fit-padding,10px); display:grid; grid-template-columns:minmax(0,1fr);
 grid-template-rows:var(--fit-header-h,46px) var(--fit-heading-h,44px) var(--fit-chain-h,124px) var(--fit-board-h,320px) var(--fit-shelf-h,75px) var(--fit-actions-h,50px);
 grid-template-areas:"hud" "heading" "answer" "board" "shelf" "actions";
 gap:var(--fit-gap,7px); align-content:start; overflow:hidden; transform:none;
}
body[data-screen="game"] #app[data-fit-orientation="landscape"] {
 grid-template-columns:minmax(0,5fr) minmax(0,4fr);
 grid-template-rows:var(--fit-header-h) var(--fit-shared-h) var(--fit-board-h) var(--fit-actions-h);
 grid-template-areas:"hud heading" "answer shelf" "board board" "actions actions";
}
#app > * {min-width:0; min-height:0; margin:0;}
#app .topbar {grid-area:hud; display:flex; flex-wrap:nowrap; align-items:center; gap:6px; min-height:0; padding:0;}
#app .topbar .language-picker,#app .topbar .streak-pill {display:none;}
#app .topbar .brand {width:auto; flex:1 1 auto; min-width:0; margin:0; gap:4px; order:0;}
#app .brand-emblem {width:43px; height:37px; flex:0 0 auto; filter:drop-shadow(0 1px 2px #003d2955);}
#app .brand #brandText {max-width:65px; font-size:7px; line-height:1.15; color:#e4ffed;}
#app .brand #brandText b {font-size:10px;}
#app .icon-button {flex:0 0 34px; width:34px; height:34px; min-height:0; border:0; border-radius:10px; color:#c5f7ce; background:none; box-shadow:none; backdrop-filter:none;}
#app .currency-pill {width:auto; flex:0 1 auto; min-width:80px; height:34px; padding:0 5px 0 2px; gap:4px; border:0; border-radius:9px; background:#075b35b8; box-shadow:none; backdrop-filter:none;}
#app .currency-pill strong {min-width:20px; font-size:14px; color:#fffcec;}
#app .coin-icon {width:28px; height:28px; font-size:16px; border-color:#fff294;}
#app .pill-plus {width:17px; height:18px; border-radius:5px; font-size:15px;}
#app .moves-pill {width:72px; min-width:72px; height:36px; margin:0; padding:4px 7px; border:0; border-radius:6px; color:#074b31; background:#5ed48b; box-shadow:inset 0 1px #c2efb655;}
#app .moves-pill b {font-size:19px; color:#075d35;}
#app .moves-pill span,#app .moves-pill small {font-size:7px; color:#176a40;}
#app .moves-pill.danger {background:#ffe09a; animation:none;}
#app .level-heading {grid-area:heading; position:relative; padding:0 2px; border:0; border-radius:0; background:none; box-shadow:none; overflow:hidden;}
#app .level-kicker {font-size:8px; line-height:10px; letter-spacing:.04em; gap:5px; white-space:nowrap; color:#b4e9bf; padding-right:44px;}
#app #chapterName {min-width:0; overflow:hidden; text-overflow:ellipsis;}
#app .level-kicker > :last-child {flex-shrink:0;}
#app .level-kicker .dot {color:#9ddeab;}
#app .goal-row {gap:6px; margin-top:2px; align-items:center;}
#app .goal-icon,#app .goal-row p {display:none;}
#app .goal-copy {min-width:0; padding-right:44px;}
#app .goal-row h1 {font-size:var(--fit-hint-font,12px); line-height:1.15; font-weight:650; white-space:normal; overflow-wrap:anywhere; color:#f1ffef;}
#app .round-counter {position:absolute; right:0; top:1px; min-width:40px; padding:3px 4px; font-size:12px; line-height:15px; border:0; border-radius:6px; color:#f1ffcf; background:#045c36a8;}
#app .round-progress {gap:3px; margin-top:4px;}
#app .round-progress span {height:2px; background:#06663d; box-shadow:none;}
#app .round-progress span.done {background:#d3f99a;}
#app .round-progress span.current {background:#7bd595; box-shadow:none;}
#app .chain-area {grid-area:answer; display:flex; align-items:flex-start; justify-content:center; min-height:0; padding:var(--fit-foundation-meta,20px) 0 0; border:0; border-radius:0; background:none; box-shadow:none;}
#app .chain-area::before,#app .shelf-section::before,#app .board-wrap::before {content:none;}
#app .chain-caption {display:none;}
#app .chain-slots {width:auto; max-width:none; margin:0; display:grid; grid-template-columns:repeat(5,var(--fit-card-w,66px)); gap:var(--fit-slot-gap,10px);}
#app .chain-slot {position:relative; display:block; width:var(--fit-card-w,66px); height:calc(var(--fit-card-h,95px) + var(--fit-foundation-fan,6px)); min-height:0; aspect-ratio:auto; padding:0; border:1px solid #0a673a; border-radius:7px; color:#6cb889; background:#066c3e80; box-shadow:inset 0 1px 3px #034b3226;}
#app .chain-slot:not(:last-child)::after {content:none;}
#app .chain-slot.has-card {padding:0; background:transparent; border-color:transparent; box-shadow:none;}
#app .chain-slot .foundation-name {position:absolute; left:1px; right:1px; bottom:calc(100% + 2px); height:calc(var(--fit-foundation-meta,20px) - 3px); margin:0; display:flex; align-items:center; justify-content:center; padding:1px 3px; border-radius:4px 4px 1px 1px; font-size:clamp(7px,1.9vw,11px); line-height:1; font-weight:650; color:#675015; background:#ffdf76; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:1;}
#app .chain-slot:not(.has-card) .foundation-name {color:#b6e6bd; background:#086b3e;}
#app .chain-slot .foundation-count {position:absolute; top:calc(var(--fit-foundation-fan,6px) + 4px); left:50%; transform:translateX(-50%); z-index:30; width:auto; max-width:95%; min-width:26px; padding:1px 4px; border:0; border-radius:5px; color:#8e7a5b; background:#fffaf0e8; font-size:var(--fit-badge-font,10px); line-height:1.1; font-weight:750; font-variant-numeric:tabular-nums; opacity:1; pointer-events:none;}
#app .chain-slot:not(.has-card) .foundation-count {color:#9fd5ac; background:none; top:7px;}
#app .foundation-cards {position:absolute; inset:0; width:100%; height:100%; border-radius:inherit; pointer-events:none;}
#app .foundation-layer {position:absolute; inset:auto; left:0; top:calc(var(--foundation-index,var(--layer-index,0)) * var(--fit-foundation-fan,6px) / var(--foundation-steps,4)); width:100%; height:var(--fit-card-h,95px); min-height:0; aspect-ratio:auto; padding:0; border:0; border-radius:7px; background:none; box-shadow:none; z-index:var(--foundation-index,var(--layer-index,0));}
#app .foundation-layer.drag-card {pointer-events:auto;}
#app .foundation-layer .card-step {display:none;}
#app .foundation-layer .card-front {padding-top:18%;}
#app .chain-slot.collecting {filter:drop-shadow(0 0 9px #ffef7580);}
#app .chain-slot.collecting .foundation-name {background:#fff7bd; color:#755308;}
#app .chain-slot.collecting .foundation-cards,#app .chain-slot.collecting .foundation-count {visibility:hidden;}
#app .chain-slot > span:not(.foundation-name):not(.foundation-count) {font-size:18px; opacity:.4;}
#app .chain-slot .foundation-empty-mark {position:absolute; inset:0; display:grid; place-items:center; line-height:1; pointer-events:none;}
#app .board-wrap {grid-area:board; position:relative; min-height:0; display:flex; align-items:flex-start; justify-content:center; padding:var(--fit-board-meta,13px) 0 0; margin:0; border:0; border-radius:0; background:none; box-shadow:none; overflow:visible;}
#app .board-meta {top:0; left:1px; right:1px; height:var(--fit-board-meta,13px); line-height:1; font-size:8px; letter-spacing:.02em; color:#c0e9c3; opacity:.8;}
#app .board-meta small {font-size:8px; color:#b5e4bd;}
#app .board-meta b {font-size:9px; color:#e1fac6;}
#app .card-board {--columns:5; --stack-step:var(--fit-stack-step,14px); --card-size:var(--fit-card-w,66px); width:100%; min-height:0; height:auto; grid-template-columns:repeat(5,var(--fit-card-w,66px)); grid-auto-rows:var(--fit-stack-h,295px); gap:0 var(--fit-column-gap,10px); align-content:start; justify-content:center;}
#app .stack {width:var(--fit-card-w,66px); height:var(--fit-stack-h,295px); min-height:0;}
#app .stack::before {content:none;}
#app .stack .back-card,#app .stack .card-face,#app .stack .covered-face {width:var(--fit-card-w,66px); height:var(--fit-card-h,95px); min-height:0; aspect-ratio:auto; top:calc(var(--stack-index,0) * var(--fit-stack-step,14px)); bottom:auto; border:0; border-radius:7px; background:transparent; box-shadow:none;}
#app .stack.empty::after {width:var(--fit-card-w,66px); height:var(--fit-card-h,95px); min-height:0; aspect-ratio:auto; border:1px dashed #52aa70; border-radius:7px; color:#71ba87; background:#08794250; box-shadow:none;}
#app .card-front,#cardDragLayer .card-front {padding:6%; border:2px solid #fffaf0; color:#584d40; background:#fffdf5; box-shadow:inset 0 0 0 1px #e3dcc7,0 1px 0 #d9d3bf,0 2px 0 #b8b99c,0 3px 0 #395f4266,0 5px 8px #004e302e;}
#app .card-front::after,#cardDragLayer .card-front::after {inset:2px; border:1px solid #eae3ce; border-radius:4px; background:none;}
#app .card-front img,#app .card-front .card-picture-fallback,#cardDragLayer .card-front img,#cardDragLayer .card-front .card-picture-fallback {width:100%; height:auto; min-height:0; flex:1 1 0; border:0; border-radius:4px; background:#f9fcf2; object-fit:contain;}
#app .card-front .card-label,#cardDragLayer .card-front .card-label {font-size:var(--fit-card-font,10px); line-height:1.08; font-weight:650; color:#504b40; text-shadow:none; flex-basis:28%; padding:1px 0; text-transform:none;}
#app .card-reverse,#cardDragLayer .card-reverse {border:2px solid #fffaf0; border-radius:7px; background-color:#3c9ee6; background-image:linear-gradient(135deg,#6abbf0 25%,transparent 25%),linear-gradient(225deg,#6abbf0 25%,transparent 25%),linear-gradient(45deg,#6abbf0 25%,transparent 25%),linear-gradient(315deg,#6abbf0 25%,#3c9ee6 25%); background-position:9px 0,9px 0,0 0,0 0; background-size:18px 18px; box-shadow:inset 0 0 0 1px #bce2f5,0 1px 0 #d8dbc8,0 2px 0 #afbea2,0 3px 4px #00492c40;}
#app .card-reverse::before,#cardDragLayer .card-reverse::before {inset:2px; border:1px solid #a7d5f288; border-radius:4px; background:none; box-shadow:none;}
#app .card-reverse::after,#cardDragLayer .card-reverse::after {content:none;}
#app .chain-starter .card-front,#cardDragLayer .chain-starter .card-front {border-color:#ffdc4e; box-shadow:inset 0 0 0 1px #e7b93e,0 1px 0 #dfb847,0 2px 0 #9e8831,0 0 10px #ffdd535c; padding-top:19%;}
#app .card-step,#cardDragLayer .card-step {position:absolute; left:50%; top:4px; transform:translateX(-50%); z-index:3; display:block; padding:1px 5px; border-radius:5px; color:#8b6a18; background:#ffeb9c; font-size:var(--fit-badge-font,10px); line-height:1.1; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap;}
#app .drag-card.selected {outline:2px solid #ffed88; outline-offset:2px;}
#app .drag-card.hint,#app .drag-card.blocker-hint {outline:2px solid #ffef72; outline-offset:2px;}
#app .drop-zone.drop-hover {border-color:#fff1a0!important; background:#50c68466!important; box-shadow:0 0 0 2px #f5e784aa!important;}
#app .drop-zone.target-hint {background:#70ce8b55!important;}
#app .drop-zone.drop-invalid {border-color:#ffd0b2!important; outline:2px solid #ec7456; outline-offset:2px; box-shadow:0 0 0 1px #8a403866!important;}
#app .shelf-section {grid-area:shelf; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding:0; min-height:0; border:0; border-radius:0; background:none; box-shadow:none;}
#app .shelf-title {flex:0 0 var(--fit-shelf-meta,12px); height:var(--fit-shelf-meta,12px); width:100%; margin:0; justify-content:center; align-items:flex-start; gap:4px; line-height:1;}
#app .shelf-title span {font-size:8px; line-height:10px; letter-spacing:.04em; color:#c2ecca;}
#app .shelf-title small {display:none;}
#app .shelf {display:grid; width:auto; max-width:none; margin:0; grid-template-columns:repeat(var(--fit-shelf-columns,6),var(--fit-shelf-w,42px)); grid-auto-rows:var(--fit-shelf-card-h,60px); gap:var(--fit-slot-gap,10px);}
#app .shelf-slot {width:var(--fit-shelf-w,42px); height:var(--fit-shelf-card-h,60px); min-height:0; aspect-ratio:auto; padding:0; border:1px solid #4fa573; border-radius:6px; background:#066c3e70; color:#a1d6ae; box-shadow:inset 0 1px 2px #055b3630;}
#app .shelf-slot.has-card {padding:0; border-color:transparent; background:transparent; box-shadow:none;}
#app .shelf-slot > span {font-size:14px; opacity:.55;}
#app .shelf-slot .drag-card {position:absolute; inset:0; width:100%; height:100%; min-height:0; aspect-ratio:auto; border-radius:6px;}
#app .shelf-card .card-label {font-size:var(--fit-shelf-font,8px);}
#app .shelf-card .card-step {font-size:var(--fit-shelf-font,8px); top:3px; padding:0 3px;}
#app .actions {grid-area:actions; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding:2px 5px 3px; min-height:0;}
#app .action-button {min-height:0; height:100%; padding:3px 6px; border:2px solid #e8f8d7; border-radius:12px; column-gap:5px; color:#effbff; background:linear-gradient(150deg,#5ea9ec,#327bd9); box-shadow:inset 0 1px #c8ecff8a,0 2px 0 #076641;}
#app .action-button .action-icon {font-size:21px; color:#f7ffdb;}
#app .action-button > span:not(.action-icon) {font-size:10px; line-height:1.05;}
#app .action-button small {font-size:8px; line-height:1.05; color:#d0e9ff;}
#app .action-button.accent {color:#69511c; border-color:#fff0b0; background:linear-gradient(150deg,#ffe084,#e9b947);}
#app .action-button.accent .action-icon,#app .action-button.accent small {color:#77591a;}
#app .action-button:disabled {opacity:1; filter:none;}
#app[data-fit-orientation="landscape"] .shelf-section {justify-content:center;}
#app[data-fit-density="compact"] .actions {gap:8px; padding:1px 2px 2px;}
#app[data-fit-density="compact"] .action-button {border-radius:10px; padding:2px 5px;}
#app[data-fit-density="compact"] .action-button .action-icon {font-size:18px;}
#app[data-fit-density="compact"] .round-progress {margin-top:3px;}
#cardDragLayer .drag-ghost .card-front {box-shadow:inset 0 0 0 1px #e3dcc7,0 1px 0 #d9d3bf,0 2px 0 #b8b99c,0 12px 18px #00351f55;}
#cardDragLayer .drag-ghost.chain-starter .card-front {box-shadow:inset 0 0 0 1px #e7b93e,0 2px 0 #b79c35,0 12px 18px #00351f55,0 0 9px #ffe17b77;}
@media(max-width:359px) {
 #app .brand #brandText {display:none;}
 #app .brand-emblem {width:38px; height:33px;}
 #app .action-button > span:not(.action-icon) {font-size:9px;}
 #app .action-button small {font-size:7px;}
}
@media(hover:hover) {#app .drag-card:not(.selected):hover .card-front {border-color:#fff2b0; filter:brightness(1.015);}}
@media(prefers-reduced-motion:reduce) {#app .chain-slot.collecting {filter:none;}}

/* Source: assets/modern-v14.css */
/* V14: light mint surfaces and turquoise cards. The viewport fitter owns geometry. */
:root {
  --ink:#173f43;
  --muted:#597f80;
  --accent:#319f9f;
  --cream:#fcfffd;
  --mint:#e3f3f0;
  --modern-line:#b8d9d6;
  --modern-shadow:0 5px 16px #245c5e12;
}
html { color-scheme:light; background:#dbeeed; }
body,body[data-screen="game"] {
  color:var(--ink);
  background:#e6f3f1;
  font-family:"Avenir Next",Avenir,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
body::before,body[data-screen="game"]::before {
  background:linear-gradient(180deg,#d4edec,#edf8f4 65%,#ddf0eb);
  filter:none;
}
body::after,body[data-screen="game"]::after { background:none; }
.world-scene,.ambient { display:none; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible {
  outline:3px solid #228e94;
  outline-offset:3px;
}
.screen-bar h1,.home-hero h1,.modal h2 {
  font-family:Georgia,"Times New Roman",serif;
  font-weight:700;
  color:var(--ink);
  text-shadow:none;
  letter-spacing:-.035em;
}
.round-nav {
  color:#275b60;
  border:1px solid #b9d7d5;
  border-radius:15px;
  background:linear-gradient(145deg,#ffffff,#edf8f4);
  box-shadow:inset 0 1px #fff,0 3px 0 #badbd5,0 6px 14px #265d5e13;
}
.currency-pill,.screen-coins {
  color:#fff;
  border:1px solid #72bfbb;
  border-radius:16px;
  background:linear-gradient(145deg,#489da2,#24777e);
  box-shadow:inset 0 1px #b7e9df90,0 3px 0 #8abfbb,0 5px 12px #2e6a6920;
}
.currency-pill strong,.screen-coins strong { color:#fff; }
.coin-icon {
  color:#946a14;
  border-color:#fff0a4;
  background:linear-gradient(145deg,#ffe995,#f3bd3d);
  box-shadow:0 2px 0 #d8992a,0 3px 5px #2b746624;
}
.pill-plus { color:white; background:#51b7a9; box-shadow:inset 0 1px #aff1df88; }
.screen-coins span { color:#ffdf82; }

/* Home: a daylight landscape, clear logo and a small number of real actions. */
.home-screen {
  max-width:900px;
  background:linear-gradient(180deg,#e4f4f12e,#e6f6ef00 38%,#e8f7f1b8 64%,#e8f6f1 87%),url('lake-background.png') center 40%/cover no-repeat;
}
.home-bar { padding-top:12px; }
.home-hero { justify-content:flex-start; padding-top:clamp(10px,4dvh,42px); }
.home-emblem {
  height:clamp(85px,20dvh,190px);
  max-width:52%;
  filter:drop-shadow(0 4px 7px #34646820);
}
.home-hero h1 {
  margin-top:9px;
  font-size:clamp(32px,9vw,58px);
  line-height:1.03;
  letter-spacing:.015em;
  color:#153e43;
  text-shadow:0 2px 12px #f0fffb;
}
.home-hero p {
  width:max-content;
  max-width:min(94%,340px);
  margin-top:13px;
  padding:7px 12px;
  border:1px solid #ffffffa8;
  border-radius:12px;
  color:#365f61;
  background:#f6fffaaf;
  font-size:12px;
  text-shadow:none;
}
.home-controls { gap:12px; }
.home-play {
  min-height:75px;
  width:92%;
  border:1px solid #bcebe0;
  border-radius:23px;
  color:#fff;
  background:linear-gradient(145deg,#67c5b6,#28999c);
  box-shadow:inset 0 2px #ffffff90,0 4px 0 #258b8b,0 10px 22px #337b6a25;
}
.home-play>span { color:white; font-size:clamp(25px,6.5vw,36px); font-weight:750; text-transform:none; text-shadow:0 1px #247f7b55; }
.home-play small { color:#e7fffa; font-weight:550; }
.home-secondary button {
  min-height:64px;
  border:1px solid #b9d8d3;
  border-radius:19px;
  color:#29575b;
  background:linear-gradient(150deg,#ffffffed,#edf8f2ed);
  box-shadow:inset 0 1px #fff,0 3px 0 #bad8d2,0 6px 14px #326c6012;
}
.home-secondary button>span { color:#3f8788; font-size:25px; }
.home-secondary b { font-size:12px; font-weight:650; text-transform:none; }

/* A single numbered path. There are no chapter or era decorations. */
.map-screen { background:#e6f4ee; }
.map-screen>.screen-bar { border-bottom:1px solid #bad9d2; background:#f5fcf6ed; }
.map-scroll { scrollbar-color:#a5ceca transparent; }
.world-path { background:linear-gradient(180deg,#eaf6f0,#d9efea 55%,#eaf7ef); }
.world-path::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.1;
  background:url('lake-background.png') center/cover;
}
.river-shadow { stroke:#a8d2ce; stroke-width:12; }
.river-bank { stroke:#f6fffa; stroke-width:9; }
.river-flow { stroke:#b2d9d2; stroke-width:4; }
.river-light { stroke:#fafff7; stroke-width:1; stroke-dasharray:3 9; }
.river-done { stroke:#4caf9f; stroke-width:4; }
.world-path .map-node {
  color:#1c6a69;
  border:2px solid #fcfffb;
  background:linear-gradient(150deg,#fffefa,#e0f3e9);
  box-shadow:0 0 0 1px #93c6bc,inset 0 1px #fff,0 4px 0 #9dc9bf,0 8px 14px #356b5b17;
}
.map-node b { color:inherit; font-weight:750; text-shadow:none; }
.map-node .map-stars { color:#d69b1f; text-shadow:0 1px #fff3c6; font-size:13px; }
.world-path .map-node.current {
  color:white;
  border-color:#eeffec;
  background:linear-gradient(145deg,#64c6ae,#279996);
  box-shadow:0 0 0 1px #319c91,inset 0 2px #ceffea99,0 4px 0 #348a7d,0 0 0 7px #7bc7b82b,0 9px 18px #28675c25;
}
.world-path .map-node.locked {
  color:#78938e;
  border-color:#f5fbf7;
  background:linear-gradient(150deg,#e0eeea,#cedfda);
  box-shadow:0 0 0 1px #b5cbc3,inset 0 1px #fff,0 3px 0 #b3ccc2,0 6px 11px #32655410;
}
.map-node .map-lock { color:#738f84; border-color:#c0d7cf; background:#f2f8f3; box-shadow:0 2px 4px #366a5812; }
.map-node .map-level-name { color:#3b6862; text-shadow:0 1px 4px #f2fff6; font-size:11px; font-weight:600; }
.map-coming { color:#365e58; border:1px solid #bfd9cd; border-radius:17px; background:#f8fff5d9; box-shadow:0 3px 10px #37745c0a; }
.map-coming small { color:#6c887c; }
.map-footer { color:#287771; border-top:1px solid #c5ded7; background:#f3fbf2; }
.map-footer small { color:#68877a; }

/* Settings use the same surfaces as home and the card frames. */
.settings-screen { background:linear-gradient(180deg,#e4f3eeec,#f5fbf5f5),url('lake-background.png') center/cover; }
.settings-emblem { filter:drop-shadow(0 3px 5px #3c75651a); }
.settings-card {
  color:var(--ink);
  border:1px solid #c0dcd2;
  background:linear-gradient(150deg,#fefffbf5,#eef8f0f5);
  box-shadow:inset 0 1px #fff,0 8px 25px #2c715715;
}
.settings-language { color:#2b5754; }
.settings-language small,.settings-note { color:#64847a; }
.settings-language select { color:#2b5652; border-color:#b7d6cc; background:#fafff9; }
.settings-language option { color:#244d4c; background:#fafff9; }
.settings-row { color:#345f58; border-color:#cce1d7; }
.settings-row b { color:#258e7f; }
.settings-row[aria-pressed="false"] b { color:#7d948a; }

/* Optional shared navigation. It occupies a normal flex row, never overlays cards. */
.modern-nav {
  flex:0 0 auto;
  width:100%;
  margin:12px auto 0;
  padding:6px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px;
  border:1px solid #c5ded5;
  border-radius:20px;
  color:#537c6e;
  background:#f7fff8ed;
  box-shadow:0 3px 12px #3b71600a;
}
.modern-nav button {
  min-height:47px;
  min-width:0;
  border:0;
  border-radius:14px;
  padding:4px 3px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  color:inherit;
  background:none;
  font-size:10px;
  line-height:1.1;
  cursor:pointer;
}
.modern-nav .nav-icon { width:21px; height:21px; flex:0 0 21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; font-size:21px; line-height:1; }
.modern-nav button[aria-current="page"],.modern-nav button.active { color:#237776; background:#dff2e9; }

/* Gameplay: keep every existing fitted width, height and hit target. */
body[data-screen="game"] #app {
  color:#214d50;
  background:linear-gradient(180deg,#eaf7f1,#e4f3ed);
  grid-template-rows:var(--fit-header-h,80px) var(--fit-heading-h,44px) var(--fit-chain-h,124px) var(--fit-board-h,320px) var(--fit-shelf-h,75px) var(--fit-actions-h,50px) var(--fit-nav-h,44px);
  grid-template-areas:"hud" "heading" "answer" "board" "shelf" "actions" "nav";
}
body[data-screen="game"] #app[data-fit-orientation="landscape"] {
  grid-template-rows:var(--fit-header-h) var(--fit-shared-h) var(--fit-board-h) var(--fit-actions-h) var(--fit-nav-h,44px);
  grid-template-areas:"hud heading" "answer shelf" "board board" "actions actions" "nav nav";
}
#app .topbar { position:relative; isolation:isolate; align-items:flex-start; padding-top:2px; }
#app .topbar::before {
  content:"";
  position:absolute;
  inset:calc(-1 * var(--fit-padding,10px)) calc(-1 * var(--fit-padding,10px)) 0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,#e6f5ef14,#effaf031 58%,#eaf7f1c7),url('lake-background.png') center 43%/cover no-repeat;
}
#app .modern-nav { grid-area:nav; height:var(--fit-nav-h,44px); min-height:0; margin:0; padding:2px 4px; border-radius:13px; }
#app .modern-nav button { min-height:0; height:100%; padding:2px; font-size:8px; gap:2px; }
#app .modern-nav .nav-icon { width:17px; height:17px; flex-basis:17px; font-size:17px; }
#app .brand #brandText { color:#284e54; }
#app .brand-emblem { filter:drop-shadow(0 1px 2px #31595020); }
#app .icon-button { color:#2a6162; border:1px solid #b6d5ce; background:#f9fff7eb; box-shadow:inset 0 1px #fff,0 2px 0 #b7d5cc; }
#app .currency-pill { border:1px solid #80bfb3; color:white; background:linear-gradient(145deg,#4b9da0,#287b7c); box-shadow:inset 0 1px #b8e4d97a,0 2px 0 #a0cbbd; }
#app .currency-pill strong { color:#fff; }
#app .moves-pill { border:1px solid #b9e3d5; color:white; background:linear-gradient(145deg,#4c9ea0,#2f7b7c); box-shadow:inset 0 1px #e0fff53d,0 2px 0 #b0d3c7; border-radius:10px; }
#app .moves-pill b { color:#fff; }
#app .moves-pill span,#app .moves-pill small { color:#dcf9ef; }
#app .moves-pill.danger { border-color:#e6bb78; background:#f5dfb1; }
#app .moves-pill.danger b,#app .moves-pill.danger span,#app .moves-pill.danger small { color:#8d5c29; }
#app .level-heading { color:#214f4d; border-radius:14px 14px 0 0; background:#eaf7f1; }
#app .level-kicker { color:#507a71; letter-spacing:.06em; }
#app .level-kicker .dot { color:#81aaa0; }
#app .goal-row h1 { color:#204745; font-family:Georgia,"Times New Roman",serif; font-weight:700; letter-spacing:-.015em; }
#app #collectChains { margin:0; color:#204745; font-family:Georgia,"Times New Roman",serif; font-size:clamp(16px,4.2vw,22px); line-height:1.05; font-weight:700; letter-spacing:-.025em; }
#app #roundHint { display:block; margin:2px 0 0; color:#52786a; font-size:var(--fit-hint-font,11px); line-height:1.15; font-weight:500; letter-spacing:0; text-transform:none; white-space:normal; overflow-wrap:anywhere; }
#app[data-fit-orientation="landscape"] #collectChains { font-size:16px; }
#app .round-counter { color:#285b56; border:1px solid #a7cfc2; background:#f4fff5e8; border-radius:9px; box-shadow:inset 0 1px #fff; }
#app .round-progress span { background:#cce4d9; }
#app .round-progress span.done { background:#2c9c8b; }
#app .round-progress span.current { background:#83c8b0; }
#app .chain-area { background:linear-gradient(180deg,#f9fffa55,#f9fffa00); border-radius:12px; backdrop-filter:none; }
#app .chain-slot { color:#9cc1b8; border-color:#b2d3c8; border-radius:8px; background:linear-gradient(155deg,#eaf8f1,#d7ede3); box-shadow:inset 0 1px #ffffffda,0 0 0 2px #f7fff866; }
#app .chain-slot.has-card { border-color:transparent; background:transparent; box-shadow:none; }
#app .chain-slot .foundation-name { color:#32695e; border:1px solid #b2d6c8; border-radius:6px 6px 2px 2px; background:#dcf0e2; font-weight:650; }
#app .chain-slot:not(.has-card) .foundation-name { color:#668f83; background:#ecf8ef; }
#app .chain-slot .foundation-count { color:#4f7b6e; background:#f8fff5f2; border:1px solid #d0e5d5; border-radius:5px; }
#app .chain-slot:not(.has-card) .foundation-count { color:#88aa9d; border-color:transparent; background:none; }
#app .chain-slot.collecting { filter:drop-shadow(0 0 7px #66bc9570); }
#app .chain-slot.collecting .foundation-name { color:#28724f; background:#bceacb; }
#app .board-wrap { background:none; }
#app .board-meta { color:#395f59; opacity:1; font-weight:750; }
#app .board-meta small { color:#719184; }
#app .board-meta b { color:#b88631; }
#app .stack.empty::after { border-color:#b5d3c6; color:#97b4a6; background:#dff0e65e; }
#app .card-front,#cardDragLayer .card-front {
  color:#2e5550;
  border:2px solid #fafff9;
  border-radius:8px;
  background:linear-gradient(180deg,#fffef8,#f5fff6);
  box-shadow:inset 0 0 0 1px #c9e0d1,0 1px 0 #bfd7c8,0 2px 0 #88afa3,0 3px 4px #22595329;
}
#app .card-front::after,#cardDragLayer .card-front::after { border-color:#e0ecdd; border-radius:5px; }
#app .card-front img,#app .card-front .card-picture-fallback,#cardDragLayer .card-front img,#cardDragLayer .card-front .card-picture-fallback { border:0; border-radius:5px; background:#e9f5e9; }
#app .card-front .card-label,#cardDragLayer .card-front .card-label { color:#2c5149; font-weight:650; text-shadow:none; }
#app .card-reverse,#cardDragLayer .card-reverse {
  border:1px solid #edfff2;
  border-radius:8px;
  background-color:#40969b;
  background-image:linear-gradient(155deg,#77b7b16e,#257b8844),repeating-linear-gradient(0deg,#ffffff0c 0 1px,transparent 1px 5px);
  background-position:center;
  background-size:auto;
  box-shadow:inset 0 0 0 2px #64b1b6,0 1px 0 #d1e9dc,0 2px 0 #81b5ad,0 3px 4px #2a606024;
}
#app .card-reverse::before,#cardDragLayer .card-reverse::before { inset:4px; border:1px solid #c4eee1b5; border-radius:5px; background:none; }
#app .chain-starter .card-front,#cardDragLayer .chain-starter .card-front {
  border-color:#eacb71;
  box-shadow:inset 0 0 0 1px #fff6c7,0 1px 0 #d8c179,0 2px 0 #9ea96a,0 0 0 2px #f9edb642,0 0 10px #e7d4795c;
}
#app .card-step,#cardDragLayer .card-step { color:#8e712a; background:#fff3c5; border:1px solid #e8d893; }
#app .drag-card.selected { outline-color:#278e91; }
#app .drag-card.hint,#app .drag-card.blocker-hint { outline-color:#c99c36; }
#app .drop-zone.drop-hover { border-color:#439e90!important; background:#c7eddaa6!important; box-shadow:0 0 0 2px #5caf9890!important; }
#app .drop-zone.target-hint { background:#d1efdba8!important; }
#app .drop-zone.drop-invalid { border-color:#d89887!important; outline-color:#b15d49; box-shadow:0 0 0 1px #b878684d!important; }
#app .shelf-section { border-radius:12px; background:#f5fff533; }
#app .shelf-title span { color:#497368; }
#app .shelf-slot { color:#8eb3a2; border-color:#b8d6c7; border-radius:8px; background:#e6f3e7 linear-gradient(145deg,#f1fcf0,#dcefe1); box-shadow:inset 0 1px #fff,0 0 0 2px #f7fff855; }
#app .shelf-slot.has-card { border-color:transparent; background:transparent; box-shadow:none; }
#app .action-button { color:#335f56; border:1px solid #bfd9cc; border-radius:12px; background:#f6fbf0 linear-gradient(150deg,#fffef8,#eff9ed); box-shadow:inset 0 1px #fff,0 2px 0 #afcfbd,0 4px 8px #33664b10; }
#app .action-button .action-icon { color:#41867d; }
#app .action-button small { color:#779080; }
#app .action-button.accent { color:#fff; border-color:#b1dfc8; background:#4aab9d linear-gradient(150deg,#69c0a8,#329994); }
#app .action-button.accent .action-icon,#app .action-button.accent small { color:#edfff3; }
/* Moves lock controls briefly: mute their paint without a filter/opacity layer. */
#app .action-button:disabled { opacity:1; filter:none; color:#7d9386; border-color:#cbdacb; background:#e7efe4; box-shadow:inset 0 1px #f9fff5,0 2px 0 #c5d4c2; }
#app .action-button:disabled .action-icon,#app .action-button:disabled small { color:#839c8b; }
#cardDragLayer .drag-ghost .card-front { box-shadow:inset 0 0 0 1px #c9e0d1,0 1px 0 #bfd7c8,0 2px 0 #88afa3,0 12px 18px #29565440; }
#cardDragLayer .drag-ghost.chain-starter .card-front { box-shadow:inset 0 0 0 1px #fff6c7,0 2px 0 #bdb477,0 12px 18px #29565440,0 0 9px #e9d98c55; }

/* Every overlay remains light, including account forms and rewards. */
.modal-backdrop { background:#2856516b; backdrop-filter:blur(7px); }
.modal {
  color:#28534b;
  border:1px solid #d8eee1;
  background:linear-gradient(145deg,#fffffafb,#edf8eefb);
  box-shadow:inset 0 1px #fff,0 20px 60px #174c3a35;
  scrollbar-color:#afd2bf transparent;
}
.modal-close { color:#50786a; background:#e1f0e3; }
.menu-emblem { filter:drop-shadow(0 3px 6px #3a72521a); }
.modal > p:not(.eyebrow),.account-description,.tutorial-modal ol { color:#628475; }
.eyebrow { color:#4a8b76!important; }
.menu-list button,.menu-list .menu-link,.account-form input,.profile-card,.reward-line,.tutorial-visual,.development-card { color:#365c50; border-color:#c9ded0; background:#f8fff5; }
.menu-list button,.menu-list .menu-link { box-shadow:0 3px 8px #376b5009; }
.menu-list button>span,.menu-list .menu-link>span { color:#3b8875; background:#e3f3df; }
.menu-list button small,.menu-list .menu-link small,.menu-footer { color:#7a9682; }
.account-icon { color:#418674; background:#e3f3df; }
.account-tabs { background:#e1eee0; }
.account-tabs button { color:#6d8b74; }
.account-tabs button.active { color:#337d66; background:#fffef7; box-shadow:0 3px 8px #35644112; }
.account-form label { color:#5b7c66; }
.account-form input { color:#294e3f; border-color:#bad4bc; background:#fffef9; }
.account-form input:focus { border-color:#5aa987; box-shadow:0 0 0 3px #70b79a22; }
.profile-card span { color:#3a8267; }.profile-card small { color:#7b937d; }
.account-error,.account-logout { color:#af6354; }
.primary-button { color:#fff; border:1px solid #bce4ca; background:linear-gradient(145deg,#6ac2a4,#329b93); box-shadow:inset 0 1px #d9ffeb77,0 3px 0 #4a9b81,0 7px 15px #2d694824; }
.primary-button:active { box-shadow:0 1px 0 #4a9b81; transform:translateY(2px); }
.text-button { color:#698a71; }
.mini-card { color:#47644e; border-color:#fffdf1; background:#fffff8; box-shadow:0 3px 0 #cbdcc2; }
.day-dot { color:#8a9e81; background:#e7eedf; }
.day-dot.active { color:#fff; background:#64ab86; }
.day-dot.claimed { color:#48856a; background:#d3ecd4; }
.complete-badge { color:#fff; background:linear-gradient(145deg,#80c9a2,#42a58d); box-shadow:0 6px 0 #74b995,0 13px 22px #4e856624; }
.complete-badge.failed { background:linear-gradient(145deg,#e8b094,#cc8071); box-shadow:0 6px 0 #bc806e,0 13px 22px #7f574323; }
.complete-badge.development { background:linear-gradient(145deg,#f2df94,#ddbe6b); box-shadow:0 6px 0 #c2a25a,0 13px 22px #8e774d20; }
.stars { color:#dbb354; text-shadow:0 2px #bb913b; }
.stars .off { color:#d8e5cf; }
.reward-line b { color:#b38a32; }
.toast { color:#34614e; border:1px solid #cadcc1; background:#fffdeaf5; box-shadow:0 8px 22px #234e372e; }
.load-error { color:#466853; }
.load-error button { color:#356f55; background:#fffff7; }
@media(hover:hover) {
  #app .drag-card:not(.selected):hover .card-front { border-color:#86bcaa; filter:brightness(1.015); }
  .world-path .map-node:not(:disabled):hover { filter:brightness(1.035); }
  .home-secondary button:hover,.settings-row:hover { background-color:#e5f4e5; }
}
@media(max-height:640px) {
  .home-hero { padding-top:6px; }
  .home-emblem { height:17dvh; }
  .home-hero h1 { font-size:29px; }
  .home-hero p { font-size:10px; padding:5px 8px; margin-top:7px; }
  .home-play { min-height:62px; }
  .home-secondary button { min-height:53px; }
  .modern-nav { margin-top:8px; padding:4px; }
  .modern-nav button { min-height:40px; font-size:9px; }
}
@media(orientation:landscape) and (max-height:560px) {
  .home-screen.is-active { grid-template-rows:50px minmax(0,1fr); }
  .home-hero { padding-top:0; justify-content:center; }
  .home-emblem { height:24dvh; }
  .home-controls { gap:9px; }
  .home-play { min-height:59px; }
  .home-secondary button { min-height:45px; }
  .home-screen>.modern-nav { grid-column:1/-1; margin-top:0; }
  .home-screen.is-active { grid-template-rows:45px minmax(0,1fr) 44px; }
  .modern-nav button { min-height:31px; flex-direction:row; gap:7px; }
  #app .modern-nav button { min-height:0; gap:7px; }
  #app .topbar::before { background-image:linear-gradient(90deg,#d6efdee8,#eaf7f1e0),url('lake-background.png'); }
}
@media(orientation:landscape) and (max-width:600px) {
  #app[data-fit-orientation="landscape"] .topbar { gap:4px; }
  #app[data-fit-orientation="landscape"] .brand #brandText { display:none; }
  #app[data-fit-orientation="landscape"] .brand-emblem { width:32px; height:30px; }
  #app[data-fit-orientation="landscape"] .icon-button { width:30px; flex-basis:30px; height:32px; }
  #app[data-fit-orientation="landscape"] .currency-pill { min-width:70px; height:32px; }
  #app[data-fit-orientation="landscape"] .moves-pill { min-width:62px; width:62px; height:32px; }
}
@media(prefers-reduced-motion:reduce) { #app .chain-slot.collecting { filter:none; } }

/* Source: assets/journey-v15.css */
/* V15: a daylight lake journey. All geometry here belongs to the levels screen. */
#mapScreen {
  background:#e0f1e8;
  color:#244f4d;
}
#mapScreen>.screen-bar {
  position:relative;
  z-index:5;
  min-height:64px;
  padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right));
  border-bottom:0;
  background:#f6fcf4;
  box-shadow:0 1px #fff9;
}
#mapScreen>.screen-bar h1 { font-size:clamp(21px,5.2vw,28px); }
#mapScreen .journey-banner {
  position:relative;
  isolation:isolate;
  z-index:4;
  flex:0 0 auto;
  min-height:104px;
  padding:9px 22px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  border-bottom:1px solid #ffffffb3;
  background:linear-gradient(100deg,#f7fcf2f5,#eef8ece3 56%,#ebf6e3b0),url('lake-background.png') center 19%/cover;
  box-shadow:0 6px 18px #54786c0e;
}
#mapScreen .journey-banner::after {
  content:"";
  position:absolute;
  left:14%;
  right:14%;
  bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,transparent,#9abfa775,transparent);
}
#mapScreen .journey-emblem {
  display:block;
  width:84px;
  height:80px;
  object-fit:contain;
  flex:0 0 84px;
  filter:drop-shadow(0 4px 6px #31574920);
}
#mapScreen .journey-banner>div { display:flex; flex-direction:column-reverse; max-width:330px; gap:5px; }
#mapScreen .journey-banner p {
  margin:0;
  color:#265951;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(18px,4.9vw,25px);
  line-height:1.1;
  letter-spacing:-.025em;
  text-wrap:balance;
}
#mapScreen .journey-banner small { color:#688377; font-size:11px; line-height:1.4; text-wrap:pretty; }

/* The picture is scenery; controls and readable labels remain opaque above it. */
#mapScreen .map-scroll {
  position:relative;
  isolation:isolate;
  background:linear-gradient(90deg,#d2e9e0,#eff8ed 25%,#eaf7eb 75%,#d3e9e0);
  scrollbar-color:#80b9ab #e8f4eb;
  scrollbar-width:thin;
  scroll-behavior:smooth;
}
#mapScreen .world-path {
  width:100%;
  max-width:600px;
  margin:0 auto;
  background:linear-gradient(180deg,#dbeee2b8,#eaf4e2b5 38%,#d3e9dfab 73%,#e1f0e3c7);
}
#mapScreen .world-path::before {
  inset:0;
  z-index:0;
  opacity:1;
  background:linear-gradient(90deg,#e0f0e880,transparent 17%,transparent 83%,#e0f0e880),radial-gradient(ellipse at 14% 18%,#b9d9b669,transparent 20%),radial-gradient(ellipse at 90% 55%,#94c7ac47,transparent 18%);
}
#mapScreen .map-vista {
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
  background:linear-gradient(180deg,#f3f9e01c,#d4eeda63 34%,#e5f1e781 61%,#d9efe566),url('lake-background.png') center/cover no-repeat;
  opacity:.75;
}
#mapScreen .map-vista::after {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 38% 22%,#f7fadc70,transparent 24%),radial-gradient(ellipse at 60% 81%,#f8ffec75,transparent 26%);
}
#mapScreen .journey-scenery {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  overflow:visible;
}
#mapScreen .journey-scenery>svg { display:block; width:100%; height:100%; overflow:visible; }
#mapScreen .scenery-bank { fill:#bad5b8; stroke:#eff4d7; stroke-width:3; }
#mapScreen .scenery-water { fill:#83c8bf; stroke:#c8e9d6; stroke-width:3; }
#mapScreen .scenery-ripple { fill:none; stroke:#e5fae7; stroke-width:1.2; stroke-linecap:round; opacity:.82; }
#mapScreen .scenery-stone { fill:#e2e8d7; stroke:#adbea9; stroke-width:1.3; }
#mapScreen .scenery-stem { fill:none; stroke:#5c9571; stroke-width:2; stroke-linecap:round; }
#mapScreen .scenery-leaf { fill:#86b98c; stroke:#edf4d48f; stroke-width:.8; }
#mapScreen .scenery-flower { fill:#fff4d0; stroke:#f6e7b1; stroke-width:.5; }
#mapScreen .scenery-pollen { fill:#d8b769; stroke:#fff1b4; stroke-width:.7; }
#mapScreen .journey-river { z-index:1; }
#mapScreen .river-shadow { stroke:#648f7566; stroke-width:33; transform:translateY(5px); }
#mapScreen .river-bank { stroke:#fbf9df; stroke-width:29; }
#mapScreen .river-flow { stroke:#d7dabe; stroke-width:22; }
#mapScreen .river-light { stroke:#f6f5e2; stroke-width:17; stroke-dasharray:2 11; stroke-linecap:round; opacity:.87; }
#mapScreen .river-done { stroke:#56a99c; stroke-width:8; stroke-dasharray:1 13; stroke-linecap:round; }

/* Raised medallions sit on the path, with their labels on separate ivory plaques. */
#mapScreen .world-path .map-node {
  isolation:isolate;
  z-index:3;
  width:80px;
  height:80px;
  padding:5px 0 0;
  border:3px solid #fffff4;
  color:#397b6d;
  background:linear-gradient(145deg,#fffef1,#dff0de);
  box-shadow:0 0 0 1px #a4c9aa,inset 0 2px 2px #fff,0 6px 0 #94b7a2,0 10px 0 -2px #c7d8b9,0 14px 19px #446c5627;
  transition:filter .18s ease,box-shadow .18s ease;
  -webkit-appearance:none;
  appearance:none;
}
#mapScreen .map-node::before {
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid #8eb8a252;
  border-radius:50%;
  box-shadow:inset 0 1px #fff9;
  pointer-events:none;
}
#mapScreen .map-node b { position:relative; font-size:31px; font-weight:750; line-height:1; letter-spacing:-.045em; }
#mapScreen .map-node .map-stars { position:relative; margin-top:4px; color:#d9a442; text-shadow:0 1px #fff4c9; font-size:13px; letter-spacing:0; }
#mapScreen .map-node .map-level-name {
  top:calc(100% + 17px);
  left:50%;
  transform:translateX(-50%);
  width:150px;
  max-width:45vw;
  min-height:30px;
  margin:0;
  padding:7px 8px;
  border:1px solid #ffffffb8;
  border-radius:12px;
  color:#42695b;
  background:#f7fbebef;
  box-shadow:0 2px 0 #a6bea735,0 4px 10px #68876c0e;
  font-size:11px;
  line-height:1.2;
  font-weight:650;
  text-shadow:none;
  overflow-wrap:anywhere;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
#mapScreen .world-path .map-node.current {
  z-index:4;
  color:#fffef1;
  border-color:#fffce3;
  background:linear-gradient(140deg,#8ed7b0 0%,#45b09f 45%,#287f79 100%);
  box-shadow:0 0 0 2px #66a993,inset 0 2px 2px #e7ffd3b0,0 6px 0 #397f6d,0 10px 0 -1px #acd0a8,0 14px 22px #487e663c;
}
#mapScreen .map-node.current::before { border-color:#d9ffe482; box-shadow:inset 0 1px #f7ffda80; }
#mapScreen .map-node.current b { font-size:34px; text-shadow:0 2px #26776b40; }
#mapScreen .map-node.current .map-level-name { color:#245e51; border-color:#bfd3a0; background:#fffde6; box-shadow:0 2px 0 #b4c69870,0 5px 10px #62826717; }
#mapScreen .map-node-halo {
  position:absolute;
  inset:-11px;
  z-index:-1;
  border:1px solid transparent;
  border-radius:50%;
  pointer-events:none;
}
#mapScreen .current .map-node-halo {
  border-color:#63b49b66;
  box-shadow:0 0 0 6px #b7dfb640,0 0 30px #d8f7b978;
  animation:journey-current-breathe 3.8s ease-in-out infinite;
}
#mapScreen .map-current-label {
  position:absolute;
  left:50%;
  top:-17px;
  transform:translateX(-50%);
  width:max-content;
  max-width:150px;
  padding:6px 12px;
  border:1px solid #fffcdb;
  border-radius:20px;
  color:#557b4e;
  background:linear-gradient(135deg,#fffad8,#edf3ce);
  box-shadow:0 3px 7px #6b8d6030;
  font-size:10px;
  line-height:1.2;
  font-weight:750;
  text-wrap:balance;
  pointer-events:none;
}
#mapScreen .map-current-label::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:-5px;
  width:8px;
  height:8px;
  transform:translateX(-50%) rotate(45deg);
  border-right:1px solid #fffcdb;
  border-bottom:1px solid #fffcdb;
  background:#f2f6d1;
}
#mapScreen .world-path .map-node.completed {
  color:#617a45;
  border-color:#fffce0;
  background:linear-gradient(145deg,#fff5c7,#e8edc4);
  box-shadow:0 0 0 1px #c4ca95,inset 0 2px #ffffed,0 6px 0 #acba83,0 10px 0 -2px #d3dfbc,0 14px 19px #6a7d4224;
}
#mapScreen .map-node.completed::before { border-color:#b8c38b88; }
#mapScreen .world-path .map-node.locked {
  color:#8eaaa0;
  border-color:#eaf3e6;
  background:linear-gradient(145deg,#dfeadf,#c1d6cc);
  box-shadow:0 0 0 1px #b0c9b7,inset 0 2px #f3f9eccc,0 5px 0 #a5bdab,0 9px 0 -2px #c6d8ba,0 12px 17px #4668531c;
  opacity:1;
}
#mapScreen .map-node.locked::before { border-color:#9bb8a93b; }
#mapScreen .map-node.locked .map-level-name { color:#788f7f; border-color:#edf5e5c2; background:#e9f2e2ea; box-shadow:0 2px 0 #a6bea729; }
#mapScreen .map-node .map-lock {
  right:-4px;
  bottom:-5px;
  width:27px;
  height:28px;
  border:1px solid #fbffeccc;
  border-radius:10px;
  color:#7b9a88;
  background:linear-gradient(150deg,#f5f9e9,#deead7);
  box-shadow:0 2px 0 #b0c4a7,0 3px 6px #5d7b5620;
}
#mapScreen .map-lock svg { display:block; width:15px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#mapScreen .map-node:focus-visible { outline:3px solid #176e67; outline-offset:12px; }

#mapScreen .map-coming {
  top:25px;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  width:calc(100% - 42px);
  max-width:335px;
  padding:16px 18px;
  gap:5px;
  border:1px solid #fff8dce6;
  border-radius:22px;
  color:#516f52;
  background:linear-gradient(145deg,#fffee7ed,#edf5d8ed);
  box-shadow:inset 0 1px #fff,0 3px 0 #b5c7a1,0 9px 22px #64845819;
}
#mapScreen .map-coming b { font-family:Georgia,"Times New Roman",serif; font-size:17px; font-weight:700; line-height:1.15; }
#mapScreen .map-coming small { color:#839275; font-size:11px; line-height:1.3; }
#mapScreen .map-footer {
  position:relative;
  z-index:4;
  padding:11px 16px 9px;
  gap:4px;
  border-top:1px solid #fff9;
  color:#397467;
  background:#f4faed;
  box-shadow:0 -6px 16px #5977580a;
}
#mapScreen .map-footer>span { font-size:12px; letter-spacing:.02em; }
#mapScreen .map-footer small { color:#81937c; font-size:10px; }
#mapScreen>.modern-nav { position:relative; z-index:4; margin-top:0; border-radius:20px 20px 0 0; border-color:#cbdcc4; background:#fbfdf2; box-shadow:0 -2px 10px #546f4906; }

@keyframes journey-current-breathe {
  0%,100% { opacity:.6; transform:scale(.98); }
  50% { opacity:1; transform:scale(1.045); }
}
@media(hover:hover) and (pointer:fine) {
  #mapScreen .map-node:not(:disabled):hover { filter:brightness(1.055); }
  #mapScreen .map-node:not(:disabled):active { filter:brightness(.98); }
}
@media(min-width:620px) {
  #mapScreen .journey-banner { min-height:118px; gap:22px; }
  #mapScreen .journey-emblem { width:104px; height:91px; flex-basis:104px; }
  #mapScreen .journey-banner small { font-size:12px; }
  #mapScreen .world-path { box-shadow:20px 0 60px #496f4710,-20px 0 60px #496f4710; }
}
@media(max-width:359px) {
  #mapScreen .journey-banner { padding-inline:15px; gap:10px; min-height:94px; }
  #mapScreen .journey-emblem { width:70px; height:70px; flex-basis:70px; }
  #mapScreen .journey-banner small { font-size:10px; }
  #mapScreen .map-node .map-level-name { width:140px; padding-inline:6px; font-size:10px; }
  #mapScreen .map-current-label { max-width:140px; font-size:9px; }
}
@media(max-height:640px) {
  #mapScreen>.screen-bar { min-height:55px; padding-block:5px; }
  #mapScreen .journey-banner { min-height:71px; padding-block:4px 8px; }
  #mapScreen .journey-emblem { height:61px; width:68px; flex-basis:68px; }
  #mapScreen .journey-banner p { font-size:18px; }
  #mapScreen .journey-banner small { font-size:10px; }
  #mapScreen .map-footer { padding-block:7px 6px; gap:2px; }
}
@media(orientation:landscape) and (max-height:460px) {
  #mapScreen>.screen-bar { min-height:48px; padding-block:4px; }
  #mapScreen .journey-banner { min-height:0; padding:4px 16px 6px; gap:8px; }
  #mapScreen .journey-emblem { width:34px; height:33px; flex-basis:34px; }
  #mapScreen .journey-banner>div { flex-direction:row-reverse; align-items:center; max-width:none; gap:10px; }
  #mapScreen .journey-banner p { font-size:16px; }
  #mapScreen .journey-banner small { max-width:210px; font-size:9px; }
  #mapScreen .map-footer small { display:none; }
  #mapScreen>.modern-nav { padding-block:3px; }
  #mapScreen>.modern-nav button { min-height:37px; font-size:9px; }
  #mapScreen>.modern-nav .nav-icon { width:17px; height:17px; flex-basis:17px; }
}
@media(prefers-reduced-motion:reduce) {
  #mapScreen .map-scroll { scroll-behavior:auto; }
  #mapScreen .map-node { transition:none; }
  #mapScreen .current .map-node-halo { animation:none; opacity:.85; }
}

/* Source: assets/tutorial-v17.css */
/* The lesson shares the game grid: no overlay covers cards or controls. */
body.training-mode #app .level-heading {
  position:relative;
  padding:7px 9px;
  border:1px solid #b8dbce;
  border-radius:12px;
  background:linear-gradient(125deg,#f9fff7,#e6f5eb);
  box-shadow:inset 0 1px #fff;
}
body.training-mode #app .level-kicker,
body.training-mode #app .goal-copy,
body.training-mode #app .goal-icon,
body.training-mode #app #roundProgress { display:none; }
body.training-mode #app .goal-row { position:absolute; top:6px; right:8px; margin:0; gap:0; }
body.training-mode #app #roundCounter { position:static; min-width:34px; padding:2px 5px; font-size:11px; line-height:1.15; }
body.training-mode #app .lesson-coach { display:block; margin:0; color:#275c52; }
body.training-mode #app .lesson-coach[hidden] { display:none; }
body.training-mode #app #lessonStep {
  display:block;
  min-height:16px;
  padding-right:44px;
  color:#347d69;
  font-size:10px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.025em;
}
body.training-mode #app #lessonText {
  display:block;
  margin:3px 0 0;
  color:#244f48;
  font-size:var(--fit-lesson-font,11px);
  line-height:1.25;
  font-weight:600;
  white-space:normal;
  overflow-wrap:anywhere;
  text-transform:none;
  letter-spacing:0;
}
body.training-mode #app .lesson-focus {
  outline:3px solid #e4b550;
  outline-offset:2px;
  box-shadow:0 0 0 5px #fff5cdb8,0 0 15px #d9bb6280;
  animation:lesson-ring 1.8s ease-in-out infinite;
}
body.training-mode #app .lesson-target {
  outline:2px dashed #248b74;
  outline-offset:2px;
  box-shadow:0 0 0 4px #a7e2c859;
}
body.training-mode #app .lesson-inactive { opacity:.48; }
body.training-mode #app .lesson-focus.lesson-target { outline-style:solid; outline-color:#e4b550; }
body.training-mode #app .lesson-focus:focus-visible,
body.training-mode #app .lesson-target:focus-visible { outline-color:#176554; }
#lessonCompleteModal .modal { border-color:#b9dcc9; }
#lessonCompleteModal h2 { color:#285f50; }
#lessonCompleteModal p { color:#4b7263; }
#lessonReplay { margin-top:10px; }
@keyframes lesson-ring {
  0%,100% { outline-color:#e4b550; box-shadow:0 0 0 5px #fff5cdb8,0 0 12px #d9bb6250; }
  50% { outline-color:#b99534; box-shadow:0 0 0 5px #fff3bfe0,0 0 17px #d9bb6280; }
}
@media (max-height:540px) {
  body.training-mode #app .level-heading { padding:5px 7px; }
  body.training-mode #app #lessonStep { font-size:9px; min-height:14px; }
  body.training-mode #app #lessonText { font-size:var(--fit-lesson-font,10px); line-height:1.2; margin-top:2px; }
  body.training-mode #app .goal-row { top:4px; right:6px; }
}
@media (prefers-reduced-motion:reduce) {
  body.training-mode #app .lesson-focus { animation:none; }
}

/* Source: assets/card-art-v18.css */
.cw-card-art { display:block; width:100%; min-width:0; overflow:hidden; border-radius:5px; pointer-events:none; }
#app .card-front>.cw-card-art,#cardDragLayer .card-front>.cw-card-art {
  height:auto; min-height:0; flex:1 1 0; border:0; background:#f3f8ee;
}
.mini-card-item>.cw-card-art { width:100%; height:38px; flex:none; border-radius:6px; background:#f3f8ee; }
.card-image-preview>.cw-card-art { width:100%; height:100%; background:#f3f8ee; }
.card-image-preview.empty>.cw-card-art { display:none; }
@media(max-width:600px) { .mini-card-item>.cw-card-art { height:31px; } }

/* Source: assets/tutorial-hand-v18.css */
/* Decorative tutorial cursor: it cannot capture taps, drags, focus or selection. */
.cw-tutorial-hand {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 2200;
  overflow: hidden;
  contain: layout style paint;
  isolation: isolate;
  pointer-events: none !important;
  user-select: none;
  -webkit-user-select: none;
}
.cw-tutorial-hand[hidden], .cw-tutorial-hand [hidden] { display: none !important; }
.cw-tutorial-hand * { pointer-events: none !important; }
.cw-hand-route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cw-hand-route path {
  fill: none;
  stroke: #158d87;
  stroke-width: 2.5px;
  stroke-dasharray: 4 7;
  stroke-linecap: round;
  opacity: .46;
  filter: drop-shadow(0 1px 1px #fff);
}
.cw-hand-cursor {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform, opacity;
  filter: drop-shadow(0 3px 3px #123c4560);
}
.cw-hand-cursor svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cw-hand-glove { fill: #fffdf7; stroke: #2e5b61; stroke-width: 2; stroke-linejoin: round; }
.cw-hand-shade { fill: #d2e6df; }
.cw-hand-fold { fill: none; stroke: #87aaa6; stroke-width: 1.6; stroke-linecap: round; }
.cw-hand-cuff { fill: #67bab0; stroke: #2e5b61; stroke-width: 2; stroke-linejoin: round; }
.cw-hand-cuff-shine { fill: none; stroke: #cef0e6; stroke-width: 2; stroke-linecap: round; }
.cw-hand-ring {
  position: absolute;
  width: 26px;
  height: 26px;
  box-sizing: border-box;
  border: 2px solid #fffdf3;
  border-radius: 50%;
  background: #51c8b933;
  box-shadow: 0 0 0 2px #208f88aa, 0 0 13px #58c9b84d;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.cw-hand-static .cw-hand-cursor { will-change: auto; }
.cw-hand-static .cw-hand-ring { opacity: .8; }
.cw-hand-static .cw-hand-ring-target { background: #b4ddd15c; border-style: dashed; }
@media (prefers-reduced-motion: reduce) {
  .cw-hand-cursor { will-change: auto; }
  .cw-hand-route path { opacity: .65; }
}

/* Recovery lives under the move counter; the five piles retain the complete board width. */
#app .board-wrap { isolation:isolate; }
#app .moves-cluster {
  position:relative;
  z-index:3;
  flex:0 0 var(--fit-moves-w,72px);
  width:var(--fit-moves-w,72px);
  height:var(--fit-moves-h,36px);
}
#app .moves-cluster .moves-pill {
  width:var(--fit-moves-w,72px);
  min-width:0;
  height:var(--fit-moves-h,36px);
}
#app .card-board {
  position:relative;
  z-index:0;
  flex:none;
  width:100%;
  margin-right:0;
}
#app .rescue-basket {
  position:absolute;
  z-index:2;
  right:calc((var(--fit-moves-w,72px) - var(--fit-basket-w,52px)) / 2);
  top:var(--fit-basket-top,40px);
  width:var(--fit-basket-w,52px);
  height:var(--fit-basket-h,65px);
  isolation:isolate;
  pointer-events:none!important;
  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none;
  filter:drop-shadow(0 3px 3px #376c5520);
}
#app .rescue-basket[hidden] { display:none!important; }
#app .rescue-basket * { pointer-events:none!important; -webkit-user-drag:none; }
/* Exposed overlapping cards retain a visible ordinal on the upper edge. */
#app .stack .back-card,#app .stack .card-face,#app .stack .covered-face {
  top:calc(var(--closed-before,var(--stack-index,0)) * var(--fit-stack-step,14px) + var(--open-before,0) * var(--fit-open-step,18px));
}
#app .stack .card-face .card-front,#cardDragLayer .drag-ghost.card-face .card-front { padding-top:18%; }
#app .card-rank,#cardDragLayer .card-rank {
  position:absolute;
  z-index:4;
  top:1px;
  left:4px;
  min-width:1em;
  padding:0 1px;
  border-radius:3px;
  color:#346c60;
  background:#f2fff2;
  font-size:var(--fit-rank-font,10px);
  font-weight:800;
  line-height:1.05;
  font-variant-numeric:tabular-nums;
  text-align:center;
  pointer-events:none;
}
#app .foundation-layer .card-rank,#app .shelf-card .card-rank { display:none; }
#app .stack .drag-card:focus-visible { outline:2px solid #278e91; outline-offset:1px; }
.basket-art { position:absolute; inset:0; z-index:2; display:block; width:100%; height:100%; overflow:visible; }
.basket-cards { position:absolute; z-index:1; inset:0; }
.basket-cards > * {
  position:absolute;
  bottom:38%;
  left:31%;
  width:38%;
  height:42%;
  overflow:hidden;
  border:2px solid #fffbed;
  border-radius:4px;
  background:repeating-linear-gradient(45deg,#a8d9cf 0 4px,#6eb7ae 4px 8px);
  box-shadow:0 1px 2px #376e5966,inset 0 0 0 1px #5f9d91;
  transform-origin:50% 95%;
  transform:rotate(-20deg) translateX(-16%);
}
.basket-cards > :nth-child(2) { transform:rotate(19deg) translateX(17%); }
.basket-cards > :nth-child(3) { transform:rotate(-2deg) translateY(-7%); }
.basket-cards > :nth-child(n+4) { display:none; }
.basket-count {
  position:absolute;
  z-index:3;
  right:1%;
  bottom:1%;
  min-width:18px;
  max-width:100%;
  min-height:18px;
  display:grid;
  place-items:center;
  padding:1px 4px;
  border:1px solid #fff9df;
  border-radius:999px;
  color:#fffdef;
  background:linear-gradient(145deg,#4eaa96,#247e75);
  box-shadow:0 2px 3px #35685033;
  font-size:clamp(8px,calc(var(--fit-basket-w,52px) / 4.6),13px);
  font-weight:850;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}
#app .rescue-basket.is-receiving .basket-art { animation:basketReceive .42s ease-out; }
#app .rescue-basket.is-sending .basket-cards { animation:basketSend .35s ease-out; }
#app .shelf-slot.is-locked {
  border:1px dashed #95bcaa;
  background:#e2efe3 linear-gradient(145deg,#e6f3e499,#cce4d599);
  box-shadow:inset 0 0 0 2px #f5fcf055;
  cursor:default;
}
#app .shelf-unlock {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  width:100%;
  height:100%;
  padding:3px 1px;
  border:0;
  border-radius:inherit;
  color:#447969;
  background:transparent;
  font:inherit;
  font-size:clamp(6px,calc(var(--fit-shelf-w,42px) / 6),9px);
  font-weight:800;
  line-height:1.1;
  text-align:center;
  overflow-wrap:anywhere;
  cursor:pointer;
  touch-action:manipulation;
}
#app .shelf-unlock::before {
  content:"";
  display:block;
  flex:0 0 auto;
  width:clamp(12px,calc(var(--fit-shelf-w,42px) * .36),22px);
  aspect-ratio:1;
  background:#588c77;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1Zm2 0h6V7a3 3 0 0 0-6 0v3Zm2 5v4h2v-4h-2Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1Zm2 0h6V7a3 3 0 0 0-6 0v3Zm2 5v4h2v-4h-2Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
#app .shelf-unlock::after {
  content:"▶";
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:clamp(15px,calc(var(--fit-shelf-w,42px) * .5),28px);
  height:clamp(11px,calc(var(--fit-shelf-w,42px) * .34),18px);
  border:1px solid #fff8dd;
  border-radius:5px;
  color:#fffced;
  background:#68a68d;
  font-size:9px;
  line-height:1;
}
#app .shelf-unlock svg { display:none; }
#app .shelf-unlock:focus-visible { outline:2px solid #1f877c; outline-offset:2px; }
#app .shelf-unlock:active { background:#95cdb24d; transform:scale(.97); }
#app .shelf-unlock:disabled { opacity:.5; cursor:wait; }
.revive-modal {
  padding:25px 23px 23px;
  border:2px solid #e0eedb;
  border-radius:28px;
  background:radial-gradient(ellipse at 50% 0,#d1ece2 0,transparent 55%),linear-gradient(160deg,#fffff6,#eaf5e9);
  box-shadow:0 25px 70px #254a3e55,inset 0 0 0 4px #ffffff70;
}
.revive-modal .modal-close { top:10px; right:10px; width:40px; height:40px; border:1px solid #bfdcc9; border-radius:50%; color:#528573; background:#f8fff3; box-shadow:0 2px 0 #b9d5c4; }
.revive-modal h2 { padding:0 15px; color:#2c675a; font-size:clamp(22px,6vw,29px); letter-spacing:-.025em; }
.revive-modal #failedMovesText { margin-top:9px; color:#618272; font-size:13px; line-height:1.55; }
.revive-emblem { position:relative; width:85px; height:77px; margin:8px auto 16px; }
.revive-emblem span { position:absolute; left:21px; top:6px; width:44px; height:63px; display:grid; place-items:center; border:3px solid #fff9e6; border-radius:8px; color:#2c8d7b; background:linear-gradient(160deg,#d1eecb,#99cdb7); font-size:27px; box-shadow:0 2px 0 #90b49d,inset 0 0 0 1px #88b49c; }
.revive-emblem span:first-child { transform:rotate(-22deg) translateX(-13px); }
.revive-emblem span:nth-child(2) { transform:rotate(22deg) translateX(13px); }
.revive-emblem span:last-child { transform:translateY(-5px); }
.revive-options { display:grid; gap:11px; margin-top:23px; }
#movesFailedModal .revive-options .primary-button { margin:0; min-height:53px; display:flex; align-items:center; justify-content:center; gap:13px; border-radius:16px; padding:11px 16px; font-size:14px; line-height:1.2; }
.revive-options .revive-coins { color:#346958; border:1px solid #d8d7a5; background:linear-gradient(150deg,#fff8d5,#e9edc5); box-shadow:0 3px 0 #b6c99e,inset 0 1px #fffdf0; }
.revive-coins b { display:flex; align-items:center; gap:4px; padding:4px 8px; border-radius:10px; color:#746326; background:#fffdf080; font-size:15px; white-space:nowrap; }
.revive-options .watch-video-button { color:#fffdf0; border:1px solid #4d9f8d; background:linear-gradient(145deg,#7ac3a6,#3b9a8d); box-shadow:0 3px 0 #357e6d,inset 0 1px #d2f0d799; }
.watch-video-button .video-play-mark { flex:0 0 27px; display:grid; place-items:center; height:27px; border:1px solid #d8f4d5; border-radius:8px; color:inherit; font-size:13px; background:#ffffff14; }
.watch-video-button > span:last-child { min-width:0; overflow-wrap:break-word; }
.revive-options .skip-video-button { color:#366f61; border-color:#9fcbb6; background:linear-gradient(145deg,#f2fff0,#d8eee0); box-shadow:0 3px 0 #accbb9,inset 0 1px #fffdf0; }
.skip-video-button .video-play-mark { border-color:#a2c8b4; background:#c6e5d3; }
.menu-list .menu-watch-video { grid-template-rows:1fr; border-color:#afd2bd; background:linear-gradient(145deg,#fffdf2,#e5f3df); }
.menu-list .menu-watch-video > span { border:1px solid #a4cbb7; color:#397b68; background:#d9eedd; }
.menu-watch-video b { line-height:1.35; }
.revive-options button:disabled { opacity:.55; filter:saturate(.5); cursor:wait; }
.revive-modal #restartLevelAfterFail[hidden] { display:none!important; }
.revive-modal #restartLevelAfterFail { margin-top:15px; }
.revive-modal #reviveStatus:not(:empty) { margin-top:14px; padding:9px 11px; border:1px solid #d9d7aa; border-radius:10px; color:#756334; background:#fff9dc; font-size:12px; line-height:1.4; }
@keyframes basketReceive { 40% { transform:translateY(3px) scale(1.04,.95); } 75% { transform:translateY(-1px) scale(.98,1.02); } }
@keyframes basketSend { 45% { transform:translateY(-5px); } }
@media (max-height:420px) {
  .revive-modal { padding:16px 22px; max-height:calc(100dvh - 24px); }
  .revive-emblem { width:62px; height:43px; margin:0 auto 6px; transform:scale(.65); transform-origin:50% 0; }
  .revive-modal h2 { font-size:21px; margin-top:0; }
  .revive-modal #failedMovesText { font-size:11px; line-height:1.35; margin-top:5px; }
  .revive-options { margin-top:13px; gap:8px; }
  #movesFailedModal .revive-options .primary-button { min-height:42px; padding:8px 12px; font-size:12px; }
}
@media (prefers-reduced-motion:reduce) {
  #app .rescue-basket.is-receiving .basket-art,#app .rescue-basket.is-sending .basket-cards { animation:none; }
}

/* Embossed leaf coins share the mint-and-ivory card palette. */
.coin-mark { display:inline-block; flex:0 0 auto; width:32px; height:34px; vertical-align:middle; overflow:visible; filter:drop-shadow(0 2px 2px #624d1e26); }
#app .currency-pill .coin-mark { width:25px; height:27px; }
.screen-coins .coin-mark { width:25px; height:27px; }
.coin-price { display:inline-flex; align-items:center; justify-content:center; gap:4px; width:max-content; max-width:100%; white-space:nowrap; font-variant-numeric:tabular-nums; }
#app .action-button .coin-price { grid-column:2; grid-row:2; justify-self:start; padding:1px 5px 1px 2px; border:1px solid #e5d496; border-radius:9px; color:#7b6124; background:linear-gradient(135deg,#fffce3,#f7ebc1); box-shadow:inset 0 1px #fffef4,0 1px 0 #d4d5aa; font-size:11px; font-weight:800; line-height:1; }
#app .coin-price .coin-mark { width:17px; height:18px; }
#app .action-button .undo-icon { position:relative; display:grid; place-items:center; width:22px; }
#app .undo-quota { position:absolute; right:-5px; top:-4px; display:grid; place-items:center; min-width:12px; height:12px; padding:0 2px; border:1px solid #b3cbb4; border-radius:6px; color:#477762; background:#f4ffed; box-shadow:0 1px 0 #bed0b7; font-size:8px; font-weight:800; line-height:1; }
.revive-coins .coin-price { padding:3px 9px 3px 5px; border:1px solid #e1ce8d; background:linear-gradient(135deg,#fffde7,#f5e5ae); box-shadow:inset 0 1px #ffffef; }
.revive-coins .coin-price .coin-mark { width:24px; height:26px; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
body.training-mode #app .coin-price .coin-mark,#app .coin-price.is-free .coin-mark { display:none; }
body.training-mode #app .action-button .coin-price,#app .action-button .coin-price.is-free { padding:2px 5px; border-color:#c5d8bb; color:#557b50; background:#edf8df; }
@media(max-width:360px) {
  #app .action-button .coin-price { padding:1px 4px 1px 1px; gap:2px; font-size:10px; }
  #app .coin-price .coin-mark { width:15px; height:16px; }
}
@media(max-height:420px) and (min-width:540px) {
  .revive-modal { width:min(100%,690px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; column-gap:22px; padding:28px 22px 17px; }
  .revive-modal .revive-emblem { display:none; }
  .revive-modal h2 { grid-column:1; padding:0; margin:0; }
  .revive-modal #failedMovesText { grid-column:1; margin-bottom:0; }
  .revive-modal .revive-options { grid-column:2; grid-row:1 / span 2; margin:5px 0 0; }
  .revive-modal #reviveStatus { grid-column:1 / -1; }
  .revive-modal .modal-close { width:29px; height:29px; top:5px; right:6px; font-size:21px; }
}

/* A visibly labelled test rewarded preview; real SDKs take priority. */
#homeCoins,#coinsButton,#mapCoins { cursor:pointer; touch-action:manipulation; }
#mapCoins { font:inherit; }
.cw-video-preview { position:fixed; z-index:200000; inset:0; display:grid; place-items:center; padding:max(16px,env(safe-area-inset-top)) 18px max(16px,env(safe-area-inset-bottom)); background:#153d35eb; backdrop-filter:blur(12px); }
.cw-video-preview-panel { position:relative; width:min(100%,380px); max-height:calc(100dvh - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow:auto; padding:28px 24px 24px; border:2px solid #cae2ce; border-radius:28px; text-align:center; color:#285c50; background:radial-gradient(ellipse at top,#ceeee0,transparent 60%),#fffef3; box-shadow:0 20px 70px #001f2366; }
.cw-video-preview-close { position:absolute; right:10px; top:10px; display:grid; place-items:center; width:38px; height:38px; border:1px solid #9fc5b4; border-radius:50%; color:#427763; background:#f4ffed; font-size:26px; cursor:pointer; }
.cw-video-preview-badge { margin:2px 24px 12px; color:#57816d; font-size:11px; font-weight:850; letter-spacing:.06em; }
.cw-video-preview-art { position:relative; height:160px; margin:18px auto 6px; }
.cw-video-preview-art span { position:absolute; left:calc(50% - 40px); top:18px; width:80px; height:112px; display:grid; place-items:center; border:4px solid #fffde6; border-radius:12px; color:#4b9277; background:linear-gradient(140deg,#e4f3c7,#91cabb); box-shadow:0 5px 0 #83b2a4,0 8px 18px #317e6033; font-size:40px; animation:videoPreviewFloat 2.8s ease-in-out infinite; }
.cw-video-preview-art span:first-child { margin-left:-60px; rotate:-18deg; animation-delay:-.5s; }
.cw-video-preview-art span:nth-child(2) { margin-left:60px; rotate:18deg; animation-delay:-1.2s; }
.cw-video-preview-art span:nth-child(3) { top:5px; }
.cw-video-preview-art img { position:absolute; width:100px; height:86px; object-fit:contain; bottom:0; left:calc(50% - 50px); filter:drop-shadow(0 4px 8px #416b5444); }
.cw-video-preview h2 { margin:9px 0; font:700 28px Georgia,serif; color:#285b4d; }
.cw-video-preview-description { min-height:36px; margin:8px 0 20px; font-size:13px; line-height:1.5; }
.cw-video-preview-track { height:8px; overflow:hidden; border-radius:8px; background:#d9e8d8; box-shadow:inset 0 1px 2px #618b7422; }
.cw-video-preview-track i { display:block; width:100%; height:100%; border-radius:8px; background:linear-gradient(90deg,#76bca0,#4b9d8f); transform:scaleX(var(--video-preview-progress,0)); transform-origin:left; transition:transform .1s linear; }
.cw-video-preview-count { margin:10px 0 16px; min-height:18px; font-size:12px; font-weight:750; }
.cw-video-preview-claim { width:100%; min-height:46px; padding:11px 16px; border:1px solid #4e9b83; border-radius:13px; color:#fffdea; background:linear-gradient(145deg,#76bba2,#348c80); box-shadow:0 3px 0 #2d7163; font:inherit; font-size:14px; font-weight:800; cursor:pointer; }
.cw-video-preview-claim:disabled { opacity:.5; cursor:default; box-shadow:none; }
.cw-video-preview button:focus-visible { outline:3px solid #caad60; outline-offset:3px; }
@keyframes videoPreviewFloat { 50% { translate:0 -7px; } }
@media(max-height:520px) { .cw-video-preview-panel { padding:18px 22px; } .cw-video-preview-art { height:72px; margin:6px auto; } .cw-video-preview-art span { width:44px; height:62px; left:calc(50% - 22px); top:0; font-size:26px; border-width:2px; } .cw-video-preview-art span:first-child { margin-left:-35px; }.cw-video-preview-art span:nth-child(2) { margin-left:35px; }.cw-video-preview-art img { width:59px;height:50px;left:calc(50% - 29.5px); }.cw-video-preview h2 { font-size:22px; margin:5px 0; }.cw-video-preview-description { margin:5px 0 10px; min-height:0; font-size:11px; }.cw-video-preview-count { margin:6px 0 9px; } }
@media(prefers-reduced-motion:reduce) { .cw-video-preview-art span { animation:none; }.cw-video-preview-track i { transition:none; } }

/* Soft card finish and a calmer type hierarchy. Fitted board geometry stays in charge. */
:root {
  --cw-font-ui:"Avenir Next",ui-rounded,"SF Pro Rounded","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  --cw-font-title:"Iowan Old Style","Palatino Linotype",Georgia,serif;
  --cw-text:#294f49;
  --cw-text-soft:#58796e;
  --cw-ease-settle:cubic-bezier(.22,.75,.24,1);
}
body,body[data-screen="game"],#cardDragLayer {
  font-family:var(--cw-font-ui);
  font-kerning:normal;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
button,input,select { font-family:inherit; }
.screen-bar h1,.home-hero h1,.modal h2,.cw-video-preview h2,
#app .goal-row h1,#app #collectChains,#mapScreen .journey-banner p {
  font-family:var(--cw-font-title);
  font-weight:400;
  letter-spacing:-.028em;
  color:var(--cw-text);
  text-shadow:none;
  text-wrap:balance;
}
.home-hero h1 { line-height:1.08; }
#app #collectChains { line-height:1.12; }
.modal h2 { line-height:1.16; }
.home-hero p,#mapScreen .journey-banner small,.settings-note,
.modal > p:not(.eyebrow),.account-description,.tutorial-modal ol,
.cw-video-preview-description {
  color:var(--cw-text-soft);
  font-weight:400;
  letter-spacing:0;
  line-height:1.5;
  text-wrap:pretty;
}
.home-hero p { background:#f6fff1d9; }
#app #roundHint {
  color:#527268;
  font-weight:500;
  line-height:1.22;
  text-wrap:pretty;
}
#app .card-front .card-label,#cardDragLayer .card-front .card-label {
  font-family:var(--cw-font-ui);
  color:#294d43;
  font-weight:600;
  line-height:1.16;
  letter-spacing:-.012em;
  text-transform:none;
  text-shadow:none;
  text-wrap:balance;
  word-break:normal;
  overflow-wrap:anywhere;
}
#app .chain-slot .foundation-name {
  font-family:var(--cw-font-ui);
  font-weight:600;
  letter-spacing:0;
}
#app .level-kicker { font-weight:650; letter-spacing:.055em; }
#app .board-meta,#app .shelf-title span {
  font-weight:600;
  letter-spacing:.025em;
  text-transform:none;
}
#app .board-meta small { color:#5b7d70; }
#app .board-meta b { color:#a57829; font-weight:700; }
#app .card-rank,#cardDragLayer .card-rank,
#app .card-step,#cardDragLayer .card-step,
#app .foundation-count,.round-counter,.moves-pill b,
.currency-pill strong,.screen-coins b,.screen-coins strong,.coin-price {
  font-family:var(--cw-font-ui);
  font-variant-numeric:tabular-nums lining-nums;
  letter-spacing:-.02em;
  font-weight:650;
}
#app .round-counter { font-weight:700; }
#app .card-rank,#cardDragLayer .card-rank { font-weight:700; }
#app .action-button > span:not(.action-icon) { font-weight:650; letter-spacing:-.01em; line-height:1.1; }
#app .action-button .coin-price { font-weight:700; letter-spacing:0; line-height:1; }
#app .action-button small { font-weight:500; letter-spacing:0; }
.home-play>span { font-weight:600; letter-spacing:-.025em; }
.home-play small { font-weight:500; }
.home-secondary b,.settings-row,.settings-language>b,
.menu-list button b,.menu-list .menu-link b,.primary-button { font-weight:600; letter-spacing:0; }
.modern-nav button { font-weight:500; letter-spacing:0; }
#mapScreen .map-node b { font-weight:650; }
#mapScreen .map-current-label { font-weight:600; }
#mapScreen .map-footer { font-weight:600; font-variant-numeric:tabular-nums; }
.menu-list button small,.menu-list .menu-link small,.menu-footer { color:#657f72; font-weight:400; line-height:1.4; }
.eyebrow { font-weight:650; letter-spacing:.085em; }
.toast { font-weight:600; line-height:1.4; letter-spacing:0; }
body.training-mode #app #lessonText { font-weight:500; color:#345e50; text-wrap:pretty; }
body.training-mode #app #lessonStep { font-weight:650; letter-spacing:.025em; }

/* Paper edges and a diffuse contact shadow give the cards weight without glare. */
#app .card-front,#cardDragLayer .card-front {
  background:linear-gradient(155deg,#fffef9 0%,#fbfff7 62%,#eef8ef 100%);
  box-shadow:inset 0 0 0 1px #c9dfcf,0 1px 0 #cee0cf,0 2px 0 #97b6a5,0 3px 5px #315c4921;
}
#app .card-front::after,#cardDragLayer .card-front::after {
  background:linear-gradient(120deg,#ffffff38,transparent 32%,transparent 78%,#416d4507);
}
#app .chain-starter .card-front,#cardDragLayer .chain-starter .card-front {
  border-color:#f3dea0;
  box-shadow:inset 0 0 0 1px #eee0a7,0 1px 0 #dcc583,0 2px 0 #a9b582,0 3px 7px #6a714829,0 0 8px #e5d68e35;
}
#cardDragLayer .drag-ghost .card-front {
  box-shadow:inset 0 0 0 1px #ccdfcf,0 1px 0 #c5d8c7,0 2px 0 #94b09d,0 7px 14px #2d554c2e,0 15px 25px #2d554c14;
  transition:box-shadow .2s var(--cw-ease-settle);
}
#cardDragLayer .drag-ghost.is-held .card-front {
  box-shadow:inset 0 0 0 1px #c9dfcf,0 1px 0 #c7daca,0 2px 0 #97b4a2,0 10px 18px #2b564c38,0 22px 32px #2b564c1f;
}
#cardDragLayer .drag-ghost.chain-starter .card-front {
  box-shadow:inset 0 0 0 1px #eee0a7,0 1px 0 #dcc583,0 2px 0 #a9b582,0 8px 16px #2d554c30,0 16px 26px #2d554c18;
}
#cardDragLayer .drag-ghost.chain-starter.is-held .card-front {
  box-shadow:inset 0 0 0 1px #eee0a7,0 1px 0 #dcc583,0 2px 0 #a9b582,0 11px 20px #2b564c38,0 22px 32px #2b564c1f;
}
#app .drag-card.selected { outline-color:#438f80; }
#app .chain-slot.collecting { filter:drop-shadow(0 0 6px #8cc5a554); }
.primary-button,.home-play,.home-secondary button,.round-nav,
#app .action-button,.settings-row {
  transition:transform .18s var(--cw-ease-settle),box-shadow .22s ease,background-color .22s ease;
}
.toast { transition:opacity .24s ease,transform .34s var(--cw-ease-settle); }
.modal { transition:opacity .22s ease,transform .32s var(--cw-ease-settle); }
.exit-level-modal { max-width:380px; }
.exit-level-modal .primary-button { width:100%; margin-top:24px; }
.exit-level-modal #exitLevelConfirm { min-height:44px; padding:8px 24px; font-size:14px; }
.exit-level-modal .complete-badge svg { display:block; }
@media(max-width:360px) {
  #app .card-front .card-label,#cardDragLayer .card-front .card-label { font-weight:650; letter-spacing:-.015em; }
}
@media(prefers-reduced-motion:reduce) {
  #cardDragLayer .drag-ghost .card-front,.primary-button,.home-play,.home-secondary button,
  .round-nav,#app .action-button,.settings-row,.toast,.modal { transition:none; }
}