/* Hodlet — interface layer (shared look with FlySwarm).
   The yard stays pixel art; the UI floats above it as warm smoked glass. */
:root {
  --ink: #ffffff;
  --ink-2: rgba(255,255,255,.84);
  --ink-3: rgba(255,255,255,.66);
  --glass: rgba(96,100,108,.38);
  --glass-strong: rgba(78,82,90,.52);
  --line: rgba(255,255,255,.2);
  --line-2: rgba(255,255,255,.34);
  --honey: #ffffff;
  --honey-2: #ffffff;
  --honey-ink: #1d2027;
  /* Liquid glass: heavy blur + saturation, a specular top edge and a soft inner glow. */
  --blur: blur(22px) saturate(.55) brightness(1.02);
  --glass-edge: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.14), inset 0 10px 30px -18px rgba(255,255,255,.55);
  --up: #7fe3a4;
  --down: #ff8b7b;
  --r: 18px;
  --shadow: var(--glass-edge), 0 18px 40px -14px rgba(10,20,30,.4), 0 2px 8px rgba(10,20,30,.12);
  --sans: 'Inter', Arial, Helvetica, sans-serif;
  --mono: var(--sans);
  --serif: var(--sans);
  --ease: cubic-bezier(.2,.8,.2,1);
}

main { isolation:isolate; font-family:var(--sans); font-feature-settings:'tnum' 1,'cv11' 1; }
button, dialog { font-feature-settings:'tnum' 1,'cv11' 1; }
svg.i { width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ——— Header ——— */
#world-header { position:absolute; z-index:2; inset:0 0 auto; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:20px 24px; pointer-events:none; }
.brand { pointer-events:auto; display:flex; align-items:center; gap:14px; padding:10px 22px 10px 10px; border-radius:22px; background:var(--glass); border:1px solid var(--line); box-shadow:var(--shadow); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); color:var(--ink); }
.brand-mark { width:52px; height:52px; flex:none; border-radius:13px; box-shadow:0 6px 16px -6px rgba(10,20,30,.5); }
.brand h1 { margin:0; font:800 30px/1 var(--sans); letter-spacing:-.04em; color:var(--ink); white-space:nowrap; text-shadow:0 1px 3px rgba(0,0,0,.25); }
.brand h1 em { font-style:normal; font-weight:500; color:rgba(255,255,255,.78); margin-right:0; }
.brand-sub { display:flex; align-items:center; gap:8px; margin:6px 0 0; font:500 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }
.brand-sub b { color:var(--ink-2); font:600 11px/1 var(--mono); letter-spacing:0; }
.live-dot { width:7px; height:7px; border-radius:50%; background:var(--up); box-shadow:0 0 0 0 rgba(127,227,164,.6); animation:pulse 2.2s infinite; }
@keyframes pulse { 0% { box-shadow:0 0 0 0 rgba(127,227,164,.55); } 70%,100% { box-shadow:0 0 0 7px rgba(127,227,164,0); } }

