/* =====================================================================
   panels.css — promo and settings sheets, entitlement affordances.

   These two screens hold flowing, variable-length content, so they cannot sit
   on a fixed painted parchment the way Memory and My Life do. They use the
   garden world as a backdrop and a scrollable parchment sheet on top, built
   from the same cream/gold vocabulary as the library cards.
===================================================================== */

/* Form controls do not inherit the page font by default, and the codebase used
   `font: <weight> <size> inherit` to fix that — which is INVALID (`inherit` is
   not a family name inside the shorthand), so the whole declaration was
   dropped and every button/textarea silently fell back to 13.33px Arial, or
   monospace for textareas. Those shorthands are now longhands; this reset is
   the safety net so a future one cannot regress typography again. */
button,input,textarea,select{font-family:inherit}

/* backdrop continuation behind the letterboxed stage (matches floramenta.css) */
body[data-screen="promo"]::before,
body[data-screen="settings"]::before{background-image:url("../art/floramenta/v2/screen-session.png")}

.sheet-screen{position:relative;overflow-y:auto;background:linear-gradient(#173d2b66,#173d2baa),url("../art/floramenta/v2/screen-session.png") center/cover;background-attachment:local}
.sheet-screen .sheet{
  margin:4px 14px 26px;padding:18px 17px 22px;
  border:3px solid #d9aa4c;border-radius:26px;
  background:#fff8dff7;
  box-shadow:inset 0 2px #fff,0 7px 0 #8d6238,0 15px 26px #19372566
}
.sheet-screen h2{margin:2px 0 12px;font:700 25px/1.15 Georgia;color:#5b402b;text-align:center}
.sheet-lead{margin:0 0 16px;color:#6a563d;font-weight:700;line-height:1.4;text-align:center}
.sheet-note{margin:14px 0 0;padding:11px 13px;border-radius:14px;background:#e8f4dcf0;border:2px solid #a9c98c;color:#2c5f3e;font-weight:800;text-align:center;line-height:1.35}
.sheet .primary{display:block;width:100%;height:60px;margin:18px auto 0;padding:0 18px 5px;border:0;border-radius:0;color:#fff;background:transparent url("../art/floramenta/v2/primary-button.png") center/100% 100% no-repeat;box-shadow:none;text-shadow:0 2px #285c34;font-size:17px}
.sheet .primary:active{transform:translateY(3px);box-shadow:none}

/* ---------- promo ---------- */
/* the reel is 1080x1920, so the frame keeps 9:16 and centres in the sheet */
.promo-video{position:relative;width:152px;height:270px;margin:0 auto 16px;border:3px solid #e0bd72;border-radius:18px;overflow:hidden;background:#12291d}
.promo-video video{display:block;width:100%;height:100%;object-fit:cover}
.promo-play{position:absolute;left:50%;top:50%;width:64px;height:64px;translate:-50% -50%;display:grid;place-items:center;border:3px solid #fff5d0;border-radius:50%;color:#fff;background:#2f7a4ee8;box-shadow:0 4px 0 #1c4c2f,0 8px 18px #0006;font-size:24px;padding-left:5px;transition:opacity .2s}
.promo-play.playing{opacity:0}
.promo-video:hover .promo-play{opacity:1}

.benefit{margin:0 0 11px;padding:12px 14px;border:2px solid #e4c886;border-radius:16px;background:#fffdf2;box-shadow:0 3px 0 #b68b4e33}
.benefit b{display:block;margin-bottom:4px;color:#8b552d;font-size:16px}
.benefit p{margin:0;color:#5b5344;line-height:1.38;font-size:14px}

/* ---------- settings ---------- */
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;padding:12px 14px;border:2px solid #e4c886;border-radius:16px;background:#fffdf2}
.set-row b,.set-block>b{display:block;color:#8b552d;font-size:16px}
.set-row small,.set-block small{display:block;margin-top:3px;color:#7d7264;font-size:12.5px;line-height:1.3}
.set-block{margin:0 0 12px;padding:12px 14px;border:2px solid #e4c886;border-radius:16px;background:#fffdf2}
.set-value{margin:6px 0 9px;color:#4f493b;font-weight:800;line-height:1.35}
.muted-note{display:block;margin-top:2px;color:#8a7b66;font-weight:700;font-size:12.5px}
.set-actions{display:flex;gap:9px;margin:8px 0 6px}
.set-actions .secondary{flex:1;min-width:0;padding:11px 8px;font-size:14px}
.secondary.wide{display:block;width:100%;margin:8px 0 6px;padding:12px}
.secondary:disabled{opacity:.5}
/* paid action a free account may still tap — it explains itself in a dialog */
.secondary.locked{color:#6d6350;background:#f2eee1;border-color:#cfc6ae}
.secondary.locked::after{content:"🔒";margin-left:6px;font-size:14px}

.switch{position:relative;flex:0 0 62px;width:62px;height:34px;border:2px solid #c9a563;border-radius:999px;background:#e6ddc6;box-shadow:inset 0 2px 4px #7b5d3433;transition:background .18s}
.switch i{position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:linear-gradient(#fffdf3,#e2d6b6);box-shadow:0 2px 0 #9a7b42,0 3px 6px #0003;transition:translate .18s cubic-bezier(.34,1.56,.64,1)}
.switch.on{background:linear-gradient(#6eae62,#3c8657);border-color:#2f6b45}
.switch.on i{translate:28px 0;background:linear-gradient(#fffef8,#eef7e2)}

.lang-options{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:9px}
.lang-option{display:flex;align-items:center;gap:7px;padding:10px 11px;border:2px solid #d7c9a4;border-radius:14px;background:#fffdf7;color:#5b4a33;font-family:inherit;font-weight:800;font-size:14px;text-align:left}
.lang-option span{font-size:17px;line-height:1}
.lang-option.selected{border-color:#3f8657;background:linear-gradient(#f2fbe8,#e0f0d2);color:#25563a;box-shadow:inset 0 2px #fff,0 3px 0 #2f6b4544}

/* ---------- free-plan quota under the journal editors ---------- */
.quota-line{margin:0 0 8px;padding:6px 11px;border:2px solid #d7bc7e;border-radius:12px;background:#fff3d6e8;color:#7a5a2c;font-weight:800;font-size:13px;text-align:center}
.quota-line.spent{border-color:#dd9a86;background:#ffe6dce8;color:#9c4a34}

/* ---------- dialog fitting ----------
   modal-panel.png was measured rather than guessed: its cream interior starts
   at 13–17% from the left, 15–18% from the right and leaves 23% of the height
   to the bottom peony. The old flat 58px/75px padding therefore let long
   headings and the button row sit on the painted gold rim.

   The frame is stretched to the box with background-size:100% 100%, so the
   safe insets are PROPORTIONAL while padding-top/bottom in px are absolute —
   a dialog that grows with its content can never satisfy both. Every popup
   therefore gets ONE fixed size, the way casual games do it: the corner
   peonies land in the same place every time, and short copy simply leaves
   parchment showing instead of shifting the artwork.

   Content starts below the top flowers (they reach ~28% down and ~33% in),
   and ends above the bottom peony (~23% of the height). */
#app dialog{width:min(calc(100% - 28px),420px);height:min(700px,84dvh);padding:208px 18% 158px}
/* #dialogContent carries tabindex="-1" so showModal() does not park a focus
   ring on the close button; the ring itself must never be drawn on it. */
#app #dialogContent:focus,#app #dialogContent:focus-visible{outline:none}
#app #dialogContent{height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c98a3d transparent}
#app dialog .dialog-content h2{margin-top:0;font-size:22px;overflow-wrap:break-word}

/* Two actions stacked, primary on top: side-by-side buttons cannot hold a
   translated label like “Оформити підписку” inside the narrowed column. */
#app dialog .choice-row{flex-direction:column-reverse;gap:8px}
#app dialog .choice-row button{width:100%;flex:none;font-size:15px}
#app dialog .choice-row .primary.compact{height:52px;padding:0 12px 4px}

/* The frame is a fixed size, so long copy can scroll — but the actions must
   never scroll out of reach. The buttons are opaque, so they need no fade
   behind them; sticky alone is enough. */
#app dialog .dialog-content>.sys-actions{position:sticky;bottom:0;z-index:2}
#app dialog .dialog-content h2{margin-bottom:12px}
#app dialog .dialog-content>p{font-size:14.5px;line-height:1.38}

/* ---------- upsell popup stat table ---------- */
.stat-rows{margin:0 0 14px;padding:0}
.stat-rows>div{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid #e0cfa4}
.stat-rows>div:last-child{border-bottom:0}
.stat-rows dt{margin:0;color:#7d6a4f;font-weight:700;font-size:13px;line-height:1.25}
.stat-rows dd{margin:0;color:#4e3825;font-weight:900;font-size:14px;text-align:right;line-height:1.2}
.stat-rows dd.strong{color:#2f7a4e;font:900 24px/1 Georgia}

/* ================= accessible system dialog =================
   The audience is people with reduced vision and reduced fine motor control,
   so this family follows large-target guidance instead of the decorative
   scale used by the in-world popups:

     · body copy 19px / 1.55, headings 27px
     · every action 64px tall, full width, 14px apart
     · ONE action per row — no side-by-side targets to mis-tap
     · close control 52x52 with a visible ring
     · text on cream at ~13:1 contrast (well past WCAG AAA)

   The painted floral frame is deliberately dropped here: its usable interior
   measures ~269x360px, which cannot hold any of the above. In-world moments
   (day finished, time to rest) keep the frame — see js/floramenta.js. */
/* fit-content, not auto: the UA gives a modal <dialog> top:0 AND bottom:0, so
   `height:auto` is over-constrained and stretches to fill (then clips at
   max-height) instead of hugging its content. fit-content is a definite size,
   which also lets `margin:auto` centre the panel vertically. */
#app dialog.sys{
  width:min(calc(100% - 20px),424px);height:fit-content;max-height:88dvh;
  padding:0;border:0;border-radius:28px;background:none;box-shadow:none
}
#app dialog.sys #dialogContent{
  height:auto;max-height:88dvh;padding:30px 22px 24px;
  border:3px solid #cf9f42;border-radius:28px;
  background:linear-gradient(#fffdf6,#f6f2e2);
  box-shadow:inset 0 3px #fff,0 20px 54px #0f271b7a
}
#app dialog.sys .dialog-close{
  position:absolute;z-index:3;right:14px;top:14px;width:48px;height:48px;
  display:grid;place-items:center;float:none;
  color:#4a3a27;background:#f1e7cd;background-image:none;
  border:2px solid #cf9f42;border-radius:50%;
  box-shadow:0 3px 0 #b08a45;font:900 22px/1 system-ui,sans-serif
}
#app dialog.sys .dialog-close:active{transform:translateY(2px);box-shadow:0 1px 0 #b08a45}
/* symmetric side padding, not just on the right: the heading is centred, so
   clearing the close button on one side only would push the title off-centre */
#app dialog.sys .dialog-content h2{
  margin:0 0 16px;padding:0 46px;
  font:700 26px/1.22 Georgia;color:#3a2e1d;text-align:center
}
#app dialog.sys #dialogContent:focus{outline:none}
#app dialog.sys .dialog-content>p{margin:0 0 18px;font-size:19px;line-height:1.55;color:#3a3226}

/* ---------- accessible actions, used in BOTH dialog families ----------
   The painted `primary-button.png` pill is 1693x929; stretched to a 282x50
   dialog button it squashes to 5.6:1 and its label runs off the visible
   plate. Decoration therefore stays with the frame and controls become plain
   accessible buttons: 64px tall, full width, one per row, 19px bold. */
#app dialog .sys-actions{display:flex;flex-direction:column;gap:14px;margin-top:22px}
#app dialog .sys-btn{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:64px;padding:12px 18px;margin:0;
  border:0;border-radius:18px;
  font-family:inherit;font-weight:800;font-size:19px;line-height:1.25;
  text-align:center;cursor:pointer
}
#app dialog .sys-btn.primary{
  color:#fff;background:linear-gradient(#6eae62,#3c8657);
  box-shadow:0 5px 0 #23613e,0 9px 20px #173c2c4d;text-shadow:0 1px 2px #1c4a2f
}
#app dialog .sys-btn.primary:active{transform:translateY(3px);box-shadow:0 2px 0 #23613e}
#app dialog .sys-btn.ghost{color:#33452f;background:#fffdf7;border:3px solid #a9c39c;box-shadow:0 4px 0 #a9c39c80}
#app dialog .sys-btn.ghost:active{transform:translateY(2px);box-shadow:0 2px 0 #a9c39c80}
#app dialog .sys-btn:focus-visible,
#app dialog .dialog-close:focus-visible{outline:4px solid #2f6fd0;outline-offset:3px}
/* the floral frame is narrower inside, so its labels get one step down */
#app dialog:not(.sys) .sys-btn{font-size:17px;min-height:60px}

/* label above value: at 19px a side-by-side row squeezes the very number the
   popup exists to communicate */
#app dialog.sys .sys-stats{display:flex;flex-direction:column;gap:10px;margin:0 0 18px}
#app dialog.sys .sys-stat{padding:12px 16px;border:2px solid #e0cba0;border-radius:16px;background:#fffdf4}
#app dialog.sys .sys-stat span{display:block;color:#6b5e4c;font-size:15px;font-weight:700;line-height:1.3}
#app dialog.sys .sys-stat b{display:block;margin-top:3px;color:#33291c;font-size:22px;line-height:1.2}
#app dialog.sys .sys-stat.hero{border-color:#7cb07f;background:linear-gradient(#f3fbea,#e6f4d8)}
#app dialog.sys .sys-stat.hero b{color:#256444;font:900 34px/1 Georgia}


/* session-close checklist: one actionable line per row, not a paragraph */
#app dialog.sys .care-list{margin:0 0 4px;padding:0;list-style:none}
#app dialog.sys .care-list li{
  position:relative;margin:0 0 11px;padding:11px 14px 11px 44px;
  border:2px solid #e0cba0;border-radius:14px;background:#fffdf4;
  color:#3a3226;font-size:17px;line-height:1.4
}
#app dialog.sys .care-list li::before{
  content:"✓";position:absolute;left:14px;top:11px;
  color:#3f8b5c;font-weight:900;font-size:18px
}

#app dialog.sys .sys-spinner{
  width:40px;height:40px;margin:4px auto 10px;
  border:4px solid #ddd2b0;border-top-color:#3c8657;border-radius:50%;
  animation:sysSpin .9s linear infinite
}
@keyframes sysSpin{to{transform:rotate(1turn)}}
@media(prefers-reduced-motion:reduce){#app dialog.sys .sys-spinner{animation:none}}

/* ---------- settings & promo: same readability floor as the dialogs ---------- */
.sheet-screen h2{font-size:27px}
.sheet-lead{font-size:16px}
.set-row b,.set-block>b{font-size:19px}
.set-row small,.set-block small{font-size:14.5px;line-height:1.35}
.set-value{font-size:18px}
.muted-note{font-size:14px}
.set-block .secondary,.set-actions .secondary{min-height:58px;font-size:16px;border-radius:16px}
.set-actions .secondary{padding:10px 8px}
.lang-option{min-height:58px;font-size:16px}
.lang-option span{font-size:15px}
.benefit b{font-size:17px}
.benefit p{font-size:15.5px;line-height:1.42}
.quota-line{font-size:15px;padding:8px 12px}
.switch{flex:0 0 70px;width:70px;height:38px}
.switch i{width:28px;height:28px}
.switch.on i{translate:32px 0}
.sheet-screen button:focus-visible,.sheet-screen .switch:focus-visible{outline:4px solid #2f6fd0;outline-offset:3px}

/* ---------- home: store + settings stacked below the wordmark ----------
   FLORA MENTA is painted into the lobby video across x≈138–322 of the 440px
   stage, y≈20–110. Neither side of that band is wide enough for a labelled
   pill in every language (German "Einstellungen" alone needs ~120px), so the
   pair sits just below it instead of being shrunk into illegibility.
   Top-right is not an option either: the dev Layout Editor toggle owns it
   whenever the local server is running. */
#home #storeBtn.store-btn,
#home #settingsBtn.settings-btn{
  z-index:6!important;display:flex!important;align-items:center;justify-content:center;
  margin:0;border:0;font-family:Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:900;line-height:1
}
#home .home-menu-actions{display:contents}
#home #devBtn.dev-btn{
  position:absolute;z-index:6;inset:16px auto auto 14px;width:auto;height:30px;padding:0 10px;
  border:1px solid #ffffff66;border-radius:9px;color:#fff;background:#173d2bb8;
  opacity:.72;font:900 10px/1 system-ui,sans-serif;letter-spacing:.08em
}
#home #storeBtn.store-btn{
  position:absolute!important;inset:124px 64px auto!important;
  width:auto!important;height:81px!important;min-height:81px!important;
  padding:0 30px 5px!important;border:0;border-radius:0;
  color:#fff;background:transparent url("../art/floramenta/v2/home-plan-button.png") center/100% 100% no-repeat;
  box-shadow:none;font-size:15.5px;text-shadow:0 2px #176055,0 0 6px #07594b66;
  animation:homePlanBounce .9s ease-in-out infinite;
}
#home #storeBtn.store-btn.hidden{display:none!important;visibility:hidden!important}
#home #settingsBtn.settings-btn{
  position:absolute!important;inset:14px 14px auto auto!important;
  width:58px!important;height:58px!important;min-height:58px!important;
  padding:0!important;border:0;border-radius:0;
  color:transparent;background:transparent url("../art/floramenta/v2/home-settings-button.png") center/contain no-repeat;
  box-shadow:none;font-size:0;text-shadow:none
}
#home #storeBtn.store-btn:active,#home #settingsBtn.settings-btn:active{transform:translateY(2px);filter:brightness(.94)}
@keyframes homePlanBounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}
#home #storeBtn.store-btn span{display:none}
#home #settingsBtn.settings-btn span{display:none}
#home #settingsBtn.settings-btn b{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* Premium tools are independent lobby landmarks, not entries hidden inside
   Settings. Their generated art carries the state; the caption repeats it in
   words so a padlock is never the only explanation. */
#home .home-feature-actions{
  position:absolute;z-index:5;left:22px;right:22px;bottom:278px;
  display:flex;justify-content:space-between;align-items:center;pointer-events:none
}
#home .home-feature{
  position:relative;pointer-events:auto;width:62px;height:62px;min-height:62px;padding:0;
  display:block;border:0;border-radius:50%;background:transparent;color:#3d2d20;
  box-shadow:0 4px 7px #17331f55;
  font-family:Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer;
  transform-origin:50% 72%;animation:homeFeatureIdle 3s ease-in-out infinite
}
#home #gamesFeatureBtn{animation-delay:1.5s}
#home .home-feature:active{animation-play-state:paused;transform:translateY(2px)}
#home .home-feature img{
  display:block;width:100%;height:100%;margin:0;border-radius:50%;object-fit:cover
}
#home .home-feature-copy{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)
}
.feature-lock{
  display:none;position:absolute;right:-4px;bottom:-3px;width:25px;height:25px;
  place-items:center;border:2px solid #8b5c17;border-radius:50%;
  color:#5b3c12;background:#fff2bb;box-shadow:0 2px 5px #17331f55
}
.locked>.feature-lock,.home-feature.locked>.feature-lock{display:grid}
.feature-lock svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
#home .home-feature:active{transform:translateY(2px);filter:brightness(.94);box-shadow:0 2px 4px #17331f55}
@keyframes homeFeatureIdle{
  0%,7%,14%,21%,100%{transform:rotate(0deg) translateY(0)}
  4%{transform:rotate(-4deg) translateY(-1px)}
  10%{transform:rotate(4deg) translateY(-1px)}
  17%{transform:rotate(-2deg) translateY(0)}
}
html[data-reduce-motion="1"] #home .home-feature{animation:none}
@media (prefers-reduced-motion:reduce){
  #home .home-feature{animation:none}
}

@media (max-height:760px){
  #home .home-feature-actions{bottom:252px}
  #home .home-feature{width:54px;height:54px;min-height:54px}
}
/* dev-only; parked on the right so it does not sit on Zora's face */
#home #devReset.dev-reset-btn{top:228px!important;left:auto!important;right:12px!important}

.dev-game-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.dev-game-grid button,.dev-tools button{
  min-height:48px;padding:9px 10px;border:2px solid var(--onb-line);border-radius:13px;
  color:var(--onb-ink);background:#fff;font:800 13px/1.2 Nunito,system-ui,sans-serif
}
.dev-game-grid button:active{border-color:var(--onb-blue);background:#eef6ff}
.dev-tools{display:grid;gap:9px;margin-top:16px;padding-top:14px;border-top:1px solid var(--onb-line)}
.dev-tools button:first-child{color:#9b3f32;border-color:#efd1ca;background:#fff5f2}
.dev-tools button:last-child{color:#fff;border-color:#9b3f32;background:#9b3f32}
.dev-tool-status{min-height:20px;margin:10px 0 0;color:var(--onb-green-deep);font-weight:800;text-align:center}

/* Feature explanations deliberately borrow the onboarding language: one clear
   illustration, one promise, one decision. */
#app dialog.sys .feature-dialog-art{
  position:relative;display:block;width:116px;height:116px;margin:0 auto 12px
}
#app dialog.sys .feature-dialog-icon{
  display:block;width:116px;height:116px;margin:0;border-radius:50%;
  object-fit:cover;box-shadow:0 8px 20px #173d2b38
}
#app dialog.sys .feature-dialog-art .feature-lock{right:-2px;bottom:-1px;width:32px;height:32px}
#app dialog.sys .feature-dialog-art .feature-lock svg{width:19px;height:19px}
#app dialog.sys .feature-question{font-weight:900;text-align:center}
#app dialog.sys .feature-health-note,
#app dialog.sys .feature-lock-note{
  margin:14px 0;padding:14px 15px;border-radius:16px;font-weight:750;line-height:1.45
}
#app dialog.sys .feature-health-note{border:2px solid #e4b75d;background:#fff7df;color:#5b4427}
#app dialog.sys .feature-lock-note{border:2px solid #b9d8c5;background:#eef8f1;color:#174b31}
.game-card .game-level{
  display:inline-block;margin-top:6px;padding:4px 8px;border-radius:999px;
  background:#e7f2df;color:#285c3e;font-size:12px;font-weight:900
}


/* =====================================================================
   THE FLOATING BACK MEDALLION
   ---------------------------------------------------------------------
   `.category-backbar` / `.memory-actions` drop the topbar's background but
   inherited its `box-shadow: 0 3px 15px rgba(35,75,51,.125)`. A shadow on a
   transparent 51x55 box paints a rectangle — which is the "beige square" behind
   the round button: a soft dark rect over the cream parchment.

   The bar is also `position: sticky`, so the parchment scrolls underneath it and
   the medallion ended up sitting on top of the first switch — two controls in
   one place. The medallion is designed to float (its drop shadow is baked into
   the PNG), so it keeps floating; it just gets an opaque disc behind it, sized
   to itself, so whatever passes under is masked instead of tangled.
===================================================================== */
.category-backbar, #calendar .memory-actions, .route-backbar { box-shadow: none !important; }

/* The opaque disc is a SECOND BACKGROUND LAYER under the medallion, not a
   pseudo-element: a negative-z-index child paints after the parent's background
   but before its content, so it covered the green face of the button. */
.category-backbar .back,
.route-backbar .back,
#calendar .memory-actions .back {
  background-image:
    url("../art/floramenta/v2/button-back-v2.png"),
    radial-gradient(circle at 50% 50%, #fff8df 0 44%, rgba(255,248,223,0) 46%);
  background-position: center, center;
  background-size: 72px auto, 100% 100%;
  background-repeat: no-repeat, no-repeat;
}

/* =====================================================================
   ONBOARDING VISUAL LANGUAGE — subscription result + subscription screen
   These are continuations of the questionnaire, so they use the same clean
   white surface, flat blue/green accents and typography as onboarding.
===================================================================== */
#app dialog.sys::backdrop{
  background:#0b2f3fb8;
  backdrop-filter:blur(7px)
}
#app dialog.sys #dialogContent{
  border:2px solid var(--onb-line);
  border-radius:24px;
  background:var(--onb-white);
  box-shadow:0 24px 70px #05192a66
}
#app dialog.sys .dialog-close{
  color:#fff;
  background:linear-gradient(135deg,var(--onb-green),var(--onb-blue));
  border:0;
  box-shadow:0 6px 16px #12b98138;
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Nunito,sans-serif
}
#app dialog.sys .dialog-content{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Nunito,sans-serif;
  color:var(--onb-ink)
}
#app dialog.sys .dialog-content h2{
  color:var(--onb-ink);
  font-family:inherit;
  font-weight:800
}
#app dialog.sys .dialog-content>p{color:var(--onb-muted)}
#app dialog.sys .sys-stat{
  border-color:var(--onb-line);
  background:var(--onb-white)
}
#app dialog.sys .sys-stat span{color:var(--onb-muted)}
#app dialog.sys .sys-stat b{color:var(--onb-ink)}
#app dialog.sys .sys-stat.hero{
  border-color:var(--onb-blue);
  background:#eef6ff
}
#app dialog.sys .sys-stat.hero b{
  color:var(--onb-green-deep);
  font-family:inherit
}
#app dialog.sys .sys-btn.primary{
  color:#fff;
  background:linear-gradient(135deg,var(--onb-green),var(--onb-blue));
  box-shadow:0 8px 20px #12b98140;
  text-shadow:none
}
#app dialog.sys .sys-btn.ghost{
  color:var(--onb-ink);
  background:var(--onb-white);
  border:2px solid var(--onb-line);
  box-shadow:none
}

body[data-screen="promo"]::before{
  background-image:linear-gradient(160deg,#0b3b2c,#0c2f4a)
}
#promo.sheet-screen{
  background:var(--onb-white);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Nunito,sans-serif
}
#promo.sheet-screen .sheet{
  margin:0;
  padding:8px 24px 32px;
  border:0;
  border-radius:0;
  background:var(--onb-white);
  box-shadow:none
}
#promo.sheet-screen h2{
  color:var(--onb-ink);
  font-family:inherit;
  font-weight:800
}
#promo .sheet-lead{color:var(--onb-muted)}
#promo .promo-video{
  border-color:var(--onb-blue);
  box-shadow:0 8px 20px #2f80ed26
}
#promo .promo-play{
  border-color:#fff;
  background:linear-gradient(135deg,var(--onb-green),var(--onb-blue));
  box-shadow:0 6px 16px #0b3b2c55
}
#promo .benefit{
  border-color:var(--onb-line);
  border-radius:16px;
  background:var(--onb-white);
  box-shadow:none
}
#promo .benefit b{color:var(--onb-blue-deep)}
#promo .benefit p{color:var(--onb-muted)}
#promo .category-backbar .back{
  color:#fff;
  background:linear-gradient(135deg,var(--onb-green),var(--onb-blue));
  border-radius:14px;
  box-shadow:0 6px 16px #12b98138;
  font-size:34px
}
#promo .sheet .primary{
  height:64px;
  padding:0 20px;
  border-radius:16px;
  background:linear-gradient(135deg,var(--onb-green),var(--onb-blue));
  box-shadow:0 8px 20px #12b98140;
  text-shadow:none;
  font-size:18px
}

