/* Layout: one narrow column, the chain signal → outcome → status reads top to bottom in every card.
   Palette follows the dark plum, lilac and lime of the Cloudbet account pages; the mark and name are the agent's own. */
:root {
  color-scheme: dark;
  --bg: #1a161d; --surface: #211c25; --raised: #2c2532; --line: #382e40;
  --text: #f3eff7; --muted: #aaa1b3; --accent: #cca6ff; --lime: #d6fc51; --on-lime: #1a161d;
  --ok: #6bc98c; --warn: #f2cb4b; --bad: #ff7fa6; --demo-bg: #f2cb4b; --on-demo: #1a161d;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
}
* { box-sizing: border-box; }
html, body { background: var(--bg); color: var(--text); }
body { margin: 0; font: 15px/1.4 var(--sans); -webkit-text-size-adjust: 100%; font-variant-numeric: tabular-nums; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.app { position: relative; z-index: 1; max-width: 480px; margin: 0 auto; padding-block: 0 32px; min-height: 100vh; }

/* The wallpaper is one fixed layer behind everything: it scrolls nothing and repaints nothing. In the cabinet every block
   holding text has its own solid background. The position anchors the pattern to the centre of the screen: half a tile
   (120px) plus the 82px from the centre to the start screen's caption puts the caption in the clear band between two rows
   on any screen height. */
.wallpaper { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .085; transition: opacity .18s ease-out; background-position: 0 calc(50% + 202px); }
/* wallpaper:start, generated by tools/cabinet_wallpaper.py */
.wallpaper { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cdefs%3E%3Cg id='tether' transform='translate(-17 -17) scale(0.0425)'%3E%3Ccircle cx='400' cy='400' r='400' fill='%23009393'/%3E%3Cpath d='M400.49,428.59c68.79,0,126.28-11.63,140.33-27.17-11.93-13.18-55.08-23.56-109.88-26.4v32.83c-9.81.51-20.01.76-30.46.76s-20.65-.25-30.48-.76v-32.83c-54.78,2.84-97.95,13.22-109.88,26.4,14.07,15.54,71.57,27.17,140.36,27.17ZM522.71,274.06v45.21h-91.77v31.35c64.46,3.35,112.83,17.13,113.19,33.62v34.38c-.36,16.49-48.73,30.24-113.19,33.6v76.94h-60.93v-76.94c-64.46-3.35-112.81-17.11-113.17-33.6v-34.38c.36-16.49,48.71-30.27,113.17-33.62v-31.35h-91.77v-45.21h244.48ZM242.15,202.11h322.16c7.7,0,14.79,4.05,18.63,10.63l93.85,161.16c4.86,8.36,3.42,18.91-3.52,25.68l-258.34,252.18c-8.38,8.17-21.84,8.17-30.2,0L126.71,399.92c-7.09-6.94-8.43-17.79-3.2-26.19l100.33-161.49c3.91-6.28,10.85-10.12,18.32-10.12Z' fill='%23fff' fill-rule='evenodd'/%3E%3C/g%3E%3Cg id='ethereum' transform='translate(-17 -17) scale(0.0177083)'%3E%3Cpath d='m959.8 80.7-539.7 895.6 539.7-245.3z' fill='%238a92b2'/%3E%3Cpath d='m959.8 731-539.7 245.3 539.7 319.1z' fill='%2362688f'/%3E%3Cpath d='m1499.6 976.3-539.8-895.6v650.3z' fill='%2362688f'/%3E%3Cpath d='m959.8 1295.4 539.8-319.1-539.8-245.3z' fill='%23454a75'/%3E%3Cpath d='m420.1 1078.7 539.7 760.6v-441.7z' fill='%238a92b2'/%3E%3Cpath d='m959.8 1397.6v441.7l540.1-760.6z' fill='%2362688f'/%3E%3C/g%3E%3Cg id='bitcoin' transform='translate(-17 -17) scale(0.53125)'%3E%3Cpath fill='%23f7931a' d='m63.033,39.744c-4.274,17.143-21.637,27.576-38.782,23.301-17.138-4.274-27.571-21.638-23.295-38.78,4.272-17.145,21.635-27.579,38.775-23.305,17.144,4.274,27.576,21.64,23.302,38.784z' transform='translate(0.00630876,-0.00301984)'/%3E%3Cpath fill='%23FFF' d='m46.103,27.444c0.637-4.258-2.605-6.547-7.038-8.074l1.438-5.768-3.511-0.875-1.4,5.616c-0.923-0.23-1.871-0.447-2.813-0.662l1.41-5.653-3.509-0.875-1.439,5.766c-0.764-0.174-1.514-0.346-2.242-0.527l0.004-0.018-4.842-1.209-0.934,3.75s2.605,0.597,2.55,0.634c1.422,0.355,1.679,1.296,1.636,2.042l-1.638,6.571c0.098,0.025,0.225,0.061,0.365,0.117-0.117-0.029-0.242-0.061-0.371-0.092l-2.296,9.205c-0.174,0.432-0.615,1.08-1.609,0.834,0.035,0.051-2.552-0.637-2.552-0.637l-1.743,4.019,4.569,1.139c0.85,0.213,1.683,0.436,2.503,0.646l-1.453,5.834,3.507,0.875,1.439-5.772c0.958,0.26,1.888,0.5,2.798,0.726l-1.434,5.745,3.511,0.875,1.453-5.823c5.987,1.133,10.489,0.676,12.384-4.739,1.527-4.36-0.076-6.875-3.226-8.515,2.294-0.529,4.022-2.038,4.483-5.155zm-8.022,11.249c-1.085,4.36-8.426,2.003-10.806,1.412l1.928-7.729c2.38,0.594,10.012,1.77,8.878,6.317zm1.086-11.312c-0.99,3.966-7.1,1.951-9.082,1.457l1.748-7.01c1.982,0.494,8.365,1.416,7.334,5.553z' transform='translate(0.00630876,-0.00301984)'/%3E%3C/g%3E%3Cpath id='l' transform='translate(-9 -9) scale(.75)' d='M3 6v12h6M12 6v12M12 6h4c1.9 0 3.2 1.1 3.2 2.9S17.9 12 16 12h-4M16 12c2.1 0 3.5 1.1 3.5 3S18.1 18 16 18h-4' fill='none' stroke='%23cca6ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='.55'/%3E%3Cg id='n' fill='none' stroke='%23cca6ff' stroke-width='1.3' stroke-linecap='round' opacity='.55'%3E%3Crect x='-15' y='-8.5' width='30' height='17' rx='2.5'/%3E%3Ccircle r='4'/%3E%3Cpath d='M-11-4.5h2M9-4.5h2M-11 4.5h2M9 4.5h2'/%3E%3C/g%3E%3Ctext id='w-usdt' text-anchor='middle' y='4' font-family='-apple-system,Roboto,Arial,sans-serif' font-size='11' font-weight='700' letter-spacing='.6' fill='%23cca6ff'%3EUSDT%3C/text%3E%3Ctext id='w-eth' text-anchor='middle' y='4' font-family='-apple-system,Roboto,Arial,sans-serif' font-size='11' font-weight='700' letter-spacing='.6' fill='%23cca6ff'%3EETH%3C/text%3E%3Ctext id='w-btc' text-anchor='middle' y='4' font-family='-apple-system,Roboto,Arial,sans-serif' font-size='11' font-weight='700' letter-spacing='.6' fill='%23cca6ff'%3EBTC%3C/text%3E%3Ctext id='w-tether' text-anchor='middle' y='4' font-family='-apple-system,Roboto,Arial,sans-serif' font-size='11' font-weight='700' letter-spacing='.6' fill='%23cca6ff'%3ETether%3C/text%3E%3Ctext id='w-ethereum' text-anchor='middle' y='4' font-family='-apple-system,Roboto,Arial,sans-serif' font-size='11' font-weight='700' letter-spacing='.6' fill='%23cca6ff'%3EEthereum%3C/text%3E%3Ctext id='w-bitcoin' text-anchor='middle' y='4' font-family='-apple-system,Roboto,Arial,sans-serif' font-size='11' font-weight='700' letter-spacing='.6' fill='%23cca6ff'%3EBitcoin%3C/text%3E%3C/defs%3E%3Cuse href='%23tether' transform='translate(30 30) rotate(-8)'/%3E%3Cuse href='%23w-bitcoin' transform='translate(90 30) rotate(-6)'/%3E%3Cuse href='%23ethereum' transform='translate(150 30) rotate(6)'/%3E%3Cuse href='%23n' transform='translate(210 30) rotate(-8)'/%3E%3Cuse href='%23w-usdt' transform='translate(0 90) rotate(5)'/%3E%3Cuse href='%23w-usdt' transform='translate(240 90) rotate(5)'/%3E%3Cuse href='%23bitcoin' transform='translate(60 90) rotate(8)'/%3E%3Cuse href='%23l' transform='translate(120 90) rotate(0)'/%3E%3Cuse href='%23w-ethereum' transform='translate(180 90) rotate(-5)'/%3E%3Cuse href='%23ethereum' transform='translate(30 150) rotate(-6)'/%3E%3Cuse href='%23n' transform='translate(90 150) rotate(7)'/%3E%3Cuse href='%23tether' transform='translate(150 150) rotate(8)'/%3E%3Cuse href='%23w-btc' transform='translate(210 150) rotate(6)'/%3E%3Cuse href='%23l' transform='translate(0 210) rotate(0)'/%3E%3Cuse href='%23l' transform='translate(240 210) rotate(0)'/%3E%3Cuse href='%23w-tether' transform='translate(60 210) rotate(5)'/%3E%3Cuse href='%23bitcoin' transform='translate(120 210) rotate(-8)'/%3E%3Cuse href='%23w-eth' transform='translate(180 210) rotate(-6)'/%3E%3C/svg%3E"); background-size: 240px 240px; }
/* wallpaper:end */
.gutter { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

.demo-band { background: var(--demo-bg); color: var(--on-demo); font-weight: 700; font-size: 13px; padding-block: 8px; }
.alert { background: var(--raised); border-bottom: 1px solid var(--line); color: var(--warn); font-size: 13px; padding-block: 8px; }

.top { display: flex; align-items: center; gap: 12px; padding-block: 14px 10px; background: var(--bg); }
.mark { flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--accent); color: var(--bg); display: grid; place-items: center; font-weight: 800; font-size: 15px; letter-spacing: -.02em; }
.brand { min-width: 0; flex: 1; }
.brand h1 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.2; }
.brand p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }

