/* Use the browser as a game surface. The table gets the remaining height;
   secondary information scrolls independently on shorter desktop screens. */
.app-shell{max-width:none;width:100%;padding:0 clamp(10px,1.25vw,28px)}
.app-header{height:58px}
.brand{font-size:25px}.brand-mark{width:35px;height:35px;font-size:28px;border-radius:10px}
.page-heading{padding:13px 0;gap:14px}
.page-heading h1{font-size:28px;margin:4px 0;letter-spacing:-.8px}
.page-heading .eyebrow{font-size:7px;letter-spacing:1.4px}
.page-heading p{font-size:10px}
.game-layout{grid-template-columns:minmax(0,1fr) clamp(230px,18vw,300px);gap:16px}
.hand{max-width:none}
footer{padding:8px 0;font-size:8px}

@media(min-width:761px) and (min-height:620px){
  .app-shell{height:100dvh;display:grid;grid-template-rows:58px minmax(0,1fr);padding-bottom:8px}
  main{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) 26px}
  .game-layout{min-height:0;height:100%;align-items:stretch}
  .play-area{--hand-card-width:clamp(68px,min(6vw,10dvh),120px);min-height:0;height:100%;display:grid;grid-template-rows:32px minmax(0,1fr) calc(var(--hand-card-width) * 1.49 + 80px) 48px}
  .table-topline{height:auto;padding:0 18px}
  .table-stage{height:auto;min-height:0;container-type:size}
  .seat{width:min(23%,44cqh);max-width:270px}
  .seat-top{width:min(21%,42cqh);max-width:250px}
  .seat-name{font-size:11px;padding:4px 10px;margin-top:-12%}
  .seat-meta{font-size:8px;padding:3px 6px}
  .table-welcome{top:56%;width:74%}
  .table-welcome h2{font-size:clamp(20px,3.5cqh,31px)}
  .table-welcome p{font-size:clamp(9px,1.6cqh,12px);margin:7px 0 12px}
  .table-welcome small{margin-top:8px;font-size:8px}
  .welcome-flourish{font-size:17px;margin-bottom:4px}
  .hand-area{min-height:0;height:auto;padding:5px 24px 0;display:grid;grid-template-rows:32px minmax(0,1fr)}
  .hand{height:auto;width:100%;min-height:0}
  .hand-heading{min-height:0}
  .hand .playing-card{width:var(--hand-card-width);height:calc(var(--hand-card-width) * 1.49);top:8px}
  .hand .card-corner{font-size:clamp(18px,2.4dvh,27px)}
  .hand .card-corner .suit{font-size:clamp(14px,1.9dvh,22px)}
  .hand .card-art.court{inset:24px 5px 17px}
  .hand .card-pips{font-size:clamp(13px,1.9dvh,21px);inset:28px 18px 25px}
  .hand-group-label{bottom:5px;font-size:8px}
  .game-toolbar{min-height:0;height:auto;padding:5px 18px;flex-wrap:nowrap}
  .sidebar{height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c9d1be transparent;padding-right:3px;gap:12px}
  .sidebar>*{flex-shrink:0}
  .side-card{padding:17px}
  .side-card h2{font-size:22px;white-space:normal}
  .player-list{gap:14px;margin-top:18px}
  .sidebar-note{padding-top:12px;margin-top:16px}
  .tip-card{padding:13px}
  .score-link{padding:2px 4px 7px}
}

/* Give laptop-height windows the same complete playing surface. */
@media(min-width:761px) and (min-height:620px) and (max-height:800px){
  .app-shell{grid-template-rows:50px minmax(0,1fr)}
  .app-header{height:50px}
  main{grid-template-rows:58px minmax(0,1fr)}
  .page-heading{padding:7px 0}.page-heading h1{font-size:25px;margin:0}
  .page-heading .eyebrow,.page-heading p,footer{display:none}
  .play-area{grid-template-rows:30px minmax(0,1fr) calc(var(--hand-card-width) * 1.49 + 78px) 44px}
  .table-welcome{top:61%}
  .table-welcome h2{font-size:21px}
  .table-welcome p{font-size:9px;line-height:1.5;margin:6px 0 9px}
  .welcome-flourish,.table-welcome small,.table-badge{display:none}
  .cream-button{padding:9px 14px;font-size:11px}
  .table-message{top:91%;font-size:10px}
  .seat-name{font-size:10px;padding:3px 9px}.seat-meta{font-size:7px;padding:2px 5px;margin-top:2px}
  .sidebar{gap:10px}.side-card{padding:13px 15px}.side-card h2{font-size:21px;margin-top:7px}
  .side-intro,.sidebar-note{display:none}.player-list{gap:11px;margin-top:15px}
  .player-row .portrait{height:32px;width:32px}
  .tip-card{padding:11px}.tip-card p{font-size:9px;margin-top:5px}
  .rule-summary{margin:10px 0}
}

/* Portrait phones retain normal page scrolling for the information below;
   the actual table, hand and controls occupy the first screen together. */
