/* ------------------------------------------------------------------ tokens (Atlantis) */
:root {
    --bg0: #020c15; --bg1: #03263a; --bg2: #0a4d66;
    --pri: #7fe6ff; --pri-rgb: 127, 230, 255;
    --sec: #3fb6d8;
    --acc: #ffb35c; --acc-rgb: 255, 179, 92;
    --warn: #ff7d4f; --ok: #7dffd2;
    --text: #e2f8ff; --muted: rgba(190, 230, 245, .6);
    --panel: rgba(5, 34, 52, .46); --panel2: rgba(14, 70, 96, .30);
    --edge: rgba(127, 230, 255, .62); --edge-soft: rgba(127, 230, 255, .17);
    --head: 'Rajdhani', 'Segoe UI', sans-serif;
    --mono: 'Share Tech Mono', ui-monospace, monospace;
    --cut: 14px;
    color-scheme: dark;
}

/* accent color changes with the chain */
:root[data-chain="LitecoinTest"] { --acc: #7dffd2; --acc-rgb: 125, 255, 210; }
:root[data-chain="Kotia"] { --acc: #ff7de9; --acc-rgb: 255, 125, 233; }

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: clamp(12px, .45vw + 8px, 16px); }

body {
    height: 100dvh;
    margin: 0;
    overflow: hidden;
    background: radial-gradient(ellipse 80% 70% at 50% 42%, var(--bg2) 0%, var(--bg1) 38%, var(--bg0) 78%);
    color: var(--text);
    font-family: var(--mono);
    -webkit-font-smoothing: antialiased;
    user-select: none;
}

/* scanlines + vignette */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, .045) 0 1px, transparent 1px 3px),
        radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55) 100%);
}

div { scrollbar-width: thin; scrollbar-color: rgba(var(--pri-rgb), .35) transparent; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: rgba(var(--pri-rgb), .35); }

h1, h2, h3 { font-family: var(--head); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin: 0; }

button { font: inherit; color: inherit; }

input {
    width: 100%;
    padding: .6em .8em;
    color: var(--text);
    font-family: var(--mono);
    font-size: .9rem;
    background: rgba(0, 0, 0, .3);
    border: 1px solid var(--edge-soft);
    border-left: 2px solid rgba(var(--pri-rgb), .5);
    transition: border-color .2s, box-shadow .2s;
    user-select: text;
}
input::placeholder { color: var(--muted); }
input:focus { outline: none; border-color: var(--edge); box-shadow: 0 0 10px rgba(var(--pri-rgb), .25); }
input[type='number'] { appearance: textfield; -moz-appearance: textfield; }

/* ------------------------------------------------------------------ buttons */
.BTNmenu, .BTNgame {
    display: block;
    border: 0;
    cursor: pointer;
    text-align: center;
    font-family: var(--head);
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: .65em 1.2em;
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
    transition: background .2s, color .2s, box-shadow .2s;
}

.BTNmenu {
    color: var(--pri);
    background: rgba(var(--pri-rgb), .08);
}
.BTNmenu:hover { background: rgba(var(--pri-rgb), .2); color: var(--text); }

.BTNgame {
    color: var(--bg0);
    background: var(--pri);
    box-shadow: 0 0 12px rgba(var(--pri-rgb), .45);
}
.BTNgame:hover { background: var(--acc); box-shadow: 0 0 16px rgba(var(--acc-rgb), .6); }

/* ------------------------------------------------------------------ tabs */
.tabs { display: flex; gap: 3px; flex: none; }

.tabs .tab {
    flex: 1;
    border: 0;
    cursor: pointer;
    padding: .55em .4em;
    font-family: var(--head);
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    background: rgba(var(--pri-rgb), .05);
    clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
    transition: .2s;
}
.tabs .tab:hover { color: var(--text); }
.tabs .tab.tabActive { color: var(--bg0); background: var(--pri); box-shadow: 0 0 12px var(--pri); }

/* ------------------------------------------------------------------ section header */
.sh {
    display: flex;
    align-items: center;
    gap: .6em;
    flex: none;
    font-family: var(--head);
    font-weight: 600;
    letter-spacing: .2em;
    font-size: .85rem;
    text-transform: uppercase;
    color: var(--pri);
    padding-bottom: .45em;
    border-bottom: 1px solid var(--edge-soft);
    position: relative;
}
.sh::before { content: ''; width: .55em; height: .55em; background: var(--acc); transform: rotate(45deg); box-shadow: 0 0 8px var(--acc); flex: none; }
.sh::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 28%; height: 1px; background: var(--pri); box-shadow: 0 0 6px var(--pri); }
.code { margin-left: auto; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; color: var(--muted); }

/* ------------------------------------------------------------------ status */
.status {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    font-size: .72rem;
    letter-spacing: .1em;
    color: var(--warn);
    white-space: nowrap;
}
.status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: blink 1.2s infinite; }
.status.ok { color: var(--ok); }
.status.ok::before { animation: none; }

.hint { color: var(--muted); font-size: .8rem; letter-spacing: .08em; padding: 1em .2em; }

@keyframes blink { 50% { opacity: .25; } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition: none !important; }
}