/* uTropian UI: ComfyUI backdrops and panel plate, chrome Bahnschrift bold italic lettering, warm glow on the selection. */
:root { --font: Bahnschrift, "Segoe UI", system-ui, sans-serif; --ink: #d6e8ff; --dim: #8aa0c4; --warm: #ffb050; }
html, body { margin: 0; height: 100%; background: #04050a; color: var(--ink); font-family: var(--font); overflow: hidden; user-select: none; }
.screen { position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 3vh; text-align: center; }
.screen.on { display: flex; }
.backdrop { background: #000 center / cover no-repeat; }
.backdrop::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, #0000 30%, #000c 100%); pointer-events: none; }
.backdrop > * { position: relative; }
.dim { background: #000b; z-index: 5; }
.hidden { display: none !important; }

/* chrome lettering */
.logo, .chrome { font-style: italic; font-weight: 700; letter-spacing: 0.06em;
  background: linear-gradient(#fff 0%, #b8d4f0 44%, #2c4466 52%, #9cc0e8 70%, #e8f4ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px #39f8) drop-shadow(0 4px 0 #0a1424); }
.logo { font-size: 9vh; }
.logo.big { font-size: 17vh; }
.logo.small { font-size: 46px; }
.chrome { font-size: 8vh; }
.chrome.warm { background-image: linear-gradient(#fff4e0 0%, #ffb060 44%, #b02a10 54%, #ffd090 100%); filter: drop-shadow(0 0 18px #f508) drop-shadow(0 4px 0 #200a04); }
.tagline { font-style: italic; font-size: 3.2vh; color: #bcd6f4; letter-spacing: 0.3em; text-transform: uppercase; text-shadow: 0 2px 8px #000; margin-top: -3vh; }
.credits { position: absolute; bottom: 2vh; font-size: 1.8vh; color: #9ab; text-shadow: 0 1px 4px #000; }
.hint { color: var(--dim); font-size: 2vh; }

/* panel plate: ComfyUI frame as a 9-slice, bevel fallback underneath */
.plate { box-sizing: border-box; border: 40px solid #2a3a58; border-image: url(art/ui/plate.png) 110 fill / 40px stretch; background-clip: padding-box;
  background: linear-gradient(#0c1424e8, #060a14f0); box-shadow: 0 10px 60px #000c; }
.menu { display: flex; flex-direction: column; align-items: stretch; gap: 1.6vh; min-width: 34vw; padding: 2.5vh 3vw; }
.menu.wide { min-width: 52vw; }
.menu-title { font-style: italic; font-weight: 700; font-size: 3.6vh; letter-spacing: 0.2em; text-transform: uppercase; color: #9fd0ff; text-shadow: 0 0 12px #39f8; }
.menu-sub { font-size: 2.8vh; color: #bfe4ff; }

button { font-family: var(--font); font-style: italic; font-weight: 700; font-size: 3.3vh; letter-spacing: 0.12em; text-transform: uppercase; text-align: center;
  color: #dbe9ff; padding: 1.5vh 2.5vw; cursor: pointer; border-radius: 6px; border: 2px solid #4a6a9a;
  background: linear-gradient(#3a5680, #1a2a46 50%, #101c30 51%, #22385c); box-shadow: inset 0 1px 0 #9cf6, 0 3px 10px #0009; transition: all 0.12s; }
button:hover, button.sel { color: #fff; border-color: var(--warm); background: linear-gradient(#a86a2a, #5a3010 50%, #3a1e08 51%, #7a4818);
  box-shadow: inset 0 1px 0 #ffd8a0, 0 0 26px #ff9a3088; text-shadow: 0 0 10px #ffb060; }
button:disabled { opacity: 0.35; cursor: default; }
button:disabled:hover { color: #dbe9ff; border-color: #4a6a9a; background: linear-gradient(#3a5680, #1a2a46 50%, #101c30 51%, #22385c); box-shadow: none; text-shadow: none; }
button.big { font-size: 4.2vh; padding: 1.8vh 5vw; }
.row { display: flex; gap: 2vw; justify-content: center; align-items: center; }

.bar { width: 100%; height: 18px; background: #0b1120; border: 1px solid #2a3c62; border-radius: 3px; overflow: hidden; margin: 6px auto 0; }
.bar.wide { width: 40vw; height: 2.2vh; }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #39f, #9ef); }
.slider, .check { font-size: 2.6vh; display: flex; gap: 1vw; align-items: center; justify-content: center; }
.slider input { width: 16vw; accent-color: var(--warm); }
.check input { width: 2.6vh; height: 2.6vh; accent-color: var(--warm); }
table.keys, table.stats { margin: 0 auto; border-collapse: collapse; font-size: 2.6vh; }
table.keys td, table.stats td { padding: 0.8vh 1.6vw; text-align: center; border-bottom: 1px solid #23324e; }
table.keys td:first-child, table.stats td:first-child { color: var(--dim); }
table.stats td b { color: #fff; }

/* play */
#stage { display: flex; gap: 1.2vw; align-items: stretch; height: calc(100vh - 3vh); }
#cv { height: 100%; aspect-ratio: 9 / 16; border-radius: 6px; box-shadow: 0 0 60px #0af3; background: #000; }
#hud { width: max(300px, 17vw); display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; padding: 1vh 0.6vw; }
#hud > div { width: 100%; }
.lbl { font-size: 1.6vh; letter-spacing: 0.3em; color: var(--dim); }
.val { font-size: 4vh; font-weight: 700; font-style: italic; color: #fff; }
.val.gold { color: #ffd26a; }
.lvl { font-style: italic; font-size: 2.4vh; color: #bfe4ff; }
.wpn { font-size: 2.1vh; color: #cfe; line-height: 1.5; }
.wpn b { color: var(--warm); }

/* shop */
#shop { justify-content: space-between; padding: 2.5vh 2vw; box-sizing: border-box; gap: 2vh; }
.shop-top { display: flex; width: 100%; justify-content: space-between; align-items: center; }
.shop-top .chrome { font-size: 7vh; }
.shop-next { font-size: 2.8vh; color: #cfe4ff; text-shadow: 0 2px 6px #000; }
.shop-cred { font-size: 3vh; letter-spacing: 0.2em; color: #bcd; text-shadow: 0 2px 6px #000; }
.shop-cred b { color: #ffd26a; font-size: 4.4vh; margin-left: 1vw; font-style: italic; }
.shop-main { display: flex; gap: 1.5vw; flex: 1; width: 100%; min-height: 0; }
.col { flex: 1; display: flex; flex-direction: column; gap: 1.2vh; padding: 1.6vh 1.2vw; overflow: auto; min-width: 0; }
.col.mid { flex: 1.4; }
#s-cats button { display: flex; flex-direction: column; align-items: center; gap: 0.4vh; font-size: 2.4vh; padding: 1.2vh 1vw; }
#s-cats button small { font-size: 1.9vh; color: #ffd9a8; text-transform: none; letter-spacing: 0.04em; }
.item { display: grid; grid-template-columns: 1fr auto; gap: 0.4vh 1vw; align-items: center; text-align: center; padding: 1.4vh 1vw; border-radius: 6px; cursor: pointer;
  border: 2px solid #2c4268; background: #0c1626cc; transition: all 0.12s; }
.item:hover { border-color: #7ab0ff; background: #142440dd; }
.item.equipped { border-color: var(--warm); box-shadow: 0 0 20px #ff9a3055; }
.item.poor { opacity: 0.45; }
.item .nm { font-size: 2.7vh; font-weight: 700; font-style: italic; }
.item .pr { font-size: 2.5vh; color: #ffd26a; }
.item .tx { grid-column: 1 / 3; font-size: 1.9vh; color: var(--dim); }
.item .st { font-size: 1.8vh; letter-spacing: 0.2em; color: var(--warm); }
.pips { display: flex; gap: 0.5vw; justify-content: center; margin: 1.2vh 0; }
.pips i { width: 2.2vw; height: 2.6vh; border-radius: 3px; background: #1a2840; border: 1px solid #2f4870; }
.pips i.on { background: linear-gradient(#ffd080, #e07a20); border-color: #ffb050; box-shadow: 0 0 10px #ff9a3077; }
#s-preview { width: 100%; max-height: 34vh; object-fit: contain; border-radius: 6px; background: #02040a; border: 1px solid #23324e; }
.shop-bottom { width: 100%; }
#s-upgrade button { font-size: 2.4vh; white-space: nowrap; padding: 1.3vh 1.4vw; }
/* shop cards with a picture: image | name | price, description under name and price */
.item.pic { grid-template-columns: 11vh 1fr auto; column-gap: 1.4vw; }
.item.pic img { grid-row: 1 / 3; width: 11vh; height: 9vh; object-fit: contain; filter: drop-shadow(0 4px 10px #000c); }
.item.pic .tx { grid-column: 2 / 4; }
.item.pic { padding: 0.9vh 1vw; grid-template-columns: 9vh 1fr auto; }
.item.pic img { width: 9vh; height: 7vh; }
#s-items { display: flex; flex-direction: column; gap: 0.8vh; }
.col.mid .pips { margin: 0.8vh 0; }
.col.mid .menu-title { font-size: 3.2vh; }