/* Shared room presentation. Only mounted multiplayer pages receive these tokens. */
.game-page.mp-page {
  --mp-bg:var(--site-bg,var(--color-bg-page,#070e17));
  --mp-surface:var(--site-surface-glass,#10202edb);
  --mp-solid:var(--site-surface,#10202e);
  --mp-text:var(--site-text,#eff5f6);
  --mp-muted:var(--site-muted,#9bafbd);
  --mp-line:var(--site-border-two,#334955);
  --mp-accent:var(--site-accent,#a5e9e5);
  --mp-input:var(--site-input,#09151fd9);
  --mp-wash:var(--site-accent-wash,#a5e9e511);
  --mp-button-text:var(--site-button-text,#0a2027);
  --mp-layout-width:936px;
  color:var(--mp-text);
}
.game-page.mp-page .mp-lobby {
  display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,380px);gap:24px;
  align-items:start;width:100%;max-width:var(--mp-layout-width);margin:0 auto;padding:24px;
  border:1px solid var(--mp-line);border-radius:10px;
  background:var(--mp-surface);box-shadow:0 12px 45px #00000016;
  backdrop-filter:none;min-height:0;
}
.mp-page .mp-heading {grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--mp-line);min-width:0;}
.mp-game-name {display:flex;align-items:center;gap:14px;min-width:0;}
.mp-page .mp-game-name h1 {font:650 clamp(21px,2vw,27px)/1.25 "Microsoft YaHei UI","PingFang SC",sans-serif;letter-spacing:.03em;margin:0 0 8px;color:var(--mp-text);}
.mp-game-mark {display:grid;place-items:center;width:48px;height:48px;flex:none;border:1px solid var(--mp-line);border-radius:9px;background:var(--mp-wash);color:var(--mp-accent);}
.mp-game-mark svg {width:26px;height:26px;}
.mp-game-people {display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mp-muted);}
.mp-page svg {flex-shrink:0;}
.mp-game-people svg {width:14px;height:14px;}
.mp-tools {display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;}
.mp-page .mp-tools .game-page-tools {margin:0;padding:0;display:contents;}
.game-page.mp-page .game-leaderboard-button {min-height:38px;padding:9px 13px;border:1px solid var(--mp-line);border-radius:5px;background:var(--mp-wash);color:var(--mp-text);font-size:13px;box-shadow:none;}
.mp-page .game-leaderboard-button svg {width:16px;height:16px;display:block;}
.mp-page .mp-scene {position:relative;overflow:hidden;margin:0;min-width:0;width:100%;max-width:480px;height:auto;align-self:start;border:1px solid var(--mp-line);border-radius:7px;background:var(--mp-solid);}
.mp-scene picture {display:block;width:100%;height:auto;}
.mp-scene img {display:block;width:100%;height:auto;object-fit:contain;}
.mp-scene::after {content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 65px #0003;}
.mp-page .mp-scene figcaption {position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:10px;padding:24px 20px 16px;background:linear-gradient(transparent,#08141aeb);color:#edf5f5;font-size:13px;line-height:1.5;letter-spacing:.04em;z-index:1;}
.mp-scene-line {width:23px;height:1px;background:#a5e9e5;box-shadow:0 0 10px #a5e9e566;}
.game-page.mp-page .mp-entry {display:grid;align-content:start;align-self:start;gap:18px;min-width:0;max-width:none;width:100%;margin:0;padding:20px;background:var(--mp-input);border:1px solid var(--mp-line);border-radius:7px;box-shadow:none;}
.mp-profile {display:flex;align-items:center;gap:11px;min-width:0;}
.mp-avatar {position:relative;display:grid;place-items:center;flex:none;width:38px;height:38px;overflow:hidden;border:1px solid var(--mp-line);border-radius:50%;color:var(--mp-accent);background:var(--mp-wash);font-weight:600;}
.mp-avatar img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.mp-avatar img[hidden] {display:none;}
.mp-profile > div {min-width:0;display:grid;gap:3px;}
.mp-profile-label {font-size:11px;color:var(--mp-muted);}
.mp-profile strong {font-size:14px;font-weight:600;overflow-wrap:anywhere;}
.mp-profile-badges {display:flex;align-items:center;flex-wrap:wrap;gap:5px;min-width:0;}
.mp-page .mp-tabs {display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid var(--mp-line);border-radius:6px;background:var(--mp-surface);}
.game-page.mp-page .mp-tabs button {display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:40px;padding:8px 5px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--mp-muted);box-shadow:none;font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;}
.game-page.mp-page .mp-tabs button[aria-selected="true"] {color:var(--mp-accent);background:var(--mp-wash);border-color:var(--mp-line);}
.mp-tabs svg {width:15px;height:15px;}
.mp-page [data-mp-panel] {display:grid;gap:16px;align-content:start;min-width:0;}
.mp-page [data-mp-panel][hidden] {display:none!important;}
.game-page.mp-page .mp-entry label {display:grid;gap:8px;min-width:0;margin:0;color:var(--mp-muted);font-size:12px;line-height:1.5;}
.game-page.mp-page .mp-entry :is(input:not([type=checkbox]),select) {width:100%;min-width:0;max-width:100%;height:44px;min-height:44px;margin:0;padding:0 12px;border:1px solid var(--mp-line);border-radius:5px;background:var(--mp-surface);color:var(--mp-text);font:14px/1.4 "Microsoft YaHei UI","PingFang SC",sans-serif;box-shadow:none;}
.mp-page .mp-entry input[autocomplete="off"] {font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;letter-spacing:.12em;}
.game-page.mp-page .mp-entry :is(input,select):focus-visible {outline:2px solid var(--mp-accent);outline-offset:2px;}
.mp-page select option {background:var(--mp-solid);color:var(--mp-text);}
.game-page.mp-page :is(.mp-primary,.mp-secondary),.game-page.mp-page .mp-room-bar button,.game-page.mp-page .mp-seats-panel button,.game-page.mp-page .avalon-host button {
  display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:9px 13px;
  border:1px solid var(--mp-line);border-radius:5px;background:var(--mp-surface);color:var(--mp-text);
  font-family:inherit;font-size:13px;line-height:1.4;box-shadow:none;cursor:pointer;
}
.game-page.mp-page .mp-primary {min-height:44px;width:100%;margin-top:3px;color:var(--mp-button-text)!important;background:var(--mp-accent)!important;border-color:var(--mp-accent)!important;font-weight:650;}
.mp-page :is(.mp-primary,.mp-secondary,.mp-room-bar button) svg {width:16px;height:16px;}
.game-page.mp-page button:disabled {cursor:default;opacity:.45;}
.game-page.mp-page :is(.mp-tabs button,.mp-primary,.mp-secondary,.mp-room-bar button):focus-visible {outline:2px solid var(--mp-accent);outline-offset:3px;}
.game-page.mp-page :is(.mp-secondary,.mp-room-bar button):hover:not(:disabled) {border-color:var(--mp-accent);background:var(--mp-wash);}
.mp-page .mp-primary:hover:not(:disabled) {filter:brightness(1.06);}
.mp-page .mp-entry .go-form-grid {display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.game-page.mp-page .mp-entry .go-check {display:flex;align-items:center;gap:8px;}
.mp-page .mp-entry input[type=checkbox] {accent-color:var(--mp-accent);}
.mp-page .mp-entry .gomoku-error {color:var(--site-error,#ff92a8);font-size:13px;margin:0;line-height:1.5;}
.mp-page .mp-entry .gomoku-error:empty {display:none;}
.mp-advanced {border-top:1px solid var(--mp-line);padding-top:12px;}
.mp-advanced summary,.mp-play-notice summary {cursor:pointer;font-size:12px;color:var(--mp-muted);}
.mp-page .mp-entry .avalon-role-editor {margin-top:12px;padding:12px;background:var(--mp-surface);border-color:var(--mp-line);}
.mp-page .mp-entry .avalon-role-editor label {display:flex;align-items:center;}
.mp-page .mp-entry .avalon-role-editor input {width:auto;}
.mp-page .mp-public,.mp-play-notice {grid-column:1/-1;min-width:0;}
.mp-page .mp-public {border-top:1px solid var(--mp-line);padding-top:18px;}
.mp-page .mp-public :is(h3,p) {margin:0;font-size:13px;color:var(--mp-muted);}
.mp-page .mp-public h3 {color:var(--mp-text);font-weight:600;margin-bottom:12px;}
.mp-page .mp-public :is(.junqi-public,.checkers-room-list,[data-go-room-list]) {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:10px;margin:0;padding:0;}
.mp-page .mp-public :is(h3,p) {grid-column:1/-1;}
.game-page.mp-page .mp-public button {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;text-align:left;min-width:0;min-height:44px;padding:12px;border:1px solid var(--mp-line);border-radius:5px;color:var(--mp-text);background:var(--mp-input);}
.mp-page .mp-public small {color:var(--mp-muted);}
.mp-page .mp-public .go-refresh {display:inline-flex;min-height:30px;padding:4px 10px;margin-left:8px;}
.mp-play-notice {border-top:1px solid var(--mp-line);padding-top:12px;}
.game-page.mp-page .mp-play-notice .go-notice {background:none;border:0;margin:12px 0 0;padding:0;color:var(--mp-muted);font-size:12px;}
.game-page.mp-page .mp-room-bar {display:flex;align-items:center;flex-wrap:wrap;gap:10px;width:100%;max-width:none;margin:0 0 16px;padding:14px 16px;border:1px solid var(--mp-line);border-radius:7px;background:var(--mp-surface);box-shadow:none;backdrop-filter:none;}
.game-page.mp-page .mp-room-bar button {flex:0 1 auto;width:auto;}
.mp-page .mp-room-title {font-size:19px;font-weight:600;line-height:1.3;margin:0 10px 0 0;color:var(--mp-text);}
.mp-page .mp-room-bar > div:first-of-type {margin-right:auto;display:grid;gap:3px;}
.mp-page .mp-room-bar > div:first-of-type :is(span,small) {font-size:11px;color:var(--mp-muted);}
.mp-page .mp-room-bar > div:first-of-type strong {font:600 17px/1.3 ui-monospace,Consolas,monospace;letter-spacing:.15em;color:var(--mp-accent);}
.mp-page .mp-room-bar :is(.go-live,.avalon-connection,.three-piece-connection,.gomoku-connection,.junqi-connection,.checkers-connection) {font-size:12px;color:var(--mp-muted);}
.game-page.mp-page .avalon-status {color:var(--mp-accent);border-color:var(--mp-line);background:var(--mp-wash);}
.mp-page .mp-feedback {margin:0 0 12px;padding:10px 14px;border-left:2px solid var(--mp-accent);background:var(--mp-wash);color:var(--mp-text);font-size:13px;overflow-wrap:anywhere;}
.game-page.mp-page .mp-waiting-layout {display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,420px);gap:24px;align-items:start;width:100%;max-width:var(--mp-layout-width);margin:0 auto;}
.game-page.mp-page:has(.mp-waiting-layout) :is(.mp-room-bar,.mp-room-extra,.mp-feedback) {max-width:var(--mp-layout-width);margin-left:auto;margin-right:auto;}
.mp-waiting-main,.mp-waiting-controls {min-width:0;}
.mp-waiting-controls {display:grid;gap:14px;}
.game-page.mp-page .mp-waiting-scene {height:auto;}
.game-page.mp-page .mp-seats-panel,.game-page.mp-page .mp-waiting-controls .avalon-host {min-width:0;margin:0;width:100%;padding:20px;border:1px solid var(--mp-line);border-radius:7px;background:var(--mp-surface);color:var(--mp-text);box-shadow:none;backdrop-filter:none;}
.mp-page .mp-seats-panel :is(h3,.checkers-panel-title,.three-piece-panel-title) {color:var(--mp-text);font-size:15px;margin:0 0 14px;}
.mp-page .mp-seats-panel h3 span {font-size:12px;color:var(--mp-muted);}
.mp-page .mp-seats-panel :is(.avalon-panel-title,.checkers-panel-title,.three-piece-panel-title) > span,.mp-page .mp-seats-panel .avalon-member > b {color:var(--mp-accent);}
.game-page.mp-page .mp-seats-panel :is(.three-piece-player,.checkers-member,.avalon-member,.gomoku-member),.game-page.mp-page .junqi-seat {
  position:relative;min-width:0;margin:0;padding:12px;border:1px solid var(--mp-line);border-radius:6px;background:var(--mp-input);color:var(--mp-text);box-shadow:none;
}
.mp-page .mp-seats-panel :is(.three-piece-players,.checkers-members,.avalon-members,.gomoku-member-list) {display:grid;gap:10px;margin:0 0 16px;padding:0;list-style:none;}
.mp-page .mp-seats-panel .avalon-members {grid-template-columns:repeat(2,minmax(0,1fr));}
.mp-page .mp-seats-panel .three-piece-player {display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:4px 10px;align-items:center;}
.mp-page .three-piece-player .three-piece-avatar {grid-row:1/4;grid-column:1;}
.mp-page .three-piece-player .three-piece-seat {grid-column:2;font-size:11px;color:var(--mp-muted);}
.mp-page .three-piece-player strong {grid-column:2;font-size:14px;overflow-wrap:anywhere;}
.mp-page .three-piece-player small {grid-column:2;color:var(--mp-muted);}
.mp-page .three-piece-player .three-piece-piece {grid-column:3;grid-row:1/4;}
.mp-page .mp-empty-invite svg {width:18px;height:18px;}
.mp-page .mp-seats-panel .gomoku-member {display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:3px 9px;align-items:center;}
.mp-page .gomoku-member .mp-member-avatar {grid-row:1/4;}
.mp-page .mp-seats-panel .gomoku-member .gomoku-seat {grid-column:2;color:var(--mp-muted);font-size:10px;}
.mp-page .mp-seats-panel .gomoku-member strong {grid-column:2;font-size:13px;overflow-wrap:anywhere;}
.mp-page .mp-seats-panel .gomoku-member small {grid-column:3;grid-row:1/4;font-size:11px;color:var(--mp-muted);}
.mp-page .mp-member-avatar {display:grid;place-items:center;flex:none;width:34px;height:34px;border:1px solid var(--mp-line);border-radius:50%;background:var(--mp-wash);color:var(--mp-accent);font-size:14px;}
.mp-page .mp-seats-panel :is(.three-piece-avatar,.checkers-avatar,.avalon-avatar) {width:38px;height:38px;border-color:var(--mp-line);background:var(--mp-wash);color:var(--mp-accent);}
.mp-page .mp-seats-panel :is(.checkers-member,.avalon-member) {display:flex;align-items:center;gap:10px;}
.mp-page .mp-seats-panel :is(.checkers-member,.avalon-member) > div {flex:1;min-width:0;}
.mp-page .mp-seats-panel :is(.checkers-member,.avalon-member) strong {display:block;overflow-wrap:anywhere;font-size:13px;}
.mp-page .mp-seats-panel :is(.checkers-member,.avalon-member) small {color:var(--mp-muted);}
.mp-page .mp-seats-panel .is-empty {border-style:dashed;background:transparent;opacity:.75;}
.mp-page .mp-open-seats {display:grid;gap:8px;}
.mp-page .mp-open-seats button {width:100%;border-style:dashed;background:transparent;justify-content:flex-start;}
.mp-open-seats svg {width:18px;height:18px;}
.mp-page .mp-seats-panel .go-waiting h3 {font-size:16px;}
.mp-page .mp-seats-panel [data-go-waiting-members] p {display:flex;justify-content:space-between;gap:12px;padding:14px 12px;border:1px solid var(--mp-line);border-radius:5px;background:var(--mp-input);color:var(--mp-text);}
.mp-page .mp-seats-panel [data-go-waiting-members] p span:last-child {color:var(--mp-muted);font-size:12px;}
.mp-page .mp-seats-panel > button {margin-top:8px;}
.game-page.mp-page .mp-seats-panel :is([data-three-piece-ready],[data-checkers-ready],[data-checkers-start],[data-go-action=ready],[data-go-action=start]),.game-page.mp-page .mp-waiting-controls [data-avalon-deal] {background:var(--mp-accent)!important;color:var(--mp-button-text)!important;border-color:var(--mp-accent)!important;}
.mp-page .mp-room-extra {margin-top:18px;}
.game-page.mp-page.mp-waiting .mp-room-extra {display:block;}
.mp-waiting .mp-room-extra > main {display:none;}
.mp-waiting .mp-room-extra > aside {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px;}
.mp-waiting .mp-room-extra :is(.three-piece-panel,.checkers-panel) {display:none;}
.mp-waiting .mp-room-extra .avalon-leave {align-self:start;}
.mp-page .mp-waiting-controls .avalon-host {display:grid;gap:10px;}
.mp-page .mp-waiting-controls .avalon-host h3 {margin:0;font-size:14px;}
.mp-page .mp-waiting-controls .avalon-host .avalon-config {min-width:0;}
.mp-page .mp-waiting-controls .avalon-host button {width:100%;}
.mp-page .mp-waiting-controls .avalon-host .danger {background:transparent;color:var(--mp-muted);border-color:var(--mp-line);}
.game-page.mp-page.mp-waiting :is(.junqi-seats,.junqi-status,.junqi-formation,.junqi-board-shell,.avalon-panel,.gomoku-chat,.go-chat) {background:var(--mp-surface);border-color:var(--mp-line);color:var(--mp-text);box-shadow:none;backdrop-filter:none;}
.game-page.mp-page.mp-waiting :is(.junqi-seats,.junqi-formation,.avalon-panel,.gomoku-chat,.go-chat) :is(h3,p,small) {color:var(--mp-muted);}
.game-page.mp-page :is(.mp-entry,.mp-waiting-controls,.mp-room-extra) .is-good {color:color-mix(in srgb,var(--mp-text) 80%,#c99e44);}
.game-page.mp-page :is(.mp-entry,.mp-waiting-controls,.mp-room-extra) .is-evil {color:color-mix(in srgb,var(--mp-text) 75%,#db466f);}
.mp-page .mp-waiting-person {display:flex;align-items:center;gap:10px;min-width:0;overflow-wrap:anywhere;}
.mp-page .mp-waiting-person .mp-member-avatar {position:relative;overflow:hidden;}
.mp-page .mp-waiting-person img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.game-page.mp-page .mp-rules {width:min(510px,calc(100vw - 28px));max-height:calc(100dvh - 40px);overflow:auto;padding:24px;border:1px solid var(--mp-line);border-radius:9px;background:var(--mp-solid);color:var(--mp-text);box-shadow:0 24px 100px #0008;}
.mp-rules::backdrop {background:#020a12a6;}
.mp-rules header {display:flex;align-items:center;justify-content:space-between;gap:16px;}
.mp-rules h2 {font-size:20px;margin:0;}
.mp-rules header button {display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--mp-line);border-radius:4px;color:var(--mp-text);background:transparent;cursor:pointer;}
.mp-rules header svg {width:18px;height:18px;}
.mp-rules ul {padding-left:21px;margin:20px 0 0;color:var(--mp-muted);line-height:1.9;font-size:14px;}
.mp-rules li+li {margin-top:10px;}
.game-page.mp-page .mp-rules {position:fixed;inset:0;margin:auto;}
.mp-page .mp-rules > :is(h2,h3) {font-size:20px;margin:0 35px 18px 0;color:var(--mp-text);}
.mp-page .mp-rules .mp-close-rules {position:absolute;top:17px;right:17px;width:32px;height:32px;min-height:32px;padding:0;border:1px solid var(--mp-line);border-radius:4px;background:var(--mp-input);color:var(--mp-text);cursor:pointer;}
.mp-page .mp-go-empty {border-style:dashed!important;align-items:center;}
.game-page.mp-page .mp-seats-panel .mp-go-empty button {min-height:32px;padding:6px 9px;font-size:12px;}
@media(max-width:900px) {
  .game-page.mp-page .mp-lobby,.game-page.mp-page .mp-waiting-layout {grid-template-columns:minmax(0,1fr) minmax(285px,340px);gap:16px;}
  .game-page.mp-page .mp-lobby {padding:16px;}
  .game-page.mp-page .mp-entry {padding:16px;}
}
@media(max-width:720px) {
  .game-page.mp-page .mp-lobby,.game-page.mp-page .mp-waiting-layout {grid-template-columns:minmax(0,1fr);gap:16px;}
  .mp-page .mp-heading {order:0;flex-wrap:wrap;padding-bottom:14px;gap:14px;}
  .mp-page .mp-game-name {gap:10px;flex:1 0 auto;}
  .mp-page .mp-game-name h1 {font-size:21px;white-space:nowrap;}
  .mp-page .mp-game-mark {width:38px;height:38px;}
  .mp-page .mp-game-mark svg {width:22px;height:22px;}
  .mp-page .mp-game-people {font-size:11px;}
  .mp-page .mp-tools {gap:6px;justify-content:flex-start;}
  .mp-page .mp-tools button {flex:0 0 auto;width:auto;padding:7px 9px;min-height:36px;white-space:nowrap;}
  .mp-page .mp-entry {order:1;}
  .game-page.mp-page .mp-scene {order:2;max-width:320px;height:auto;justify-self:center;margin-inline:auto;}
  .mp-page .mp-public {order:3;}
  .mp-page .mp-play-notice {order:4;}
  .mp-page .mp-waiting-main {order:2;}
  .mp-page .mp-waiting-controls {order:1;}
  .mp-page .mp-room-bar {gap:8px;padding:12px;}
  .mp-page .mp-room-title {width:100%;font-size:18px;}
  .mp-page .mp-room-bar button {min-height:40px;padding:8px 10px;}
  .mp-page .mp-seats-panel .avalon-members {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .mp-page .mp-seats-panel .avalon-member {padding:10px;gap:6px;}
  .mp-page .mp-seats-panel .avalon-avatar {width:30px;height:30px;}
}
@media(max-width:380px) {.mp-page .mp-game-mark {display:none;}.mp-page .mp-game-name h1 {font-size:19px;}.mp-page .mp-tools .game-leaderboard-button {font-size:12px;padding:7px;}.mp-page .mp-seats-panel .avalon-members {grid-template-columns:minmax(0,1fr);}}
@media(prefers-reduced-motion:reduce) {.mp-page :is(.mp-scene,.mp-entry,.mp-tabs button,.mp-room-bar,.mp-seats-panel) {animation:none;transition:none;}}