:root {
  color-scheme: dark;
  --blood-dark: #11040b;
  --blood: #4b0924;
  --plasma: #ff476f;
  --cell: #69ffd2;
  --yellow: #ffe66b;
  --attack: #ff8b5f;
  --defense: #72dfff;
  --panel: rgba(19, 4, 14, 0.9);
  --line: rgba(255, 255, 255, 0.15);
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(137, 14, 63, 0.38), transparent 34rem),
    radial-gradient(circle at 82% 90%, rgba(20, 106, 100, 0.22), transparent 30rem),
    #080207;
  color: #fff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow: hidden;
}

button, input, select { font: inherit; }
button:disabled { opacity: 0.38; cursor: not-allowed !important; transform: none !important; }
.hidden { display: none !important; }

#app {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 10px;
}

#gameShell {
  position: relative;
  width: min(100%, 1220px);
  aspect-ratio: 1000 / 720;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 24px;
  background: #180710;
  box-shadow: 0 30px 100px rgba(0,0,0,0.58), inset 0 0 0 1px rgba(255,255,255,0.05);
  isolation: isolate;
}

#gameShell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 84px rgba(0,0,0,0.58);
  z-index: 7;
}

canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  background: #1a0710;
}

#hud {
  position: absolute;
  z-index: 8;
  top: 10px;
  left: 12px;
  right: 12px;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(10, 2, 8, 0.78);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}

#hud.hidden { display: none; }

.hud-cluster {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.hud-label {
  color: rgba(255,255,255,0.5);
  font-size: 0.59rem;
  letter-spacing: 0.12em;
  font-weight: 800;
}

.hud-cluster strong {
  font-variant-numeric: tabular-nums;
  font-size: 0.98rem;
}

#zoneValue {
  color: #ff9bb3;
  font-size: 0.64rem;
  letter-spacing: 0.08em;
}

