/* KANTO: the page around the game. The game's own palette: deep night blue, the menu's warm paper, a coin gold, the CABLE
   CLUB's cyan. Nothing here moves the canvas: the bar has a fixed height, every slot a fixed width. */
:root { --ink: #f4f1ea; --ink2: #b9b3d6; --ink3: #8a83a8; --night: #0d0c16; --panel: #17152c; --panel2: #1f1c3a; --line: #2f2950; --line2: #453c74;
  --gold: #ffd66a; --gold2: #f2a93b; --ember: #e08a5f; --cyan: #58e0ff; --good: #7cff6b; --bad: #ff8a7a;
  --f-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --f-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.is-hidden { display: none !important; }
body.has-bar { padding-top: 48px; box-sizing: border-box; }
html.touch body.has-bar { padding-top: 0; }

/* ---------------- the bar ---------------- */
#kbar { position: fixed; z-index: 20; top: 0; left: 0; right: 0; height: 48px; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 0 14px;
  background: linear-gradient(180deg, #1a1733 0%, #110f22 100%); border-bottom: 1px solid #2a2547; box-shadow: 0 1px 0 rgba(255, 214, 106, .06), 0 8px 24px rgba(0, 0, 0, .35);
  font: 600 13px/1 var(--f-ui); color: var(--ink2); white-space: nowrap; }
#kbar a { color: inherit; text-decoration: none; }
#kbar svg { width: 16px; height: 16px; fill: currentColor; display: block; }
.kb-brand { display: flex; align-items: center; gap: 9px; flex: none; color: var(--ink) !important; }
.kb-logo { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #2a2547, 0 0 0 3px rgba(255, 214, 106, .35); }
#kb-mark { image-rendering: pixelated; display: block; }
.kb-name { font: 800 15px/1 var(--f-ui); letter-spacing: .08em; color: var(--gold); text-shadow: 0 1px 0 #6a2a12; }
#kb-mark:not(.is-hidden) + .kb-name { display: none; }
.kb-live { display: flex; align-items: center; gap: 6px; width: 92px; flex: none; color: var(--ink2); font-weight: 600; }
.kb-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px rgba(124, 255, 107, .14), 0 0 10px rgba(124, 255, 107, .6); flex: none; }
.kb-live b { color: var(--ink); font-variant-numeric: tabular-nums; }
.kb-pot { flex: none; width: 150px; overflow: hidden; text-overflow: ellipsis; font: 800 11px/1 var(--f-ui); letter-spacing: .12em; color: var(--ink3); }
.kb-pot b { font: 700 13px/1 var(--f-ui); letter-spacing: 0; color: var(--gold); margin-left: 6px; font-variant-numeric: tabular-nums; }
.kb-gap { flex: 1; min-width: 8px; }
.kb-bal { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 8px; border-radius: 999px; background: rgba(255, 214, 106, .08); border: 1px solid rgba(255, 214, 106, .28); color: var(--gold); flex: none; min-width: 120px; box-sizing: border-box; }
.kb-bal b { font: 800 14px/1 var(--f-ui); font-variant-numeric: tabular-nums; color: #fff3cf; }
.kb-bal em { font: 800 10px/1 var(--f-ui); font-style: normal; letter-spacing: .08em; color: var(--gold2); }
.kb-coin { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c8 0 18%, #ffd66a 40%, #c8861c 90%); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .3); flex: none; }
.ca-pill { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 4px 0 12px; border-radius: 999px; background: #0b0a16; border: 1px solid var(--line2); flex: none; width: 262px; box-sizing: border-box; }
.ca-pill.is-live { border-color: rgba(88, 224, 255, .55); box-shadow: 0 0 14px rgba(88, 224, 255, .12); }
.ca-lab { font: 800 11px/1 var(--f-ui); letter-spacing: .06em; color: var(--cyan); }
.ca-addr { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 24px; padding: 0 2px 0 4px; border: 0; background: none; color: var(--ink); font: 600 12px/1 var(--f-mono); cursor: copy; }
.ca-addr:disabled { cursor: default; color: var(--ink3); font: 600 11.5px/1 var(--f-ui); }
.ca-addr > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-copy { flex: none; font: 800 11px/1 var(--f-ui); font-style: normal; padding: 6px 9px; border-radius: 999px; background: var(--cyan); color: #04202a; }
.ca-link { flex: none; font: 800 11px/1 var(--f-ui); padding: 7px 9px; border-radius: 999px; background: #1d1a36; color: var(--ink2) !important; }
.ca-link:hover { background: #2a2650; color: #fff !important; }
.kb-x { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #1d1a36; border: 1px solid var(--line2); color: var(--ink) !important; flex: none; box-sizing: border-box; }
.kb-x:hover { background: #2a2650; }
.kb-nav { display: flex; gap: 14px; flex: none; }
.kb-nav a:hover { color: #fff; }
.kb-btn { height: 32px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--line2); background: #1d1a36; color: var(--ink); font: 700 12.5px/1 var(--f-ui); cursor: pointer; flex: none; }
.kb-btn:hover { background: #2a2650; }
#kb-wallet { background: linear-gradient(180deg, #ffd66a, #f2a93b); color: #2a1406; border-color: #c8861c; }
#kb-wallet:hover { filter: brightness(1.06); }
.kb-acct { width: 96px; overflow: hidden; text-overflow: ellipsis; }
.kb-acct.named { color: var(--gold); }
@media (max-width: 1280px) { .kb-nav { display: none; } .kb-pot { width: 116px; } }
@media (max-width: 1000px) { .kb-pot { display: none; } .ca-pill { width: 200px; } #t-ca-pump { display: none; } }
@media (max-width: 760px) { .kb-live { display: none; } .ca-pill { width: 150px; padding-left: 8px; } .ca-lab { display: none; } .kb-acct { width: 74px; } .kb-name { display: none; } }
/* phones: a slim bar standing up (touchpad.js lays out under it), a floating pill on their side */
#kbar.touchbar { height: 42px; gap: 8px; padding: 0 8px; }
#kbar.touchbar .kb-live, #kbar.touchbar .kb-pot, #kbar.touchbar .kb-nav { display: none; }
#kbar.touchbar .ca-pill { width: auto; flex: 1; min-width: 0; height: 30px; }
#kbar.touchbar .kb-bal { min-width: 0; padding-right: 8px; height: 30px; }
#kbar.touchbar .kb-bal em { display: none; }
#kbar.touchbar .kb-btn { height: 30px; padding: 0 10px; }
#kbar.touchbar .kb-acct, #kbar.touchbar .kb-x { display: none; }
#kbar.pill { left: auto; right: 8px; top: 6px; height: 38px; border-radius: 19px; border: 1px solid var(--line2); padding: 0 6px 0 10px; gap: 8px; opacity: .88; }
#kbar.pill .kb-live, #kbar.pill .kb-pot, #kbar.pill .kb-nav, #kbar.pill .kb-gap, #kbar.pill .kb-name, #kbar.pill .ca-pill, #kbar.pill .kb-acct, #kbar.pill .kb-x { display: none; }

/* ---------------- panels ---------------- */
#k-panels { position: fixed; inset: 0; z-index: 40; display: none; }
#k-panels.open { display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
html.touch #k-panels.open { align-items: flex-start; padding-top: max(56px, env(safe-area-inset-top)); }
.kp-back { position: absolute; inset: 0; background: rgba(4, 3, 10, .72); backdrop-filter: blur(2px); }
.kp { position: relative; width: min(440px, 100%); max-height: calc(100vh - 40px); overflow: auto; box-sizing: border-box; border-radius: 10px; background: var(--panel); color: var(--ink2);
  border: 2px solid #f3f0e9; box-shadow: 0 0 0 4px var(--panel), 0 0 0 6px #5a5480, 0 24px 60px rgba(0, 0, 0, .65); font: 14px/1.45 var(--f-ui); }
.kp > header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px; }
.kp h2 { margin: 0; font: 800 16px/1 var(--f-ui); letter-spacing: .12em; color: var(--gold); }
.kp-x { width: 32px; height: 32px; border-radius: 8px; border: 0; background: #241f44; color: var(--ink); font: 400 22px/1 var(--f-ui); cursor: pointer; }
.kp-body { padding: 6px 16px 16px; }
.kp-wait { padding: 26px 0; text-align: center; color: var(--ink3); }
.kw-bal { display: flex; align-items: baseline; gap: 10px; padding: 14px 14px 12px; margin: 4px 0 12px; border-radius: 10px; background: linear-gradient(180deg, #221e42, #1a1734); border: 1px solid #3a3364; }
.kw-bal span { font: 700 11px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.kw-bal b { margin-left: auto; font: 800 26px/1 var(--f-ui); color: #fff3cf; font-variant-numeric: tabular-nums; }
.kw-bal em { font: 800 12px/1 var(--f-ui); font-style: normal; color: var(--gold2); }
.kw-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 9px; background: #0f0d1d; margin-bottom: 12px; }
.kw-tabs button { flex: 1; height: 32px; border: 0; border-radius: 7px; background: none; color: var(--ink3); font: 700 13px/1 var(--f-ui); cursor: pointer; }
.kw-tabs button.on { background: #2a2552; color: var(--ink); box-shadow: inset 0 0 0 1px #453c74; }
.kw-pane { min-height: 220px; }
.kw-note { margin: 2px 0 12px; color: var(--ink2); }
.kw-note b { color: var(--gold); }
.kw-amt { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: #0b0a16; font: 600 14px/1.2 var(--f-mono); color: var(--ink2); }
.kw-amt b { color: var(--gold); }
.kf { display: block; margin: 0 0 10px; font: 700 12px/1.3 var(--f-ui); color: #c9c3e0; }
.kf input { display: block; width: 100%; box-sizing: border-box; height: 42px; margin-top: 5px; padding: 0 12px; border-radius: 8px; border: 1px solid #3a3360; background: #0b0a14; color: var(--ink); font: 500 14px/1 var(--f-ui); outline: none; }
.kf input:focus { border-color: var(--ember); }
.kf input#kw-addr, .kf input#kw-to { font: 500 12.5px/1 var(--f-mono); }
.kf-row { display: flex; gap: 6px; margin-top: 5px; }
.kf-row input { margin-top: 0; flex: 1; min-width: 0; }
.kf-row button { flex: none; height: 42px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line2); background: #241f44; color: var(--ink); font: 800 12px/1 var(--f-ui); cursor: pointer; }
.kw-calc { min-height: 18px; margin: -2px 0 10px; font: 600 12.5px/1.4 var(--f-ui); color: var(--ink3); }
.kw-rule { margin: 0 0 12px; padding: 8px 10px; border-radius: 8px; background: rgba(88, 224, 255, .07); border: 1px solid rgba(88, 224, 255, .2); color: #b8f4ff; font: 600 12.5px/1.35 var(--f-ui); }
.kp-err { margin: 0 0 10px; color: var(--bad); font-weight: 600; }
.kp-go { width: 100%; height: 46px; border: 0; border-radius: 9px; background: linear-gradient(180deg, #ffd66a, #f2a93b); color: #2a1406; font: 800 15px/1 var(--f-ui); cursor: pointer; box-shadow: 0 3px 0 #9a5a10; }
.kp-go:disabled { opacity: .55; cursor: default; }
.kp-go.ghost { background: #241f44; color: var(--ink); box-shadow: none; border: 1px solid var(--line2); }
.kp-alt { margin-top: 12px; text-align: center; color: var(--ink3); font-size: 13px; }
.kp-alt button { border: 0; background: none; color: var(--ember); font: 700 13px/1 var(--f-ui); cursor: pointer; padding: 6px 2px; }
.kw-foot { margin: 14px 0 0; font: 500 11.5px/1.4 var(--f-ui); color: var(--ink3); }
.kw-hist { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow: auto; }
.kw-hist li { display: grid; grid-template-columns: 64px 1fr auto; gap: 8px; align-items: baseline; padding: 8px 2px; border-bottom: 1px solid #262145; font-size: 13px; }
.kw-hist .h-t { color: var(--ink3); font-size: 11.5px; }
.kw-hist a { color: var(--cyan); }
.kw-hist b { font-variant-numeric: tabular-nums; }
.kw-hist b.pos { color: var(--good); } .kw-hist b.neg { color: #ffb08a; }
.kw-hist i { font-style: normal; color: var(--ink3); }
.kw-hist i.st-confirmed { color: var(--good); } .kw-hist i.st-failed { color: var(--bad); }

/* ---------------- chat, notes, the connection ---------------- */
#k-chat { position: fixed; z-index: 25; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(560px, calc(100vw - 24px)); display: none; gap: 6px; padding: 6px; box-sizing: border-box; border-radius: 11px; background: rgba(12, 10, 28, .92); border: 1px solid #3a3360; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
#k-chat.open { display: flex; }
#k-chat input { flex: 1; min-width: 0; height: 36px; box-sizing: border-box; padding: 0 10px; border-radius: 8px; border: 1px solid #3a3360; background: #0b0a14; color: var(--ink); font: 15px/1 var(--f-ui); outline: none; }
#k-chat input:focus { border-color: var(--ember); }
#k-chat button { height: 36px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--ember); color: #1b1020; font: 800 13px/1 var(--f-ui); cursor: pointer; }
html.touch #k-chat { top: 48px; bottom: auto; }
html.touch #k-chat input { font-size: 16px; }
#k-chat-btn { position: fixed; z-index: 24; right: 12px; top: 50px; width: 40px; height: 40px; padding: 10px; border: 1px solid #3a3360; border-radius: 50%; background: rgba(12, 10, 28, .82); color: var(--ink); cursor: pointer; display: none; }
#k-chat-btn.on { display: block; }
#k-chat-btn svg { display: block; width: 100%; height: 100%; fill: currentColor; }
#k-toast { position: fixed; z-index: 45; left: 50%; top: 58px; transform: translate(-50%, -8px); opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none;
  padding: 9px 16px; border-radius: 20px; background: #17152c; border: 1px solid #3a3364; color: var(--ink); font: 700 13px/1 var(--f-ui); white-space: nowrap; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
#k-toast.show { opacity: 1; transform: translate(-50%, 0); }
#k-toast.good { color: var(--good); border-color: rgba(124, 255, 107, .35); }
#k-net { position: fixed; z-index: 30; left: 50%; top: 58px; transform: translateX(-50%); display: flex; gap: 10px; align-items: baseline; padding: 9px 16px; border-radius: 20px; background: rgba(23, 21, 44, .95); border: 1px solid #5a4a20; color: var(--gold); font: 800 13px/1 var(--f-ui); }
#k-net span { color: var(--ink2); font-weight: 600; }
#disclaimer { position: fixed; left: 0; right: 0; bottom: 2px; margin: 0; text-align: center; font: 10px/1.2 var(--f-ui); color: #5a5478; pointer-events: none; }
html.touch #disclaimer { z-index: 6; font-size: 8px; line-height: 1.3; padding: 0 14px; }