arena/src/styles/mobile.css

@media (max-width: 960px) {
  body {
    overflow: hidden;
  }

  #app {
    --arena-gap: 0px;
    --mobile-game-size: min(100vw, calc(100svh - var(--score-band-height)));
    --mobile-kill-log-top: calc(var(--score-band-height) + var(--mobile-game-size) + 10px);
    --mobile-options-button-width: 54px;
    --mobile-options-gap: 8px;
    --mobile-team-card-width: clamp(56px, calc((100vw - 120px) / 4), 72px);
    --mobile-visitor-space: calc(104px + env(safe-area-inset-bottom));
    --score-band-height: 132px;
    --score-panel-left: 10px;
    --score-panel-width: calc(100vw - 20px);
    --score-rail-width: 0px;
  }

  #app.match-live .arena-shell {
    place-items: start center;
  }

  #app.match-live #game {
    width: var(--mobile-game-size);
    height: var(--mobile-game-size);
    margin-top: var(--score-band-height);
    margin-left: 0;
  }

  .intro-stage {
    padding: 20px;
  }

  .arena-logo {
    font-size: clamp(3.8rem, 22vw, 7rem);
  }

  .fighter-entry {
    width: 100vw;
    padding: 22px;
  }

  #app.match-live .fighter-entry {
    top: calc(10px + env(safe-area-inset-top));
    right: 10px;
    left: 10px;
    width: auto;
    max-height: calc(100svh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    gap: 10px;
    padding: 12px;
  }

  #app.match-live.drawer-collapsed .fighter-entry {
    top: calc(22px + env(safe-area-inset-top));
    right: 10px;
    left: auto;
    width: auto;
  }

  #app.match-live .fighter-entry h2 {
    font-size: clamp(1.45rem, 7vw, 1.8rem);
  }

  #app.match-live .fighter-entry textarea {
    height: 112px;
    min-height: 112px;
    resize: none;
  }

  #app.match-live .fighter-entry fieldset {
    gap: 7px;
    padding: 9px;
  }

  #app.match-live .fighter-entry form {
    gap: 10px;
  }

  #app.match-live .entry-copy {
    gap: 4px;
  }

  #app.match-live .eyebrow {
    font-size: 0.68rem;
  }

  #app.match-live label,
  #app.match-live .spawn-placement-label {
    font-size: 0.82rem;
  }

  #app.match-live input:not([type="range"]):not([type="radio"]),
  #app.match-live textarea {
    min-height: 40px;
    padding-inline: 10px;
  }

  #app.match-live textarea {
    padding-block: 9px;
  }

  #app.match-live .team-size-number {
    width: 64px;
    min-width: 64px;
  }

  #app.match-live .spawn-placement-option span {
    min-height: 36px;
    padding: 6px;
    font-size: 0.76rem;
  }

  #app.match-live .match-actions {
    gap: 8px;
  }

  #app.match-live .match-actions button {
    min-height: 44px;
  }

  #app.match-live .drawer-toggle {
    min-width: 116px;
  }

  #app.match-live.drawer-collapsed .drawer-toggle {
    width: var(--mobile-options-button-width);
    min-width: var(--mobile-options-button-width);
    padding-inline: 6px;
    font-size: 0;
  }

  #app.match-live.drawer-collapsed .drawer-toggle::before {
    content: "옵션";
    font-size: 0.78rem;
    line-height: 1;
  }

  .battle-preview {
    opacity: 0.62;
  }

  .preview-knight {
    left: -8vw;
    top: 52vh;
  }

  .preview-orc {
    right: -9vw;
    top: 49vh;
  }

  .preview-wizard {
    left: 48vw;
    top: 21vh;
  }

  .scoreboard {
    align-items: flex-start;
    top: 10px;
    left: var(--score-panel-left);
    width: var(--score-panel-width);
    max-height: calc(var(--score-band-height) - 12px);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 9px min(148px, 38vw) 9px 9px;
    scrollbar-color: rgb(238 185 73 / 0.38) transparent;
    scrollbar-width: thin;
    touch-action: pan-x;
  }

  #app.match-live.drawer-collapsed .scoreboard {
    width: calc(
      100vw - 20px - var(--mobile-options-button-width) - var(--mobile-options-gap)
    );
    padding-right: 9px;
  }

  .score-side {
    display: grid;
    grid-template-columns: none;
    grid-auto-columns: var(--mobile-team-card-width);
    grid-auto-flow: column;
    grid-template-rows: repeat(2, 48px);
    gap: 5px 5px;
  }

  .scoreboard::-webkit-scrollbar {
    height: 4px;
  }

  .scoreboard::-webkit-scrollbar-track {
    background: transparent;
  }

  .scoreboard::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgb(238 185 73 / 0.38);
  }

  .team-score {
    width: auto;
    min-height: 48px;
    height: 48px;
    gap: 3px;
    padding: 5px 6px;
    font-size: 0.66rem;
    grid-template-rows: 1fr 1px auto;
    align-content: center;
  }

  .team-score-count {
    font-size: 0.74rem;
  }

  .team-score.is-focused {
    box-shadow: inset 0 0 0 2px rgb(255 244 209 / 0.92);
  }

  .battle-notice {
    top: calc(var(--score-band-height) + 8px);
    right: 24px;
    left: 24px;
    width: auto;
    padding-inline: 12px;
    font-size: 0.76rem;
    transform: translateY(-10px);
  }

  #app.match-live .battle-notice.is-visible {
    transform: translateY(0);
  }

  .kill-log {
    top: var(--mobile-kill-log-top);
    bottom: auto;
    left: 10px;
    width: calc(100vw - 20px);
    max-height: calc(100svh - var(--mobile-kill-log-top) - var(--mobile-visitor-space));
    padding: 8px;
  }

  #app.match-live .victory-celebration {
    padding:
      var(--score-band-height)
      14px
      min(30svh, 230px);
  }

  .victory-banner {
    width: min(calc(100vw - 48px), 520px);
    min-height: 92px;
    padding: 1rem 1.1rem;
    font-size: clamp(1.35rem, 7vw, 2rem);
  }

  .match-status {
    bottom: 10px;
    width: calc(100vw - 20px);
  }

  .arena-meta {
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 10;
    gap: 8px;
    opacity: 1;
    pointer-events: auto;
  }

  .visitor-count {
    font-size: 0.68rem;
  }

  .about-button {
    min-width: 68px;
    min-height: 26px;
    font-size: 0.68rem;
  }

  .about-backdrop {
    align-items: end;
    padding: 12px;
  }

  .about-dialog {
    width: 100%;
    max-height: calc(100svh - 24px);
  }

  .about-header {
    padding: 18px 18px 12px;
  }

  .about-tabs {
    padding: 0 18px 12px;
  }

  .about-panel {
    padding: 16px 18px 22px;
  }

  .about-field-row {
    grid-template-columns: 78px minmax(0, 1fr);
    min-height: 48px;
    gap: 10px;
  }
}