:root {
  --ink:#f8e9c8;
  --muted:#c5ae87;
  --gold:#e8bb59;
  --gold-light:#ffe09a;
  --brown:#24180f;
  --brown-2:#352217;
  --red:#a94738;
  --edge:#786041;
  --display: 'Upheaval', monospace;
  --body: 'VT323', monospace;
}

@font-face {
  font-family: "Daydream";
  src: url("./fonts/Daydream.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Upheaval";
  src: url("./fonts/upheavtt.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing:border-box
}

html {
  min-height:100%;
  background:var(--brown)
}

body {
  margin:0;
  min-height:100vh;
  color:var(--ink);
  font-family:var(--body);
  background:radial-gradient(circle at 50% 15%,#4e2d1d 0,#24180f 48%,#160f0b 100%);
  overflow-x:hidden
}

button,input {
  font:inherit
}

button {
  cursor:pointer
}

[hidden] {
  display:none!important
}

.glow {
  position:fixed;
  width:45vw;
  height:45vw;
  border-radius:50%;
  filter:blur(85px);
  opacity:.12;
  pointer-events:none
}

.glow-a {
  background:#dc9327;
  top:-20vw;
  left:-15vw
}

.glow-b {
  background:#c04425;
  bottom:-25vw;
  right:-15vw
}

.shell {
  position:relative;
  max-width:1180px;
  margin:auto;
  min-height:100vh;
  padding:0 26px;
  display:flex;
  flex-direction:column
}

.header {
  height:76px;
  display:flex;
  align-items:center;
  gap:12px;
  border-bottom:1px solid #86664566
}

.crest {
  font-size:27px;
  color:var(--gold)
}

.brand {
  border:0;
  background:none;
  color:var(--gold-light);
  font:28px var(--display);
  padding:0
}

.header-tag {
  margin-left:auto;
  letter-spacing:.22em;
  font-size:10px;
  font-weight:900;
  color:#a98b60
}

.screen {
  display:none;
  animation:appear .3s ease
}

.screen.active {
  display:block
}

.shell main {
  flex:1
}

.hero {
  text-align:center;
  max-width:700px;
  margin:48px auto 70px
}

.eyebrow {
  margin:0 0 14px;
  color:var(--gold);
  font-size:11px;
  font-weight:900;
  letter-spacing:.28em
}

.ornament {
  font-size:21px;
  color:var(--gold);
  margin-bottom:10px
}

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

h1,h2,h3 {
  font-family:var(--display);
  font-weight:400
}

h1 {
  font-size:clamp(72px,12vw,128px);
  line-height:1;
  margin-bottom:18px;
  text-shadow:0 6px 0 #0d0907,0 0 44px #ca7b2170
}

h1 span {
  color:var(--gold)
}

h2 {
  font-size:clamp(34px,5vw,54px);
  margin-bottom:12px;
  color:var(--gold-light)
}

h3 {
  font-size:25px
}

.tagline {
  font-size:clamp(19px,3vw,26px);
  line-height:1.32;
  margin-bottom:14px
}

.tagline strong {
  color:var(--gold-light)
}

.intro,.muted {
  color:var(--muted)
}

.intro {
  max-width:465px;
  margin:0 auto 28px;
  line-height:1.55
}

.menu-grid {
  max-width:540px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}

.button {
  border:2px solid transparent;
  border-radius:8px;
  padding:14px 18px;
  min-height:54px;
  color:var(--ink);
  font-weight:900;
  letter-spacing:.03em;
  background:#5d3d29;
  box-shadow:0 5px 0 #120b08;
  transition:transform .16s,filter .16s,box-shadow .16s
}

.button:hover:not(:disabled),.exercise-card:hover {
  transform:translateY(-3px);
  filter:brightness(1.1);
  box-shadow:0 8px 0 #120b08
}

.button:active:not(:disabled) {
  transform:translateY(3px);
  box-shadow:0 2px 0 #120b08
}

.button:focus-visible,.exercise-card:focus-visible,.boss-card:focus-visible,.back:focus-visible,.brand:focus-visible {
  outline:3px solid white;
  outline-offset:3px
}

.button small {
  display:block;
  font-size:11px;
  font-weight:700;
  opacity:.8;
  letter-spacing:0
}

.button-icon {
  display:block;
  font-size:23px;
  margin-bottom:3px
}

.primary {
  background:linear-gradient(#f8cf75,#cf952f);
  color:#2b1a0d;
  border-color:#ffe2a1
}

.secondary {
  background:linear-gradient(#b85342,#822f2b);
  border-color:#d57962
}

.outline {
  background:#2c1b13;
  border-color:#8d6746
}

.disabled {
  opacity:.45;
  cursor:not-allowed;
  box-shadow:none
}

.hero-foot {
  color:#b99a67;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-size:11px;
  font-weight:900;
  margin:28px 0 0
}

.panel {
  max-width:860px;
  margin:48px auto 70px;
  padding:36px;
  background:linear-gradient(145deg,#41291b,#291a12);
  border:1px solid #9a7247;
  border-radius:18px;
  box-shadow:0 20px 50px #0d0909aa,inset 0 1px #d4a66555
}

.back {
  display:block;
  border:0;
  background:none;
  color:var(--gold);
  font-weight:900;
  padding:0;
  margin-bottom:36px
}

.exercise-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:26px
}

.exercise-card {
  min-height:180px;
  text-align:left;
  padding:20px;
  border:1px solid #a47747;
  background:linear-gradient(#563620,#312015);
  color:var(--ink);
  border-radius:12px;
  box-shadow:0 5px 0 #120b08;
  transition:transform .16s,filter .16s,box-shadow .16s
}

.exercise-card>* {
  display:block
}

.exercise-icon {
  font-size:38px;
  color:var(--gold);
  margin-bottom:15px
}

.exercise-card strong {
  font:24px var(--display);
  margin-bottom:10px
}

.exercise-card>span:last-child {
  font-size:13px;
  color:var(--muted)
}

em {
  display:inline-block;
  font:800 9px var(--body);
  font-style:normal;
  text-transform:uppercase;
  letter-spacing:.04em;
  border:1px solid var(--gold);
  color:var(--gold);
  padding:3px 5px;
  border-radius:4px;
  vertical-align:middle
}

.game-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin:24px 0 16px
}

.game-header h2 {
  margin:0
}

.timer {
  width:92px;
  height:92px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:2px solid var(--gold);
  background:#3c2618;
  border-radius:50%;
  box-shadow:0 0 24px #e8bb5940
}

.timer span {
  font-size:9px;
  font-weight:900;
  letter-spacing:.09em
}

.timer strong {
  font:44px var(--display);
  line-height:1;
  color:var(--gold-light)
}

.small {
  font-size:12px;
  min-height:42px;
  padding:8px 15px
}

.hud {
  display:grid;
  grid-template-columns:1fr 3fr 1fr;
  align-items:center;
  gap:18px;
  padding:17px 22px;
  background:#392418;
  border:1px solid #846343;
  border-radius:12px;
  margin-bottom:12px
}

.hud-number span,.target-label span {
  display:block;
  color:var(--muted);
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em
}

.hud-number strong {
  font:42px var(--display);
  color:var(--gold-light)
}

.hud-number small {
  font:15px var(--body);
  color:var(--muted)
}

.combo {
  text-align:right
}

.target-label {
  display:flex;
  justify-content:space-between;
  margin-bottom:8px
}

.target-label strong {
  font-size:12px;
  color:var(--gold)
}

.progress {
  height:18px;
  border-radius:20px;
  background:#1c110d;
  border:1px solid #8a6b49;
  overflow:hidden
}

.progress div {
  height:100%;
  width:0;
  background:linear-gradient(90deg,#b9543a,#f4c458);
  border-radius:20px;
  transition:width .25s
}

.frenzy-banner {
  background:#f2c65f;
  color:#2e170c;
  text-align:center;
  font-weight:900;
  letter-spacing:.12em;
  padding:6px;
  border-radius:6px;
  margin-bottom:10px;
  animation:pulse .5s infinite alternate
}

.stage {
  position:relative;
  aspect-ratio:16/9;
  max-width:100%;
  max-height:min(54vh,590px);
  min-height:280px;
  overflow:hidden;
  background:#130f0d;
  border:3px solid #a77c45;
  border-radius:14px;
  box-shadow:0 15px 40px #0008
}

.stage video,.stage canvas {
  position:absolute;
  width:100%;
  height:100%;
  object-fit:contain;
  inset:0;
  transform:scaleX(-1)
}

.stage canvas {
  z-index:2
}

.camera-placeholder {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:var(--muted);
  font-weight:800;
  background:radial-gradient(#3c2d22,#15100c)
}

.player-label {
  position:absolute;
  z-index:3;
  top:18%;
  left:25%;
  background:#e6b64c;
  color:#25160d;
  padding:5px 11px;
  border-radius:5px;
  font-weight:900;
  box-shadow:0 3px 0 #6e4217
}

.player-label#p2-label {
  left:70%;
  background:#cb6a4b
}

.waiting {
  position:absolute;
  z-index:4;
  top:16px;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  background:#21140bdf;
  border:1px solid var(--gold);
  color:var(--gold-light);
  padding:9px 15px;
  border-radius:8px;
  font-weight:900
}

.debug {
  position:absolute;
  z-index:5;
  left:10px;
  bottom:10px;
  background:#0e0c0be6;
  border:1px solid #9d865c;
  padding:8px 10px;
  color:#e9e4d3;
  font:12px/1.45 monospace;
  white-space:pre-line
}

.players {
  display:flex;
  align-items:center;
  justify-content:space-around;
  gap:10px;
  padding:12px 15px;
  margin-top:10px;
  border:1px solid #775b3c;
  border-radius:10px;
  background:#342116
}

.player-score {
  display:flex;
  align-items:baseline;
  gap:10px
}

.player-badge {
  border-radius:4px;
  background:var(--gold);
  padding:3px 7px;
  color:#24170f;
  font-weight:900
}

.player-score strong {
  font:36px var(--display);
  color:var(--gold-light)
}

.player-score small {
  font-size:10px;
  color:var(--muted);
  font-weight:900
}

.shared-mark {
  color:var(--gold);
  font:16px var(--display)
}

.game-note {
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:var(--muted);
  font-size:12px;
  margin:10px 2px 26px
}

kbd {
  background:#765536;
  border:1px solid #bb925d;
  border-radius:4px;
  padding:1px 5px;
  color:var(--ink);
  font:800 12px var(--body)
}

.countdown {
  position:fixed;
  z-index:30;
  inset:0;
  display:grid;
  place-items:center;
  background:#120c08a9;
  color:#ffe09a;
  text-shadow:0 8px 0 #1c0f08;
  font:clamp(110px,20vw,230px) var(--display);
  pointer-events:none
}

.game-error {
  position:absolute;
  z-index:10;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(90%,450px);
  background:#382318;
  border:2px solid #e8bb59;
  border-radius:12px;
  padding:22px;
  text-align:center;
  box-shadow:0 15px 40px #000c
}

.game-error h3 {
  margin-bottom:8px;
  color:var(--gold-light)
}

.game-error p {
  color:var(--muted);
  line-height:1.4
}

.error-actions,.results-actions {
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap
}

.results-panel {
  text-align:center;
  max-width:690px
}

.result-crown {
  font-size:62px;
  color:var(--gold);
  line-height:1
}

.rating {
  display:inline-block;
  margin:10px 0 25px;
  padding:7px 22px;
  border:2px solid var(--gold);
  color:var(--gold-light);
  font:25px var(--display);
  letter-spacing:.1em;
  border-radius:6px
}

.rating.bronze {
  color:#d2a07c;
  border-color:#b3755f
}

.rating.silver {
  color:#d6dce1;
  border-color:#a5b0b9
}

.results-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-bottom:28px
}

.results-grid>div {
  background:#28190f;
  padding:16px 8px;
  border:1px solid #786041;
  border-radius:8px
}

.results-grid span {
  display:block;
  color:var(--muted);
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em
}

.results-grid strong {
  display:block;
  font:32px var(--display);
  color:var(--gold-light);
  margin-top:5px
}

.rules {
  padding-left:24px;
  line-height:1.65
}

.rules li {
  margin:0 0 14px
}

.rules strong {
  color:var(--gold-light)
}

.note {
  background:#27180f;
  border-left:3px solid var(--gold);
  padding:14px;
  color:var(--muted)
}

.setting {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #85664666;
  padding:18px 0
}

.setting strong,.setting small {
  display:block
}

.setting small,.slider-setting small {
  color:var(--muted);
  font-size:12px
}

.setting input {
  width:22px;
  height:22px;
  accent-color:var(--gold)
}

.slider-setting {
  padding:22px 0
}

.slider-setting label {
  display:flex;
  justify-content:space-between
}

.slider-setting label span {
  color:var(--gold)
}

.slider-setting input {
  width:100%;
  accent-color:var(--gold);
  margin:14px 0
}

.swap {
  margin:5px 0 10px
}

.footer {
  text-align:center;
  color:#9b7a51;
  font-size:10px;
  font-weight:900;
  letter-spacing:.16em;
  padding:26px 0
}

.footer span {
  color:var(--gold);
  margin:0 10px
}

.toast {
  position:fixed;
  z-index:50;
  left:50%;
  bottom:20px;
  transform:translateX(-50%);
  padding:12px 18px;
  background:#eac366;
  color:#26170f;
  border-radius:8px;
  box-shadow:0 6px 20px #000a;
  font-weight:900
}

.floating {
  position:absolute;
  z-index:5;
  pointer-events:none;
  font:900 21px var(--body);
  color:var(--gold-light);
  text-shadow:0 2px 4px #000;
  animation:float 1.2s ease-out forwards;
  white-space:nowrap
}

.floating.bad {
  color:#ff8a73
}

.floating.sync {
  font:36px var(--display);
  color:#ffe27d
}

.confetti {
  position:fixed;
  z-index:40;
  width:8px;
  height:14px;
  pointer-events:none;
  animation:confetti 1.2s ease-out forwards
}

.bat {
  position:fixed;
  z-index:39;
  left:-40px;
  top:30%;
  font-size:33px;
  pointer-events:none;
  animation:bat 1.3s linear forwards
}

.shake {
  animation:shake .35s linear
}

.flash {
  animation:flash .55s ease
}

.toast,.floating,.confetti,.bat {
  user-select:none
}

#effects {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:35
}

@keyframes appear {
  from {
    opacity:0;
    transform:translateY(8px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}

@keyframes float {
  to {
    opacity:0;
    transform:translateY(-65px)
  }
}

@keyframes confetti {
  to {
    opacity:0;
    transform:translate(var(--dx),var(--dy)) rotate(720deg)
  }
}

@keyframes bat {
  to {
    left:105vw;
    top:12%
  }
}

@keyframes shake {
  25% {
    transform:translateX(-5px)
  }
  50% {
    transform:translateX(5px)
  }
  75% {
    transform:translateX(-3px)
  }
}

@keyframes flash {
  50% {
    box-shadow:0 0 75px #ffd45f,0 0 30px #ffd45f inset
  }
}

@keyframes pulse {
  to {
    filter:brightness(1.3)
  }
}

@media(max-width:700px) {
  .shell {
    padding:0 14px
  }
  .header {
    height:62px
  }
  .header-tag {
    font-size:8px;
    letter-spacing:.08em
  }
  .hero {
    margin:38px auto
  }
  .menu-grid {
    gap:9px
  }
  .button {
    padding:12px 8px
  }
  .panel {
    margin:28px auto;
    padding:23px 16px
  }
  .exercise-grid {
    grid-template-columns:1fr
  }
  .exercise-card {
    min-height:95px;
    display:flex;
    align-items:center;
    gap:12px
  }
  .exercise-icon {
    margin:0;
    font-size:30px
  }
  .exercise-card strong {
    font-size:20px;
    margin:0
  }
  .exercise-card>span:last-child {
    display:none
  }
  .game-header {
    margin:18px 0
  }
  .game-header h2 {
    font-size:30px
  }
  .timer {
    width:68px;
    height:68px
  }
  .timer strong {
    font-size:30px
  }
  .timer span {
    font-size:7px
  }
  .hud {
    gap:8px;
    padding:10px;
    grid-template-columns:1fr 2fr 1fr
  }
  .hud-number strong {
    font-size:26px
  }
  .hud-number span,.target-label span {
    font-size:8px
  }
  .combo small {
    display:block;
    font-size:11px
  }
  .stage {
    min-height:230px
  }
  .players {
    padding:7px
  }
  .player-score strong {
    font-size:28px
  }
  .shared-mark {
    font-size:11px
  }
  .game-note {
    flex-direction:column
  }
  .results-grid {
    grid-template-columns:repeat(2,1fr)
  }
}

@media(max-width:420px) {
  .header-tag {
    display:none
  }
  .menu-grid .button {
    font-size:13px
  }
  .stage {
    min-height:205px
  }
  .player-label {
    font-size:11px
  }
  .shared-mark {
    display:none
  }
}

.hotkey-link {
  border:0;
  background:none;
  color:var(--gold);
  text-decoration:underline;
  font-size:12px;
  font-weight:900;
  padding:0
}


.panel.wide {
  max-width:1040px
}

.boss-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:26px
}

.boss-card {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  text-align:left;
  padding:18px;
  border:1px solid #a47747;
  background:linear-gradient(#563620,#312015);
  color:var(--ink);
  border-radius:12px;
  box-shadow:0 5px 0 #120b08;
  transition:transform .16s,filter .16s,box-shadow .16s
}

.boss-card:hover:not(:disabled) {
  transform:translateY(-3px);
  filter:brightness(1.1);
  box-shadow:0 8px 0 #120b08
}

.boss-card:disabled {
  cursor:not-allowed;
  filter:grayscale(.9) brightness(.6)
}

.boss-card.cleared {
  border-color:var(--gold)
}

.boss-card .sprite {
  width:96px;
  height:96px;
  align-self:center;
  margin-bottom:4px
}

.boss-chapter {
  color:var(--gold);
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em
}

.boss-card strong {
  font:22px var(--display);
  color:var(--gold-light)
}

.boss-story {
  font-size:13px;
  color:var(--muted);
  line-height:1.4;
  flex:1
}

.chips {
  display:flex;
  flex-wrap:wrap;
  gap:4px
}

.sprite canvas,.sprite img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  image-rendering:pixelated
}

.arena {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:20px;
  padding:14px 22px;
  background:linear-gradient(90deg,#2b1c2c,#392418 45%);
  border:1px solid #846343;
  border-radius:12px;
  margin-bottom:12px
}

.boss-sprite {
  width:88px;
  height:88px;
  animation:bob 1.6s ease-in-out infinite alternate;
  filter:drop-shadow(0 6px 0 #0d0907)
}

.boss-sprite.winding {
  animation:bob .25s ease-in-out infinite alternate;
  filter:drop-shadow(0 0 14px #ff5a3c)
}

.boss-sprite.hit {
  animation:hit .3s linear
}

.boss-taunt {
  margin:0 0 8px;
  font:17px var(--display);
  color:var(--muted)
}

.boss-hp div {
  background:linear-gradient(90deg,#7e2219,#d4563b)
}

.phase-pips {
  display:flex;
  gap:6px;
  margin-top:8px
}

.phase-pips span {
  width:26px;
  height:6px;
  border-radius:3px;
  background:#1c110d;
  border:1px solid #8a6b49
}

.phase-pips span.current {
  background:var(--gold)
}

.phase-pips span.done {
  background:#6b5235
}

.arena-side {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px
}

.hearts {
  font-size:28px;
  color:#e0533f;
  letter-spacing:.08em;
  line-height:1
}

.duel-hud {
  display:grid;
  grid-template-columns:1fr 3fr 1fr;
  align-items:center;
  gap:18px;
  padding:17px 22px;
  background:#392418;
  border:1px solid #846343;
  border-radius:12px;
  margin-bottom:12px
}

.rope {
  position:relative;
  height:18px;
  border-radius:20px;
  border:1px solid #8a6b49;
  background:linear-gradient(90deg,#e6b64c 0 50%,#cb6a4b 50% 100%)
}

.rope-knot {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:26px;
  color:#fff1c4;
  text-shadow:0 2px 0 #1c0f08;
  transition:left .25s
}

.alert-banner {
  text-align:center;
  font-weight:900;
  letter-spacing:.1em;
  padding:6px;
  border-radius:6px;
  margin-bottom:10px
}

.alert-banner.danger {
  background:#a94738;
  color:#fff1c4;
  animation:pulse .3s infinite alternate
}

.alert-banner.phase {
  background:#4b2a63;
  color:#ffe09a;
  border:1px solid var(--gold)
}

.alert-banner.good {
  background:#e8bb59;
  color:#2e170c
}

.settings-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:5px 0 10px
}

.field {
  display:block;
  margin:18px 0
}

.field span {
  display:block;
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:6px
}

.field input {
  width:100%;
  padding:12px 14px;
  border-radius:8px;
  border:1px solid #8d6746;
  background:#1c110d;
  color:var(--ink);
  font-weight:800
}

.field input:focus {
  outline:2px solid var(--gold);
  outline-offset:1px
}

#join-code {
  font:26px var(--display);
  letter-spacing:.3em;
  text-transform:uppercase
}

.remote-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:22px
}

.remote-card {
  display:flex;
  flex-direction:column;
  padding:20px;
  border:1px solid #a47747;
  background:linear-gradient(#563620,#312015);
  border-radius:12px
}

.remote-card h3 {
  margin-bottom:6px;
  color:var(--gold-light)
}

.remote-card .button {
  margin-top:auto
}

.remote-card .field {
  margin:0 0 14px
}

.lobby {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:22px;
  align-items:center;
  padding:18px 22px;
  background:#392418;
  border:1px solid #846343;
  border-radius:12px;
  margin-bottom:12px
}

.lobby-code {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding-right:22px;
  border-right:1px solid #846343
}

.lobby-code span {
  color:var(--muted);
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em
}

.lobby-code strong {
  font:44px var(--display);
  letter-spacing:.14em;
  color:var(--gold-light);
  line-height:1
}

.boss-picker {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin:4px 0 14px
}

.pick {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px;
  border:1px solid #8d6746;
  border-radius:8px;
  background:#2c1b13;
  color:var(--ink);
  font-size:12px;
  font-weight:800;
  text-align:left
}

.pick .sprite {
  flex:none;
  width:32px;
  height:32px
}

.pick.selected {
  border-color:var(--gold);
  background:#5d3d29;
  box-shadow:0 0 0 1px var(--gold)
}

.pick:disabled {
  cursor:default
}

.pick:disabled:not(.selected) {
  opacity:.55
}

.lobby-actions {
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap
}

.lobby-actions p {
  margin:0
}

.stage-grid {
  display:grid;
  gap:10px
}

.stage-grid.multi {
  grid-template-columns:repeat(2,1fr)
}

.stage-grid.many {
  grid-template-columns:repeat(3,1fr)
}

.stage-grid.multi .stage {
  min-height:0;
  border-width:2px
}

.stage.remote video {
  transform:none;
  object-fit:cover
}

.tile-name {
  position:absolute;
  z-index:4;
  left:8px;
  bottom:8px;
  max-width:calc(100% - 16px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  background:#21140bdf;
  border:1px solid #a77c45;
  color:var(--gold-light);
  padding:4px 9px;
  border-radius:6px;
  font-size:12px;
  font-weight:900
}

.stage-grid.multi .debug {
  bottom:40px
}

@keyframes bob {
  to {
    transform:translateY(-5px)
  }
}

@keyframes hit {
  30% {
    transform:translateX(-6px);
    filter:brightness(3)
  }
  60% {
    transform:translateX(6px)
  }
}

@media(max-width:900px) {
  .boss-grid,.exercise-grid,.boss-picker {
    grid-template-columns:repeat(2,1fr)
  }
}

@media(max-width:700px) {
  .boss-grid {
    grid-template-columns:1fr
  }
  .boss-card {
    display:grid;
    grid-template-columns:64px 1fr;
    column-gap:14px;
    row-gap:4px;
    align-items:center
  }
  .boss-card .sprite {
    grid-row:span 4;
    width:64px;
    height:64px;
    margin:0
  }
  .exercise-grid {
    grid-template-columns:1fr
  }
  .arena {
    grid-template-columns:auto 1fr;
    gap:10px 14px;
    padding:10px
  }
  .boss-sprite {
    width:60px;
    height:60px
  }
  .boss-taunt {
    font-size:14px
  }
  .arena-side {
    grid-column:1 / -1;
    flex-direction:row;
    justify-content:space-between;
    align-items:center
  }
  .hearts {
    font-size:22px
  }
  .duel-hud {
    gap:8px;
    padding:10px;
    grid-template-columns:1fr 2fr 1fr
  }
  .remote-grid,.lobby {
    grid-template-columns:1fr
  }
  .lobby {
    padding:12px
  }
  .lobby-code {
    flex-direction:row;
    justify-content:space-between;
    flex-wrap:wrap;
    padding:0 0 12px;
    border-right:0;
    border-bottom:1px solid #846343
  }
  .lobby-code strong {
    font-size:32px
  }
  .boss-picker {
    grid-template-columns:1fr 1fr
  }
  .stage-grid.many {
    grid-template-columns:repeat(2,1fr)
  }
  .floating {
    font-size:15px
  }
}