.header-actions { pointer-events:auto; display:flex; align-items:center; gap:4px; padding:6px; border-radius:18px; background:var(--glass); border:1px solid var(--line); box-shadow:var(--shadow); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); }
.nav-btn { position:relative; display:flex; align-items:center; gap:8px; height:40px; padding:0 14px; border:0; border-radius:12px; background:transparent; color:var(--ink-2); font:500 14px/1 var(--sans); letter-spacing:-.01em; cursor:pointer; white-space:nowrap; transition:background .2s var(--ease), color .2s var(--ease), transform .15s var(--ease); }
.nav-btn:hover { background:rgba(255,255,255,.08); color:var(--ink); }
.nav-btn:active { transform:scale(.97); }
.nav-btn:focus-visible { outline:2px solid var(--honey-2); outline-offset:2px; }
.nav-btn .i { opacity:.85; }
.nav-btn b { font:500 12px/1 var(--mono); color:var(--up); padding:5px 7px; border-radius:7px; background:rgba(127,227,164,.1); }
.nav-spawn::after { content:''; position:absolute; left:14px; right:14px; bottom:5px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--up) var(--p,0%),rgba(255,255,255,.1) var(--p,0%)); transition:background .6s var(--ease); }
.nav-primary { background:rgba(255,255,255,.82); color:var(--honey-ink); font-weight:600; text-shadow:none; box-shadow:inset 0 1px 0 #fff, 0 6px 16px -8px rgba(10,20,30,.45); }
.nav-primary:hover { background:#fff; color:var(--honey-ink); }
.nav-primary .i { opacity:1; }
.nav-short { display:none; }

/* ——— Shared panel chrome ——— */
.yard-dialog, #bot-profile { color:var(--ink); background:linear-gradient(160deg,rgba(128,132,140,.5),rgba(78,82,90,.56)); border:1px solid var(--line); border-radius:26px; box-shadow:var(--glass-edge), 0 30px 80px -20px rgba(10,20,30,.5), 0 8px 24px rgba(10,20,30,.18); backdrop-filter:blur(28px) saturate(.5); -webkit-backdrop-filter:blur(28px) saturate(.5); text-shadow:0 1px 2px rgba(0,0,0,.18); font-family:var(--sans); }
.profile-close { flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--ink-2); cursor:pointer; transition:background .2s, color .2s, transform .2s var(--ease); }
.profile-close:hover { background:rgba(255,255,255,.1); color:var(--ink); transform:rotate(90deg); }
.profile-close:focus-visible { outline:2px solid var(--honey-2); outline-offset:2px; }
.eyebrow { margin:0 0 6px; font:600 11px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }

/* ——— Dialogs ——— */
.yard-dialog { padding:0; width:min(1180px,calc(100vw - 40px)); max-width:none; max-height:84dvh; overflow:hidden; }
.yard-dialog[open] { display:flex; flex-direction:column; animation:rise .38s var(--ease); }
.yard-dialog::backdrop { background:rgba(30,36,44,.22); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); animation:fade .3s ease; }
@keyframes rise { from { opacity:0; transform:translateY(18px) scale(.98); } }
@keyframes fade { from { opacity:0; } }
.ranking-heading { flex:none; display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding:26px 28px 0; }
.ranking-heading h2 { margin:0; font:700 28px/1.1 var(--sans); letter-spacing:-.03em; color:var(--ink); }
.ranking-heading p { margin:10px 0 0; font-size:13px; color:var(--ink-3); }

.ranking-sort { flex:none; display:inline-flex; align-self:flex-start; gap:2px; margin:20px 28px 16px; padding:4px; border-radius:13px; background:rgba(0,0,0,.28); border:1px solid var(--line); }
.ranking-sort button { height:34px; padding:0 14px; border:0; border-radius:9px; background:transparent; color:var(--ink-3); font:500 13px/1 var(--sans); cursor:pointer; transition:background .2s, color .2s; }
.ranking-sort button:hover { color:var(--ink); }
.ranking-sort button[aria-pressed="true"] { background:rgba(255,255,255,.12); color:var(--ink); box-shadow:0 1px 0 rgba(255,255,255,.1) inset, 0 2px 8px rgba(0,0,0,.3); }
.ranking-sort button:focus-visible { outline:2px solid var(--honey-2); outline-offset:1px; }

