:root {
  color-scheme: dark;
  --paper: #08080b;
  --ivory: #e9e2d1;
  --muted: rgba(233, 226, 209, .55);
  --line: rgba(233, 226, 209, .16);
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--paper); }
button { font: inherit; color: inherit; }
#game-shell { position: fixed; inset: 0; overflow: hidden; background: radial-gradient(circle at 50% 48%, #18141e 0, #09090d 44%, #050507 100%); user-select: none; }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#ink-field { opacity: 0; pointer-events:none; }
#gpu-ink { z-index:1;filter:contrast(1.05) saturate(1.18);pointer-events:none; }
#game { z-index: 2; }
.paper { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .31; mix-blend-mode: soft-light; background-image: repeating-radial-gradient(ellipse at 17% 33%, transparent 0 1px, rgba(255,255,255,.08) 1.5px 2px, transparent 2.5px 5px), linear-gradient(103deg, transparent 0 48%, rgba(255,255,255,.04) 50%, transparent 52%); background-size: 6px 8px, 170px 100%; }

.hud { position: absolute; z-index: 8; pointer-events: none; color: var(--ivory); }
.hud--top { left: 30px; right: 30px; top: 24px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; }
.identity { display: flex; gap: 12px; align-items: center; }
.seal { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255,99,98,.7); color: #ff9b8f; background: rgba(117,20,29,.32); font-size: 21px; box-shadow: 0 0 24px rgba(255,62,75,.2); }
.identity p, .identity h1 { margin: 0; }
.identity p { font: 600 9px/1.3 ui-monospace, monospace; letter-spacing: .23em; color: rgba(255,255,255,.45); }
.identity h1 { margin-top: 3px; font-size: 16px; letter-spacing: .18em; font-weight: 600; }
.run-state { text-align: center; }
.run-state span { display: block; font-size: 11px; letter-spacing: .2em; color: var(--muted); }
.run-state strong { display: block; margin-top: 4px; font: 300 27px/1 ui-monospace, monospace; letter-spacing: .08em; }
.score { justify-self: end; text-align: right; }
.score span { display: block; color: var(--muted); font-size: 10px; letter-spacing: .2em; }
.score strong { font: 300 26px/1 ui-monospace, monospace; }

.pigments { position: absolute; z-index: 8; top: 106px; left: 30px; color: var(--ivory); }
.pigments p { margin: 0 0 10px; color: var(--muted); font-size: 9px; letter-spacing: .28em; }
#pigment-slots { display: flex; flex-direction: column; gap: 7px; }
.pigment { display: flex; align-items: center; gap: 8px; opacity: .3; transition: opacity .35s, transform .35s; }
.pigment.is-awake { opacity: .9; transform: translateX(3px); }
.pigment.is-devoured { opacity:.15;filter:grayscale(1);transform:translateX(-5px); }
.pigment.is-devoured i { background:#555;box-shadow:none; }
.pigment.is-selected::after { content:"";width:4px;height:4px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c); }
.pigment i { width: 17px; height: 4px; background: var(--c); box-shadow: 0 0 11px var(--c); border-radius: 8px; }
.pigment span { font-size: 10px; letter-spacing: .12em; }
.pigment b { min-width:18px;color:rgba(255,255,255,.38);font:500 8px/1 ui-monospace,monospace;text-align:right; }

