:root {
  color-scheme: dark;
  font-family: system-ui, sans-serif;
  background: #080b19;
  color: #eef3ff;
  --blue: #62eaff;
  --amber: #ffbd66;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100dvh; background: radial-gradient(ellipse at 50% 15%, #25254e, transparent 65%); }
body.in-match { background: linear-gradient(#080b1960, #080b1920 55%, #080b19a0), url("./pulse-arena.webp") center / cover no-repeat, #080b19; }
main { width: min(100%, 1120px); margin: auto; padding: 12px clamp(8px, 3vw, 26px); }
header, .header-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
header { border-bottom: 1px solid #394163; padding-bottom: 8px; }
.header-actions button { padding-inline: clamp(7px, 2vw, 13px); }
.brand { align-self: end; color: #91d8f3; font-size: 3.65rem; line-height: 52px; font-weight: 850; letter-spacing: -.05em; text-decoration: none; }
.brand span { color: #f4f8fc; }
button { min-height: 44px; padding: 8px 13px; border: 1px solid #62709e; border-radius: 9px; background: #171e39; color: inherit; font: inherit; font-weight: 650; cursor: pointer; touch-action: manipulation; }
button:disabled { opacity: .55; cursor: default; }
button:focus-visible, a:focus-visible { outline: 2px solid white; outline-offset: 3px; }
body:not(.in-match) {
  background: linear-gradient(#080b1980, #080b1970 55%, #080b19bc), url("./pulse-arena.webp") center / cover no-repeat #080b19;
}
body:not(.in-match) main {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
#entrance {
  width: min(100%, 620px);
  margin: auto;
  padding: clamp(18px, 5vw, 42px);
  border: 3px solid transparent;
  border-radius: 10px;
  background:
    linear-gradient(#323b4a, #121925 62%, #0d131e) padding-box,
    linear-gradient(145deg, #fff0ce, #c3a678 52%, #7b6449 85%, #dbc298) border-box;
  box-shadow: inset 0 0 0 1px #0a0e17, 0 0 0 1px #2a2018, 0 6px 18px #000a;
  color: #ecedf1;
  font-family: Arial, "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans CJK KR", sans-serif;
  text-align: center;
}
body:not(.in-match) header { margin-bottom: 18px; }
body:not(.in-match) #fullscreen { display: none; }
body:not(.in-match) #language {
  padding: 0 .85em;
  border-color: #f2e3bc #c3a678 #7b6449;
  border-radius: 6px;
  background: linear-gradient(#30384c, #192234);
  box-shadow: inset 0 1px 0 #ffedc24d, inset 0 -1px 0 #0b0c16, 0 2px 3px #0006;
  color: #ecedf1;
  font: 700 1rem Arial, "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans CJK KR", sans-serif;
  text-shadow: 0 1px 2px #000c;
}
body:not(.in-match) #language:hover { border-color: #fff1cc #dbc199 #9e805c; }
#entrance:lang(ko) { font-family: "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans CJK KR", sans-serif; }
.eyebrow { color: #f2b777; font-size: .76rem; letter-spacing: .23em; font-weight: 800; margin: 0 0 12px; }
#entrance h1 {
  margin: 0;
  padding-bottom: clamp(12px, 3vw, 20px);
  border-bottom: 1px solid #e9d7af2e;
  color: #fff7e6;
  font-size: clamp(26px, 8vw, 65px);
  font-weight: 800;
  line-height: 1.12;
  text-shadow: 0 3px 4px #000a;
}
#intro { font-weight: 700; margin: 14px 0 8px; }
#rules { color: #d0d8e4; font-size: .875rem; margin: 0 0 20px; line-height: 1.5; white-space: pre-line; }
#confirm-result { background: var(--blue); color: #061424; border-color: transparent; }
.difficulty-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(4px, 1.4vw, 8px);
  width: min(100%, 480px);
  margin-inline: auto;
}
.difficulty-options button {
  min-width: 0;
  min-height: 52px;
  padding: 4px 2px;
  border-color: #f2e3bc #c3a678 #7b6449;
  border-radius: 6px;
  background: linear-gradient(#3b4556, #1a2230);
  box-shadow: inset 0 1px 0 #ffedc24d, inset 0 -1px 0 #0b0c16, 0 2px 3px #0006;
  color: #fff5df;
  font-size: clamp(.72rem, 2.9vw, .94rem);
  font-weight: 700;
  text-shadow: 0 1px 2px #000c;
}
.difficulty-options button:enabled:hover { border-color: #fff1cc #dbc199 #9e805c; }
.difficulty-options .versus-option {
  display: grid;
  place-content: center;
  gap: 2px;
  border-color: #fff3cb #e5cd8b #b8995d;
  background: linear-gradient(#fff2be, #f7e2a6);
  color: #382812;
  opacity: 1;
  text-shadow: none;
  line-height: 1.15;
}
#versus-status { font-size: .78em; }
.hint { color: #bbc7d8; font-size: .81rem; margin: 12px 0 0; line-height: 1.4; }
.lobby-return {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #f2e3bc;
  font-size: .85rem;
  text-underline-offset: 3px;
}

#match {
  --court-ratio: .69;
  --item-width: clamp(98px, 27vw, 144px);
  --score-offset: 30px;
  --court-width: max(100px, calc((100dvh - 154px - var(--score-offset)) * var(--court-ratio)));
  margin: auto;
}
.match-bar { display: grid; grid-template-columns: 1fr clamp(300px, var(--court-width), 420px) 1fr; gap: 8px; margin-block: calc(6px + var(--score-offset)) 6px; }
.scoreboard {
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 2px 12px;
  border: 1px solid #6572a6;
  border-radius: 10px;
  background: #080b19e8;
}
.scoreboard span { overflow-wrap: anywhere; }
.scoreboard #amber { text-align: end; }
.scoreboard strong {
  font-size: clamp(26px, 5.6vw, 40px);
  font-weight: 850;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  /* Center the visible digits within the border. */
  transform: translateY(-.06em);
}
#leave { grid-column: 3; justify-self: end; white-space: nowrap; }
#blue, #blue-item { color: var(--blue); }
#blue-item { touch-action: none; }
#amber, #amber-item { color: var(--amber); }
.play-area { position: relative; }
.arena { position: relative; width: min(100%, var(--court-width)); aspect-ratio: var(--court-ratio); margin: auto; touch-action: none; }
canvas { display: block; width: 100%; height: 100%; border-radius: 14px; box-shadow: 0 10px 0 #121b27, 0 16px 25px #000c; transform-origin: center bottom; }
.actions {
  position: absolute;
  top: 36%;
  left: min(0px, calc((1120px - 100vw) / 2));
  transform: translateY(-50%);
  display: grid;
  gap: 20px;
  width: var(--item-width);
}
.actions button { padding: 4px; font-size: clamp(.68rem, 2.6vw, .85rem); line-height: 1.2; }
.item-label { display: block; margin-bottom: 2px; font-size: .85em; }
.item-value { white-space: nowrap; }
#blue-item .item-value::after { content: " E"; font-size: .72em; opacity: .75; }
#result {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding-bottom: clamp(0px, 100dvh - 350px, 80px);
  text-align: center;
  background: radial-gradient(ellipse, #080b19f5, #080b195c 58%, transparent 74%);
}
#winner { position: relative; margin: 0 0 30px; font-size: clamp(20px, 5vw, 34px); font-weight: 850; }
/* Keep the original line box so enlarging the heading does not move the button down. */
#winner::before { content: "\00a0"; }
.result-heading { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: .16em; font-size: 2em; line-height: 1; white-space: nowrap; }
#winner-icon { font-size: .82em; }
#reward-result { margin: -12px 0 14px; color: #e9e6ff; font-size: .86rem; font-weight: 650; }
#confirm-result { width: 9rem; margin-inline: auto; }
.immersive.in-match main { padding-top: 4px; }
.immersive.in-match header { justify-content: flex-end; }
.immersive.in-match header a, .immersive.in-match #language { display: none; }

@media (min-width: 700px), (hover: hover) and (pointer: fine) {
  #match { --court-ratio: 1.24; }
}
@media (hover: hover) and (pointer: fine) {
  .arena {
    /* The tapered far half leaves part of the item column clear already. */
    --item-clearance: max(0px, var(--item-width) + 12px - 18vw);
    --arena-width: min(var(--court-width), 100% - var(--item-clearance));
    width: var(--arena-width);
    margin-inline: max(var(--item-clearance), (100% - var(--arena-width)) / 2) auto;
  }
}
@media (max-width: 760px) {
  .actions { top: 30%; }
}
@media (max-width: 640px) {
  .match-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .scoreboard { grid-column: 1; }
  #leave { grid-column: 2; }
}
@media (max-width: 26rem) {
  .brand { font-size: 2.35rem; line-height: 1; }
  .header-actions button { padding-inline: .35rem; font-size: .85rem; }
  .scoreboard { padding-inline: 8px; gap: 4px; }
  #leave { padding-inline: 8px; }
  .actions { top: 0; transform: none; }
}
@media (max-width: 360px) {
  #match { --item-width: 94px; }
  /* Leave room above the heading for both item buttons. */
  #result { align-content: start; padding: 0; grid-template-rows: max(132px, 50% - 90px) auto auto auto; }
  #winner { grid-row: 2; }
  #reward-result { grid-row: 3; }
  #confirm-result { grid-row: 4; }
}
@media (pointer: coarse) {
  #blue-item .item-value::after { content: none; }
}

@media (orientation: landscape) and (pointer: coarse) {
  body.in-match main {
    width: 100%;
    height: 100dvh;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-rows: auto minmax(0, 1fr);
    align-items: center;
    gap: 4px 8px;
    padding: 4px max(8px, env(safe-area-inset-right)) 4px max(8px, env(safe-area-inset-left));
  }
  body.in-match header, body.in-match #match, body.in-match .match-bar { display: contents; }
  body.in-match .brand {
    grid-area: 1 / 1;
    align-self: center;
    font-size: clamp(20px, 5vw, 38px);
    line-height: 1;
  }
  body.in-match .header-actions { grid-area: 1 / 3; gap: 4px; }
  body.in-match .header-actions button, body.in-match #leave {
    padding: 4px 7px;
    font-size: clamp(.7rem, 2vw, .88rem);
  }
  body.in-match .scoreboard {
    grid-area: 1 / 2;
    width: min(100%, 310px);
    min-height: 44px;
    justify-self: center;
    gap: 4px;
    padding: 2px 7px;
    font-size: clamp(.7rem, 2vw, .95rem);
  }
  body.in-match .scoreboard strong { font-size: clamp(19px, 4vw, 34px); }
  body.in-match #leave { grid-area: 1 / 4; }
  body.in-match #match {
    --court-ratio: 1.24;
    --item-width: clamp(82px, 17vw, 144px);
  }
  body.in-match .play-area {
    grid-area: 2 / 1 / 3 / -1;
    align-self: stretch;
    container-type: size;
    overflow: clip;
  }
  body.in-match .arena {
    /* The existing perspective renders 78% of the arena height. */
    --arena-width: min(calc((100cqh - 10px) * var(--court-ratio) / .78), calc(100cqw - var(--item-width) - 10px));
    position: absolute;
    bottom: 10px;
    left: max(calc(var(--item-width) + 10px), calc((100cqw - var(--arena-width)) / 2));
    width: var(--arena-width);
    margin: 0;
  }
  body.in-match .actions {
    top: 50%;
    left: 0;
    gap: 8px;
    transform: translateY(-50%);
  }
  body.in-match #result {
    inset: 22% 0 0;
    padding: 0;
  }
}