* {
  box-sizing:border-box
}
:root {
  color-scheme:dark;
  --amber:#ffd16a;
  --muted:#8c9e9c;
  --edge:#34423f
}
body {
  margin:0;
  background:#0c1216;
  color:#e1e8db;
  font-family:Consolas,"Microsoft JhengHei",monospace;
  background-image:radial-gradient(ellipse at 30% 10%,#263731 0,transparent 58%);
  min-height:100vh
}
button {
  font:inherit;
  color:inherit;
  cursor:pointer;
  border:1px solid var(--edge);
  background:#202d2c;
  border-radius:3px;
  touch-action:none
}
button:hover {
  border-color:var(--amber)
}
button:focus-visible {
  outline:2px solid var(--amber);
  outline-offset:3px
}
button[hidden] {
  display:none
}
.arcade {
  max-width:1020px;
  margin:auto;
  padding:26px 36px
}
header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:26px
}
.brand {
  display:flex;
  align-items:center;
  gap:13px;
  font-size:22px;
  font-weight:bold;
  letter-spacing:2px
}
.brand img {
  width:40px;
  height:40px;
  image-rendering:pixelated
}
.brand small {
  display:block;
  color:var(--muted);
  font-size:13px;
  letter-spacing:5px;
  margin-top:5px
}
.top-actions {
  display:flex;
  gap:10px
}
.top-actions button {
  min-height:42px;
  padding:8px 13px
}
#pause {
  font-size:22px
}
.layout {
  display:grid;
  grid-template-columns:minmax(300px,540px) 1fr;
  gap:36px
}
.play {
  background:#121e21;
  border:1px solid #4b574a;
  box-shadow:0 20px 65px #0007
}
.hud {
  height:70px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  align-items:center;
  border-bottom:1px solid var(--edge);
  padding:0 16px;
  gap:8px
}
.hud div {
  font-size:12px;
  color:var(--muted)
}
.hud strong {
  display:block;
  color:var(--amber);
  font-size:19px;
  margin-top:6px;
  font-weight:600
}
#lives {
  font-size:16px
}
.battle {
  position:relative;
  width:100%;
  aspect-ratio:416/480;
  overflow:hidden;
  background:#15211f
}
canvas {
  width:100%;
  height:100%;
  display:block;
  image-rendering:pixelated
}
.status {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:13px 12px;
  font-size:12px;
  color:#abb8ab
}
.status b {
  color:#74dbc0;
  letter-spacing:2px
}
.signal {
  color:#73ae8d
}
.overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#101c26b8,#0a151cf2);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px;
  backdrop-filter:blur(2px)
}
.overlay[hidden] {
  display:none
}
#eyebrow {
  font-size:12px;
  letter-spacing:3px;
  color:var(--amber)
}
h1 {
  font-size:48px;
  letter-spacing:5px;
  color:#fff0be;
  text-shadow:4px 4px #724e27;
  margin:24px 0 10px
}
.overlay p {
  line-height:1.9;
  color:#aebcad;
  font-size:15px
}
.primary {
  background:var(--amber);
  color:#202820;
  min-width:230px;
  font-weight:bold;
  padding:17px 22px;
  font-size:18px;
  box-shadow:0 5px #86612f;
  margin-top:22px
}
.primary span {
  margin-left:24px
}
.secondary {
  padding:12px 20px;
  margin-top:16px
}
.overlay .hint {
  font-size:12px;
  margin-top:26px
}
#overlay-stats {
  color:#f7d481;
  line-height:1.8
}
#toast {
  position:absolute;
  top:18px;
  left:50%;
  transform:translate(-50%,-12px);
  background:#111e27e8;
  border:1px solid var(--amber);
  padding:10px 18px;
  color:var(--amber);
  opacity:0;
  pointer-events:none;
  white-space:nowrap;
  transition:.2s
}
#toast.show {
  opacity:1;
  transform:translate(-50%,0)
}
aside {
  padding-top:18px
}
.side-title {
  font-size:12px;
  letter-spacing:2px;
  color:#91a494;
  border-bottom:1px solid var(--edge);
  padding-bottom:14px;
  display:flex;
  justify-content:space-between
}
h2 {
  font-size:30px;
  margin:27px 0 16px
}
aside p {
  font-size:14px;
  line-height:1.9;
  color:#9ead9f
}
h3 {
  font-size:14px;
  color:#dddcc6;
  margin:26px 0 13px
}
.legend {
  display:flex;
  align-items:center;
  gap:14px;
  margin:20px 0
}
.chip {
  width:37px;
  height:37px;
  display:grid;
  place-items:center;
  border:2px solid
}
.amber {
  color:var(--amber);
  background:#54452b
}
.red {
  color:#fa847a;
  background:#4e2a2b
}
.legend b {
  font-size:14px
}
.legend small {
  display:block;
  font-size:12px;
  color:#92a496;
  margin-top:5px
}
.supplies {
  font-size:13px;
  line-height:2;
  color:#a7b9a8
}
.keys {
  font-size:13px;
  color:#a1b4a5;
  line-height:2.5;
  border-top:1px solid var(--edge);
  padding-top:16px;
  margin-top:24px
}
kbd {
  font:inherit;
  background:#26352e;
  padding:4px 7px;
  border-bottom:2px solid #4c5b4b;
  margin-right:10px
}
footer {
  font-size:11px;
  color:#687e71;
  margin-top:25px
}
.touch-controls {
  display:none
}