:root{
  --bg:#FFFFFF; --bg-raise:#F7F8FA; --card:#FFFFFF; --card-hi:#FFFFFF; --line:#E3E6EB;
  --text:#131722; --muted:#6B7280; --green:#089981; --green-dim:rgba(8,153,129,.10);
  --red:#F23645; --red-dim:rgba(242,54,69,.10); --gold:#E8880A; --gold-dim:rgba(232,136,10,.10);
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --font-d:'Poppins',sans-serif; --font-b:'Inter',sans-serif; --font-m:'JetBrains Mono',monospace;
  --mobile-action-h:64px; --mobile-tabs-h:52px;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html,body{ touch-action:manipulation; overscroll-behavior:none; }
body{background:var(--bg); color:var(--text); font-family:var(--font-b); -webkit-font-smoothing:antialiased; overflow:hidden; height:100vh; height:100dvh;}
/* the landing page (index.php) is a normal scrolling document, unlike the
   fixed single-screen game page — only dojicraft-trading-simulation.php needs the rule above */
body.landing{ overflow-y:auto; overflow-x:hidden; height:auto; min-height:100vh; }
h1,h2,h3,.disp{font-family:var(--font-d); letter-spacing:-.02em;}
.mono{font-family:var(--font-m);}
button{font-family:var(--font-b); cursor:pointer; border:none; -webkit-tap-highlight-color:transparent;}

[data-tt]{ position:relative; }
[data-tt]::after{
  content:attr(data-tt);
  position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%) translateY(4px);
  background:#1A1F2B; color:#fff; font-size:11px; font-family:var(--font-m); font-weight:500;
  padding:6px 10px; border-radius:6px; white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .15s ease, transform .15s ease; box-shadow:0 6px 16px rgba(16,24,40,.25); z-index:150;
}
[data-tt]::before{
  content:''; position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:#1A1F2B; opacity:0; transition:opacity .15s ease; pointer-events:none; z-index:150;
}
[data-tt]:hover::after,[data-tt]:focus-visible::after,[data-tt]:active::after{ opacity:1; transform:translateX(-50%) translateY(0); }
[data-tt]:hover::before,[data-tt]:focus-visible::before,[data-tt]:active::before{ opacity:1; }
[data-tt-right]::after{ left:auto; right:0; transform:translateX(0) translateY(4px); }
[data-tt-right]::before{ left:auto; right:14px; transform:translateX(0); }
[data-tt-right]:hover::after,[data-tt-right]:active::after{ transform:translateX(0) translateY(0); }

/* tooltip below the element (used by the top bar icons, so they never get
   clipped by the top of the viewport) */
[data-tt-pos="bottom"]::after{
  bottom:auto; top:calc(100% + 9px); left:50%; right:auto; transform:translateX(-50%) translateY(-4px);
}
[data-tt-pos="bottom"]::before{
  bottom:auto; top:calc(100% + 4px); left:50%; right:auto; transform:translateX(-50%);
  border-top-color:transparent; border-bottom-color:#1A1F2B;
}
[data-tt-pos="bottom"]:hover::after,[data-tt-pos="bottom"]:focus-visible::after,[data-tt-pos="bottom"]:active::after{ transform:translateX(-50%) translateY(0); }
/* rightmost top-bar icons: keep the tooltip right-aligned so it doesn't
   run off the edge of the screen, while still showing below */
[data-tt-pos="bottom"][data-tt-right]::after{ left:auto; right:0; transform:translateX(0) translateY(-4px); }
[data-tt-pos="bottom"][data-tt-right]::before{ left:auto; right:14px; transform:translateX(0); }
[data-tt-pos="bottom"][data-tt-right]:hover::after,[data-tt-pos="bottom"][data-tt-right]:active::after{ transform:translateX(0) translateY(0); }

/* tooltip to the right of the element (used by the left-hand drawing
   toolbar, so tooltips don't get clipped by the edge of the screen) */
