@quybt93/pcgf 0.0.1

package/plugins/phaser-casual-game-factory/examples/factory-browser-demo/src/styles.css

@@ -0,0 +1,623 @@
+/* Optional Test tools FAB + popup — skill tool-demo-qa */
+@import '../../../templates/demo-tools/demo-tools.css';
+/* Default cream casual tokens + primitives — skill theme-cream-casual */
+@import '../../../templates/ui/factory-cream-casual.css';
+
+/* 25Studio Hub–matched casual UI for the economy browser demo.
+   Visual contract → templates/ui/factory-cream-casual.css (canonical tokens).
+   Layout / stage / modal composition stays in this file.
+*/
+
+@font-face {
+  font-family: "Be Vietnam Pro";
+  font-weight: 400;
+  font-display: swap;
+  src: url("/fonts/bvp-400-viet-SOx6iaFb.woff2") format("woff2");
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+@font-face {
+  font-family: "Be Vietnam Pro";
+  font-weight: 400;
+  font-display: swap;
+  src: url("/fonts/bvp-400-latin-OEyTajQY.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212;
+}
+@font-face {
+  font-family: "Be Vietnam Pro";
+  font-weight: 600;
+  font-display: swap;
+  src: url("/fonts/bvp-600-viet-DbGrrtCq.woff2") format("woff2");
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+@font-face {
+  font-family: "Be Vietnam Pro";
+  font-weight: 600;
+  font-display: swap;
+  src: url("/fonts/bvp-600-latin-xAC4kEK0.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212;
+}
+@font-face {
+  font-family: "Be Vietnam Pro";
+  font-weight: 700;
+  font-display: swap;
+  src: url("/fonts/bvp-700-viet-DptIoWwl.woff2") format("woff2");
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+@font-face {
+  font-family: "Be Vietnam Pro";
+  font-weight: 700;
+  font-display: swap;
+  src: url("/fonts/bvp-700-latin-CPfR8Jz_.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212;
+}
+@font-face {
+  font-family: "Be Vietnam Pro";
+  font-weight: 800;
+  font-display: swap;
+  src: url("/fonts/bvp-800-viet-BEUwTqXl.woff2") format("woff2");
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+@font-face {
+  font-family: "Be Vietnam Pro";
+  font-weight: 800;
+  font-display: swap;
+  src: url("/fonts/bvp-800-latin-B5VTH9An.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212;
+}
+@font-face {
+  font-family: "Be Vietnam Pro";
+  font-weight: 900;
+  font-display: swap;
+  src: url("/fonts/bvp-900-viet-DUJ3fpCl.woff2") format("woff2");
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+@font-face {
+  font-family: "Be Vietnam Pro";
+  font-weight: 900;
+  font-display: swap;
+  src: url("/fonts/bvp-900-latin-B6esVQUu.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212;
+}
+
+:root {
+  --app-max: 1240px;
+}
+
+
+* { box-sizing: border-box; }
+html,
+body {
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+body {
+  min-width: 320px; color: var(--ink); font-family: var(--font);
+  background: #0b1220;
+  -webkit-font-smoothing: antialiased;
+}
+::selection { background: var(--brand); color: #fff; }
+.loading-overlay { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: #0b1220; transition: opacity 180ms ease, visibility 180ms ease; }
+.loading-overlay.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
+.loading-card { display: grid; justify-items: center; gap: 10px; padding: 26px 28px; border-radius: 30px; background: #152038; color: #fff; box-shadow: 0 8px 0 #070b14; font-weight: 800; }
+.loading-card small { color: #8b9bb8; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
+.loading-spinner { width: 28px; height: 28px; border: 3px solid #243352; border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+
+button {
+  border: 0; border-radius: 18px; padding: 12px 14px; color: #fff; background: var(--brand);
+  box-shadow: 0 5px 0 var(--brand-d); font: inherit; font-size: 14px; font-weight: 900; cursor: pointer;
+  transform: scale(1);
+  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 60ms ease, filter 120ms ease;
+}
+button:hover:not(:disabled) { transform: scale(1.08); filter: brightness(1.04); }
+button:active:not(:disabled) { transform: scale(0.96) translateY(3px); box-shadow: none; filter: none; }
+button:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: 0 5px 0 var(--hard); background: var(--faint); }
+
+.app-shell {
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  margin: 0;
+  padding: 0;
+}
+#status[hidden] { display: none !important; }
+.eyebrow { margin: 0; color: #8b9bb8; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
+h2 { margin: 0; font-size: 22px; font-weight: 900; line-height: 1.1; }
+.subtitle { margin: 8px 0 0; color: var(--muted); font-size: 13px; font-weight: 600; line-height: 1.45; }
+.muted { color: var(--muted); font-size: 12px; font-weight: 700; }
+.status { min-width: 88px; padding: 10px 14px; border-radius: 999px; text-align: center; font-size: 12px; font-weight: 900; background: #152038; color: #9fe7b5; box-shadow: 0 3px 0 #070b14; }
+.status-ready { color: #9fe7b5; }
+.status-busy { color: #ffd27a; }
+.status-error { color: #fff; background: var(--hot); box-shadow: 0 3px 0 var(--hot-d); }
+
+.workspace {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+/* Full-viewport letterbox host — same idea as sculpin #game + Scale.FIT */
+.stage-frame {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  padding: 0;
+  background: #0b1220;
+  border-radius: 0;
+}
+.stage-screen {
+  position: relative;
+  /* Idle Home / Game: preserve 390×720 phone stage */
+  width: min(390px, 100vw, calc(100vh * 390 / 720));
+  height: min(720px, 100vh, calc(100vw * 720 / 390));
+  border-radius: 0;
+  overflow: hidden;
+  background: var(--bg);
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  box-shadow: none;
+}
+
+/* Boot uses the same phone stage box as Home/Game so LoadingView size matches. */
+.stage-screen.is-boot {
+  width: min(390px, 100vw, calc(100vh * 390 / 720));
+  height: min(720px, 100vh, calc(100vw * 720 / 390));
+  background: #0b1220;
+  grid-template-rows: 1fr;
+}
+.stage-hud {
+  display: flex; justify-content: space-between; gap: 10px; align-items: flex-start;
+  padding: 12px 12px 8px; background: linear-gradient(#fff8ef, #fff6ea00);
+}
+.player-level-card {
+  flex: 1; min-width: 0; padding: 10px; border-radius: 18px; background: var(--surface);
+  box-shadow: 0 3px 0 var(--hard);
+}
+.player-level-top { display: flex; align-items: center; gap: 8px; }
+.player-level-top strong { display: block; font-size: 16px; font-weight: 900; }
+.player-avatar {
+  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 14px;
+  background: var(--purple); box-shadow: 0 3px 0 var(--purple-d); color: #fff; font-weight: 900;
+}
+.xp-track { margin-top: 8px; height: 12px; border-radius: 999px; background: var(--track); box-shadow: inset 0 2px #00000014; overflow: hidden; }
+.xp-track > i {
+  display: block; height: 100%; width: 0%;
+  background: linear-gradient(90deg, var(--brand), #86efac); border-radius: inherit;
+  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
+}
+.player-level-card small { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; font-weight: 800; }
+.resource-bar { display: grid; gap: 6px; }
+.resource-chip {
+  display: flex; align-items: center; gap: 6px; min-width: 96px; padding: 8px 10px; border-radius: 14px;
+  background: var(--surface); box-shadow: 0 3px 0 var(--hard); font-weight: 900;
+}
+.resource-chip.gold { background: #fff4d6; box-shadow: 0 3px 0 var(--gold-d); color: var(--gold-ink); }
+.resource-chip.gem { background: #ebe4ff; box-shadow: 0 3px 0 var(--purple-d); color: var(--purple-d); }
+.resource-icon { font-size: 14px; }
+
+.stage-body { position: relative; min-height: 0; overflow: hidden; height: 100%; }
+.game-host { position: absolute; inset: 0; z-index: 0; background: #fff6ea; }
+/* FIT sizes the canvas CSS; WebGL buffer is design×DPR (see design-size.ts). */
+.game-host canvas {
+  display: block;
+  margin: 0 auto;
+  image-rendering: auto;
+}
+.stage-view {
+  position: absolute; inset: 0; z-index: 1; height: 100%; overflow: auto; padding: 8px 12px 12px;
+  background: var(--bg);
+}
+.stage-view[hidden] { display: none !important; }
+.stage-screen.is-boot,
+.stage-screen.is-game { grid-template-rows: 1fr; }
+.stage-screen.is-boot .stage-hud,
+.stage-screen.is-boot .stage-nav,
+.stage-screen.is-boot .stage-view,
+.stage-screen.is-game .stage-hud,
+.stage-screen.is-game .stage-nav,
+.stage-screen.is-game .stage-view { display: none !important; }
+.stage-screen.is-boot .stage-body,
+.stage-screen.is-game .stage-body { min-height: 0; height: 100%; }
+.stage-screen.is-boot .game-host,
+.stage-screen.is-game .game-host { z-index: 2; min-height: 0; height: 100%; background: #0b1220; }
+.stage-screen.is-game .game-host { background: var(--bg); }
+
+/* Idle Home: HTML above the Phaser canvas. A fully-cleared WebGL frame can still
+   composite as opaque #0b1220 on some GPUs, which blacked out Adventure Hub.
+   Boot `iris` / Game → Home stack canvas on top via `.is-revealing-home` below.
+   Boot `slide-up` uses DOM splash motion instead. */
+.stage-screen.is-home {
+  grid-template-rows: auto 1fr auto;
+}
+.stage-screen.is-home .stage-hud,
+.stage-screen.is-home .stage-nav {
+  position: relative;
+  z-index: 5;
+  display: flex;
+}
+.stage-screen.is-home .stage-nav {
+  display: grid !important;
+}
+.stage-screen.is-home .game-host {
+  z-index: 0;
+  background: transparent;
+  pointer-events: none;
+}
+.stage-screen.is-home .stage-view {
+  z-index: 1;
+}
+
+/* During Boot iris close: same phone box as idle Home (already sized by .is-boot). */
+.stage-screen.is-boot.is-revealing-home {
+  grid-template-rows: auto 1fr auto;
+  background: var(--bg);
+}
+.stage-screen.is-boot.is-revealing-home .stage-hud {
+  display: flex !important;
+  position: relative;
+  z-index: 2;
+}
+.stage-screen.is-boot.is-revealing-home .stage-nav {
+  display: grid !important;
+  position: relative;
+  z-index: 2;
+}
+.stage-screen.is-boot.is-revealing-home .stage-body {
+  position: static;
+  min-height: 0;
+  overflow: visible;
+}
+.stage-screen.is-boot.is-revealing-home #view-main {
+  display: block !important;
+  position: relative;
+  inset: auto;
+  height: 100%;
+  z-index: 1;
+}
+.stage-screen.is-boot.is-revealing-home .game-host {
+  /* Cover full phone stage (HUD/nav included) so iris veil does not leak chrome. */
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  min-height: 0;
+  z-index: 3;
+}
+
+/* Game → Home still uses phone stage + HUD under canvas mask */
+.stage-screen.is-game.is-revealing-home {
+  grid-template-rows: auto 1fr auto;
+}
+.stage-screen.is-game.is-revealing-home .stage-hud {
+  display: flex !important;
+}
+.stage-screen.is-game.is-revealing-home .stage-nav {
+  display: grid !important;
+}
+.stage-screen.is-game.is-revealing-home .stage-body {
+  position: static;
+  min-height: 0;
+  overflow: visible;
+}
+.stage-screen.is-game.is-revealing-home #view-main {
+  display: block !important;
+  position: relative;
+  inset: auto;
+  height: 100%;
+  z-index: 1;
+}
+.stage-screen.is-game.is-revealing-home .game-host {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  min-height: 0;
+  z-index: 3;
+}
+
+.stage-nav {
+  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
+  padding: 10px 12px 12px; background: linear-gradient(#fff6ea00, #fff8ef);
+}
+.stage-nav[hidden] { display: none !important; }
+.nav-tab {
+  background: var(--surface-2); color: var(--ink); box-shadow: 0 3px 0 var(--hard); border-radius: 14px; padding: 12px 8px;
+}
+.nav-tab.is-active { background: var(--brand); color: #fff; box-shadow: 0 3px 0 var(--brand-d); }
+
+[hidden],
+.modal-actions[hidden],
+.amount-selector[hidden],
+.equipment-stats[hidden],
+.reward-preview[hidden],
+.choice-list[hidden] {
+  display: none !important;
+}
+
+.inventory-modal.is-compact { overflow: hidden; max-height: none; }
+.view-scroll { display: grid; gap: 10px; padding-bottom: 8px; }
+.section-note { margin: -4px 0 0; color: var(--muted); font-size: 12px; font-weight: 700; }
+.shop-section-title { margin-top: 8px; }
+
+.main-hero-panel {
+  margin-top: 24px; padding: 22px 18px; border-radius: 24px; background: var(--surface);
+  box-shadow: 0 4px 0 var(--hard); text-align: center;
+}
+.main-actions { display: grid; gap: 12px; margin-top: 22px; }
+.cta-play { min-height: 56px; font-size: 18px; }
+.cta-bag { background: var(--sky); box-shadow: 0 5px 0 var(--sky-d); }
+.cta-settings { background: #7b5cff; box-shadow: 0 5px 0 #5b21b6; color: #fff; }
+
+.shop-gold-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
+.shop-gold-card {
+  display: grid; gap: 6px; padding: 12px 8px; border-radius: 16px; background: var(--surface);
+  box-shadow: 0 3px 0 var(--hard); color: var(--ink); text-align: center;
+}
+.shop-gold-amount { font-size: 13px; font-weight: 800; }
+.shop-chest-list { display: grid; gap: 8px; }
+.shop-chest-card {
+  display: flex; justify-content: space-between; align-items: center; gap: 10px;
+  padding: 14px; border-radius: 16px; background: var(--surface); box-shadow: 0 3px 0 var(--hard);
+  color: var(--ink); text-align: left;
+}
+.shop-chest-card span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; margin-top: 4px; }
+.gem-cost { color: var(--purple-d); white-space: nowrap; }
+
+.hero-list { display: grid; gap: 8px; }
+.hero-card {
+  display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px;
+  background: var(--surface); box-shadow: 0 3px 0 var(--hard); color: var(--ink); text-align: left;
+}
+.hero-icon {
+  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px;
+  background: var(--surface-2); box-shadow: 0 3px 0 var(--hard); font-size: 22px;
+}
+.hero-card span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
+
+.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.panel-heading h2 { font-size: 18px; }
+.counter { color: var(--muted); font-size: 12px; font-weight: 700; }
+.section-heading {
+  margin-top: 18px; margin-bottom: 8px; color: var(--muted); font-size: 11px; font-weight: 800;
+  letter-spacing: .14em; text-transform: uppercase;
+}
+.button-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+.balance-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
+.balance { padding: 10px; border-radius: var(--r-tile); background: var(--surface-2); box-shadow: 0 3px 0 var(--hard); text-align: center; }
+.balance span { display: block; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
+.balance strong { display: block; margin-top: 4px; font-size: 15px; font-weight: 900; }
+.log {
+  height: 180px; margin: 0; overflow: auto; padding: 12px; border-radius: var(--r-tile);
+  background: #14122a; color: #d7d3ef; font: 11px/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap;
+  box-shadow: inset 0 3px #0000003d;
+}
+
+/* Modals */
+.modal-backdrop { position: fixed; inset: 0; z-index: 30; display: none; place-items: center; padding: 18px; background: var(--overlay); }
+.modal-backdrop.is-open { display: grid; }
+#bag-modal { z-index: 30; }
+#inventory-detail, #hero-upgrade-modal { z-index: 40; }
+.inventory-modal {
+  position: relative; width: min(100%, 400px); max-height: min(86vh, 720px); overflow: auto;
+  padding: 52px 20px 20px; border-radius: 30px; background: var(--surface); box-shadow: 0 8px 0 var(--hard);
+}
+.modal-close {
+  position: absolute; top: 12px; right: 18px; width: 48px; height: 48px; padding: 0; display: grid; place-items: center;
+  border-radius: var(--r-tile); background: var(--hot); box-shadow: 0 4px 0 var(--hot-d); color: #fff; font-size: 24px; font-weight: 900;
+  transform: rotate(8deg); z-index: 2;
+  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 60ms ease, filter 120ms ease;
+}
+.modal-close:hover:not(:disabled) { transform: scale(1.08); filter: brightness(1.04); }
+.modal-close:active:not(:disabled) { transform: scale(0.96) translateY(3px); box-shadow: none; filter: none; }
+.detail-icon {
+  width: 64px; height: 64px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 20px;
+  background: var(--surface-2); box-shadow: 0 3px 0 var(--hard); font-size: 28px;
+}
+.owned-count { display: block; color: var(--muted); font-weight: 800; }
+.inventory-tabs, .bag-modal .inventory-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
+.bag-tab, .inventory-tabs button {
+  background: var(--surface-2); color: var(--ink); box-shadow: 0 3px 0 var(--hard); border-radius: 14px; padding: 10px 12px;
+}
+.bag-tab.is-active { background: var(--brand); color: #fff; box-shadow: 0 3px 0 var(--brand-d); }
+.inventory-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+.inventory-card {
+  display: grid; gap: 4px; padding: 12px 10px; background: var(--surface-2); color: var(--ink); text-align: left;
+  box-shadow: 0 3px 0 var(--hard); border-radius: var(--r-tile);
+}
+.inventory-card span, .inventory-card small { color: var(--muted); font-size: 12px; font-weight: 700; }
+.empty-inventory { grid-column: 1 / -1; padding: 14px; color: var(--muted); font-size: 13px; font-weight: 700; }
+.choice-list { display: grid; gap: 7px; margin-top: 14px; }
+.choice-button { background: var(--surface-2); color: var(--ink); text-align: left; box-shadow: 0 3px 0 var(--hard); }
+.choice-button.is-selected { outline: 3px solid var(--brand); background: #e8fbec; }
+.amount-selector { display: grid; grid-template-columns: 42px 1fr 42px 64px; gap: 7px; margin-top: 16px; }
+.amount-selector input {
+  min-width: 0; border: 0; border-radius: 14px; background: var(--track); color: var(--ink); text-align: center;
+  font: inherit; font-weight: 800; box-shadow: inset 0 3px #00000014;
+}
+.amount-selector button { padding: 8px; box-shadow: 0 3px 0 var(--brand-d); }
+.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
+.open-button { background: var(--gold); color: var(--gold-ink); box-shadow: 0 5px 0 var(--gold-d); }
+.sell-button { background: var(--hot); box-shadow: 0 5px 0 var(--hot-d); }
+.equipment-stats { margin-top: 12px; }
+.stat-row, .skill-row {
+  display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--hairline);
+  color: var(--muted); font-size: 13px; font-weight: 700;
+}
+.stat-row strong, .skill-row strong { color: var(--ink); font-weight: 900; }
+.inline-diff { margin-left: 6px; font-weight: 900; }
+.diff-up { color: var(--brand-d); }
+.diff-down { color: var(--hot-d); }
+.reroll-preview { margin-top: 10px; padding-top: 8px; border-top: 2px dashed var(--hard); font-size: 12px; }
+.reroll-title { color: var(--purple-d); font-weight: 900; }
+.reroll-cost { margin-top: 4px; color: var(--gold-d); font-weight: 800; }
+.cost-list { display: grid; gap: 8px; margin-top: 14px; }
+.cost-row {
+  display: flex; justify-content: space-between; gap: 10px; padding: 12px; border-radius: 14px;
+  background: var(--surface-2); box-shadow: 0 3px 0 var(--hard); font-weight: 800;
+}
+.cost-row.short strong { color: var(--hot-d); }
+.cost-row.ok strong { color: var(--brand-d); }
+
+@media (max-width: 430px) {
+  .shop-gold-grid { grid-template-columns: 1fr 1fr; }
+  .button-grid, .inventory-list, .balance-grid { grid-template-columns: 1fr; }
+}
+
+body.splash-fullscreen {
+  background: #0b1220 !important;
+}
+body.splash-fullscreen .loading-overlay,
+body.splash-fullscreen #loading-overlay {
+  opacity: 0 !important;
+  visibility: hidden !important;
+  pointer-events: none !important;
+}
+body.splash-fullscreen .stage-hud,
+body.splash-fullscreen .stage-nav,
+body.splash-fullscreen .stage-view {
+  display: none !important;
+  pointer-events: none !important;
+}
+body.splash-fullscreen .stage-screen,
+body.splash-fullscreen .game-host {
+  background: #0b1220 !important;
+}
+/* Tools stay visible above Boot/Game→Home masks — only `body.demo-tools-off` hides them. */
+
+
+/* Modal scroll: one axis only */
+.modal-backdrop { overflow: hidden; }
+.inventory-modal { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
+body.modal-open { overflow: hidden; }
+
+.inventory-card {
+  grid-template-columns: 40px 1fr;
+  align-items: center;
+  column-gap: 8px;
+}
+.inventory-card .item-mini-icon {
+  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px;
+  background: #fff; box-shadow: 0 2px 0 var(--hard); font-size: 20px; grid-row: span 2;
+}
+.inventory-card .item-mini-body { display: grid; gap: 2px; }
+.shard-card {
+  display: grid; grid-template-columns: 40px 1fr; gap: 4px 8px; padding: 10px;
+  background: var(--surface-2); border-radius: var(--r-tile); box-shadow: 0 3px 0 var(--hard);
+}
+.shard-card-main {
+  display: grid; grid-template-columns: 40px 1fr; column-gap: 8px; align-items: center;
+  grid-column: 1 / -1; padding: 0; background: transparent; box-shadow: none; color: var(--ink); text-align: left;
+}
+.shard-card-main .item-mini-icon { grid-row: auto; }
+.shard-activate {
+  grid-column: 1 / -1; margin-top: 4px; min-height: 36px; padding: 8px;
+  background: var(--brand); color: #fff; box-shadow: 0 3px 0 var(--brand-d); border-radius: 12px; font-size: 13px;
+}
+.shard-activate:disabled { opacity: .45; box-shadow: none; }
+.hero-icon, .hero-avatar, #hero-upgrade-icon {
+  width: 56px; height: 56px; display: grid; place-items: center; border-radius: 18px;
+  font-size: 28px; box-shadow: 0 3px 0 var(--hard);
+}
+.hero-card .hero-icon { width: 52px; height: 52px; font-size: 26px; flex: none; }
+.hero-card.locked { opacity: .72; }
+.shop-chest-card .chest-icon { font-size: 22px; margin-right: 8px; }
+
+.reward-backdrop { z-index: 50; background: #000000cc; cursor: pointer; }
+.reward-modal {
+  width: min(100%, 360px); max-height: min(70vh, 520px); overflow-x: hidden; overflow-y: auto;
+  padding: 24px 20px 20px; border-radius: 28px; background: var(--surface); box-shadow: 0 8px 0 var(--hard);
+  text-align: center; cursor: default;
+}
+.reward-list { display: grid; gap: 8px; margin: 16px 0 8px; }
+.reward-row {
+  display: flex; align-items: center; justify-content: space-between; gap: 10px;
+  padding: 12px 14px; border-radius: 16px; background: var(--surface-2); box-shadow: 0 3px 0 var(--hard);
+  text-align: left; font-weight: 800;
+}
+.reward-row .reward-ico { font-size: 22px; }
+.reward-ok { width: 100%; min-height: 48px; margin-top: 8px; }
+
+.levelup-backdrop { z-index: 55; background: #000000cc; }
+.levelup-modal {
+  width: min(100%, 380px); max-height: min(80vh, 640px); overflow: auto;
+  padding: 28px 22px 22px; border-radius: 28px; background: var(--surface); box-shadow: 0 8px 0 var(--hard);
+  text-align: center;
+}
+.levelup-avatar {
+  width: 72px; height: 72px; margin: 0 auto 12px; display: grid; place-items: center;
+  border-radius: 22px; background: var(--purple); color: #fff; font-size: 28px; font-weight: 900;
+  box-shadow: 0 4px 0 var(--purple-d);
+}
+.levelup-xp-block { margin: 14px 0 8px; text-align: left; }
+.levelup-xp-track { height: 14px; }
+.levelup-xp-block small { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; font-weight: 800; }
+#levelup-reward-list { margin-top: 8px; }
+
+.reward-preview { margin-top: 12px; }
+.reward-preview-list { display: grid; gap: 6px; margin-top: 6px; }
+.reward-preview-row {
+  display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 12px;
+  background: var(--surface-2); font-size: 13px; font-weight: 800;
+}
+
+.settings-backdrop[hidden] { display: none !important; }
+.settings-backdrop.is-open { display: grid; z-index: 60; }
+.settings-modal {
+  position: relative; width: min(360px, 100%); padding: 28px 20px 24px; border-radius: 22px;
+  background: #fff6ea; color: var(--ink); box-shadow: 0 12px 0 rgba(43, 33, 64, 0.28);
+  transform-origin: center center; will-change: transform;
+}
+.settings-modal .modal-close {
+  /* Keep Home inventory close language: hot tile + tilt */
+  top: 10px; right: 12px;
+}
+.settings-row {
+  display: flex; justify-content: space-between; align-items: center; margin-top: 18px;
+  font-size: 14px; font-weight: 800; color: #5c4d6e;
+}
+.settings-slider {
+  position: relative; margin-top: 10px; height: 18px;
+}
+.settings-slider-track {
+  position: absolute; inset: 2px 0; border-radius: 999px; background: #353951; overflow: hidden;
+  pointer-events: none;
+}
+.settings-slider-fill {
+  height: 100%; width: 0%; border-radius: inherit; background: #8f82ff;
+  will-change: width;
+}
+.settings-range {
+  position: relative; z-index: 1; width: 100%; height: 18px; margin: 0;
+  -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
+}
+.settings-range::-webkit-slider-runnable-track { height: 14px; background: transparent; border: 0; }
+.settings-range::-moz-range-track { height: 14px; background: transparent; border: 0; }
+.settings-range::-webkit-slider-thumb {
+  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -2px;
+  border-radius: 50%; background: #fff; box-shadow: 0 2px 0 #2b214066; border: 2px solid #7b5cff;
+}
+.settings-range::-moz-range-thumb {
+  width: 18px; height: 18px; border-radius: 50%; background: #fff;
+  box-shadow: 0 2px 0 #2b214066; border: 2px solid #7b5cff;
+}
+.settings-home-btn {
+  width: 100%; margin-top: 22px; min-height: 48px;
+  background: #38bdf8; box-shadow: 0 5px 0 #0284c7; color: #fff;
+}
+.settings-home-btn[hidden] { display: none !important; }