@media(max-width:760px){
  .app-shell{padding:0 10px}
  .app-header{height:52px}.brand{font-size:23px}
  .page-heading{height:52px;padding:6px 0;gap:8px}
  .page-heading h1{font-size:23px;margin:0;letter-spacing:-.6px}
  .page-heading .eyebrow,.page-heading p{display:none}
  .page-heading .outline-button{font-size:10px;padding:8px;flex-shrink:0}
  .game-layout{grid-template-columns:1fr;gap:12px}
  .play-area{--hand-card-width:clamp(62px,10vw,82px);height:max(490px,calc(100dvh - 112px));display:grid;grid-template-rows:30px minmax(0,1fr) calc(var(--hand-card-width) * 1.49 + 76px) 48px}
  .table-topline{height:auto}
  .table-stage{height:auto;min-height:0;container-type:size}
  .seat{width:min(29%,44cqh);max-width:185px}.seat-top{width:min(27%,42cqh);max-width:170px}
  .table-welcome{top:55%}
  .table-welcome h2{font-size:clamp(19px,3.5cqh,26px)}
  .hand-area{height:auto;min-height:0;padding:4px 10px 0;display:grid;grid-template-rows:30px minmax(0,1fr)}
  .hand-heading{min-height:0}.hand{height:auto;min-height:0;width:100%}
  .hand .playing-card{width:var(--hand-card-width);height:calc(var(--hand-card-width) * 1.49);top:8px}
  .hand-group-label{bottom:5px}
  .game-toolbar{height:auto;min-height:0;padding:5px 10px;flex-wrap:nowrap}
  .sidebar{margin-top:0}
}

@media(max-width:400px){
  .page-heading h1{font-size:20px}
  .game-toolbar .quiet-button{font-size:8px}
  .toolbar-left,.toolbar-right{gap:6px}
}

@media(min-width:761px) and (min-height:620px) and (max-height:680px){
  .table-welcome h2{font-size:19px}
  .table-welcome p{font-size:8px;margin:5px 0 7px}
  .table-welcome .cream-button{font-size:10px;padding:8px 13px}
}

@media(min-width:761px) and (min-height:620px), (max-width:760px){
  .trick-card{--table-card-height:clamp(76px,28cqh,130px);height:var(--table-card-height);width:calc(var(--table-card-height) * .672);left:calc(50% - var(--table-card-height) * .336);top:calc(76% - var(--table-card-height) * .5)}
  .trick-card .card-corner{font-size:clamp(13px,4.8cqh,20px)}
  .trick-card .card-corner .suit{font-size:clamp(11px,4cqh,17px)}
}
@container (max-height:330px){
  .trick-card .card-corner{left:4px;top:4px}
  .trick-card .card-corner.bottom{left:auto;top:auto;right:4px;bottom:4px}
  .trick-card .card-art.court{inset:18px 3px 13px}
  .trick-card .card-pips{inset:21px 12px 20px;font-size:10px}
  .trick-card .court-title{font-size:4px;bottom:5px}
}

/* Large desktops need larger game pieces, not just more empty felt.
   Height limits still protect shallow ultrawide windows. */
@media(min-width:2000px) and (min-height:900px){
  .play-area{--hand-card-width:clamp(120px,min(6vw,11.5dvh),240px);grid-template-rows:40px minmax(0,1fr) calc(var(--hand-card-width) * 1.49 + 110px) 64px}
  .seat{max-width:clamp(270px,15vw,600px)}
  .seat-top{max-width:clamp(250px,14vw,560px)}
  .seat-name{font-size:clamp(12px, .6vw,23px);padding:7px 16px;gap:8px}
  .seat-name span{font-size:clamp(8px,.35vw,13px)}
  .seat-meta{font-size:clamp(9px,.4vw,15px);max-width:260px;padding:5px 10px}
  .seat .speech-bubble{font-size:clamp(12px,.55vw,21px);max-width:300px;padding:14px 20px}
  .seat .speech-bubble[data-kind="call"]{font-size:clamp(16px,.7vw,27px)}
  .hand-area{grid-template-rows:44px minmax(0,1fr);padding-top:8px}
  .hand .playing-card{top:12px}
  .hand-group-label{font-size:clamp(9px,.35vw,13px);bottom:8px}
  .you-label{font-size:18px}.small-avatar{width:36px;height:36px}
  .team-badge{font-size:10px}#hand-hint,#turn-label{font-size:14px}
  .game-toolbar .quiet-button,.announce-button{font-size:15px}
  .table-topline{font-size:14px}.room-label{font-size:12px}.tiny-label{font-size:9px}
  .table-message{font-size:clamp(14px,.6vw,23px);padding:9px 18px}
  .table-welcome h2{font-size:clamp(31px,1.35vw,52px)}
  .table-welcome p{font-size:clamp(12px,.6vw,23px)}
  .table-welcome .cream-button{font-size:clamp(14px,.6vw,23px);padding:16px 24px}
  .table-welcome small{font-size:clamp(10px,.4vw,15px)}
  .trick-card{--table-card-height:clamp(130px,min(8vw,16dvh,28cqh),300px)}

  /* Card artwork follows its own card size, including cards in flight. */
  .playing-card{container-type:inline-size;border-radius:12px}
  .playing-card .card-corner{font-size:24cqw;top:5%;left:7%}
  .playing-card .card-corner .suit{font-size:20cqw;margin-top:3cqw}
  .playing-card .card-corner.bottom{top:auto;left:auto;right:7%;bottom:5%}
  .playing-card .card-art{font-size:48cqw;inset:23% 15%}
  .playing-card .ace-ornament{width:43cqw;height:59cqw}
  .playing-card .card-art.court{inset:21% 5% 14%}
  .playing-card .court-title{font-size:6cqw;bottom:7%;letter-spacing:1.2px}
  .playing-card .card-pips{font-size:17cqw;inset:24% 23% 22%}
}