/* Shared visual system. Layout IDs and data-nav routes remain stable. */
:root {
  color-scheme: dark;
  --bg-deep:#0c1017; --bg-stone:#111720; --bg-panel:#171e2a; --bg-card:#1b2330;
  --border-stone:#303b4c; --text:#eeeef2; --text-dim:#a6afbf;
  --gold:#e5c581; --gold-dark:#b29458; --pi:#7557b6; --pi-light:#b4a0de;
  --font-body:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-pixel:var(--font-body);
}
html,body {font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;}
body {background:radial-gradient(ellipse at 80% 0,#29243955,transparent 55%),var(--bg-deep);}
button,input,select,textarea {font:inherit;}
button,a {-webkit-tap-highlight-color:transparent;}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible {outline:2px solid var(--gold);outline-offset:4px;}
#app {max-width:1080px;}
.screen {padding-bottom:100px;}
#screen-title,#screen-dungeon {padding-bottom:0;}
.game-icon {display:inline-block;width:1.15em;height:1.15em;vertical-align:-.18em;flex-shrink:0;}
.face .game-icon {width:65%;height:65%;color:var(--gold);}
.btn {border:1px solid var(--border-stone);border-radius:9px;min-height:44px;font-size:13px;font-weight:600;letter-spacing:.01em;text-transform:none;padding:11px 17px;transition:background .15s,border-color .15s,transform .1s;box-shadow:0 2px 3px #0002;}
.btn:hover:not(:disabled) {border-color:#677385;filter:brightness(1.08);}
.btn:active:not(:disabled) {transform:translateY(1px);}
.btn-gold {background:linear-gradient(120deg,#edd299,#c6a05c);border-color:#dfc181;color:#211c12;}
.btn-pi {background:#695096;border-color:#9577c6;}
.btn-blood {background:#7d303f;color:#fff;border-color:#b65367;}
.btn-big {font-size:15px;padding:15px 24px;min-height:54px;}
.btn-small {font-size:12px;padding:9px 12px;}
.btn .game-icon {margin-right:5px;}
.topbar {padding:16px 24px;background:#101720f5;border-bottom:1px solid #303b4c;backdrop-filter:blur(14px);gap:12px;}
.avatar-btn {width:44px;height:44px;border:1px solid #536076;background:#202b39;}
.hud-balances {gap:12px;}
.bal-chip {background:#1b2430;border:1px solid #2e3b4d;padding:6px 12px;font-size:14px;border-radius:8px;}
.sub-title {font-size:18px;font-weight:650;color:#e8e8ed;letter-spacing:-.02em;}
.rupee-chip {font-size:14px;}
.menu-brand {font-family:Georgia,serif;color:#e5c581;letter-spacing:.18em;font-size:17px;margin-right:auto;}
.keep-intro {display:flex;justify-content:space-between;gap:20px;align-items:end;padding:30px 28px 22px;}
.eyebrow {font-size:10px;text-transform:uppercase;letter-spacing:.23em;color:var(--gold);font-weight:650;margin-bottom:8px;}
.keep-intro h1 {font-family:Georgia,serif;font-size:36px;font-weight:400;line-height:1.2;letter-spacing:-.02em;}
.keep-intro p {color:var(--text-dim);font-size:14px;margin-top:7px;}
.keep-stats {display:flex;gap:24px;text-align:right;white-space:nowrap;}
.keep-stats strong {display:block;font-size:23px;font-weight:500;color:#e7d5ae;}
.keep-stats span {font-size:11px;color:var(--text-dim);}
.keep-feature {margin:0 28px 24px;min-height:290px;position:relative;padding:35px;border:1px solid #444350;border-radius:16px;overflow:hidden;background:linear-gradient(90deg,#141a24 4%,#141a24e8 28%,#141a2410 90%),url('../assets/img/keep-landscape.svg') center right/cover;display:flex;align-items:center;}
.feature-copy {position:relative;max-width:390px;}
.feature-copy h2 {font:400 38px/1.1 Georgia,serif;color:#f2e8d5;margin-bottom:14px;}
.feature-copy p {color:#b8bfcb;font-size:14px;max-width:315px;margin-bottom:22px;}
.feature-actions {display:flex;flex-wrap:wrap;gap:10px;}
.feature-actions .btn {min-width:132px;}
.section-label {padding:0 28px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#aab4c3;}
.section-label span {text-transform:none;letter-spacing:0;font-size:12px;color:#78869c;}
.menu-grid {grid-template-columns:repeat(3,minmax(0,1fr));padding:16px 28px;gap:12px;}
.menu-card {position:relative;display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto 1fr;align-items:start;text-align:left;gap:4px 15px;padding:20px;min-height:116px;background:linear-gradient(130deg,#1b2431,#151d28);border:1px solid #303b4b;border-radius:12px;transition:transform .16s,border-color .16s,background .16s;}
.menu-card:hover {transform:translateY(-2px);background:#202b39;border-color:#6a6557;}
.menu-card:active {transform:translateY(0);}
.menu-emoji {grid-row:1/3;display:grid;place-items:center;width:42px;height:42px;font-size:23px;color:var(--gold);border:1px solid #484635;border-radius:10px;background:#bfa66c0b;}
.menu-emoji .game-icon {width:24px;height:24px;}
.menu-title {font-size:15px;color:#eeedf1;line-height:1.3;font-weight:600;}
.menu-sub {font-size:12px;text-align:left;line-height:1.6;color:#9eabbc;margin-top:3px;}
.menu-card-invite {grid-column:auto;flex-direction:initial;gap:4px 15px;}
.menu-card-invite .menu-emoji {font-size:23px;}
.menu-card-tg {border-color:#303b4b;}
.menu-card-tg .menu-emoji {height:42px;}
.menu-card-tg svg {width:23px;height:23px;fill:#a9bfd0;}
.menu-footer {font-size:12px;line-height:1.8;padding:20px 28px;border-top:1px solid #252f3e;margin:12px 28px 0;}
.menu-footer .docs-link {font-size:12px;}
.sub-content {padding:24px 28px;}
.sub-content>.menu-grid {padding:0;}
.item-card {padding:16px;border:1px solid #313d4e;border-radius:11px;background:#171f2a;gap:14px;}
.item-card .ic-name {font-size:14px;font-weight:650;line-height:1.5;}
.item-card .ic-desc {font-size:13px;line-height:1.65;}
.item-card .tap-hint {font-size:12px;}
.item-card .ic-actions {gap:8px;}
.hero-card.selected {border-color:#c9ad70;box-shadow:inset 3px 0 #c9ad70;}
.face {background:#0e151ecc;border-radius:8px;}
.face img {object-fit:contain;}
.col-card {border-width:1px;background:#17202c;padding:14px 8px;}
.col-head {font-size:14px;letter-spacing:.02em;}
.panel {border-width:1px;border-radius:12px;background:#171f2a;}
.panel h3,.section-title {font-size:16px;line-height:1.5;}
input:not([type=checkbox]):not([type=range]),select,textarea {border:1px solid #3a485d;border-radius:8px;background:#0f1620;color:#f0eff3;padding:11px 12px;min-height:44px;max-width:100%;font-size:16px;}
.small {font-size:13px;line-height:1.6;}
.modal-backdrop {background:#060a12b8;backdrop-filter:blur(8px);}
.modal {width:min(560px,100%);border:1px solid #596071;border-radius:16px;background:linear-gradient(145deg,#202937,#151d28);padding:25px;box-shadow:0 30px 100px #0008;font-size:14px;line-height:1.65;}
.modal h3 {font:400 25px/1.3 Georgia,serif;color:#ebd6a8;margin-bottom:18px;}
.modal-actions {gap:10px;margin-top:23px;}
.modal-actions .btn {min-height:46px;}
.toast {font-size:14px;line-height:1.55;border:1px solid #7c7155;background:#202936;box-shadow:0 8px 30px #0006;}
.toast-stack {bottom:calc(90px + env(safe-area-inset-bottom));}
.game-nav {position:fixed;bottom:16px;left:50%;transform:translateX(-50%);width:min(620px,calc(100% - 32px));display:flex;padding:7px;gap:4px;background:#17212ef5;border:1px solid #3c485c;border-radius:14px;box-shadow:0 12px 45px #0008;backdrop-filter:blur(16px);z-index:20;}
.game-nav button {flex:1;min-width:0;min-height:52px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;background:transparent;border:0;border-radius:9px;color:#9aa8bc;font-size:10px;cursor:pointer;}
.game-nav .game-icon {width:19px;height:19px;}
.game-nav button[aria-current=page] {color:var(--gold);background:#e5c58110;}
.game-nav button:hover {background:#ffffff09;color:#f1deb8;}
body.show-tg .game-nav,body.in-dungeon .game-nav {display:none;}
#screen-title {background:linear-gradient(90deg,#0d131de8,#131925aa),url('../assets/img/keep-landscape.svg') center/cover;}
.title-wrap {max-width:640px;padding:60px 24px;}
.title-torch {display:none;}
.pixel-logo {width:82px;height:82px;filter:none;image-rendering:auto;margin-bottom:26px;}
.game-logo {line-height:1.1;margin-bottom:24px;}
.logo-line1 {font:400 clamp(34px,8vw,62px)/1.1 Georgia,serif;letter-spacing:.16em;color:#edd8ad;text-shadow:none;}
.logo-line2 {font:500 12px/1.8 var(--font-body);letter-spacing:.4em;text-transform:uppercase;color:#aeb7c5;text-shadow:none;margin-top:13px;}
.tagline {font-size:16px;line-height:1.7;}
.tagline-sub {font-size:13px;color:#9ba7b8;}
.title-buttons {gap:12px;}
.title-status {font-size:13px;}
.version-tag {font-size:11px;opacity:1;color:#8c97a8;}
.g-line1 {font-size:15px;}.g-line2 {font-size:12px;}
.crawl-wrap {max-width:900px;width:100%;margin:auto;background:#0b1119;}
.crawl-hud {gap:9px;left:12px;right:12px;top:calc(12px + env(safe-area-inset-top));border:1px solid #3c495a;border-radius:10px;padding:10px 12px;background:#0c1422e8;box-shadow:0 4px 20px #0005;}
.crawl-hpbar {height:22px;border:1px solid #507064;background:#142720;border-radius:5px;box-shadow:none;}
.crawl-hpfill {background:linear-gradient(90deg,#34715a,#6ea889);transition:width .16s;}
.crawl-hpbar span {font:600 11px/20px var(--font-body);}
.crawl-floor {font-size:12px;}
.crawl-side {top:90px;right:14px;gap:9px;}
.side-btn {width:46px;height:46px;background:#172332ed;border:1px solid #49566b;border-radius:10px;color:#dcc898;font-size:21px;box-shadow:0 4px 14px #0003;image-rendering:auto;}
.side-btn:hover {border-color:var(--gold);}
.crawl-log {font-size:12px;line-height:1.5;max-width:min(430px,calc(100% - 32px));padding:9px 12px;border-left:2px solid #7f775f;background:linear-gradient(90deg,#0e1724df,#0e172400);}
.dpad {background:none;filter:none;border-radius:50%;border:1px solid #58617480;background-color:#111c2bbc;padding:4px;gap:2px;opacity:1;}
.dpad-btn {width:48px;height:48px;border-radius:8px;color:#ddcfaf;background:#263345bb;border:1px solid #53617970;font-size:15px;}
.dpad-btn.pressed {background:#b59d66;color:#0e1722;box-shadow:0 0 22px #e0c68330;}
.control-hint {position:absolute;bottom:17px;left:17px;font-size:10px;color:#b9c1cd;pointer-events:none;}
.battle-bar {gap:8px;}.battle-bar .btn {font-size:12px;min-height:48px;}
.crawl-wrap.in-battle .control-hint {display:none;}
@media(min-width:800px){.crawl-wrap {border-left:1px solid #303b4b;border-right:1px solid #303b4b;}.dpad {left:auto;right:18px;transform:none!important;}.crawl-log {bottom:34px;}.control-hint {bottom:12px;}}
@media(max-width:700px){
 .menu-brand {font-size:13px;letter-spacing:.12em;}.topbar {padding:12px 16px;gap:8px;}
 .bal-chip {padding:5px 8px;font-size:12px;}.hud-balances {gap:6px;}
 .keep-intro {padding:23px 18px 18px;}.keep-intro h1 {font-size:29px;}.keep-stats {gap:13px;}.keep-stats strong {font-size:20px;}
 .keep-feature {margin:0 16px 23px;padding:25px 22px;min-height:270px;background-position:center,right center;}
 .feature-copy h2 {font-size:33px;}.feature-copy p {max-width:255px;font-size:13px;}
 .section-label {padding:0 18px;}.section-label span {display:none;}
 .menu-grid {padding:14px 16px;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
 .menu-card {grid-template-columns:1fr;grid-template-rows:auto auto 1fr;gap:10px;padding:16px;min-height:152px;}
 .menu-emoji {grid-row:auto;width:37px;height:37px;}.menu-title {font-size:14px;}.menu-sub {font-size:11px;margin-top:-4px;}
 .menu-card-tg .menu-emoji {height:37px;}.menu-footer {padding:16px 0;margin:8px 18px 0;}
 .sub-content {padding:18px 16px;}.sub-title {font-size:16px;}.item-card {padding:13px;gap:10px;}
 .game-nav {bottom:calc(10px + env(safe-area-inset-bottom));width:calc(100% - 24px);gap:0;padding:5px;}.game-nav button {font-size:9px;}
 .modal-backdrop {padding:12px;}.modal {padding:20px;max-height:88dvh;}
 .crawl-log {bottom:183px;left:12px;max-height:85px;overflow:hidden;font-size:11px;}.control-hint {display:none;}
}
@media(max-width:390px){.menu-brand {display:none;}.keep-stats {display:none;}.keep-intro h1 {font-size:30px;}.feature-actions {gap:8px;}.feature-actions .btn {min-width:0;padding:11px 13px;font-size:12px;}.item-card .ic-actions .btn {padding:9px 8px;font-size:11px;}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after {animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}.menu-card:hover {transform:none;}}

/* Keep notices clear of the right-hand dungeon tools. */
body.in-dungeon .toast-stack {left:14px;right:82px;top:76px;width:auto;max-width:420px;transform:none;}
body.in-dungeon .toast {font-size:12px;padding:9px 12px;}
.dpad-btn .game-icon {width:21px;height:21px;}