/* Phone layout. One spacing scale and explicit grid tracks keep every tab stable. */
.mobile-play-bar { display:none; }
@media (max-width:760px) {
  :root {
    --page-gutter:20px;
    --header-height:calc(96px + env(safe-area-inset-top,0px));
    /* This reservation never changes when the fixed CTA becomes compact. */
    --mobile-bar-height:calc(80px + env(safe-area-inset-bottom,0px));
    --chapter-height:calc(100svh - var(--header-height) - var(--mobile-bar-height));
    --mobile-gap:12px;
    --mobile-section-padding:20px;
    --mobile-title:clamp(28px,7.7vw,32px);
  }
  html { scroll-padding-bottom:var(--mobile-bar-height); }
  body { background:#181016; padding-bottom:var(--mobile-bar-height); overflow-anchor:none; }
  button,a { touch-action:manipulation; }
  .launch-button { border-radius:999px; min-height:48px; }

  .header { left:0; right:0; padding:env(safe-area-inset-top,0px) var(--page-gutter) 0; grid-template-rows:52px 44px; }
  .header .brand { display:inline-flex; align-items:center; min-height:44px; }
  .header .brand img { width:120px; }
  .header-actions { gap:8px; }
  .header .launch-button { display:none; }
  .header-social { width:44px; height:44px; }
  .section-nav { margin-inline:-5px; }
  .section-nav a { min-width:44px; min-height:44px; justify-content:center; padding-inline:5px; font-size:12px; color:#c9b7c3; }
  .section-nav a[aria-current=location] { color:var(--yellow); }

  .mobile-play-bar {
    display:flex; align-items:flex-end; justify-content:center; position:fixed; z-index:15; inset:auto 0 0;
    height:var(--mobile-bar-height); padding:12px max(20px,env(safe-area-inset-left,0px)) calc(16px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(#140f17e8,#140f17); border-top:1px solid #ffffff12; backdrop-filter:blur(16px);
    transition:height .28s ease,padding .28s ease;
  }
  .mobile-play-bar .launch-button { width:100%; max-width:520px; min-height:48px; height:48px; padding-block:10px; font-size:13px; letter-spacing:.3px; transition:width .28s ease,height .28s ease,min-height .28s ease,font-size .28s ease,transform .2s; }
  .mobile-play-bar.is-compact:not(:focus-within) { height:calc(64px + env(safe-area-inset-bottom,0px)); padding-block:8px calc(12px + env(safe-area-inset-bottom,0px)); }
  .mobile-play-bar.is-compact:not(:focus-within) .launch-button { width:208px; min-height:44px; height:44px; font-size:12px; }

  /* Explicit columns matter: an auto grid track otherwise follows each tab's text width. */
  .content-view,#caps,#modes.content-view,#economy.content-view { height:var(--chapter-height); min-height:390px; padding:var(--mobile-section-padding) var(--page-gutter); }
  #caps,#loop,#modes.content-view { background:radial-gradient(ellipse at 95% 35%,#6c344e45,transparent 75%),#181016; }
  .view-inner,#caps .view-inner,#modes>.view-inner {
    width:100%; max-width:520px; height:100%; min-height:0; margin:0 auto;
    display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr);
    gap:var(--mobile-gap); justify-content:stretch; align-content:stretch; justify-items:stretch;
  }
  .view-heading,#caps .view-heading,#modes .view-heading { width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:0; }
  .display-title,#modes .view-heading .display-title,#economy .economy-intro .display-title { font-size:var(--mobile-title); line-height:1.08; text-wrap:balance; }
  .section-kicker,#modes .section-kicker { margin-bottom:8px; font-size:10px; line-height:1.4; letter-spacing:1.2px; color:#cba2b3; }
  .chapter-aside,#caps .view-heading>.section-lead { display:none; }

  /* Calm headline, visible eyebrow, and a separate breathing space for Restart. */
  .game-view { height:calc(100svh - var(--mobile-bar-height)); min-height:calc(390px + var(--header-height)); padding:calc(var(--header-height) + 20px) var(--page-gutter) 16px; gap:16px; }
  .intro { position:relative; inset:auto; width:100%; max-width:500px; flex:none; margin:0 auto; text-align:center; }
  .intro .eyebrow { display:flex; align-items:center; justify-content:center; gap:7px; font-size:10px; line-height:1.5; letter-spacing:.45px; color:#efd3cd; }
  .intro .live-dot { flex:none; width:5px; height:5px; }
  .intro h1 { width:100%; margin:12px auto 0; font-size:clamp(30px,8.2vw,36px); line-height:1.08; letter-spacing:-.4px; transform:none; text-align:center; }
  .intro .chrome-line { margin-inline:auto; padding-bottom:.025em; filter:drop-shadow(0 1px 0 #3c3c48) drop-shadow(0 3px 5px #0005); }
  .intro .chrome-gold { filter:drop-shadow(0 1px 0 #735216) drop-shadow(0 3px 5px #0005); }
  .intro-copy { display:block; margin:12px auto 0; max-width:330px; font-size:13px; line-height:1.5; }
  .hero-actions { display:none; }
  #cap-table { --mobile-controls-space:76px; position:relative; inset:auto; width:min(100vw,560px); height:auto; min-height:0; align-self:center; flex:1; margin:0; touch-action:pan-y pinch-zoom; }
  #cap-table canvas { position:absolute; top:calc(-1 * var(--table-overdraw-top,0px)); left:0; height:auto; mask-image:none; touch-action:pan-y pinch-zoom; }
  .bottom-ui { top:auto; bottom:4px; }
  .bottom-ui .reset-button { min-height:44px; min-width:112px; font-size:12px; }
  .hero-proof { position:relative; inset:auto; width:100%; flex:none; padding-top:12px; gap:8px; }
  .hero-proof article>.proof-icon { width:18px; min-width:18px; height:18px; margin:0 auto 6px; }
  .hero-proof h3 { font-size:11px; margin-bottom:4px; }
  .hero-proof p { font-size:10px; line-height:1.4; }

  /* All cap features share the same four tracks, including a fixed copy slot. */
  #caps .asset-layout { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:48px 48px minmax(0,1fr) 80px; width:100%; min-width:0; min-height:0; height:100%; gap:8px; align-items:stretch; }
  #caps .asset-info { display:contents; }
  #caps .asset-layout>* ,#caps .asset-info>* { grid-column:1; min-width:0; }
  #caps .feature-select { grid-row:1; width:100%; padding:1px; }
  #caps .feature-select button { min-width:0; min-height:44px; padding:8px 4px; font-size:12px; }
  #caps .feature-options { grid-row:2; width:100%; height:48px; min-height:0; padding:0; border:0; }
  #caps .feature-options .quiet-label { display:none; }
  #caps .asset-stage { grid-row:3; width:100%; max-width:none; height:100%; min-height:0; container-type:size; border-radius:20px; }
  #caps .feature-copy { grid-row:4; width:100%; height:80px; min-height:0; padding:4px 0 0; text-align:center; }
  #caps .feature-copy h3 { font-size:24px; line-height:1.1; margin:0 0 6px; }
  #caps .feature-copy>p:last-child { margin:0 auto; max-width:360px; font-size:13px; line-height:1.45; }
  #caps .detail-kicker { display:none; }
  .supply-collection-link { display:flex; align-items:center; justify-content:center; width:100%; height:48px; min-height:44px; font-size:13px; }
  .supply-main,.supply-side { width:min(44%,72cqh); max-width:190px; }
  .rarity-showcase { top:48%; width:min(72%,82cqh); max-width:260px; }
  .rarity-showcase .rarity-face { max-width:none; }
  .custom-frame { top:48%; width:min(76%,85cqh); max-width:280px; }
  .specimen-tag { bottom:8px; font-size:8px; }

  #caps .grade-select,#caps .frame-select,#loop .loop-select,#modes .arena-select {
    display:flex; flex-wrap:nowrap; width:100%; min-width:0; margin:0; gap:8px; padding:2px;
    overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scroll-snap-type:x proximity;
    scroll-padding-inline:2px; scrollbar-width:none;
  }
  #caps .grade-select::-webkit-scrollbar,#caps .frame-select::-webkit-scrollbar,#loop .loop-select::-webkit-scrollbar,#modes .arena-select::-webkit-scrollbar { display:none; }
  #caps .grade-select button,#caps .frame-select button,#loop .loop-select button,#modes .arena-select button { flex:none; scroll-snap-align:start; }
  #caps .grade-select button { min-height:44px; min-width:78px; padding:8px 14px; border-radius:999px; font-size:13px; }
  #caps .frame-select button { justify-content:center; min-height:44px; padding:8px 14px; gap:8px; border-radius:999px; font-size:13px; }
  #caps .frame-select img { width:22px; height:22px; }

  #loop .view-inner { grid-template-rows:auto 48px minmax(0,1fr); }
  #loop .loop-select button { justify-content:center; border-radius:999px; min-height:44px; min-width:90px; padding:10px 16px; font-size:13px; white-space:nowrap; }
  #loop .loop-layout { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) 140px; width:100%; min-height:0; height:100%; gap:8px; align-items:stretch; }
  #loop .loop-scene { width:100%; max-width:none; min-height:0; height:100%; container-type:size; }
  #loop .loop-big-number { top:6%; font-size:min(69vw,94cqh); }
  #loop .loop-scene>.loop-main,#loop .loop-scene>.loop-extra { width:min(38%,64cqh); max-width:185px; }
  #loop .loop-upgrade { width:min(70%,84cqh); max-width:265px; top:47%; }
  #loop .loop-play { width:100%; }
  #loop .loop-scene .duel-cap { width:min(35%,68cqh); }
  #loop .duel-vs { font-size:48px; }
  /* A compact mobile stage keeps the cap large without clipping the coin flights. */
  #loop .loop-stake { width:400px; height:280px; top:50%; bottom:auto; transform:translate(-50%,-50%) scale(var(--stake-scale,.65)); transform-origin:center; }
  #loop .loop-scene .stake-cap { top:50%; width:65%; max-width:none; }
  #loop .stake-halo { top:50%; width:330px; height:260px; }
  #loop .stake-ground { top:86%; width:360px; }
  #loop .stake-coin-flight { width:calc(var(--coin-size) * 1.4); height:calc(var(--coin-size) * 1.4); offset-path:var(--mobile-flight-path); }
  #loop .loop-scene .stake-coin-rest { width:calc(var(--coin-size) * 1.4); top:calc(43% + var(--mobile-land-y)); left:calc(50% + var(--mobile-land-x)); }
  #loop .stake-coin::after { top:calc(43% + var(--mobile-land-y) + 28px); left:calc(50% + var(--mobile-land-x)); width:58px; }
  #loop .stake-coin:nth-child(1) { --mobile-flight-path:path('M -20 45 Q -170 -80 -136 86'); --mobile-land-x:-136px; --mobile-land-y:86px; }
  #loop .stake-coin:nth-child(2) { --mobile-flight-path:path('M 24 42 Q 170 -72 136 92'); --mobile-land-x:136px; --mobile-land-y:92px; }
  #loop .stake-coin:nth-child(3) { --mobile-flight-path:path('M -12 54 Q -105 -58 -77 90'); --mobile-land-x:-77px; --mobile-land-y:90px; }
  #loop .stake-coin:nth-child(4) { --mobile-flight-path:path('M 22 48 Q 125 -78 75 80'); --mobile-land-x:75px; --mobile-land-y:80px; }
  #loop .stake-coin:nth-child(5) { --mobile-flight-path:path('M -4 62 Q -58 -48 -27 82'); --mobile-land-x:-27px; --mobile-land-y:82px; }
  #loop .stake-coin:nth-child(6) { --mobile-flight-path:path('M 18 56 Q 90 -58 34 100'); --mobile-land-x:34px; --mobile-land-y:100px; }
  #loop .spend-pile { width:min(70%,82cqh); max-width:285px; }
  #loop .spend-glow { width:min(220px,80cqh); height:min(220px,80cqh); }
  #loop .loop-detail { width:100%; padding:12px 0 0; border:0; border-top:1px solid #ffcd0033; text-align:center; }
  #loop .loop-detail h3 { font-size:24px; margin:0 0 6px; }
  #loop .loop-detail p:last-child { max-width:380px; min-height:38px; margin:auto; font-size:13px; line-height:1.45; }
  #loop .loop-detail .text-action { min-height:44px; margin:8px auto 0; padding:8px 16px; justify-content:center; font-size:13px; border:1px solid #ffffff20; border-radius:999px; }

  #modes .arena-layout { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:48px 48px minmax(0,1fr); width:100%; min-height:0; height:100%; gap:var(--mobile-gap); }
  #modes .arena-info { display:contents; }
  #modes .arena-select { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-column:1; grid-row:1; gap:6px; padding:2px; overflow:visible; scroll-snap-type:none; }
  #modes .arena-select button { display:flex; width:100%; min-width:0; min-height:44px; padding:8px 4px; border-radius:999px; gap:0; transform:none; }
  #modes .arena-select button:hover { transform:none; }
  #modes .mode-card-index,#modes .mode-card-arrow,#modes .mode-card-description { display:none; }
  #modes .mode-card-name { font:600 clamp(11px,3.2vw,13px)/1.2 Inter,Arial,sans-serif; letter-spacing:0; white-space:nowrap; }
  #modes .arena-copy { display:flex; grid-column:1; grid-row:2; align-items:center; justify-content:center; width:100%; height:48px; min-height:0; margin:0; padding:0 4px; text-align:center; }
  #modes .arena-copy .mode-badge,#modes .arena-copy h3 { display:none; }
  #modes .arena-copy>p { max-width:360px; margin:0; font-size:13px; line-height:1.45; color:#cbb5c2; text-wrap:pretty; }
  #modes .modes-preview { grid-column:1; grid-row:3; width:100%; height:100%; min-height:0; container-type:size; --phone-height:min(440px,calc(100cqh - 36px)); }
  #modes .game-phones { width:100%; }
  #modes .game-phone { left:55%; border-radius:22px; padding:4px; transform:translateX(-50%) rotate(4deg); }
  #modes .game-phone img { border-radius:17px; }
  #modes .game-phone[data-position=next] { transform:translateX(-84%) translateY(14px) rotate(-14deg) scale(.86); opacity:.32; filter:brightness(.5) saturate(.55); }
  #modes .game-phone[data-position=hidden] { opacity:0; visibility:hidden; }
  #modes .modes-preview-caption { margin-top:16px; font-size:11px; }
  #modes .arena-cta { display:none; }

  #economy.economy-editorial { background:radial-gradient(ellipse at 80% 25%,#6c344e40,transparent 65%),#181016; }
  #economy .view-inner { display:block; }
  #economy .economy-layout { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; width:100%; height:100%; gap:var(--mobile-gap); }
  #economy .economy-intro { text-align:center; }
  #economy .economy-intro .display-title { max-width:380px; margin:auto; }
  #economy .economy-currency { display:inline; font-size:inherit; margin:0; }
  #economy .economy-headline br { display:none; }
  #economy .token-art,#economy .closing-strip { display:none; }
  #economy .economy-showcase { display:block; position:relative; isolation:isolate; width:100%; height:100%; min-height:0; }
  #economy .economy-token-glow { position:absolute; inset:-10%; z-index:-1; background:radial-gradient(circle,#b36a7936,transparent 65%); filter:blur(24px); }
  #economy .economy-main-coin { position:absolute; width:auto; height:min(100%,170px); max-width:none; aspect-ratio:345/331; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-6deg); filter:drop-shadow(0 18px 20px #0004); }
  #economy .economy-main-coin img { display:block; height:100%; width:auto; }
  #economy .economy-flow { width:100%; }
  #economy .economy-flow::before,#economy .economy-flow i { display:none; }
  #economy .economy-flow article { display:grid; grid-template-columns:24px minmax(0,1fr); gap:12px; padding:12px 0; border-top:1px solid var(--line); }
  #economy .flow-number { width:auto; height:auto; border:0; background:none; color:var(--yellow); font-size:10px; line-height:26px; }
  #economy .economy-flow h3 { margin:0 0 6px; font:800 24px/1.1 'Barlow Condensed',Impact,sans-serif; text-transform:uppercase; }
  #economy .economy-flow p { font-size:13px; line-height:1.45; max-width:none; }

  .site-footer { padding:0 var(--page-gutter); }
  .footer-inner { max-width:520px; }
  .footer-layout { grid-template-columns:minmax(0,1fr); gap:20px; padding:24px 0 20px; }
  .footer-pitch,.footer-connect { gap:12px; }
  .footer-message h2 { font-size:clamp(24px,6.5vw,32px); white-space:normal; }
  .site-footer p { font-size:13px; }
  .footer-message p { max-width:360px; }
  .footer-action { display:none; }
  .footer-connect { padding-top:20px; border-top:1px solid var(--line); }
  .footer-logo img { width:132px; }
  .footer-logo { align-items:center; min-height:44px; }
  .footer-identity .footer-tagline { font-size:13px; white-space:normal; max-width:360px; margin-top:12px; }
  .footer-community { gap:8px; flex-wrap:wrap; }
  .footer-community a { padding:12px 18px; min-height:48px; font-size:13px; }
  .footer-community a:last-child { min-width:54px; }
  .footer-meta { gap:8px; flex-wrap:wrap; padding:12px 0; }
  .footer-meta p,.footer-network,.footer-meta>a { font-size:11px; }
  .footer-meta>a { min-height:44px; gap:8px; }
}

/* Short viewports change decoration, never the selected tab's geometry. */
@media (max-width:760px) and (max-height:700px) {
  :root { --mobile-section-padding:12px; --mobile-title:28px; }
  .game-view { padding-top:calc(var(--header-height) + 16px); padding-bottom:12px; gap:12px; }
  .intro-copy { display:none; }
  .hero-proof { padding-top:12px; }
  .hero-proof article>.proof-icon { display:none; }
  #loop .loop-layout { grid-template-rows:minmax(0,1fr) 108px; }
  #loop .loop-detail h3 { display:none; }
  #economy .economy-layout { grid-template-columns:minmax(0,1fr) 64px; grid-template-rows:auto minmax(0,1fr); }
  #economy .economy-intro { text-align:left; }
  #economy .economy-intro .section-kicker { white-space:nowrap; }
  #economy .economy-intro .display-title { font-size:26px; }
  #economy .economy-showcase { height:66px; align-self:center; }
  #economy .economy-main-coin { height:62px; }
  #economy .economy-flow { grid-column:1/-1; align-self:stretch; display:grid; grid-template-rows:repeat(3,minmax(0,1fr)); height:100%; }
  #economy .economy-flow article { padding-block:8px; align-content:center; }
  .footer-layout { padding-top:20px; gap:16px; }
  .footer-connect { padding-top:16px; }
}
@media (max-width:359px) {
  :root { --page-gutter:16px; }
  .header .brand img { width:112px; }
  .section-nav a,#caps .feature-select button { font-size:11px; }
  .intro .eyebrow { font-size:9px; letter-spacing:.2px; }
  .footer-meta { column-gap:16px; }
  .footer-meta>a { margin-left:0; }
}
@media (max-width:760px) and (max-height:600px) {
  :root { --mobile-gap:8px; --mobile-section-padding:8px; }
  /* Keep the playable area usable on the shortest phones. The hero eyebrow stays. */
  .hero-proof { display:none; }
  #cap-table { --mobile-controls-space:64px; }
  .content-view .section-kicker { display:none; }
  #caps .asset-layout { gap:6px; grid-template-rows:48px 48px minmax(0,1fr) 74px; }
  #caps .feature-copy { height:74px; }
  #caps .feature-copy h3 { font-size:22px; }
  #caps .feature-copy>p:last-child { font-size:12px; }
  #economy .economy-flow h3 { font-size:22px; }
  .footer-layout { padding-top:16px; gap:12px; }
  .footer-connect { padding-top:12px; }
}
@media (min-width:761px) and (max-width:1000px) {
  .footer-identity .footer-tagline { white-space:normal; }
  .footer-community { flex-wrap:wrap; }
}
@media (max-width:760px) and (prefers-reduced-motion:reduce) {
  .mobile-play-bar,.mobile-play-bar .launch-button { transition:none; }
}