:root {
  color-scheme: dark;
  font-family: system-ui, "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  color: #f5f8ff;
  background: #1e264c;
  --accent: #85ddff;
}
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 1240px; margin: auto; padding: 12px clamp(8px, 3vw, 32px) 16px; }
header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; margin-bottom: 12px; }
.brand-logo { display: block; width: clamp(125px, 24vw, 176px); height: auto; }
h1 { margin: 0; font-size: clamp(1.1rem, 3.5vw, 1.85rem); font-weight: 850; line-height: 1.1; }
h1 span { color: var(--accent); font-size: .8em; }
.arena { overflow: hidden; border: 1px solid #57668f; border-radius: 16px; background: #263054; }
.stage {
  position: relative;
  height: clamp(320px, calc(100dvh - 125px), 740px);
  background:
    radial-gradient(circle at 17px 29px, #f4f7ff 1px, transparent 1.8px) 0 0 / 113px 83px,
    radial-gradient(circle at 48px 15px, #9fb7ec 1px, transparent 1.5px) 0 0 / 137px 107px,
    radial-gradient(circle at 25px 57px, #cad8ff 0.6px, transparent 1.3px) 0 0 / 73px 97px,
    #1e264c;
}
canvas { display: block; width: 100%; height: 100%; }
.badge { position: absolute; top: 12px; left: 12px; background: #273459; border: 1px solid #536998; border-radius: 999px; color: #eef5ff; padding: 5px 9px; font-size: .74rem; font-weight: 800; pointer-events: none; }
#load-status, .noscript { position: absolute; top: 44%; left: 5%; right: 5%; text-align: center; font-weight: 750; }
fieldset { border: 0; margin: 0; min-width: 0; }
#controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 8px; }
.hint { color: #d6e0f6; font-size: .77rem; }
kbd { padding: 2px 4px; border: 1px solid #7586ad; border-radius: 4px; }
.actions { display: flex; gap: 5px; }
.color-options { display: flex; gap: 5px; }
.color-options button[data-color="ff6816"] { --swatch: #ff6816; }
.color-options button[data-color="82d8ff"] { --swatch: #82d8ff; }
.color-options button[data-color="ffd93d"] { --swatch: #ffd93d; }
.color-options button::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 50%; background: var(--swatch); }
.color-options button[aria-pressed="true"] { outline: 2px solid var(--swatch); outline-offset: -2px; }
.head-panel:not([hidden]) { display: grid; flex-basis: 100%; grid-template-columns: 7rem minmax(0, 1fr); align-items: center; gap: 2px 12px; padding: 8px; border-top: 1px solid #57668f; }
.head-panel label { display: flex; justify-content: space-between; gap: 4px; font-size: .82rem; }
.head-panel output { color: var(--accent); font-variant-numeric: tabular-nums; }
.head-panel input { width: 100%; min-width: 0; height: 34px; margin: 0; accent-color: var(--accent); }
button { min-height: 42px; border: 1px solid #7182ab; border-radius: 8px; padding: 0 9px; background: #29365d; color: #f5f8ff; font: inherit; font-size: .82rem; font-weight: 780; cursor: pointer; }
button[aria-pressed="true"], button[aria-expanded="true"], button:active { background: var(--accent); color: #182441; border-color: var(--accent); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:disabled { opacity: .55; cursor: default; }
#move-pad { position: absolute; bottom: 10px; left: 10px; display: grid; grid-template-columns: repeat(3, 44px); gap: 3px; padding: 0; touch-action: none; }
#move-pad button { min-height: 44px; opacity: .87; user-select: none; touch-action: none; }
#move-pad button:first-child { grid-column: 2; }
#move-pad button:nth-child(2) { grid-column: 1; }
@media (max-width: 600px) {
  .arena { position: relative; }
  .hint { display: none; }
  .actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; }
  .actions button { padding-inline: 2px; }
  .head-panel:not([hidden]) {
    position: absolute;
    z-index: 2;
    inset: auto 8px 108px;
    padding: 6px 10px;
    border: 1px solid #7182ab;
    border-radius: 10px;
    background: #263054;
  }
}