.balance { margin-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px; }
.balance-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.eyebrow { color: var(--muted); font-size: 12px; letter-spacing: .02em; }
.balance-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px 16px; }
.amount { display: grid; gap: 1px; min-width: 0; }
.amount b { font-size: 21px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.amount.missing b { font-size: 15px; color: var(--muted); font-weight: 600; line-height: 1.8; }
.amount.stale b { color: var(--warn); }
.amount small { color: var(--muted); font-size: 12px; }
.stale-note { color: var(--warn); font-size: 12px; }
.fine { color: var(--muted); font-size: 12px; margin: 0; }
.segment { display: flex; gap: 4px; background: var(--bg); border-radius: 9px; padding: 3px; }
.segment button { flex: 1; min-height: 32px; background: none; border: 0; border-radius: 7px; color: var(--muted); font-size: 12.5px; cursor: pointer; }
.segment button[aria-pressed="true"] { background: var(--raised); color: var(--text); }

.tabs { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; display: flex; gap: 2px; background: var(--bg); border-bottom: 1px solid var(--line); margin-top: 12px; }
.tabs button { flex: 1; min-height: 46px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 600; font-size: 14px; cursor: pointer; }
.tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--lime); }
.tabs .count { color: var(--muted); font-weight: 500; margin-left: 4px; }

