/* PONSHOT — dense forest-green arena, stock identities provide tile color. */
:root {
  color-scheme: dark;
  --bg: #071c15; --surface: #10291f; --surface-2: #18382a; --ui-scale: .9;
  --line: #3a3b42; --soft-line: #2b2c32; --text: #f3f3f5;
  --muted: #999ba5; --green: #e1e2e8; --amber: #e2b678; --red: #ed8792;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --font: Inter, "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; width: 100%; background: var(--bg); color: var(--text); font: 13px var(--font); }
body { overflow-x: clip; zoom: var(--ui-scale); }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { color: inherit; cursor: pointer; border: 0; background: none; }
button:disabled { opacity: .4; cursor: not-allowed; }
button, a { touch-action: manipulation; }
button:hover:not(:disabled) { color: #fff; }
button:focus-visible, a:focus-visible, input:focus-visible, canvas:focus-visible { outline: 2px solid #eee; outline-offset: 4px; }
a { color: inherit; text-decoration: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; vertical-align: middle; }
.icon.small { width: 15px; height: 15px; }.icon.tiny { width: 12px; height: 12px; }
.terminal { position: relative; height: calc(100dvh / var(--ui-scale)); isolation: isolate; }
.topbar { position: absolute; z-index: 5; inset: 18px 22px auto; display: flex; align-items: center; gap: 12px; pointer-events: none; }
.topbar > *, .header-right > * { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 26px; font-weight: 800; letter-spacing: -1.3px; white-space: nowrap; padding-right: 3px; }
.brand-mark { width: 33px; height: 33px; border-radius: 10px; background: #ececef; display: grid; place-items: center; color: #202126; box-shadow: inset 0 1px #fff; }
.brand-mark svg { width: 25px; height: 25px; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.brand-period { color: #9a9ca5; }
.hud-panel, .icon-button, .help-button { border: 1px solid #45464f; background: #24252bee; box-shadow: 0 3px 12px #0002; border-radius: 13px; }
.icon-button { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 43px; height: 48px; flex: 0 0 auto; color: #babcc5; }
.icon-button:hover, .help-button:hover { background: #34353d; }
.menu-button { width: 42px; }
.market-bar { display: flex; align-items: center; gap: 17px; padding: 9px 14px; min-width: 215px; height: 54px; }
.market-identity { display: flex; align-items: center; gap: 8px; }
.pons-icon { border-radius: 50%; background: #e6e6ea; color: #26272c; width: 29px; height: 29px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 850; letter-spacing: -2px; }
.pons-icon span { font-size: 15px; margin-top: -9px; }
.pair-title { font-size: 11px; font-weight: 750; letter-spacing: .3px; }.pair-title small { display: block; font-size: 9px; color: var(--muted); margin-top: 3px; font-weight: 500; }
.market-price { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.market-price strong { font-size: 16px; font-family: var(--mono); letter-spacing: -.6px; font-weight: 650; }
.market-price > span { font-size: 9px; white-space: nowrap; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.market-price > .negative { color: #ef929d; }.market-price > .positive { color: #d8dbe5; }
.stake-group { height: 54px; min-width: 126px; padding: 7px 11px; }
.stake-group label { display: flex; justify-content: space-between; font-size: 8px; font-weight: 700; letter-spacing: 1.1px; color: #b3b5be; }
.stake-group label span { font-size: 7px; color: #8d8f99; }
.stake-input-wrap { display: flex; gap: 6px; align-items: center; }
.stake-input-wrap input { color: #fff; background: transparent; border: none; padding: 0; width: 45px; min-width: 0; height: 26px; font: 650 19px var(--mono); appearance: textfield; -moz-appearance: textfield; }
input::-webkit-inner-spin-button, input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stake-input-wrap > span { color: #999ca7; font-size: 9px; }
.step-buttons { display: flex; flex-direction: column; margin-left: auto; }
.step-buttons button { color: #a3a6b0; padding: 0 3px; line-height: 14px; font-size: 13px; }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.source-switch { display: flex; align-items: center; padding: 4px; height: 48px; gap: 2px; }
.source-switch button { height: 38px; padding: 0 14px; color: #a6a8b2; font-size: 11px; font-weight: 650; border-radius: 9px; white-space: nowrap; }
.source-switch button.active { background: #e5e5e9; color: #25262c; box-shadow: 0 2px 3px #0003; }
.help-button { height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 13px; font-size: 11px; white-space: nowrap; }
.wallet-button { display: flex; align-items: center; gap: 8px; justify-content: center; height: 48px; padding: 0 17px; background: #efeff2; border: 1px solid #fff; border-radius: 13px; color: #22232a; font-weight: 750; font-size: 12px; white-space: nowrap; box-shadow: 0 4px 0 #a5a6ad40; }
.wallet-button:hover:not(:disabled) { background: #fff; color: #101115; }
.nav-count { position: absolute; right: -4px; top: -4px; min-width: 17px; height: 17px; background: #f2f2f5; color: #202126; border-radius: 6px; font-size: 10px; display: grid; place-items: center; }
.chart-stage { position: absolute; inset: 0; overflow: hidden; background: var(--bg); }
#chart { display: block; width: 100%; height: 100%; touch-action: none; }
.chart-hint { position: absolute; top: 27%; left: 4%; pointer-events: none; user-select: none; }
.hint-kicker { color: #797c88; font-size: 9px; letter-spacing: 2.1px; font-weight: 650; }
.chart-hint h1 { font-size: clamp(21px,2.2vw,35px); line-height: 1.18; letter-spacing: -1.4px; font-weight: 650; margin: 15px 0 12px; color: #d9dae0; }
.chart-hint h1 span { color: #848792; }
.chart-hint p { color: #7d808d; font-size: 12px; line-height: 1.7; margin: 0; }
.hint-arrow { display: inline-block; margin-top: 16px; color: #717580; font-size: 26px; }
.chart-watermark { position: absolute; bottom: 96px; left: 4%; color: #313238; font-weight: 800; font-size: clamp(28px,4.2vw,67px); letter-spacing: -3px; pointer-events: none; }
.chart-watermark span { display: block; font-size: 8px; letter-spacing: 4px; font-weight: 500; margin: 5px 0 0 4px; color: #51535e; }
.chart-toolbar { position: absolute; left: 24px; right: 20px; bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; pointer-events: none; }
.stream-status { display: flex; align-items: center; gap: 8px; color: #9b9da8; font-size: 9px; padding: 9px 11px; border-radius: 7px; background: #191a1ede; pointer-events: auto; }
.stream-status strong { font-size: 9px; font-weight: 600; letter-spacing: .8px; }
#source-detail { color: #747784; border-left: 1px solid #3a3c45; padding-left: 8px; }
.tiny-dot { display: inline-block; flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; background: #9295a3; vertical-align: middle; }
.tiny-dot.green { background: #d4d7e2; }.tiny-dot.amber { background: var(--amber); }
.chart-tools { display: flex; padding: 3px; pointer-events: auto; border-radius: 11px; }
.chart-tools button { position: relative; display: grid; place-items: center; width: 37px; height: 34px; color: #a9abb8; border-radius: 7px; }
.chart-tools button:hover { background: #393b45; }.chart-tools .icon { width: 16px; height: 16px; }
.sound-off { position: absolute; width: 22px; height: 1px; background: currentColor; transform: rotate(-45deg); box-shadow: 0 0 0 1px #24252b; }
.chart-empty { position: absolute; inset: 115px 20px 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: #17181bec; backdrop-filter: blur(5px); border-radius: 18px; z-index: 3; padding: 20px; }
.chart-empty h2 { font-size: 24px; letter-spacing: -.7px; margin: 20px 0 8px; }
.chart-empty p { font-size: 12px; line-height: 1.8; color: #a2a4b0; margin: 0 0 23px; }
.loader { width: 26px; height: 26px; border: 2px solid #454650; border-top-color: #e5e6ed; border-radius: 50%; animation: spin 1s linear infinite; }
.hit-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; box-shadow: inset 0 0 100px #dfe7ff40; }
.hit-flash.play { animation: hit .85s ease-out; }
.chart-tooltip { position: absolute; z-index: 6; width: 210px; padding: 12px 14px; border: 1px solid #686b79; border-radius: 12px; background: #24262ff5; box-shadow: 0 8px 24px #0006; pointer-events: none; }
.chart-tooltip strong { display: flex; align-items: center; gap: 7px; font-size: 12px; margin-bottom: 6px; }
.chart-tooltip strong .mono { margin-left: auto; }.chart-tooltip small { display: block; font-size: 10px; line-height: 1.8; color: #b6b8c5; }
.chart-tooltip .stock-logo { width: 21px; height: 21px; padding: 3px; }
.bottom-dock { display: flex; align-items: center; gap: 26px; padding: 0 26px; border-top: 1px solid #37383f; background: #202126; z-index: 7; }
.positions-toggle { display: flex; align-items: center; gap: 9px; height: 44px; border: 1px solid #484a54; border-radius: 10px; background: #2b2c33; padding: 0 13px; font-size: 12px; }
.positions-toggle > span { min-width: 20px; padding: 3px 5px; background: #40424c; border-radius: 5px; font: 10px var(--mono); }
.positions-toggle[aria-expanded="true"] .drawer-chevron { transform: rotate(180deg); }
.potential { display: grid; gap: 4px; border-left: 1px solid #3a3b43; padding-left: 25px; min-width: 0; }
.potential > span { color: #838693; font-size: 8px; letter-spacing: 1px; }
.potential strong { font-size: 13px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.potential strong span { color: #9c9fac; }.potential small { color: #9295a1; font-size: 9px; }
.tap-toggle { margin-left: auto; display: flex; align-items: center; gap: 9px; cursor: pointer; flex-shrink: 0; font-size: 11px; }
.tap-toggle small { display: block; color: #838793; font-size: 9px; margin-top: 4px; }
.tap-toggle input { position: absolute; opacity: 0; width: 30px; height: 24px; }
.toggle-track { width: 29px; height: 17px; border-radius: 10px; background: #454751; padding: 3px; }
.toggle-track:before { content: ""; display: block; background: #9195a2; width: 11px; height: 11px; border-radius: 50%; transition: transform .15s; }
.tap-toggle input:checked + .toggle-track { background: #aeb2be; }.tap-toggle input:checked + .toggle-track:before { background: #22242b; transform: translateX(12px); }
.tap-toggle input:focus-visible + .toggle-track { outline: 2px solid white; outline-offset: 3px; }
.paper-wallet { text-align: right; padding-left: 25px; border-left: 1px solid #3a3b43; flex-shrink: 0; }
.paper-wallet > span { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-size: 8px; color: #999ca7; letter-spacing: 1px; }
.paper-wallet button { display: grid; place-items: center; border-radius: 4px; background: #3a3c46; width: 16px; height: 16px; color: #dee0e8; font-size: 12px; padding: 0; }
.paper-wallet strong { font: 600 19px var(--mono); display: block; margin-top: 4px; letter-spacing: -.6px; }.paper-wallet strong small { font: 9px var(--font); color: #898d9a; }
.footer { display: flex; gap: 18px; align-items: center; padding: 0 26px; background: #1b1c20; color: #838692; font-size: 9px; border-top: 1px solid #2d2e35; z-index: 7; }
.footer button { padding: 0; font-size: 9px; white-space: nowrap; }.footer .tiny-dot { margin-right: 5px; }
#chart-caption { margin-right: auto; color: #727583; }
.positions-panel { position: absolute; bottom: 116px; left: 18px; right: 18px; max-height: 46%; overflow: auto; z-index: 8; border: 1px solid #4b4d59; border-radius: 16px 16px 0 0; background: #23242cf7; backdrop-filter: blur(20px); box-shadow: 0 -20px 80px #0004; }
.positions-header { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 15px; background: #272831; padding: 10px 19px; border-bottom: 1px solid #3a3d48; z-index: 1; }
.positions-header .icon-button { width: 30px; height: 30px; background: none; border: 0; box-shadow: none; }
.position-tabs { display: flex; gap: 20px; }.position-tabs button { color: #999daa; padding: 11px 0; font-size: 12px; }.position-tabs button.active { color: #fff; }
.settlement-note { font-size: 10px; color: #989daa; margin-left: auto; }.settlement-note button { border: 1px solid #555967; border-radius: 50%; margin-left: 7px; }
.empty-positions { display: flex; align-items: center; justify-content: center; padding: 35px 20px; gap: 18px; color: #959aa9; }.empty-positions strong { color: #d6d9e3; font-size: 12px; font-weight: 550; }.empty-positions p { font-size: 11px; line-height: 1.6; }
.position-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1.3fr 1.1fr 25px; gap: 15px; align-items: center; padding: 18px 22px; border-bottom: 1px solid #353844; font-size: 11px; }
.position-row small { display: block; color: #9095a5; font-size: 8px; margin-bottom: 7px; letter-spacing: .5px; }.position-row strong { font-weight: 550; }
.position-asset { display: flex; align-items: center; gap: 10px; }.position-asset .stock-logo { width: 31px; height: 31px; }
.stock-logo { display: inline-block; width: 30px; height: 30px; padding: 5px; object-fit: contain; background: #fafafa; border-radius: 8px; vertical-align: middle; flex-shrink: 0; }
.position-status { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; }.position-status.won { color: #dfdfef; }.position-status.lost { color: #e799a7; }.position-status.refunded { color: var(--amber); }
.position-proof { color: #b0b5c4; }.mono { font-family: var(--mono); }.dim { color: #9b9fad; }
.toasts { position: fixed; right: 20px; bottom: 132px; width: 330px; max-width: calc(100vw - 28px); display: grid; gap: 10px; z-index: 20; }
.toast { display: flex; align-items: flex-start; gap: 10px; border: 1px solid #575b69; background: #2b2e39f7; box-shadow: 0 8px 35px #0005; padding: 15px; border-radius: 13px; animation: appear .2s ease-out; }
.toast > .icon { color: #d2d6e6; width: 16px; }.toast strong { font-size: 11px; }.toast p { margin: 5px 0 0; color: #afb4c4; font-size: 10px; line-height: 1.6; }.toast button { margin-left: auto; padding: 0; }.toast button .icon { width: 14px; height: 14px; }.toast.error { border-color: #916970; }.toast.error > .icon { color: #efb1b8; }
dialog { width: 610px; max-width: calc(100vw - 28px); max-height: calc(100svh - 40px); padding: 0; color: #e9eaf1; background: #252730; border: 1px solid #515563; border-radius: 19px; box-shadow: 0 25px 100px #0009; }
dialog::backdrop { background: #08090db3; backdrop-filter: blur(7px); }
.modal-header { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 25px 27px 19px; background: #252730; border-bottom: 1px solid #3c404d; }
.eyebrow { font-size: 8px; letter-spacing: 1.7px; color: #a2a8b9; }.modal-header h2 { margin: 8px 0 0; font-size: 24px; letter-spacing: -.8px; font-weight: 600; }.modal-header button { align-self: flex-start; padding: 0; color: #afb4c4; }
.modal-body { padding: 22px 27px 27px; }.modal-body p { font-size: 12px; line-height: 1.8; color: #b3b8c9; margin: 0 0 17px; }.modal-body strong { color: #f0f2f8; }.modal-body h3 { font-size: 13px; margin: 22px 0 8px; }
.notice { background: #31343f; border: 1px solid #4a4f60; border-radius: 9px; padding: 14px; font-size: 11px; color: #c5c9d7; line-height: 1.7; margin: 18px 0; }
.primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 43px; padding: 12px 18px; border-radius: 10px; font-size: 12px; font-weight: 650; }
.primary-button { background: #e4e7f0; color: #252831; }.primary-button:hover:not(:disabled) { background: #fff; color: #1a1d24; }.secondary-button { border: 1px solid #62697a; color: #dee3f0; }.full { width: 100%; }
.quote-hero { padding: 25px; border-radius: 12px; text-align: center; background: #333845; margin-bottom: 20px; }.quote-hero span { display: block; color: #b6bfd2; font-size: 9px; letter-spacing: 1.1px; }.quote-hero strong { display: block; font: 32px var(--mono); margin: 14px 0; }.quote-hero small { color: #bac3d8; font-size: 11px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 19px; margin: 22px 0; }.detail-grid small { display: block; font-size: 8px; letter-spacing: .5px; color: #939cae; margin-bottom: 9px; }.detail-grid strong { display: block; font-size: 11px; overflow-wrap: anywhere; }.detail-grid .wide { grid-column: 1/-1; }
.reward-collection-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 20px 0; }.reward-card { background: #303440; border: 1px solid #444b5b; padding: 14px; border-radius: 12px; }.reward-card-identity { display: flex; align-items: center; gap: 9px; padding: 0; margin-bottom: 14px; }.reward-card > strong { display: block; font: 18px var(--mono); margin-bottom: 9px; }.reward-card p { font-size: 9px; margin: 4px 0; }
.status-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 13px 0; border-bottom: 1px solid #404654; font-size: 10px; }.status-line strong { font: 9px var(--mono); text-align: right; }
.receipt-json { padding: 15px; background: #1b1e26; color: #c0c9de; font-size: 10px; line-height: 1.7; max-height: 250px; overflow: auto; border-radius: 9px; }
.target-buttons { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }.target-buttons button { padding: 12px 8px; border: 1px solid #565e71; border-radius: 11px; background: #303746; text-align: left; }.target-buttons button:hover { background: #3e485c; }.target-buttons strong { display: flex; align-items: center; gap: 6px; font-size: 10px; }.target-buttons .stock-logo { width: 23px; height: 23px; padding: 4px; }.target-buttons small { display: block; font-size: 8px; color: #b3bed3; margin-top: 8px; }
.modal-body iframe { width: 100%; height: 440px; border: 1px solid #555c6e; border-radius: 10px; }.external-link { text-decoration: underline; }.wallet-address { overflow-wrap: anywhere; padding: 18px; background: #303643; border-radius: 10px; font: 12px var(--mono); margin-bottom: 20px; }
.noscript { position: fixed; inset: 0; display: grid; place-items: center; background: #22242b; z-index: 100; padding: 30px; }
@keyframes spin { to { transform: rotate(360deg); } }@keyframes hit { 15% { opacity: 1; } to { opacity: 0; } }@keyframes appear { from { opacity: 0; transform: translateY(10px); } }
@media (min-width: 1700px) { .topbar { inset: 24px 28px auto; gap: 16px; }.brand { font-size: 30px; }.market-bar { min-width: 240px; }.market-price strong { font-size: 19px; }.stake-group { min-width: 142px; }.stake-input-wrap input { width: 58px; }.header-right { gap: 12px; } }
@media (max-width: 1200px) { .topbar { gap: 9px; inset-inline: 16px; }.brand { font-size: 24px; }.brand-mark { width: 29px; height: 29px; }.menu-button { display: none; }.help-button { width: 43px; padding: 0; justify-content: center; }.help-button span { display: none; }.market-bar { min-width: 205px; padding-inline: 11px; gap: 12px; }.header-right { gap: 7px; }.wallet-button { padding-inline: 12px; }.bottom-dock { gap: 20px; }.potential { padding-left: 20px; } }
@media (max-width: 1000px) { #wallet-label { display: none; }.wallet-button { width: 43px; padding: 0; }.topbar { gap: 8px; }.brand { font-size: 23px; }.market-bar { min-width: 195px; }.source-switch button { padding-inline: 11px; }.stake-group { min-width: 116px; }.potential small { display: none; }.footer { gap: 12px; }#chart-caption { display: none; }#build-info { margin-right: auto; }.bottom-dock { gap: 15px; padding-inline: 20px; }.paper-wallet { padding-left: 16px; }.position-row { grid-template-columns: 1fr 1fr 1fr; }.position-proof { justify-self: end; }.settlement-note { display: none; } }
@media (max-width: 800px) and (min-width: 651px) { .brand { font-size: 20px; gap: 5px; }.brand-mark { width: 25px; height: 25px; }.brand-mark svg { width: 20px; }.market-bar { min-width: 173px; gap: 9px; }.pons-icon { display: none; }.stake-group { min-width: 106px; }.stake-input-wrap input { width: 35px; }.header-right { gap: 6px; }.source-switch button { padding-inline: 9px; }.help-button { display: none; }.icon-button { width: 36px; }.tap-toggle { display: none; } }
@media (max-width: 650px) {
 .terminal { min-height: 570px; grid-template-rows: minmax(0,1fr) 98px 30px; }
 .topbar { display: grid; grid-template-columns: minmax(0,1fr) 130px 36px; grid-template-rows: 38px 52px; gap: 10px 8px; inset: 14px 14px auto; }
 .brand { grid-column: 1; grid-row: 1; font-size: 23px; gap: 6px; letter-spacing: -1.2px; }.brand-mark { width: 28px; height: 28px; }.brand-mark svg { width: 21px; height: 21px; }
 .header-right { display: contents; }.source-switch { grid-row: 1; grid-column: 2; height: 38px; border-radius: 10px; padding: 3px; gap: 0; }.source-switch button { height: 30px; padding-inline: 9px; flex: 1; font-size: 10px; border-radius: 7px; }
 .wallet-button { grid-row: 1; grid-column: 3; width: 36px; height: 38px; border-radius: 10px; }.wallet-button .icon { width: 16px; height: 16px; }
 #nav-rewards, .help-button, .menu-button { display: none; }
 .market-bar { grid-row: 2; grid-column: 1 / 3; min-width: 0; height: 52px; padding: 8px 12px; margin-right: 91px; gap: 11px; border-radius: 11px; }
 .market-identity { gap: 7px; }.pons-icon { width: 24px; height: 24px; font-size: 17px; }.pair-title { font-size: 10px; }.pair-title small { font-size: 8px; }.market-price strong { font-size: 15px; }.market-price > span { font-size: 8px; }
 .stake-group { grid-row: 2; grid-column: 2 / 4; margin-left: 47px; min-width: 0; height: 52px; border-radius: 11px; }.stake-input-wrap input { width: 40px; font-size: 18px; }.stake-input-wrap > span { font-size: 8px; }
 .chart-hint { top: 24%; left: 5%; max-width: 30%; }.hint-kicker { font-size: 6px; letter-spacing: .9px; }.chart-hint h1 { font-size: 17px; letter-spacing: -.5px; margin: 10px 0; }.chart-hint p { font-size: 9px; line-height: 1.7; }.hint-arrow { font-size: 20px; margin-top: 7px; }
 .chart-watermark { font-size: 25px; letter-spacing: -1.3px; left: 5%; bottom: 105px; }.chart-watermark span { font-size: 5px; letter-spacing: 1.5px; margin-left: 1px; }
 .chart-toolbar { left: 12px; right: 12px; bottom: 12px; }.stream-status { gap: 6px; padding: 8px; font-size: 8px; }.stream-status strong { font-size: 8px; letter-spacing: .3px; }#source-detail { display: none; }.chart-tools { padding: 2px; }.chart-tools button { width: 31px; height: 31px; }
 .chart-empty { inset: 134px 12px 65px; padding: 15px; }.chart-empty h2 { font-size: 20px; }.chart-empty p { font-size: 11px; }.chart-empty .primary-button { font-size: 11px; }
 .bottom-dock { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; padding: 10px 16px; }.positions-toggle { height: 35px; padding: 0 9px; gap: 6px; font-size: 10px; justify-self: start; }.positions-toggle .icon { width: 14px; height: 14px; }.positions-toggle > span { min-width: 18px; font-size: 9px; }.drawer-chevron { width: 12px !important; }
 .paper-wallet { grid-row: 1 / 3; grid-column: 2; border: 0; padding-left: 0; align-self: center; }.paper-wallet > span { font-size: 7px; }.paper-wallet strong { font-size: 20px; margin-top: 8px; }.paper-wallet strong small { font-size: 8px; }
 .potential { padding: 0; border: 0; gap: 3px; grid-column: 1; grid-row: 2; }.potential > span { font-size: 6px; letter-spacing: .6px; }.potential strong { font-size: 10px; }.potential small { display: none; }.tap-toggle { display: none; }
 .footer { padding-inline: 16px; gap: 10px; font-size: 8px; }.footer button { font-size: 8px; }.footer-disclosure, #chain-button { display: none; }
 .positions-panel { bottom: 128px; left: 8px; right: 8px; max-height: 52%; }.positions-header { padding: 8px 12px; gap: 10px; }.position-tabs { gap: 17px; }.position-tabs button { font-size: 10px; }.position-row { padding: 15px 12px; gap: 17px 10px; font-size: 10px; }.position-row small { font-size: 7px; }.position-asset { gap: 7px; }.position-asset .stock-logo { width: 25px; height: 25px; padding: 4px; }.position-status { font-size: 9px; }
 .toasts { bottom: 145px; right: 14px; }.modal-header { padding: 20px; }.modal-header h2 { font-size: 21px; }.modal-body { padding: 20px; }.target-buttons { grid-template-columns: repeat(2,minmax(0,1fr)); }.reward-card { padding: 11px; }.reward-card > strong { font-size: 16px; }
}
@media (max-width: 360px) { .topbar { inset-inline: 10px; grid-template-columns: minmax(0,1fr) 122px 32px; gap: 9px 6px; }.brand { font-size: 20px; gap: 5px; }.brand-mark { width: 24px; height: 24px; }.brand-mark svg { width: 19px; }.source-switch button { font-size: 9px; padding-inline: 7px; }.wallet-button { width: 32px; }.market-bar { margin-right: 92px; padding-inline: 8px; gap: 8px; }.market-identity .pons-icon { display: none; }.market-price strong { font-size: 14px; }.stake-group { margin-left: 40px; padding-inline: 8px; }.chart-hint h1 { font-size: 15px; }.chart-hint p { font-size: 8px; }.chart-watermark { font-size: 21px; }.chart-tools button { width: 28px; }.footer { padding-inline: 12px; }.bottom-dock { padding-inline: 12px; } }
/* Keep instruction copy out of the price trace's main area. */
.chart-hint { top: 112px; left: 25px; max-width: 32%; }
.chart-hint h1 { margin: 0 0 6px; font-size: 12px; letter-spacing: -.2px; font-weight: 500; color: #9b9da8; }
.chart-hint p { font-size: 10px; color: #666b78; }
.chart-watermark { font-size: 38px; letter-spacing: -1.6px; bottom: 100px; left: 25px; }
.chart-watermark span { font-size: 6px; letter-spacing: 2.4px; }
@media (max-width:650px) {
 .chart-hint { top: 146px; left: 14px; max-width: 26%; }
 .chart-hint h1 { font-size: 9px; line-height: 1.5; letter-spacing: 0; }
 .chart-hint p { display: none; }
 .chart-watermark { font-size: 20px; left: 14px; bottom: 100px; letter-spacing: -.8px; }
 .chart-watermark span { font-size: 4px; letter-spacing: 1.2px; }
}
/* Full-bleed arena. Layout groups are transparent; only individual controls have surfaces. */
.terminal { display: block; min-height: 0; }
.hud-panel, .icon-button, .help-button, .wallet-button, .positions-toggle,
.source-switch, .source-switch button, .market-bar, .stake-group,
.chart-tools, .chart-tools button, .primary-button, .secondary-button,
.reward-card, .target-buttons button, .chart-tooltip { border-radius: 13px; }
.hud-panel, .icon-button, .help-button { background: #10271f; border-color: #365044; box-shadow: inset 0 1px #ffffff0a, 0 3px 9px #0003; }
.topbar { background: none; border: 0; box-shadow: none; }
.header-right { pointer-events: none; }
.source-switch, .chart-tools { background: none; border: 0; box-shadow: none; padding: 0; gap: 5px; }
.source-switch button { height: 48px; background: #10271f; border: 1px solid #365044; }
.source-switch button.active { background: #e7eadf; border-color: #fff8; color: #18231e; }
.paper-wallet { padding: 8px 12px; border: 1px solid #365044; border-radius: 13px; background: #10271f; min-width: 110px; height: 54px; }
.paper-wallet strong { font-size: 17px; margin-top: 2px; }
.paper-wallet > span { font-size: 7px; letter-spacing: .8px; }
.paper-wallet button { background: #31483c; }
.chart-hint, .chart-watermark { display: none; }
.chart-empty { background: #071c15ed; }
.chart-toolbar { bottom: 28px; align-items: flex-end; z-index: 4; }
.stream-status { background: #071c15f5; border: 1px solid #2d493a; flex-wrap: wrap; border-radius: 10px; gap: 7px; }
#build-info { color: #efc995; font-size: 8px; padding: 0 7px 0 0; border-right: 1px solid #365044; white-space: nowrap; margin: 0; }
.positions-toggle { position: absolute; z-index: 5; top: 104px; left: 24px; background: #10271f; border-color: #365845; box-shadow: 0 4px 16px #0003; }
.positions-toggle[aria-expanded="true"] { visibility: hidden; }
.chart-actions { display: flex; align-items: center; gap: 12px; pointer-events: none; }
.chart-actions button { pointer-events: auto; }
.chart-tools button { background: #10271f; border: 1px solid #365044; width: 39px; height: 42px; border-radius: 12px; box-shadow: inset 0 1px #ffffff09, 0 3px 8px #0003; }
.follow-button { color: #d7eade; background: #10271f; border: 1px solid #43624c; height: 42px; padding: 9px 12px; border-radius: 12px; font-size: 10px; white-space: nowrap; }
.follow-button[aria-pressed="false"] { background: #d2e6b0; color: #163222; border-color: #e7f5c9; }
.zoom-tools button { font-size: 21px; width: 32px; }.zoom-tools #zoom-reset { font: 10px var(--mono); width: 43px; }
.chart-tooltip { background: #173328f7; border-color: #77937c; }
.positions-panel { inset: 104px auto 28px 24px; width: 345px; max-width: calc(100% - 48px); max-height: none; border-radius: 20px; background: #0d251dfc; border-color: #3b5546; backdrop-filter: blur(16px); display: flex; flex-direction: column; box-shadow: 0 15px 70px #0005; }
.positions-header { flex-shrink: 0; padding: 13px 17px; gap: 12px; background: #10271f; }
.position-tabs { gap: 17px; }.position-tabs button { font-size: 11px; }
#positions-content { overflow-y: auto; flex: 1; min-height: 110px; scrollbar-width: thin; }
.position-row { grid-template-columns: 1fr 1fr; padding: 18px; gap: 18px 12px; border-color: #294136; }
.position-row small { font-size: 8px; }.position-asset { grid-column: 1; }.position-proof { justify-self: end; }
.empty-positions { padding: 35px 20px; align-items: flex-start; }
.drawer-settings { margin-top: auto; border-top: 1px solid #294136; padding: 18px; flex-shrink: 0; }
.potential { border: 0; padding: 0; gap: 7px; }.potential > span { font-size: 8px; }.potential strong { font-size: 13px; }.potential small { display: block; font-size: 10px; line-height: 1.6; }
.drawer-preferences { display: flex; align-items: center; justify-content: space-between; margin: 22px 0; gap: 12px; }
.tap-toggle { display: flex; margin: 0; }.settlement-note { display: inline; font-size: 9px; }
.drawer-disclosure { color: #cfb790; font-size: 9px; line-height: 1.5; }
#chart-caption { display: block; font-size: 9px; line-height: 1.6; color: #96aa9c; }
.drawer-links { display: flex; gap: 12px; margin-top: 16px; }.drawer-links button { display: inline-block !important; padding: 0; font-size: 9px; color: #a6b9ac; }
.toasts { bottom: 95px; }
@media (max-width:1200px) {
 #nav-rewards { display: none; }
 .paper-wallet { position: absolute; top: 65px; right: 0; min-width: 100px; }
 .chart-toolbar { gap: 8px; }#source-detail { display: none; }
}
@media (max-width:650px) {
 .terminal { min-height: 0; }
 .source-switch { gap: 4px; }.source-switch button { height: 38px; padding-inline: 7px; }
 .paper-wallet { grid-area: auto; top: 111px; right: auto; left: 0; min-width: 102px; height: 48px; padding: 7px 9px; }
 .paper-wallet strong { font-size: 16px; margin-top: 3px; }
 .positions-toggle { top: 185px; left: 14px; height: 40px; }
 .positions-panel { inset: 185px auto 90px 14px; max-width: calc(100% - 28px); width: 335px; }
 .positions-header { padding: 10px 14px; }.drawer-settings { padding: 14px; }.drawer-preferences { margin: 15px 0; }
 .chart-toolbar { bottom: 28px; left: 12px; right: 12px; flex-wrap: wrap; gap: 9px; }
 .stream-status { padding: 7px 8px; }.stream-status strong { font-size: 7px; }#build-info { font-size: 7px; }
 .chart-actions { gap: 8px; margin-left: auto; }.chart-tools { gap: 4px; }.chart-tools button { width: 32px; height: 36px; }
 .chart-tools #sound-button, .chart-tools #chart-help { display: none; }
 .follow-button { position: absolute; bottom: 47px; right: 0; height: 32px; padding: 6px 8px; font-size: 9px; }
 .zoom-tools #zoom-reset { width: 34px; font-size: 9px; }
 .toasts { bottom: 118px; }
}
/* Compact, raised controls. No full-width toolbar surface and no idle bobbing. */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%); white-space: nowrap; border: 0 !important; }
:root { --bubble-face: linear-gradient(175deg,#304e40 0%,#1a372b 18%,#10291f 58%,#173426 100%); --bubble-shadow: inset 0 1px 1px #d2efcf55, inset 0 -2px 2px #0004, 0 3px 0 #04130d, 0 5px 9px #0004; }
.hud-panel:not(.source-switch):not(.chart-tools), .icon-button, .help-button, .positions-toggle, .paper-wallet,
.source-switch button, .chart-tools button, .follow-button, .secondary-button, .target-buttons button {
 background: var(--bubble-face); border: 1px solid #466350; box-shadow: var(--bubble-shadow); border-radius: 13px;
}
button { transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease, background-color 140ms ease; }
button:hover:not(:disabled) { filter: brightness(1.12); }
button:active:not(:disabled) { transform: translateY(2px); }
.icon-button:hover:not(:disabled), .help-button:hover, .chart-tools button:hover { background: var(--bubble-face); }
.wallet-button, .source-switch button.active, .primary-button { background: linear-gradient(175deg,#fff,#eef2e7 30%,#d6dfce); border-color: #f8fff1; color: #1b2b21; box-shadow: inset 0 2px 2px #fff, inset 0 -2px 2px #91a48b80, 0 3px 0 #73816b, 0 6px 10px #0004; }
.source-switch button.active:hover { color: #18291e; }
.topbar { align-items: center; gap: 12px; }
.source-switch, .source-switch button, .icon-button, .help-button, .wallet-button, .market-bar, .stake-group, .paper-wallet { height: 40px; }
.source-switch { align-items: center; }
.source-switch button { line-height: 1; padding: 0 13px; flex: 0 0 auto; }
.market-bar { min-width: 173px; padding: 6px 11px; gap: 12px; }
.market-identity { gap: 6px; }.market-identity .pons-icon { width: 25px; height: 25px; font-size: 17px; }
.pair-title { font-size: 9px; }.pair-title small, #market-change { display: none; }
.market-price strong { font-size: 16px; }
.stake-group { position: relative; display: flex; align-items: center; gap: 4px; min-width: 100px; width: 100px; padding: 0 10px; }
.stake-dollar { font: 700 18px var(--mono); color: #d8efba; }
.stake-group > input { width: 42px; min-width: 0; height: 26px; padding: 0; border: 0; background: transparent; color: #e8f4db; font: 700 17px var(--mono); appearance: textfield; -moz-appearance: textfield; }
#stake-menu { display: grid; place-items: center; height: 28px; width: 20px; padding: 0; color: #cadbbf; }
#stake-menu[aria-expanded="true"] .icon { transform: rotate(180deg); }
#stake-options { position: absolute; top: calc(100% + 10px); left: 0; width: 165px; border: 1px solid #4a6551; border-radius: 17px; background: #10271f; box-shadow: 0 12px 30px #0007,inset 0 1px #cfe4c822; padding: 8px; z-index: 12; }
#stake-options button { display: block; width: 100%; padding: 13px 12px; text-align: left; border-radius: 10px; color: #b9c9bd; font: 600 15px var(--mono); }
#stake-options button.active { background: #294332; color: #efffe0; }
#stake-options small { display: block; padding: 8px 10px; color: #90a391; font-size: 9px; line-height: 1.6; }
.paper-wallet { display: grid; grid-template-columns: 1fr 18px; column-gap: 8px; align-content: center; padding: 5px 9px; min-width: 112px; }
.paper-wallet > span { grid-column: 1; font-size: 6px; line-height: 1; letter-spacing: .6px; justify-content: flex-start; }
.paper-wallet strong { grid-column: 1; font-size: 16px; text-align: left; line-height: 1; margin-top: 4px; }
.paper-wallet > button { grid-column: 2; grid-row: 1 / 3; align-self: center; width: 18px; height: 18px; border-radius: 50%; color: #e6f7d9; background: #3d5c45; box-shadow: inset 0 1px #a1bc8655,0 2px 0 #081e13; }
.positions-toggle { height: 38px; top: 93px; }
.positions-panel { top: 93px; animation: drawer-in 220ms ease-out; }
.chart-toolbar { justify-content: flex-end; }
.chart-actions { margin-left: auto; }
.chart-tools, .header-right .source-switch { pointer-events: none; }
.source-switch button { pointer-events: auto; }
.drawer-settings .stream-status { padding: 0; background: none; border: 0; box-shadow: none; gap: 6px; }
.drawer-settings #source-detail { display: block; width: 100%; border: 0; padding: 0; font-size: 9px; line-height: 1.6; }
#source-live.feed-unavailable { border-color: #d59e60; box-shadow: inset 0 0 0 1px #d59e60,var(--bubble-shadow); }
@keyframes drawer-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }
@media (max-width:1200px) { .paper-wallet { top: 53px; }.topbar { gap: 9px; } }
@media (max-width:650px) {
 .topbar { grid-template-columns: minmax(0,1fr) 130px 36px; grid-template-rows: 36px 40px; gap: 9px 8px; }
 .source-switch, .source-switch button, .wallet-button { height: 36px; }.source-switch button { padding-inline: 8px; }
 .market-bar { height: 40px; width: max-content; max-width: calc(100% - 65px); margin-right: 0; padding: 5px 9px; gap: 8px; min-width: 0; }
 .market-price strong { font-size: 15px; }.market-identity .pons-icon { width: 23px; height: 23px; }
 .stake-group { height: 40px; width: auto; min-width: 0; margin-left: 74px; padding-inline: 7px; gap: 3px; }
 .stake-group > input { width: 42px; font-size: 16px; }#stake-options { left: auto; right: 0; }
 .paper-wallet { top: 96px; height: 38px; min-width: 104px; }.paper-wallet strong { font-size: 15px; }
 .positions-toggle { top: 160px; height: 38px; }.positions-panel { top: 160px; }
 .chart-tools button { height: 36px; }.follow-button { height: 32px; }
}
@media (max-width:360px) { .topbar { grid-template-columns: minmax(0,1fr) 122px 32px; gap: 9px 6px; }.source-switch button { padding-inline: 7px; }.stake-group { margin-left: 64px; }.market-bar { margin-right: 63px; } }
/* Distinct PONSHOT mascot and address-matched PONS token identity. */
.buy-amount { display: grid; gap: 8px; margin: 18px 0; color: #c6d5cc; font-size: 12px; }
.ticket-asset { display:flex; gap:12px; align-items:center; padding:14px; border-radius:14px; background:#142e23; border:1px solid #355042; }
.ticket-asset .stock-logo { width:34px; height:34px; }
.ticket-asset > div { flex:1; display:grid; gap:4px; }
.ticket-asset small { font-size:11px; color:#9db3a5; }
.ticket-asset > strong { font:800 25px var(--mono); }
#modal:is([data-kind="quote"],[data-kind="preview"],[data-kind="play"]) { width:410px; max-width:calc(100% - 24px); border-radius:20px; background:#0c231a; border-color:#395444; }
#modal:is([data-kind="quote"],[data-kind="preview"],[data-kind="play"])::backdrop { background:#0004; backdrop-filter:none; }
#modal:is([data-kind="quote"],[data-kind="preview"],[data-kind="play"]) .modal-header { padding:16px 18px; background:#10271e; border-color:#2d4839; }
#modal:is([data-kind="quote"],[data-kind="preview"],[data-kind="play"]) .modal-header h2 { font-size:19px; margin-top:5px; }
#modal:is([data-kind="quote"],[data-kind="preview"],[data-kind="play"]) .modal-body { padding:16px 18px; }
#modal:is([data-kind="quote"],[data-kind="preview"],[data-kind="play"]) .detail-grid { gap:14px; margin:16px 0; }
#modal:is([data-kind="quote"],[data-kind="preview"],[data-kind="play"]) .notice { font-size:11px; line-height:1.5; padding:10px 12px; margin:12px 0; background:#173025; border-color:#355143; }
.ticket-expiry { text-align:center; margin:10px 0 0!important; font-size:10px!important; }
.play-button { position:absolute; z-index:5; left:24px; top:155px; padding:10px 16px; border:1px solid #486555; border-radius:14px; background:linear-gradient(#254536,#122e21); color:#e4f2e7; box-shadow:inset 0 1px 1px #ffffff30,0 3px 0 #04160e; font-weight:700; }
.target-legend { position:absolute; pointer-events:none; bottom:28px; left:24px; display:flex; gap:12px; font-size:10px; color:#a3b4a9; }
.target-legend .selected { color:#ffe4a1; }.target-legend .active { color:#effff7; }.target-legend .hit { color:#a9efd0; }.target-legend .miss { color:#ffa2ae; }
.toast.miss { border-color:#b37984; }.toast.refund { border-color:#849ec7; }
.hit-flash[data-result="won"] { box-shadow:inset 0 0 80px #a9efd035; }
.hit-flash[data-result="lost"] { box-shadow:inset 0 0 60px #ffa2ae25; }
.hit-flash[data-result="refunded"] { box-shadow:inset 0 0 60px #9bbfff25; }
.play-steps { padding-left:20px; color:#bacabe; font-size:12px; line-height:2; }
.play-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(max-width:650px) { .play-button { top:211px; left:14px; padding:8px 12px; font-size:11px; }.target-legend { display:none; } }
.buy-amount > div { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid #476052; border-radius: 14px; background: #10291f; }
.buy-amount input { min-width: 0; width: 100%; color: white; background: transparent; border: 0; font: 700 22px Consolas, monospace; }
#preview-buy { width: 100%; }
.brand-mark { width: 36px; height: 36px; display: block; object-fit: contain; border-radius: 0; background: transparent; box-shadow: none; }
.market-identity .pons-icon { display: block; object-fit: contain; border-radius: 0; background: transparent; flex-shrink: 0; }
.market-bar { min-width: 0; width: max-content; gap: 9px; padding-inline: 10px; }
.stake-group { width: calc(48px + var(--stake-digits,1) * 10px); min-width: 68px; padding-inline: 7px; gap: 2px; }
.stake-group > input { width: 29px; flex: 1 1 auto; font-size: 16px; }
.stake-dollar { font-size: 16px; }#stake-menu { width: 17px; flex: 0 0 17px; }
@media (max-width:650px) {
 .brand-mark { width: 32px; height: 32px; }
 .stake-group { justify-self: end; margin-left: 0; width: calc(48px + var(--stake-digits,1) * 10px); }
 .market-bar { max-width: calc(100% - 36px); margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }