/* All shared tutorial selectors require a Shadow DOM host. */
@font-face {
  font-family: TerminalTitle;
  src: url('vendor/press-start-2p.ttf') format('truetype');
  font-display: swap;
}
:host {
  color-scheme: dark;
  --coal: #11130f;
  --panel: #181c16;
  --raised: #20261d;
  --ink: #f1edda;
  --muted: #b4b8a6;
  --dim: #858d7c;
  --line: #343c2e;
  --amber: #f1c27a;
  --amber-bright: #ffdaa0;
  --amber-ink: #2c210f;
  --mint: #bdf3ce;
  --mint-dim: #81b697;
  --ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --viewport-height: 100dvh;
  --review-height: 0px;
  font-family: var(--ui);
  font-synthesis: none;
}
:host * { box-sizing: border-box; }
:host { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
:host { background: #1b1f18; color: var(--ink); font-size: 15px; line-height: 1.5; -webkit-text-size-adjust: 100%; }
:host button, :host input, :host select { font: inherit; }
:host button { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:host button:disabled { cursor: default; opacity: .4; }
:host button, :host a, :host input, :host select { outline-offset: 4px; }
:host :focus-visible { outline: 2px solid var(--amber-bright); }
:host [hidden] { display: none !important; }
:host a { color: var(--amber-bright); text-decoration-thickness: 1px; text-underline-offset: 4px; }
:host p, :host h1, :host h2, :host h3 { margin: 0; }
:host button svg { width: 20px; height: 20px; flex-shrink: 0; }
:host .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
:host .prototype-layout { display: grid; grid-template-columns: 260px minmax(0, 940px); justify-content: center; align-items: center; gap: clamp(24px, 4vw, 72px); height: var(--viewport-height); padding: 24px 32px; }
:host .review-rail { width: 260px; max-height: calc(var(--viewport-height) - 48px); overflow: auto; padding: 8px 16px 8px 0; scrollbar-width: thin; scrollbar-color: #4d5945 transparent; }
:host .review-heading { color: var(--ink); font-size: 28px; font-weight: 550; line-height: 1.17; letter-spacing: -.8px; margin: 14px 0 20px; }
:host .review-rail .eyebrow { color: var(--mint); font-size: 10px; }
:host .review-note { font-size: 13px; color: var(--muted); line-height: 1.65; margin: 14px 0 24px; }
:host .review-note strong { color: var(--ink); font-weight: 550; }
:host .step-list { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; counter-reset: steps; }
:host .step-list button { min-height: 44px; width: 100%; display: flex; align-items: center; gap: 11px; text-align: left; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 5px; padding: 10px 11px; font-size: 12px; }
:host .step-list button .step-number, :host .step-list button .number { font-size: 10px; color: var(--dim); font-variant-numeric: tabular-nums; min-width: 18px; }
:host .step-list button.is-current, :host .step-list button[aria-current=step], :host .step-list button[aria-pressed=true] { color: var(--ink); background: #293024; border-color: #46513c; }
:host .step-list button.is-current .step-number { color: var(--mint); }
:host .step-list button:hover { color: var(--ink); background: #252c21; }
:host .review-controls { display: grid; gap: 10px; padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--line); }
:host .review-controls label { display: grid; gap: 6px; font-size: 11px; color: var(--muted); }
:host .review-controls select { width: 100%; min-height: 44px; background: var(--coal); border: 1px solid var(--line); border-radius: 5px; padding: 9px 10px; color: var(--ink); font-size: 12px; }
:host .review-controls button { min-height: 44px; padding: 10px 12px; background: transparent; border: 1px solid #46503e; border-radius: 5px; color: var(--muted); font-size: 12px; }
:host .review-controls button:hover { color: var(--ink); border-color: var(--muted); }
:host .review-controls input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--mint); }
:host .review-controls label:has(input[type=checkbox]) { display: flex; align-items: center; gap: 9px; min-height: 44px; }
:host .review-bar { display: none; }
:host .experience-shell { height: min(850px, calc(var(--viewport-height) - 48px)); width: 100%; min-width: 0; min-height: 0; background: var(--coal); border: 1px solid #46503c; border-radius: 14px; box-shadow: 0 28px 80px #0003, inset 0 1px #dde4bd05; overflow: hidden; }
:host .terminal-app { height: 100%; min-height: 0; min-width: 0; display: grid; grid-template-rows: 80px minmax(0, 1fr); isolation: isolate; }
:host .app-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; padding: 18px 32px; border-bottom: 1px solid #a6b99b16; }
:host .brand, :host .app-brand, :host .wordmark { color: var(--amber-bright); font-family: TerminalTitle, monospace; font-size: 10px; line-height: 1.65; letter-spacing: -.3px; }
:host .brand span, :host .app-brand span { display: block; }
:host .app-identity { display: flex; align-items: center; gap: 20px; min-width: 0; }
:host .network, :host .app-mode, :host .preview-tag { color: var(--dim); font-size: 9px; letter-spacing: .8px; white-space: nowrap; }
:host .app-bar button { min-width: 44px; min-height: 44px; display: inline-flex; justify-content: center; align-items: center; border: 0; background: transparent; color: var(--muted); padding: 10px; border-radius: 5px; font-size: 13px; }
:host .app-bar button:hover { color: var(--ink); background: var(--raised); }
:host .app-bar .back-button { gap: 7px; padding-left: 0; }
:host #experience-screen { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
:host .scene { width: 100%; height: 100%; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 22px; padding: 34px 40px 32px; overflow: hidden; }
:host .scene > * { min-width: 0; }
:host .scene > header, :host .scene > .scene-heading, :host .scene > .scene-copy { flex: 0 0 auto; }
:host .eyebrow { font-size: 11px; font-weight: 550; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mint-dim); line-height: 1.35; }
:host .hero-title { color: var(--ink); font-size: clamp(30px, 3.5vw, 46px); font-weight: 550; letter-spacing: -1.6px; line-height: 1.1; text-wrap: balance; }
:host .eyebrow + .hero-title { margin-top: 12px; }
:host .lede { color: var(--muted); max-width: 510px; font-size: 16px; line-height: 1.55; }
:host .hero-title + .lede { margin-top: 13px; }
:host .micro { color: var(--muted); font-size: 12px; line-height: 1.5; }
:host .micro strong { color: var(--ink); font-weight: 550; }
:host .hero-value { color: var(--amber-bright); font-size: clamp(42px, 5vw, 66px); font-weight: 550; line-height: 1.06; letter-spacing: -2px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow-wrap: normal; }
:host .hero-value .unit, :host .unit { color: var(--muted); font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0; white-space: nowrap; }
:host .hero-value .unit { margin-left: 7px; }
:host .charge, :host .charge-value, :host .is-charge, :host [data-resource=charge] { color: var(--mint); }
:host .charge .hero-value, :host .reward-receipt .hero-value, :host .hero-value.charge { color: var(--mint); }
:host .status-line { display: flex; gap: 9px; align-items: center; color: var(--muted); font-size: 12px; line-height: 1.45; }
:host .status-line::before { content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; background: var(--mint-dim); box-shadow: 0 0 10px #a7f6bc35; }
:host .art-stage { position: relative; display: flex; flex: 1 1 0; align-items: center; justify-content: center; min-width: 0; min-height: 0; width: 100%; isolation: isolate; }
:host .artifact-art { display: block; max-width: 100%; max-height: 100%; flex-shrink: 1; overflow: visible; }
:host .art-stage > .artifact-art { height: 100%; width: min(100%, 330px); max-height: 320px; }
:host .art-stage > .chamber-art { width: min(100%, 470px); max-height: 320px; }
:host .art-stage > .code-art { width: min(100%, 280px); max-height: 245px; }
:host .art-stage > .charge-art { width: min(100%, 240px); max-height: 215px; }
:host .art-stage > .echo-art { width: min(100%, 350px); max-height: 230px; }
:host .art-stage > .fuse-art { width: min(100%, 300px); max-height: 335px; }
:host .art-stage.reveal > .artifact-art, :host .specimen.reveal > .artifact-art, :host .is-revealing .artifact-art { animation: specimen-reveal .65s cubic-bezier(.16, 1, .3, 1) both; }
:host .fuse-art.is-active .artifact-aura, :host .chamber-art.is-active .artifact-aura { animation: core-breathe 2.8s ease-in-out infinite; }
:host .chamber-art.is-active .chamber-scan { animation: chamber-scan 2s ease-in-out infinite alternate; transform-origin: center; }
:host .chamber-art.is-active .chamber-ring { animation: chamber-ring 18s linear infinite; transform-origin: 175px 115px; }
:host .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; flex: 0 0 auto; margin-top: auto; width: 100%; padding-top: 4px; }
:host .actions > :only-child { grid-column: 1 / -1; }
:host .actions[data-layout=stack], :host .actions.stacked { grid-template-columns: 1fr; }
:host button.primary, :host button.secondary { min-height: 60px; min-width: 0; border: 1px solid #6d6244; border-radius: 7px; padding: 17px 21px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 7px 10px; font-size: 16px; line-height: 1.2; font-weight: 600; letter-spacing: -.2px; color: var(--ink); background: var(--panel); text-align: center; transition: background .12s ease, transform .12s ease, box-shadow .12s ease; }
:host button.primary { background: var(--amber); color: var(--amber-ink); border-color: var(--amber); box-shadow: 0 3px 0 #8b6c3e; }
:host button.primary:hover:not(:disabled) { background: #ffce85; }
:host button.secondary { color: var(--amber-bright); background: #29261a; border-color: #78633f; box-shadow: inset 0 -2px #8c6b39; }
:host button.secondary:hover:not(:disabled) { background: #36301f; border-color: var(--amber); }
:host button.primary:active:not(:disabled), :host button.secondary:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
:host button.primary .odds, :host button.secondary .odds { font-size: 23px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
:host button.primary .unit, :host button.secondary .unit { color: inherit; font-size: 12px; }
:host button.direction { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-content: center; justify-content: center; min-height: 90px; padding: 15px 12px; gap: 6px; }
:host button.direction .odds { grid-column: 1 / -1; }
:host button .button-sub { width: 100%; font-size: 12px; font-weight: 400; opacity: .8; }
:host .text-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; min-width: 44px; padding: 8px 0; border: 0; background: transparent; color: var(--amber-bright); font-size: 13px; font-weight: 500; text-decoration: none; }
:host .text-button:hover { color: var(--ink); }
:host .text-button svg { width: 15px; height: 15px; }
:host .actions .text-button { align-self: center; }
:host .money-row { display: flex; flex: 0 0 auto; align-items: flex-start; justify-content: space-between; gap: 20px; }
:host .money-row > div { min-width: 0; }
:host .money-row .micro { margin-bottom: 8px; }
:host .money-row .hero-value { font-size: clamp(35px, 4vw, 50px); }
:host .money-row .resource-chip { margin-top: 4px; }
:host .resource-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 33px; padding: 6px 10px; border: 1px solid #5a796344; border-radius: 4px; color: var(--mint); background: #85b68d07; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
:host .resource-chip svg { width: 19px; height: 19px; }
:host .reward-receipt { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; text-align: center; }
:host .reward-receipt .art-stage { flex: 1 1 0; max-height: 250px; }
:host .reward-receipt .hero-value { font-size: clamp(38px, 4vw, 55px); }
:host .reward-receipt .lede { max-width: 400px; font-size: 15px; }
:host .reward-receipt .micro { max-width: 360px; }
:host .reward-receipt .hero-title { font-size: 31px; letter-spacing: -.9px; }
:host .reward-receipt .text-button { margin-top: -4px; }
:host .card-table { position: relative; min-height: 0; min-width: 0; display: flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 24px; padding: 5px 0 10px; perspective: 900px; }
:host .playing-card { position: relative; height: 100%; max-height: 310px; width: auto; max-width: 100%; aspect-ratio: 5 / 7; flex-shrink: 0; color: #20252a; background: linear-gradient(135deg, #fffefa, #f3efe6); border: 1px solid #dedbd2; border-radius: 9px; box-shadow: 0 3px #cecbc2, 0 14px 32px #0003; overflow: hidden; container-type: size; }
:host .playing-card.red, :host .playing-card[data-red=true], :host .playing-card[data-suit='♥'], :host .playing-card[data-suit='♦'] { color: #b22c3d; }
:host .playing-card.black { color: #20252a; }
:host .card-art { display: block; width: 100%; height: 100%; position: absolute; inset: 0; }
:host .card-index { position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; line-height: .9; font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: clamp(21px, 13cqw, 32px); }
:host .card-index.rk { left: 7%; top: 5.5%; }
:host .card-index.rk2 { right: 7%; bottom: 5.5%; transform: rotate(180deg); }
:host .card-rank { display: block; letter-spacing: -1px; }
:host .corner-suit { display: block; width: .57em; height: .57em; }
:host .card-back-art { inset: 0; }
:host .card-table .playing-card + .playing-card { transform: rotate(5deg); }
:host .card-table .playing-card:first-child:not(:only-child) { transform: rotate(-5deg); }
:host .card-caption { position: absolute; bottom: 0; color: var(--muted); font-size: 12px; }
:host .split-scene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); flex: 1 1 0; min-height: 0; gap: 40px; align-items: center; }
:host .specimen { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; height: 100%; }
:host .specimen > .artifact-art { width: 100%; height: 100%; max-height: 390px; }
:host .item-spec { display: flex; flex-direction: column; min-width: 0; gap: 20px; }
:host .item-spec .hero-title { font-size: 40px; }
:host .item-spec .lede { font-size: 16px; line-height: 1.6; }
:host .item-spec .micro { border-top: 1px solid var(--line); padding-top: 16px; }
:host .cost-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; }
:host .cost-row strong, :host .cost-row .cost { color: var(--mint); font-size: 22px; font-weight: 550; font-variant-numeric: tabular-nums; white-space: nowrap; }
:host .cost-row .unit { color: var(--mint-dim); font-size: 12px; }
:host .code-slip { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid #536548; border-radius: 7px; background: linear-gradient(110deg, #30392b50, #17201730); }
:host .code-slip .artifact-art { width: 75px; height: 72px; flex-shrink: 0; }
:host .code-slip h3 { font-size: 17px; font-weight: 550; margin-bottom: 4px; }
:host .bank { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
:host .bank-entry { min-width: 0; border-top: 1px solid var(--line); padding-top: 17px; }
:host .bank-entry .hero-value { font-size: 36px; }
:host .bank-entry .micro { margin-bottom: 8px; }
:host .menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
:host .menu-grid button { min-width: 0; min-height: 106px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; padding: 18px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: var(--panel); text-align: left; font-size: 15px; }
:host .menu-grid button:hover { border-color: #607155; background: var(--raised); }
:host .menu-grid button .micro { color: var(--muted); font-size: 12px; }
:host .menu-grid .artifact-art { height: 50px; width: 64px; }
:host .journal-entry { display: grid; gap: 7px; padding: 18px 0; border-bottom: 1px solid var(--line); }
:host .journal-entry:last-child { border-bottom: 0; }
:host .journal-entry h3 { font-size: 15px; font-weight: 550; }
:host .journal-entry p { color: var(--muted); font-size: 13px; line-height: 1.6; }
:host .journal-entry .eyebrow { font-size: 9px; }
:host .footer-note { color: var(--dim); font-size: 11px; line-height: 1.6; margin-top: 20px; }
:host .scene .footer-note { margin-top: 0; }
:host dialog.sheet, :host #experience-details { position: fixed; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: min(520px, calc(100% - 36px)); max-width: 100%; max-height: calc(var(--viewport-height) - 36px); margin: 0; padding: 0; color: var(--ink); background: #1a2118; border: 1px solid #59674b; border-radius: 12px; box-shadow: 0 20px 100px #0008; overflow: auto; overscroll-behavior: contain; }
:host dialog::backdrop { background: #080d08bd; backdrop-filter: blur(6px); }
:host .sheet-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 20px 12px 26px; background: #1a2118; }
:host .sheet-header h2 { font-size: 23px; font-weight: 550; letter-spacing: -.5px; line-height: 1.2; }
:host .sheet-header button { width: 44px; height: 44px; border: 0; border-radius: 5px; display: flex; align-items: center; justify-content: center; background: transparent; color: var(--muted); font-size: 25px; }
:host .sheet-header button:hover { background: var(--raised); color: var(--ink); }
:host .sheet-content { padding: 8px 26px 30px; }
:host .sheet-content > p { color: var(--muted); font-size: 14px; line-height: 1.65; margin-bottom: 16px; }
:host .sheet-content .bank { margin: 16px 0 24px; }
:host .sheet-content .menu-grid { margin: 8px 0; }
:host .sheet-content .actions { margin-top: 22px; }
:host .sheet-content ul { margin: 12px 0; padding-left: 20px; color: var(--muted); font-size: 13px; line-height: 1.7; }
:host .sheet-content .detail-row { display: flex; justify-content: space-between; gap: 20px; margin: 14px 0; font-size: 14px; color: var(--muted); }
:host .sheet-content .detail-row strong { color: var(--ink); font-weight: 550; font-variant-numeric: tabular-nums; }
:host .sheet-content .review-controls { margin-top: 0; padding-top: 0; border: 0; }
:host .loader { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 7px; height: 24px; }
:host .loader span { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); animation: loading-dot 1.2s ease-in-out infinite; }
:host .loader span:nth-child(2) { animation-delay: .15s; }
:host .loader span:nth-child(3) { animation-delay: .3s; }
:host .review-intro { color: var(--muted); font-size: 14px; line-height: 1.6; margin-bottom: 26px; }
:host .review-note > .eyebrow { margin-bottom: 10px; }
:host .step-list button > span:first-child { min-width: 18px; color: var(--dim); font-size: 10px; font-variant-numeric: tabular-nums; }
:host .step-list button > small { margin-left: auto; font-size: 9px; color: var(--dim); font-variant-numeric: tabular-nums; }
:host .review-controls > label { margin-bottom: -5px; }
:host .experience-shell { display: grid; grid-template-rows: minmax(0, 1fr) 28px; }
:host .frame-caption { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 22px; background: #151b12; border-top: 1px solid #34402c; color: #98a38b; font: 8px/1 var(--ui); letter-spacing: 1.1px; }
:host .app-location { color: var(--dim); font-size: 9px; letter-spacing: 1.2px; margin-right: auto; margin-left: 10px; }
:host .money-row { flex-direction: column; gap: 8px; }
:host .money-row .micro { margin: 0; }
:host .money-row > .eyebrow { color: var(--muted); letter-spacing: .9px; }
:host .reward-receipt { flex-direction: row; gap: 24px; text-align: left; }
:host .receipt-art { display: flex; align-items: center; justify-content: center; flex: 0 1 230px; min-width: 0; min-height: 0; height: min(100%, 235px); }
:host .receipt-art > .artifact-art { width: 100%; height: 100%; }
:host .reward-receipt > div:not(.receipt-art) { flex: 0 1 325px; min-width: 0; }
:host .reward-receipt h3 { font-size: 28px; font-weight: 550; line-height: 1.2; letter-spacing: -.6px; color: var(--mint); margin: 9px 0; text-wrap: balance; }
:host .reward-receipt .text-button { font-size: 12px; margin: 8px 0 0; }
:host button.primary > small, :host button.secondary > small, :host button.direction > small { display: block; width: 100%; line-height: 1.2; font-size: 11px; font-weight: 400; letter-spacing: 0; }
:host button.direction { background: #29261a; border: 1px solid #927340; border-radius: 7px; color: var(--amber-bright); box-shadow: inset 0 -3px #9f7b41; font-weight: 550; font-size: 17px; line-height: 1.2; transition: background .12s ease, transform .12s ease; }
:host button.direction > span { grid-column: 1 / -1; }
:host button.direction > small { grid-column: 1 / -1; font-size: 25px; font-weight: 550; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
:host button.direction:hover:not(:disabled) { background: #3b3220; border-color: var(--amber); }
:host button.direction:active:not(:disabled) { background: var(--amber); color: var(--amber-ink); box-shadow: none; transform: translateY(2px); }
:host .deposit-picker { margin-block: auto; display: flex; flex-direction: column; gap: 14px; }
:host .amount-stepper { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; align-items: center; gap: 14px; width: 100%; }
:host .amount-stepper > button.secondary { min-height: 52px; font-size: 26px; padding: 6px; line-height: 1; box-shadow: none; }
:host .amount-stepper > strong { color: var(--amber-bright); text-align: center; font-size: 42px; font-weight: 550; letter-spacing: -1px; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
:host .ready-stake { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
:host .ready-stake .secondary-value { font-size: 42px; }
:host .ready-stake .text-button { margin-top: 0; }
:host .scene[data-scene=ready] .money-row { margin-top: auto; }
:host .scene[data-scene=ready] .actions { margin-top: auto; }
:host .cost-row { flex-direction: column; align-items: flex-start; gap: 5px; }
:host .cost-row > span { color: var(--mint); font-size: 15px; font-weight: 500; }
:host .cost-row small { font-size: 11px; line-height: 1.4; color: var(--muted); }
:host .specimen { flex-direction: column; }
:host .specimen > .artifact-art { min-height: 0; flex: 1 1 0; }
:host .specimen-label { font-size: 9px; letter-spacing: 1.5px; color: var(--dim); margin-top: 8px; flex-shrink: 0; }
:host .item-rule { color: var(--mint); font-size: 13px; font-weight: 550; margin-top: 3px; }
:host .item-spec .micro { border-top: 0; padding-top: 0; }
:host .item-spec > .scene-heading { display: block; }
:host .item-spec .text-button { align-self: flex-start; margin-top: 0; }
:host .horizontal-loader { display: inline-flex; flex-direction: row; justify-content: center; align-items: center; gap: 7px; min-height: 22px; }
:host .horizontal-loader i { display: block; width: 6px; height: 6px; background: var(--mint); border-radius: 50%; animation: loading-dot 1.2s ease-in-out infinite; }
:host .horizontal-loader i:nth-child(2) { animation-delay: .15s; }
:host .horizontal-loader i:nth-child(3) { animation-delay: .3s; }
:host .status-line .horizontal-loader { margin-left: 3px; }
:host .status-line .horizontal-loader i { width: 4px; height: 4px; }
:host .memory-art { position: relative; flex: 1 1 0; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; gap: 26px; padding: 8px 0 14px; }
:host .memory-art > .echo-art { position: absolute; inset: 50% 0 auto; transform: translateY(-50%); width: 100%; height: 100%; max-height: 190px; opacity: .3; }
:host .memory-card { height: 100%; max-height: 220px; max-width: 36%; aspect-ratio: 5/7; }
:host .memory-card.ghost { opacity: .24; filter: saturate(.35); transform: rotate(-8deg) translateY(7px); }
:host .memory-card:not(.ghost) { transform: rotate(5deg); }
:host .memory-message { font-size: 12px; letter-spacing: 2.5px; color: var(--mint); text-align: center; }
:host .echo-discovery { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1 1 0; min-height: 0; gap: 11px; text-align: center; }
:host .echo-discovery .memory-art { max-height: 240px; }
:host .echo-discovery .hero-title { font-size: 36px; line-height: 1.1; }
:host .echo-discovery .micro { font-size: 12px; }
:host .session-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-block: auto; padding: 24px 0; border-block: 1px solid var(--line); }
:host .session-summary > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
:host .session-summary strong { color: var(--mint); font-size: 40px; font-weight: 550; font-variant-numeric: tabular-nums; letter-spacing: -1px; line-height: 1.1; }
:host .session-summary span { color: var(--muted); font-size: 12px; }
:host .bank-entry > strong { display: block; color: var(--mint); font-size: 32px; line-height: 1.15; font-weight: 550; letter-spacing: -.8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
:host .bank-entry > strong small { font-size: 11px; color: var(--muted); letter-spacing: 0; }
:host .bank-entry:has(> strong > small) > strong { color: var(--amber-bright); }
:host .bank-entry > span { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; margin-top: 10px; }
:host .bank-entry > span small { display: block; font-size: 11px; color: var(--dim); margin-top: 6px; }
:host .sample-banner { flex: 0 0 auto; padding: 7px 9px; color: #cadbbb; font-size: 9px; letter-spacing: .7px; background: #2a3523; border: 1px solid #536649; border-radius: 3px; }
:host .menu-entry { position: relative; }
:host .menu-entry > span { font-weight: 550; }
:host .menu-entry > small { max-width: calc(100% - 15px); color: var(--muted); font-size: 11px; line-height: 1.45; }
:host .menu-entry > b { position: absolute; right: 13px; top: 14px; color: var(--mint-dim); font-size: 13px; font-weight: 400; }
:host .sheet-art { height: 145px; width: 100%; display: flex; align-items: center; justify-content: center; margin: 4px 0 20px; }
:host .sheet-art > .artifact-art { height: 100%; width: min(100%, 250px); }
:host .sheet-art.collector-art { height: 180px; }
:host .sheet-content > h3 { font-size: 21px; line-height: 1.3; font-weight: 550; letter-spacing: -.3px; margin: 10px 0 13px; }
:host .sheet-content > .primary, :host .sheet-content > .secondary { width: 100%; margin-top: 12px; }
:host .sheet-content > label { display: block; color: var(--muted); font-size: 12px; margin: 18px 0 6px; }
:host .sheet-content > select { width: 100%; min-height: 44px; padding: 10px; border: 1px solid #526045; border-radius: 5px; color: var(--ink); background: var(--coal); font-size: 13px; }
:host .sheet-content .amount-stepper { margin: 24px 0; }
:host .sheet-content .bank-entry > strong { font-size: 28px; }
:host .offering-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; border-block: 1px solid var(--line); margin: 18px 0; }
:host .offering-row > span { font-size: 13px; color: var(--ink); }
:host .offering-row > button { min-height: 44px; font-size: 12px; padding: 12px; }
:host .empty-note { padding: 17px; border: 1px dashed #536548; border-radius: 5px; color: var(--muted); font-size: 13px; }
:host .scene > .journal-entry { grid-template-columns: 36px minmax(0, 1fr); gap: 18px; margin-block: auto; border-block: 1px solid var(--line); padding-block: 25px; }
:host .journal-number { color: var(--mint); font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: 1px; padding-top: 2px; }
:host .journal-entry h3 { margin: 9px 0 10px; }
:host .journal-entry p + p { margin-top: 12px; }
:host .journal-entry em { color: var(--ink); font-style: normal; }
@keyframes specimen-reveal { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes core-breathe { 50% { opacity: .45; } }
@keyframes chamber-scan { from { transform: translateY(-30px); opacity: .5; } to { transform: translateY(30px); opacity: 1; } }
@keyframes chamber-ring { to { transform: rotate(360deg); } }
@keyframes loading-dot { 0%, 65%, 100% { opacity: .25; } 30% { opacity: 1; } }
@media (max-width: 1100px) and (min-width: 701px) {:host .prototype-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding: 22px; }
:host .review-rail { width: 220px; }
:host .review-heading { font-size: 25px; }
:host .scene { padding: 30px 28px 28px; }
:host .app-bar { padding-inline: 28px; }
:host .split-scene { gap: 20px; }
:host .item-spec .hero-title { font-size: 33px; }
:host .item-spec .lede { font-size: 14px; }
}
@media (max-width: 700px) {:host { --review-height: 40px; }
:host { background: var(--coal); }
:host .prototype-layout { display: block; padding: 0; height: var(--viewport-height); }
:host .review-rail { display: none; }
:host .review-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--review-height); padding: 0 18px; background: #263022; border-bottom: 1px solid #536649; color: #d2dfc4; }
:host .review-bar span, :host .review-bar p { font-size: 9px; font-weight: 500; letter-spacing: .75px; text-transform: uppercase; white-space: nowrap; }
:host .review-bar button { align-self: stretch; border: 0; background: transparent; color: #d7ebc8; min-width: 44px; min-height: 40px; padding: 0 3px; font-size: 10px; font-weight: 550; }
:host .experience-shell { height: calc(var(--viewport-height) - var(--review-height)); max-height: none; border: 0; border-radius: 0; box-shadow: none; }
:host .terminal-app { grid-template-rows: 64px minmax(0, 1fr); padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
:host .app-bar { padding: 10px 22px; border-bottom-color: transparent; gap: 10px; }
:host .brand, :host .app-brand, :host .wordmark { font-size: 8px; }
:host .app-identity { gap: 14px; }
:host .network, :host .app-mode, :host .preview-tag { font-size: 8px; }
:host .scene { padding: 22px 24px 24px; gap: 18px; }
:host .hero-title { font-size: 34px; letter-spacing: -1px; }
:host .eyebrow { font-size: 10px; letter-spacing: 1.2px; }
:host .eyebrow + .hero-title { margin-top: 9px; }
:host .lede { font-size: 15px; line-height: 1.5; }
:host .hero-title + .lede { margin-top: 10px; }
:host .hero-value { font-size: 48px; letter-spacing: -1.5px; }
:host .money-row .hero-value { font-size: 42px; }
:host .money-row { gap: 12px; }
:host .money-row .micro { font-size: 11px; margin-bottom: 7px; }
:host .micro { font-size: 12px; }
:host .art-stage > .artifact-art { max-height: 285px; width: min(100%, 285px); }
:host .art-stage > .code-art { max-height: 220px; width: min(100%, 255px); }
:host .art-stage > .chamber-art { width: 100%; max-height: 260px; }
:host .art-stage > .charge-art { max-height: 200px; width: min(100%, 220px); }
:host .reward-receipt { gap: 10px; }
:host .reward-receipt .art-stage { max-height: 220px; }
:host .reward-receipt .hero-title { font-size: 28px; }
:host .reward-receipt .hero-value { font-size: 42px; }
:host .reward-receipt .lede { font-size: 14px; }
:host .resource-chip { padding: 5px 8px; font-size: 11px; min-height: 31px; }
:host .actions { gap: 10px; }
:host button.primary, :host button.secondary { min-height: 56px; padding: 16px 12px; font-size: 15px; }
:host button.direction { min-height: 88px; }
:host .playing-card { max-height: 290px; }
:host .split-scene { display: flex; flex-direction: column; gap: 15px; align-items: stretch; }
:host .specimen { flex: 1 1 0; min-height: 0; width: 100%; }
:host .specimen > .artifact-art { max-width: 250px; max-height: 270px; }
:host .item-spec { flex: 0 0 auto; gap: 10px; }
:host .item-spec .hero-title { font-size: 32px; }
:host .item-spec .lede { font-size: 14px; line-height: 1.45; }
:host .item-spec .micro { padding-top: 10px; font-size: 11px; }
:host .cost-row { padding: 12px 0; }
:host .cost-row strong, :host .cost-row .cost { font-size: 20px; }
:host .code-slip { gap: 10px; padding: 12px; }
:host .code-slip h3 { font-size: 15px; }
:host .code-slip .artifact-art { height: 61px; width: 61px; }
:host .bank { gap: 16px; }
:host .bank-entry .hero-value { font-size: 31px; letter-spacing: -.8px; }
:host .bank-entry { padding-top: 12px; }
:host dialog.sheet, :host #experience-details { inset: auto 0 0; transform: none; width: 100%; max-height: calc(var(--viewport-height) - 20px); border-radius: 16px 16px 0 0; border-bottom: 0; }
:host .sheet-content { padding: 6px 24px calc(26px + env(safe-area-inset-bottom, 0px)); }
:host .sheet-header { padding: 13px 18px 9px 24px; }
:host .sheet-header h2 { font-size: 22px; }
}
@media (max-height: 740px) {:host .scene { gap: 16px; padding-top: 22px; padding-bottom: 24px; }
:host .hero-title { font-size: 34px; }
:host .lede { font-size: 14px; }
:host .hero-value { font-size: 46px; }
:host .art-stage > .artifact-art { max-height: 235px; }
:host .art-stage > .charge-art { max-height: 170px; }
:host .reward-receipt .art-stage { max-height: 175px; }
:host .reward-receipt { gap: 9px; }
:host .playing-card { max-height: 245px; }
:host .specimen > .artifact-art { max-height: 300px; }
:host .item-spec { gap: 14px; }
}
@media (max-width: 700px) and (max-height: 680px) {:host .terminal-app { grid-template-rows: 58px minmax(0, 1fr); }
:host .app-bar { padding-block: 7px; }
:host .scene { padding: 12px 22px 18px; gap: 13px; }
:host .hero-title { font-size: 29px; letter-spacing: -.9px; }
:host .eyebrow { font-size: 9px; }
:host .hero-title + .lede { margin-top: 7px; }
:host .lede { font-size: 13px; }
:host .hero-value, :host .money-row .hero-value { font-size: 38px; letter-spacing: -1px; }
:host .hero-value .unit, :host .unit { font-size: 11px; }
:host .micro { font-size: 11px; }
:host .reward-receipt .hero-value { font-size: 36px; }
:host .reward-receipt .hero-title { font-size: 25px; }
:host .reward-receipt .lede { font-size: 12px; }
:host .reward-receipt .art-stage { max-height: 145px; }
:host .art-stage > .artifact-art { max-height: 200px; }
:host .art-stage > .code-art { max-height: 165px; }
:host .art-stage > .charge-art { max-height: 140px; }
:host .playing-card { max-height: 225px; }
:host button.primary, :host button.secondary { min-height: 52px; padding: 13px 10px; }
:host button.direction { min-height: 76px; gap: 5px; }
:host button.primary .odds, :host button.secondary .odds { font-size: 21px; }
:host .split-scene { gap: 10px; }
:host .item-spec { gap: 8px; }
:host .item-spec .hero-title { font-size: 27px; }
:host .item-spec .lede { font-size: 12px; }
:host .item-spec .micro { font-size: 10px; padding-top: 8px; }
:host .specimen > .artifact-art { max-height: 220px; }
:host .cost-row { padding-block: 9px; font-size: 12px; }
:host .status-line { font-size: 11px; }
}
@media (max-width: 350px) {:host .app-bar { padding-inline: 18px; }
:host .brand, :host .app-brand, :host .wordmark { font-size: 7px; }
:host .app-identity { gap: 9px; }
:host .network, :host .app-mode, :host .preview-tag { font-size: 7px; letter-spacing: .5px; }
:host .scene { padding-inline: 20px; }
:host .hero-title { font-size: 28px; }
:host .hero-value, :host .money-row .hero-value { font-size: 35px; }
:host .resource-chip { font-size: 10px; padding-inline: 6px; gap: 4px; }
:host .resource-chip svg { width: 16px; height: 16px; }
:host .money-row .hero-value .unit { margin-left: 4px; }
:host .bank-entry .hero-value { font-size: 28px; }
:host button.primary, :host button.secondary { font-size: 14px; padding-inline: 9px; }
}
@media (max-width: 700px) and (max-height: 530px) {:host .scene { padding-top: 8px; padding-bottom: 14px; gap: 10px; }
:host .hero-title { font-size: 25px; }
:host .hero-title + .lede { margin-top: 6px; }
:host .lede { font-size: 12px; line-height: 1.4; }
:host .hero-value, :host .money-row .hero-value { font-size: 32px; }
:host .art-stage > .artifact-art { max-height: 165px; }
:host .art-stage > .charge-art { max-height: 110px; }
:host .reward-receipt .art-stage { max-height: 112px; }
:host .reward-receipt { gap: 6px; }
:host .reward-receipt .hero-value { font-size: 32px; }
:host .reward-receipt .hero-title { font-size: 23px; }
:host .reward-receipt .micro { font-size: 10px; }
:host .playing-card { max-height: 195px; }
:host .specimen > .artifact-art { max-height: 170px; }
:host .item-spec .hero-title { font-size: 24px; }
:host .item-spec .lede { font-size: 11px; }
:host .item-spec { gap: 6px; }
:host button.primary, :host button.secondary { min-height: 48px; padding-block: 11px; }
:host button.direction { min-height: 69px; }
:host .cost-row { padding-block: 7px; }
:host .cost-row strong { font-size: 18px; }
}
@media (orientation: landscape) and (max-height: 520px) {:host { --review-height: 36px; }
:host .prototype-layout { display: block; padding: 0; }
:host .review-rail { display: none; }
:host .review-bar { display: flex; height: var(--review-height); align-items: center; justify-content: space-between; padding: 0 20px; background: #263022; color: #d2dfc4; }
:host .review-bar span, :host .review-bar p { font-size: 9px; text-transform: uppercase; letter-spacing: .75px; }
:host .review-bar button { min-height: 36px; border: 0; padding-inline: 8px; color: #d7ebc8; background: transparent; font-size: 10px; }
:host .experience-shell { height: calc(var(--viewport-height) - var(--review-height)); max-height: none; border: 0; border-radius: 0; }
:host .terminal-app { grid-template-rows: 52px minmax(0, 1fr); }
:host .app-bar { padding: 4px 24px; }
:host .brand, :host .app-brand, :host .wordmark { font-size: 7px; }
:host .scene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 32%); grid-template-rows: minmax(0, 1fr) auto; column-gap: 26px; row-gap: 8px; padding: 7px 24px 16px; }
:host .scene > :not(.actions) { grid-column: 1; }
:host .scene > .actions { grid-column: 2; grid-row: 1 / -1; align-self: center; display: flex; flex-direction: column; margin: 0; gap: 10px; }
:host .scene > header, :host .scene > .scene-heading, :host .scene > .scene-copy { grid-row: 1; align-self: center; }
:host .scene > .art-stage, :host .scene > .card-table, :host .scene > .reward-receipt, :host .scene > .split-scene { grid-row: 1 / -1; }
:host .scene:has(> header) > .art-stage, :host .scene:has(> .scene-heading) > .art-stage, :host .scene:has(> .scene-copy) > .art-stage { justify-content: flex-end; pointer-events: none; }
:host .scene:has(> header) > .art-stage .artifact-art, :host .scene:has(> .scene-heading) > .art-stage .artifact-art, :host .scene:has(> .scene-copy) > .art-stage .artifact-art { width: 38%; max-height: 155px; }
:host .scene:has(> .art-stage) > header, :host .scene:has(> .art-stage) > .scene-heading, :host .scene:has(> .art-stage) > .scene-copy { width: 58%; z-index: 1; }
:host .hero-title { font-size: 27px; }
:host .lede { font-size: 12px; }
:host .hero-value, :host .money-row .hero-value { font-size: 33px; }
:host .money-row { grid-row: 1; align-self: center; width: 48%; z-index: 1; flex-direction: column; gap: 12px; }
:host .card-table { justify-content: flex-end; padding: 3px 0 8px; }
:host .playing-card { max-height: 210px; max-width: 45%; }
:host .reward-receipt { margin-left: 47%; gap: 5px; }
:host .reward-receipt .art-stage { max-height: 95px; }
:host .reward-receipt .hero-value { font-size: 28px; }
:host .reward-receipt .hero-title { font-size: 23px; }
:host .reward-receipt .lede, :host .reward-receipt .micro { font-size: 10px; }
:host .split-scene { display: grid; grid-template-columns: .85fr 1fr; gap: 16px; }
:host .specimen > .artifact-art { max-height: 195px; }
:host .item-spec { gap: 8px; }
:host .item-spec .hero-title { font-size: 28px; }
:host .item-spec .lede { font-size: 12px; }
:host .item-spec .micro { font-size: 10px; padding-top: 7px; }
:host .cost-row { grid-row: 2; padding: 8px 0; }
:host button.primary, :host button.secondary { min-height: 50px; padding: 13px 12px; font-size: 14px; }
:host button.direction { min-height: 79px; }
:host .status-line { font-size: 11px; }
:host dialog.sheet, :host #experience-details { inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: min(540px, calc(100% - 40px)); max-height: calc(var(--viewport-height) - 24px); border-bottom: 1px solid #59674b; border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {:host *, :host *::before, :host *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
:host .loader span { opacity: 1; }
}
@media (forced-colors: active) {:host button.primary, :host button.secondary, :host .playing-card, :host .resource-chip { border: 2px solid CanvasText; }
:host button.primary { color: ButtonText; background: ButtonFace; }
:host .status-line::before, :host .loader span { background: CanvasText; }
}
:host .preview-observation { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; gap: 10px; }
:host .preview-observation .memory-art { min-height: 0; }
:host .preview-observation .memory-message { flex-shrink: 0; }
:host .memory-art { container-type: size; }
:host .memory-card { height: min(100%, 220px, 58.8cqw); max-width: none; }
:host .scene[data-scene=preview] .scene-heading { flex-shrink: 0; }
:host .scene[data-scene=welcome] .card-table { max-height: none; }
:host .scene[data-scene=welcome] .playing-card { max-height: 305px; }
:host .scene[data-scene=pending] .scene-heading { margin-top: auto; }
:host .scene[data-scene=pending] .art-stage { flex: 0 0 70px; margin-bottom: auto; }
@media (max-width: 700px) {:host { --review-height: 36px; }
:host .prototype-layout { height: calc(var(--viewport-height) - var(--review-height)); }
:host .experience-shell { grid-template-rows: minmax(0, 1fr); }
:host .frame-caption { display: none; }
:host .review-bar { padding-inline: 18px; }
:host .review-bar button { min-height: 36px; }
:host .app-location { font-size: 8px; letter-spacing: .8px; margin-left: 0; }
:host .money-row { gap: 7px; }
:host .reward-receipt { gap: 12px; }
:host .receipt-art { flex-basis: 125px; height: min(100%, 170px); }
:host .reward-receipt > div:not(.receipt-art) { flex: 1 1 0; }
:host .reward-receipt h3 { font-size: 23px; letter-spacing: -.5px; margin-block: 8px; }
:host .reward-receipt .eyebrow { font-size: 8px; letter-spacing: 1px; }
:host .reward-receipt .micro { font-size: 11px; }
:host .reward-receipt .text-button { font-size: 11px; text-align: left; justify-content: flex-start; margin-top: 4px; }
:host .specimen-label { font-size: 8px; letter-spacing: 1px; margin-top: 5px; }
:host .amount-stepper > strong { font-size: 35px; }
:host .ready-stake .secondary-value { font-size: 38px; }
:host .cost-row > span { font-size: 13px; }
:host .cost-row small { font-size: 10px; }
:host .echo-discovery { gap: 9px; }
:host .echo-discovery .hero-title { font-size: 29px; }
:host .echo-discovery .memory-art { max-height: 225px; }
:host .memory-card { max-height: 205px; }
:host .memory-art { gap: 18px; }
:host .memory-message { font-size: 10px; letter-spacing: 1.6px; }
:host .session-summary { gap: 13px; padding-block: 18px; }
:host .session-summary strong { font-size: 32px; }
:host .session-summary span { font-size: 11px; }
:host .sample-banner { padding: 5px 7px; font-size: 8px; letter-spacing: .4px; }
:host .bank-entry > strong { font-size: 29px; }
:host .sheet-content .bank-entry > strong { font-size: 25px; }
}
@media (max-width: 700px) and (max-height: 680px) {:host .receipt-art { flex-basis: 105px; height: min(100%, 140px); }
:host .reward-receipt h3 { font-size: 21px; }
:host .ready-stake { gap: 8px; }
:host .ready-stake .secondary-value { font-size: 34px; }
:host .amount-stepper > strong { font-size: 32px; }
:host .item-rule { font-size: 11px; margin: 0; }
:host .item-spec .text-button { font-size: 11px; }
:host .echo-discovery .hero-title { font-size: 25px; }
:host .echo-discovery .micro { font-size: 11px; }
:host .echo-discovery .memory-art { max-height: 175px; }
:host .memory-card { max-height: 175px; }
:host .scene[data-scene=welcome] .playing-card { max-height: 230px; }
:host .scene > .journal-entry { padding-block: 16px; gap: 12px; grid-template-columns: 28px minmax(0, 1fr); }
:host .journal-entry h3 { font-size: 14px; margin-block: 7px; }
:host .journal-entry p { font-size: 12px; line-height: 1.5; }
}
@media (max-width: 350px) {:host .app-location { font-size: 7px; letter-spacing: .6px; }
:host .review-bar { padding-inline: 14px; }
:host .review-bar span { font-size: 8px; letter-spacing: .6px; }
:host .receipt-art { flex-basis: 93px; }
:host .reward-receipt h3 { font-size: 20px; }
:host .amount-stepper { grid-template-columns: 46px minmax(0, 1fr) 46px; gap: 9px; }
:host .amount-stepper > strong { font-size: 30px; }
:host .amount-stepper > button.secondary { min-height: 48px; }
:host .sheet-content { padding-inline: 20px; }
:host .sheet-content .bank { grid-template-columns: 1fr; gap: 15px; }
:host .session-summary { gap: 9px; }
:host .session-summary strong { font-size: 28px; }
:host .session-summary span { font-size: 10px; }
:host .bank-entry > strong { font-size: 26px; }
}
@media (max-width: 700px) and (max-height: 530px) {:host .receipt-art { height: min(100%, 113px); }
:host .reward-receipt h3 { font-size: 19px; }
:host .reward-receipt .micro { font-size: 10px; }
:host .reward-receipt .text-button { font-size: 10px; }
:host .scene[data-scene=item] .split-scene { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 12px; }
:host .scene[data-scene=item] .item-spec .hero-title { font-size: 25px; }
:host .scene[data-scene=item] .item-spec .lede { font-size: 11px; }
:host .scene[data-scene=item] .item-spec .text-button { font-size: 10px; }
:host .scene[data-scene=item] .specimen-label { text-align: center; font-size: 7px; letter-spacing: .3px; }
:host .scene[data-scene=welcome] .playing-card { max-height: 188px; }
:host .echo-discovery { gap: 6px; }
:host .echo-discovery .hero-title { font-size: 23px; }
:host .echo-discovery .micro { font-size: 10px; }
:host .memory-card { max-height: 144px; }
:host .echo-discovery .memory-art { max-height: 130px; }
:host .session-summary { padding-block: 12px; }
:host .session-summary strong { font-size: 27px; }
:host .scene > .journal-entry { padding-block: 12px; }
:host .journal-entry p { font-size: 11px; }
}
@media (orientation: landscape) and (max-height: 520px) {:host .prototype-layout { height: calc(var(--viewport-height) - var(--review-height)); }
:host .experience-shell { grid-template-rows: minmax(0, 1fr); }
:host .frame-caption { display: none; }
:host .scene { grid-template-rows: minmax(0, 1fr); }
:host .scene[data-scene=welcome] .scene-heading { width: 51%; }
:host .scene[data-scene=welcome] .playing-card { max-height: 210px; }
:host .scene[data-scene=deposit] { grid-template-rows: minmax(0, 1fr) auto; }
:host .scene[data-scene=deposit] .scene-heading { grid-row: 1; }
:host .scene[data-scene=deposit] .deposit-picker { grid-column: 1; grid-row: 2; gap: 8px; margin: 0; }
:host .deposit-picker .amount-stepper { max-width: 350px; }
:host .amount-stepper > strong { font-size: 30px; }
:host .amount-stepper > button.secondary { min-height: 44px; }
:host .scene[data-scene=ready] .money-row { width: 100%; margin: 0; align-self: start; }
:host .scene[data-scene=ready] .ready-stake { grid-column: 1; grid-row: 1; align-self: end; gap: 4px; margin: 0; }
:host .ready-stake .secondary-value { font-size: 30px; }
:host .money-row { gap: 7px; }
:host .money-row .micro { max-width: 185px; font-size: 10px; }
:host .reward-receipt { flex-direction: column; gap: 5px; text-align: center; }
:host .receipt-art { flex: 1 1 0; height: auto; width: 110px; max-height: 110px; }
:host .reward-receipt > div:not(.receipt-art) { flex: 0 0 auto; }
:host .reward-receipt h3 { font-size: 19px; margin-block: 5px; }
:host .reward-receipt .eyebrow { font-size: 7px; }
:host .reward-receipt .text-button { font-size: 10px; margin-top: 0; justify-content: center; }
:host .scene[data-scene=counter] { grid-template-rows: minmax(0, 1fr) auto; }
:host .scene[data-scene=counter] .scene-heading { align-self: center; }
:host .scene[data-scene=counter] > .art-stage { grid-row: 1; }
:host .scene[data-scene=counter] > .cost-row { grid-column: 1; grid-row: 2; }
:host .cost-row > span { font-size: 12px; }
:host .cost-row small { font-size: 9px; }
:host .preview-observation { grid-column: 1; grid-row: 1 !important; margin-left: 51%; height: 100%; gap: 4px; }
:host .scene[data-scene=preview] > .scene-heading { width: 46%; }
:host .preview-observation .memory-art { gap: 9px; }
:host .memory-card { max-height: 142px; }
:host .memory-message { font-size: 9px; letter-spacing: 1px; }
:host .echo-discovery { grid-row: 1 !important; margin-left: 47%; gap: 5px; }
:host .echo-discovery .memory-art { max-height: 115px; gap: 12px; }
:host .echo-discovery .hero-title { font-size: 23px; }
:host .echo-discovery .micro { font-size: 10px; }
:host .scene[data-scene=armed] > .footer-note { grid-row: 1; align-self: end; font-size: 9px; }
:host .scene[data-scene=journal] > .scene-heading { width: 45%; }
:host .scene[data-scene=journal] > .journal-entry { grid-column: 1; grid-row: 1; margin-left: 49%; padding-block: 8px; grid-template-columns: 1fr; gap: 5px; }
:host .journal-number { display: none; }
:host .journal-entry p { font-size: 11px; }
:host .journal-entry p + p { margin-top: 6px; }
:host .scene[data-scene=session_end] > .scene-heading { width: 49%; }
:host .session-summary { grid-column: 1; grid-row: 1; margin-left: 54%; display: flex; flex-direction: column; gap: 9px; padding-block: 9px; }
:host .session-summary > div { flex-direction: row; align-items: baseline; gap: 10px; }
:host .session-summary strong { font-size: 25px; }
:host .session-summary span { font-size: 10px; }
:host .scene[data-scene=session_end] > .footer-note { grid-row: 1; align-self: end; width: 48%; font-size: 9px; }
:host .scene > .sample-banner { position: absolute; left: 24px; right: 24px; top: 1px; font-size: 7px; padding-block: 3px; z-index: 2; }
:host .scene:has(> .sample-banner) { padding-top: 28px; }
:host .scene[data-scene=pending] .scene-heading { width: 100%; margin: 0; }
:host .scene[data-scene=pending] .art-stage { grid-column: 2; align-self: center; margin: 0; }
}
:host .ui-glyph { display: block; width: 24px; height: 24px; flex: 0 0 auto; }
:host .app-bar { gap: 14px; }
:host .app-bar .app-back { min-width: 44px; min-height: 44px; padding: 8px 0; gap: 6px; color: var(--amber-bright); font-size: 12px; }
:host .app-back .ui-glyph { width: 19px; height: 19px; }
:host .practice-label { margin-right: auto; color: var(--muted); font-size: 9px; letter-spacing: .7px; line-height: 1.5; white-space: nowrap; }
:host .practice-label small, :host .practice-label span { display: block; color: var(--dim); font-size: 8px; letter-spacing: .3px; }
:host #terminal-button { position: relative; min-height: 44px; min-width: 108px; padding: 10px 13px; display: flex; justify-content: center; align-items: center; gap: 8px; color: var(--amber-bright); border: 1px solid #8b714547; border-radius: 6px; background: #2d2b1a; font-size: 12px; font-weight: 550; line-height: 1.1; }
:host #terminal-button .ui-glyph { width: 20px; height: 20px; }
:host #terminal-button:hover { background: #3a3320; border-color: #ad8a50; }
:host #terminal-button.has-rewards { color: var(--mint); border-color: #98c89f; background: #263a2b; animation: terminal-notice 3s ease-in-out infinite; }
:host #terminal-button .reward-badge, :host #terminal-button .badge { position: absolute; top: -5px; right: -4px; min-width: 17px; height: 17px; display: flex; align-items: center; justify-content: center; border-radius: 9px; padding: 0 4px; background: var(--mint); color: #172f20; border: 2px solid var(--coal); font-size: 8px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
:host .hub-scene, :host .scene[data-scene=hub] { display: flex; flex-direction: column; padding-top: 24px; gap: 24px; }
:host .hub-balances { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; padding: 4px 0 22px; border-bottom: 1px solid var(--line); }
:host .hub-balances > div { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
:host .hub-balances > div + div { border-left: 1px solid var(--line); padding-left: 26px; }
:host .hub-balances .eyebrow, :host .hub-balances .label, :host .hub-balances small { font-size: 10px; font-weight: 500; color: var(--muted); letter-spacing: .7px; }
:host .hub-balances strong { color: var(--mint); font-size: 40px; font-weight: 550; line-height: 1.08; letter-spacing: -1.2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
:host .hub-balances strong small, :host .hub-balances .unit { color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: 0; margin-left: 5px; }
:host .hub-balances > div:last-child strong, :host .hub-balances [data-resource=sol] strong { color: var(--amber-bright); }
:host .hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 16px; flex: 1 1 0; min-height: 0; min-width: 0; }
:host .hub-grid .hub-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 7px; min-width: 0; min-height: 0; padding: 17px 22px 19px; border: 1px solid #68775262; border-radius: 9px; background: radial-gradient(ellipse at 50% 40%, #6e8a5321, transparent 78%), #1a2117; color: var(--ink); text-align: center; isolation: isolate; overflow: hidden; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
:host .hub-grid .hub-tile:hover { background-color: #24311f; border-color: #8ea274; }
:host .hub-grid .hub-tile:active { transform: translateY(2px); }
:host .hub-tile .tile-art, :host .hub-tile .hub-art { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 0; flex: 1 1 0; }
:host .hub-grid .hub-tile .artifact-art { width: 100%; height: 100%; max-height: 225px; min-height: 0; max-width: 285px; flex: 1 1 0; }
:host .hub-grid .hub-tile > .artifact-art { margin: auto; }
:host .hub-grid .hub-tile .backpack-art, :host .hub-grid .hub-tile .goat-art { max-width: 215px; }
:host .hub-tile strong, :host .hub-tile .tile-title, :host .hub-tile .label, :host .hub-tile > span:not(.tile-art):not(.hub-art) { display: block; flex: 0 0 auto; color: var(--ink); font-size: 19px; font-weight: 550; line-height: 1.2; letter-spacing: -.35px; }
:host .hub-tile small, :host .hub-tile .tile-note { flex: 0 0 auto; font-size: 11px; line-height: 1.35; color: var(--muted); font-weight: 400; }
:host .hub-tile .tile-arrow { position: absolute; top: 13px; right: 14px; font-size: 15px; color: #8c9b7b; }
:host .hub-tile .tile-badge { position: absolute; top: 10px; left: 10px; border: 1px solid #92c59b67; background: #22372a; color: var(--mint); border-radius: 4px; font-size: 9px; padding: 4px 6px; line-height: 1.2; }
:host .direction { position: relative; }
:host button.direction { min-height: 118px; padding-top: 39px; }
:host .direction .reward-preview { position: absolute; top: 8px; right: 9px; display: flex; align-items: center; gap: 5px; width: auto; pointer-events: none; }
:host .reward-icon { display: inline-flex; justify-content: center; align-items: center; gap: 3px; min-width: 30px; min-height: 23px; padding: 3px 5px; border: 1px solid #97c69a65; border-radius: 4px; background: #263a276b; color: var(--mint); font-size: 10px; font-weight: 550; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
:host .reward-icon.code, :host .reward-icon[data-resource=code] { border-color: #b5a16877; background: #4b422568; color: #e9d298; }
:host .reward-icon .ui-glyph, :host .direction .reward-preview .ui-glyph { width: 15px; height: 15px; }
:host .reward-icon small, :host .reward-icon strong, :host .reward-icon b { font: inherit; }
:host #reward-flight-layer { position: fixed; inset: 0; z-index: 1000; pointer-events: none; overflow: hidden; }
:host .flying-reward { position: fixed; top: 0; left: 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 31px; height: 29px; padding: 4px 7px; color: var(--mint); background: #28402a; border: 1px solid #bdf3ce; border-radius: 5px; box-shadow: 0 0 18px #9feda755, 0 3px 8px #0005; font-size: 11px; font-weight: 550; font-variant-numeric: tabular-nums; transform-origin: center; pointer-events: none; }
:host .flying-reward.code, :host .flying-reward[data-resource=code] { color: #f2daa4; border-color: #ebd394; background: #51442b; box-shadow: 0 0 18px #e2c58b44, 0 3px 8px #0005; }
:host .flying-reward .ui-glyph { width: 18px; height: 18px; }
:host .flying-reward { width: 36px; min-width: 36px; height: 36px; padding: 6px; }
:host .usb-art { color: var(--mint); }
:host .art-stage > .usb-art { width: min(100%, 290px); max-height: 315px; }
:host .shield-note { display: flex; align-items: center; gap: 7px; color: var(--mint); font-size: 12px; }
:host .shield-note .ui-glyph { width: 18px; height: 18px; }
@keyframes terminal-notice { 50% { box-shadow: 0 0 17px #bdf3ce1f, inset 0 0 12px #bdf3ce08; border-color: #d0f0bb; } }
@media (max-width: 700px) {:host .app-bar { gap: 11px; }
:host .app-bar .brand { font-size: 7px; }
:host .practice-label { font-size: 7px; letter-spacing: .5px; }
:host .practice-label small, :host .practice-label span { font-size: 7px; letter-spacing: 0; }
:host #terminal-button { min-width: 95px; gap: 6px; padding: 9px 10px; font-size: 11px; }
:host #terminal-button .ui-glyph { width: 18px; height: 18px; }
:host .hub-scene, :host .scene[data-scene=hub] { padding: 15px 20px 22px; gap: 20px; }
:host .hub-balances { gap: 19px; padding-bottom: 18px; }
:host .hub-balances > div + div { padding-left: 19px; }
:host .hub-balances strong { font-size: 32px; letter-spacing: -.9px; }
:host .hub-balances .eyebrow, :host .hub-balances .label, :host .hub-balances small { font-size: 9px; }
:host .hub-balances strong small, :host .hub-balances .unit { font-size: 10px; margin-left: 3px; }
:host .hub-grid { gap: 11px; }
:host .hub-grid .hub-tile { padding: 12px 10px 15px; gap: 6px; border-radius: 7px; }
:host .hub-grid .hub-tile .artifact-art { max-height: 210px; }
:host .hub-tile strong, :host .hub-tile .tile-title, :host .hub-tile .label, :host .hub-tile > span:not(.tile-art):not(.hub-art) { font-size: 16px; letter-spacing: -.25px; }
:host .hub-tile small, :host .hub-tile .tile-note { font-size: 10px; }
:host .hub-tile .tile-arrow { top: 9px; right: 9px; font-size: 12px; }
:host button.direction { min-height: 113px; padding-top: 38px; }
:host .direction .reward-preview { right: 7px; top: 7px; gap: 4px; }
}
@media (max-width: 700px) and (max-height: 680px) {:host .hub-scene, :host .scene[data-scene=hub] { padding-top: 9px; padding-bottom: 17px; gap: 13px; }
:host .hub-balances { padding-bottom: 12px; gap: 15px; }
:host .hub-balances > div + div { padding-left: 15px; }
:host .hub-balances strong { font-size: 29px; }
:host .hub-grid { gap: 9px; }
:host .hub-grid .hub-tile { padding: 8px 8px 11px; gap: 3px; }
:host .hub-tile strong, :host .hub-tile .tile-title, :host .hub-tile .label, :host .hub-tile > span:not(.tile-art):not(.hub-art) { font-size: 15px; }
:host button.direction { min-height: 100px; padding-top: 34px; }
:host button.direction > small { font-size: 23px; }
}
@media (max-width: 350px) {:host .app-bar { gap: 8px; padding-inline: 16px; }
:host .app-bar .brand { font-size: 6px; }
:host #terminal-button { min-width: 87px; gap: 5px; padding-inline: 8px; font-size: 10px; }
:host .practice-label { font-size: 6px; letter-spacing: .3px; }
:host .practice-label small, :host .practice-label span { font-size: 6px; }
:host .hub-scene, :host .scene[data-scene=hub] { padding-inline: 17px; }
:host .hub-balances strong { font-size: 27px; }
:host .hub-balances .eyebrow, :host .hub-balances .label, :host .hub-balances small { font-size: 8px; }
:host .hub-balances strong small, :host .hub-balances .unit { font-size: 9px; }
:host .hub-tile strong, :host .hub-tile .tile-title, :host .hub-tile .label, :host .hub-tile > span:not(.tile-art):not(.hub-art) { font-size: 14px; }
:host .hub-tile small, :host .hub-tile .tile-note { font-size: 9px; }
:host .reward-icon { font-size: 9px; padding-inline: 4px; min-height: 22px; }
:host .reward-icon .ui-glyph, :host .direction .reward-preview .ui-glyph { width: 14px; height: 14px; }
}
@media (max-width: 700px) and (max-height: 530px) {:host .hub-balances { padding-bottom: 9px; }
:host .hub-balances strong { font-size: 26px; }
:host .hub-grid .hub-tile { padding: 6px 7px 9px; }
:host .hub-tile strong, :host .hub-tile .tile-title, :host .hub-tile .label, :host .hub-tile > span:not(.tile-art):not(.hub-art) { font-size: 13px; }
:host button.direction { min-height: 92px; padding-top: 31px; }
:host .direction .reward-preview { top: 5px; }
}
@media (orientation: landscape) and (max-height: 520px) {:host .hub-scene, :host .scene[data-scene=hub] { display: flex; flex-direction: row; align-items: stretch; gap: 22px; padding: 7px 24px 15px; }
:host .hub-balances { flex: 0 0 170px; display: flex; flex-direction: column; justify-content: center; gap: 19px; border: 0; padding: 0; }
:host .hub-balances > div + div { border: 0; padding-left: 0; }
:host .hub-balances strong { font-size: 30px; }
:host .hub-grid { flex: 1 1 0; gap: 8px; grid-template-rows: repeat(2, minmax(0, 1fr)); }
:host .hub-grid .hub-tile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(70px, .8fr); grid-template-rows: 1fr; align-items: center; padding: 7px 12px 7px 8px; gap: 6px; text-align: left; }
:host .hub-grid .hub-tile .tile-art, :host .hub-grid .hub-tile .hub-art, :host .hub-grid .hub-tile > .artifact-art { grid-column: 1; grid-row: 1 / 3; width: 100%; height: 100%; }
:host .hub-grid .hub-tile .artifact-art { max-height: 100px; }
:host .hub-tile strong, :host .hub-tile .tile-title, :host .hub-tile .label, :host .hub-tile > span:not(.tile-art):not(.hub-art) { grid-column: 2; font-size: 14px; }
:host .hub-tile small, :host .hub-tile .tile-note { grid-column: 2; font-size: 9px; }
:host .hub-tile .tile-arrow { font-size: 10px; top: 6px; right: 7px; }
:host button.direction { min-height: 104px; padding-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {:host #terminal-button.has-rewards { animation: none; box-shadow: inset 0 0 0 1px #8db398; }
}
:host .hub-balances > .hub-charge { flex-direction: row; align-items: center; gap: 11px; }
:host .hub-balances > div > div { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
:host .hub-balances > div > div > span { display: block; color: var(--muted); font-size: 10px; letter-spacing: .4px; }
:host .hub-balances .hub-charge > .ui-glyph { width: 23px; height: 23px; color: var(--mint); }
:host .hub-balances .hub-sol { justify-content: center; }
:host .hub-tile-label small { display: block; margin-top: 5px; color: var(--mint-dim); font-weight: 400; font-size: 10px; letter-spacing: 0; }
:host .hub-grid .hub-tile.is-next { border-color: #9bb47b; background-color: #24321e; }
:host #terminal-button .terminal-count { position: absolute; top: -5px; right: -4px; min-width: 17px; height: 17px; display: flex; align-items: center; justify-content: center; padding: 0 4px; border-radius: 9px; background: var(--mint); color: #172f20; border: 2px solid var(--coal); font-size: 8px; line-height: 1; font-weight: 700; }
:host .direction .reward-preview { grid-column: auto; grid-row: auto; margin: 0; }
:host .reward-icon[data-reward=code] { border-color: #b5a16877; background: #4b422568; color: #e9d298; }
:host button.direction { grid-template-columns: 1fr; grid-template-rows: auto auto auto; align-content: center; justify-items: center; gap: 5px; min-height: 128px; padding: 13px 12px; }
:host button.direction.has-prizes { padding-top: 37px; min-height: 153px; }
:host button.direction .direction-label { grid-row: 1; display: block; font-size: 16px; line-height: 1.15; }
:host button.direction .win-total { grid-row: 2; display: block; font-size: 24px; font-weight: 550; letter-spacing: -.5px; line-height: 1.08; font-variant-numeric: tabular-nums; white-space: nowrap; }
:host button.direction .win-total small { display: block; font-size: 10px; font-weight: 400; letter-spacing: 0; line-height: 1.3; margin-top: 3px; }
:host button.direction .odds { grid-row: 3; display: block; font-size: 13px; font-weight: 500; letter-spacing: 0; line-height: 1.1; color: var(--muted); white-space: nowrap; }
:host button.direction .odds small { display: none; }
:host .protection-banner { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; padding: 12px 14px; border: 1px solid #7dad8066; border-radius: 6px; background: #243b2780; color: var(--mint); }
:host .protection-banner > .ui-glyph { width: 25px; height: 25px; }
:host .protection-banner > div { display: flex; flex-direction: column; gap: 3px; }
:host .protection-banner strong { font-size: 13px; font-weight: 550; line-height: 1.2; }
:host .protection-banner span { color: #adceb2; font-size: 11px; line-height: 1.4; }
:host .craft-cost { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 14px; border-top: 1px solid var(--line); padding-top: 16px; color: var(--mint); font-size: 13px; }
:host .craft-cost > span { display: flex; align-items: center; gap: 7px; }
:host .craft-cost > span > .ui-glyph { width: 19px; height: 19px; }
:host .item-limit { display: flex; align-items: center; gap: 8px; color: var(--mint); font-size: 14px; font-weight: 550; line-height: 1.4; }
:host .item-limit > .ui-glyph { width: 22px; height: 22px; }
:host .notice { flex: 0 0 auto; padding: 10px 12px; border: 1px solid #aa985b77; border-radius: 5px; color: #dfd2a5; background: #39321d; font-size: 12px; line-height: 1.45; }
:host .refund-receipt { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 22px; text-align: center; }
:host .refund-icon { display: grid; place-items: center; width: 78px; height: 78px; border: 1px solid #acc79655; border-radius: 50%; color: var(--mint); background: radial-gradient(circle, #aad79810, transparent 75%); }
:host .refund-icon .ui-glyph { width: 42px; height: 42px; }
:host .refund-receipt > strong { display: block; color: var(--mint); font-size: 52px; font-weight: 550; line-height: 1.05; letter-spacing: -1.4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
:host .refund-receipt > strong > small { display: block; color: var(--muted); font-size: 13px; font-weight: 400; letter-spacing: 0; line-height: 1.4; margin-top: 8px; }
:host .balance-proof { display: flex; justify-content: center; align-items: center; gap: 22px; width: 100%; padding: 19px 0; border-block: 1px solid var(--line); }
:host .balance-proof > div { display: flex; flex-direction: column; align-items: center; gap: 6px; }
:host .balance-proof > div > span { color: var(--muted); font-size: 11px; }
:host .balance-proof b { font-size: 25px; color: var(--amber-bright); font-weight: 550; letter-spacing: -.5px; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
:host .balance-proof > span { color: var(--muted); }
:host .reward-arrival { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: 8px; color: var(--mint); font-size: 12px; line-height: 1.4; }
:host .reward-arrival .ui-glyph { width: 18px; height: 18px; }
:host .reward-arrival .glyph-code { color: #e9d298; }
:host .raffle-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 17px 0; border-block: 1px solid var(--line); }
:host .raffle-stats > div { display: flex; flex-direction: column; gap: 7px; }
:host .raffle-stats span, :host .raffle-stats small { color: var(--muted); font-size: 11px; line-height: 1.35; }
:host .raffle-stats strong { color: var(--amber-bright); font-size: 33px; font-weight: 550; letter-spacing: -.7px; line-height: 1.1; }
:host .raffle-stats strong small { display: block; margin-top: 5px; font-weight: 400; letter-spacing: 0; }
:host .raffle-note { font-size: 11px; text-align: center; }
:host .host-status { flex: 0 0 auto; text-align: center; }
:host .host-status > strong { display: block; font-size: 25px; color: var(--mint); font-weight: 550; margin-bottom: 7px; }
:host .live-boundary { margin-block: auto; padding-block: 25px; border-block: 1px solid var(--line); }
:host .live-boundary > strong { display: block; color: var(--amber-bright); font-size: 46px; font-weight: 550; line-height: 1.15; letter-spacing: -1px; }
:host .live-boundary > strong small { font-size: 13px; color: var(--muted); font-weight: 400; letter-spacing: 0; }
:host .live-boundary p { margin-top: 18px; color: var(--muted); font-size: 14px; }
@media (max-width: 700px) {:host .hub-balances > div > div > span { font-size: 9px; letter-spacing: 0; }
:host .hub-balances > .hub-charge { gap: 7px; }
:host .hub-balances .hub-charge > .ui-glyph { width: 19px; height: 19px; }
:host button.direction { min-height: 123px; gap: 5px; padding: 13px 10px; }
:host button.direction.has-prizes { min-height: 146px; padding-top: 35px; }
:host button.direction .direction-label { font-size: 15px; }
:host button.direction .win-total { font-size: 22px; }
:host button.direction .odds { font-size: 12px; }
:host .refund-receipt { gap: 18px; }
:host .refund-receipt > strong { font-size: 45px; }
:host .refund-icon { width: 67px; height: 67px; }
:host .refund-icon .ui-glyph { width: 35px; height: 35px; }
:host .balance-proof { padding-block: 16px; gap: 20px; }
:host .balance-proof b { font-size: 23px; }
:host .craft-cost { padding-top: 12px; font-size: 11px; gap: 8px; }
:host .craft-cost > span { gap: 5px; }
:host .craft-cost > span > .ui-glyph { width: 17px; height: 17px; }
:host .item-limit { font-size: 12px; }
:host .raffle-stats { padding-block: 13px; gap: 17px; }
:host .raffle-stats strong { font-size: 28px; }
}
@media (max-width: 700px) and (max-height: 680px) {:host button.direction { min-height: 108px; gap: 4px; padding: 10px; }
:host button.direction.has-prizes { min-height: 132px; padding-top: 33px; }
:host button.direction .win-total { font-size: 21px; }
:host button.direction .direction-label { font-size: 14px; }
:host button.direction .odds { font-size: 11px; }
:host .protection-banner { padding: 8px 10px; gap: 8px; }
:host .protection-banner > .ui-glyph { width: 21px; height: 21px; }
:host .protection-banner strong { font-size: 12px; }
:host .protection-banner span { font-size: 10px; }
:host .refund-receipt { gap: 12px; }
:host .refund-icon { width: 54px; height: 54px; }
:host .refund-icon .ui-glyph { width: 29px; height: 29px; }
:host .refund-receipt > strong { font-size: 38px; }
:host .refund-receipt > strong small { margin-top: 5px; font-size: 11px; }
:host .balance-proof { padding-block: 12px; }
:host .balance-proof b { font-size: 22px; }
:host .refund-receipt .micro { font-size: 11px; }
:host .raffle-stats { padding-block: 9px; }
:host .raffle-stats strong { font-size: 26px; }
:host .raffle-stats span, :host .raffle-stats small { font-size: 10px; }
:host .host-status > strong { font-size: 22px; }
:host .notice { font-size: 10px; padding: 7px 9px; }
}
@media (max-width: 700px) and (max-height: 530px) {:host button.direction { min-height: 96px; gap: 3px; padding: 8px; }
:host button.direction.has-prizes { min-height: 122px; padding-top: 32px; }
:host button.direction .win-total { font-size: 19px; }
:host button.direction .win-total small { font-size: 9px; margin-top: 2px; }
:host button.direction .direction-label { font-size: 13px; }
:host button.direction .odds { font-size: 10px; }
:host .protection-banner { padding: 6px 8px; }
:host .protection-banner strong { font-size: 11px; }
:host .protection-banner span { font-size: 9px; }
:host .scene:has(.protection-banner) { gap: 7px; }
:host .refund-receipt { gap: 9px; }
:host .refund-icon { width: 42px; height: 42px; }
:host .refund-icon .ui-glyph { width: 25px; height: 25px; }
:host .refund-receipt > strong { font-size: 33px; }
:host .balance-proof { padding-block: 9px; }
:host .balance-proof > div > span { font-size: 10px; }
:host .balance-proof b { font-size: 21px; }
:host .refund-receipt .micro { font-size: 10px; }
:host .item-limit { font-size: 10px; gap: 5px; }
:host .item-limit .ui-glyph { width: 19px; height: 19px; }
:host .raffle-stats strong { font-size: 24px; }
}
@media (orientation: landscape) and (max-height: 520px) {:host .scene:has(.protection-banner) { grid-template-rows: minmax(0, 1fr); }
:host .protection-banner { grid-row: 1; align-self: end; width: 48%; padding: 7px 8px; gap: 6px; }
:host .protection-banner > .ui-glyph { width: 20px; height: 20px; }
:host .protection-banner strong { font-size: 10px; }
:host .protection-banner span { font-size: 9px; }
:host .scene:has(.protection-banner) .money-row { align-self: start; }
:host button.direction { min-height: 105px; padding: 9px 12px; gap: 3px; }
:host button.direction.has-prizes { min-height: 128px; padding-top: 32px; }
:host button.direction .direction-label { font-size: 14px; }
:host button.direction .win-total { font-size: 21px; }
:host button.direction .odds { font-size: 11px; }
:host .scene[data-scene=materializer], :host .scene[data-scene=materializing] { grid-template-rows: minmax(0, 1fr) auto; }
:host .scene[data-scene=materializer] .scene-heading, :host .scene[data-scene=materializing] .scene-heading { width: 57%; }
:host .scene[data-scene=materializer] .art-stage, :host .scene[data-scene=materializing] .art-stage { grid-row: 1; }
:host .craft-cost { grid-row: 2; font-size: 10px; padding-top: 8px; gap: 6px; }
:host .craft-cost > span > .ui-glyph { width: 15px; height: 15px; }
:host .scene:has(.refund-receipt) .scene-heading { width: 48%; }
:host .refund-receipt { grid-column: 1; grid-row: 1; margin-left: 52%; height: 100%; gap: 8px; }
:host .refund-icon { width: 36px; height: 36px; }
:host .refund-icon .ui-glyph { width: 23px; height: 23px; }
:host .refund-receipt > strong { font-size: 30px; }
:host .refund-receipt > strong small { font-size: 10px; margin-top: 3px; }
:host .balance-proof { padding-block: 8px; gap: 13px; }
:host .balance-proof b { font-size: 20px; }
:host .balance-proof > div > span, :host .refund-receipt .micro { font-size: 9px; }
:host .scene[data-scene=raffle], :host .scene[data-scene=host] { grid-template-rows: minmax(0, 1fr) auto; }
:host .scene[data-scene=raffle] .scene-heading, :host .scene[data-scene=host] .scene-heading { align-self: start; }
:host .scene[data-scene=raffle] .art-stage, :host .scene[data-scene=host] .art-stage { grid-row: 1; }
:host .raffle-stats { grid-row: 2; padding-block: 8px; }
:host .raffle-stats strong { font-size: 24px; }
:host .raffle-stats span, :host .raffle-stats small { font-size: 9px; }
:host .raffle-note { position: absolute; right: 24px; bottom: 5px; width: 29%; font-size: 9px; }
:host .host-status { grid-row: 2; text-align: left; }
:host .host-status > strong { font-size: 20px; margin-bottom: 3px; }
:host .scene[data-scene=live_intro] .scene-heading { width: 49%; }
:host .live-boundary { grid-row: 1; margin-left: 54%; padding-block: 15px; }
:host .live-boundary > strong { font-size: 32px; }
:host .live-boundary > strong small { display: block; font-size: 11px; margin-top: 5px; }
:host .live-boundary p { font-size: 11px; margin-top: 10px; }
}
@media (orientation: landscape) and (max-height: 520px) {:host .hub-scene, :host .scene[data-scene=hub] { flex-direction: column; gap: 8px; padding: 7px 24px 12px; }
:host .hub-balances { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 0 0 auto; gap: 20px; padding: 0 0 8px; border-bottom: 1px solid var(--line); }
:host .hub-balances > div > div { gap: 3px; }
:host .hub-balances > div > div > span { font-size: 9px; line-height: 1.2; }
:host .hub-balances > div + div { border-left: 1px solid var(--line); padding-left: 20px; }
:host .hub-balances strong { font-size: 26px; letter-spacing: -.7px; line-height: 1.05; }
:host .hub-balances .hub-charge > .ui-glyph { width: 20px; height: 20px; }
:host .hub-grid { grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; }
:host .hub-grid .hub-tile { grid-template-columns: minmax(0, 1fr) minmax(110px, 1fr); padding: 6px 17px 6px 10px; }
:host .hub-grid .hub-tile .artifact-art { max-height: 90px; }
:host .hub-tile-label small { margin-top: 3px; }
}
:host .scene[data-scene=materializer] { gap: 18px; }
:host .scene[data-scene=materializer] .scene-heading { flex: 0 0 auto; }
:host .scene[data-scene=materializer] > .art-stage { flex: 1 1 0; min-height: 0; }
:host .materializer-quantity { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 9px; width: 100%; }
:host .materializer-quantity > label, :host .materializer-quantity > .quantity-label, :host .materializer-quantity > p:not(.code-availability) { display: block; color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.35; }
:host .code-stepper { display: grid; grid-template-columns: 48px minmax(100px, 170px) 48px; align-items: center; justify-content: center; gap: 18px; width: 100%; }
:host .code-stepper .stepper-button { display: grid; place-items: center; min-width: 48px; min-height: 48px; padding: 8px; border: 1px solid #647653; border-radius: 6px; background: #222f1f; color: var(--ink); font-size: 25px; line-height: 1; font-weight: 400; transition: border-color .12s ease, background .12s ease; }
:host .code-stepper .stepper-button:hover:not(:disabled) { border-color: var(--mint); background: #2d3d27; }
:host .code-stepper .stepper-button:active:not(:disabled) { background: #38522f; }
:host #craft-quantity { display: block; text-align: center; color: var(--ink); font-size: 40px; line-height: 1.1; letter-spacing: -1px; font-weight: 550; font-variant-numeric: tabular-nums; white-space: nowrap; }
:host .materializer-quantity .code-availability { color: var(--dim); font-size: 11px; line-height: 1.25; margin: 0; }
:host .materializer-checkout { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; min-width: 0; padding-top: 17px; border-top: 1px solid var(--line); }
:host .materializer-cost { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-width: 0; }
:host .materializer-cost > span, :host .materializer-cost > label, :host .materializer-cost > p { font-size: 12px; font-weight: 500; color: var(--muted); line-height: 1.35; }
:host .materializer-cost > div { display: inline-flex; justify-content: flex-end; align-items: baseline; gap: 7px; min-width: 0; color: var(--mint); font-size: 12px; white-space: nowrap; }
:host .materializer-cost .ui-glyph { width: 20px; height: 20px; align-self: center; }
:host #craft-charge-total { color: var(--mint); font-size: 35px; font-weight: 550; letter-spacing: -.9px; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
:host .materializer-funds { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); font-size: 11px; line-height: 1.4; text-align: right; }
:host .materializer-funds .insufficient, :host .materializer-funds[data-insufficient=true], :host .materializer-funds .shortfall, :host .materializer-funds.is-short { color: var(--amber-bright); }
:host .materializer-checkout .actions { margin-top: 4px; padding-top: 0; }
:host .materializer-checkout .actions > button { width: 100%; min-height: 58px; }
:host .scene[data-scene=craft_result] { gap: 18px; }
:host .scene[data-scene=craft_result] > .art-stage { flex: 1 1 0; min-height: 0; }
:host .scene[data-scene=craft_result] > .art-stage .backpack-art { max-height: 260px; }
:host .batch-receipt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; flex: 0 0 auto; border-block: 1px solid var(--line); padding: 17px 0; }
:host .batch-receipt > div { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
:host .batch-receipt span, :host .batch-receipt dt, :host .batch-receipt small { display: block; color: var(--muted); font-size: 11px; line-height: 1.35; }
:host .batch-receipt strong, :host .batch-receipt b, :host .batch-receipt output, :host .batch-receipt dd { display: block; color: var(--mint); font-size: 27px; font-weight: 550; line-height: 1.15; letter-spacing: -.6px; font-variant-numeric: tabular-nums; white-space: nowrap; margin: 0; }
:host .batch-receipt strong small { display: inline; color: var(--muted); font-size: 10px; font-weight: 400; letter-spacing: 0; }
@media (max-width: 700px) {:host .scene[data-scene=materializer] { gap: 16px; }
:host .materializer-quantity { gap: 7px; }
:host .code-stepper { grid-template-columns: 46px minmax(80px, 140px) 46px; gap: 18px; }
:host .code-stepper .stepper-button { min-width: 46px; min-height: 46px; }
:host #craft-quantity { font-size: 36px; }
:host .materializer-checkout { padding-top: 14px; gap: 7px; }
:host .materializer-cost { gap: 10px; }
:host .materializer-cost > span, :host .materializer-cost > label, :host .materializer-cost > p { font-size: 11px; }
:host .materializer-cost > div { gap: 5px; font-size: 11px; }
:host #craft-charge-total { font-size: 30px; }
:host .materializer-cost .ui-glyph { width: 18px; height: 18px; }
:host .materializer-funds { font-size: 10px; }
:host .materializer-checkout .actions > button { min-height: 54px; }
:host .batch-receipt { display: flex; flex-direction: column; gap: 11px; padding-block: 14px; }
:host .batch-receipt > div { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 15px; }
:host .batch-receipt strong, :host .batch-receipt b, :host .batch-receipt output, :host .batch-receipt dd { font-size: 24px; }
}
@media (max-width: 700px) and (max-height: 680px) {:host .scene[data-scene=materializer], :host .scene[data-scene=craft_result] { gap: 10px; }
:host .materializer-quantity { gap: 5px; }
:host .materializer-quantity > label, :host .materializer-quantity > .quantity-label, :host .materializer-quantity > p:not(.code-availability) { font-size: 11px; }
:host .code-stepper { grid-template-columns: 44px minmax(80px, 130px) 44px; gap: 14px; }
:host .code-stepper .stepper-button { min-width: 44px; min-height: 44px; padding: 6px; font-size: 23px; }
:host #craft-quantity { font-size: 33px; }
:host .materializer-quantity .code-availability { font-size: 10px; }
:host .materializer-checkout { padding-top: 10px; gap: 5px; }
:host #craft-charge-total { font-size: 28px; }
:host .materializer-cost > span, :host .materializer-cost > label, :host .materializer-cost > p { font-size: 10px; }
:host .materializer-checkout .actions > button { min-height: 50px; }
:host .batch-receipt { gap: 8px; padding-block: 11px; }
:host .batch-receipt strong, :host .batch-receipt b, :host .batch-receipt output, :host .batch-receipt dd { font-size: 22px; }
:host .batch-receipt span, :host .batch-receipt dt, :host .batch-receipt small { font-size: 10px; }
}
@media (max-width: 350px) {:host .materializer-cost { flex-wrap: wrap; }
:host .materializer-cost > div { margin-left: auto; }
:host #craft-charge-total { font-size: 26px; letter-spacing: -.6px; }
:host .materializer-cost > div { font-size: 10px; }
:host .materializer-cost .ui-glyph { width: 16px; height: 16px; }
}
@media (max-width: 700px) and (max-height: 530px) {:host .scene[data-scene=materializer], :host .scene[data-scene=craft_result] { gap: 8px; }
:host .materializer-quantity { gap: 3px; }
:host #craft-quantity { font-size: 30px; }
:host .materializer-checkout { padding-top: 8px; gap: 4px; }
:host #craft-charge-total { font-size: 25px; }
:host .materializer-checkout .actions > button { min-height: 48px; }
:host .batch-receipt { gap: 6px; padding-block: 9px; }
:host .batch-receipt strong, :host .batch-receipt b, :host .batch-receipt output, :host .batch-receipt dd { font-size: 20px; }
}
@media (orientation: landscape) and (max-height: 520px) {:host .scene[data-scene=materializer] { grid-template-columns: minmax(0, 1fr) minmax(250px, 37%); grid-template-rows: auto minmax(0, 1fr); gap: 12px 28px; padding: 8px 24px 15px; }
:host .scene[data-scene=materializer] > .scene-heading { grid-column: 1; grid-row: 1; align-self: start; width: 100%; }
:host .scene[data-scene=materializer] > .scene-heading .hero-title { font-size: 27px; }
:host .scene[data-scene=materializer] > .art-stage { grid-column: 1; grid-row: 2; justify-content: center; pointer-events: auto; }
:host .scene[data-scene=materializer] > .art-stage .artifact-art { width: min(100%, 280px); max-height: 180px; }
:host .scene[data-scene=materializer] > .materializer-quantity { grid-column: 2; grid-row: 1; align-self: start; gap: 3px; }
:host .materializer-quantity > label, :host .materializer-quantity > .quantity-label, :host .materializer-quantity > p:not(.code-availability) { font-size: 10px; }
:host .code-stepper { grid-template-columns: 44px minmax(70px, 110px) 44px; gap: 15px; }
:host .code-stepper .stepper-button { min-height: 44px; min-width: 44px; padding: 6px; font-size: 23px; }
:host #craft-quantity { font-size: 31px; }
:host .materializer-quantity .code-availability { font-size: 9px; }
:host .scene[data-scene=materializer] > .materializer-checkout { grid-column: 2; grid-row: 2; align-self: end; gap: 5px; padding-top: 9px; }
:host .materializer-cost > span, :host .materializer-cost > label, :host .materializer-cost > p { font-size: 10px; }
:host .materializer-cost > div { gap: 4px; font-size: 10px; }
:host .materializer-cost .ui-glyph { width: 16px; height: 16px; }
:host #craft-charge-total { font-size: 27px; }
:host .materializer-funds { font-size: 9px; }
:host .materializer-checkout .actions { display: grid; grid-template-columns: 1fr; margin: 2px 0 0; }
:host .materializer-checkout .actions > button { min-height: 48px; }
:host .scene[data-scene=craft_result] { grid-template-columns: minmax(0, 1fr) minmax(240px, 34%); grid-template-rows: minmax(0, 1fr) auto; gap: 12px 24px; }
:host .scene[data-scene=craft_result] > .scene-heading { grid-column: 1; grid-row: 1; width: 53%; align-self: center; }
:host .scene[data-scene=craft_result] > .art-stage { grid-column: 1; grid-row: 1; justify-content: flex-end; }
:host .scene[data-scene=craft_result] > .art-stage .artifact-art { width: 43%; max-height: 145px; }
:host .scene[data-scene=craft_result] > .batch-receipt { grid-column: 1; grid-row: 2; gap: 10px; padding-block: 10px; }
:host .scene[data-scene=craft_result] > .actions { grid-column: 2; grid-row: 1 / -1; }
:host .batch-receipt strong, :host .batch-receipt b, :host .batch-receipt output, :host .batch-receipt dd { font-size: 23px; }
:host .batch-receipt span, :host .batch-receipt dt, :host .batch-receipt small { font-size: 9px; }
}
:host .hub-grid .hub-tile.is-locked, :host .hub-grid .hub-tile.is-locked:hover, :host .hub-grid .hub-tile.is-locked:active {
  opacity: 1;
  cursor: default;
  transform: none;
  background: #1a1f18;
  border-color: #3c4535;
  box-shadow: none;
}
:host .hub-grid .hub-tile.is-locked .hub-art { filter: grayscale(1); opacity: .32; }
:host .hub-grid .hub-tile.is-locked .hub-tile-label { color: #a1a69a; }
:host .hub-grid .hub-tile.is-locked .hub-tile-label small { color: #8d9584; }
:host .scene.tutorial-complete { gap: 20px; }
:host .tutorial-complete > .scene-heading { flex: 0 0 auto; }
:host .tutorial-complete > .scene-heading .hero-title { max-width: 740px; font-size: 41px; letter-spacing: -1.3px; line-height: 1.12; text-wrap: balance; }
:host .tutorial-complete > .actions { grid-template-columns: 1fr; }
:host .tutorial-complete > .actions > button { width: 100%; }
:host .tutorial-complete > .refund-receipt { min-height: 0; }
:host .tutorial-complete > .money-row { gap: 7px; }
:host .scene[data-scene=item] > .actions > button:only-child { min-height: 60px; }
@media (max-width: 700px) {:host .scene.tutorial-complete { gap: 16px; }
:host .tutorial-complete > .scene-heading .hero-title { font-size: 31px; letter-spacing: -.95px; }
:host .tutorial-complete > .refund-receipt { gap: 16px; }
:host .tutorial-complete > .money-row .hero-value { font-size: 38px; }
:host .scene[data-scene=item] > .actions > button:only-child { min-height: 58px; }
}
@media (max-width: 700px) and (max-height: 680px) {:host .scene.tutorial-complete { gap: 12px; }
:host .tutorial-complete > .scene-heading .hero-title { font-size: 28px; line-height: 1.1; }
:host .tutorial-complete > .refund-receipt { gap: 11px; }
:host .tutorial-complete > .money-row .hero-value { font-size: 35px; }
:host .scene[data-scene=item] > .actions > button:only-child { min-height: 54px; }
}
@media (max-width: 700px) and (max-height: 530px) {:host .scene.tutorial-complete { gap: 9px; }
:host .tutorial-complete > .scene-heading .hero-title { font-size: 25px; letter-spacing: -.7px; }
:host .tutorial-complete > .refund-receipt { gap: 8px; }
:host .tutorial-complete > .refund-receipt > strong { font-size: 33px; }
:host .tutorial-complete > .money-row .hero-value { font-size: 31px; }
:host .tutorial-complete > .money-row .eyebrow { font-size: 8px; }
:host .tutorial-complete > .card-table { padding-block: 2px 7px; }
:host .scene[data-scene=item] > .actions > button:only-child { min-height: 52px; padding-block: 12px; }
}
@media (orientation: landscape) and (max-height: 520px) {:host .scene.tutorial-complete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(205px, .95fr); grid-template-rows: minmax(0, 1fr); gap: 21px; padding: 9px 24px 16px; }
:host .scene.tutorial-complete > .scene-heading { grid-column: 1; grid-row: 1; width: 100%; align-self: center; }
:host .tutorial-complete > .scene-heading .hero-title { font-size: 28px; letter-spacing: -.9px; line-height: 1.13; }
:host .tutorial-complete > .scene-heading .eyebrow { font-size: 9px; }
:host .scene.tutorial-complete > .refund-receipt { grid-column: 2; grid-row: 1; margin-left: 0; height: 100%; gap: 9px; }
:host .tutorial-complete > .refund-receipt > strong { font-size: 31px; }
:host .tutorial-complete > .refund-receipt .balance-proof { gap: 11px; padding-block: 9px; }
:host .tutorial-complete > .refund-receipt .balance-proof b { font-size: 21px; }
:host .scene.tutorial-complete > .money-row { grid-column: 2; grid-row: 1; width: 100%; align-self: start; margin: 0; }
:host .tutorial-complete > .money-row .hero-value { font-size: 30px; }
:host .tutorial-complete > .money-row .hero-value .unit { font-size: 10px; }
:host .scene.tutorial-complete > .card-table { grid-column: 2; grid-row: 1; align-self: end; justify-content: center; height: min(155px, 65%); padding-block: 2px 7px; }
:host .tutorial-complete > .card-table .playing-card { max-width: none; max-height: 145px; }
:host .scene.tutorial-complete > .actions { grid-column: 3; grid-row: 1; align-self: center; margin: 0; }
:host .scene[data-scene=item] > .actions > button:only-child { min-height: 62px; padding: 13px 15px; }
}
:host .scene.tutorial-refund { gap: 20px; }
:host .tutorial-refund > .scene-heading { flex: 0 0 auto; }
:host .tutorial-refund > .scene-heading .hero-title { font-size: 40px; letter-spacing: -1.2px; }
:host .tutorial-refund > .scene-heading .lede { max-width: 540px; }
:host .tutorial-refund > .refund-receipt { min-height: 0; gap: 17px; }
:host .tutorial-refund .refund-icon { width: 63px; height: 63px; }
:host .tutorial-refund .refund-icon .ui-glyph { width: 34px; height: 34px; }
:host .tutorial-refund .refund-receipt > strong { font-size: 48px; }
:host .refund-fiat { display: flex; flex-direction: column; align-items: center; gap: 5px; width: min(100%, 430px); border-top: 1px solid #57694773; padding-top: 18px; }
:host .refund-fiat > strong, :host .refund-fiat [data-usd-value] { display: block; color: var(--ink); font-size: 35px; font-weight: 550; line-height: 1.1; letter-spacing: -.7px; font-variant-numeric: tabular-nums; white-space: nowrap; }
:host .refund-fiat > span { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; }
:host .refund-fiat > small, :host .refund-fiat [data-price-source] { display: block; color: var(--dim); font-size: 10px; line-height: 1.5; letter-spacing: 0; }
:host .refund-fiat.is-loading > strong, :host .refund-fiat.is-unavailable > strong, :host .refund-fiat[data-state=loading] > strong, :host .refund-fiat[data-state=unavailable] > strong { font-size: 16px; font-weight: 500; color: var(--muted); letter-spacing: 0; white-space: normal; }
:host .refund-explanation { max-width: 380px; color: var(--muted); font-size: 13px; line-height: 1.6; text-wrap: pretty; }
:host .tutorial-refund > .actions { grid-template-columns: 1fr; }
:host .tutorial-finish { display: flex; flex-direction: column; flex: 1 1 0; align-items: center; justify-content: center; gap: 27px; min-height: 0; text-align: center; }
:host .tutorial-finish .ui-glyph { width: 83px; height: 83px; color: var(--mint); }
:host .tutorial-finish .artifact-art { width: min(100%, 220px); max-height: 210px; }
:host .tutorial-finish > p { color: var(--muted); max-width: 390px; font-size: 16px; line-height: 1.6; text-wrap: balance; }
@media (max-width: 700px) {:host .scene.tutorial-refund { gap: 16px; }
:host .tutorial-refund > .scene-heading .hero-title { font-size: 33px; letter-spacing: -.9px; }
:host .tutorial-refund > .scene-heading .lede { font-size: 14px; }
:host .tutorial-refund > .refund-receipt { gap: 15px; }
:host .tutorial-refund .refund-icon { width: 56px; height: 56px; }
:host .tutorial-refund .refund-icon .ui-glyph { width: 31px; height: 31px; }
:host .tutorial-refund .refund-receipt > strong { font-size: 44px; }
:host .refund-fiat { padding-top: 15px; gap: 5px; }
:host .refund-fiat > strong, :host .refund-fiat [data-usd-value] { font-size: 32px; }
:host .refund-fiat > span { font-size: 11px; }
:host .refund-fiat > small, :host .refund-fiat [data-price-source] { font-size: 9px; }
:host .refund-explanation { max-width: 340px; font-size: 12px; line-height: 1.55; }
:host .tutorial-finish { gap: 23px; }
:host .tutorial-finish .ui-glyph { width: 70px; height: 70px; }
:host .tutorial-finish > p { font-size: 15px; line-height: 1.5; max-width: 310px; }
}
@media (max-width: 700px) and (max-height: 680px) {:host .scene.tutorial-refund { gap: 11px; }
:host .tutorial-refund > .scene-heading .hero-title { font-size: 29px; }
:host .tutorial-refund > .scene-heading .lede { font-size: 12px; }
:host .tutorial-refund > .refund-receipt { gap: 11px; }
:host .tutorial-refund .refund-icon { width: 43px; height: 43px; }
:host .tutorial-refund .refund-icon .ui-glyph { width: 26px; height: 26px; }
:host .tutorial-refund .refund-receipt > strong { font-size: 38px; }
:host .tutorial-refund .refund-receipt > strong > small { font-size: 11px; margin-top: 4px; }
:host .refund-fiat { padding-top: 11px; gap: 4px; }
:host .refund-fiat > strong, :host .refund-fiat [data-usd-value] { font-size: 29px; }
:host .refund-fiat > span { font-size: 10px; }
:host .refund-explanation { font-size: 11px; line-height: 1.45; }
:host .tutorial-finish { gap: 20px; }
:host .tutorial-finish .ui-glyph { width: 62px; height: 62px; }
:host .tutorial-finish > p { font-size: 13px; }
}
@media (max-width: 700px) and (max-height: 530px) {:host .scene.tutorial-refund { gap: 8px; }
:host .tutorial-refund > .scene-heading .hero-title { font-size: 27px; }
:host .tutorial-refund > .scene-heading .lede { font-size: 11px; line-height: 1.4; }
:host .tutorial-refund > .refund-receipt { gap: 8px; }
:host .tutorial-refund .refund-icon { width: 33px; height: 33px; }
:host .tutorial-refund .refund-icon .ui-glyph { width: 22px; height: 22px; }
:host .tutorial-refund .refund-receipt > strong { font-size: 32px; }
:host .tutorial-refund .refund-receipt > strong > small { font-size: 10px; margin-top: 3px; }
:host .refund-fiat { padding-top: 8px; gap: 3px; }
:host .refund-fiat > strong, :host .refund-fiat [data-usd-value] { font-size: 27px; }
:host .refund-fiat > span { font-size: 9px; }
:host .refund-fiat > small, :host .refund-fiat [data-price-source] { font-size: 8px; }
:host .refund-explanation { font-size: 10px; line-height: 1.4; }
:host .tutorial-finish { gap: 17px; }
:host .tutorial-finish .ui-glyph { width: 55px; height: 55px; }
:host .tutorial-finish > p { font-size: 12px; max-width: 265px; }
}
@media (orientation: landscape) and (max-height: 520px) {:host .scene.tutorial-refund { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.2fr) minmax(195px, .8fr); grid-template-rows: minmax(0, 1fr); gap: 20px; padding: 9px 24px 15px; }
:host .scene.tutorial-refund > .scene-heading { grid-column: 1; grid-row: 1; width: 100%; align-self: center; }
:host .tutorial-refund > .scene-heading .hero-title { font-size: 29px; letter-spacing: -.9px; }
:host .tutorial-refund > .scene-heading .lede { font-size: 12px; }
:host .scene.tutorial-refund > .refund-receipt { grid-column: 2; grid-row: 1; height: 100%; margin: 0; gap: 7px; }
:host .tutorial-refund .refund-icon { width: 30px; height: 30px; }
:host .tutorial-refund .refund-icon .ui-glyph { width: 21px; height: 21px; }
:host .tutorial-refund .refund-receipt > strong { font-size: 32px; }
:host .tutorial-refund .refund-receipt > strong > small { font-size: 10px; margin-top: 3px; }
:host .refund-fiat { padding-top: 8px; gap: 3px; }
:host .refund-fiat > strong, :host .refund-fiat [data-usd-value] { font-size: 26px; }
:host .refund-fiat > span { font-size: 9px; }
:host .refund-fiat > small, :host .refund-fiat [data-price-source] { font-size: 8px; }
:host .refund-explanation { max-width: 280px; font-size: 9px; line-height: 1.4; }
:host .scene.tutorial-refund > .actions { grid-column: 3; grid-row: 1; align-self: center; margin: 0; }
:host .scene[data-scene=tutorial_complete] > .tutorial-finish { grid-column: 2; grid-row: 1; height: 100%; margin: 0; gap: 20px; }
:host .tutorial-finish .ui-glyph { width: 58px; height: 58px; }
:host .tutorial-finish > p { font-size: 13px; max-width: 260px; }
}
:host .refund-fiat[data-price-state=loading] [data-usd-value], :host .refund-fiat[data-price-state=unavailable] [data-usd-value] { font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0; line-height: 1.4; white-space: normal; }
:host .tutorial-refund > .refund-explanation { flex: 0 0 auto; align-self: center; margin-inline: auto; text-align: center; }
:host .tutorial-finish .refund-icon { width: 112px; height: 112px; }
:host .tutorial-finish .refund-icon .ui-glyph { width: 61px; height: 61px; }
@media (max-width: 700px) {:host .tutorial-finish .refund-icon { width: 98px; height: 98px; }
:host .tutorial-finish .refund-icon .ui-glyph { width: 55px; height: 55px; }
}
@media (max-width: 700px) and (max-height: 530px) {:host .tutorial-finish .refund-icon { width: 77px; height: 77px; }
:host .tutorial-finish .refund-icon .ui-glyph { width: 44px; height: 44px; }
:host .refund-fiat[data-price-state=loading] [data-usd-value], :host .refund-fiat[data-price-state=unavailable] [data-usd-value] { font-size: 13px; }
}
@media (orientation: landscape) and (max-height: 520px) {:host .scene.tutorial-refund > .refund-receipt { height: calc(100% - 46px); align-self: start; }
:host .scene.tutorial-refund > .refund-explanation { grid-column: 2; grid-row: 1; align-self: end; margin: 0; width: 100%; font-size: 9px; line-height: 1.4; }
:host .tutorial-finish .refund-icon { width: 83px; height: 83px; }
:host .tutorial-finish .refund-icon .ui-glyph { width: 48px; height: 48px; }
:host .refund-fiat[data-price-state=loading] [data-usd-value], :host .refund-fiat[data-price-state=unavailable] [data-usd-value] { font-size: 13px; }
}
:host([data-journey=combined]) {
  --coal: #11100b;
  --panel: #1b1810;
  --raised: #292216;
  --ink: #f5e9d3;
  --muted: #c1b49a;
  --dim: #9e9178;
  --line: #443a28;
  --amber: #f7bf68;
  --amber-bright: #ffdb9d;
  --amber-ink: #241707;
  --mint: #f7bf68;
  --mint-dim: #d2ac70;
  background: radial-gradient(ellipse at 75% 30%, #3b2c1c55, transparent 66%), #17140f;
  color: var(--ink);
}
:host([data-journey=combined]) .prototype-layout {
  grid-template-columns: 220px minmax(0, 1120px);
  gap: 28px;
  padding: 24px;
}
:host([data-journey=combined]) .review-rail { width: 220px; scrollbar-color: #655238 transparent; }
:host([data-journey=combined]) .review-heading { font-size: 27px; line-height: 1.15; }
:host([data-journey=combined]) .review-intro { font-size: 13px; }
:host([data-journey=combined]) .step-list button { font-size: 11px; padding-inline: 8px; gap: 9px; }
:host([data-journey=combined]) .step-list button:is(.is-current, [aria-current=step], [aria-pressed=true]) { background: #302618; border-color: #69502e; }
:host([data-journey=combined]) .step-list button:hover { background: #282217; }
:host([data-journey=combined]) .review-controls button { border-color: var(--line); }
:host([data-journey=combined]) .experience-shell {
  height: min(850px, calc(var(--viewport-height) - 48px));
  border: 6px solid #9e9073;
  border-radius: 17px;
  box-shadow: 0 24px 80px #0005, 0 0 0 1px #3e3324, inset 0 0 0 1px #e5c89118;
  background: var(--coal);
}
:host([data-journey=combined]) .terminal-app { background: var(--coal); }
:host([data-journey=combined]) .app-bar { border-bottom-color: var(--line); gap: 18px; }
:host([data-journey=combined]) .brand { color: var(--amber-bright); font-size: 11px; }
:host([data-journey=combined]) .frame-caption { background: #18140e; border-color: var(--line); color: var(--dim); font-size: 7px; letter-spacing: .7px; }
:host([data-journey=combined]) #journey-wallet { padding: 11px 14px; border: 1px solid var(--line); color: var(--ink); background: #201b11; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
:host([data-journey=combined]) #terminal-button { background: #2b2316; border-color: #796039; color: var(--amber-bright); }
:host([data-journey=combined]) #terminal-button:hover { background: #3b2c19; border-color: var(--amber); }
:host([data-journey=combined]) #terminal-button.has-rewards { color: var(--amber-bright); background: #3c2d17; border-color: var(--amber); animation-name: journey-terminal-notice; }
:host([data-journey=combined]) #terminal-button .terminal-count { color: var(--amber-ink); }
:host([data-journey=combined]) .resource-chip, :host([data-journey=combined]) .reward-icon { background: #4b351a55; border-color: #c7964966; }
:host([data-journey=combined]) .reward-icon[data-reward=code] { color: #ead4af; background: #362f2355; border-color: #a38a6455; }
:host([data-journey=combined]) .flying-reward { background: #4b3419; border-color: var(--amber); box-shadow: 0 0 18px #f7bf6844, 0 3px 8px #0005; }
:host([data-journey=combined]) .hub-grid .hub-tile { background: radial-gradient(ellipse at 50% 40%, #b9894520, transparent 78%), #1d1911; border-color: #7e674348; }
:host([data-journey=combined]) .hub-grid .hub-tile:hover { background-color: #2b2114; border-color: #b38c51; }
:host([data-journey=combined]) .hub-grid .hub-tile.is-next { border-color: #bc8b49; background-color: #302515; }
:host([data-journey=combined]) .hub-grid .hub-tile.is-locked { background: #191711; border-color: #3b3529; }
:host([data-journey=combined]) .hub-grid .hub-tile.is-locked .hub-tile-label { color: #aba18e; }
:host([data-journey=combined]) .hub-grid .hub-tile.is-locked .hub-tile-label small { color: #958b78; }
:host([data-journey=combined]) .hub-tile .tile-badge { background: #392a15; border-color: #c4965566; }
:host([data-journey=combined]) .artifact-art { filter: sepia(.85) saturate(.8) hue-rotate(-12deg); }
:host([data-journey=combined]) .code-slip { border-color: #665033; background: linear-gradient(110deg, #50402450, #20180e30); }
:host([data-journey=combined]) .sample-banner { color: var(--amber-bright); background: #332615; border-color: #806239; }
:host([data-journey=combined]) .protection-banner { color: var(--amber-bright); background: #48341966; border-color: #bb8c4866; }
:host([data-journey=combined]) .refund-icon { background: radial-gradient(circle, #e3b46810, transparent 75%); border-color: #ba935855; }
:host([data-journey=combined]) .code-stepper .stepper-button { background: #2b2317; border-color: #7e6440; }
:host([data-journey=combined]) .code-stepper .stepper-button:hover:not(:disabled) { background: #3c2d19; border-color: var(--amber); }
:host([data-journey=combined]) .code-stepper .stepper-button:active:not(:disabled) { background: #543c1d; }
:host([data-journey=combined]) :is(dialog.sheet, #experience-details, .sheet-header) { background: #1b1810; border-color: #6a5435; }
:host([data-journey=combined]) dialog::backdrop { background: #0a0805bf; }
:host([data-journey=combined]) .status-line::before { box-shadow: 0 0 10px #f7bf6835; }
:host([data-journey=combined]) .journey-entry { padding: 44px 48px; }
:host([data-journey=combined]) .entry-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: center; flex: 1 1 0; min-width: 0; min-height: 0; }
:host([data-journey=combined]) .entry-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; min-width: 0; min-height: 0; }
:host([data-journey=combined]) .entry-copy .hero-title { font-size: clamp(35px, 3.7vw, 53px); max-width: 480px; }
:host([data-journey=combined]) .entry-copy .lede { font-size: 16px; max-width: 390px; }
:host([data-journey=combined]) .entry-copy .actions { margin-top: 5px; max-width: 420px; padding-top: 0; }
:host([data-journey=combined]) .entry-art { position: relative; display: flex; align-items: center; justify-content: center; align-self: stretch; min-width: 0; min-height: 0; color: var(--amber); isolation: isolate; }
:host([data-journey=combined]) .entry-art::before { content: ''; position: absolute; inset: 12% -10%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse, #b37d3219, transparent 67%); }
:host([data-journey=combined]) .entry-art > .artifact-art { width: 100%; height: 100%; max-height: 380px; }
:host([data-journey=combined]) .entry-art > .ui-glyph { width: min(75%, 220px); height: auto; aspect-ratio: 1; stroke-width: 1; opacity: .9; }
:host([data-journey=combined]) .entry-art .card-table { width: 100%; height: min(100%, 330px); }
:host([data-journey=combined]) .entry-art .playing-card { max-height: 300px; }
:host([data-journey=combined]) .status-orbit { display: grid; place-items: center; flex: 0 0 auto; width: 104px; height: 104px; border: 1px solid #8a693955; border-radius: 50%; color: var(--amber); background: radial-gradient(circle, #f7bf680d, transparent 73%); }
:host([data-journey=combined]) .status-orbit > svg { width: 42px; height: 42px; }
:host([data-journey=combined]) .status-orbit .horizontal-loader { margin: 0; }
:host([data-journey=combined]) .journey-game:has(.game-layout) { display: flex; padding: 0; gap: 0; }
:host([data-journey=combined]) .game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; flex: 1 1 0; min-width: 0; min-height: 0; height: 100%; }
:host([data-journey=combined]) .game-main { display: flex; flex-direction: column; gap: 26px; min-width: 0; min-height: 0; padding: 32px; }
:host([data-journey=combined]) .game-main > .scene-heading { flex: 0 0 auto; }
:host([data-journey=combined]) .game-main .hero-title { font-size: 32px; line-height: 1.15; letter-spacing: -.9px; }
:host([data-journey=combined]) .game-main .lede { font-size: 14px; margin-top: 9px; }
:host([data-journey=combined]) .game-playfield { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, 200px) minmax(0, 1fr); align-items: center; gap: 16px; flex: 1 1 0; min-width: 0; min-height: 0; }
:host([data-journey=combined]) .game-playfield .card-table { width: 100%; height: 100%; max-height: 340px; padding: 6px 0 10px; min-width: 0; }
:host([data-journey=combined]) .game-playfield .playing-card { height: 100%; max-height: 310px; max-width: 100%; }
:host([data-journey=combined]) .game-playfield:has(> .card-table:only-child) { grid-template-columns: 1fr; }
:host([data-journey=combined]) .game-playfield > .card-table:only-child { justify-self: center; }
:host([data-journey=combined]) .game-playfield button.direction { min-height: 160px; padding: 22px 8px; grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 11px; width: 100%; }
:host([data-journey=combined]) .game-playfield button.direction .arrow { font-size: 33px; line-height: 1; }
:host([data-journey=combined]) .game-playfield button.direction .odds { font-size: 25px; line-height: 1.1; }
:host([data-journey=combined]) .game-playfield button.direction .button-sub { font-size: 11px; line-height: 1.35; }
:host([data-journey=combined]) .game-main > .actions { margin-top: 0; padding-top: 0; }
:host([data-journey=combined]) .game-sidebar { display: flex; flex-direction: column; gap: 30px; min-width: 0; padding: 34px 24px; border-left: 1px solid var(--line); background: linear-gradient(110deg, #2e241435, #1c180f55); }
:host([data-journey=combined]) .game-sidebar :is(.stake-summary, .starting-stake, .stack-summary) { min-width: 0; }
:host([data-journey=combined]) .game-sidebar :is(.label, .eyebrow, small) { display: block; font-size: 11px; font-weight: 500; line-height: 1.45; letter-spacing: .1px; color: var(--muted); }
:host([data-journey=combined]) .game-sidebar :is(.stake-summary, .stack-summary) > strong { display: block; margin-top: 10px; color: var(--amber); font-size: 34px; line-height: 1.1; letter-spacing: -1px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
:host([data-journey=combined]) .game-sidebar strong .unit { display: block; margin-top: 7px; font-size: 11px; }
:host([data-journey=combined]) .game-sidebar p { color: var(--muted); font-size: 11px; line-height: 1.5; margin-top: 10px; }
:host([data-journey=combined]) .starting-stake > div { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 6px; margin-top: 10px; }
:host([data-journey=combined]) .starting-stake :is(output, strong) { text-align: center; font-size: 22px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
:host([data-journey=combined]) .starting-stake button { min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 4px; background: #282014; color: var(--amber); font-size: 22px; line-height: 1; }
:host([data-journey=combined]) .stack-summary { border-top: 1px solid var(--line); padding-top: 25px; }
:host([data-journey=combined]) .game-sidebar .stack-summary > strong { font-size: 27px; }
:host([data-journey=combined]) .stack-summary .actions { grid-template-columns: 1fr; gap: 8px; margin-top: 18px; }
:host([data-journey=combined]) .stack-summary :is(button.secondary, button.text-button) { min-height: 44px; width: 100%; padding: 10px; font-size: 12px; }
:host([data-journey=combined]) .game-money { display: flex; flex-direction: column; gap: 7px; flex: 0 0 auto; position: relative; min-width: 0; }
:host([data-journey=combined]) .game-money :is(.label, small) { color: var(--muted); font-size: 12px; }
:host([data-journey=combined]) .game-money > strong { color: var(--amber-bright); font-size: 44px; line-height: 1.08; letter-spacing: -1.4px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
:host([data-journey=combined]) .game-money > strong .unit { font-size: 12px; letter-spacing: 0; margin-left: 7px; }
:host([data-journey=combined]) .game-money .text-button { position: absolute; top: -8px; right: 0; }
:host([data-journey=combined]) .game-money .mobile-bet-edit { display: none; }
:host([data-journey=combined]) .destination-empty { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; }
:host([data-journey=combined]) .destination-empty .art-stage { flex: 1 1 0; max-height: 300px; }
:host([data-journey=combined]) .destination-empty .lede { max-width: 400px; }
@keyframes journey-terminal-notice { 50% { box-shadow: 0 0 17px #f7bf6824, inset 0 0 12px #f7bf6808; border-color: var(--amber-bright); } }
@media (min-width: 901px) and (max-width: 1199px) {:host([data-journey=combined]) .prototype-layout { grid-template-columns: 175px minmax(0, 1fr); padding: 18px; gap: 18px; }
:host([data-journey=combined]) .review-rail { width: 175px; }
:host([data-journey=combined]) .review-heading { font-size: 23px; }
:host([data-journey=combined]) .game-layout { grid-template-columns: minmax(0, 1fr) 195px; }
:host([data-journey=combined]) .game-main { padding: 24px; gap: 20px; }
:host([data-journey=combined]) .game-sidebar { padding: 28px 16px; }
:host([data-journey=combined]) .game-playfield { grid-template-columns: minmax(0, 1fr) minmax(90px, 135px) minmax(0, 1fr); gap: 10px; }
:host([data-journey=combined]) .game-playfield button.direction { font-size: 14px; }
:host([data-journey=combined]) .journey-entry { padding: 34px; }
:host([data-journey=combined]) .entry-layout { gap: 25px; }
}
@media (min-width: 901px) {:host([data-journey=combined]) .scene:is([data-scene=game_choose], [data-scene=game_guessing], [data-scene=game_win], [data-scene=game_tie]) .game-main > .game-money { display: none; }
}
@media (max-width: 900px) {:host([data-journey=combined]) .game-table .game-main > .scene-heading { display: none; }
:host([data-journey=combined]) .game-money .mobile-bet-edit { display: inline-flex; min-width: 44px; min-height: 44px; }
:host([data-journey=combined]) { --review-height: 36px; background: var(--coal); }
:host([data-journey=combined]) .review-bar { display: flex; align-items: center; justify-content: space-between; height: var(--review-height); gap: 8px; padding: 0 18px; color: #dac8a9; background: #2a2114; border-bottom: 1px solid #6f5430; }
:host([data-journey=combined]) .review-bar > span { font-size: 7px; line-height: 1.35; letter-spacing: .5px; }
:host([data-journey=combined]) .review-bar > button { min-width: 44px; min-height: 36px; padding: 0 3px; border: 0; background: transparent; color: #ffe1af; font-size: 10px; }
:host([data-journey=combined]) .review-rail { display: none; }
:host([data-journey=combined]) .prototype-layout { display: block; height: calc(var(--viewport-height) - var(--review-height)); padding: 0; }
:host([data-journey=combined]) .experience-shell { width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; grid-template-rows: minmax(0, 1fr); }
:host([data-journey=combined]) .frame-caption { display: none; }
:host([data-journey=combined]) .terminal-app { grid-template-rows: 64px minmax(0, 1fr); }
:host([data-journey=combined]) .app-bar { padding: 9px 24px; gap: 11px; border-bottom-color: transparent; }
:host([data-journey=combined]) .app-bar .brand { font-size: 7px; }
:host([data-journey=combined]) #journey-wallet { display: none; }
:host([data-journey=combined]) #terminal-button { min-width: 95px; font-size: 11px; }
:host([data-journey=combined]) .journey-entry { padding: 28px 24px 24px; }
:host([data-journey=combined]) .entry-layout { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
:host([data-journey=combined]) .entry-copy { display: contents; }
:host([data-journey=combined]) .entry-copy .scene-heading { order: 0; flex: 0 0 auto; }
:host([data-journey=combined]) .entry-copy .hero-title { font-size: 38px; letter-spacing: -1.25px; max-width: 440px; }
:host([data-journey=combined]) .entry-copy .lede { font-size: 15px; line-height: 1.5; max-width: 400px; }
:host([data-journey=combined]) .entry-art { order: 1; flex: 1 1 0; width: 100%; align-self: stretch; max-height: none; }
:host([data-journey=combined]) .entry-art > .artifact-art { max-height: 310px; max-width: 320px; }
:host([data-journey=combined]) .entry-art > .ui-glyph { width: min(50%, 145px); max-height: 100%; }
:host([data-journey=combined]) .entry-art .card-table { height: 100%; max-height: 280px; }
:host([data-journey=combined]) .entry-copy .actions { order: 2; flex: 0 0 auto; margin-top: 0; max-width: none; }
:host([data-journey=combined]) .game-layout { display: flex; }
:host([data-journey=combined]) .game-sidebar { display: none; }
:host([data-journey=combined]) .game-main { padding: 22px 24px 24px; gap: 24px; width: 100%; }
:host([data-journey=combined]) .game-main .hero-title { font-size: 31px; }
:host([data-journey=combined]) .game-playfield { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) auto; gap: 24px 12px; align-items: stretch; }
:host([data-journey=combined]) .game-playfield .card-table { grid-column: 1 / -1; grid-row: 1; max-height: none; padding: 0 0 4px; }
:host([data-journey=combined]) .game-playfield .playing-card { max-height: 310px; }
:host([data-journey=combined]) .game-playfield button.direction { grid-row: 2; min-height: 104px; padding: 14px 8px; gap: 7px; grid-template-columns: auto auto; grid-template-rows: auto auto; }
:host([data-journey=combined]) .game-playfield button.direction:first-child { grid-column: 1; }
:host([data-journey=combined]) .game-playfield button.direction:last-child { grid-column: 2; }
:host([data-journey=combined]) .game-playfield button.direction .arrow { font-size: 24px; }
:host([data-journey=combined]) .game-playfield button.direction .odds { grid-column: 1 / -1; font-size: 24px; }
:host([data-journey=combined]) .game-playfield:has(> .card-table:only-child) { grid-template-rows: minmax(0, 1fr); }
:host([data-journey=combined]) .game-main > .actions { padding-top: 0; }
:host([data-journey=combined]) .game-money > strong { font-size: 46px; }
:host([data-journey=combined]) .status-orbit { width: 82px; height: 82px; }
}
@media (max-width: 700px) and (max-height: 680px) {:host([data-journey=combined]) .terminal-app { grid-template-rows: 58px minmax(0, 1fr); }
:host([data-journey=combined]) .journey-entry { padding: 15px 22px 18px; }
:host([data-journey=combined]) .entry-layout { gap: 16px; }
:host([data-journey=combined]) .entry-copy .hero-title { font-size: 32px; }
:host([data-journey=combined]) .entry-copy .lede { font-size: 13px; line-height: 1.45; margin-top: 10px; }
:host([data-journey=combined]) .entry-art .card-table { max-height: 190px; }
:host([data-journey=combined]) .game-main { padding: 16px 22px 18px; gap: 17px; }
:host([data-journey=combined]) .game-main .hero-title { font-size: 27px; }
:host([data-journey=combined]) .game-playfield { gap: 16px 10px; }
:host([data-journey=combined]) .game-playfield button.direction { min-height: 88px; padding: 12px 8px; gap: 5px; font-size: 15px; }
:host([data-journey=combined]) .game-playfield button.direction .odds { font-size: 22px; }
:host([data-journey=combined]) .game-money > strong { font-size: 39px; }
}
@media (max-width: 350px) {:host([data-journey=combined]) .review-bar { padding-inline: 14px; gap: 6px; }
:host([data-journey=combined]) .review-bar > span { font-size: 6px; letter-spacing: .3px; }
:host([data-journey=combined]) .app-bar { padding-inline: 16px; gap: 8px; }
:host([data-journey=combined]) .app-bar .brand { font-size: 6px; }
:host([data-journey=combined]) #terminal-button { min-width: 87px; padding-inline: 8px; font-size: 10px; }
:host([data-journey=combined]) .entry-copy .hero-title { font-size: 31px; }
:host([data-journey=combined]) .journey-entry, :host([data-journey=combined]) .game-main { padding-inline: 20px; }
}
@media (max-width: 700px) and (max-height: 530px) {:host([data-journey=combined]) .journey-entry { padding-top: 10px; padding-bottom: 14px; }
:host([data-journey=combined]) .entry-layout { gap: 10px; }
:host([data-journey=combined]) .entry-copy .hero-title { font-size: 29px; }
:host([data-journey=combined]) .entry-copy .lede { font-size: 12px; margin-top: 9px; }
:host([data-journey=combined]) .entry-art .card-table { max-height: 135px; }
:host([data-journey=combined]) .entry-art > .ui-glyph { width: 85px; }
:host([data-journey=combined]) .game-main { padding-top: 12px; padding-bottom: 14px; gap: 12px; }
:host([data-journey=combined]) .game-main .hero-title { font-size: 25px; }
:host([data-journey=combined]) .game-main .lede { font-size: 11px; margin-top: 6px; }
:host([data-journey=combined]) .game-playfield { gap: 12px 9px; }
:host([data-journey=combined]) .game-playfield button.direction { min-height: 78px; padding: 10px 7px; font-size: 14px; }
:host([data-journey=combined]) .game-playfield button.direction .arrow { font-size: 20px; }
:host([data-journey=combined]) .game-playfield button.direction .odds { font-size: 21px; }
:host([data-journey=combined]) .game-money { gap: 5px; }
:host([data-journey=combined]) .game-money > strong { font-size: 35px; }
:host([data-journey=combined]) .status-orbit { width: 62px; height: 62px; }
}
@media (orientation: landscape) and (max-height: 520px) {:host([data-journey=combined]) { --review-height: 36px; }
:host([data-journey=combined]) .terminal-app { grid-template-rows: 52px minmax(0, 1fr); }
:host([data-journey=combined]) .app-bar { padding: 4px 24px; }
:host([data-journey=combined]) .journey-entry { display: flex; padding: 18px 28px; }
:host([data-journey=combined]) .entry-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 30px; align-items: center; }
:host([data-journey=combined]) .entry-copy { display: flex; gap: 16px; }
:host([data-journey=combined]) .entry-copy .hero-title { font-size: 30px; }
:host([data-journey=combined]) .entry-copy .lede { font-size: 12px; margin-top: 8px; }
:host([data-journey=combined]) .entry-copy .actions { margin: 0; }
:host([data-journey=combined]) .entry-copy .primary, :host([data-journey=combined]) .entry-copy .secondary { min-height: 47px; padding: 12px 15px; font-size: 13px; }
:host([data-journey=combined]) .entry-art { grid-column: 2; grid-row: 1; height: 100%; }
:host([data-journey=combined]) .entry-art .card-table { max-height: 210px; }
:host([data-journey=combined]) .entry-art > .ui-glyph { width: 140px; }
:host([data-journey=combined]) .game-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); grid-template-rows: minmax(0, 1fr) auto; gap: 14px 24px; padding: 18px 24px; }
:host([data-journey=combined]) .game-main > :is(.scene-heading, .game-money) { grid-column: 1; grid-row: 1; align-self: center; }
:host([data-journey=combined]) .game-main .hero-title { font-size: 29px; }
:host([data-journey=combined]) .game-main .lede { font-size: 12px; }
:host([data-journey=combined]) .game-main > .game-playfield { grid-column: 2; grid-row: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(80px, 130px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 10px; align-items: center; }
:host([data-journey=combined]) .game-playfield .card-table { grid-column: 2; grid-row: 1; max-height: 225px; padding-block: 3px 5px; }
:host([data-journey=combined]) .game-playfield button.direction { grid-row: 1; min-height: 125px; padding: 15px 6px; grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 8px; font-size: 12px; }
:host([data-journey=combined]) .game-playfield button.direction:last-child { grid-column: 3; }
:host([data-journey=combined]) .game-playfield button.direction .odds { font-size: 21px; }
:host([data-journey=combined]) .game-playfield:has(> .card-table:only-child) { grid-template-columns: 1fr; }
:host([data-journey=combined]) .game-playfield > .card-table:only-child { grid-column: 1; }
:host([data-journey=combined]) .game-main > .actions { grid-column: 1; grid-row: 2; gap: 9px; }
:host([data-journey=combined]) .game-main > .actions button { min-height: 47px; padding: 12px 10px; font-size: 12px; }
:host([data-journey=combined]) .game-money > strong { font-size: 37px; }
}
@media (prefers-reduced-motion: reduce) {:host([data-journey=combined]) #terminal-button.has-rewards { animation: none; box-shadow: inset 0 0 0 1px #e5ae5d; }
}
@media (forced-colors: active) {:host([data-journey=combined]) .experience-shell { border-color: CanvasText; }
:host([data-journey=combined]) .artifact-art { filter: none; }
}
:host([data-journey=combined]) .entry-note { color: var(--dim); font-size: 12px; line-height: 1.5; max-width: 350px; }
:host([data-journey=combined]) .game-playfield > .actions { display: contents; }
:host([data-journey=combined]) .game-playfield > .card-table { grid-column: 2; grid-row: 1; justify-content: center; }
:host([data-journey=combined]) .game-playfield > .actions > button:first-child { grid-column: 1; grid-row: 1; }
:host([data-journey=combined]) .game-playfield > .actions > button:last-child { grid-column: 3; grid-row: 1; }
:host([data-journey=combined]) .game-playfield .direction-label { font-size: 16px; }
:host([data-journey=combined]) .game-playfield .win-total { display: block; font-size: 25px; font-weight: 600; line-height: 1.12; letter-spacing: -.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
:host([data-journey=combined]) .game-playfield .win-total small { display: block; font-size: 10px; font-weight: 400; letter-spacing: 0; line-height: 1.2; margin-top: 5px; color: var(--muted); }
:host([data-journey=combined]) .game-playfield button.direction .odds { font-size: 13px; letter-spacing: 0; font-weight: 400; color: var(--muted); }
:host([data-journey=combined]) .table-idle-art { flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; width: 100%; opacity: .76; }
:host([data-journey=combined]) .table-idle-art .card-table { height: 100%; width: 100%; justify-content: center; }
:host([data-journey=combined]) .table-idle-art .playing-card { max-height: 275px; }
:host([data-journey=combined]) .game-main > .card-table { justify-content: center; }
:host([data-journey=combined]) .game-main > .card-table .playing-card { max-width: 100%; }
:host([data-journey=combined]) .game-main .card-table { container-type: size; }
:host([data-journey=combined]) .game-main .card-table .playing-card { height: min(100%, 140cqw); }
:host([data-journey=combined]) .game-money strong small { font-size: 12px; font-weight: 400; letter-spacing: 0; }
:host([data-journey=combined]) .status-orbit { display: flex; justify-content: center; align-items: center; gap: 7px; margin: auto; }
:host([data-journey=combined]) .status-orbit i { display: block; width: 6px; height: 6px; background: var(--amber); border-radius: 50%; animation: loading-dot 1.2s ease-in-out infinite; }
:host([data-journey=combined]) .status-orbit i:nth-child(2) { animation-delay: .15s; }
:host([data-journey=combined]) .status-orbit i:nth-child(3) { animation-delay: .3s; }
:host([data-journey=combined]) .game-playfield:has(.status-orbit) { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 18px; }
:host([data-journey=combined]) .game-playfield:has(.status-orbit) > .card-table { grid-column: 1; grid-row: 1; }
:host([data-journey=combined]) .game-playfield > .status-orbit { grid-column: 1; grid-row: 2; height: 44px; width: 76px; border: 0; background: none; }
:host([data-journey=combined]) .game-back { min-height: 44px; align-self: flex-start; padding: 8px 0; border: 0; border-radius: 3px; background: transparent; color: var(--muted); font-size: 12px; }
:host([data-journey=combined]) .game-stepper { display: grid; grid-template-columns: 48px minmax(90px, 210px) 48px; justify-content: center; align-items: center; width: 100%; gap: 18px; }
:host([data-journey=combined]) .game-stepper button, :host([data-journey=combined]) .journey-materializer .code-stepper button { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 8px; border: 1px solid #7e6440; border-radius: 5px; background: #2b2317; color: var(--amber-bright); font-size: 25px; line-height: 1; }
:host([data-journey=combined]) .game-stepper button:hover:not(:disabled) { background: #3b2b18; border-color: var(--amber); }
:host([data-journey=combined]) .game-stepper output { font-size: 37px; color: var(--amber-bright); font-weight: 600; line-height: 1.1; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
:host([data-journey=combined]) .game-stepper output small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; margin-top: 7px; }
:host([data-journey=combined]) .game-sidebar .game-stepper { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 5px; }
:host([data-journey=combined]) .game-sidebar .game-stepper output { font-size: 22px; }
:host([data-journey=combined]) .stack-controls { display: grid; gap: 9px; margin-top: 17px; }
:host([data-journey=combined]) .hub-balances > .hub-account { display: flex; align-items: center; justify-content: space-between; gap: 7px; min-width: 0; padding: 0 0 0 26px; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--amber-bright); text-align: left; }
:host([data-journey=combined]) .hub-balances > .hub-account { min-height: 44px; }
:host([data-journey=combined]) .hub-account > div { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
:host([data-journey=combined]) .hub-account > div > span { font-size: 10px; color: var(--muted); line-height: 1.4; letter-spacing: .3px; }
:host([data-journey=combined]) .hub-account > span { font-size: 15px; color: var(--dim); }
:host([data-journey=combined]) .hub-account:hover strong { color: var(--ink); }
:host([data-journey=combined]) .destination-empty { flex: 0 0 auto; font-size: 12px; }
:host([data-journey=combined]) .journey-account { display: grid; gap: 18px; margin: 8px 0 24px; }
:host([data-journey=combined]) .journey-account > div { display: grid; gap: 5px; }
:host([data-journey=combined]) .journey-account dt { color: var(--muted); font-size: 12px; }
:host([data-journey=combined]) .journey-account dd { color: var(--amber-bright); font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
:host([data-journey=combined]) .journey-account > div:first-child dd { font-size: 14px; }
:host([data-journey=combined]) .sheet-actions { display: grid; gap: 10px; margin-top: 20px; }
:host([data-journey=combined]) .sheet-actions button { min-height: 48px; padding: 12px 15px; font-size: 14px; }
:host([data-journey=combined]) #experience-details .game-sidebar { display: flex; padding: 15px 0 25px; border: 0; background: none; gap: 25px; }
:host([data-journey=combined]) #experience-details .game-sidebar .stake-summary { display: none; }
:host([data-journey=combined]) #experience-details .game-sidebar .game-stepper { grid-template-columns: 44px minmax(0, 1fr) 44px; }
:host([data-journey=combined]) .journey-materializer { gap: 18px; }
@media (max-width: 900px) {:host([data-journey=combined]) .game-playfield > .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column: 1 / -1; grid-row: 2; margin: 0; padding: 0; gap: 12px; }
:host([data-journey=combined]) .game-playfield > .card-table { grid-column: 1 / -1; grid-row: 1; }
:host([data-journey=combined]) .game-playfield > .actions > button:first-child { grid-column: 1; grid-row: 1; }
:host([data-journey=combined]) .game-playfield > .actions > button:last-child { grid-column: 2; grid-row: 1; }
:host([data-journey=combined]) .game-playfield button.direction { grid-template-columns: 1fr; grid-template-rows: auto auto auto; padding: 12px 8px; min-height: 112px; gap: 7px; }
:host([data-journey=combined]) .game-playfield .win-total { font-size: 25px; }
:host([data-journey=combined]) .game-playfield .direction-label { font-size: 16px; }
:host([data-journey=combined]) .game-playfield button.direction .odds { font-size: 11px; }
:host([data-journey=combined]) .game-playfield .win-total small { font-size: 9px; margin-top: 3px; }
:host([data-journey=combined]) .hub-balances > .hub-account { padding-left: 18px; }
:host([data-journey=combined]) .hub-account > div { gap: 5px; }
:host([data-journey=combined]) .hub-account > div > span { font-size: 9px; }
:host([data-journey=combined]) .entry-note { font-size: 11px; }
:host([data-journey=combined]) .journey-materializer { gap: 16px; }
}
@media (max-width: 700px) and (max-height: 680px) {:host([data-journey=combined]) .game-playfield button.direction { min-height: 96px; gap: 4px; padding: 10px 8px; }
:host([data-journey=combined]) .game-playfield .win-total { font-size: 22px; }
:host([data-journey=combined]) .game-playfield .direction-label { font-size: 14px; }
:host([data-journey=combined]) .game-stepper output { font-size: 33px; }
:host([data-journey=combined]) .journey-materializer { gap: 10px; }
}
@media (max-width: 700px) and (max-height: 530px) {:host([data-journey=combined]) .game-playfield button.direction { min-height: 86px; padding: 8px; gap: 3px; }
:host([data-journey=combined]) .game-playfield .win-total { font-size: 20px; }
:host([data-journey=combined]) .game-playfield button.direction .odds { font-size: 10px; }
:host([data-journey=combined]) .game-playfield .win-total small { font-size: 8px; }
:host([data-journey=combined]) .hub-account > div > span { font-size: 8px; }
:host([data-journey=combined]) .game-stepper { gap: 10px; grid-template-columns: 44px minmax(80px, 150px) 44px; }
:host([data-journey=combined]) .game-stepper output { font-size: 30px; }
:host([data-journey=combined]) .journey-materializer { gap: 8px; }
}
@media (orientation: landscape) and (max-height: 520px) {:host([data-journey=combined]) .game-main > .game-money { grid-column: 1; grid-row: 1; align-self: center; }
:host([data-journey=combined]) .game-main > .scene-heading { align-self: start; }
:host([data-journey=combined]) .game-main > .game-playfield > .actions { display: contents; }
:host([data-journey=combined]) .game-playfield > .actions > button:first-child { grid-column: 1; grid-row: 1; }
:host([data-journey=combined]) .game-playfield > .actions > button:last-child { grid-column: 3; grid-row: 1; }
:host([data-journey=combined]) .game-main > .game-playfield > .card-table { grid-column: 2; grid-row: 1; }
:host([data-journey=combined]) .game-playfield button.direction { min-height: 127px; padding: 14px 6px; gap: 7px; }
:host([data-journey=combined]) .game-playfield .direction-label { font-size: 12px; }
:host([data-journey=combined]) .game-playfield .win-total { font-size: 18px; }
:host([data-journey=combined]) .game-playfield .win-total small { font-size: 8px; }
:host([data-journey=combined]) .game-playfield button.direction .odds { font-size: 10px; }
:host([data-journey=combined]) .game-main > :is(.card-table, .table-idle-art, .status-orbit) { grid-column: 2; grid-row: 1 / -1; min-height: 0; height: 100%; justify-content: center; }
:host([data-journey=combined]) .game-main > .status-orbit { height: 85px; }
:host([data-journey=combined]) .game-main > .game-playfield:has(.status-orbit) { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 25px; }
:host([data-journey=combined]) .game-main > .game-playfield:has(.status-orbit) > .card-table { grid-column: 1; }
:host([data-journey=combined]) .game-playfield > .status-orbit { height: 25px; }
:host([data-journey=combined]) .game-back { grid-column: 1; grid-row: 2; align-self: end; }
:host([data-journey=combined]) .game-main > .card-table .playing-card, :host([data-journey=combined]) .table-idle-art .playing-card { max-height: 225px; max-width: 100%; }
:host([data-journey=combined]) .hub-balances > .hub-account { padding-left: 24px; }
:host([data-journey=combined]) .hub-balances { min-height: 54px; }
:host([data-journey=combined]) .hub-account > div { flex-direction: row; align-items: baseline; gap: 11px; }
:host([data-journey=combined]) .hub-account > div > span { font-size: 9px; }
:host([data-journey=combined]) .journey-game:not(.game-table):not(.hub-scene):not(.journey-materializer) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, .8fr); grid-template-rows: minmax(0, 1fr) auto; gap: 12px 35px; padding: 20px 28px; }
:host([data-journey=combined]) .journey-game:not(.game-table) > .scene-heading { grid-column: 1; grid-row: 1; width: 100%; align-self: start; }
:host([data-journey=combined]) .journey-game:not(.game-table) > :is(.game-money, .deposit-picker) { grid-column: 1; grid-row: 2; align-self: end; margin: 0; }
:host([data-journey=combined]) .journey-game:not(.game-table) > .actions { grid-column: 2; grid-row: 1 / -1; align-self: center; }
:host([data-journey=combined]) .journey-game:not(.game-table) > .status-orbit { grid-column: 2; grid-row: 1 / -1; width: 84px; height: 84px; }
:host([data-journey=combined]) .journey-game:not(.game-table) > .art-stage { grid-column: 2; grid-row: 1; justify-content: center; }
:host([data-journey=combined]) .journey-game:not(.game-table) > .art-stage .artifact-art { width: 100%; max-height: 160px; }
:host([data-journey=combined]) .journey-game:has(> .art-stage):not(.journey-materializer) > .actions { grid-column: 2; grid-row: 2; }
:host([data-journey=combined]) .journey-game > .destination-empty { grid-column: 1; grid-row: 2; align-self: end; text-align: left; font-size: 11px; }
:host([data-journey=combined]) .journey-materializer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 37%); grid-template-rows: auto minmax(0, 1fr); gap: 12px 28px; padding: 8px 24px 15px; }
:host([data-journey=combined]) .journey-materializer > .scene-heading { grid-column: 1; grid-row: 1; width: 100%; }
:host([data-journey=combined]) .journey-materializer > .art-stage { grid-column: 1 !important; grid-row: 2 !important; }
:host([data-journey=combined]) .journey-materializer > .materializer-quantity { grid-column: 2; grid-row: 1; }
:host([data-journey=combined]) .journey-materializer > .materializer-checkout { grid-column: 2; grid-row: 2; align-self: end; }
:host([data-journey=combined]) .journey-materializer > .art-stage .artifact-art { width: min(100%, 280px) !important; max-height: 175px; }
}
@media (prefers-reduced-motion: reduce) {:host([data-journey=combined]) .status-orbit i { animation: none; }
}
/* Production layer geometry. These rules are also safe when this asset is linked in the document head. */
:host { position:absolute;inset:0;z-index:40;display:block;width:100%;height:100%;--review-height:0px;color:var(--ink);background:var(--coal);border-radius:inherit; }
:host([hidden]) { display:none!important; }
:host .terminal-app { height:100%;grid-template-rows:74px minmax(0,1fr); }
:host .app-bar { padding:14px 28px; }
:host #experience-screen { min-width:0;min-height:0;overflow:hidden; }
:host #experience-account { min-height:44px;min-width:44px;font-size:12px; }
:host .scene { position:relative; }
:host .inventory-scene { gap:18px; }
:host .inventory-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:14px;flex:1 1 0;min-height:0; }
:host .inventory-grid[data-count="1"],:host .inventory-grid[data-count="2"] { grid-template-rows:minmax(0,1fr); }
:host .inventory-card { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-width:0;min-height:44px;padding:16px;border:1px solid #665234;border-radius:8px;background:radial-gradient(ellipse,#9c75321a,transparent 75%),#1d1910;color:var(--ink);text-align:center; }
:host .inventory-card:hover { border-color:var(--amber);background-color:#2c2113; }
:host .inventory-art { display:flex;align-items:center;justify-content:center;flex:1 1 0;min-height:0;width:100%; }
:host .inventory-art .artifact-art { width:100%;height:100%;max-height:190px;max-width:230px; }
:host .inventory-label { display:flex;flex-direction:column;gap:5px;flex:0 0 auto;max-width:100%; }
:host .inventory-label strong { font-size:19px;font-weight:600;line-height:1.2; }
:host .inventory-label small { font-size:10px;line-height:1.4;color:var(--muted);overflow-wrap:anywhere; }
:host .inventory-pages { display:grid;grid-template-columns:48px 1fr 48px;align-items:center;gap:14px;flex:0 0 auto; }
:host .inventory-pages button { min-height:44px;padding:8px; }
:host .inventory-pages span { font-size:12px;text-align:center;color:var(--muted); }
:host .inventory-detail-art { display:flex;justify-content:center;align-items:center;height:180px;margin:6px 0 18px; }
:host .inventory-detail-art .artifact-art { width:100%;height:100%;max-width:250px; }
:host .item-description { margin-top:14px; }
:host .sheet .micro { overflow-wrap:anywhere; }
:host .inventory-note { flex:0 0 auto;text-align:center; }
:host .hub-balances > .hub-account { min-height:44px; }
:host .journey-entry .entry-copy .hero-title { font-size:42px; }
:host .journey-entry .entry-note { color:var(--muted); }
:host #experience-announcer { position:absolute; }
@media(max-width:900px){
 :host .terminal-app { grid-template-rows:64px minmax(0,1fr); }
 :host .app-bar { padding:9px 20px;gap:10px; }
 :host #experience-account { font-size:11px; }
 :host .app-bar .brand { font-size:7px; }
 :host .journey-entry .entry-copy .hero-title { font-size:36px; }
 :host .inventory-card { padding:12px;gap:8px; }
 :host .inventory-label strong { font-size:16px; }
 :host .inventory-label small { font-size:9px; }
}
@media(max-width:700px) and (max-height:680px){
 :host .terminal-app { grid-template-rows:58px minmax(0,1fr); }
 :host .inventory-scene { gap:11px; }
 :host .inventory-card { padding:10px;gap:7px; }
 :host .inventory-label strong { font-size:14px; }
 :host .inventory-detail-art { height:145px; }
 :host .journey-entry .entry-copy .hero-title { font-size:31px; }
}
@media(max-width:350px){
 :host .app-bar { padding-inline:16px;gap:7px; }
 :host .app-bar .brand { font-size:6px; }
 :host #experience-account { font-size:10px;min-width:44px;padding:7px 2px; }
 :host .practice-label { font-size:6px; }
 :host .inventory-card { padding:8px; }
 :host .inventory-label strong { font-size:13px; }
}
@media(orientation:landscape) and (max-height:520px){
 :host .terminal-app { grid-template-rows:52px minmax(0,1fr); }
 :host .app-bar { padding:4px 24px; }
 :host .inventory-scene { display:grid;grid-template-columns:minmax(160px,28%) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:12px 24px;padding:15px 24px; }
 :host .inventory-scene > .scene-heading { grid-column:1;grid-row:1;width:100%; }
 :host .inventory-grid { grid-column:2;grid-row:1/-1;grid-template-rows:repeat(2,minmax(0,1fr));gap:8px; }
 :host .inventory-card { flex-direction:row;text-align:left;padding:8px;gap:8px; }
 :host .inventory-art { width:40%;height:100%; }
 :host .inventory-label { width:58%; }
 :host .inventory-label strong { font-size:13px; }
 :host .inventory-label small { font-size:8px; }
 :host .inventory-pages { grid-column:1;grid-row:2;gap:9px; }
 :host .inventory-pages span { font-size:10px; }
 :host .journey-entry .entry-copy .hero-title { font-size:29px; }
}
/* Document-only entry points; shared game selectors are otherwise untouched. */
#terminal-experience[hidden] { display:none!important; }
#terminal-entry { min-height:44px;padding:11px 14px;border:1px solid #796039;background:#2b2316;color:#ffdb9d;font:600 12px/1.2 -apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; }
#terminal-entry:hover:not(:disabled) { border-color:#f7bf68;background:#3b2c19; }
.mobile-terminal .mobile-menu { min-width:76px;font-size:12px!important;font-weight:600!important; }