/* Additions on top of base.css (the shared look): header X + CA, toasts, LCD green accent, pages. */
:root { --lcd: #c9ccd1; --lcd-d: #0b0b0c; }
.xbtn { text-decoration: none; }
.xbtn svg { width: 14px; height: 14px; }
.cachip { display: inline-flex; align-items: center; gap: .4rem; height: 34px; padding: 0 .6rem; border: 2px solid #fff; font-family: var(--f-body); font-size: .78rem; white-space: nowrap; transition: background .2s, color .2s; }
.cachip:hover { background: #fff; color: #000; }
.cachip:hover .dim { color: rgba(0,0,0,.6); }
.hdr__end { gap: .6rem; }
@media (max-width: 720px) { .ctl { display: none; } .brand span { display: none; } .cachip { padding: 0 .45rem; } }
@media (max-width: 420px) { .hdr__end .btn--sm { padding-inline: .6em; } }
.acctmenu__faces > img { display: block; }

.toasts { position: fixed; top: 76px; left: 50%; transform: translateX(-50%); z-index: 120; display: grid; gap: .5rem; width: min(560px, calc(100% - 2rem)); pointer-events: none; }
.toast { pointer-events: auto; background: #000; border: 2px solid #fff; padding: .75rem 1rem; font-size: .88rem; box-shadow: 6px 6px 0 var(--line); animation: toastIn .3s var(--ease); transition: opacity .4s, transform .4s; }
.toast--err { border-color: var(--down); color: var(--down); }
.toast--ok { border-color: var(--up); color: var(--up); }
.toast.is-out { opacity: 0; transform: translateY(-8px); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px); } }

/* boot: the art from config */
.boot__art { width: clamp(90px, 14vw, 150px); animation: diceBob 1.2s steps(6) infinite; image-rendering: pixelated; }
.end__art { width: clamp(140px, 22vw, 260px); animation: spinDice 6s steps(24) infinite; image-rendering: pixelated; }
.about__art { width: 100%; max-width: 380px; animation: float 4s ease-in-out infinite; image-rendering: pixelated; }
@media (max-width: 900px) { .about__art { max-width: 200px; } }

/* the screen silver */
.lcdtag { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--f-silk); font-size: .8rem; color: var(--lcd); }
.lcdtag::before { content: ""; width: 8px; height: 8px; background: var(--lcd); box-shadow: 0 0 10px var(--lcd); animation: blink 1.2s steps(2) infinite; }
.keys kbd.kbd--a { border-radius: 50%; }

/* inner pages */
.page { padding: clamp(2rem, 5vw, 3.5rem) 0 2rem; }
.page__head { margin-bottom: 2rem; }
.page__head h1 { font-family: var(--f-px); font-weight: 400; font-size: clamp(1.1rem, 3vw, 1.9rem); line-height: 1.4; margin: .4rem 0 .9rem; }
.page__head p { max-width: 70ch; color: var(--dim); margin: 0; }
.filters { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.filters .input { max-width: 320px; }
.platpick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
@media (max-width: 640px) { .platpick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.platpick button { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; padding: .8rem; border: 2px solid var(--line); text-align: left; font-family: var(--f-silk); font-size: .9rem; transition: border-color .15s, background .15s, color .15s; }
.platpick button:hover { border-color: var(--fg); }
.platpick button[aria-pressed=true] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.step-h { font-family: var(--f-silk); font-size: 1rem; margin: 0 0 .8rem; }
.devbuy { display: flex; gap: .4rem; flex-wrap: wrap; }
.result__meta { font-size: .75rem; color: var(--dim); }
.result[aria-pressed=true] .result__meta { color: rgba(0,0,0,.6); }
.codebox { font-family: var(--f-px); font-size: clamp(.8rem, 2.2vw, 1.1rem); letter-spacing: .08em; border: 2px dashed var(--fg); padding: .9rem 1rem; text-align: center; word-break: break-all; }
.odds { font-family: var(--f-px); font-size: clamp(1.4rem, 4vw, 2.4rem); }
.feedrow { display: flex; gap: .8rem; align-items: center; padding: .55rem 0; border-bottom: 1px dashed var(--faint); font-size: .86rem; }
.feedrow:last-child { border-bottom: 0; }
.chartbox { border: 2px solid var(--line); background: #000; height: 260px; position: relative; }
.chartbox svg { width: 100%; height: 100%; display: block; }
.ok { color: var(--up); } .bad { color: var(--down); }
.mt { margin-top: 1.2rem; } .mt2 { margin-top: 2rem; }
.tablewrap { overflow-x: auto; border: 2px solid var(--line); }
.tablewrap .table th, .tablewrap .table td { white-space: nowrap; }
.pill { display: inline-block; font-family: var(--f-silk); font-size: .74rem; padding: .05rem .4rem; border: 1px solid var(--line); }
.pill--live { border-color: var(--up); color: var(--up); }
.lcdframe { background: #0b0b0b; border: 2px solid var(--line); padding: 1rem; display: grid; place-items: center; }
.lcdframe canvas { width: min(100%, 480px); aspect-ratio: 160 / 144; image-rendering: pixelated; border: 6px solid #1b1b1b; box-shadow: inset 0 0 0 2px #000; }
.big-ca { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; font-size: .95rem; border: 2px solid var(--fg); padding: .8rem 1rem; word-break: break-all; }
/* when the 3D runs, the big name is drawn behind the console instead */
body.gl-type .intro__type { display: none; }
/* while the camera is inside the console, the header gets its solid bar back so X / CA stay readable */
body.is-zoom .hdr--home { background: rgba(0,0,0,.88); border-color: var(--line); backdrop-filter: blur(8px); mix-blend-mode: normal; }

/* hidden always wins over a display rule */
[hidden] { display: none !important; }

/* the two proofs that need a form open in place */
details.proof > summary { list-style: none; }
details.proof > summary::-webkit-details-marker { display: none; }
details.proof[open] > summary { background: var(--fg); color: var(--bg); }
details.proof > .stack { padding: .9rem; border: 2px solid var(--line); border-top: 0; }

.hdr__end { position: relative; }
.walletpop { position: absolute; right: 0; top: calc(100% + 10px); width: 260px; display: grid; gap: .5rem; z-index: 70; padding: .9rem; word-break: break-all; }

/* a full header (accounts + wallet) stays on one line */
@media (max-width: 1500px) { .acctmenu__name { display: none; } .hdr__in { gap: 1.1rem; } .nav { gap: .95rem; font-size: .86rem; } }
@media (max-width: 1180px) { .ctl { display: none; } }

/* phones: the page never scrolls sideways */
.stack > *, .cols > *, .launch > *, .claimgrid > *, .docs > *, .anl > * { min-width: 0; }
.mnav { overflow-x: auto; scrollbar-width: none; }
.mnav::-webkit-scrollbar { display: none; }
.mnav a { flex: 0 0 auto; padding: .7rem .95rem; }
@media (max-width: 560px) { .platpick button { font-size: .8rem; padding: .65rem; } .coinhead img { width: 80px; height: 80px; } .stats .stat b { font-size: .7rem; } }
.continue { white-space: normal; text-align: left; }
@media (max-width: 900px) { .claimgrid #proofs { order: -1; } }