[data-tt-pos="right"]::after{
  bottom:auto; top:50%; left:calc(100% + 9px); right:auto; transform:translateY(-50%) translateX(-4px);
}
[data-tt-pos="right"]::before{
  bottom:auto; top:50%; left:calc(100% + 4px); right:auto; transform:translateY(-50%);
  border-top-color:transparent; border-right-color:#1A1F2B;
}
[data-tt-pos="right"]:hover::after,[data-tt-pos="right"]:focus-visible::after,[data-tt-pos="right"]:active::after{ transform:translateY(-50%) translateX(0); }

.btn{font-weight:600; font-size:13px; padding:10px 16px; border-radius:9px; transition:.15s; display:inline-flex; align-items:center; justify-content:center; gap:6px; text-decoration:none;}
a.btn, a#playBtn{ text-decoration:none; }
.btn:active{transform:scale(.96);}
.btn-green{background:var(--green); color:#fff;} .btn-green:hover{filter:brightness(1.08);}
.btn-red{background:var(--red); color:#fff;} .btn-red:hover{filter:brightness(1.08);}
.btn-ghost{background:rgba(19,23,34,.04); color:var(--text); border:1px solid var(--line);} .btn-ghost:hover{background:rgba(19,23,34,.08);}
.btn-gold{background:var(--gold); color:#fff;} .btn-gold:hover{filter:brightness(1.08);}
.btn:disabled{opacity:.35; cursor:not-allowed;}
label{font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; display:block; margin-bottom:4px; font-family:var(--font-m);}

/* ---------- HOME / HERO (landing page only) ---------- */
#home{ position:relative; min-height:100vh; width:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; overflow:hidden; padding:60px 20px;
  background:radial-gradient(ellipse 60% 50% at 50% 30%, rgba(8,153,129,.07), transparent), var(--bg);}
#home .glow{position:absolute; width:500px; height:500px; border-radius:50%; background:var(--green); opacity:.06; filter:blur(140px); top:-100px;}
.logo-big{display:flex; align-items:center; gap:12px; margin-bottom:26px;}
.logo-big .bars{display:flex; align-items:flex-end; gap:4px; height:42px;}
.logo-big .bars i{width:8px; border-radius:2px; display:block;}
.logo-big .bars i:nth-child(1){height:16px; background:var(--red);}
.logo-big .bars i:nth-child(2){height:30px; background:var(--gold);}
.logo-big .bars i:nth-child(3){height:42px; background:var(--green);}
.logo-big .bars i:nth-child(4){height:22px; background:var(--green);}
.logo-big span{font-family:var(--font-d); font-weight:800; font-size:30px; color:var(--text);}
#home h1{font-size:clamp(28px,4vw,44px); text-align:center; max-width:640px; margin-bottom:12px; font-weight:700; color:var(--text);}
#home p{color:var(--muted); font-size:16px; margin-bottom:40px;}
#playBtn{font-family:var(--font-d); font-size:20px; font-weight:700; background:var(--green); color:#fff; padding:20px 56px; border-radius:14px;
  box-shadow:0 0 0 0 rgba(8,153,129,.35); transition:.25s; display:inline-flex; align-items:center; justify-content:center; text-decoration:none;}
#playBtn:hover{transform:translateY(-3px) scale(1.03); box-shadow:0 20px 50px -12px rgba(8,153,129,.45);}
#home .tags{display:flex; gap:10px; margin-top:26px; flex-wrap:wrap; justify-content:center;}
#home .tags span{font-size:11.5px; font-family:var(--font-m); color:var(--muted); border:1px solid var(--line); padding:5px 11px; border-radius:99px;}

/* ---------- LANDING: FEATURES ---------- */
.section-head{ text-align:center; max-width:640px; margin:0 auto 44px; padding:0 20px; }
.eyebrow{ font-family:var(--font-m); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.section-head h2{ font-size:clamp(24px,3.2vw,34px); font-weight:700; margin-top:10px; color:var(--text); }

.features{ padding:90px 20px; background:var(--bg-raise); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.feature-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; max-width:1080px; margin:0 auto; }
.feature-card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:26px; box-shadow:var(--shadow); }
.feature-ico{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:19px; margin-bottom:16px; }
.feature-card h3{ font-family:var(--font-d); font-size:16px; font-weight:700; margin-bottom:8px; color:var(--text); }
.feature-card p{ font-size:13.5px; color:var(--muted); line-height:1.55; }

/* ---------- LANDING: SCREENSHOTS ---------- */
.screenshots{ padding:90px 20px; }
.browser-mock{ max-width:1000px; margin:0 auto; border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow:0 24px 64px -20px rgba(16,24,40,.25); position:relative; }
.browser-chrome{ background:var(--bg-raise); border-bottom:1px solid var(--line); padding:12px 16px; display:flex; align-items:center; gap:8px; }
.browser-chrome .dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.browser-url{ margin-left:14px; font-family:var(--font-m); font-size:11.5px; color:var(--muted); background:var(--card); border:1px solid var(--line); padding:4px 12px; border-radius:99px; }
.mock-chart{ width:100%; height:auto; display:block; }
.mock-sidebar{ position:absolute; top:64px; right:16px; width:180px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px; }
.mock-row{ display:flex; justify-content:space-between; align-items:center; font-size:11.5px; color:var(--muted); }
.mock-row b{ font-family:var(--font-m); font-size:12.5px; color:var(--text); }

/* ---------- LANDING: FINAL CTA + FOOTER ---------- */
.final-cta{ padding:90px 20px; text-align:center; background:radial-gradient(ellipse 50% 60% at 50% 30%, rgba(8,153,129,.08), transparent), var(--bg-raise); border-top:1px solid var(--line); }
.final-cta h2{ font-size:clamp(22px,3vw,30px); font-weight:700; margin-bottom:10px; color:var(--text); }
.final-cta p{ color:var(--muted); margin-bottom:26px; }
.landing-footer{ padding:26px 20px; text-align:center; font-size:12px; color:var(--muted); border-top:1px solid var(--line); }

@media (max-width:860px){
  .feature-grid{ grid-template-columns:1fr; }
  .mock-sidebar{ position:static; width:auto; margin:14px 16px; }
}

/* ---------- GAME ---------- */
#game{ display:none; height:100vh; height:100dvh; flex-direction:column; }
#game.active{ display:flex; }

#topbar{ height:56px; background:var(--bg-raise); border-bottom:1px solid var(--line); display:flex; align-items:center; padding:0 18px; gap:22px; flex-shrink:0; }
.tb-item{ font-size:12px; }
.tb-item label{ margin-bottom:1px; }
.tb-item b{ font-family:var(--font-m); font-size:14px; }
#stockName{ font-family:var(--font-d); font-weight:700; font-size:17px; }
#stockBadge{ font-family:var(--font-m); font-size:10.5px; color:var(--muted); background:var(--card); padding:3px 8px; border-radius:6px; border:1px solid var(--line); }
.spacer{flex:1;}
#topbar .icobtn{ background:rgba(19,23,34,.04); border:1px solid var(--line); width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--text); font-size:15px; }
#topbar .icobtn:hover{ background:rgba(19,23,34,.08); }

#main{ flex:1; display:grid; grid-template-columns:54px 1fr 300px; overflow:hidden; }

#drawToolbar{ background:var(--bg-raise); border-right:1px solid var(--line); display:flex; flex-direction:column; align-items:center; padding:10px 0; gap:6px; }
#drawToolbar .tool-btn{ width:38px; height:38px; border-radius:8px; background:transparent; color:var(--muted); font-size:16px; display:flex; align-items:center; justify-content:center; border:1px solid transparent; }
#drawToolbar .tool-btn:hover{ background:rgba(19,23,34,.06); color:var(--text); }
#drawToolbar .tool-btn.active{ background:var(--gold-dim); color:var(--gold); border-color:var(--gold); }
#drawToolbar .divider{ width:26px; height:1px; background:var(--line); margin:6px 0; }
#drawToolbar #clearDrawBtn{ width:38px; height:38px; border-radius:8px; background:transparent; color:var(--muted); font-size:15px; }
#drawToolbar #clearDrawBtn:hover{ background:var(--red-dim); color:var(--red); }

#chartWrap{ position:relative; display:flex; flex-direction:column; background:var(--bg); }
#priceCanvas{ width:100%; flex:1; display:block; cursor:crosshair; }
#ohlcTip{ position:absolute; top:10px; left:14px; font-family:var(--font-m); font-size:12px; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:8px; padding:8px 12px; display:none; pointer-events:none; line-height:1.6;}
#ohlcTip b{ margin-right:6px; }
.ind-toggles{ position:absolute; top:10px; right:79px; display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; max-width:min(360px, calc(100% - 110px)); }
.ind-chip{ font-family:var(--font-m); font-size:10.5px; padding:5px 10px; border-radius:6px; background:var(--card); border:1px solid var(--line); color:var(--muted); cursor:pointer; box-shadow:var(--shadow); }
.ind-chip.active{ border-color:var(--gold); color:var(--gold); background:var(--gold-dim); }

#sidebar{ background:var(--bg-raise); border-left:1px solid var(--line); overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:16px; }
.panel{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; box-shadow:var(--shadow); }
.panel h5{ font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:10px; font-family:var(--font-m); }
.trade-btns{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px; }
.trade-btns .btn{ padding:12px; font-size:14px; }
.playback-btns{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px;}
#nextBtn{ width:100%; padding:13px; font-size:14.5px; }
#autoBtn{ width:100%; margin-top:8px; }
.stat-line{ display:flex; justify-content:space-between; font-size:12px; padding:5px 0; color:var(--muted); border-bottom:1px dashed var(--line); }
.stat-line:last-child{ border:none; }
.stat-line b{ font-family:var(--font-m); color:var(--text); }
.pos-badge{ font-family:var(--font-m); font-size:11px; padding:3px 8px; border-radius:6px; }
.pos-badge.long{ background:var(--green-dim); color:var(--green); } .pos-badge.short{ background:var(--red-dim); color:var(--red); } .pos-badge.flat{ background:rgba(19,23,34,.06); color:var(--muted); }
#tradeLog{ max-height:150px; overflow-y:auto; font-size:11px; font-family:var(--font-m); }
#tradeLog .tl-row{ display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px solid var(--line); }

/* ---------- MODAL ---------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(15,20,30,.55); backdrop-filter:blur(6px); z-index:200; display:none; align-items:center; justify-content:center; padding:20px;}
.modal-overlay.open{ display:flex; }
.modal-card{ background:var(--card-hi); border:1px solid var(--line); border-radius:18px; max-width:520px; width:100%; padding:28px; max-height:86vh; overflow-y:auto; position:relative; box-shadow:0 20px 60px rgba(16,24,40,.18);}
.modal-card .close{ position:absolute; top:14px; right:16px; color:var(--muted); font-size:22px; background:none;}
#summaryModal .score-hero{ text-align:center; padding:20px 0; }
#summaryModal .score-hero b{ font-family:var(--font-d); font-size:44px; display:block; color:var(--gold);}
#summaryModal .kvgrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:18px 0;}
#summaryModal .kvgrid div{ background:var(--bg-raise); border:1px solid var(--line); border-radius:9px; padding:10px 12px;}
#summaryModal .kvgrid div span{ display:block; font-size:10px; text-transform:uppercase; color:var(--muted); font-family:var(--font-m); margin-bottom:3px;}
#summaryModal .kvgrid div b{ font-size:15px; font-family:var(--font-m);}

/* ---------- PATTERNS / LEADERBOARD ---------- */
#patternsList .pat-row{ display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-bottom:1px dashed var(--line); }
#patternsList .pat-row:last-child{ border:none; }
#patternsList .pat-tag{ font-family:var(--font-m); font-size:9.5px; padding:2px 7px; border-radius:5px; }
#patternsList .pat-tag.bull{ background:var(--green-dim); color:var(--green); }
#patternsList .pat-tag.bear{ background:var(--red-dim); color:var(--red); }
#patternsList .pat-tag.neutral{ background:var(--gold-dim); color:var(--gold); }
.icobtn-wide{ width:auto !important; padding:0 12px !important; font-size:10.5px !important; font-family:var(--font-m); }

/* ---------- ACCOUNT MENU (topbar) ---------- */
.account-menu{ position:relative; }
.account-dropdown{
  position:absolute; top:calc(100% + 8px); right:0; width:240px; background:var(--card);
  border:1px solid var(--line); border-radius:12px; box-shadow:0 16px 40px -12px rgba(16,24,40,.25);
  padding:14px; display:none; z-index:180;
}
.account-menu.open .account-dropdown{ display:block; }
.account-dropdown-section p{ font-size:12px; color:var(--muted); line-height:1.5; margin-bottom:12px; }
.account-dropdown-section a{
  display:block; text-decoration:none; font-size:13px; font-weight:600; color:var(--text);
  padding:10px 4px; border-radius:8px;
}
.account-dropdown-section a:hover{ background:rgba(19,23,34,.05); }
.account-dropdown-section #logoutBtn{
  width:100%; text-align:left; background:none; padding:10px 4px; border-radius:8px; font-size:13px; font-weight:600; color:var(--red);
}
.account-dropdown-section #logoutBtn:hover{ background:var(--red-dim); }
#resumeBtn{ display:none; margin-top:16px; font-size:12.5px; }
#lbList .tl-row{ display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--line); font-size:12px; }
.storage-note{ font-size:11px; color:var(--muted); margin-top:14px; line-height:1.5; border-top:1px solid var(--line); padding-top:12px; }