.ranking-scroll { flex:1; min-height:0; overflow:auto; margin:0 12px 12px; border-radius:16px; border:1px solid var(--line); background:rgba(0,0,0,.18); scrollbar-color:rgba(255,255,255,.2) transparent; scrollbar-width:thin; }
.ranking-scroll:focus-visible { outline:2px solid var(--honey-2); outline-offset:2px; }
.ranking-table { border-collapse:separate; border-spacing:0; width:100%; min-width:980px; font-variant-numeric:tabular-nums; }
.ranking-table th { position:sticky; top:0; z-index:1; background:rgba(90,96,108,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); color:var(--ink-3); text-align:right; font:600 10.5px/1 var(--sans); letter-spacing:.12em; padding:14px 14px; border-bottom:1px solid var(--line); white-space:nowrap; }
.ranking-table td { padding:12px 14px; font:500 14px/1.2 var(--mono); text-align:right; border-bottom:1px solid var(--line); white-space:nowrap; color:var(--ink); }
.ranking-table tbody tr:last-child td { border-bottom:0; }
.ranking-table th:nth-child(1),.ranking-table td:nth-child(1) { width:56px; text-align:left; color:var(--ink-3); }
.ranking-table th:nth-child(2),.ranking-table td:nth-child(2) { text-align:left; width:190px; }
.ranking-table th:last-child,.ranking-table td:last-child { text-align:left; width:28%; }
.ranking-table tbody tr { transition:background .15s; }
.ranking-table tbody tr:hover { background:rgba(255,255,255,.05); }
.ranking-table:not(.trades-table) tbody tr:nth-child(1) td:first-child { color:#ffd27a; box-shadow:inset 3px 0 0 #ffd27a; }
.ranking-table:not(.trades-table) tbody tr:nth-child(2) td:first-child { color:#dfe3ea; box-shadow:inset 3px 0 0 #c9ced8; }
.ranking-table:not(.trades-table) tbody tr:nth-child(3) td:first-child { color:#e7a878; box-shadow:inset 3px 0 0 #d08b5b; }
.ranking-table .rank-profit { color:var(--up); }
.rank-fly { display:flex; align-items:center; gap:12px; padding:0; border:0; background:transparent; color:var(--ink); font:600 14px/1.2 var(--sans); text-align:left; cursor:pointer; border-radius:12px; }
.rank-fly:hover > span, .rank-fly:focus-visible > span { color:var(--honey-2); }
.rank-fly:focus-visible { outline:2px solid var(--honey-2); outline-offset:4px; }
.rank-fly img { width:38px; height:38px; padding:3px; image-rendering:pixelated; border-radius:11px; background:rgba(255,255,255,.1); border:1px solid var(--line-2); object-fit:contain; transition:transform .2s var(--ease); }
.rank-fly:hover img { transform:scale(1.08) rotate(-4deg); }
.rank-role, .rank-contribution { display:block; margin-top:4px; font:400 12px/1 var(--sans); color:var(--ink-3); }
.rank-contribution { font-family:var(--mono); color:var(--up); opacity:.75; }
.rank-thought { max-width:300px; overflow:hidden; text-overflow:ellipsis; font:400 13px/1.3 var(--sans)!important; color:var(--ink-2); }

/* Trades */
.trades-table { min-width:820px; }
.trades-table th:last-child,.trades-table td:last-child { width:auto; text-align:right; }
.trades-table th:nth-child(3),.trades-table td:nth-child(3),.trades-table th:nth-child(4),.trades-table td:nth-child(4) { text-align:left; }
.trades-empty { text-align:center!important; color:var(--ink-3)!important; font:400 15px var(--sans)!important; padding:48px 10px!important; }
.trade-status { display:inline-flex; align-items:center; gap:6px; font:600 10.5px/1 var(--sans); letter-spacing:.1em; padding:6px 10px 6px 8px; border-radius:99px; }
.trade-status::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.trade-holding { color:var(--honey-2); background:rgba(255,255,255,.13); }
.trade-holding::before { animation:pulse-honey 1.8s infinite; }
@keyframes pulse-honey { 50% { opacity:.35; } }
.trade-profit { color:var(--up); background:rgba(127,227,164,.12); }
.trade-loss { color:var(--down); background:rgba(255,139,123,.12); }
.trade-cash { color:var(--ink-3); background:rgba(255,255,255,.07); }
.trade-up { color:var(--up); } .trade-down { color:var(--down); }
.trade-action,.trade-when { color:var(--ink-3)!important; font:500 12px var(--sans)!important; letter-spacing:.04em; }

/* How it works */
#how-dialog { width:min(600px,calc(100vw - 40px)); overflow:auto; }
.how-steps { list-style:none; counter-reset:step; margin:0; padding:22px 28px 28px; display:grid; gap:10px; }
.how-steps li { counter-increment:step; display:grid; grid-template-columns:44px 1fr; column-gap:16px; padding:16px 18px 16px 14px; border-radius:16px; background:rgba(255,255,255,.035); border:1px solid var(--line); font-size:14px; line-height:1.6; color:var(--ink-2); }
.how-steps li::before { content:counter(step); grid-row:span 2; width:44px; height:44px; display:grid; place-items:center; border-radius:13px; background:rgba(255,255,255,.12); color:var(--honey-2); font:700 17px/1 var(--sans); }
.how-steps li b { display:block; margin:2px 0 3px; font:600 15px/1.3 var(--sans); color:var(--ink); }

/* Next spawn */
#spawn-dialog { width:min(520px,calc(100vw - 40px)); overflow:auto; }
#spawn-dialog > :not(.ranking-heading) { margin-inline:28px; }
.spawn-card { display:flex; align-items:center; gap:18px; margin-top:22px; padding:16px; border-radius:18px; background:radial-gradient(120% 140% at 0% 0%,rgba(255,255,255,.16),rgba(255,255,255,.03) 60%); border:1px solid var(--line-2); }
.spawn-card img { width:72px; height:72px; padding:8px; image-rendering:pixelated; border-radius:18px; background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.7),rgba(255,255,255,.22) 60%,rgba(255,255,255,.12)); box-shadow:inset 0 1px 0 rgba(255,255,255,.8), inset 0 0 0 1px rgba(255,255,255,.35); object-fit:contain; animation:bob 2.6s ease-in-out infinite; }
@keyframes bob { 50% { transform:translateY(-4px) rotate(-3deg); } }
.spawn-card strong { display:block; font:700 22px/1.1 var(--sans); letter-spacing:-.02em; color:var(--ink); margin-bottom:6px; }
.spawn-card span { font-size:13px; color:var(--ink-3); }
.spawn-label { display:flex; justify-content:space-between; align-items:baseline; margin-top:24px; margin-bottom:10px; font:600 11px/1 var(--sans); letter-spacing:.14em; color:var(--ink-3); }
.spawn-label b { font:600 15px/1 var(--mono); letter-spacing:0; color:var(--ink); }
#spawn-bar { height:12px; padding:0; border-radius:99px; background:rgba(0,0,0,.35); border:1px solid var(--line); overflow:hidden; }
#spawn-fill { height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,rgba(127,227,164,.85),#c9f7d9); box-shadow:0 0 14px rgba(127,227,164,.6); transition:width .6s var(--ease); position:relative; overflow:hidden; }
#spawn-fill::after { content:''; position:absolute; inset:0; background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%); animation:shine 2.4s infinite; }
@keyframes shine { from { transform:translateX(-100%); } to { transform:translateX(100%); } }
#spawn-left { margin-top:10px; margin-bottom:0; font-size:13px; color:var(--ink-3); }
.spawn-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:22px; }
.spawn-stats > div { padding:14px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid var(--line); }
.spawn-stats span { display:block; margin-bottom:8px; font:600 10px/1.2 var(--sans); letter-spacing:.12em; color:var(--ink-3); }
.spawn-stats b { font:500 20px/1 var(--mono); color:var(--ink); }
.spawn-wallet { display:flex; align-items:center; gap:8px; margin-top:20px; margin-bottom:8px; font-size:12px; color:var(--ink-3); }
.spawn-wallet::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--honey); }
#spawn-log { list-style:none; padding:0; margin-top:18px; margin-bottom:26px!important; min-height:60px; font:400 12px/1.4 var(--mono); color:var(--ink-2); }
#spawn-log li { padding:9px 0; border-top:1px solid var(--line); white-space:pre-wrap; }