/* ---------- settings: onboarding visual language ---------- */
body[data-screen="settings"]::before{
  background-image:linear-gradient(160deg,#0b3b2c,#0c2f4a)
}
#settings.sheet-screen{
  color:var(--onb-ink);
  background:var(--onb-bg);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Nunito,sans-serif
}
#settings .category-backbar{
  position:sticky;
  min-height:76px;
  padding:14px 20px 6px;
  background:var(--onb-white);
  box-shadow:none;
  border-bottom:1px solid var(--onb-line)
}
#settings .category-backbar .back{
  width:56px;
  height:56px;
  border-radius:14px;
  color:#fff;
  background:linear-gradient(135deg,var(--onb-green),var(--onb-blue));
  box-shadow:0 6px 16px #12b98138;
  font-size:34px
}
#settings.sheet-screen .sheet{
  margin:0;
  padding:12px 24px 40px;
  border:0;
  border-radius:0;
  background:var(--onb-bg);
  box-shadow:none
}
#settings.sheet-screen h2{
  margin:4px 0 20px;
  color:var(--onb-ink);
  font-family:inherit;
  font-size:28px;
  font-weight:800;
  text-align:left
}
#settings .set-block,
#settings > .set-row{
  margin:0 0 14px;
  padding:18px 19px;
  border:2px solid var(--onb-line);
  border-radius:16px;
  background:var(--onb-white);
  box-shadow:none
}
#settings .set-row{
  border-color:var(--onb-line);
  background:var(--onb-white)
}
#settings .set-block > b,
#settings .set-row b{
  color:var(--onb-ink);
  font-size:18px;
  font-weight:800
}
#settings .set-block small,
#settings .set-row small{
  color:var(--onb-muted);
  font-size:14px;
  font-weight:600
}
#settings .set-value{color:var(--onb-ink)}
#settings .muted-note{color:var(--onb-muted)}
#settings .switch{
  border-color:var(--onb-line);
  background:#dce5eb;
  box-shadow:none
}
#settings .switch i{
  background:#fff;
  box-shadow:0 2px 7px #2340522b
}
#settings .switch.on{
  border-color:var(--onb-green);
  background:linear-gradient(135deg,var(--onb-green),var(--onb-blue))
}
#settings .audio-settings{padding:0;overflow:hidden}
#settings .audio-settings .set-row{
  margin:0;
  padding:18px 19px 15px;
  border:0;
  border-radius:0;
  border-bottom:1px solid var(--onb-line)
}
#settings .volume-control{
  display:block;
  padding:15px 19px 17px
}
#settings .volume-control + .volume-control{border-top:1px solid var(--onb-line)}
#settings .volume-control > span{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:11px
}
#settings .volume-control b{
  color:var(--onb-ink);
  font-size:16px;
  font-weight:750
}
#settings .volume-control output{
  min-width:48px;
  padding:5px 8px;
  border-radius:9px;
  color:var(--onb-blue-deep);
  background:#eef6ff;
  font-weight:800;
  text-align:center
}
#settings .volume-control input[type="range"]{
  width:100%;
  height:24px;
  margin:0;
  appearance:none;
  background:transparent;
  cursor:pointer
}
#settings .volume-control input[type="range"]::-webkit-slider-runnable-track{
  height:8px;
  border-radius:8px;
  background:linear-gradient(90deg,var(--onb-green),var(--onb-blue)) 0/var(--value,50%) 100% no-repeat,var(--onb-line)
}
#settings .volume-control input[type="range"]::-webkit-slider-thumb{
  width:26px;
  height:26px;
  margin-top:-9px;
  appearance:none;
  border:4px solid #fff;
  border-radius:50%;
  background:var(--onb-blue);
  box-shadow:0 3px 10px #1c63c455
}
#settings .volume-control input[type="range"]::-moz-range-track{
  height:8px;
  border-radius:8px;
  background:var(--onb-line)
}
#settings .volume-control input[type="range"]::-moz-range-progress{
  height:8px;
  border-radius:8px;
  background:linear-gradient(90deg,var(--onb-green),var(--onb-blue))
}
#settings .volume-control input[type="range"]::-moz-range-thumb{
  width:20px;
  height:20px;
  border:4px solid #fff;
  border-radius:50%;
  background:var(--onb-blue);
  box-shadow:0 3px 10px #1c63c455
}
#settings .lang-options{gap:10px}
#settings .lang-option,
#settings .a11y-sizes button{
  border-color:var(--onb-line);
  background:var(--onb-white);
  color:var(--onb-ink);
  box-shadow:none
}
#settings .lang-option.selected,
#settings .a11y-sizes button[aria-checked="true"]{
  border-color:var(--onb-blue);
  color:var(--onb-blue-deep);
  background:#eef6ff;
  box-shadow:none
}
#settings .secondary{
  border:2px solid var(--onb-line);
  border-radius:16px;
  color:var(--onb-ink);
  background:var(--onb-white);
  box-shadow:none
}
#settings .secondary:not(.locked):active{
  border-color:var(--onb-blue);
  background:#eef6ff;
  transform:translateY(1px)
}
#settings .secondary.locked{border-color:var(--onb-line);background:#f2f5f7;color:var(--onb-muted)}
#settings .set-sublabel{color:var(--onb-blue-deep)}
#settings button:focus-visible,
#settings input:focus-visible{outline:4px solid #2f80ed55;outline-offset:3px}

