/* Layout follows the usable viewport, including a foldable opening mid-game. */
html{overflow-x:clip}#app{min-width:0}button,input{max-width:100%}
@media(min-width:700px) and (min-height:600px){
  .home{max-width:740px}.home-actions{width:min(100%,520px);align-self:center}.home-brand .wordmark{max-width:500px}
  .page{max-width:900px}.online-page{max-width:1100px}.online-modes{gap:24px}.mode-button,.mode-button.mode-2{min-height:190px}
  .game-shell{max-width:1000px}.game-shell .table-top.roster{grid-template-columns:repeat(var(--opponents),minmax(0,1fr));grid-template-rows:1fr;height:154px;gap:12px}.roster .opponent-seat{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:10px}.roster .opponent-info{max-width:180px}.roster .opponent-hand{width:100%;height:80px}.roster .hand-numbers .playing-card{max-width:49px;width:min(49px,calc((100% + (var(--count) - 1)*8px)/var(--count)))}
  .game-shell .my-hand{height:clamp(240px,33dvh,310px)}.game-shell .play-controls{height:50px;min-height:50px}.game-shell .play-controls .btn{height:50px;font-size:23px}.game-shell .deck{height:130px}
}
@media(min-width:1000px) and (min-height:600px){
  .home{max-width:1260px;min-height:100dvh;height:auto;display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:auto minmax(480px,1fr);gap:22px 70px;padding:30px 48px 40px}.home-tools{grid-column:1/-1}.home-brand{height:100%;min-height:420px;padding:0}.home-brand .wordmark{width:92%;max-height:500px}.home-brand .mascot{width:27%;inset-inline-end:-1%;top:54%}.home-actions{width:100%;max-width:470px;align-self:center;justify-self:center;gap:28px}.home-actions .two-buttons>.btn{min-height:80px;font-size:27px}.home-actions>.btn{min-height:67px;font-size:25px}
  .online-page{max-width:1200px;padding:30px 48px 45px}.online-modes{margin-top:60px;gap:30px}.mode-button .mode-icon,.mode-button.mode-2 .mode-icon{width:160px;height:120px}.mode-button b{font-size:48px}.online-other{max-width:700px;grid-template-columns:1fr 1fr;align-items:center}.online-other>.text-button{font-size:19px}
  .mode-page{max-width:1100px;display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:auto 1fr;gap:35px 70px;padding:30px 48px}.mode-page .page-top{grid-column:1/-1}.mode-intro .mode-icon{width:290px;height:230px}.mode-actions{align-content:center;gap:28px}.mode-actions .btn{min-height:70px}
  .setup-page{max-width:960px}.setup-page .form-panel{max-width:620px;margin-inline:auto}.setup-page .page-top{margin-bottom:25px}.room-setup .setup-illustration{height:60px;margin-bottom:20px}.room-setup .setup-illustration>svg{width:60px;height:60px}
  .matchmaking-page{max-width:1180px;padding:30px 48px}.match-seats.seats-6{grid-template-columns:repeat(6,minmax(0,1fr))}.match-seats.seats-4{grid-template-columns:repeat(4,minmax(0,1fr))}.match-photo,.seats-6 .match-photo,.search-avatar,.seats-6 .search-avatar,.friend-slot>button{width:115px;height:115px;border-radius:31px}.seats-6 .match-seat>strong,.match-seat>strong{font-size:18px}.match-bottom{width:min(100%,520px);align-self:center}.party-online-friends,.party-invite{width:100%;max-width:650px;align-self:center}.party-online-friends [data-party-friends]{max-height:160px}
  .game-shell{max-width:1440px;width:100%;padding:18px 30px 20px;gap:20px;grid-template-columns:minmax(280px,.42fr) minmax(0,1fr);grid-template-rows:60px minmax(150px,1fr) minmax(235px,35dvh);grid-template-areas:"header header" "opponents bank" "opponents hand"}.game-header{grid-area:header;height:60px}.game-shell .table-top,.game-shell .table-top.roster{grid-area:opponents;display:flex;flex-direction:column;height:100%;max-height:none;gap:14px;padding:0;justify-content:center;overflow:hidden}.game-shell .table-top.roster .opponent-seat{height:calc((100% - 28px)/3);min-height:100px;max-height:190px;padding:12px;flex:none}.game-shell .opponent-info .player-name{font-size:17px}.game-shell .opponent-info>span:last-child{font-size:12px}.game-shell .opponent-hand{height:85px;width:100%;min-height:0}.game-shell .bank-area{grid-area:bank;padding:10px}.game-shell .deck,.game-shell:has(.roster-3) .deck{height:clamp(100px,19dvh,180px)}.game-shell .deck-face b,.game-shell:has(.roster-3) .deck-face b{font-size:clamp(75px,13dvh,125px)}.game-shell .turn-ribbon,.game-shell:has(.roster-3) .turn-ribbon{font-size:19px;margin-bottom:13px}.game-shell .deck-count{font-size:13px}.game-shell .my-hand{grid-area:hand;margin:0;border:2px solid var(--ink);border-radius:28px;height:100%;padding:15px 22px 18px}.game-shell .hand-heading>span{font-size:20px}.game-shell .hand-score>strong{font-size:34px}.game-shell .my-hand>.hand-numbers .playing-card{max-height:145px}.game-shell .table-event{font-size:13px}
  .profile-panel{max-width:720px}.leaderboard{font-size:15px}.leaderboard th{font-size:14px}.leaderboard button{font-size:16px}.leaderboard th,.leaderboard td{padding:12px 8px}.profile-stats{gap:15px}.friends-panel{max-width:580px}
}
/* Landscape phones and wide, short windows put the hand beside the bank. */
@media(min-width:600px) and (max-height:599px){
  .home{max-width:1100px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:45px 1fr;gap:10px 35px;padding:12px 30px 20px;height:100dvh}.home-tools{grid-column:1/-1}.home-brand{min-height:0;padding:0}.home-brand .wordmark{max-height:65dvh}.home-actions{gap:12px}.home-actions .btn{min-height:43px;font-size:19px}.home-account .icon-button{min-height:34px}.home-actions .install-link{font-size:11px}
  .game-shell{max-width:1100px;padding:6px 12px 12px;grid-template-columns:1fr 1.4fr;grid-template-rows:42px 100px minmax(0,1fr);grid-template-areas:"header header" "opponents hand" "bank hand";gap:6px 12px}.game-header{grid-area:header;height:42px}.game-shell .table-top,.game-shell .table-top.roster{grid-area:opponents;height:100%;display:flex;flex-direction:row;gap:5px;min-height:0}.game-shell .table-top.roster .opponent-seat{display:flex;flex:1;flex-direction:column;justify-content:center;padding:3px;gap:3px;height:100%;min-width:0}.roster .opponent-info{grid-template-columns:18px minmax(0,1fr);gap:3px}.roster .opponent-info .avatar{width:18px;height:18px}.roster .opponent-info .player-name{font-size:10px}.roster .opponent-info>span:last-child{font-size:8px}.roster .opponent-hand{height:44px;max-width:100%}.game-shell .bank-area{grid-area:bank}.game-shell .my-hand{grid-area:hand;height:100%;margin:0;border:2px solid var(--ink);border-radius:20px;padding:8px 10px 12px}.game-shell .my-hand>.hand-numbers .playing-card{max-height:120px}.game-shell .play-controls .btn{font-size:18px}.game-shell .deck,.game-shell:has(.roster-3) .deck{height:55px}
  .online-page{padding:12px 24px 20px}.online-page .page-top{margin-bottom:10px}.online-modes{grid-template-columns:repeat(3,minmax(0,1fr));margin:5px 0 20px}.mode-button,.mode-button.mode-2{grid-column:auto;flex-direction:row;aspect-ratio:auto;min-height:110px;gap:8px}.mode-button .mode-icon,.mode-button.mode-2 .mode-icon{width:65px;height:60px}.mode-button b{font-size:26px}.online-other{grid-template-columns:1fr 1fr;gap:12px;padding-top:0}.online-other .btn{min-height:44px;font-size:18px}
}