@font-face { font-family: Vazirmatn; src: url('assets/vazirmatn-medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url('assets/vazirmatn-semibold.ttf') format('truetype'); font-weight: 600; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #0d1522;
  --panel: #131e2e;
  --raised: #1c2b3f;
  --soft: #101b2a;
  --line: #2c3b50;
  --line-soft: #243247;
  --ink: #f3f5f9;
  --muted: #a7b6ca;
  --dim: #90a2ba;
  --brand: #ff4d2d;
  --brand-hover: #ff795d;
  --accent: #ff9277;
  --accent-soft: #352820;
  --cyan: #41d9d0;
  --cyan-soft: #14343b;
  --buy: #64dacf;
  --sell: #ffa18d;
  --buy-bg: #15343a;
  --sell-bg: #392b28;
  --grid: #2b3b50;
  --rope: #8197b1;
  --watermark: #1e2e45;
  --shadow-color: #040c1b44;
  --backdrop: #050e20c9;
  --yellow: var(--accent);
  --green: var(--buy);
  --red: var(--sell);
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --font: Vazirmatn, Tahoma, sans-serif;
}

/* The shared color tokens also drive the SVG chart, arena, and exported cards. */
body { line-height: 1.8; }
button, a { transition: background-color .16s, color .16s, border-color .16s, transform .16s; }
button:active:not(:disabled) { transform: translateY(1px); }
p, h2, h3 { text-wrap: pretty; }
h2 { font-weight: 600; }
button:focus-visible, a:focus-visible, input:focus-visible { outline-color: var(--brand); }
.site-header { background: var(--panel); }
.header-inner { max-width: 1512px; height: 86px; gap: 50px; padding: 0 44px; }
.page-shell { max-width: 1512px; padding: 0 44px; }
.brand { gap: 11px; }
.brand-symbol { display: grid; place-items: center; width: 49px; height: 49px; border-radius: 12px; overflow: hidden; transform: none; background: var(--panel); }
.brand-symbol img { display: block; width: 76px; height: 76px; max-width: none; }
.brand-name { font: 700 25px/1.3 var(--font); letter-spacing: -.7px; }
.brand-name > span { display: block; font: 500 8px/1.7 var(--mono); letter-spacing: .24em; margin-top: 4px; color: var(--muted); }
.main-nav { gap: 28px; font-size: 12px; }
.main-nav .active { font-weight: 600; }
.main-nav .active:after { height: 3px; background: var(--brand); border-radius: 3px 3px 0 0; }
.main-nav .status-dot { background: var(--cyan); }
.header-account { gap: 23px; }
.profile-button > span { width: 34px; height: 34px; background: var(--cyan-soft); color: var(--cyan); font: 12px var(--mono); }
.intro { gap: 40px; padding: 31px 0 28px; }
.intro-copy { min-width: 0; }
.eyebrow { font-size: 11px; font-weight: 500; color: var(--muted); }
.short-rule { background: var(--brand); }
h1#page-title { display: flex; align-items: baseline; gap: 12px; font-size: clamp(30px, 3.5vw, 50px); line-height: 1.7; letter-spacing: -1.8px; white-space: nowrap; }
h1#page-title > span { color: var(--brand); }
.headline-arrow { width: 60px; height: 46px; align-self: center; color: var(--cyan); margin-right: 4px; transform: rotate(3deg); }
.intro-description { font-size: 12px; line-height: 2; }
.intro-meta { display: flex; align-items: center; gap: 9px; margin-top: 13px; color: var(--dim); font-size: 10px; }
.demo-badge { font-size: 9px; padding: 2px 7px; }
.intro-separator { width: 3px; height: 3px; border-radius: 50%; background: var(--dim); }
.round-info { width: 307px; padding: 19px 21px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); margin-top: 0; }
.round-number { font-size: 8px; letter-spacing: .04em; }
.live-label { font-size: 9px; }
.countdown-row { margin-top: 15px; }
.countdown { font-size: 24px; letter-spacing: -.6px; }
.round-track { height: 3px; background: var(--raised); border-radius: 2px; overflow: hidden; }
.round-track > span { background: var(--brand); }
.round-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 11px; color: var(--muted); font-size: 9px; }
.round-bottom > span:first-child { color: var(--cyan); }
.market-layout { grid-template-columns: minmax(0, 1fr) 326px; }
.panel { border-radius: 13px; box-shadow: 0 6px 25px var(--shadow-color); }
.panel-top { min-height: 72px; padding: 17px 22px; }
.small-market-logo { display: grid; place-items: center; width: 35px; height: 35px; border: 0; overflow: hidden; border-radius: 8px; background: var(--panel); }
.small-market-logo img { width: 54px; height: 54px; max-width: none; }
.theme-logo, .arena-svg image { mix-blend-mode: lighten; }
.self-avatar:hover { border-color: var(--brand); }
.countdown { white-space: nowrap; }
.panel-heading .subtle { font-size: 8px; margin-top: 5px; }
.status-dot { background: var(--cyan); }
.market-status { font-size: 9px; }
.price-toolbar { padding: 20px 24px 5px; }
.price-caption { color: var(--muted); font-size: 11px; }
.price-caption .subtle { font-size: 10px; }
.current-price { font-size: clamp(28px, 3.1vw, 38px); }
.price-change { padding: 5px 7px; }
.chart-controls { gap: 10px; }
.timeframes button { font-size: 10px; }
.chart-wrap { height: 247px; margin: 10px 15px 0; }
.chart-watermark { left: 16px; bottom: 41px; color: var(--watermark); font-size: clamp(25px, 3vw, 44px); }
.chart-footnote { font-size: 10px; padding: 1px 24px 16px; }
.chart-footnote .mono { font-size: 8px; }
.yellow-dot { background: var(--brand); }
.arena { padding: 15px 23px 12px; background: var(--soft); }
.arena-side { font-size: 11px; font-weight: 500; }
.arena-center-label { font-size: 10px; }
.arena-svg { height: 100px; }
.pressure-labels { font-size: 9px; }
.pressure-labels b { font-weight: 500; }
.market-metrics { padding: 16px 22px; }
.market-metrics strong { font-weight: 500; font-size: 13px; }
.feed-caption { padding: 11px 20px; font-size: 10px; }
.feed-state { font-size: 9px; color: var(--dim); }
.comment-feed { min-height: 270px; max-height: 323px; }
.comment-item { padding: 11px 0; }
.comment-message strong { font-weight: 600; }
.execution-price { font-size: 10px; }
.avatar { background: var(--cyan-soft); color: var(--cyan); }
.avatar[data-tone='1'] { background: var(--accent-soft); color: var(--accent); border-color: var(--line); }
.avatar[data-tone='2'] { background: var(--raised); color: var(--muted); }
.avatar[data-tone='3'] { background: var(--soft); color: var(--ink); }
.self-avatar { color: var(--accent); background: var(--accent-soft); }
.comment-composer { background: var(--soft); }
.comment-composer > label { font-size: 15px; font-weight: 600; }
.comment-input-wrap { background: var(--panel); border-radius: 7px; }
.comment-input-wrap:focus-within { border-color: var(--brand); }
.comment-input-wrap input { font-size: 11px; }
.comment-input-wrap input::placeholder { font-size: 10px; }
.send-comment, .primary-button, .skip-link { background: var(--brand); color: #101827; }
.send-comment:hover, .primary-button:hover { background: var(--brand-hover); }
.comment-composer > p { font-size: 10px; }
.quick-actions button { padding: 8px 5px; border-radius: 6px; font-size: 10px; }
.quick-actions button b { font-weight: 600; }
.quick-actions .buy-action { color: var(--buy); background: var(--buy-bg); }
.quick-actions .sell-action { color: var(--sell); background: var(--sell-bg); }
.comment-composer p.composer-note { font-size: 9px; }
.lower-layout .panel-top { min-height: 64px; padding: 16px 22px; }
.section-marker { height: 23px; border-radius: 5px; }
.position-status { font-size: 10px; border-radius: 5px; }
.empty-icon { background: var(--accent-soft); color: var(--brand); border-radius: 18px; transform: rotate(-7deg); }
.empty-icon:before, .empty-icon:after { display: none; }
.empty-icon > .icon { transform: rotate(7deg); }
.empty-position h3 { font-size: 15px; font-weight: 600; }
.empty-position p { font-size: 11px; max-width: 340px; }
.empty-position button { font-size: 11px; font-weight: 500; }
.position-data dt { font-size: 10px; }
.position-data dd { font-size: 17px; }
.position-bottom > span { font-size: 10px; }
.outline-button { font-size: 11px; }
.leader-name { font-size: 11px; }
.leader-result { font-size: 12px; }
.leader-result small { font-size: 8px; color: var(--dim); }
.how-it-works > div span { font-size: 11px; }
.how-it-works > div b { color: var(--accent); font-size: 11px; }
.how-it-works > .text-button { font-size: 11px; }
.footer-wordmark { display: flex; align-items: center; gap: 6px; font: 700 11px var(--mono); letter-spacing: .06em; }
.footer-wordmark img { width: 28px; height: 28px; border-radius: 6px; }
.footer-wordmark > .footer-brand-dot { color: var(--brand); font-size: 7px; vertical-align: baseline; }
footer > p { font-size: 10px; color: var(--ink); }
footer > p > span { margin-right: 8px; color: var(--muted); }
.toast { color: var(--bg); background: var(--ink); border: 1px solid var(--line); }
.toast.error { background: var(--sell-bg); color: var(--sell); border-color: var(--sell); }
.modal { background: var(--panel); border-color: var(--line); }
.modal::backdrop { background: var(--backdrop); }
.modal-note, .result-card { background: var(--soft); }
.name-input-wrap { background: var(--soft); }
.chart-expanded { box-shadow: 0 0 0 25px var(--bg); }

@media (min-width:1500px) {
  .chart-wrap { height: 272px; }
  .market-layout { grid-template-columns: minmax(0,1fr) 350px; }
  .comment-feed { max-height: 349px; }
}
@media (max-width:1200px) {
  .header-inner,.page-shell { padding-right:28px; padding-left:28px; }
  .header-inner { gap:31px; }
  .main-nav { gap:21px; }
  .header-account { gap:17px; }
  .market-layout { grid-template-columns:minmax(0,1fr) 300px; gap:16px; }
  .round-info { width:275px; padding:17px; }
  h1#page-title { font-size:40px; gap:9px; }
  .headline-arrow { width:45px; height:39px; margin-right:0; }
  .intro-description { font-size:11px; }
  .round-number { font-size:7px; }
  .chart-wrap { height:240px; }
  .arena-svg { height:93px; }
  .arena-center-label { font-size:9px; }
  .comment-feed { max-height:308px; }
  .market-metrics { padding:15px; }
  .market-metrics strong { font-size:12px; }
  .how-it-works > div span { font-size:10px; }
  footer > p > span { display:none; }
}
@media (max-width:1000px) {
  .header-inner,.page-shell { padding-right:22px; padding-left:22px; }
  .header-inner { height:78px; gap:25px; }
  .brand-symbol { width:43px; height:43px; }
  .brand-symbol img { width:66px; height:66px; }
  .brand-name { font-size:23px; }
  .brand-name > span { font-size:7px; }
  .main-nav { font-size:11px; gap:20px; }
  .profile-button > .icon { display:none; }
  .intro { padding:28px 0 26px; gap:20px; }
  h1#page-title { font-size:34px; gap:7px; }
  .headline-arrow { display:none; }
  .round-info { width:244px; padding:15px; }
  .round-top { gap:6px; }
  .round-number { font-size:6px; }
  .live-label { font-size:8px; }
  .countdown { font-size:21px; }
  .countdown-row > span { font-size:9px; }
  .round-bottom { font-size:8px; }
  .intro-description { max-width:420px; }
  .intro-meta { font-size:9px; }
  .market-layout { grid-template-columns:minmax(0,1fr) 276px; }
  .current-price { font-size:29px; }
  .price-toolbar { padding:17px 17px 5px; }
  .price-caption,.price-caption .subtle { font-size:9px; }
  .timeframes button { font-size:8px; }
  .chart-wrap { height:230px; margin-right:7px; margin-left:7px; }
  .chart-footnote { padding-right:17px; padding-left:17px; font-size:9px; }
  .chart-footnote .mono { font-size:7px; }
  .arena { padding-right:17px; padding-left:17px; }
  .arena-center-label { font-size:8px; }
  .arena-side { font-size:10px; }
  .comment-feed { padding-right:15px; padding-left:15px; max-height:313px; }
  .comment-composer { padding:15px 13px 12px; }
  .feed-caption { padding-right:15px; padding-left:15px; font-size:9px; }
  .feed-state { font-size:8px; }
  .comment-input-wrap input::placeholder { font-size:9px; }
  .how-it-works > div span { font-size:10px; }
}
@media (max-width:760px) {
  .header-inner,.page-shell { padding-right:20px; padding-left:20px; }
  .header-inner { height:75px; gap:20px; }
  .main-nav { margin-right:auto; }
  .header-account { margin-right:0; gap:14px; }
  .profile-button { display:none; }
  .brand-symbol { width:40px; height:40px; border-radius:10px; }
  .brand-symbol img { width:62px; height:62px; }
  .brand-name { font-size:22px; }
  .intro { align-items:center; padding:26px 0; gap:20px; }
  h1#page-title { display:block; white-space:normal; font-size:38px; line-height:1.6; letter-spacing:-1.2px; margin-top:7px; }
  h1#page-title > span { display:block; }
  .eyebrow { font-size:10px; }
  .intro-description { max-width:340px; margin-top:6px; }
  .intro-meta { margin-top:12px; }
  .intro-meta > span:last-child,.intro-separator { display:none; }
  .round-info { width:210px; padding:16px; }
  .round-top { flex-direction:column; align-items:flex-start; gap:7px; }
  .round-number { font-size:8px; }
  .live-label { font-size:9px; }
  .countdown-row { flex-direction:column; align-items:flex-start; margin-top:13px; gap:3px; }
  .countdown { font-size:22px; }
  .round-track { margin-top:12px; }
  .round-bottom > span:last-child { display:none; }
  .round-bottom { font-size:9px; }
  .market-layout { grid-template-columns:1fr; }
  .price-toolbar { padding:20px 20px 5px; }
  .current-price { font-size:36px; }
  .price-caption { font-size:11px; }
  .price-caption .subtle { font-size:10px; }
  .timeframes button { font-size:10px; }
  .chart-wrap { height:260px; }
  .chart-footnote { padding-right:21px; padding-left:21px; font-size:10px; }
  .chart-footnote .mono { font-size:8px; }
  .arena { padding-right:21px; padding-left:21px; }
  .arena-center-label { font-size:10px; }
  .arena-side { font-size:11px; }
  .arena-svg { height:103px; }
  .market-metrics { padding:17px; }
  .market-metrics strong { font-size:13px; }
  .comment-feed { max-height:235px; }
  .comment-composer { padding:20px 16px; }
  .lower-layout .panel-top { padding:15px; }
  .empty-position h3 { font-size:13px; }
  .empty-position p { font-size:10px; }
  .position-data dd { font-size:15px; }
  .position-data dt { font-size:9px; }
  .leader-name { font-size:9px; }
  .leader-result { font-size:10px; }
  .how-it-works > div span { font-size:9px; }
}
@media (max-width:480px) {
  .header-inner,.page-shell { padding-right:15px; padding-left:15px; }
  .header-inner { height:74px; gap:12px; }
  .brand { gap:6px; }
  .brand-symbol { width:34px; height:36px; border-radius:8px; }
  .brand-symbol img { width:56px; height:56px; }
  .brand-name { font-size:21px; }
  .brand-name > span { font-size:6px; letter-spacing:.22em; }
  .main-nav { display:none; }
  .header-account { margin-right:auto; }
  .intro { align-items:flex-start; gap:12px; padding:25px 0 24px; }
  .intro-copy { flex:1; }
  .eyebrow { font-size:8px; gap:5px; }
  .short-rule { width:12px; }
  h1#page-title { font-size:clamp(26px,7.7vw,34px); line-height:1.65; letter-spacing:-1px; margin-top:8px; }
  .intro-description { font-size:10px; line-height:2; margin-top:7px; max-width:215px; }
  .intro-meta { margin-top:10px; }
  .intro-meta .demo-badge { display:inline-block; font-size:8px; padding:2px 5px; }
  .round-info { width:124px; padding:12px 10px 10px; margin-top:7px; border-radius:9px; }
  .round-number { font-size:6px; letter-spacing:-.05em; }
  .round-top { gap:7px; }
  .live-label { font-size:7px; gap:4px; }
  .countdown-row { margin-top:13px; gap:4px; }
  .countdown-row > span { font-size:8px; }
  .countdown { font-size:14px; letter-spacing:-.65px; }
  .round-track { margin-top:11px; height:2px; }
  .round-bottom { margin-top:9px; font-size:8px; }
  .panel-heading .subtle { font-size:6px; letter-spacing:.02em; margin-top:4px; }
  .small-market-logo { width:31px; height:31px; }
  .small-market-logo img { width:49px; height:49px; }
  .price-toolbar { padding:17px 15px 4px; }
  .price-caption { font-size:10px; }
  .price-caption .subtle { font-size:9px; }
  .current-price { font-size:30px; }
  .timeframes button { font-size:8px; }
  .chart-wrap { height:229px; margin-top:8px; }
  .chart-footnote { padding:2px 16px 14px; font-size:9px; }
  .chart-footnote .mono { font-size:7px; }
  .arena { padding:13px 15px 12px; }
  .arena-svg { height:94px; }
  .arena-center-label { font-size:8px; }
  .arena-side { font-size:10px; }
  .market-metrics { padding:13px 15px; }
  .market-metrics strong { font-size:12px; }
  .comment-feed { max-height:270px; }
  .feed-caption { padding:11px 17px; font-size:10px; }
  .feed-state { font-size:9px; }
  .comment-name { font-size:11px; }
  .comment-time { font-size:9px; }
  .comment-composer { padding:17px; }
  .comment-input-wrap input,.comment-input-wrap input::placeholder { font-size:11px; }
  .quick-actions button { padding:11px 7px; }
  .lower-layout .panel-top { padding:17px; }
  .position-status { font-size:9px; }
  .position-bottom > span { font-size:9px; }
  .leader-name { font-size:11px; }
  .leader-result { font-size:12px; }
  .how-it-works > div span { font-size:8px; }
  footer > p { max-width:180px; font-size:9px; }
}
@media (max-width:360px) {
  .intro { gap:9px; }
  .round-info { width:112px; padding-right:8px; padding-left:8px; }
  .round-number { font-size:5.5px; }
  .countdown { font-size:13px; }
  .eyebrow { font-size:7px; }
  .intro-description { font-size:9px; }
  h1#page-title { font-size:25px; }
  .panel-heading .subtle { font-size:5.5px; }
  .current-price { font-size:28px; }
  .how-it-works .step-line { display:none; }
}

/* The game is the first view; the chart records the moves below it. */
body { background-image: radial-gradient(ellipse at 58% 0, #173b4226, transparent 52%); }
.header-game-label { color:var(--muted); font-size:11px; white-space:nowrap; }
.play-hero { display:grid; grid-template-columns:minmax(270px,.78fr) minmax(0,1.22fr); align-items:center; gap:54px; padding:34px 0 32px; }
.play-hero .intro-copy { position:relative; padding:8px 0; }
.play-hero .eyebrow { font-size:11px; }
.play-hero h1#page-title { display:block; position:relative; width:fit-content; max-width:none; margin:13px 0 10px; font-size:clamp(38px,4.5vw,67px); line-height:1.5; letter-spacing:-2.5px; white-space:normal; }
.play-hero h1#page-title > span { display:block; }
.play-hero .headline-arrow { display:block; position:absolute; width:64px; height:50px; left:-68px; bottom:11px; transform:rotate(-9deg); }
.play-hero .intro-description { font-size:13px; max-width:360px; line-height:2.1; }
.hero-rules { display:flex; align-items:center; gap:12px; margin-top:18px; color:var(--ink); font-size:12px; }
.hero-rules .icon { width:18px; color:var(--brand); }
.hero-rules:hover .icon { transform:translateX(-4px); }
.hero-rules .icon { transition:transform .2s; }
.play-hero .intro-meta { margin-top:20px; font-size:10px; }
.game-stage { position:relative; min-width:0; overflow:hidden; border:1px solid #344759; border-radius:22px; background:radial-gradient(ellipse at 12% 45%,#41d9d00d,transparent 60%),radial-gradient(ellipse at 89% 45%,#ff4d2d0d,transparent 60%),var(--soft); box-shadow:0 20px 55px #040c1b30; scroll-margin-top:24px; }
.game-stage .round-info { width:auto; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:17px 24px 14px; margin:0; border:0; border-radius:0; background:transparent; }
.game-stage .round-top { display:flex; flex-direction:row; align-items:center; gap:14px; }
.game-stage .round-number { font-size:11px; font-weight:600; color:var(--ink); }
.round-number > span { font-size:8px; color:var(--dim); margin-right:6px; }
.game-stage .live-label { font-size:9px; gap:5px; }
.game-stage .countdown-row { display:flex; flex-direction:column; align-items:flex-end; gap:1px; margin:0; }
.game-stage .countdown-row > span { font-size:8px; color:var(--muted); }
.game-stage .countdown { font-size:15px; letter-spacing:-.25px; line-height:1.5; }
.game-stage .hero-arena { padding:8px 24px 0; background:transparent; border:0; }
.hero-arena .arena-label { align-items:center; }
.hero-arena .arena-side { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600; }
.arena-side i { display:block; width:7px; height:7px; border-radius:50%; background:currentColor; }
.hero-arena .arena-center-label { font-size:10px; color:var(--dim); }
.arena-scene { position:relative; margin-top:2px; }
.hero-arena .arena-svg { display:block; width:100%; height:184px; overflow:visible; }
.floating-command { position:absolute; top:9px; padding:3px 8px; border:1px solid currentColor; border-radius:5px; font:9px/1.6 var(--mono); opacity:.7; animation:command-float 3.8s ease-in-out infinite; pointer-events:none; }
.floating-buy { left:15%; color:var(--buy); transform:rotate(-7deg); }
.floating-sell { right:15%; color:var(--sell); animation-delay:-1.9s; transform:rotate(7deg); }
.hero-arena .pressure-track { height:4px; background:var(--sell); border-radius:4px; overflow:hidden; direction:ltr; }
.hero-arena .pressure-track > span { background:var(--buy); transition:width .7s cubic-bezier(.2,.7,.2,1); }
.hero-arena .pressure-labels { margin-top:8px; font-size:9px; }
.hero-arena .pressure-labels b { font-size:11px; font-weight:600; }
.hero-arena .pressure-labels > span:first-child { color:var(--buy); }
.hero-arena .pressure-labels > span:last-child { color:var(--sell); }
.arena-story { min-height:19px; padding:0 20px; margin:14px 0 12px; text-align:center; font-size:10px; line-height:1.9; color:var(--muted); text-wrap:balance; }
.stage-actions { display:grid; grid-template-columns:1fr 1fr auto; gap:9px; padding:0 24px; }
.stage-actions button { display:flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:10px 12px; border:1px solid transparent; border-radius:9px; font-size:12px; font-weight:600; }
.stage-actions button > b { margin-right:auto; font:9px var(--mono); }
.stage-actions .icon { width:17px; height:17px; }
.stage-actions .join-buy { color:var(--buy); background:var(--buy-bg); border-color:#41d9d03b; }
.stage-actions .join-sell { color:var(--sell); background:var(--sell-bg); border-color:#ff92773b; }
.stage-actions .leave-team { color:var(--muted); font-size:10px; background:var(--raised); padding-inline:12px; }
.stage-actions .leave-team > span { font-size:17px; }
.stage-actions button:disabled { cursor:default; opacity:.45; }
.stage-actions button[aria-pressed='true'] { border-color:var(--brand); color:var(--ink); opacity:1; box-shadow:inset 0 0 0 1px var(--brand); }
.stage-actions .join-buy:hover:not(:disabled) { background:#1b4649; transform:translateY(-2px); }
.stage-actions .join-sell:hover:not(:disabled) { background:#4c332c; transform:translateY(-2px); }
.stage-actions .leave-team:hover:not(:disabled) { color:var(--ink); }
.stage-note { text-align:center; color:var(--dim); font-size:9px; margin:12px 0 17px; }
.game-stage > .round-track { position:absolute; right:0; bottom:0; width:100%; height:2px; margin:0; background:transparent; }
.market-panel .panel-top { min-height:64px; }
.market-panel:not(.chart-expanded) .chart-wrap { height:210px; }
.market-panel .price-toolbar { padding-top:14px; }
.market-panel .current-price { font-size:29px; }
.comment-feed { min-height:160px; max-height:210px; }
.comments-panel .panel-top { min-height:64px; }
.actor-pull { transform-box:fill-box; transform-origin:center bottom; animation:team-pull 2.2s ease-in-out infinite; animation-delay:var(--pull-delay); }
.arena-knot { animation:knot-bob 2.2s ease-in-out infinite; }
.rope-thread { animation:rope-tension 2.2s ease-in-out infinite; }
@keyframes team-pull { 0%,100% { transform:rotate(calc(var(--pull-direction) * -2deg)); } 50% { transform:translateX(calc(var(--pull-direction) * -1.5px)) rotate(calc(var(--pull-direction) * 2deg)); } }
@keyframes knot-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-2px); } }
@keyframes rope-tension { 0%,100% { opacity:.25; } 50% { opacity:.65; } }
@keyframes command-float { 0%,100% { translate:0 0; } 50% { translate:0 -5px; } }
@media (min-width:761px) and (max-width:1100px) {
  .play-hero { grid-template-columns:minmax(230px,.7fr) minmax(0,1.3fr); gap:26px; }
  .play-hero h1#page-title { font-size:44px; letter-spacing:-1.8px; }
  .play-hero .headline-arrow { display:none; }
  .play-hero .intro-description { font-size:11px; }
  .play-hero .intro-meta { font-size:8px; gap:6px; }
  .game-stage .round-info { padding:15px 18px 13px; }
  .round-number > span { display:none; }
  .game-stage .round-top { gap:10px; }
  .game-stage .hero-arena { padding-inline:18px; }
  .stage-actions { padding-inline:18px; gap:6px; }
  .stage-actions button { font-size:10px; padding-inline:9px; }
  .stage-actions button > b,.stage-actions .icon { display:none; }
}
@media (max-width:760px) {
  .header-game-label { font-size:9px; }
  .header-account { margin-right:auto; }
  .main-nav { display:none; }
  .play-hero { grid-template-columns:1fr; gap:22px; padding:23px 0 24px; }
  .play-hero .intro-copy { padding:0 3px; }
  .play-hero .eyebrow { font-size:9px; }
  .play-hero h1#page-title { font-size:46px; line-height:1.45; margin:8px 0; letter-spacing:-1.7px; }
  .play-hero .headline-arrow { display:block; width:58px; height:47px; left:-77px; bottom:10px; }
  .play-hero .intro-description { font-size:11px; max-width:none; }
  .play-hero .intro-description br { display:none; }
  .play-hero .intro-meta { display:none; }
  .hero-rules { position:absolute; left:3px; top:0; margin:0; font-size:10px; gap:7px; }
  .hero-rules .icon { width:14px; }
  .game-stage { border-radius:17px; }
  .game-stage .round-info { padding:15px 20px 12px; }
  .game-stage .round-top { flex-direction:row; gap:12px; }
  .game-stage .round-number { font-size:10px; }
  .game-stage .live-label { font-size:8px; }
  .round-number > span { display:none; }
  .game-stage .hero-arena { padding:6px 20px 0; }
  .hero-arena .arena-side { font-size:11px; }
  .hero-arena .arena-center-label { font-size:9px; }
  .hero-arena .arena-svg { height:170px; }
  .stage-actions { padding-inline:20px; }
  .stage-actions button { font-size:11px; }
  .stage-actions button > b { display:none; }
  .arena-story { margin:11px 0; }
  .stage-note { margin:11px 0 15px; }
  .market-panel:not(.chart-expanded) .chart-wrap { height:215px; }
  .market-panel .current-price { font-size:29px; }
  .comment-feed { max-height:220px; }
}
@media (max-width:480px) {
  .header-inner { height:68px; }
  .header-game-label { font-size:8px; }
  .play-hero { gap:19px; padding-top:20px; }
  .play-hero h1#page-title { font-size:39px; letter-spacing:-1.5px; }
  .play-hero .headline-arrow { width:47px; left:-62px; bottom:5px; }
  .play-hero .intro-description { font-size:10px; line-height:1.9; }
  .game-stage .round-info { padding:13px 15px 11px; gap:8px; }
  .game-stage .round-top { flex-direction:column; align-items:flex-start; gap:3px; }
  .game-stage .countdown { font-size:15px; }
  .game-stage .hero-arena { padding:4px 15px 0; }
  .hero-arena .arena-side { font-size:10px; gap:5px; }
  .hero-arena .arena-center-label { font-size:8px; }
  .hero-arena .arena-svg { height:153px; }
  .hero-arena .pressure-labels { font-size:8px; }
  .hero-arena .pressure-labels b { font-size:10px; }
  .floating-command { font-size:8px; top:6px; padding:2px 6px; }
  .arena-story { font-size:9px; padding-inline:15px; min-height:34px; margin:10px 0 7px; }
  .stage-actions { grid-template-columns:1fr 1fr; gap:8px; padding-inline:15px; }
  .stage-actions button { min-height:43px; font-size:11px; padding:8px; }
  .stage-actions .leave-team { grid-column:1/-1; min-height:28px; padding:1px 9px; width:fit-content; margin-inline:auto; background:transparent; font-size:9px; }
  .stage-note { margin:5px 0 12px; font-size:8px; }
}
@media (max-width:360px) {
  .play-hero h1#page-title { font-size:34px; }
  .play-hero .headline-arrow { width:40px; left:-48px; }
  .hero-rules { font-size:9px; }
  .hero-arena .arena-svg { height:147px; }
  .game-stage .hero-arena { padding-inline:12px; }
  .stage-actions { padding-inline:12px; }
  .stage-actions button { font-size:10px; }
}

.market-panel.chart-expanded .chart-wrap { height:calc(100dvh - 320px); min-height:220px; }

/* Comments come before the record of market moves at every viewport size. */
.market-layout { grid-template-columns:minmax(0,1fr); }
@media (min-width:761px) {
  .comments-panel { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); grid-template-rows:auto auto 1fr; }
  .comments-panel > .panel-top { grid-column:1/-1; }
  .comments-panel > .feed-caption { grid-column:1; grid-row:2; }
  .comments-panel > .comment-feed { grid-column:1; grid-row:3; min-height:160px; max-height:200px; }
  .comments-panel > .comment-composer { grid-column:2; grid-row:2/4; margin:0; border-top:0; border-right:1px solid var(--line); padding:20px 24px; }
}