/* ---------- TOASTS ---------- */
#toastHost{ position:absolute; top:14px; left:50%; transform:translateX(-50%); z-index:60; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.toast{
  font-family:var(--font-m); font-size:12.5px; font-weight:600; color:#fff; background:#1A1F2B;
  padding:9px 16px; border-radius:99px; box-shadow:0 8px 24px rgba(16,24,40,.22);
  opacity:0; transform:translateY(-10px) scale(.96); transition:opacity .2s ease, transform .2s ease; white-space:nowrap;
}
.toast.show{ opacity:1; transform:translateY(0) scale(1); }
.toast-buy{ background:var(--green); }
.toast-sell{ background:var(--red); }
.toast-streak{ background:var(--gold); color:#231a02; }

/* ---------- LOADING OVERLAY ---------- */
#loadingOverlay{
  position:absolute; inset:0; z-index:70; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
#loadingOverlay.show{ opacity:1; pointer-events:auto; }
.loading-spinner{ width:32px; height:32px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--green); animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
#loadingMsg{ font-family:var(--font-m); font-size:12.5px; color:var(--muted); }

/* ---------- STREAK BADGE ---------- */
.streak-badge{ font-family:var(--font-m); font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:99px; display:inline-flex; align-items:center; gap:4px; flex-shrink:0; }
.streak-badge.good{ background:var(--gold-dim); color:var(--gold); }
.streak-badge.bad{ background:rgba(107,114,128,.14); color:var(--muted); }

/* ---------- NAV FLASH ---------- */
@keyframes flashUp{ 0%{ color:var(--green); text-shadow:0 0 12px var(--green-dim); } 100%{ color:var(--text); text-shadow:none; } }
@keyframes flashDown{ 0%{ color:var(--red); text-shadow:0 0 12px var(--red-dim); } 100%{ color:var(--text); text-shadow:none; } }
.flash-up{ animation:flashUp .8s ease; }
.flash-down{ animation:flashDown .8s ease; }

/* ---------- PERSISTENT MOBILE ACTION BAR (always-visible Buy/Next/Sell) ---------- */
#mobileActionBar{ display:none; }
#mobileTabs{ display:none; }
#sheetBackdrop{ display:none; }

@media (max-width:860px){
  #topbar{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding:0 12px; gap:16px; scrollbar-width:none; }
  #topbar::-webkit-scrollbar{ display:none; }
  #topbar .icobtn{ flex-shrink:0; }

  #main{ grid-template-columns:1fr; position:relative; }

  #drawToolbar{
    position:absolute; left:10px; bottom:14px; top:auto; z-index:40;
    flex-direction:row; background:var(--card); border:1px solid var(--line);
    border-radius:14px; box-shadow:var(--shadow); padding:6px; gap:4px;
  }
  #drawToolbar .divider{ width:1px; height:24px; margin:0 2px; }

  #chartWrap{ padding-bottom:calc(var(--mobile-action-h) + var(--mobile-tabs-h) + env(safe-area-inset-bottom)); }
  /* SMA/EMA/VWAP/BOLL/RSI toggle chips: desktop-only. On mobile there's
     no space above the candles for them, and pinning them to the bottom
     (as an earlier version did) puts them right on top of the volume
     bars. Toggling indicators is still available on desktop; mobile
     players just get the clean chart + volume, no overlap. */
  .ind-toggles{ display:none; }

  /* the always-visible trading bar — this is the important one for mobile practice */
  #mobileActionBar{
    display:grid; grid-template-columns:1fr 1.3fr 1fr; gap:8px;
    position:fixed; left:0; right:0; bottom:calc(var(--mobile-tabs-h) + env(safe-area-inset-bottom)); z-index:97;
    background:var(--card); border-top:1px solid var(--line); padding:8px 10px;
    height:var(--mobile-action-h); box-shadow:0 -4px 16px rgba(16,24,40,.06);
  }
  #mobileActionBar button{ border-radius:10px; font-family:var(--font-d); font-weight:700; font-size:14px; }
  #mobileActionBar button:disabled{ opacity:.4; }
  #m_sellBtn{ background:var(--red); color:#fff; }
  #m_buyBtn{ background:var(--green); color:#fff; }
  #m_nextBtn{ background:var(--gold); color:#fff; }

  /* secondary tab bar (stats / patterns / log / more) sits below the action bar */
  #mobileTabs{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:95;
    background:var(--card); border-top:1px solid var(--line); align-items:stretch;
    height:calc(var(--mobile-tabs-h) + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
  }
  #mobileTabs button{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px; background:none; color:var(--muted); font-size:10px; font-family:var(--font-m);
  }
  #mobileTabs button .ico{ font-size:17px; }
  #mobileTabs button.active{ color:var(--gold); }

  #sidebar{
    position:fixed; left:0; right:0;
    bottom:calc(var(--mobile-action-h) + var(--mobile-tabs-h) + env(safe-area-inset-bottom));
    width:100%; max-height:60vh;
    border-left:none; border-top:1px solid var(--line); border-radius:18px 18px 0 0;
    box-shadow:0 -12px 40px rgba(16,24,40,.16); transform:translateY(110%);
    transition:transform .28s cubic-bezier(.22,.9,.32,1); z-index:90; flex-direction:column;
    padding:10px 16px 16px;
  }
  #sidebar.sheet-open{ transform:translateY(0); }
  #sidebar .sheet-handle{ width:40px; height:4px; background:var(--line); border-radius:99px; margin:2px auto 12px; flex-shrink:0; }
  .panel{ min-width:unset; }
  #panel-trade{ display:none; } /* replaced by the always-visible action bar on mobile */

  #sheetBackdrop{
    display:block; position:fixed; inset:0; background:rgba(15,20,30,.4); z-index:85;
    opacity:0; pointer-events:none; transition:opacity .25s;
  }
  #sheetBackdrop.show{ opacity:1; pointer-events:auto; }

  .tool-btn, #topbar .icobtn{ width:44px; height:44px; }
  #drawToolbar #clearDrawBtn{ width:44px; height:44px; }
  .btn{ padding:13px 16px; font-size:14px; }
  .ind-chip{ padding:7px 11px; font-size:11px; }

  .modal-overlay{ padding:0; align-items:flex-end; }
  .modal-card{ max-width:100%; width:100%; max-height:92vh; border-radius:18px 18px 0 0; padding:22px 18px calc(22px + env(safe-area-inset-bottom)); }

  [data-tt]::after,[data-tt]::before{ display:none; }
  [data-tt]:active::after,[data-tt]:active::before{ display:block; }
}