/* A dedicated shell toolbar owns all global puzzle controls. The iframe starts
   below it, so mini-scale.js receives the smaller viewport and contain-fits the
   imported game without any floating controls covering its board. */
#game.game-screen .gamebar{
  right:0!important;width:auto!important;height:calc(72px + env(safe-area-inset-top))!important;
  padding:calc(10px + env(safe-area-inset-top)) 10px 10px!important;
  display:flex!important;align-items:center;gap:8px;
  background:#f7fbf3f2!important;border-bottom:1px solid #d8e8d2;
  box-shadow:0 3px 15px #234b3320!important;backdrop-filter:blur(12px)!important;
  pointer-events:auto!important
}
#game.game-screen .gamebar #closeGame,
#game.game-screen .gamebar #gameHelp,
#game.game-screen .gamebar #gameUndo,
#game.game-screen .gamebar #gameRestart{
  flex:0 0 52px;width:52px!important;height:52px!important;margin:0!important;padding:0;
  border:0;border-radius:16px;color:var(--deep);background:#fffdf7;
  box-shadow:0 2px 8px #234b3329,inset 0 0 0 2px #d7e5d1;
  font:900 25px/1 Georgia,serif
}
#game.game-screen .gamebar #closeGame{font-family:system-ui,sans-serif;font-size:28px}
#game.game-screen .gamebar #gameHelp{font-size:23px}
#game.game-screen .gamebar #gameUndo:not(.hidden){margin-left:auto!important}
#game.game-screen .gamebar #gameUndo.hidden + #gameRestart:not(.hidden){margin-left:auto!important}
#game.game-screen .gamebar #levelBadge{
  display:block!important;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  padding:7px 13px;border:1px solid #d8e8d2;border-radius:999px;
  color:var(--deep);background:#fffdf7;font-size:15px;font-weight:900
}
#game.game-screen .gamebar button:active{transform:translateY(2px)}
#game.game-screen .gamebar button.hidden{display:none!important}
#game.game-screen #gameFrame{
  position:absolute;left:0;right:0;top:calc(72px + env(safe-area-inset-top));
  width:100%;height:calc(100dvh - 72px - env(safe-area-inset-top))
}