.score-cluster { margin-left: auto; }
.score-cluster strong { color: var(--yellow); }
.score-cluster #totalScoreValue { color: var(--cell); }
.total-label { margin-left: 4px; }
.count-cluster strong { color: #b3fff0; }
.divider { color: rgba(255,255,255,0.18); }

.hud-actions {
  display: flex;
  gap: 5px;
}

.hud-actions button {
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
  background: rgba(255,255,255,0.08);
  border-radius: 9px;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 0.69rem;
  font-weight: 800;
}

.hud-actions button:hover { background: rgba(255,255,255,0.15); }
.hud-actions .attack { border-color: rgba(255,139,95,0.5); color: #ffc1aa; }
.hud-actions .defense { border-color: rgba(114,223,255,0.5); color: #b9efff; }
.hud-actions .used { opacity: 0.42; }

.panel {
  position: absolute;
  z-index: 10;
  inset: 50% auto auto 50%;
  width: min(90%, 650px);
  max-height: 91%;
  overflow: auto;
  transform: translate(-50%, -46%) scale(0.96);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  padding: clamp(22px, 3.5vw, 40px);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 26px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 28%),
    var(--panel);
  backdrop-filter: blur(18px);
  box-shadow: 0 35px 90px rgba(0,0,0,0.58), inset 0 0 40px rgba(255, 42, 103, 0.08);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
  scrollbar-width: thin;
}

.panel.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.panel.compact { width: min(88%, 430px); }
.panel.wide { width: min(94%, 960px); }
.panel.tall { max-height: 88%; }
.panel.results { width: min(92%, 780px); }

.eyebrow {
  margin: 0 0 7px;
  color: #ff86a5;
  font-size: 0.67rem;
  letter-spacing: 0.22em;
  font-weight: 900;
}

h1, h2, p { margin-top: 0; }

h1 {
  margin-bottom: 0;
  font-size: clamp(3rem, 9vw, 6.4rem);
  line-height: 0.88;
  letter-spacing: -0.07em;
  text-shadow: 0 0 35px rgba(255, 69, 120, 0.42);
}

h2 {
  margin-bottom: 18px;
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  letter-spacing: -0.04em;
}

.subtitle {
  color: var(--cell);
  margin: 10px 0 20px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.76rem;
  font-weight: 900;
}

.menu-copy {
  width: min(100%, 540px);
  margin: 0 auto 22px;
  color: rgba(255,255,255,0.72);
  line-height: 1.52;
}

.panel button {
  width: min(100%, 350px);
  min-height: 46px;
  display: block;
  margin: 9px auto 0;
  border-radius: 13px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 850;
  letter-spacing: 0.02em;
}

.panel button.primary {
  color: #19030d;
  background: linear-gradient(135deg, #ffdb68, #ff648b 55%, #6fffe0);
  box-shadow: 0 12px 35px rgba(255, 75, 124, 0.25);
}
.panel button.primary.alt { background: linear-gradient(135deg, #78ffe0, #70c9ff 55%, #d2a0ff); }
.panel button.primary:hover { filter: brightness(1.08); transform: translateY(-1px); }

.panel button.secondary {
  color: #fff;
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
}
.panel button.secondary:hover { background: rgba(255,255,255,0.11); }
.panel button.danger { border-color: rgba(255,76,110,0.32); color: #ffb0c1; }

.version {
  margin: 20px 0 0;
  color: rgba(255,255,255,0.34);
  font-size: 0.61rem;
  letter-spacing: 0.13em;
}

.cell-logo {
  position: relative;
  width: 86px;
  height: 70px;
  margin: 0 auto 18px;
  border-radius: 52% 48% 46% 54%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.9) 0 3%, transparent 4%),
    radial-gradient(circle at 50% 50%, #ff7c99, #a60745 64%, #4a071e 100%);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,0.18), 0 0 34px rgba(255,69,120,0.34);
  animation: logoFloat 3.2s ease-in-out infinite;
}
.cell-core { position:absolute; width:30px; height:24px; left:28px; top:25px; border-radius:50%; background:rgba(59,7,39,.45); filter:blur(1px); }
.cell-eye { position:absolute; top:22px; width:9px; height:12px; border-radius:50%; background:white; box-shadow:inset 0 -4px 0 #391020; }
.eye-left { left:27px; } .eye-right { right:27px; }
.cell-mouth { position:absolute; left:35px; top:45px; width:17px; height:7px; border-bottom:3px solid white; border-radius:50%; }
@keyframes logoFloat { 50% { transform: translateY(-5px) rotate(2deg) scale(1.03); } }

.rules-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  text-align: left;
  margin-bottom: 18px;
}
.rules-grid article {
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  background: rgba(255,255,255,0.045);
}
.rules-grid strong { display:block; margin-bottom:5px; color:#ffe27d; }
.rules-grid span { color:rgba(255,255,255,.66); font-size:.82rem; line-height:1.4; }

.options-count {
  margin: -9px auto 12px;
  color: rgba(255,255,255,.58);
  font-size: .7rem;
  line-height: 1.4;
}
.options-toolbar {
  position: sticky;
  top: -1px;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(260px,1fr) auto auto;
  gap: 8px;
  align-items: end;
  margin-bottom: 12px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(15,2,11,.94);
  backdrop-filter: blur(12px);
}
.options-search { display:block; text-align:left; }
.options-search span { display:block; margin:0 0 5px 3px; color:rgba(255,255,255,.48); font-size:.56rem; letter-spacing:.13em; font-weight:900; }
.options-search input {
  width:100%;
  min-height:38px;
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  outline:none;
  color:#fff;
  background:rgba(255,255,255,.055);
}
.options-search input:focus { border-color:rgba(112,255,224,.62); box-shadow:0 0 0 3px rgba(112,255,224,.08); }
.panel button.small-control { width:auto; min-width:104px; min-height:38px; margin:0; padding:6px 10px; font-size:.7rem; }
.options-grid { display:grid; gap:10px; text-align:left; }
.option-group {
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  background:rgba(255,255,255,.025);
}
.option-group summary {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:13px 15px;
  cursor:pointer;
  list-style:none;
  background:linear-gradient(90deg,rgba(255,103,143,.09),rgba(112,255,224,.035));
}
.option-group summary::-webkit-details-marker { display:none; }
.option-group summary > span { min-width:0; }
.option-group summary strong { display:block; color:#fff; font-size:.9rem; }
.option-group summary small { display:block; margin-top:3px; color:rgba(255,255,255,.48); font-size:.64rem; line-height:1.25; }
.option-group summary b { flex:0 0 auto; color:#ffe47b; font-size:.58rem; letter-spacing:.1em; }
.option-group[open] summary { border-bottom:1px solid rgba(255,255,255,.08); }
.option-group-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  padding:10px;
}
.option-card {
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(255,255,255,.045);
}
.option-card label { display:flex; justify-content:space-between; gap:12px; color:#fff; font-size:.79rem; font-weight:800; }
.option-card output { flex:0 0 auto; color:#ffe47b; font-variant-numeric:tabular-nums; }
.option-card small { display:block; min-height:31px; margin:5px 0 8px; color:rgba(255,255,255,.48); font-size:.67rem; line-height:1.25; }
.option-card input[type="range"] { width:100%; accent-color:#ff668e; }

.row-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.row-actions button { width: min(100%, 240px); margin:0; }

.loadout-summary, .shop-bar {
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:9px;
  margin-bottom:12px;
}
.loadout-summary > div, .shop-bar > div {
  padding:11px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  background:rgba(255,255,255,.045);
}
.loadout-summary span, .shop-bar span { display:block; color:rgba(255,255,255,.46); font-size:.58rem; letter-spacing:.12em; font-weight:900; }
.loadout-summary strong, .shop-bar strong { display:block; margin-top:4px; color:#8fffe8; font-size:.95rem; }
.notice { color:rgba(255,255,255,.62); font-size:.78rem; margin:8px auto 14px; }

.item-grid {
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:9px;
  text-align:left;
}
.item-card {
  position:relative;
  min-height:150px;
  padding:12px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  background:rgba(255,255,255,.045);
  overflow:hidden;
}
.item-card.attack { box-shadow: inset 0 3px 0 rgba(255,139,95,.45); }
.item-card.defense { box-shadow: inset 0 3px 0 rgba(114,223,255,.45); }
.item-card.equipped { border-color:#ffe675; background:rgba(255,230,117,.09); }
.item-card h3 { margin:0 0 5px; font-size:.9rem; }
.item-card .type { font-size:.55rem; letter-spacing:.14em; font-weight:900; color:rgba(255,255,255,.48); }
.item-card p { margin:7px 0 30px; color:rgba(255,255,255,.58); font-size:.69rem; line-height:1.35; }
.item-card .owned { position:absolute; right:10px; top:10px; color:#ffe675; font-size:.7rem; font-weight:900; }
.item-card .price { position:absolute; left:12px; bottom:12px; color:#8fffe8; font-size:.72rem; font-weight:900; }
.item-card button {
  position:absolute;
  right:8px;
  bottom:8px;
  width:auto;
  min-height:30px;
  margin:0;
  padding:5px 9px;
  border-radius:8px;
  font-size:.67rem;
  background:rgba(255,255,255,.1);
  color:#fff;
  border-color:rgba(255,255,255,.14);
}
.item-card button:hover { background:rgba(255,255,255,.18); }

.final-score {
  width:min(100%,420px);
  margin:0 auto 14px;
  padding:13px 18px;
  border:1px solid rgba(255,230,107,.24);
  border-radius:15px;
  background:rgba(255,230,107,.07);
}
.final-score span { display:block; color:rgba(255,255,255,.48); font-size:.62rem; letter-spacing:.16em; font-weight:900; }
.final-score strong { display:block; color:#ffe66b; font-size:2.2rem; font-variant-numeric:tabular-nums; }

.results-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.stat-card {
  padding:10px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
  background:rgba(255,255,255,.04);
}
.stat-card span { display:block; color:rgba(255,255,255,.43); font-size:.54rem; letter-spacing:.1em; font-weight:900; }
.stat-card strong { display:block; margin-top:3px; color:#fff; font-size:1rem; font-variant-numeric:tabular-nums; }
.result-actions { margin-top:14px; }

#toast {
  position:absolute;
  z-index:12;
  left:50%;
  bottom:30px;
  transform:translate(-50%, 18px);
  opacity:0;
  pointer-events:none;
  max-width:80%;
  padding:10px 16px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(8,1,6,.88);
  color:#fff;
  font-size:.76rem;
  font-weight:850;
  text-align:center;
  transition:opacity .16s ease, transform .16s ease;
}
#toast.show { opacity:1; transform:translate(-50%,0); }

#rotateHint { display:none; }

@media (max-width: 1000px) {
  #hud { gap:8px; }
  #zoneValue, .total-label, #totalScoreValue { display:none; }
  .hud-actions button { padding:5px 6px; font-size:.61rem; }
  .item-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width: 720px) {
  #app { padding:0; }
  #gameShell { border:0; }
  #hud { top:5px; left:5px; right:5px; min-height:48px; padding:5px; flex-wrap:wrap; }
  .hud-cluster { gap:4px; }
  .hud-actions { width:100%; justify-content:center; }
  .count-cluster { margin-left:auto; }
  .panel { width:94%; max-height:92%; padding:20px; }
  .rules-grid, .option-group-grid { grid-template-columns:1fr; }
  .options-toolbar { grid-template-columns:1fr 1fr; }
  .options-search { grid-column:1 / -1; }
  .item-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .results-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width: 470px) {
  .level-cluster #zoneValue, .score-cluster { display:none; }
  .hud-actions .power-button { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .item-grid { grid-template-columns:1fr 1fr; }
  .item-card { min-height:165px; }
  .results-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .loadout-summary, .shop-bar { grid-template-columns:1fr; }
}

@media (orientation: portrait) and (max-width: 820px) {
  #rotateHint {
    display:block;
    position:absolute;
    z-index:6;
    right:8px;
    bottom:8px;
    color:rgba(255,255,255,.3);
    font-size:.56rem;
  }
}

/* v0.2.1 Bio-Shop clarity pass */
.shop-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 2px 0 12px;
}
.shop-steps > div {
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: auto auto;
  gap: 1px 9px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 13px;
  text-align: left;
  background: rgba(255,255,255,.04);
}
.shop-steps strong {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  color: #19030d;
  background: linear-gradient(135deg, #ffe16f, #73ffe2);
  font-size: .92rem;
}
.shop-steps span { color: #fff; font-size: .67rem; letter-spacing: .13em; font-weight: 950; }
.shop-steps small { color: rgba(255,255,255,.52); font-size: .64rem; line-height: 1.28; }

.shop-equipped {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 10px;
}
.shop-equipped > div {
  padding: 11px 13px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 13px;
  text-align: left;
  background: rgba(255,255,255,.045);
}
.shop-equipped > div.attack { box-shadow: inset 4px 0 0 rgba(255,139,95,.72); }
.shop-equipped > div.defense { box-shadow: inset 4px 0 0 rgba(114,223,255,.72); }
.shop-equipped span { display: block; color: rgba(255,255,255,.48); font-size: .56rem; letter-spacing: .13em; font-weight: 900; }
.shop-equipped strong { display: block; margin-top: 3px; color: #fff; font-size: .88rem; }
.shop-equipped small { display: block; margin-top: 2px; color: #ffe675; font-size: .65rem; }
.shop-notice { margin-bottom: 10px; }

.shop-catalog { display: grid; gap: 13px; text-align: left; }
.shop-category {
  padding: 12px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
}
.shop-category-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 9px;
}
.shop-category-header h3 { margin: 0; font-size: 1rem; }
.shop-category-header p { margin: 0; color: rgba(255,255,255,.48); font-size: .66rem; }
.shop-category.attack .shop-category-header h3 { color: #ffb39a; }
.shop-category.defense .shop-category-header h3 { color: #aeeeff; }
.shop-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.item-card.shop-card { min-height: 178px; padding-bottom: 10px; }
.item-card.shop-card p { margin: 7px 0 10px; min-height: 56px; }
.shop-card-footer {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 9px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}
.shop-card .shop-price {
  display: flex;
  flex-direction: column;
  gap: 1px;
  color: #8fffe8;
  font-size: .69rem;
  font-weight: 900;
}
.shop-card .shop-price small { color: rgba(255,255,255,.42); font-size: .56rem; font-weight: 700; }
.shop-card-actions { display: flex; gap: 5px; }
.item-card.shop-card .shop-card-actions button {
  position: static;
  width: auto;
  min-height: 30px;
  margin: 0;
  padding: 5px 8px;
  white-space: nowrap;
}
.item-card.shop-card .shop-card-actions .equip-button {
  border-color: rgba(255,230,117,.38);
  color: #ffe675;
}
.item-card.shop-card .shop-card-actions .equip-button.equipped {
  color: #1a0710;
  background: #ffe675;
}

@media (max-width: 900px) {
  .shop-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .shop-steps, .shop-equipped { grid-template-columns: 1fr; }
  .shop-category-grid { grid-template-columns: 1fr; }
  .shop-category-header { display: block; }
  .shop-category-header p { margin-top: 3px; }
}

/* v0.3.0 — Infection Origin */
.infection-reveal {
  width:min(100%,520px);
  margin:-8px auto 14px;
  padding:10px 14px;
  border:1px solid rgba(255,45,96,.42);
  border-radius:13px;
  background:linear-gradient(90deg,rgba(74,0,18,.82),rgba(19,1,9,.76));
  box-shadow:inset 0 0 24px rgba(255,0,56,.1),0 0 28px rgba(255,0,56,.08);
}
.infection-reveal span,.infection-reveal strong,.infection-reveal small{display:block}
.infection-reveal .infection-mark{color:#ff496f;font-size:.56rem;letter-spacing:.18em;font-weight:950}
.infection-reveal strong{margin-top:3px;color:#ffd7df;font-size:.9rem;letter-spacing:.08em}
.infection-reveal small{margin-top:3px;color:rgba(255,255,255,.48);font-size:.65rem}
.horror-button{border-color:rgba(255,44,83,.45)!important;color:#ff9cb1!important;background:rgba(88,0,20,.24)!important}

body.infection-revealed {
  background:
    radial-gradient(circle at 50% 0%,rgba(255,0,55,.18),transparent 35rem),
    repeating-linear-gradient(112deg,rgba(80,0,20,.09) 0 2px,transparent 2px 17px),
    #030103;
}
body.infection-revealed #gameShell{border-color:rgba(255,40,80,.28);box-shadow:0 30px 110px rgba(0,0,0,.78),inset 0 0 80px rgba(84,0,20,.3)}
body.infection-revealed #menuPanel{
  --panel:rgba(12,1,6,.94);
  border-color:rgba(255,35,75,.26);
  box-shadow:0 35px 100px rgba(0,0,0,.74),inset 0 0 70px rgba(126,0,31,.18);
  background:
    linear-gradient(172deg,transparent 0 46%,rgba(255,0,50,.06) 47% 48%,transparent 49%),
    linear-gradient(16deg,transparent 0 56%,rgba(255,0,50,.05) 57% 58%,transparent 59%),
    var(--panel);
}
body.infection-revealed #gameTitle{
  color:#fff1f3;
  text-shadow:0 4px 0 #6d001a,0 10px 22px rgba(255,0,54,.52);
  position:relative;
}
body.infection-revealed #gameTitle::after{
  content:"";position:absolute;left:10%;right:8%;bottom:-13px;height:17px;
  background:linear-gradient(90deg,transparent 0 6%,#8f001f 6% 10%,transparent 10% 18%,#b00027 18% 22%,transparent 22% 54%,#720017 54% 59%,transparent 59% 83%,#a00022 83% 86%,transparent 86%);
  clip-path:polygon(0 0,100% 0,100% 22%,88% 35%,86% 100%,82% 34%,59% 40%,57% 82%,54% 38%,22% 33%,20% 92%,17% 35%,0 22%);
  opacity:.8;
}
body.infection-revealed .cell-logo{filter:saturate(.7) contrast(1.25);box-shadow:inset 0 0 0 4px rgba(255,255,255,.12),0 0 34px rgba(255,0,48,.45)}
body.infection-revealed .cell-logo::after{content:"";position:absolute;inset:-8px;background:linear-gradient(54deg,transparent 46%,rgba(20,0,8,.9) 47% 50%,transparent 51%),linear-gradient(-70deg,transparent 52%,rgba(20,0,8,.8) 53% 55%,transparent 56%);pointer-events:none}

.panel-link-button{
  width:min(100%,240px);min-height:46px;display:grid;place-items:center;margin:0;
  padding:9px 14px;border:1px solid rgba(255,255,255,.16);border-radius:13px;
  color:#fff;text-decoration:none;background:rgba(255,255,255,.06);font-weight:850;font-size:.84rem;
}
.panel-link-button:hover{background:rgba(255,255,255,.11)}
.blood-eyebrow{color:#ff355f;text-shadow:0 0 12px rgba(255,0,55,.4)}
.bloody-title{margin-bottom:8px;color:#f6eef0;font-size:clamp(2.6rem,7vw,5.2rem);letter-spacing:.02em;text-shadow:0 4px 0 #650016,0 9px 0 #290008,0 13px 30px rgba(255,0,45,.62)}
.horror-copy{color:#ffbdc9}
.horror-final{background:linear-gradient(180deg,rgba(55,0,15,.18),transparent 28%),rgba(8,0,4,.95);border-color:rgba(255,30,69,.32)}
.monster-final-layout{display:grid;grid-template-columns:minmax(290px,.9fr) minmax(360px,1.1fr);gap:14px;align-items:start;text-align:left}
.monster-portrait{position:relative;overflow:hidden;border:1px solid rgba(255,54,93,.25);border-radius:18px;background:#070105;box-shadow:inset 0 0 40px rgba(255,0,60,.12)}
.monster-portrait canvas{width:100%;height:auto;aspect-ratio:1/1;background:#080106}
.specimen-stamp{position:absolute;left:10px;right:10px;bottom:10px;padding:8px 10px;border:1px solid rgba(255,255,255,.12);border-radius:10px;color:rgba(255,255,255,.55);background:rgba(0,0,0,.64);font-size:.58rem;letter-spacing:.14em;font-weight:900;text-align:center}
.monster-nameplate{padding:13px 15px;border:1px solid rgba(255,255,255,.11);border-radius:14px;background:rgba(255,255,255,.045)}
.monster-nameplate span{display:block;font-size:.6rem;letter-spacing:.18em;font-weight:950}
.monster-nameplate strong{display:block;margin-top:4px;color:#fff;font-size:1.22rem;line-height:1.12}
.seed-panel{display:grid;grid-template-columns:1fr 1.25fr;gap:8px;margin-top:9px;padding:10px;border:1px solid rgba(255,230,107,.18);border-radius:14px;background:rgba(255,230,107,.04)}
.seed-panel>div{min-width:0}.seed-panel span{display:block;color:rgba(255,255,255,.42);font-size:.53rem;letter-spacing:.12em;font-weight:900}.seed-panel strong{display:block;margin-top:3px;color:#ffe86f;font-size:1rem;overflow-wrap:anywhere}.seed-panel small{grid-column:1/-1;color:rgba(255,255,255,.42);font-size:.56rem;line-height:1.5;word-spacing:.16em}
.monster-parts-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:9px}
.monster-parts-grid>div{padding:8px 10px;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:rgba(255,255,255,.035)}
.monster-parts-grid span{display:block;color:rgba(255,255,255,.38);font-size:.5rem;letter-spacing:.11em;font-weight:900}.monster-parts-grid strong{display:block;margin-top:2px;color:#f7dce4;font-size:.68rem;line-height:1.2}
.compact-stats{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:9px}.compact-stats .stat-card{padding:7px}.compact-stats .stat-card strong{font-size:.78rem}.compact-stats .stat-card span{font-size:.45rem}
.final-download-message{margin:13px auto 4px;padding:10px 14px;border:1px dashed rgba(255,73,111,.38);border-radius:12px;color:rgba(255,255,255,.66);background:rgba(85,0,20,.18);font-size:.72rem}.final-download-message strong{color:#ff6788;letter-spacing:.08em}
.final-actions{margin-top:10px}.final-actions button,.final-actions a{width:min(100%,240px)}

.archive-panel{background:linear-gradient(180deg,rgba(76,0,21,.13),transparent 24%),rgba(8,1,5,.94)}
.archive-toolbar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}.archive-toolbar button{width:min(100%,220px);margin:0}
.archive-layout{display:grid;grid-template-columns:minmax(270px,.82fr) minmax(330px,1.18fr);gap:12px;text-align:left}
.archive-list-wrap,.archive-preview-wrap{min-height:420px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.025);overflow:hidden}
.archive-summary{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08)}.archive-summary span{color:rgba(255,255,255,.44);font-size:.56rem;letter-spacing:.13em;font-weight:900}.archive-summary strong{color:#ff7897}
.archive-list{max-height:410px;overflow:auto;padding:8px}.archive-card{width:100%!important;min-height:64px!important;margin:0 0 7px!important;padding:9px 10px!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:11px!important;text-align:left!important;background:rgba(255,255,255,.035)!important;color:#fff!important}.archive-card.selected{border-color:rgba(255,75,116,.65)!important;background:rgba(112,0,28,.28)!important}.archive-card span{display:block;color:#ff7697;font-size:.5rem;letter-spacing:.13em;font-weight:900}.archive-card strong{display:block;margin-top:2px;font-size:.78rem}.archive-card small{display:block;margin-top:3px;color:rgba(255,255,255,.42);font-size:.55rem}.archive-empty{padding:28px 16px;color:rgba(255,255,255,.45);font-size:.75rem;text-align:center}
.archive-preview-wrap{display:flex;flex-direction:column}.archive-preview-wrap canvas{width:100%;height:auto;max-height:360px;object-fit:contain;background:#070104}.archive-details{display:grid;gap:3px;padding:11px 13px;border-top:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.52);font-size:.7rem}.archive-details>span{font-size:.55rem;letter-spacing:.14em;font-weight:950}.archive-details>strong{color:#fff;font-size:1rem}.archive-details small{line-height:1.5}

@media(max-width:850px){.monster-final-layout,.archive-layout{grid-template-columns:1fr}.monster-portrait canvas{max-height:330px;object-fit:contain}.archive-list-wrap,.archive-preview-wrap{min-height:0}.archive-list{max-height:260px}.compact-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.seed-panel,.monster-parts-grid{grid-template-columns:1fr}.compact-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.bloody-title{font-size:2.7rem}}

/* v0.3.1 — Infection Director */
.creator-test-tools {
  display:grid;
  grid-template-columns:minmax(220px,1.35fr) repeat(3,minmax(145px,.75fr));
  gap:8px;
  align-items:stretch;
  margin:0 0 13px;
  padding:10px;
  border:1px solid rgba(255,230,107,.28);
  border-radius:14px;
  background:linear-gradient(90deg,rgba(255,230,107,.08),rgba(113,255,224,.055));
  text-align:left;
}
.creator-test-tools>div{padding:4px 6px}.creator-test-tools span,.creator-test-tools strong,.creator-test-tools small{display:block}.creator-test-tools span{color:#ffe66b;font-size:.56rem;letter-spacing:.15em;font-weight:950}.creator-test-tools strong{margin-top:3px;font-size:.78rem}.creator-test-tools small{margin-top:3px;color:rgba(255,255,255,.46);font-size:.58rem;line-height:1.4}.creator-test-tools code{color:#8fffe7}.creator-test-tools button{width:100%;min-height:54px;margin:0;padding:8px 10px;text-align:center;font-size:.68rem}
.shop-training{margin:10px 0 12px;padding:11px 13px;border:1px solid rgba(255,230,107,.32);border-radius:13px;background:linear-gradient(90deg,rgba(255,230,107,.09),rgba(105,255,210,.055));text-align:left}.shop-training strong,.shop-training span{display:block}.shop-training strong{color:#ffe66b;font-size:.62rem;letter-spacing:.15em}.shop-training span{margin-top:5px;color:rgba(255,255,255,.72);font-size:.72rem;line-height:1.48}.shop-training b{color:#8fffe7}
@media(max-width:900px){.creator-test-tools{grid-template-columns:1fr 1fr}.creator-test-tools>div{grid-column:1/-1}}
@media(max-width:560px){.creator-test-tools{grid-template-columns:1fr}}

/* v0.3.2 — Targeted Arsenal & universal, non-distorting viewport fit */
html, body {
  height: var(--viewport-height, 100dvh);
  min-height: 0;
  overscroll-behavior: none;
}

#app {
  width: var(--viewport-width, 100vw);
  height: var(--viewport-height, 100dvh);
  min-height: 0;
  overflow: hidden;
  padding: clamp(0px, 1.2vmin, 12px);
}

#gameShell {
  width: min(1220px, calc(var(--viewport-width, 100vw) - 20px), calc((var(--viewport-height, 100dvh) - 20px) * 1.3888889));
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1000 / 720;
  flex: 0 0 auto;
}

#gameCanvas {
  width: 100%;
  height: 100%;
  aspect-ratio: 1000 / 720;
}

.weapon-cluster {
  min-width: 0;
  max-width: 205px;
  padding: 5px 8px;
  border: 1px solid rgba(143,255,231,.18);
  border-radius: 10px;
  background: rgba(143,255,231,.045);
}
.weapon-cluster strong {
  overflow: hidden;
  max-width: 130px;
  color: #dffef8;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .69rem;
}
#gunAmmoValue {
  flex: 0 0 auto;
  color: #ffe66b;
  font-size: .65rem;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}
#gunAmmoValue.empty { color: #ff819b; }

.power-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.power-button .keycap {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: rgba(0,0,0,.22);
  font-size: .7rem;
  line-height: 1;
}
.power-button.targeting {
  color: #fff !important;
  border-color: #ff6f92 !important;
  background: linear-gradient(135deg, rgba(255,54,102,.55), rgba(134,11,64,.72)) !important;
  box-shadow: 0 0 20px rgba(255,62,111,.38);
  animation: targetButtonPulse .7s ease-in-out infinite alternate;
}
.power-button.active-defense {
  color: #fff !important;
  border-color: #7de7ff !important;
  background: linear-gradient(135deg, rgba(41,143,183,.52), rgba(26,64,117,.72)) !important;
  box-shadow: 0 0 18px rgba(92,220,255,.28);
}
@keyframes targetButtonPulse { to { filter: brightness(1.22); transform: translateY(-1px); } }

.shop-equipped.three-slot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shop-equipped > div.gun {
  box-shadow: inset 4px 0 0 rgba(143,255,231,.75);
}
.shop-category.guns {
  border-color: rgba(143,255,231,.18);
  background: linear-gradient(180deg, rgba(143,255,231,.05), rgba(255,255,255,.02));
}
.shop-category.guns .shop-category-header h3 { color: #8fffe7; }
.gun-card {
  border-color: color-mix(in srgb, var(--gun-color, #8fffe7) 34%, rgba(255,255,255,.08)) !important;
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--rarity-color, #fff) 70%, transparent);
}
.gun-card h3 { color: var(--gun-color, #8fffe7); }
.gun-card .type { color: var(--rarity-color, #fff); }
.gun-stat-line {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: -3px 0 42px;
}
.gun-stat-line span {
  padding: 3px 6px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  color: rgba(255,255,255,.68);
  background: rgba(0,0,0,.18);
  font-size: .54rem;
  font-weight: 900;
  letter-spacing: .04em;
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .gun-card { border-color: rgba(143,255,231,.28) !important; box-shadow: inset 0 3px 0 rgba(143,255,231,.45); }
}

@media (max-width: 1080px) {
  #hud { gap: 7px; }
  .weapon-cluster { max-width: 150px; }
  .weapon-cluster strong { max-width: 80px; }
  .hud-actions button { padding-inline: 6px; }
}

@media (max-width: 720px) {
  #app { padding: 0; }
  #gameShell {
    width: min(var(--viewport-width, 100vw), calc(var(--viewport-height, 100dvh) * 1.3888889));
    height: auto;
    max-width: 100vw;
    max-height: 100dvh;
    aspect-ratio: 1000 / 720;
    border-radius: clamp(0px, 2.5vw, 16px);
  }
  #hud {
    top: 4px;
    left: 4px;
    right: 4px;
    gap: 5px;
    padding: 4px;
    min-height: 0;
    align-content: center;
  }
  .hud-cluster { font-size: .72rem; }
  .weapon-cluster {
    order: 3;
    flex: 1 1 150px;
    max-width: none;
    min-height: 38px;
  }
  .weapon-cluster strong { max-width: clamp(70px, 22vw, 150px); }
  .hud-actions {
    order: 4;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) repeat(4, minmax(56px, .42fr));
    gap: 5px;
  }
  .hud-actions button {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    margin: 0;
    padding: 5px;
    font-size: clamp(.55rem, 1.9vw, .68rem);
  }
  .hud-actions .power-button {
    min-height: 48px;
    border-width: 2px;
    font-size: clamp(.62rem, 2.2vw, .78rem);
  }
  .power-button .keycap { width: 29px; height: 29px; font-size: .86rem; }
  .panel { max-height: 96%; }
  .shop-equipped.three-slot { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  #gameShell { border-radius: 0; }
  #hud { backdrop-filter: blur(7px); }
  .level-cluster, .count-cluster { flex: 1 1 auto; }
  .weapon-cluster { flex-basis: 100%; }
  .score-cluster { display: none; }
  .hud-actions {
    grid-template-columns: 1fr 1fr repeat(2, minmax(60px, .52fr));
  }
  .hud-actions #inventoryBtn,
  .hud-actions #muteBtn { display: none; }
  .hud-actions .power-button {
    min-height: 52px;
  }
  .shop-category-grid { grid-template-columns: 1fr; }
  .item-card.shop-card { min-height: 190px; }
  #rotateHint {
    display: block;
    left: 50%;
    right: auto;
    bottom: 4px;
    transform: translateX(-50%);
    width: max-content;
    max-width: 88%;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(0,0,0,.45);
    color: rgba(255,255,255,.58);
    text-align: center;
  }
}

@media (orientation: portrait) and (max-width: 820px) {
  #gameShell { align-self: center; }
  #rotateHint::before { content: "Best in landscape • "; color: #ffe66b; }
}

/* v0.3.2 mobile usability refinements */
@media (orientation: portrait) and (max-width: 820px) {
  #app { place-items: start center; justify-content: center; padding-top: max(env(safe-area-inset-top), 0px); }
  #gameShell { align-self: start; margin-top: 0; }
}

@media (max-height: 520px) and (max-width: 1100px) {
  #hud { top: 3px; left: 3px; right: 3px; gap: 4px; padding: 3px; }
  .hud-actions .power-button { min-height: 44px; min-width: 112px; border-width: 2px; }
  .power-button .keycap { width: 27px; height: 27px; font-size: .82rem; }
  .hud-actions button { min-height: 36px; }
}