/* ——— Fly profile (floating card) ——— */
#bot-profile { position:fixed; z-index:3; left:50%; bottom:22px; transform:translateX(-50%); width:min(1080px,calc(100% - 40px)); padding:18px; display:grid; grid-template-columns:auto 1fr; grid-template-areas:"head stats" "head thought"; gap:14px 22px; animation:rise-center .4s var(--ease); }
@keyframes rise-center { from { opacity:0; transform:translate(-50%,16px); } }
#bot-profile[hidden] { display:none; }
.profile-heading { grid-area:head; display:flex; flex-direction:column; justify-content:space-between; gap:14px; min-width:250px; padding:16px 50px 16px 16px; border-radius:18px; background:radial-gradient(120% 140% at 0% 0%,rgba(255,255,255,.18),rgba(255,255,255,.03) 65%); border:1px solid var(--line-2); position:relative; }
.bot-identity { display:flex; align-items:center; gap:14px; }
#bot-avatar { flex:0 0 60px; width:60px; height:60px; padding:6px; image-rendering:pixelated; border-radius:16px; background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.7),rgba(255,255,255,.22) 60%,rgba(255,255,255,.12)); box-shadow:inset 0 1px 0 rgba(255,255,255,.8), inset 0 0 0 1px rgba(255,255,255,.35); }
#bot-name { margin:0; font:700 24px/1.1 var(--sans); letter-spacing:-.02em; color:var(--ink); white-space:nowrap; }
#bot-role { display:inline-block; margin-top:8px; padding:4px 9px; border-radius:99px; font:500 12px/1 var(--sans); color:var(--honey-2); background:rgba(255,255,255,.12); }
.profile-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sample-label { font:600 10px/1 var(--sans); letter-spacing:.14em; color:var(--ink-3); padding:5px 8px; border-radius:6px; border:1px dashed var(--line-2); }
.profile-heading .profile-close { position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:10px; }
.profile-stats { grid-area:stats; display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin:0; }
.profile-stats > div { padding:14px 14px 13px; border-radius:14px; background:rgba(255,255,255,.035); border:1px solid var(--line); min-width:0; }
.profile-stats dt { margin-bottom:9px; font:600 10px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }
.profile-stats dd { margin:0; font:500 19px/1 var(--mono); color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.profile-stats .profit dd { color:var(--up); }
#bot-contribution { display:block; margin-top:6px; font:500 11px/1 var(--mono); color:var(--up); opacity:.75; }
.profile-thought { grid-area:thought; display:flex; align-items:center; gap:14px; margin:0; padding:12px 16px; border-radius:14px; border:1px solid var(--line); background:rgba(0,0,0,.18); }
.profile-thought > span { flex:none; font:600 10px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
#bot-thought { margin:0; font:400 15px/1.45 var(--sans); color:var(--ink); }

/* ——— Toast ——— */
#toast { position:fixed; z-index:9; left:50%; top:22px; display:flex; align-items:center; gap:10px; transform:translate(-50%,-160%); padding:12px 18px 12px 14px; border-radius:99px; background:var(--glass-strong); border:1px solid var(--line-2); box-shadow:var(--shadow); color:var(--ink); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); font:500 14px/1 var(--sans); visibility:hidden; opacity:0; transition:transform .5s var(--ease), opacity .3s, visibility .5s; pointer-events:none; }
#toast::before { content:'✦'; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--honey); color:var(--honey-ink); font-size:13px; }
#toast.show { visibility:visible; opacity:1; transform:translate(-50%,0); }

/* ——— Responsive ——— */
@media (max-width:1100px) {
  .nav-long { display:none; }
  .nav-short { display:inline; }
  .brand h1 { font-size:26px; }
  .brand-mark { width:46px; height:46px; }
  #bot-profile { grid-template-columns:1fr; grid-template-areas:"head" "stats" "thought"; }
  .profile-heading { flex-direction:row; align-items:center; padding:12px 54px 12px 12px; }
  .profile-stats { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:760px) {
  #world-header { padding:12px; justify-content:center; }
  .brand { padding:8px 18px 8px 8px; border-radius:18px; gap:11px; }
  .brand-mark { width:40px; height:40px; border-radius:12px; }
  .brand h1 { font-size:22px; }
  .brand-sub { font-size:9.5px; margin-top:4px; }
  /* Menu becomes an app-style dock at the bottom. */
  .header-actions { position:fixed; left:12px; right:12px; bottom:max(12px,env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(4,1fr); gap:2px; padding:5px; border-radius:20px; background:var(--glass-strong); }
  .nav-btn { flex-direction:column; justify-content:center; gap:5px; height:54px; padding:0 4px; border-radius:15px; font-size:11px; }
  .nav-btn .i { width:19px; height:19px; }
  .nav-btn b { display:none; }
  .nav-spawn::after { left:18px; right:18px; bottom:4px; }
  #bot-profile { bottom:calc(max(12px,env(safe-area-inset-bottom)) + 76px); width:calc(100% - 24px); padding:12px; gap:10px; border-radius:20px; max-height:calc(100dvh - 190px); overflow:auto; }
  .profile-heading { gap:10px; }
  #bot-avatar { flex-basis:48px; width:48px; height:48px; }
  #bot-name { font-size:20px; }
  .sample-label { display:none; }
  .profile-stats > div { padding:11px; }
  .profile-stats dd { font-size:16px; }
  .profile-thought { flex-direction:column; align-items:flex-start; gap:6px; }
  #bot-thought { font-size:14px; }
  /* Dialogs become bottom sheets. */
  .yard-dialog, #how-dialog, #spawn-dialog { width:100%; max-height:90dvh; margin:auto 0 0; border-radius:26px 26px 0 0; border-bottom:0; }
  .yard-dialog[open] { animation:sheet .42s var(--ease); }
  @keyframes sheet { from { transform:translateY(40%); opacity:.4; } }
  .ranking-heading { padding:22px 18px 0; }
  .ranking-heading h2 { font-size:24px; }
  .ranking-sort { margin:16px 18px 12px; }
  .ranking-sort button { padding:0 11px; font-size:12px; }
  .ranking-scroll { margin:0 8px 8px; }
  .trades-table { min-width:700px; }
  .how-steps { padding:18px; }
  #spawn-dialog > :not(.ranking-heading) { margin-inline:18px; }
  .spawn-stats b { font-size:16px; }
}
@media (max-height:520px) and (min-width:761px) { #bot-profile { max-height:80dvh; overflow:auto; } }
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none!important; transition:none!important; }
}