:root { color-scheme: dark; --ink:#eff5ff; --panel:rgba(9,18,40,.86); --gold:#f4cf71; --accent:#50d4c4; --dashboard-width:344px; font-family: "Microsoft YaHei", system-ui, sans-serif; }
* { box-sizing:border-box; } body { margin:0; background:#071124; color:var(--ink); overflow:hidden; } #levelup5 { min-height:100vh; position:relative; } #game-canvas { position:fixed; inset:0 var(--dashboard-width) 0 0; width:calc(100vw - var(--dashboard-width)); height:100%; }
.topbar, .side-panel, .bottom-panel, .start-panel { background:var(--panel); backdrop-filter:blur(13px); border:1px solid rgba(244,207,113,.3); box-shadow:0 9px 40px #0008; border-radius:14px; }
.topbar { position:fixed; top:16px; left:20px; right:calc(var(--dashboard-width) + 20px); z-index:2; padding:12px 18px; display:flex; justify-content:space-between; gap:15px; } #hud { line-height:1.65; } #current { color:var(--gold); font-weight:bold; align-self:center; }
.topbar #hud { padding-left:0; }
.side-panel { position:fixed; z-index:4; top:0; right:0; width:var(--dashboard-width); height:100vh; padding:18px 14px; border-radius:0; border-width:0 0 0 1px; max-height:none; overflow:auto; } .side-panel h2 { color:var(--gold); margin:0 0 8px; font-size:16px; } .side-panel h3 { margin:14px 0 7px; color:#9fe9ca; font-size:13px; } #history { padding-left:20px; font-size:13px; line-height:1.65; }
.score-heading { margin:0 0 7px; color:#f7d988; font-size:12px; }.player-status { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 7px; margin:5px 0; padding:6px 7px; border-left:3px solid #7b8492; border-radius:6px; background:rgba(0,0,0,.2); font-size:11px; }.player-status.dealer { border-left-color:#f4cf71; }.player-status.defender { border-left-color:#58d7c7; }.player-status.unknown { border-left-color:#8b9aad; }.player-status b { display:flex; align-items:center; gap:5px; min-width:0; color:#f5f9ff; }.player-status .player-name { overflow:hidden; color:inherit; text-overflow:ellipsis; white-space:nowrap; }.player-status .player-level { flex:none; padding:1px 5px; border:1px solid rgba(244,207,113,.45); border-radius:9px; color:#ffe49a; background:rgba(244,207,113,.12); font-size:10px; font-style:normal; }.player-status > span { color:#d9e6f4; }.player-status em { grid-column:1 / -1; color:#f4cf71; font-style:normal; }.player-status small { grid-column:1 / -1; color:#aee7dd; font-family:Georgia,serif; font-size:12px; }
.trump-display { min-height:34px; padding:7px; border:1px solid rgba(244,207,113,.28); border-radius:8px; background:rgba(0,0,0,.2); }.trump-summary { display:flex; align-items:center; justify-content:space-between; gap:8px; }.trump-empty { margin:0; color:#9aaec1; font-size:12px; }.trump-cards { display:flex; align-items:center; height:61px; padding-left:4px; }.trump-card { width:42px; height:60px; border:1px solid #e5e2d6; border-radius:4px; background:#fff; object-fit:fill; box-shadow:0 2px 5px #0008; }.trump-card.duplicate { margin-left:-23px; transform:translateY(-3px); }.trump-caption { margin-top:5px; color:#d9e6f4; font-size:12px; }.trump-caption b { color:#ffe49a; }.trump-caption strong { margin-left:6px; color:#ffe49a; font-size:15px; }.partner-call { display:flex; align-items:center; gap:6px; padding:4px 5px; border-left:1px solid rgba(244,207,113,.42); color:#e9f4ff; font-size:11px; line-height:1.35; }.partner-call-card { width:32px; height:45px; border-radius:3px; background:#fff; box-shadow:0 2px 4px #0008; }.partner-call span { display:grid; }.partner-call small { color:#9fe9ca; }.partner-call b { color:#ffe49a; white-space:nowrap; }
.round-history { margin-bottom:10px; }.round-history-empty { margin:0; color:#9aaec1; font-size:11px; line-height:1.5; }.round-history-scroll { max-height:250px; overflow:auto; border:1px solid rgba(244,207,113,.22); border-radius:7px; background:rgba(0,0,0,.18); }.round-history-table { width:100%; border-collapse:collapse; font-size:11px; line-height:1.35; }.round-history-table th { position:sticky; top:0; padding:5px 4px; color:#f7d988; background:#10213b; text-align:left; }.round-history-table td { padding:4px; border-top:1px solid rgba(255,255,255,.07); color:#d9e6f4; vertical-align:top; }.round-history-table td:first-child { color:#9fe9ca; white-space:nowrap; }.round-history-table .round-win td { color:#ff8b8b; background:rgba(172,33,43,.2); font-weight:700; }.round-history-table .round-win td:first-child { color:#ffabab; }.round-history-table .round-settled td { color:#ffe49a; }
.bottom-panel { position:fixed; z-index:3; bottom:14px; left:16px; right:calc(var(--dashboard-width) + 16px); width:auto; padding:12px 15px 8px; text-align:center; } #hand { position:relative; z-index:1; height:134px; display:flex; justify-content:center; align-items:flex-end; overflow-x:auto; padding:24px 18px 0 24px; }
.hand-card { position:relative; flex:0 0 59px; height:96px; margin-left:-13px; border:2px solid #e5e2d6; border-radius:8px; background:#fff; cursor:pointer; box-shadow:0 3px 9px #000a; transition:transform .15s, filter .15s, box-shadow .15s; padding:0; overflow:hidden; } .hand-card:first-child { margin-left:0; } .hand-card img { display:block; width:100%; height:100%; object-fit:fill; pointer-events:none; } .hand-card:hover { z-index:3; transform:translateY(-9px); box-shadow:0 8px 14px #0009; } .hand-card.selected { z-index:4; transform:translateY(-22px); outline:3px solid var(--accent); } .hand-card.forced-card { border-color:#ffd15f; outline:2px solid #ffd15f; outline-offset:-3px; box-shadow:0 0 13px rgba(255,209,95,.9),0 3px 9px #000a; } .hand-card.fresh-card { z-index:2; border-color:#ff344f; outline:2px solid #ff344f; outline-offset:-3px; box-shadow:0 0 12px rgba(255,52,79,.9),0 3px 9px #000a; } .hand-card.muted { filter:brightness(.55); }
.trick-readout { display:flex; justify-content:center; gap:7px; flex-wrap:wrap; min-height:27px; margin:0 0 6px; } .trick-readout span { display:inline-flex; gap:5px; align-items:center; padding:3px 8px; border:1px solid rgba(255,255,255,.16); border-radius:999px; background:rgba(4,12,9,.62); font-size:12px; } .trick-readout b { color:#9fe9ca; } .trick-readout em { color:#fff9e8; font-style:normal; font-family:Georgia,serif; font-size:14px; }
.trump-reveal { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin:0 0 8px; padding:8px 11px; border:1px solid rgba(255,213,105,.62); border-radius:10px; background:linear-gradient(90deg,rgba(103,68,14,.72),rgba(13,68,55,.76)); box-shadow:0 0 22px rgba(245,195,76,.2); } .trump-reveal b { color:#ffe49a; } .trump-countdown { min-width:116px; color:#eafbf2; font-size:12px; } .trump-choices { display:flex; gap:7px; flex-wrap:wrap; justify-content:center; } .trump-choices button { padding:6px 9px; } #trump-decline { background:#43556d; }
.language-nav { margin:0 0 14px; color:#b9c8dc; font-size:12px; line-height:1.6; } .language-nav a { color:#91dcca; } .language-nav strong { color:#ffe49a; } .locale-summary { margin:10px 0 15px; color:#d9e6f4; font-size:13px; line-height:1.5; }
.control-row { display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; } button, select, input { font:inherit; } button { border:0; border-radius:8px; background:#32607c; color:white; padding:7px 12px; cursor:pointer; } button:hover:not(:disabled) { background:#3d8591; } button.primary { background:#d89439; color:#1c1720; font-weight:bold; } button:disabled { opacity:.4; cursor:not-allowed; } select { color:white; background:#172c51; border:1px solid #55749a; border-radius:6px; padding:5px; }
.notice { position:fixed; z-index:5; top:103px; left:calc((100vw - var(--dashboard-width)) / 2); transform:translateX(-50%); padding:11px 20px; background:#133f64; color:white; border-radius:9px; box-shadow:0 5px 20px #0009; } .notice.error { background:#872d3d; } .notice.success { background:#21745f; }
#played-card-layer { position:fixed; z-index:1; inset:0 var(--dashboard-width) 0 0; pointer-events:none; }.played-cards { position:absolute; display:flex; align-items:flex-end; filter:drop-shadow(0 5px 4px rgba(0,0,0,.64)); transform:translate(-50%,-50%); }.played-cards img { width:56px; height:80px; margin-left:-12px; border-radius:5px; background:#fff; }.played-cards img:first-child { margin-left:0; }.played-P1 { left:50%; top:66%; }.played-P2 { left:23%; top:50%; }.played-P3 { left:39%; top:36%; }.played-P4 { left:61%; top:36%; }.played-P5 { left:77%; top:50%; }
#player-label-layer { position:fixed; z-index:3; inset:0 var(--dashboard-width) 0 0; pointer-events:none; overflow:hidden; }.player-float-label { position:absolute; min-width:176px; max-width:230px; padding:6px 10px; transform:translate(-50%,-100%); border:1px solid rgba(255,255,255,.22); border-radius:9px; background:rgba(4,14,11,.84); box-shadow:0 3px 10px rgba(0,0,0,.62); text-align:center; line-height:1.25; }.player-float-name { display:block; color:#f5fbf7; font-size:17px; font-weight:800; }.player-float-subtitle { display:block; margin-top:2px; color:#8ee4bd; font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.player-float-label.is-active { border-color:#ffdf66; box-shadow:0 0 15px rgba(255,223,102,.58); }.player-float-label.is-partner { border-color:#68e7ff; }.player-float-label.is-immediate-dealer { border-color:#ff9d36; box-shadow:0 0 15px rgba(255,157,54,.5); }
#celebration-fireworks { position:fixed; z-index:7; inset:0 var(--dashboard-width) 0 0; width:calc(100vw - var(--dashboard-width)); height:100vh; pointer-events:none; }.hand-celebration { position:fixed; z-index:8; top:50%; left:calc((100vw - var(--dashboard-width)) / 2); width:min(560px,calc(100vw - var(--dashboard-width) - 36px)); max-height:calc(100vh - 24px); overflow-y:auto; transform:translate(-50%,-50%); padding:25px 32px; border:1px solid rgba(255,218,112,.85); border-radius:18px; background:linear-gradient(145deg,rgba(13,39,56,.97),rgba(28,78,58,.97)); box-shadow:0 18px 65px rgba(0,0,0,.75),0 0 42px rgba(255,215,95,.24); text-align:center; }.hand-celebration h1 { margin:4px 0 13px; color:#ffe093; font-size:30px; }.hand-celebration p { margin:8px 0; color:#eef8f3; }.hand-celebration .celebration-kicker { color:#84e6bd; font-size:13px; font-weight:800; letter-spacing:.15em; }.hand-celebration #celebration-levels { color:#ffe093; font-weight:800; }.hand-celebration #celebration-match { color:#a9e9f4; }.hand-celebration button { position:absolute; top:9px; right:11px; padding:1px 9px 5px; background:transparent; color:#dbe9f5; font-size:25px; }.celebration-bottom { margin-top:14px; padding-top:11px; border-top:1px solid rgba(255,218,112,.32); color:#ffe093; }.celebration-bottom-cards { display:flex; justify-content:center; gap:5px; margin:8px 0; }.celebration-bottom-cards img { width:43px; height:61px; object-fit:fill; border:1px solid #e8e6dc; border-radius:4px; background:#fff; box-shadow:0 2px 7px #0008; }.celebration-bottom #celebration-bottom-score { margin:9px 0 0; color:#ffdf90; font-weight:700; }
.start-wrap { position:fixed; z-index:6; inset:0 var(--dashboard-width) 0 0; display:grid; place-items:center; background:radial-gradient(circle at 50% 35%,#155d59cc,#071124e8 60%); } .start-panel { width:min(420px,90vw); padding:34px; text-align:center; } .start-panel h1 { margin:0; color:var(--gold); font-size:38px; } .start-panel p { color:#c4d9dc; } .start-panel .control-row { margin:16px 0; } .start-panel button { min-width:132px; }.starting-level { justify-content:center; margin-top:17px; color:#f4cf71; font-weight:700; }.starting-level select { min-width:78px; text-align:center; }.starting-level-hint { margin:7px 0 0; font-size:12px; }
#start-panel[hidden], [hidden] { display:none !important; }
.noscript { position:fixed; z-index:20; inset:0; display:grid; place-content:center; padding:24px; background:#071124; color:#eff5ff; text-align:center; }.noscript a { color:#ffe093; }
#partner-form, #bury-controls { margin-top:8px; } #debug { position:fixed; left:10px; bottom:10px; z-index:9; max-width:320px; max-height:260px; overflow:auto; background:#000c; font:11px ui-monospace; color:#a8ffde; } #next-hand { margin-top:9px; }
@media (max-width:1050px) { :root { --dashboard-width:286px; } .topbar { font-size:12px; } .bottom-panel { left:8px; right:calc(var(--dashboard-width) + 8px); } }
@media (max-width:750px) { :root { --dashboard-width:0px; } .side-panel { display:none; } .topbar { font-size:12px; left:8px; right:8px; top:8px; } .bottom-panel { bottom:6px; right:8px; } .start-wrap { inset:0; } .hand-card { flex-basis:45px; height:74px; } .played-cards img { width:45px; height:64px; margin-left:-10px; } .player-float-label { min-width:130px; padding:4px 6px; }.player-float-name { font-size:14px; }.player-float-subtitle { font-size:10px; } #celebration-fireworks { inset:0; width:100vw; }.hand-celebration { left:50%; width:calc(100vw - 26px); padding:21px 22px; }.hand-celebration h1 { font-size:25px; }.celebration-bottom-cards { gap:3px; }.celebration-bottom-cards img { width:min(34px,calc((100vw - 91px)/8)); height:auto; aspect-ratio:43 / 61; flex:none; } .trick-readout { gap:4px; }.trick-readout span { font-size:10px; } }
/* A side dashboard leaves too little room for a five-seat 3D table on a
   portrait tablet or phone.  Keep the table full-width and place the complete
   dashboard after it in normal document flow instead of clipping seats. */
@media (max-width:1050px) {
  :root { --dashboard-width:0px; }
  body { overflow-x:hidden; overflow-y:auto; }
  #levelup5, #levelup4_80, #levelup4_40 { min-height:calc(100vh + 700px); }
  #game-canvas, #played-card-layer, #player-label-layer, #celebration-fireworks { inset:0; width:100vw; }
  .topbar { left:8px; right:8px; }
  .side-panel { display:block; position:relative; top:auto; right:auto; width:100%; height:auto; min-height:700px; margin-top:100vh; padding:18px 14px; border-radius:0; border-width:1px 0 0; overflow:visible; }
  .bottom-panel { position:fixed; right:8px; bottom:6px; left:8px; }
  .notice { left:50%; }
  .start-wrap { inset:0; }
}
/* Reserve real space for the HUD and hand. The camera fits the remaining area
   whenever these panels resize (including reveal/bury/call prompts). */
:root { --scene-top:112px; --scene-bottom:220px; --scene-label-space:0px; }
#game-canvas, #played-card-layer, #player-label-layer {
  top:var(--scene-top); bottom:var(--scene-bottom);
  width:calc(100% - var(--dashboard-width));
  height:calc(100vh - var(--scene-top) - var(--scene-bottom));
  height:calc(100dvh - var(--scene-top) - var(--scene-bottom));
}
#game-canvas, #played-card-layer {
  top:calc(var(--scene-top) + var(--scene-label-space));
  height:calc(100vh - var(--scene-top) - var(--scene-bottom) - var(--scene-label-space));
  height:calc(100dvh - var(--scene-top) - var(--scene-bottom) - var(--scene-label-space));
}
.compact-table .player-float-label { min-width:0; max-width:none; padding:4px 2px; }
.compact-table .player-float-name { font-size:12px; white-space:nowrap; }
.compact-table .player-float-subtitle { font-size:9px; }
.compact-table .played-cards img { width:30px; height:43px; margin-left:-8px; }
.compact-table .played-P1 { top:85%; }
.compact-table .played-P2, .compact-table .played-P5 { top:80%; }
.compact-table .played-P3, .compact-table .played-P4 { top:64%; }
.notice { top:calc(var(--scene-top) + 5px); max-width:calc(100vw - var(--dashboard-width) - 24px); }
/* With the entire table framed, played faces belong below the occupied seats,
   not across the avatars' heads or their name labels. */
.played-P1 { top:82%; }
.played-P2, .played-P5 { top:67%; }
.played-P3, .played-P4 { top:52%; }
@media (max-width:1050px) {
  .topbar { top:8px; padding:8px 10px; gap:6px; max-height:24dvh; overflow:auto; }
  .bottom-panel { padding:6px 7px; max-height:46dvh; overflow-y:auto; }
  #hand { height:110px; padding-top:25px; }
  .control-row { gap:5px; font-size:12px; }
  .control-row button { padding:6px 9px; }
  .trump-reveal { font-size:12px; gap:5px; padding:5px; }
  .notice { top:auto; bottom:calc(var(--scene-bottom) + 6px); width:max-content; padding:6px 9px; font-size:11px; pointer-events:none; }
  .side-panel { margin-top:100dvh; }
}
@media (max-width:750px) {
  .topbar { display:block; font-size:11px; }
  #hud { line-height:1.45; }
  #current { margin-left:0; }
  .player-float-label { min-width:100px; width:clamp(100px,28vw,130px); max-width:130px; }
  #hand { height:105px; }
}
@media (max-height:500px) {
  .topbar { top:4px; padding:4px 8px; font-size:11px; }
  .bottom-panel { bottom:4px; padding:4px 7px; }
  #hand { height:82px; padding-top:24px; }
  .hand-card { flex-basis:36px; height:56px; }
  .trick-readout { min-height:0; margin-bottom:3px; }
  .trick-readout span { padding:1px 5px; }
  .player-float-label { min-width:100px; padding:3px 5px; }
  .player-float-name { font-size:12px; }
  .player-float-subtitle { font-size:9px; }
  .played-cards img { width:30px; height:43px; }
}
/* Card faces must remain above name badges, but below dialogs and controls. */
#player-label-layer { z-index:1; }
#played-card-layer { z-index:2; }
#game-canvas, #played-card-layer, #player-label-layer { left:var(--scene-left,0px); right:auto; width:var(--scene-width,calc(100% - var(--dashboard-width))); }
.compact-table #player-label-layer { left:0; width:calc(100% - var(--dashboard-width)); }
.player-float-subtitle { white-space:normal; overflow:visible; text-overflow:clip; font-size:0; }
.compact-table .player-float-subtitle { font-size:0; }
.player-float-role, .player-float-level { display:inline-block; max-width:100%; white-space:nowrap; font-size:12px; vertical-align:top; }
.player-float-role { overflow:hidden; text-overflow:ellipsis; margin-right:4px; }
.compact-table .player-float-role, .compact-table .player-float-level { display:block; font-size:9px; margin-right:0; }
@media (max-width:750px) { .player-float-role, .player-float-level { font-size:10px; } }
@media (max-height:500px) { .player-float-role, .player-float-level { font-size:9px; } }
@media (max-width:1050px) {
  #levelup5, #levelup4_80, #levelup4_40 { min-height:100dvh; position:relative; display:flow-root; }
  .topbar, #game-canvas, #played-card-layer, #player-label-layer { position:absolute; }
  .bottom-panel { position:absolute; top:var(--hand-top,60dvh); bottom:auto; }
  .side-panel { margin-top:var(--dashboard-top,100dvh); }
  #hand.two-row-hand { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-end; height:auto; min-height:0; padding:0 8px 6px; overflow:visible; }
  .hand-row { display:block; flex:none; padding:28px 4px 6px; min-height:130px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; touch-action:pan-x pan-y; scrollbar-width:thin; cursor:grab; user-select:none; }
  .hand-row:active { cursor:grabbing; }
  .hand-row-track { display:flex; justify-content:center; align-items:flex-end; width:max-content; min-width:100%; }
  .hand-row .hand-card { flex:none; width:59px; margin-left:var(--hand-overlap,-13px); }
  .hand-row .hand-card:first-child { margin-left:0; }
  .bottom-panel:has(.two-row-hand) { max-height:none; overflow:visible; }
}
@media (max-width:750px) {
  .hand-row { min-height:108px; }
  .hand-row .hand-card { width:45px; }
  .bottom-panel { max-height:none; overflow:visible; }
}
@media (max-width:1050px) and (max-height:500px) {
  .hand-row { min-height:90px; }
  .hand-row .hand-card { width:36px; }
}