.pane { display: grid; gap: 12px; padding-block: 14px 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 12px; min-width: 0; }
.tag { justify-self: start; background: var(--demo-bg); color: var(--on-demo); border-radius: 5px; padding: 1px 6px; font-size: 11px; font-weight: 700; }
.tag.replay { background: var(--raised); color: var(--warn); }
.head { display: grid; gap: 3px; }
.head h2 { margin: 0; font-size: 16.5px; font-weight: 700; line-height: 1.25; text-wrap: balance; }
.meta { color: var(--muted); font-size: 12.5px; }

.signal { display: grid; grid-template-columns: 1fr; gap: 1px; }
.who { color: var(--muted); font-size: 12px; }
.what { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.ref { color: var(--muted); font-size: 12.5px; }

.stages { list-style: none; margin: 0; padding: 0; display: grid; }
.stage { display: grid; grid-template-columns: 14px 1fr auto; gap: 0 8px; padding: 9px 0; border-top: 1px solid var(--line); align-items: start; }
.stage i { width: 9px; height: 9px; margin-top: 6px; }
.stage.ok i { background: var(--ok); border-radius: 50%; }
.stage.warn i { background: var(--warn); transform: rotate(45deg); }
.stage.bad i { background: var(--bad); border-radius: 2px; }
.stage.flat i { background: var(--muted); height: 2px; margin-top: 10px; }
.stage-body { min-width: 0; display: grid; gap: 2px; }
.stage-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; font-size: 14px; }
.stage-head b { font-weight: 600; }
.stage.ok .stage-head b { color: var(--ok); } .stage.warn .stage-head b { color: var(--warn); }
.stage.bad .stage-head b { color: var(--bad); } .stage.flat .stage-head b { color: var(--muted); }
.stage-name { font-size: 13px; overflow-wrap: anywhere; }
.stage-why { color: var(--muted); font-size: 13px; }
.odds { text-align: right; white-space: nowrap; padding-left: 10px; }
.odds b { display: block; font-size: 22px; line-height: 1.1; font-weight: 700; color: var(--lime); }
.odds.none b { color: var(--muted); }
.odds.last b { color: var(--warn); }
.odds small { color: var(--muted); font-size: 11px; display: block; }

