:root{
  /* DEFAULT palette - mirror of _shared/tokens.json; change both together, then re-audit */
  --cream:#FFF8E1;  --sun:#FFE44D;   --gold:#FFD700;
  --leaf:#4CAF50;   --leaf-dark:#2D8B4E; --leaf-deep:#1F6B40;
  --sky:#87CEEB;    --sky-dark:#2196F3;  --navy:#145A9E;
  --wood:#8B4513;   --wood-light:#DDC080;
  --berry:#FF6B6B;  --berry-dark:#CC3333;
  --ink:#333333;    --ink-soft:#666666;  --paper:#FFFFFF;
  --radius:18px;    --app-max:520px;
  --display:'Baloo 2','Arial Black',Arial,sans-serif;
  --body:'Nunito',Arial,'Helvetica Neue',sans-serif;
  --awn-stripe:#FFE069;
--awn-gap:#FFFFFF;
--awn-rail:#FBCB45;
--awn-edge:#E4B25A;
--awn-band:30px;
--awn-sw:26px;
--awn-shadow:0 5px 5px -4px rgba(122,86,28,.28);

--fs-max:1100px
}
.actions, .awning, .gtb-tab {
	display: flex
	}
*{box-sizing:border-box}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--cream)}
#app{max-width:var(--app-max);width:100%;margin:0 auto;padding:10px 12px 24px;position:relative;z-index:1}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.scene{display:none}
.scene.active{display:flex;flex-direction:column;gap:14px}
/* Wooden hanging-sign header (farm DNA) - replaces the market awning, which now lives in
   the scene as the market stall. The header is the one THEMEABLE chrome region. */
