/* Tiles hub (tiles.html): the Mosaic poster language (terminal.css tokens), dark by default, html:not([data-theme="dark"]) is
   warm paper. Loaded after terminal.css. tiles.js ids/classes untouched. */
html.gx{--on-ink:var(--bg);--glow-lo:rgba(95,109,0,.2);--glow-hi:rgba(95,109,0,.9)}
html.gx[data-theme="dark"]{--on-ink:var(--text);--glow-lo:rgba(216,245,82,.15);--glow-hi:rgba(216,245,82,.9)}
html.gx,html.gx body{height:auto;min-height:100%}
body.gx-body{overflow-x:hidden;overflow-y:auto}
.app.gx.tiles{height:auto;grid-template-columns:minmax(0,1fr) 460px;grid-template-rows:40px auto minmax(0,1fr) 24px;grid-template-areas:none;align-content:start}
.app.gx>.top,.app.gx>.hero,.app.gx>.foot{grid-area:auto;grid-column:1 / -1}
.app.gx>.top{grid-row:1;height:40px;overflow:hidden}.app.gx>.hero{grid-row:2}.app.gx>.foot{grid-row:4;height:24px}
.app.gx>.panel{grid-area:auto;grid-row:3;min-height:0}
.app.gx .ph>span:first-child{white-space:nowrap;flex:none}
.app.gx .nav{min-width:0}
.app.gx .nav a{white-space:nowrap}
.app.gx [hidden]{display:none!important}
.app.gx .foot .chips{margin-left:0}
.app.gx .hero{padding:26px 4px 14px;gap:16px 40px;align-items:center}
.app.gx .hero-brand{align-items:flex-start;gap:16px}
.app.gx .hero-brand .mosmark.lg{margin-top:6px}
.hero-kicker{display:block;font-style:normal;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.app.gx .hero-brand b{font-size:40px;white-space:normal}
.app.gx .hero-brand small{margin-top:6px;font-size:12px;white-space:normal;line-height:1.45;max-width:52ch}
.app.gx .hn b.disp{font-size:34px}
.hn-live::before{background:var(--acid);outline:1px solid var(--ink-line)}.hn-soon::before{background:var(--faint)}

/* ---------- tile list ---------- */
.t-cols,.t-row{display:grid;grid-template-columns:28px 120px minmax(0,1fr) 72px;gap:10px;align-items:center;padding:0 12px;white-space:nowrap}
.t-cols{height:24px;font-family:var(--mono);font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--border);flex:none}
.t-row{height:34px;font-size:11.5px;border-bottom:1px solid var(--hair);color:var(--text)}
.t-row .sym{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-weight:700;font-size:12.5px;overflow:hidden;text-overflow:ellipsis}
.t-row .t-blurb{color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.t-row .r{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em}
.t-row-live:hover{background:var(--panel2)}
.t-row-live .sym{color:var(--acid-t)}
.t-sw{display:inline-block;width:7px;height:7px;rotate:45deg;flex:none;background:var(--ink);border:1px solid var(--ink-line)}
.t-sw-violet{background:var(--violet);border-color:var(--violet)}.t-sw-peach{background:var(--peach);border-color:var(--peach)}.t-sw-acid{background:var(--acid);border-color:var(--acid)}
.kv.t-how{grid-template-columns:1fr;padding:0 12px 10px}
.kv.t-how div{padding:7px 0}
.kv.t-how span{color:var(--text);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.kv.t-how b{white-space:normal;font-weight:400;font-size:11.5px;line-height:1.5;color:var(--muted)}

/* ---------- mark stage (pointer tilt driven by tiles.js) ---------- */
.ts{background:var(--panel);justify-content:flex-start}
.t-stage{position:relative;aspect-ratio:1;width:min(360px,100%);margin:28px auto;flex:none;perspective:1400px}
.t-mark{position:absolute;inset:16%;display:grid;grid-template-columns:1fr 1fr;gap:4%;transform:rotate(45deg);transform-style:preserve-3d;transition:transform .18s ease-out;will-change:transform}
.t-tile{position:relative;display:grid;place-items:center;padding:0;color:var(--text);text-decoration:none;border:2px solid var(--line);border-radius:2px;transform-style:preserve-3d;transition:transform .22s cubic-bezier(.2,.8,.2,1),filter .22s;overflow:hidden}
.t-tile-ink{background:var(--ink);color:var(--on-ink)}.t-tile-violet{background:var(--violet);color:#fff}
.t-tile-peach{background:var(--peach);color:var(--on-acid)}.t-tile-acid{background:var(--acid);color:var(--on-acid)}
.t-tile{box-shadow:var(--hard)}
.t-tile-face{display:flex;flex-direction:column;align-items:center;gap:6px;transform:rotate(-45deg);text-align:center}
.t-tile-label,.t-tile-status{display:block}
.t-tile-label{font-family:var(--display);font-weight:400;font-size:clamp(22px,2.6vw,34px);letter-spacing:.02em;line-height:1;text-transform:uppercase}
.t-tile-status{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.16em;opacity:.7}
.t-live{cursor:pointer;outline:2px solid var(--glow-hi);outline-offset:0;animation:t-pulse 2.6s ease-in-out infinite}
.t-live .t-tile-status{color:var(--acid);opacity:1}
@keyframes t-pulse{0%,100%{outline-color:var(--glow-lo)}50%{outline-color:var(--glow-hi)}}
.t-tile:not(.t-live){filter:saturate(.55);cursor:default}
.t-tile:hover{transform:translateZ(40px) scale(1.04);filter:none;z-index:2}
.t-live:hover{transform:translateZ(70px) scale(1.07)}
.t-shadow{display:none}
@media(prefers-reduced-motion:reduce){.t-live{animation:none}.t-mark,.t-tile{transition:none}}

/* ---------- embed mode (embed.js sets html.embed): just the app body on a transparent background ---------- */
html.embed,html.embed body{background:transparent;height:auto;min-height:0}
html.embed body{overflow:hidden}
html.embed .app.gx.tiles{height:auto;min-height:0;background:transparent;padding:8px 8px 0;gap:18px;grid-template-rows:none;grid-auto-rows:auto}
html.embed .app.gx>*{grid-row:auto}
html.embed .app.gx>.foot{height:0}
html.embed .app.gx>.top,html.embed .app.gx>.foot,html.embed .wallets,html.embed .theme,html.embed .conn{display:none!important}
html.embed .app.gx .hero{padding:8px 4px 10px}

/* ---------- responsive ---------- */
@media(max-width:1180px){.app.gx.tiles{grid-template-columns:minmax(0,1fr) 380px}.t-stage{width:min(300px,100%)}.app.gx .hero-brand b{font-size:32px}.app.gx .hn b.disp{font-size:26px}}
@media(max-width:860px){
  .app.gx.tiles{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-rows:auto}
  .app.gx>.top,.app.gx>.hero,.app.gx>.panel,.app.gx>.foot{grid-row:auto}
  .app.gx>.top{height:auto;overflow:visible}
  .app.gx .hero{padding:16px 12px 12px;gap:14px}
  .app.gx .hero-brand b{font-size:32px}
  .app.gx .hero-brand small{font-size:12px}
  .hero-kicker{font-size:11px}
  .app.gx .hn b.disp{font-size:26px}
  .app.gx .ph.sub{margin-top:0}
  .t-stage{margin:16px auto}
  .hero-nums{grid-template-columns:1fr 1fr}
  .t-cols,.t-row{grid-template-columns:24px 90px minmax(0,1fr) 56px;gap:8px}
  .t-row{height:44px}
  .t-row .t-blurb,.t-row .r,.t-cols,.kv.t-how b{font-size:12px}
  .t-stage{width:min(260px,80vw)}
  .app.gx>.foot{height:auto}
  html.embed .app.gx.tiles{padding:6px 6px 0;gap:14px}
}

/* ---------- embed=mark (embed.js sets html.embed-mark): only the 3D mark, filling the frame ---------- */
html.embed-mark .app.gx.tiles{display:block;padding:0;gap:0;min-height:0}
html.embed-mark .app.gx>.hero,html.embed-mark .app.gx>.tl,html.embed-mark .ts>.ph{display:none!important}
html.embed-mark .ts{border:0;box-shadow:none;background:transparent;overflow:visible;display:block;min-height:0}
html.embed-mark .t-stage{width:min(100%,560px);margin:0 auto;aspect-ratio:1}
html.embed-mark .t-mark{inset:18%}
html.embed-mark .t-live{cursor:pointer}