:root{
  --bg:#070a12;
  --page:#09101a;
  --panel:#151b27;
  --panel-2:#101722;
  --line:#6a7c91;
  --line-soft:rgba(106,124,145,.58);
  --text:#ffffff;
  --muted:#b1b7c8;
  --gold:#f4c44f;
  --green:#56d36f;
  --red:#ff5d5d;
  --blue:#63a9ff;
  --brown:#4a2824;
  --card:#fffdf8;
  --ink:#252b32;
  --radius:22px;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden}
body.bg{
  margin:0;
  background:#000;
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  letter-spacing:0;
}
button,input,select{font:inherit}
.hidden{display:none !important}
.app-shell{
  width:min(100vw,1280px);
  height:100dvh;
  margin:0 auto;
  padding:10px 16px;
  background:var(--page);
  overflow:hidden;
}
.card,.panel,.home-panel{
  background:linear-gradient(180deg,rgba(26,34,48,.92),rgba(18,23,32,.88));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.stack{display:grid;gap:10px}
.row{display:flex;align-items:center}
.between{justify-content:space-between}
.gap{gap:10px}
.wrap{flex-wrap:wrap}
.small-label,.small-help,.msg,.meta,.mini,.player-as{color:var(--muted)}
.small-label{text-transform:uppercase;font-size:12px;letter-spacing:1px}

.landscape-lock{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#050812;
  padding:22px;
}
.landscape-lock-card{
  width:min(90vw,430px);
  text-align:center;
  padding:24px;
  border:1px solid var(--line);
  border-radius:24px;
  background:linear-gradient(180deg,#1a2230,#111720);
}
.landscape-lock-card h2{margin:8px 0;color:var(--gold)}

.home-shell{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
}
.home-panel{
  width:min(100%,1120px);
  min-height:min(92dvh,520px);
  padding:52px 26px 64px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.home-panel h1{
  margin:0 0 16px;
  color:var(--gold);
  text-align:center;
  font-size:clamp(28px,3.1vw,42px);
  line-height:1.1;
  font-weight:900;
}
.home-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.home-card{
  padding:24px;
  border-radius:22px;
}
.home-card h2{
  margin:0;
  color:var(--gold);
  font-size:26px;
  line-height:1.1;
}
.home-card p{
  margin:8px 0 22px;
  color:var(--muted);
}
input,select{
  width:100%;
  min-height:62px;
  padding:14px 22px;
  border-radius:3px;
  border:1px solid #0d111b;
  outline:none;
  background:#151b25;
  color:var(--text);
  font-size:22px;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.36);
}
input::placeholder{color:#b5bac5;letter-spacing:6px}
.btn{
  appearance:none;
  border:0;
  border-radius:5px;
  min-height:52px;
  padding:12px 18px;
  background:#1a2030;
  color:var(--text);
  font-weight:900;
  letter-spacing:3px;
  cursor:pointer;
  text-transform:uppercase;
}
.btn.primary{background:var(--blue);color:#07101a}
.btn.danger{background:var(--red);color:var(--text)}
.btn.gold{background:var(--gold);color:#17120a}
.btn.success{background:var(--green);color:#06110a}
.btn.small{min-height:54px;padding:12px 38px;font-size:15px}
.btn:disabled{opacity:.62;cursor:not-allowed}

.room-shell{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.topbar{
  min-height:102px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:14px 18px;
  border:1px solid var(--line);
  border-radius:28px;
  background:linear-gradient(180deg,rgba(26,34,48,.9),rgba(18,23,32,.84));
}
.room-code{
  color:var(--gold);
  font-size:31px;
  line-height:1.1;
  font-weight:900;
}
.player-as{margin-top:4px;font-size:16px}
.top-actions{display:flex;gap:10px}
[data-phase="bidding"] .topbar,
[data-phase="trump"] .topbar,
[data-phase="team"] .topbar,
[data-phase="playing"] .topbar,
[data-phase="round_end"] .topbar,
[data-phase="confirm_continue"] .topbar,
[data-phase="finished"] .topbar{display:none}

#joinBox,#closedBox,#watchBox{
  margin:auto;
  width:min(560px,92vw);
  padding:22px;
}
#lobbyBox{
  flex:1;
  min-height:0;
  padding:14px 8px 8px;
  background:transparent;
  border:0;
  box-shadow:none;
}
#lobbyBox>.stack{
  height:calc(100% - 42px);
  display:grid;
  grid-template-columns:62% 1fr;
  gap:8px;
}
.lobby-title-row{
  height:0;
  overflow:visible;
  padding-left:14px;
}
.lobby-title-row h2{
  position:relative;
  z-index:1;
  margin:12px 0 0;
  font-size:23px;
  font-weight:500;
}
#phaseTag{display:none}
.seated-count{
  position:relative;
  z-index:1;
  margin:18px 0 0 14px;
  color:var(--green);
  font-weight:700;
}
#lobbyBox>.stack>div:first-child{
  min-height:0;
  padding:82px 14px 12px;
  border:1px solid var(--line);
  border-radius:28px;
  background:linear-gradient(180deg,rgba(26,34,48,.86),rgba(18,23,32,.82));
}
.player-list{
  height:100%;
  overflow:auto;
  display:grid;
  align-content:start;
  gap:10px;
  padding-right:4px;
}
.player-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:90px;
  padding:16px 18px;
  border:1px solid var(--line-soft);
  border-radius:24px;
  background:linear-gradient(180deg,rgba(27,35,49,.72),rgba(17,23,33,.72));
}
.player-item strong{font-size:22px}
.player-item .mini{display:block;margin-top:4px;font-size:16px}
.pill{
  display:none;
}
.player-actions{display:flex;gap:8px;align-items:center}
.player-actions .btn{
  min-width:132px;
  min-height:32px;
  padding:4px 12px;
  background:var(--gold);
  color:#16130a;
  font-size:14px;
}
.host-controls{
  min-height:0;
  display:flex;
  flex-direction:column;
  padding:18px 14px;
  border:1px solid var(--line);
  border-radius:28px;
  background:linear-gradient(180deg,rgba(26,34,48,.86),rgba(18,23,32,.82));
}
.host-controls h2{
  margin:0;
  color:var(--gold);
  font-size:23px;
}
.host-controls p{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  margin:0;
  color:var(--muted);
  font-size:20px;
}
.host-controls .row{display:block}
.host-controls .btn{width:100%}
.back-btn{margin-top:34px;background:#1a2030}

#gameBox{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}
#gameBox>.row.between{
  min-height:56px;
  padding:9px 15px;
  border:1px solid var(--line);
  border-radius:25px;
  background:linear-gradient(180deg,rgba(26,34,48,.9),rgba(18,23,32,.84));
}
#gameTitle{
  margin:0;
  color:var(--muted);
  font-size:20px;
  font-weight:500;
}
.phase-counter{
  margin-left:auto;
  margin-right:14px;
  color:var(--green);
  font-weight:900;
  font-size:20px;
}
.tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  color:var(--blue);
  font-weight:900;
}
.game-status{display:none}
.table-zone{
  flex:1;
  min-height:0;
}
.table-board{
  position:relative;
  width:100%;
  height:100%;
  min-height:250px;
  border-radius:50%/42%;
  background:linear-gradient(180deg,#5b3a31,#3f2925 48%,#241713);
  border:7px solid #f1f3f5;
  overflow:visible;
}
.table-surface{position:absolute;inset:0;border-radius:inherit}
.center-pot{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:0;
  padding:0;
  border:0;
  background:transparent;
  color:transparent;
}
.trick-row{display:flex;gap:10px;align-items:center;justify-content:center}
.trump-badge{
  position:absolute;
  left:12px;
  top:12px;
  z-index:3;
}
.status-cards{
  position:absolute;
  right:12px;
  top:12px;
  z-index:3;
  display:flex;
  gap:6px;
}
.status-chip{display:none}
.seat-layer{position:absolute;inset:0}
.seat-box{
  position:absolute;
  width:190px;
  height:104px;
  padding:14px 12px 10px;
  text-align:center;
  color:var(--text);
  border:2px solid #34445b;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(22,29,43,.96),rgba(9,12,22,.96));
}
.seat-box.current{border-color:var(--gold)}
.seat-box.lead,.seat-box.team{background:linear-gradient(180deg,rgba(69,23,30,.9),rgba(13,15,25,.95))}
.seat-name{
  display:inline-flex;
  min-width:76px;
  justify-content:center;
  padding:6px 16px;
  border-radius:999px;
  background:linear-gradient(90deg,#9b233d,#df3150);
  font-size:16px;
  font-weight:900;
}
.seat-box.team .seat-name,.seat-box.lead .seat-name{background:linear-gradient(90deg,#4263ad,#62a8ff)}
.seat-score{
  display:inline-flex;
  min-width:46px;
  justify-content:center;
  margin-top:8px;
  padding:5px 10px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:999px;
  color:var(--gold);
  font-weight:900;
  background:rgba(0,0,0,.28);
}
.seat-timer,.played-card{display:none}
.seat-bottom{bottom:0;left:50%;transform:translateX(-50%)}
.seat-left{left:7%;top:50%;transform:translateY(-50%)}
.seat-top{top:0;left:50%;transform:translateX(-50%)}
.seat-right{right:7%;top:50%;transform:translateY(-50%)}
.seat-bottom-left{bottom:10%;left:18%}
.seat-bottom-right{bottom:10%;right:18%}
.seat-top-left{top:10%;left:18%}
.seat-top-right{top:10%;right:18%}

.hand-panel{
  height:120px;
  flex:0 0 120px;
  margin:0;
  padding:12px 12px 10px;
  border-radius:25px;
  overflow:hidden;
}
.hand-panel>.row{height:18px}
.hand-panel .small-label{
  color:var(--gold);
  text-transform:none;
  letter-spacing:0;
  font-weight:900;
}
#myTurnLabel{font-size:12px}
.hand-grid{
  height:82px;
  display:flex;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:5px 0 7px;
}
.card-core,.mini-card,.option-card{
  position:relative;
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid #dedbd4;
  border-radius:17px;
  background:linear-gradient(180deg,#ffffff,#f0ece4);
  color:var(--ink);
  box-shadow:0 5px 12px rgba(0,0,0,.22);
}
.card-core{width:72px;height:86px}
.mini-card{width:50px;height:58px}
.option-card{width:76px;height:104px}
.card-core.red,.mini-card.red,.option-card.red{color:#e72f3c}
.card-label{font-size:22px;font-weight:900;line-height:1}
.option-card .card-label{font-size:26px}
.mini-card .card-label{font-size:19px}
.card-points{
  min-height:10px;
  margin-top:6px;
  color:#30363c;
  font-size:8px;
  font-weight:800;
}
.card-core.playable{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(99,169,255,.78),0 5px 12px rgba(0,0,0,.22);
}
.card-core.disabled{opacity:1}
button.card-core{cursor:pointer}
.card-mode-badge{
  position:absolute;
  right:4px;
  bottom:3px;
  font-size:9px;
  color:#59606a;
  font-weight:900;
}

#leadControls{
  flex:1;
  min-height:0;
}
#leadControls .panel{
  height:100%;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.mini-title{display:none}
.bid-fallback,#trumpSuit{display:none}
#bidArea,#trumpArea,#teamArea{height:100%;min-height:0}
#bidInfo,#teamHint{display:none}
.bid-grid{
  height:100%;
  display:grid;
  grid-auto-flow:column;
  grid-template-rows:repeat(2,78px);
  grid-auto-columns:104px;
  gap:24px 18px;
  align-content:center;
  overflow-x:auto;
  overflow-y:hidden;
  padding:16px;
}
.bid-option{
  border:0;
  border-radius:18px;
  background:linear-gradient(180deg,#fff,#f2eee7);
  color:var(--gold);
  font-size:28px;
  font-weight:900;
  cursor:pointer;
}
.bid-option:disabled{opacity:.52}
.trump-choices{
  height:100%;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  align-items:start;
  gap:0;
  padding:40px 28px 0;
  border:1px solid var(--line);
  border-radius:28px;
  background:linear-gradient(180deg,rgba(26,34,48,.86),rgba(18,23,32,.82));
}
.trump-choice{
  height:96px;
  border:0;
  background:rgba(17,23,33,.28);
  font-size:58px;
  cursor:pointer;
}
.trump-choice.black{color:#444b52}
.trump-choice.red{color:#ff1f35}
.trump-choice.selected{
  outline:3px solid var(--gold);
  background:rgba(244,196,79,.16);
}
#setTrumpBtn{
  position:absolute;
  left:50%;
  top:54%;
  transform:translate(-50%,-50%);
  min-width:156px;
}
#teamArea{
  position:relative;
  height:100%;
  min-height:0;
}
.team-pick-grid{
  height:100%;
  display:grid;
  grid-auto-flow:column;
  grid-template-rows:repeat(2,106px);
  grid-auto-columns:76px;
  gap:24px 12px;
  align-content:start;
  overflow-x:auto;
  overflow-y:hidden;
  padding:34px 8px 18px;
}
.team-option{
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}
.team-option.unavailable{opacity:.34}
.team-option.selected .option-card{
  border-color:var(--green);
  box-shadow:0 0 0 4px rgba(86,211,111,.55),0 5px 12px rgba(0,0,0,.22);
}
.confirm-team{
  position:absolute;
  right:0;
  bottom:0;
  min-width:220px;
  z-index:4;
}

[data-phase="bidding"] .table-zone,
[data-phase="trump"] .table-zone,
[data-phase="team"] .table-zone,
[data-phase="finished"] .table-zone,
[data-phase="round_end"] .table-zone,
[data-phase="confirm_continue"] .table-zone{display:none}
[data-phase="bidding"] #leadControls,
[data-phase="trump"] #leadControls,
[data-phase="team"] #leadControls{display:block !important}
[data-phase="playing"] #gameBox>.row.between{display:none}
[data-phase="playing"] .hand-panel{height:120px;flex-basis:120px}
[data-phase="finished"] .hand-panel,
[data-phase="round_end"] .hand-panel{display:none}

.result-box{
  flex:1;
  min-height:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.result-box.hidden{display:none !important}
#resultText{
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.result-summary{
  padding:20px;
  border:1px solid var(--line);
  border-radius:24px;
  background:linear-gradient(180deg,rgba(26,34,48,.9),rgba(18,23,32,.84));
}
.result-summary h2{
  margin:0 0 12px;
  color:var(--gold);
  font-size:34px;
}
.result-summary strong{font-size:22px}
.result-teams{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.team-score-panel{
  min-height:0;
  padding:16px;
  border:1px solid var(--line);
  border-radius:24px;
  background:linear-gradient(180deg,rgba(26,34,48,.9),rgba(18,23,32,.84));
  overflow:auto;
}
.team-score-panel h3{
  margin:0 0 12px;
  font-size:28px;
}
.team-score-panel.lead h3{color:var(--red)}
.team-score-panel.opp h3{color:var(--blue)}
.score-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  min-height:76px;
  margin-bottom:12px;
  padding:14px;
  border-radius:15px;
  background:linear-gradient(180deg,#ffffff,#f2eee7);
  color:#07101a;
}
.score-row b{font-size:24px}
.score-role{display:block;margin-top:6px;color:var(--green);font-size:15px}
.score-value{font-size:30px;font-weight:900}
.home-result{width:100%;margin-top:auto}

.modal{
  position:fixed;
  inset:0;
  z-index:90;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.64);
}
.modal-card{
  width:min(420px,90vw);
  padding:22px;
  text-align:center;
  border:1px solid var(--line);
  border-radius:24px;
  background:linear-gradient(180deg,#1a2230,#111720);
}
.sound-toggle{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:80;
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(17,23,33,.92);
  color:var(--gold);
  font-size:20px;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.32);
}
.sound-toggle.is-muted{
  color:var(--muted);
  opacity:.72;
}

@media (max-width:900px){
  .app-shell{padding:8px 10px}
  .topbar{min-height:76px;padding:9px 14px;border-radius:22px}
  .room-code{font-size:28px}
  .player-as{font-size:17px}
  .btn.small{min-height:54px;padding:10px 38px}
  .home-panel{padding:34px 26px}
  .home-card{padding:20px}
  .home-card h2{font-size:25px}
  #lobbyBox>.stack{grid-template-columns:62% 1fr}
  .player-item{min-height:90px}
  .host-controls p{font-size:20px}
  #gameBox>.row.between{min-height:56px}
  #gameTitle{font-size:28px}
  .hand-panel{height:166px;flex-basis:166px}
  .hand-grid{height:126px}
  .card-core{width:70px;height:98px}
  .bid-grid{grid-template-rows:repeat(2,78px);grid-auto-columns:104px;gap:24px 18px}
  .table-board{border-width:7px}
  .seat-box{width:190px;height:106px}
}
@media (max-width:680px){
  .home-grid{gap:12px}
  .home-card h2{font-size:20px}
  input{min-height:52px;font-size:18px}
  .btn{min-height:48px;font-size:13px}
  .room-code{font-size:24px}
  .player-as{font-size:14px}
  #gameTitle{font-size:20px}
  .card-core{width:58px;height:82px;border-radius:15px}
  .card-label{font-size:18px}
  .hand-panel{height:112px;flex-basis:112px}
  .hand-grid{height:78px}
  .seat-box{width:136px;height:78px;padding:8px}
  .seat-name{font-size:12px;min-width:60px;padding:4px 10px}
  .seat-score{font-size:12px;margin-top:5px}
}

@media (max-width:680px) and (orientation:portrait){
  .app-shell{
    width:100vw;
    height:100dvh;
    padding:7px;
  }
  .home-shell{
    align-items:stretch;
    justify-content:flex-start;
    overflow:auto;
  }
  .home-panel{
    min-height:100%;
    padding:18px 12px;
  }
  .home-panel h1{
    margin-bottom:14px;
    font-size:26px;
  }
  .home-grid{
    grid-template-columns:1fr;
    gap:12px;
  }
  .home-card{
    padding:16px;
  }
  .home-card p{
    margin-bottom:12px;
  }
  input{
    min-height:48px;
    padding:10px 14px;
    font-size:16px;
  }
  input::placeholder{
    letter-spacing:2px;
  }
  .btn{
    min-height:46px;
    padding:10px 12px;
    letter-spacing:1.6px;
  }

  .room-shell{
    gap:7px;
  }
  .topbar{
    min-height:62px;
    padding:8px 10px;
    border-radius:18px;
  }
  .room-code{
    font-size:20px;
  }
  .player-as{
    font-size:12px;
  }
  .btn.small{
    min-height:42px;
    padding:8px 14px;
    font-size:12px;
  }
  #joinBox,#closedBox,#watchBox{
    width:100%;
    padding:14px;
  }

  #lobbyBox{
    padding:0;
  }
  #lobbyBox>.stack{
    height:calc(100% - 48px);
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,1fr) auto;
    gap:7px;
  }
  .lobby-title-row{
    height:28px;
    padding-left:10px;
  }
  .lobby-title-row h2{
    margin:4px 0 0;
    font-size:16px;
  }
  .seated-count{
    margin:0 0 5px 10px;
    font-size:13px;
  }
  #lobbyBox>.stack>div:first-child{
    padding:12px;
    border-radius:18px;
  }
  .player-list{
    gap:7px;
  }
  .player-item{
    min-height:62px;
    padding:9px 10px;
    border-radius:16px;
  }
  .player-item strong{
    font-size:16px;
  }
  .player-item .mini{
    font-size:12px;
  }
  .player-actions .btn{
    min-width:58px;
    min-height:30px;
    padding:3px 8px;
    font-size:11px;
  }
  .host-controls{
    padding:10px;
    border-radius:18px;
  }
  .host-controls h2{
    font-size:17px;
  }
  .host-controls p{
    display:none;
  }
  .host-controls .row{
    display:flex;
  }
  .back-btn{
    margin-top:7px;
  }

  #gameBox{
    gap:6px;
  }
  #gameBox>.row.between{
    min-height:44px;
    padding:7px 10px;
    border-radius:18px;
  }
  #gameTitle{
    font-size:16px;
    line-height:1.15;
  }
  .phase-counter{
    margin-right:0;
    font-size:15px;
  }
  .tag{
    font-size:12px;
  }
  .table-zone{
    flex:1 1 auto;
    min-height:0;
  }
  .table-board{
    height:100%;
    min-height:0;
    border-width:4px;
    border-radius:42%/28%;
  }
  .trump-badge{
    left:6px;
    top:6px;
  }
  .status-cards{
    right:6px;
    top:6px;
  }
  .mini-card{
    width:34px;
    height:42px;
    border-radius:12px;
  }
  .mini-card .card-label{
    font-size:14px;
  }
  .mini-card .card-points{
    margin-top:2px;
    font-size:6px;
  }
  .seat-box{
    width:82px;
    height:50px;
    padding:5px;
    border-width:1px;
    border-radius:13px;
  }
  .seat-name{
    min-width:44px;
    max-width:70px;
    padding:3px 7px;
    font-size:10px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .seat-score{
    min-width:28px;
    margin-top:3px;
    padding:2px 6px;
    font-size:10px;
  }
  .seat-left{left:2%;top:50%}
  .seat-right{right:2%;top:50%}
  .seat-top{top:3px}
  .seat-bottom{bottom:3px}
  .seat-top-left{top:13%;left:7%}
  .seat-top-right{top:13%;right:7%}
  .seat-bottom-left{bottom:13%;left:7%}
  .seat-bottom-right{bottom:13%;right:7%}
  .center-pot{
    gap:4px;
  }
  .trick-row{
    gap:4px;
    flex-wrap:wrap;
    max-width:150px;
  }
  .trick-row .card-core{
    width:38px;
    height:54px;
    border-radius:11px;
  }
  .hand-panel{
    height:118px;
    flex:0 0 118px;
    padding:8px 8px 6px;
    border-radius:18px;
  }
  .hand-panel>.row{
    height:18px;
  }
  .hand-grid{
    height:84px;
    gap:7px;
    padding:4px 0 6px;
  }
  .card-core{
    width:48px;
    height:70px;
    border-radius:13px;
  }
  .card-label{
    font-size:16px;
  }
  .card-points{
    min-height:8px;
    margin-top:4px;
    font-size:6px;
  }
  .card-core.playable{
    box-shadow:0 0 0 2px rgba(99,169,255,.8),0 4px 10px rgba(0,0,0,.22);
  }

  .bid-grid{
    grid-auto-flow:row;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:none;
    grid-auto-columns:auto;
    grid-auto-rows:54px;
    gap:9px;
    align-content:start;
    overflow-x:hidden;
    overflow-y:auto;
    padding:8px 2px;
  }
  .bid-option{
    border-radius:13px;
    font-size:20px;
  }
  .trump-choices{
    height:calc(100% - 54px);
    grid-template-columns:repeat(2,1fr);
    align-content:start;
    gap:10px;
    padding:12px;
    border-radius:18px;
  }
  .trump-choice{
    height:78px;
    font-size:44px;
  }
  #setTrumpBtn{
    position:static;
    transform:none;
    width:100%;
    margin-top:8px;
  }
  .team-pick-grid{
    grid-auto-flow:row;
    grid-template-columns:repeat(4,1fr);
    grid-template-rows:none;
    grid-auto-columns:auto;
    grid-auto-rows:82px;
    gap:8px;
    overflow-x:hidden;
    overflow-y:auto;
    padding:8px 2px 58px;
  }
  .option-card{
    width:100%;
    height:78px;
    border-radius:13px;
  }
  .option-card .card-label{
    font-size:18px;
  }
  .confirm-team{
    right:0;
    bottom:0;
    width:100%;
    min-width:0;
  }

  [data-phase="playing"] .hand-panel{
    height:118px;
    flex-basis:118px;
  }
  [data-phase="bidding"] .hand-panel,
  [data-phase="trump"] .hand-panel,
  [data-phase="team"] .hand-panel{
    height:106px;
    flex-basis:106px;
  }
  [data-phase="bidding"] .hand-grid,
  [data-phase="trump"] .hand-grid,
  [data-phase="team"] .hand-grid{
    height:72px;
  }
  [data-phase="bidding"] .card-core,
  [data-phase="trump"] .card-core,
  [data-phase="team"] .card-core{
    width:42px;
    height:60px;
  }

  #resultText{
    gap:7px;
  }
  .result-summary{
    padding:12px;
    border-radius:18px;
  }
  .result-summary h2{
    margin-bottom:6px;
    font-size:19px;
  }
  .result-summary strong{
    font-size:15px;
  }
  .result-teams{
    grid-template-columns:1fr;
    gap:7px;
    overflow:auto;
  }
  .team-score-panel{
    padding:10px;
    border-radius:18px;
  }
  .team-score-panel h3{
    margin-bottom:7px;
    font-size:18px;
  }
  .score-row{
    min-height:50px;
    margin-bottom:7px;
    padding:8px;
    border-radius:12px;
  }
  .score-row b{
    font-size:16px;
  }
  .score-role{
    margin-top:2px;
    font-size:11px;
  }
  .score-value{
    font-size:20px;
  }
  .sound-toggle{
    right:9px;
    top:auto;
    bottom:132px;
    width:38px;
    height:38px;
    font-size:16px;
  }
}