/* RuneScape spectator shell. Square bevels, olive panels, parchment ledgers and gold labels. */
:root { --rs-page:#181714; --rs-stone:#292720; --rs-panel:#454638; --rs-panel-inset:#34362b; --rs-rim:#77715c; --rs-gold:#ffcb62; --rs-parchment:#c6bb95; --rs-ink:#292719; --rs-muted:#d2c9ab; }
html,body,#root { min-height:100%; height:100%; }
body { margin:0; background:var(--rs-page); color:#f1e6c7; overflow:hidden; font-family:Inter,Arial,sans-serif; font-size:1rem; line-height:1.5; }
* { box-sizing:border-box; }
button,a { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:2px solid var(--rs-gold); outline-offset:3px; }
.shell { display:grid; grid-template-rows:48px minmax(0,1fr); height:100%; }
.shell-header { display:flex; align-items:center; gap:18px; padding:0 20px; border-bottom:1px solid #3d3b30; }
.shell-brand { display:inline-flex; align-items:center; gap:8px; color:var(--rs-gold); font-size:1rem; font-weight:600; text-decoration:none; text-shadow:1px 1px #000; }
.shell-brand img { display:block; width:24px; height:24px; flex-shrink:0; image-rendering:pixelated; }
.shell-subtitle { color:#b9b29c; font-size:.8125rem; }
.shell-docs { margin-left:auto; color:#d6c9a2; font-size:.8125rem; text-underline-offset:3px; }
.shell-main { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:12px; min-height:0; padding:12px; }
.shell-card { min-width:0; min-height:0; border:3px solid #5a5749; border-radius:0; background:var(--rs-panel); box-shadow:inset 1px 1px #92907a,inset -1px -1px #1b1c16,0 0 0 1px #12130f; overflow:hidden; }
.shell-stage { display:flex; flex-direction:column; background:#070806; }
.shell-panel { display:flex; flex-direction:column; }
.shell-panel>.trading-panel { flex:1; height:auto; }
.founder-coin { flex-shrink:0; padding:10px 14px; background:#36382c; border-bottom:3px double #77725e; }
.founder-coin-heading { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px; }
.founder-coin-heading h2 { margin:0; color:var(--rs-gold); font-size:.8125rem; line-height:1.4; font-weight:600; }
.founder-coin-heading>span,.founder-coin-pending { color:var(--rs-muted); font-size:.75rem; line-height:1.5; }
.founder-coin-pending { margin:3px 0 0; }
.founder-coin-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:5px; }
.founder-coin-row code { min-width:0; overflow-wrap:anywhere; color:#ede0b9; font: .8125rem/1.5 'Geist Mono',monospace; }
.founder-coin-row button { flex-shrink:0; min-height:32px; padding:4px 12px; border:2px solid; border-color:#83806a #27291f #27291f #83806a; background:#444738; color:var(--rs-gold); font:inherit; font-size:.75rem; line-height:1.4; cursor:pointer; }
.founder-coin-row button:hover:enabled { background:#4e5140; }
.founder-coin-row button:disabled { opacity:.6; cursor:default; }
.founder-coin-full { margin-top:4px; }
.founder-coin-full summary { display:list-item; color:#cfc5aa; font-size:.75rem; min-height:24px; }
.founder-coin-full label { display:block; color:var(--rs-muted); font-size:.75rem; margin:5px 0; }
.founder-coin-full input { display:block; width:100%; min-width:0; min-height:36px; padding:6px 8px; border:1px solid #827d65; border-radius:0; background:var(--rs-panel-inset); color:#f1e6c7; font: .8125rem/1.5 'Geist Mono',monospace; }
.founder-coin-full input:focus-visible { outline:2px solid var(--rs-gold); outline-offset:2px; }
.founder-coin-status { margin:4px 0 0; color:#c2e6a1; font-size:.75rem; line-height:1.5; overflow-wrap:anywhere; }
.founder-coin-status:empty { display:none; }
.founder-coin-status.is-error { color:#ffcf9e; }
@media(max-width:480px) { .founder-coin-row button { min-height:40px; } .founder-coin-full input { font-size:1rem; } }
.stage-caption { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:7px 12px; color:#c9c0a7; background:#36382c; border-bottom:2px solid #625f4e; font-size:.75rem; }
.stage-caption span:first-child { color:var(--rs-gold); }
.stage { position:relative; min-height:0; flex:1; height:100%; background:#060705; }
.stage canvas { display:block; width:100%; height:100%; object-fit:contain; }
.stage-client { display:block; width:100%; height:100%; border:0; }
.stage-waiting { position:absolute; inset:0; display:grid; place-items:center; background:#25271e; padding:24px; }
.stage-waiting p,.stage-waiting span { color:#ded2af!important; }
@media(min-width:1600px) { .shell-main { grid-template-columns:minmax(0,1fr) 420px; } }
@media(max-width:1000px) { body { overflow:auto; } .shell { height:auto; min-height:100%; } .shell-main { grid-template-columns:minmax(0,1fr); } .shell-stage { height:calc((100vw - 30px) * .66 + 34px); max-height:72vh; min-height:240px; } .shell-panel { height:auto; } }
@media(max-width:480px) { .shell { grid-template-rows:44px minmax(0,1fr); } .shell-header { padding:0 12px; gap:10px; } .shell-subtitle { display:none; } .shell-main { gap:10px; padding:8px; } .shell-stage { height:calc((100vw - 22px) * .66 + 34px); min-height:210px; } }

/* Skills window (Skills.tsx): RuneScape's skills tab (three columns, the game's icons, current/base
   levels in the tab's yellow) on Beautiful UI's surfaces and tokens. */
.skills-backdrop {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px;
  background: oklch(0% 0 0 / .45); animation: fade-in 160ms ease-out both;
}
.skills-window {
  width: min(420px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; border-radius: 16px;
  animation: fade-up 260ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.skills-close { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 8px; color: var(--ink-3); transition: background-color 150ms, color 150ms; }
.skills-close:hover { background: var(--hover-2); color: var(--ink); }
.skills-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 12px; }
.skills-cell {
  position: relative; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 10px 4px;
  border-radius: 10px; background: var(--canvas); box-shadow: 0 0 0 1px var(--line); cursor: default;
  transition: background-color 150ms, box-shadow 150ms; overflow: hidden;
}
.skills-cell:hover, .skills-cell.is-selected { background: var(--hover-2); }
.skills-cell.is-selected { box-shadow: 0 0 0 1px var(--line-strong); }
.skills-cell.is-target.is-selected { box-shadow: 0 0 0 1.5px var(--accent); }
.skills-cell.is-target { box-shadow: 0 0 0 1.5px var(--accent); }
.skills-goal { display: inline-flex; height: 16px; align-items: center; padding: 0 5px; border-radius: 4px; background: var(--accent-tint); color: var(--accent-ink); font-size: 10.5px; font-weight: 500; }
.skills-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.skills-icon { image-rendering: pixelated; flex-shrink: 0; }
.skills-level { margin-left: auto; font-size: 13px; font-weight: 600; color: oklch(88% .17 100); text-shadow: 1px 1px 0 oklch(0% 0 0 / .6); }
.skills-level .is-up { color: oklch(80% .19 145); }
.skills-level .is-down { color: oklch(68% .2 25); }
.skills-slash { margin: 0 1px; color: oklch(88% .17 100 / .55); }
.skills-bar { position: absolute; left: 10px; right: 10px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.skills-bar > span { display: block; height: 100%; background: oklch(88% .17 100 / .7); }
.skills-cell.is-max .skills-bar > span { background: oklch(80% .19 145); }
.skills-total { position: relative; grid-column: span 2; display: flex; flex-direction: column; justify-content: center; gap: 1px; height: 44px; padding: 0 12px 4px; border-radius: 10px; background: var(--canvas); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.skills-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 11.5px; line-height: 16px; color: var(--ink-3); }
.skills-value { font-weight: 600; color: oklch(88% .17 100); text-shadow: 1px 1px 0 oklch(0% 0 0 / .6); }
@media (prefers-reduced-motion: reduce) { .skills-backdrop, .skills-window { animation: none; } }



.trading-panel { display:flex; flex-direction:column; min-width:0; min-height:0; height:100%; }
.trading-panel h1,.trading-panel h2,.trading-panel p,.trading-panel dl,.trading-panel dd,.trading-panel ul,.trading-panel ol { margin:0; }
.trading-panel ul,.trading-panel ol { list-style:none; padding:0; }
.trading-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:3px double #77725e; background:#3c3e31; }
.trading-header h1 { color:var(--rs-gold); font-size:1.125rem; font-weight:600; line-height:1.25; text-shadow:1px 1px #000; }
.trading-mode { flex-shrink:0; color:#e5dac0; font-size:.75rem; border-left:1px solid #827b63; padding-left:12px; }
.mode-funded { color:#c6ec9f; }
.trading-scroll { display:flex; flex:1; flex-direction:column; gap:16px; min-height:0; overflow:auto; overscroll-behavior:contain; padding:14px; }
.trading-status { color:#d9cfb1; font-size:.75rem; line-height:1.5; }
.trading-status.is-retained { color:#ffda87; border-left:2px solid #ffcc66; padding-left:9px; }
.intent-window { padding:12px; background:#373a2c; border:1px solid #26271e; outline:1px solid #6d6d55; }
.intent-caption { display:flex; justify-content:space-between; gap:10px; color:#cabf9c; font-size:.75rem; }
.intent-caption span { font-variant-numeric:tabular-nums; }
.intent-main { display:flex; gap:12px; align-items:center; margin:10px 0 4px; min-width:0; }
.intent-main>div { min-width:0; }
.intent-main h2 { font-size:1.1875rem; line-height:1.3; font-weight:600; color:var(--rs-gold); overflow-wrap:anywhere; text-shadow:1px 1px #15170e; }
.intent-phase { font-size:.8125rem; color:#e8dec4; line-height:1.5; margin-top:3px!important; }
.intent-note { font-size:.8125rem; color:#bfb697; margin-top:12px!important; }
.trading-loading h2 { font-size:1.125rem; color:var(--rs-gold); }
.trading-loading p { font-size:.875rem; color:#dbd2b8; margin-top:8px; }
.decision-notes { margin-top:12px; padding-top:9px; border-top:1px solid #62634e; font-size:.8125rem; }
summary { cursor:pointer; color:#ead49c; min-height:24px; line-height:1.5; }
.decision-notes p { color:#ece2c8; line-height:1.6; margin:8px 0; overflow-wrap:anywhere; max-width:65ch; }
.trading-time { color:#bfb89f; font-size:.75rem; font-variant-numeric:tabular-nums; }
.performance-window { padding:0 2px; }
.performance-window>dl { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.performance-window dt { color:#c7bfa4; font-size:.75rem; }
.performance-window dd { font-size:1rem; line-height:1.5; font-weight:600; color:#f2e8ca; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.performance-window details { margin-top:8px; font-size:.75rem; }
.performance-window details dl { display:grid; gap:6px; margin-top:8px; }
.performance-window details dl>div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; }
.performance-window details dd { font-size:.8125rem; }
.performance-window details p { margin-top:8px; }
.amount-positive { color:#b4ef89!important; }
.amount-negative { color:#ffb198!important; }
.trading-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; margin:0 -2px; }
.trading-tabs button { min-height:38px; padding:6px; border:2px solid; border-color:#83806a #27291f #27291f #83806a; background:#444738; color:#e6dbc0; border-radius:0; font:inherit; font-size:.8125rem; line-height:1.25; cursor:pointer; }
.trading-tabs button.is-active { background:#303326; color:var(--rs-gold); border-color:#25271d #6c7059 #6c7059 #25271d; }
.trading-tab-content { display:flex; flex-direction:column; gap:20px; min-width:0; }
.section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:10px; border-bottom:1px solid #77735d; padding-bottom:7px; margin-bottom:10px; }
.section-heading h2 { color:var(--rs-gold); font-size:.875rem; line-height:1.4; font-weight:600; text-shadow:1px 1px #202217; }
.section-meta { color:#c8bfa3; font-size:.75rem; }
.item-art-slot { display:grid; place-items:center; flex-shrink:0; width:38px; height:38px; background:#303326; }
.item-art { width:32px; height:32px; object-fit:contain; image-rendering:pixelated; flex-shrink:0; }
.item-coins { margin:3px; }
.item-art-missing { display:grid; place-items:center; width:30px; height:30px; color:#cbbd8a; border:1px dashed #777159; font-size:1rem; font-weight:600; }
.inventory-list { background:#36392b; border:1px solid #73705a; padding:0 9px!important; }
.inventory-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:12px 0; }
.inventory-row+.inventory-row { border-top:1px solid #62634c; }
.holding-name { display:flex; flex-direction:column; min-width:0; flex:1; }
.holding-name strong { color:#ffdc7d; font-size:.875rem; line-height:1.4; overflow-wrap:anywhere; }
.holding-name span { color:#c4bba0; font-size:.75rem; overflow-wrap:anywhere; }
.holding-amount { display:flex; flex-direction:column; align-items:flex-end; max-width:100%; margin-left:auto; color:#f4e8bd; font-size:.8125rem; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.holding-amount strong { font-weight:500; }
.holding-amount span { color:#c7bda2; font-size:.75rem; }
.holding-reserved { flex-basis:100%; padding-left:46px; font-size:.75rem; color:#c2b99f; }
.empty-message { color:#cfc5aa; font-size:.8125rem; line-height:1.6; padding:10px 0; }
.trading-secondary { color:#cfc5aa; font-size:.75rem; line-height:1.6; overflow-wrap:anywhere; }
.trading-orders>li { padding:11px 0; }
.trading-orders>li+li { border-top:1px solid #696851; }
.order-line { display:flex; gap:9px; align-items:center; }
.order-line>div { flex:1; min-width:0; }
.order-line strong { color:#eee1bc; font-size:.8125rem; font-weight:500; overflow-wrap:anywhere; }
.order-line time { align-self:flex-start; margin-top:3px; color:#c9bfa4; font-size:.75rem; font-variant-numeric:tabular-nums; }
.order-amount { color:#ded4b7; font-size:.75rem; line-height:1.6; margin:8px 0 3px!important; overflow-wrap:anywhere; }
.receipt-link,.receipt-label { display:inline-block; color:#c2e6a1; font-size:.75rem; line-height:1.5; }
.receipt-link { text-decoration:underline; text-underline-offset:3px; }
.receipt-label { color:#c8bfa3; }
.activity-list>li { display:flex; gap:10px; padding:12px 0; }
.activity-list>li+li { border-top:1px solid #65664f; }
.activity-list>li>div { min-width:0; flex:1; }
.activity-list p { color:#ece1c1; font-size:.8125rem; line-height:1.6; overflow-wrap:anywhere; }
.activity-mark { width:6px; height:6px; background:#c7ac60; margin-top:8px; flex-shrink:0; }
.activity-receipt { background:#b2dd86; }
.activity-meta { display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:3px; }
.activity-meta time { color:#c2b99c; font-size:.75rem; font-variant-numeric:tabular-nums; }
.rewards-terms { color:#f1dfa6; font-size:.875rem; font-weight:500; line-height:1.6; }
.rewards-terms span { color:#a6a186; padding-inline:3px; }
.reward-ledger { display:grid; gap:10px; margin-top:14px!important; }
.reward-ledger>div { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:12px; align-items:baseline; }
.reward-ledger dt { color:#cfc5aa; font-size:.75rem; }
.reward-ledger dd { color:#f0dfac; font-size:.8125rem; text-align:right; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.reward-legacy { margin-top:12px; font-size:.75rem; }
.reward-legacy p { color:#c8bfa4; margin-top:5px; }
.reward-mode-note { margin-top:12px!important; }
.reward-events>li { padding:11px 0; }
.reward-events>li+li { border-top:1px solid #696851; }
.reward-event-line { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 10px; }
.reward-event-line strong { font-size:.8125rem; font-weight:500; color:#f0dfac; }
.reward-event-line span { color:#c6bfa4; font-size:.75rem; }
.reward-events p { font-size:.8125rem; color:#e8dcbc; margin-top:4px; font-variant-numeric:tabular-nums; }
.trading-freshness { display:flex; flex-wrap:wrap; gap:5px 12px; padding:9px 14px; border-top:1px solid #78715a; color:#c9bfa0; font-size:.75rem; font-variant-numeric:tabular-nums; }
@media(hover:hover) { .trading-tabs button:hover { color:var(--rs-gold); background:#4e5140; } .receipt-link:hover,.shell-docs:hover { color:#fff0b0; } }
@media(max-width:1000px) { .trading-scroll { overflow:visible; } .trading-header { padding:13px 16px; } .trading-tab-content { min-height:160px; } }
@media(prefers-reduced-motion:reduce) { .trading-panel *,.trading-panel *::before,.trading-panel *::after { animation:none!important; transition:none!important; } }

.stage-caption { flex-wrap:wrap; } .stage-source-clocks { display:flex; gap:12px; margin-left:auto; color:#bfb69d; font-variant-numeric:tabular-nums; } .stage-source-clocks span:first-child { color:inherit; }
.rewards-freshness { display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:14px; color:#c3b89a; font-size:.75rem; font-variant-numeric:tabular-nums; }
.payout-receipt { margin-top:9px; padding-left:9px; border-left:2px solid #7b9260; }

.performance-window .portfolio-age { color:#bfb799; font-size:.75rem; margin:0 0 7px; font-variant-numeric:tabular-nums; }

.stage-waiting.stage-retained { inset:auto 12px 12px; display:block; padding:10px 14px; background:#303326; border:2px solid #8b8162; }

.reward-policy { color:#c9bfa3; font-size:.75rem; margin-bottom:5px!important; }
/* Token identity and exact quantity each get the full readable column. */
.inventory-row { display:grid; grid-template-columns:38px minmax(0,1fr); column-gap:10px; row-gap:5px; }
.inventory-row>.item-art,.inventory-row>.item-art-slot { grid-column:1; grid-row:1 / span 2; align-self:center; }
.holding-name { grid-column:2; }
.holding-amount { grid-column:2; align-items:flex-start; margin-left:0; }
.holding-reserved { grid-column:2; padding-left:0; }

.activity-token { display:block; color:#f0d58b; font-size:.8125rem; line-height:1.4; font-weight:600; overflow-wrap:anywhere; margin-bottom:2px; }