.card-status { margin: 0; padding: 10px 12px; background: var(--raised); border-radius: 10px; font-size: 14px; font-weight: 600; }
.why-btn { width: 100%; min-height: 44px; background: var(--raised); color: var(--text); border: 1px solid var(--line); border-radius: 10px; font-weight: 600; font-size: 14px; cursor: pointer; }
.why-btn[aria-expanded="true"] { background: var(--bg); color: var(--accent); }
.panel { background: var(--bg); border-radius: 10px; padding: 12px; display: grid; gap: 10px; }
.details { margin: 0; display: grid; gap: 8px; }
.details dt { color: var(--muted); font-size: 12px; }
.details dd { margin: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.details dd.code { font: 12px/1.45 var(--mono); }

.empty { text-align: center; padding: 36px 20px; display: grid; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.empty h2 { margin: 0; font-size: 16px; }
.empty p { margin: 0; color: var(--muted); font-size: 14px; }

.timeline { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.timeline li { display: grid; grid-template-columns: 58px 1fr; gap: 8px; font-size: 13.5px; }
.timeline time { color: var(--muted); font-size: 12px; line-height: 1.55; }
.timeline span { min-width: 0; overflow-wrap: anywhere; }
.pill { justify-self: start; border-radius: 6px; padding: 2px 8px; font-size: 12.5px; font-weight: 700; background: var(--raised); }
.pill.skipped { color: var(--bad); } .pill.review { color: var(--warn); } .pill.passed { color: var(--ok); } .pill.replay { color: var(--muted); }
.fine { color: var(--muted); font-size: 12px; margin: 0; }
.locked { margin: 18vh max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); padding: 32px 24px; text-align: center; display: grid; gap: 8px; justify-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.locked h2 { margin: 0; font-size: 18px; }
.locked p { margin: 0; color: var(--muted); }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--lime); animation: spin .9s linear infinite; }
.scenarios { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; font-weight: 500; font-size: 12px; }
.scenarios button { min-height: 28px; padding: 0 8px; background: var(--on-demo); color: var(--demo-bg); border: 0; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; }
.scenarios button[aria-pressed="true"] { background: var(--text); color: var(--on-demo); }
.demo-under { margin: 12px max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); padding: 8px 12px; background: var(--demo-bg); color: var(--on-demo); border-radius: 10px; }

/* Start screen: above the page until the data is ready or 3 seconds pass, whichever comes first. The stack and the digits
   are decoration, they show no amount and no progress. Only transform and opacity move. Without animation (reduced motion)
   every element simply stands in its final place. */
.splash { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); transition: opacity .14s ease-out; }
.splash + .wallpaper { opacity: .34; }
.splash.leaving + .wallpaper { opacity: .085; }
.splash:not(.leaving) ~ .app { visibility: hidden; }
.splash.leaving { opacity: 0; pointer-events: none; }
.splash-card { width: min(100%, 340px); padding: 20px 20px 20px; display: grid; gap: 14px; }
.splash-scene { display: flex; align-items: flex-end; justify-content: center; gap: 16px; }
.splash-text { margin: 0; text-align: center; font-size: 16px; font-weight: 700; color: var(--lime); }
/* the dots always take their place and only change opacity, so the caption does not move; without animation all three stand */
.dots span { animation: 1.6s linear infinite; }
.dots span:nth-child(1) { animation-name: dot-1; } .dots span:nth-child(2) { animation-name: dot-2; } .dots span:nth-child(3) { animation-name: dot-3; }
.coins { flex: none; overflow: visible; }
.coin-shadow { fill: #000; opacity: .35; }
/* A coin flies face on, so its logo is seen; at the landing it lies down into the stack, where its band carries the same logo. */
.coin-fly { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: coin-fly .85s both; }
.coin-lay { transform-box: fill-box; transform-origin: 50% 100%; animation: coin-lay .85s both; }
.fly-1, .lay-1 { animation-delay: .05s; } .fly-2, .lay-2 { animation-delay: .8s; } .fly-3, .lay-3 { animation-delay: 1.55s; }
.rim { fill: var(--coin-rim); stroke: var(--bg); stroke-width: 2.5; stroke-linejoin: round; }
.face { fill: var(--coin-face); stroke: var(--bg); stroke-width: 2.5; }
.ticks { fill: none; stroke: var(--bg); stroke-width: 2; stroke-linecap: round; opacity: .35; }
.disc-edge { fill: var(--coin-rim); stroke: var(--bg); stroke-width: 2.5; }
.disc-face { fill: var(--coin-face); stroke: var(--bg); stroke-width: 2.5; }
.tone-tether { --coin-rim: #006f6f; --coin-face: #009393; }
.tone-ethereum { --coin-rim: #b9bfd8; --coin-face: #f1f2f9; }
.tone-bitcoin { --coin-rim: #c8730f; --coin-face: #f7931a; }
.spark { fill: none; stroke: var(--lime); stroke-width: 2.5; stroke-linecap: round; opacity: 0; transform-box: fill-box; transform-origin: center; animation: spark-pop .38s ease-out both; }
.spark-1 { animation-delay: .58s; } .spark-2 { animation-delay: 1.33s; } .spark-3 { animation-delay: 2.08s; }
.counter { --reel: 48px; display: flex; gap: 3px; padding: 6px; background: var(--bg); border: 2px solid var(--line); border-radius: 12px; }
.reel { position: relative; display: block; width: 30px; height: var(--reel); overflow: hidden; background: var(--raised); border-radius: 6px; }
.reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--bg), transparent 28%, transparent 72%, var(--bg)); }
.strip { display: block; width: 1ch; margin: 0 auto; font: 700 30px/48px var(--mono); color: var(--lime); text-align: center; animation: reel-flip 2s cubic-bezier(.75, 0, .25, 1) infinite; }
.strip-slow { animation-duration: 3.6s; animation-delay: -1.3s; } .strip-mid { animation-duration: 2.1s; animation-delay: -.6s; } .strip-fast { animation-duration: 1.2s; }
@keyframes coin-fly {
  0% { opacity: 0; transform: translateY(-170px) rotate(-14deg) scale(.92); animation-timing-function: cubic-bezier(.45, 0, .9, .55); }
  8% { opacity: 1; }
  40% { transform: translateY(-96px) rotate(8deg) scale(1); animation-timing-function: cubic-bezier(.5, 0, 1, .7); }
  62% { opacity: 1; transform: translateY(0) rotate(0) scale(1, 1); animation-timing-function: ease-out; }
  70% { opacity: 0; transform: scale(1.1, .24); }
  100% { opacity: 0; transform: scale(1.1, .24); }
}
@keyframes coin-lay {
  0%, 61% { opacity: 0; transform: scale(1.08, .8); }
  62% { opacity: 1; transform: scale(1.08, .8); animation-timing-function: ease-out; }
  84% { transform: translateY(-5px) scale(.98, 1.04); animation-timing-function: ease-in; }
  100% { opacity: 1; transform: none; }
}
@keyframes spark-pop { 0% { opacity: 0; transform: scale(.5); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes reel-flip {
  0% { transform: translateY(0); } 10% { transform: translateY(-48px); } 20% { transform: translateY(-96px); }
  30% { transform: translateY(-144px); } 40% { transform: translateY(-192px); } 50% { transform: translateY(-240px); }
  60% { transform: translateY(-288px); } 70% { transform: translateY(-336px); } 80% { transform: translateY(-384px); }
  90% { transform: translateY(-432px); } 100% { transform: translateY(-480px); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes dot-1 { 0%, 24.9% { opacity: 0; } 25%, 100% { opacity: 1; } }
@keyframes dot-2 { 0%, 49.9% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes dot-3 { 0%, 74.9% { opacity: 0; } 75%, 100% { opacity: 1; } }
@media (max-width: 340px) { .splash-scene { gap: 8px; } .reel { width: 25px; } .strip { font-size: 26px; } }
@media (prefers-reduced-motion: reduce) {
  .coin-fly, .coin-lay, .spark, .strip, .spinner, .dots span { animation: none; }
  .spinner { border-top-color: var(--line); }
  .wallpaper, .splash { transition: none; }
}
@media (prefers-reduced-motion: no-preference) { .panel { animation: rise .14s ease-out; } @keyframes rise { from { opacity: .4; transform: translateY(-3px); } } }