/* 竞技场 page: full-height game area below the site topbar */
html, body { height: 100%; }
body[data-page="arena"] { display: flex; flex-direction: column; overflow: hidden; }
body[data-page="arena"] .notice-bar { flex: 0 0 auto; }
.arena-wrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.arena-game { position:relative; container-type:size; flex: 1; min-height: 0; background: #04241f; touch-action: none; }
.arena-game canvas { display: block; image-rendering: pixelated; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* GBA-style dialog box */
.arena-dialog {
  position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%);
  width: min(640px, calc(100% - 24px)); min-height: 84px; box-sizing: border-box;
  padding: 14px 40px 14px 20px;
  background: #f8f8f8; color: #303030;
  border: 4px solid #383848; border-radius: 10px;
  box-shadow: inset 0 0 0 3px #a8b8d8, 0 4px 0 rgba(0,0,0,.35);
  font: 600 18px/1.6 "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  cursor: pointer; z-index: 5;
}
.arena-dialog[hidden] { display: none; }
.arena-dialog p { margin: 0; white-space: pre-wrap; }
.arena-next { position: absolute; right: 14px; bottom: 8px; color: #e05050; font-size: 14px; animation: arena-blink 0.8s steps(2) infinite; }
@keyframes arena-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .arena-next { animation: none; } }

.arena-hint { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 8px 12px; text-align: center; font-size: 13px; color: var(--text-dim, #8fb5ac); background: rgba(4,36,31,.75); pointer-events: none; }

/* Touch: controls get their own strip under the game instead of covering the room */
.arena-pad { display: none; }
@media (pointer: coarse) {
  .arena-hint { position: static; order: 2; }
  .arena-pad {
    display: grid; order: 3; flex: none; padding: 8px 16px 14px; background: #04241f;
    grid-template-columns: 52px 52px 52px 1fr 64px; grid-template-rows: 48px 48px 48px; gap: 4px;
  }
  .arena-pad button {
    border: 2px solid rgba(255,255,255,.5); border-radius: 10px;
    background: rgba(255,255,255,.08); color: #fff; font-size: 18px; touch-action: none; user-select: none; -webkit-user-select: none;
  }
  .arena-pad .pu { grid-column: 2; grid-row: 1; }
  .arena-pad .pl { grid-column: 1; grid-row: 2; }
  .arena-pad .pr { grid-column: 3; grid-row: 2; }
  .arena-pad .pd { grid-column: 2; grid-row: 3; }
  .arena-pad .pa { grid-column: 5; grid-row: 2; height: 64px; align-self: center; border-radius: 50%; background: rgba(224,80,80,.55); font-weight: 700; }
  .arena-dialog { bottom: 220px; font-size: 16px; }
}

/* Auto-play lines have no "next" arrow */
.arena-dialog.no-next .arena-next { display: none; }

/* Pick-a-Pokémon menu inside the dialog box */
.arena-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin-top: 8px; }
.arena-menu[hidden] { display: none; }
.arena-menu button {
  position: relative; text-align: left; padding: 4px 8px 4px 22px; border: 0; border-radius: 6px;
  background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.arena-menu button:hover, .arena-menu button.sel { background: #e8eef8; }
.arena-menu button.sel::before { content: "▶"; position: absolute; left: 6px; color: #e05050; font-size: 12px; top: 50%; transform: translateY(-50%); }
.arena-menu button:focus-visible { outline: 2px solid #4870c0; outline-offset: 1px; }

/* Music on/off */
.arena-music {
  position: absolute; top: 10px; right: 10px; z-index: 6; width: 40px; height: 40px;
  border: 2px solid rgba(255,255,255,.5); border-radius: 50%; background: rgba(4,36,31,.7);
  color: #fff; font-size: 18px; line-height: 1; cursor: pointer;
}
.arena-music:hover { background: rgba(4,36,31,.9); }
.arena-music:focus-visible { outline: 2px solid #a8b8d8; outline-offset: 2px; }

/* Short phones: the 11-item tier menu needs a tighter grid to stay on screen */
@media (max-height: 700px) {
  .arena-menu { gap: 0 12px; margin-top: 4px; }
  .arena-menu button { padding: 2px 6px 2px 20px; }
}

/* Entry-fee QR panel (main-hall receptionist) */
.arena-pay { display: flex; gap: 14px; align-items: center; margin-top: 10px; cursor: default; }
.arena-pay img { flex: none; width: 180px; height: 180px; image-rendering: pixelated; border: 2px solid #383848; border-radius: 6px; background: #fff; }
.arena-pay-info { min-width: 0; }
.arena-pay-addr {
  display: block; padding: 6px 8px; border-radius: 6px; background: #e8eef8; color: #202030;
  font: 600 14px/1.45 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  word-break: break-all; user-select: all; -webkit-user-select: all;
}
.arena-pay-note { margin: 6px 0 0; font-size: 13px; font-weight: 500; line-height: 1.5; color: #a03030; white-space: normal; }
.arena-pay-status { margin: 4px 0 0; font-size: 13px; color: #287048; white-space: normal; }
.arena-dialog.has-extra .arena-menu { grid-template-columns: repeat(3, auto); justify-content: start; }
@media (max-width: 520px) {
  .arena-pay { flex-direction: column; align-items: stretch; gap: 8px; }
  .arena-pay img { width: 150px; height: 150px; align-self: center; }
  .arena-pay-addr { font-size: 12px; }
}
@media (pointer: coarse) and (max-height: 760px) {
  .arena-dialog.has-extra { bottom: 8px; }   /* tall panel: let it cover the d-pad strip while open */
}

/* Lobby notice board */
.arena-dialog.is-notice > p { display: none; }
.arena-board h2 { margin: 0 0 8px; font-size: 18px; color: #6a4626; }
.arena-board-paper {
  padding: 14px 16px; border-radius: 4px; background: #fffdf4; color: #303030;
  border: 3px solid #85582c; box-shadow: inset 0 0 0 2px #c6966a;
}
.arena-board-paper p { margin: 0; font-size: 20px; text-align: center; }
/* board text pages (guide / event): scroll inside the paper, left-aligned */
.arena-board-page { max-height: min(56vh, 460px); overflow-y: auto; cursor: auto; font-size: 15px; line-height: 1.65; }
.arena-board-page:focus-visible { outline: 2px solid #3a6ad0; outline-offset: 2px; }
.arena-board-page p { font-size: 15px; text-align: left; margin: 0 0 6px; }
.arena-board-page h3 { margin: 10px 0 4px; font-size: 16px; color: #6a4626; }
.arena-board-page ul { margin: 0 0 6px; padding-left: 1.2em; }
.arena-board-page li { margin: 0 0 2px; }
.arena-board-page strong { color: #b03020; }
.arena-board-page .is-note { margin-top: 10px; text-align: center; color: #6a4626; }
.arena-board-soon { padding: 6px 8px; border-radius: 4px; background: #fff1d0; color: #8a4a10 !important; text-align: center !important; }
.arena-commit { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 6px 1.2em; }
.arena-commit code { font: 600 14px/1.5 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; background: #f3e8cc; padding: 1px 6px; border-radius: 4px; }
.arena-commit button, .arena-board-back button {
  font: inherit; font-size: 14px; font-weight: 700; padding: 2px 12px; border: 2px solid #383848; border-radius: 6px;
  background: #fffdf4; color: #303030; cursor: pointer;
}
.arena-commit button:focus-visible, .arena-board-back button:focus-visible { outline: 2px solid #3a6ad0; outline-offset: 2px; }
.arena-commit-done { font-size: 13px; color: #287048; }
.arena-commit-link { font: 600 14px/1.5 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; background: #f3e8cc; padding: 1px 6px; border-radius: 4px; color: #2a56b8; text-decoration: underline; cursor: pointer; }
.arena-commit-link:hover { color: #183c8c; }
.arena-commit-link:focus-visible { outline: 2px solid #3a6ad0; outline-offset: 2px; }
.arena-commit.is-full { margin-left: 0; }
.arena-commit.is-full code { word-break: break-all; font-size: 12px; }
.arena-board-back { display: flex; justify-content: center; margin-top: 8px; }
@media (max-width: 520px) {
  .arena-board-page { max-height: 48vh; font-size: 14px; }
  .arena-board-page p { font-size: 14px; }
}

/* Recent matches under the notice (bets.js) */
.arena-bets { margin-top: 10px; cursor: default; }
.arena-bets h3 { margin: 0 0 6px; font-size: 16px; font-weight: 400; color: #6a4626; }
.arena-bets h3 strong { font-weight: 700; }
.arena-bets-msg { margin: 0; padding: 10px 0; text-align: center; font-size: 15px; color: #505060; }
.arena-bets table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.arena-bets th { text-align: left; font-weight: 700; color: #6a4626; border-bottom: 2px solid #c6966a; padding: 2px 6px; }
.arena-bets td { padding: 2px 6px; border-bottom: 1px solid #e4d8c0; white-space: nowrap; }
.arena-bets-addr { font: 600 13px/1.5 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.arena-bets td.is-win { color: #1f6b3c; font-weight: 700; }
.arena-bets td.is-loss { color: #a03030; }
.arena-bets td.is-pending { color: #6a6a7a; }
.arena-bets tr.is-watch { cursor: pointer; }
.arena-bets tr.is-watch:hover td { background: #f3e8cc; }
.arena-bets tr.is-sel td { background: #f0dca8; }
.arena-bets tr.is-sel td:first-child { box-shadow: inset 3px 0 0 #85582c; }
.arena-bets tr.is-watch:focus-visible { outline: 2px solid #3a6ad0; outline-offset: -2px; }
.arena-bets-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 6px; font-size: 14px; }
.arena-bets-nav button {
  font: inherit; font-weight: 700; padding: 2px 10px; border: 2px solid #383848; border-radius: 6px;
  background: #fffdf4; color: #303030; cursor: pointer;
}
.arena-bets-nav button:disabled { opacity: .4; cursor: default; }
.arena-bets-nav button:focus-visible { outline: 2px solid #3a6ad0; outline-offset: 2px; }
.arena-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 520px) {
  .arena-bets table { font-size: 12px; }
  .arena-bets td, .arena-bets th { padding: 2px 3px; }
  .arena-bets-addr { font-size: 11px; }
}
/* board menu: hide the prompt line, stack the options vertically */
.arena-dialog.is-board-menu > p { display: none; }
.arena-dialog.is-board-menu .arena-menu { grid-template-columns: 1fr; justify-content: stretch; }

/* Chat lives inside the Phaser viewport; controls remain outside the overlay. */
.arena-chat-toggle { position:absolute; right:8px; top:8px; z-index:7; padding:5px 9px; border:1px solid #7aa89b80; border-radius:6px; background:rgba(10,14,20,.72); color:#dce9e4; cursor:pointer; }
.arena-chat-toggle[aria-expanded="true"] { visibility:hidden; }
.arena-chat-badge { margin-left:4px; padding:1px 5px; border-radius:9px; background:#b94250; color:#fff; }
.arena-chat { position:absolute; z-index:4; right:8px; top:54px; width:min(320px,42%); height:min(390px,calc(var(--chat-visible,100%) - 62px)); max-height:calc(100% - 62px); box-sizing:border-box; display:flex; flex-direction:column; min-height:0; padding:8px; border:1px solid rgba(120,160,200,.22); border-radius:10px; background:rgba(10,14,20,.64); color:#e2ebf5; font:13px/1.4 system-ui,"Microsoft YaHei",sans-serif; touch-action:pan-y; }
.arena-chat [hidden],.arena-chat[hidden],.arena-chat-badge[hidden] { display:none!important; }
.arena-chat button,.arena-chat input,.arena-chat textarea { font:inherit; }
.arena-chat button { cursor:pointer; }
.arena-chat button:disabled { opacity:.5; cursor:default; }
.arena-chat button:focus-visible,.arena-chat input:focus-visible,.arena-chat textarea:focus-visible,.arena-chat-log:focus-visible,.arena-chat summary:focus-visible { outline:2px solid #50d2c1; outline-offset:1px; }
.arena-chat-head { display:flex; align-items:center; gap:5px; flex:none; margin-bottom:6px; min-width:0; }
.arena-chat-head h2 { margin:0 auto 0 0; font-size:12px; font-weight:500; color:#aab9c4; white-space:nowrap; }
.arena-chat-head label { min-width:0; width:105px; }
.arena-chat-head label>span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.arena-chat input,.arena-chat textarea { box-sizing:border-box; min-width:0; border:1px solid rgba(120,160,200,.22); border-radius:5px; padding:5px 6px; background:rgba(10,14,20,.60); color:#e2ebf5; }
.arena-chat-head input { width:100%; color:#6ee7a8; padding:4px; font-size:11px; }
.arena-chat-close { flex:none; width:26px; height:26px; padding:0; border:1px solid #7896aa40; border-radius:5px; background:#78a0c014; color:#c4d5df; font-size:19px!important; }
.arena-chat-state { flex:none; margin:0; width:7px; height:7px; border-radius:50%; background:#d8b568; font-size:0; overflow:hidden; }
.arena-chat-state.is-online { background:#6ee7a8; }
.arena-chat-log { list-style:none; margin:0 0 6px; padding:0; overflow:auto; flex:1 1 auto; min-height:12px; overscroll-behavior:contain; overflow-anchor:none; touch-action:pan-y; }
.arena-chat-message { margin:0 0 3px; padding:4px 5px; border-left:2px solid #78a0c033; border-radius:4px; background:rgba(120,160,200,.045); }
.arena-chat-meta { display:inline; }
.arena-chat-meta strong { color:#6ee7a8; overflow-wrap:anywhere; font-size:12px; }
.arena-chat-meta time { color:#8998a5; font-size:10px; margin-left:5px; }
.arena-chat-body { display:inline; margin:0 0 0 5px; white-space:pre-wrap; overflow-wrap:anywhere; user-select:text; -webkit-user-select:text; }
.arena-chat-empty { color:#a1b0b9; padding:8px 2px; font-size:12px; }
.arena-chat-form { display:flex; align-items:end; gap:5px; flex:none; }
.arena-chat-form>label { flex:1; min-width:0; }
.arena-chat textarea { display:block; width:100%; resize:none; height:34px; max-height:60px; }
.arena-chat-send-row { flex:none; }
.arena-chat-count { display:none; }
.arena-chat-send,.arena-chat-auth button { border:1px solid #50d2c144; border-radius:5px; padding:6px 9px; background:rgba(39,119,96,.46); color:#82e6c8; }
.arena-chat-error { margin:0; color:#ffabb4; font-size:11px; flex:none; }
.arena-chat-error:empty { display:none; }
.arena-chat-admin { flex:none; font-size:10px; margin-top:3px; max-height:35%; overflow:auto; }
.arena-chat-admin summary { color:#91a4b3; cursor:pointer; width:max-content; }
.arena-chat-auth { display:flex; gap:4px; margin-top:3px; }
.arena-chat-auth input { flex:1; min-width:0; width:0; }
.arena-chat-note { margin:4px 0 0; color:#a1b0b9; font-size:10px; }
.arena-chat-admin>button,.arena-chat-tools button { border:1px solid #7896aa44; border-radius:4px; padding:2px 4px; background:rgba(10,14,20,.65); color:#c6d4df; font-size:10px; }
.arena-chat-tools { display:flex; gap:5px; margin-top:3px; }
.arena-chat-new { flex:none; border:0; border-radius:4px; margin:0 0 4px; background:#1d4055; color:#d0e6f6; font-size:11px; }
@media(max-width:600px),(pointer:coarse) {
 .arena-chat { right:5px; top:54px; width:min(280px,64%); height:min(245px,calc(var(--chat-visible,100%) - 59px)); max-height:calc(100% - 59px); padding:6px; }
 .arena-chat-head { flex-wrap:wrap; gap:3px; margin-bottom:4px; }
 .arena-chat-head h2 { max-width:calc(100% - 39px); overflow:hidden; text-overflow:ellipsis; font-size:11px; }
 .arena-chat-head label { order:4; width:100%; }
 .arena-chat-close { width:23px; height:23px; }
 .arena-chat input,.arena-chat textarea { font-size:16px; }
 .arena-chat-head input { padding:2px 4px; height:25px; }
 .arena-chat-form { gap:3px; }
 .arena-chat-send { padding:6px; font-size:12px!important; }
 .arena-chat-message { font-size:11px; padding:3px; }
}
@container (max-height:220px) {
 .arena-chat { height:calc(100% - 59px); padding:4px; }
 .arena-chat-head { flex-wrap:nowrap; margin-bottom:3px; }
 .arena-chat-head label { order:0; width:80px; }
 .arena-chat-head h2 { font-size:10px; }
 .arena-chat-admin { margin-top:1px; }
 .arena-chat textarea { height:28px; }
 .arena-chat-send { padding:4px; }
}
/* Short landscape phones reserve a usable game viewport above the touch strip. */
@media (pointer:coarse) and (max-height:500px) and (orientation:landscape) {
 .arena-pad { grid-template-rows:25px 25px 25px; grid-template-columns:35px 35px 35px 1fr 45px; gap:2px; padding:3px 12px; }
 .arena-pad button { font-size:13px; }
 .arena-pad .pa { height:35px; }
 .arena-hint { padding:2px 8px; font-size:10px; }
 .arena-chat { top:5px; right:58px; height:calc(var(--chat-visible,100%) - 10px); max-height:calc(100% - 10px); }
 .arena-chat-admin { max-height:45%; }
}