.awning{background:transparent;border:0;padding:14px 0 6px;text-align:center;position:relative}
.awning::before{content:"";position:absolute;top:0;left:0;right:0;height:15px;pointer-events:none;
  background:linear-gradient(#9A7448,#7C5A36) no-repeat,linear-gradient(#9A7448,#7C5A36) no-repeat;
  background-size:3px 15px,3px 15px;background-position:calc(50% - 66px) 0,calc(50% + 66px) 0}
.awning h1,.awning h2{
  font-family:var(--display);font-size:clamp(20px,5.6vw,28px);letter-spacing:.5px;
  color:#FCE08A;margin:0;display:inline-block;position:relative;
  padding:10px 28px;border-radius:16px;border:5px solid #4A2F1A;
  background:repeating-linear-gradient(0deg,rgba(74,47,26,.13) 0 1.5px,transparent 1.5px 13px),
    linear-gradient(180deg,#A86E38,#9A6534 58%,#895A30);
  box-shadow:inset 0 0 0 3px #C89A5E, inset 0 3px 8px rgba(255,255,255,.18), 0 6px 0 #3E2614;
  text-shadow:0 2px 0 #6E3F1E,1px 0 0 #6E3F1E,-1px 0 0 #6E3F1E,0 -1px 0 #6E3F1E}
.awning h1::before,.awning h2::before,.awning h1::after,.awning h2::after{
  content:"";position:absolute;top:8px;width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#EAD09A,#9A6534);box-shadow:0 0 0 1.5px #4A2F1A}
.awning h1::before,.awning h2::before{left:11px}
.awning h1::after,.awning h2::after{right:11px}
.btn{font-family:var(--display);font-size:18px;min-height:48px;padding:10px 16px;
  border:none;border-radius:var(--radius);background:var(--leaf-deep);color:var(--paper);
  box-shadow:0 5px 0 #14502F;cursor:pointer}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #14502F}
.btn-sky{background:var(--navy);box-shadow:0 5px 0 #0D3F70}
.btn-sky:active{box-shadow:0 1px 0 #0D3F70}
/* Secondary / cancel button: a warm sand fill + deeper sand shadow so it reads as a real,
   tappable button on the white modal card (was paper-on-paper, looked like plain text).
   Shared by the crop chooser Cancel and the For-parents Close. */
.btn-ghost{background:#E8DFBD;color:var(--ink);box-shadow:0 5px 0 #C9BB8C}
.btn-ghost:active{box-shadow:0 1px 0 #C9BB8C}
/* intro line above the level cards (centered; the "pick your level" instruction lives in the
   group's aria-label so it stays for AT without a visible heading - design-review house rule) */
.menu-blurb{text-align:center;font-size:17px;line-height:1.45;color:var(--ink);max-width:34ch;margin:6px auto 16px}
/* level-choosing cards: icon disc + name + age + description + best-stars (cashier-style, farm-themed) */
#modeCards{display:flex;flex-direction:column;gap:10px;margin:6px 0}
.mode-card{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--paper);
  border:3px solid #E8DFBD;border-radius:var(--radius);padding:12px 14px;box-shadow:0 5px 0 rgba(51,51,51,.12);cursor:pointer;min-height:48px}
.mode-card:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(51,51,51,.12)}
.mc-emoji-wrap{flex:none;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 -3px 0 rgba(51,51,51,.08)}
.mc-emoji-wrap .ic{width:32px;height:32px}
.mc-text{display:block;min-width:0}
.mc-name{display:block;font-family:var(--display);font-size:19px;color:var(--ink);line-height:1.1}
.mc-age{display:block;font-family:var(--display);font-size:14px;font-weight:700;color:var(--ink-soft);margin:1px 0 4px}
.mc-desc{display:block;font-size:13.5px;color:var(--ink-soft);line-height:1.3}
.mc-best{display:block;margin-top:4px}
.mc-best:empty{display:none}
.mc-best .mini-star{width:15px;height:15px;vertical-align:-2px}
.mode-learner{border-color:var(--sun)} .mode-learner .mc-emoji-wrap{background:var(--sun)} .mode-learner .ic{color:var(--leaf-deep)}
.mode-builder{border-color:var(--sky)} .mode-builder .mc-emoji-wrap{background:var(--sky)} .mode-builder .ic{color:var(--navy)}
.mode-entrepreneur{border-color:var(--leaf)} .mode-entrepreneur .mc-emoji-wrap{background:#C8E6C9} .mode-entrepreneur .ic{color:var(--leaf-deep)}
/* "Your Badges" shelf */
.badge-shelf{background:var(--paper);border-radius:var(--radius);padding:14px 14px 20px;box-shadow:0 5px 0 rgba(51,51,51,.12);margin-top:4px}
.badge-shelf h3{font-family:var(--display);font-size:18px;margin:0 0 8px;display:flex;align-items:center;gap:7px}
.badge-shelf h3 .ic{width:22px;height:22px;color:#D49A24}
.badge-row{display:flex;gap:12px 8px;flex-wrap:wrap;justify-content:center}
.badge{display:flex;flex-direction:column;align-items:center;gap:3px;width:74px;font-size:11px;color:var(--ink-soft);text-align:center;line-height:1.15}
.badge .b-icon{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#ECE4CC;border:3px solid #DCD2AE;opacity:.5}
.badge .b-icon .ic{width:30px;height:30px;color:#8A7F5E}
.badge.earned{color:var(--ink);font-weight:bold}
.badge.earned .b-icon{background:var(--sun);border-color:var(--gold);opacity:1}
.badge.earned .b-icon .ic{color:var(--leaf-deep)}
/* summary scene: centered, roomy paragraph spacing, italic coins, badge icons (not a text list) */
.summary{text-align:center}
.summary .sum-stars{margin:6px 0 16px}
.summary .sum-msg{font-size:17px;line-height:1.4;margin:16px 0}
.summary .sum-coins{font-size:15px;margin:16px 0}
.summary .sum-coins em{font-style:italic}
.summary .sum-new-badges{margin:18px 0 4px}
.summary .sum-nb-label{font-weight:bold;color:var(--leaf-deep);font-size:15px;margin:0 0 10px}
.summary .sum-new-badges .badge-row{margin:0}
@media (min-width:960px){ /* level cards side-by-side, disc-on-top (cashier 3-up menu) */
  #scene-menu #modeCards{flex-direction:row;gap:12px}
  #scene-menu .mode-card{flex-direction:column;text-align:center;align-items:center;flex:1}
  #scene-menu .mc-text{text-align:center}
}
.actions{display:flex;gap:10px}.actions .btn{flex:1}
.card{background:var(--paper);border-radius:var(--radius);padding:24px;text-align:center;
  font-family:var(--display);font-size:24px;min-height:96px;display:flex;align-items:center;justify-content:center}
.feedback{min-height:24px;font-weight:bold;color:var(--ink)}
.feedback.good{color:var(--leaf-deep)}
/* For-parents / info modal - CENTERED, the family standard. Never a bottom sheet: a
   bottom-anchored position:fixed overlay drifts off-screen inside an iframe. The
   `.sheet[hidden]` rule is REQUIRED - without it display:flex overrides the hidden attr
   and the modal lingers on the page. */
.menu-foot{text-align:center;margin-top:6px}
.linkish{background:none;border:0;color:var(--navy);font-size:14px;text-decoration:underline;
  cursor:pointer;min-height:44px;padding:6px 10px}
.sheet{position:fixed;inset:0;background:rgba(51,51,51,.55);display:flex;
  align-items:center;justify-content:center;padding:16px;z-index:80}
.sheet[hidden]{display:none}
.sheet-card{background:var(--paper);border-radius:var(--radius);padding:18px;max-width:440px;
  width:100%;max-height:86vh;overflow:auto;box-shadow:0 8px 0 rgba(51,51,51,.2)}
.sheet-card h2{font-family:var(--display);font-size:20px;margin:0 0 8px;text-align:center}
.sheet-card p{margin:8px 0;line-height:1.5}
.sheet-card .btn{margin-top:8px;width:100%}
/* crop chooser: a row of big art buttons so the planting choice is explicit + discoverable */
.crop-choices{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:6px 0 10px}
.crop-choice{display:flex;flex-direction:column;align-items:center;gap:3px;width:98px;min-height:132px;
  padding:8px 4px;border:3px solid #E8DFBD;border-radius:14px;background:var(--paper);
  box-shadow:0 4px 0 rgba(51,51,51,.12);cursor:pointer;font-family:var(--display);font-size:14px;color:var(--ink)}
.crop-choice:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(51,51,51,.12)}
.crop-choice[aria-pressed="true"]{border-color:var(--leaf-deep);background:#F1FAF1}
.crop-choice .plot-svg{width:62px;max-width:62px}
.crop-choice .cc-name{line-height:1.1}
.crop-choice .cc-aff{display:flex;align-items:center;justify-content:center;gap:3px;font-family:var(--body);font-size:10.5px;font-weight:normal;color:var(--ink-soft);line-height:1.15;margin-top:1px}
.crop-choice .cc-ico{display:inline-flex;flex:none}
:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ===== Harvest Hill: the field-and-sky tableau (signature element) ===== */
.farm-stage{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 5px 0 rgba(51,51,51,.12);background:linear-gradient(180deg,#A9743E,#7C4F28)}
.farm-banner{position:relative;width:100%;height:0;padding-bottom:58.9%;overflow:hidden;background:#CFEAF6}
.sky-layer{position:absolute;inset:0;z-index:0}
.sky-layer .sky-svg{width:100%;height:100%;display:block}
.sky-layer .sky-svg+.sky-svg{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
.sky-layer.resolving .sky-svg+.sky-svg{opacity:1}
.scene-layer{position:absolute;inset:0;z-index:0;pointer-events:none}
.scene-layer .scene-svg{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;display:block}
.farm-hud{display:flex;gap:8px;align-items:center;justify-content:space-between}
.hud-chips{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.hud-tools{display:flex;gap:8px;align-items:center;flex:none}
.icon-btn{width:40px;height:40px;border:0;border-radius:50%;background:var(--paper);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 3px 0 rgba(51,51,51,.12);padding:0}
.icon-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(51,51,51,.12)}
.icon-btn .ic{width:22px;height:22px}
.farm-hud .chip{font-family:var(--display);font-size:14px;background:var(--paper);border-radius:999px;padding:6px 12px;box-shadow:0 3px 0 rgba(51,51,51,.12);display:flex;align-items:center;gap:5px}
.farm-hud .coin-svg{width:20px;height:20px}
.field-layer{position:relative;z-index:1;padding:14px 10px 16px;display:grid;gap:8px;justify-content:center;grid-template-columns:repeat(2,minmax(0,1fr));max-width:400px;margin:0 auto}
.field-layer.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.plot{position:relative;border:0;background:transparent;padding:2px;cursor:default;border-radius:12px}
.plot.selectable{cursor:pointer}
.plot-svg{width:100%;max-width:148px;height:auto;display:block;margin:0 auto}
.plot.selectable:focus-visible,.plot.selectable:hover{outline:3px solid var(--navy);outline-offset:1px}
.plot-pick{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);font-family:var(--display);font-size:12px;color:#fff;background:rgba(51,51,51,.6);border-radius:9px;padding:2px 8px;pointer-events:none;white-space:nowrap}
.coach{display:flex;gap:10px;align-items:center;background:var(--paper);border-radius:16px;padding:10px 12px;box-shadow:0 4px 0 rgba(51,51,51,.10);margin-top:2px}
.coach .farmer-svg{width:52px;height:62px;flex:none}
.coach p{margin:0;font-size:15px;line-height:1.35;color:var(--ink)}
.cropbar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.coin-fly{position:absolute;z-index:5;width:26px;height:26px;pointer-events:none}
/* Forecast card (Builder+): one self-contained box - label inside, weighted weather vane on a
   sky strip. The most-likely state is full-opacity + swaying; the rest fade by probability. */
.forecast-card{background:var(--paper);border-radius:14px;padding:10px 12px;box-shadow:0 4px 0 rgba(51,51,51,.10)}
.forecast-card:empty{display:none}
.fc-head{font-family:var(--display);font-size:14px;color:var(--ink);margin-bottom:7px}
.fc-row{display:flex;align-items:flex-end;justify-content:space-around;gap:2px;background:#EAF4FB;border-radius:10px;padding:6px 8px}
.fc-ico{display:inline-flex;align-items:flex-end;filter:grayscale(.3)}
.fc-ico.fc-on{filter:none;animation:sway 3.6s ease-in-out infinite;transform-origin:bottom center;transform-box:fill-box}
/* Crop guide: each crop paired with the weather it likes - a persistent reference for the
   match-crops-to-forecast decision (2-up so it stays short on mobile, a tidy column on desktop). */
.crop-guide{background:var(--paper);border-radius:14px;padding:10px 12px;box-shadow:0 4px 0 rgba(51,51,51,.10)}
.crop-guide:empty{display:none}
.cg-head{font-family:var(--display);font-size:14px;color:var(--ink);margin-bottom:10px}
.cg-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cg-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;padding:8px 6px}
.cg-art{flex:none;width:58px}
.cg-art .plot-svg{width:58px;max-width:58px}
.cg-text{display:flex;flex-direction:column;align-items:center;line-height:1.2}
.cg-name{font-weight:bold;font-size:13px;color:var(--ink)}
.cg-aff{display:flex;align-items:center;justify-content:center;gap:4px;font-size:12px;color:var(--ink-soft);margin-top:1px}
.cg-aff .cg-ico{display:inline-flex;flex:none}
.nw-wrap{margin:14px auto 0;max-width:320px}
.nw-chart{width:100%;height:auto;background:var(--paper);border-radius:12px;box-shadow:0 3px 0 rgba(51,51,51,.10);padding:4px}
.nw-legend{display:flex;gap:18px;justify-content:center;font-size:13px;color:var(--ink-soft);margin-top:7px}
.nw-legend i{display:inline-block;width:18px;height:0;border-top:3px solid currentColor;vertical-align:middle;margin-right:5px}
.nw-legend .sw-you{color:#1F6B40}
.nw-legend .sw-ghost{color:#B5635E;border-top-style:dashed}
.tools-bar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.tools-bar:empty{display:none}
.tool-btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-size:14px;color:var(--ink);background:var(--paper);border:3px solid #e8dfbd;border-radius:14px;padding:7px 12px;min-height:48px;box-shadow:0 4px 0 rgba(51,51,51,.12);cursor:pointer}
.tool-btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(51,51,51,.12)}
.tool-btn[disabled]{opacity:.5;cursor:default}
.tool-btn.on{border-color:#3E6E92;background:#EAF4FB}
.tool-btn svg{flex:none}
.plot-badges{position:absolute;top:0;right:4px;display:flex;gap:2px;z-index:2;pointer-events:none}
.btn[disabled]{opacity:.5;cursor:default;transform:none}

@keyframes drift{from{transform:translateX(0)}to{transform:translateX(26px)}}
@keyframes driftBack{from{transform:translateX(0)}to{transform:translateX(-18px)}}
@keyframes rayspin{to{transform:rotate(360deg)}}
@keyframes rainfall{from{transform:translateY(-14px)}to{transform:translateY(14px)}}
@keyframes shimmer{0%,100%{transform:scaleX(1)}50%{transform:scaleX(1.012) translateY(-.4px)}}
@keyframes flash{0%,93%,100%{opacity:0}95%{opacity:.85}97%{opacity:.2}}
@keyframes sway{0%,100%{transform:rotate(-2.2deg)}50%{transform:rotate(2.2deg)}}
@keyframes breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.03)}}
@keyframes thrive{0%,100%{filter:drop-shadow(0 0 0 rgba(255,240,140,0))}50%{filter:drop-shadow(0 0 3px rgba(255,240,140,.85))}}
@keyframes pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes coinArc{to{transform:translate(var(--dx),var(--dy)) scale(.5);opacity:0}}
.cloud-back{animation:driftBack 26s ease-in-out infinite alternate;transform-box:fill-box}
.cloud-front{animation:drift 18s ease-in-out infinite alternate;transform-box:fill-box}
.rays{transform-origin:center;animation:rayspin 90s linear infinite;transform-box:fill-box}
.rain line{animation:rainfall .7s linear infinite}
.rain.heavy line{animation-duration:.45s}
.shimmer{animation:shimmer 4s ease-in-out infinite;transform-origin:bottom;transform-box:fill-box}
.bolt{animation:flash 6s linear infinite}
.crop-sway{animation:sway 4.5s ease-in-out infinite;transform-origin:bottom center;transform-box:fill-box}
.thrive-glow{animation:thrive 3.2s ease-in-out infinite}
.breathe{animation:breathe 3.6s ease-in-out infinite;transform-origin:bottom center;transform-box:fill-box}
@keyframes peck{0%,72%,100%{transform:rotate(0)}82%,92%{transform:rotate(18deg)}}
@keyframes flap{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.5)}}
.tree-sway{animation:sway 6.5s ease-in-out infinite;transform-origin:bottom center;transform-box:fill-box}
.hen-head{animation:peck 5s ease-in-out infinite;transform-origin:bottom center;transform-box:fill-box}
.bfly .wingL{animation:flap .4s ease-in-out infinite;transform-origin:right center;transform-box:fill-box}
.bfly .wingR{animation:flap .4s ease-in-out infinite;transform-origin:left center;transform-box:fill-box}
.plot-svg.pop{animation:pop .45s ease}
.coin-fly{animation:coinArc .7s ease forwards}
/* Desktop tiers - see the responsive-port skill. Tier 2 grid is per-game. */
/* MOBILE-SAFE GRIDS (learned from cashier): for any grid whose ITEMS render sized
   SVG/img art, use repeat(N,minmax(0,1fr)) NOT repeat(N,1fr) so tracks can shrink, and
   give the art `max-width:100%;height:auto` so it scales instead of forcing horizontal
   overflow on phones. For any draggable control use `touch-action:pan-y` (never `none`)
   so the page can still scroll vertically when a swipe starts on it; tap stays primary. */
/*@media (min-width:760px){ :root{ --app-max:740px; } }*/
/* Tier 2: reclaim landscape space. CSS-only reorder via grid-template-areas (DOM order
   unchanged, so focus/SR order + jsdom tests are intact). Focal farm-stage spans the left;
   coach + tools + action buttons stack on the right (garden pattern). A trailing 1fr row
   absorbs the stage's extra height so the right column stays snug at the top, not spread. */
@media (min-width:960px){
  :root{ --app-max:1100px; }
  #scene-game.active{
    display:grid;
    grid-template-columns: minmax(0,1.55fr) minmax(0,1fr);
    grid-template-rows: auto auto auto auto auto auto auto 1fr;
    grid-template-areas:
      "awning   awning"
      "status   status"
      "stage    coach"
      "stage    forecast"
      "stage    guide"
      "stage    tools"
      "stage    actions"
      "stage    .";
    column-gap:18px; row-gap:12px;
  }
  #scene-game > .awning{ grid-area:awning; }
  #scene-game > #hud{ grid-area:status; }
  #scene-game > .farm-stage{ grid-area:stage; align-self:stretch; }
  #scene-game > .coach{ grid-area:coach; margin-top:0; align-self:start; }
  #scene-game > #forecast{ grid-area:forecast; align-self:start; }
  #scene-game > #cropRef{ grid-area:guide; align-self:start; }
  #scene-game > #tools{ grid-area:tools; align-self:start; }
  #scene-game > #phaseArea{ grid-area:actions; align-self:start; }
}

/* ===== Full-screen toggle (self-contained; mirrors cashier's feature) ========
   A floating button (built by the script before </body>) toggles native
   fullscreen with a CSS-maximize fallback. In fullscreen the scenes stay
   centered and capped via --fs-max so gameplay does not stretch into dead space;
   anything outside .scene (e.g. the awning) bleeds the full width. */
.fs-btn{
  position:fixed; right:12px; bottom:12px; z-index:50;
  width:44px; height:44px; border:0; border-radius:50%;
  background:var(--paper,#fff); color:var(--ink); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(51,51,51,.28);
}
.fs-btn:active{ box-shadow:0 2px 8px rgba(51,51,51,.28); transform:translateY(1px); }
.fs-btn .ic{ width:22px; height:22px; display:block; }
@media (max-width:759px){ #app{ padding-bottom:72px; } }
body.maximized{ overflow:hidden; }
body.maximized #app{
  position:fixed; inset:0; max-width:none; margin:0; z-index:9999;
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch; background:var(--cream);
}
#app:fullscreen{ max-width:none; width:100vw; min-height:100vh; min-height:100dvh; margin:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; background:var(--cream); }
#app:-webkit-full-screen{ max-width:none; width:100vw; min-height:100vh; margin:0; overflow-y:auto; overflow-x:hidden; background:var(--cream); }

body.maximized .scene.active{ max-width:var(--fs-max); margin-left:auto; margin-right:auto; }
#app:fullscreen .scene.active{ max-width:var(--fs-max); margin-left:auto; margin-right:auto; }
#app:-webkit-full-screen .scene.active{ max-width:var(--fs-max); margin-left:auto; margin-right:auto; }
.awning {
	justify-content: center;
	margin: 0 -12px 12px;
	padding: 14px 10px 18px;
	background: repeating-linear-gradient(90deg, var(--sun) 0 34px, var(--paper) 34px 68px);
	border-bottom: 6px solid var(--gold);
	border-radius: 0 0 22px 22px;
	box-shadow: 0 4px 0 rgba(51,51,51,.1)
}
.awning h1 {
	color: var(--ink);
	border: 4px solid var(--wood);
	border-radius: 14px;
	padding: 6px 16px;
	box-shadow: 0 4px 0 var(--wood)
}
.awning h1 .ic {
	vertical-align: -.12em
}
:focus-visible {
outline:3px solid var(--navy);
outline-offset:2px
}
.awn-stripes {
background:repeating-linear-gradient(90deg, var(--awn-stripe) 0 var(--awn-sw), var(--awn-gap) var(--awn-sw) calc(var(--awn-sw)*2));
	background-attachment: fixed
}
#game-title-bar::before, .gtb-tab {
background:repeating-linear-gradient(90deg, var(--awn-stripe) 0 var(--awn-sw), var(--awn-gap) var(--awn-sw) calc(var(--awn-sw)*2));
	box-shadow: var(--awn-shadow)
}
#game-title-bar {
	margin: 0 0 16px;
	background: 0 0
}
#game-title-bar::before {
	content: "";
	display: block;
	height: var(--awn-band);
	background-attachment: fixed;
	border-top: 2px solid var(--awn-edge);
	border-bottom: 3px solid var(--awn-rail)
}
.gtb-tab {
--awn-overlap:26px;
--awn-fillet:12px;
	z-index: 1;
	width: 35vw;
	min-width: fit-content;
	max-width: 92vw;
margin:calc(var(--awn-overlap) * -1) auto 0;
	padding: 11px 18px 14px;
	background-attachment: fixed;
	border: none;
	border-bottom: 3px solid var(--awn-rail);
	border-radius: 0 0 22px 22px;
	justify-content: center
}
.gtb-tab::after, .gtb-tab::before {
	content: "";
	position: absolute;
	top: var(--awn-overlap);
	width: var(--awn-fillet);
	height: var(--awn-fillet)
}
.gtb-tab::before {
left:calc(var(--awn-fillet) * -1);
	background: radial-gradient(circle at bottom left, transparent var(--awn-fillet), var(--awn-rail) calc(var(--awn-fillet) + .5px))
}
.gtb-tab::after {
right:calc(var(--awn-fillet) * -1);
	background: radial-gradient(circle at bottom right, transparent var(--awn-fillet), var(--awn-rail) calc(var(--awn-fillet) + .5px))
}
#game-title-bar h1 {
    position: relative;
    border: 4px solid var(--wood);
    box-shadow: 0 3px 0 rgba(110,72,30,.22);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    border: 2px solid #e4b25a;
    border-radius: 16px;
    padding: 6px 18px;
}
@media (max-width:759px) {
#app {
	padding-bottom: 72px
}
}
#app .awning h1, #game-title-bar h1, .awning h1, .badge-shelf h3, .btn, .bubble li .i-price, .demo-line, .drawer h3, .hud .chip, .mc-age, .modal h2, .mode-card h2, .r-amt .r-value, .register .r-task, .role-tag, .sum-stat .s-num, .summary-card h2, .tray-total {
    font-family: var(--display);
}
body.maximized #app {
	position: fixed;
	inset: 0;
	max-width: none;
	margin: 0;
	z-index: 9999;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	background: var(--cream)
}
#app:fullscreen {
max-width:none;
width:100vw;
min-height:100vh;
min-height:100dvh;
margin:0;
overflow-y:auto;
overflow-x:hidden;
overscroll-behavior:contain;
background:var(--cream)
}
#app:-webkit-full-screen {
max-width:none;
width:100vw;
min-height:100vh;
margin:0;
overflow-y:auto;