.technique { position:absolute;z-index:8;right:30px;top:106px;width:180px;text-align:right;color:var(--ivory);pointer-events:none; }
.technique span,.homestead > span { display:block;color:var(--muted);font-size:9px;letter-spacing:.28em; }
.technique strong { display:block;margin-top:7px;font-size:15px;letter-spacing:.14em;color:var(--technique,#e9e2d1);text-shadow:0 0 18px var(--technique,#fff);transition:color .2s,transform .2s; }
.technique.is-struck strong { transform:scale(1.12); }
.technique small { display:block;margin-top:5px;color:rgba(255,255,255,.35);font-size:9px;letter-spacing:.08em; }
.homestead { position:absolute;z-index:8;right:30px;top:174px;width:180px;text-align:right;color:var(--ivory);pointer-events:none; }
#room-slots { display:flex;justify-content:flex-end;gap:7px;margin:9px 0 6px; }
#room-slots i { width:22px;height:3px;background:rgba(255,255,255,.11);transition:background .35s,box-shadow .35s,transform .35s; }
#room-slots i.is-built { background:var(--c);box-shadow:0 0 10px var(--c);transform:translateY(-2px); }
#room-slots i.is-ruined { background:#4a3b3e;box-shadow:none;transform:translateY(1px) rotate(-12deg); }
.homestead small { color:rgba(255,255,255,.35);font-size:9px;letter-spacing:.07em; }

.home-meter { position: absolute; z-index: 8; left: 30px; bottom: 61px; width: 245px; color: var(--ivory); }
.home-meter__label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.home-meter__label span { font-size: 10px; letter-spacing: .28em; color: var(--muted); }
.home-meter__label b { font-size: 12px; font-weight: 500; letter-spacing: .16em; }
.home-meter__track { height: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.home-meter__track i { display: block; height: 100%; width: 12%; background: linear-gradient(90deg,#ff445f,#ffb43d,#54e3a2,#42bdec,#8f62ff,#ff4aa6); box-shadow: 0 0 13px #ba6cff; transition: width .4s; }
.home-meter small { display: block; margin-top: 7px; font-size: 9px; color: rgba(255,255,255,.38); letter-spacing: .1em; }

.health { position: absolute; z-index: 8; right: 30px; bottom: 58px; width: 230px; color: var(--ivory); }
.health__row { display: grid; grid-template-columns: 32px 1fr 28px; gap: 8px; align-items: center; margin-top: 8px; font-size: 9px; letter-spacing: .15em; }
.health__row > div { height: 3px; background: rgba(255,255,255,.12); }
.health__row i { display: block; width: 100%; height: 100%; background: #f0d8c4; box-shadow: 0 0 9px rgba(255,218,188,.55); transition: width .2s; }
.health__row--xp i { width: 0; background: linear-gradient(90deg,#57dcbc,#6bc6ff,#c374ff); }
.health__row b { font-weight: 500; text-align: right; }

.brush-meter { position:absolute;z-index:8;left:50%;bottom:52px;transform:translateX(-50%);width:190px;color:var(--ivory);pointer-events:none;text-align:center; }
.brush-meter > div:first-child { display:flex;justify-content:center;gap:8px;align-items:baseline; }
.brush-meter span { color:var(--muted);font-size:9px;letter-spacing:.24em; }
.brush-meter strong { color:var(--brush,#ff425b);font-size:12px;letter-spacing:.15em;text-shadow:0 0 13px var(--brush,#ff425b); }
.brush-meter__track { height:2px;margin:6px 0;background:rgba(255,255,255,.12);overflow:hidden; }
.brush-meter__track i { display:block;width:100%;height:100%;background:var(--brush,#ff425b);box-shadow:0 0 10px var(--brush,#ff425b);transition:width .15s; }
.brush-meter small { color:rgba(255,255,255,.32);font-size:8px;letter-spacing:.08em; }

.controls { position: absolute; z-index: 8; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; gap: 16px; align-items: center; color: rgba(255,255,255,.32); font: 500 9px/1 ui-monospace, monospace; letter-spacing: .09em; }
.controls button { border: 0; border-left: 1px solid rgba(255,255,255,.15); padding: 0 0 0 16px; background: none; color: rgba(255,255,255,.52); cursor: pointer; }

.banner { position: absolute; z-index: 10; left: 50%; top: 47%; transform: translate(-50%,-50%); text-align: center; color: var(--ivory); pointer-events: none; animation: banner 4.2s forwards; text-shadow: 0 3px 22px #000; }
.banner small, .banner span { display: block; letter-spacing: .4em; color: rgba(255,255,255,.55); font-size: 10px; }
.banner strong { display: block; margin: 12px 0; font-size: clamp(34px,5vw,76px); line-height: 1; font-weight: 700; letter-spacing: .18em; }
@keyframes banner { 0%,12% { opacity:0; filter:blur(16px); transform:translate(-50%,-46%) scale(1.08); } 25%,68% { opacity:1; filter:blur(0); transform:translate(-50%,-50%) scale(1); } 100% { opacity:0; filter:blur(8px); transform:translate(-50%,-55%) scale(.96); visibility:hidden; } }

.upgrade, .result { position: absolute; z-index: 20; inset: 0; display: grid; place-content: center; color: var(--ivory); background: radial-gradient(circle at 50% 45%,rgba(25,20,35,.52),rgba(4,4,7,.88)); backdrop-filter: blur(9px); }
.upgrade[aria-hidden="true"], .result[aria-hidden="true"] { display: none; }
.upgrade__heading { text-align: center; margin-bottom: 24px; }
.upgrade__heading span { color: #ffb15b; letter-spacing: .4em; font-size: 11px; }
.upgrade__heading h2 { margin: 8px 0 3px; font-size: 28px; letter-spacing: .18em; }
.upgrade__heading p { margin: 0; color: var(--muted); font-size: 9px; }
.upgrade__cards { display: grid; grid-template-columns: repeat(3,minmax(190px,240px)); gap: 13px; }
.upgrade-card { position: relative; min-height: 220px; padding: 24px 22px; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.015)); text-align: left; cursor: pointer; overflow: hidden; transition: transform .2s,border-color .2s,background .2s; }
.upgrade-card:hover { transform: translateY(-8px); border-color: var(--c); background: linear-gradient(145deg,color-mix(in srgb,var(--c) 18%,transparent),rgba(255,255,255,.02)); }
.upgrade-card::after { content:""; position:absolute; width:130px;height:130px;border-radius:50%;right:-55px;bottom:-60px;background:var(--c);filter:blur(45px);opacity:.22; }
.upgrade-card em { font: 600 10px/1 ui-monospace,monospace; color: var(--c); }
.upgrade-card b { display:block;margin:26px 0 12px;font-size:22px;letter-spacing:.12em; }
.upgrade-card p { margin:0;color:var(--muted);font-size:12px;line-height:1.75; }

.result { text-align:center; }
.result__seal { display:grid;place-items:center;width:52px;height:52px;margin:0 auto 16px;border:1px solid #ff816f;color:#ff9b8f;background:rgba(120,25,35,.25);font-size:28px; }
.result > p { margin:0;color:var(--muted);letter-spacing:.35em;font-size:10px; }
.result h2 { margin:10px 0 30px;font-size:42px;letter-spacing:.18em; }
.result__stats { display:flex;justify-content:center;gap:36px;margin-bottom:28px; }
.result__stats span { color:var(--muted);font-size:10px;letter-spacing:.16em; }
.result__stats b { display:block;margin-top:7px;color:var(--ivory);font:300 22px/1 ui-monospace,monospace; }
.result button { border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.07);padding:10px 30px;letter-spacing:.2em;cursor:pointer; }
.result button:hover { border-color:#ff9c83; }

.touch-stick { display:none;position:absolute;z-index:12;width:92px;height:92px;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(255,255,255,.035);pointer-events:none; }
.touch-stick i { position:absolute;left:29px;top:29px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.25);box-shadow:0 0 24px rgba(255,255,255,.14); }

@media (max-width:700px) {
  .hud--top { left:16px;right:16px;top:15px;grid-template-columns:1fr auto; }
  .run-state { grid-column:1/-1;grid-row:2;margin-top:10px; }
  .run-state strong { font-size:20px; }
  .score { grid-column:2;grid-row:1; }
  .identity h1 { font-size:13px; }
  .pigments { left:16px;top:104px; }
  .pigment span,.pigment b { display:none; }
  .technique { right:16px;top:104px;width:145px; }
  .homestead { display:none; }
  .home-meter { left:16px;bottom:45px;width:150px; }
  .health { right:16px;bottom:45px;width:155px; }
  .brush-meter { width:130px;bottom:88px; }
  .brush-meter small { display:none; }
  .controls { display:none; }
  .upgrade { place-content:center stretch;padding:18px;overflow:auto; }
  .upgrade__cards { grid-template-columns:1fr;gap:8px; }
  .upgrade-card { min-height:120px;padding:16px; }
  .upgrade-card b { margin:12px 0 6px;font-size:18px; }
  .upgrade-card p { line-height:1.4; }
  .touch-stick.is-active { display:block; }
}

/* Palette declarations moved out of generated inline attributes. */
[data-color="#ff425b"]{--c:#ff425b;}
[data-color="#ffb22d"]{--c:#ffb22d;}
[data-color="#45e39b"]{--c:#45e39b;}
[data-color="#3dbef4"]{--c:#3dbef4;}
[data-color="#7358ff"]{--c:#7358ff;}
[data-color="#ff43a1"]{--c:#ff43a1;}
[data-color="#e9e9db"]{--c:#e9e9db;}