/* Requirements v1.4: desktop layout budgets the actual browser viewport.
   No page overflow is hidden: content reflows into explicit, flexible rows. */
/* The online room stays on green felt from setup through the waiting room and play. */
body:has(.online-app){background:#10281f}
.online-app{--paper:#173a2c;--ink:#fff9e9;--muted:#c6d7c4;--line:#9ab79b55;color:var(--ink)}
.online-app .masthead{border-color:var(--line)}
.online-app .brand,.online-app .quiet{color:var(--ink)}
.online-app .quiet{border-color:#b4cbb377}.online-app .quiet:hover:not(:disabled){background:#2d5540}
.online-lobby{background:radial-gradient(ellipse at top,#28573f,#173a2c 75%);border-color:#d8c6785e;box-shadow:0 14px 38px #061a1470}
.online-room-code{background:#123124;border-color:#d8c67888}.online-room-code strong{color:#f2db92}
.online-lobby .eyebrow{color:#dccc82}.waiting-seat{background:#214936;border-color:#b4cbb355}.waiting-seat small{color:#c6d7c4}
.invite-row input{background:#0d271e;color:#fffdf2;border-color:#b4cbb377}
.online-app .score-row.current{--muted:#385737}.online-app .score-row.current>strong{color:#173a2c}
.online-app .score-row:not(.current).you .avatar{background:#315d46}
.waiting-seat b{display:flex;align-items:center;justify-content:space-between;gap:6px}.waiting-seat b>span{min-width:0}.waiting-seat .seat-control{padding:5px 6px;font-size:11px;flex:none}.waiting-seat.empty:has(.seat-control){opacity:1}
.lobby-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:10px}.lobby-actions>button{min-height:40px;margin:0}
.online-self{justify-self:center;border-radius:8px}
.online-play-area.your-turn .online-self{background:transparent;outline:2px solid #f5d66f;outline-offset:5px;box-shadow:none}
.online-play-area.your-turn .online-self>b{color:#ffe38d}
.online-play-area.your-turn .hand-toolbar{background:#e8bf5826;border-radius:8px;padding-left:8px;padding-right:8px;box-shadow:inset 4px 0 #f5d66f,inset 0 0 0 1px #e8bf5855}
.online-play-area.your-turn #online-hand-heading{color:#ffe38d}
@media (min-width:1001px) {
  .app{height:100dvh;display:grid;grid-template-rows:56px minmax(0,1fr);padding:0 24px}
  .masthead{height:56px;gap:12px}.brand{font-size:25px;gap:10px}.brand small{margin-top:3px;font-size:8px}.brand-mark{width:29px;height:36px;font-size:25px}.local-label{display:none}
  .app>main{min-height:0;display:flex;flex-direction:column}
  .opening{min-height:0;flex:1;margin:0 -24px;padding:12px 24px;display:flex;flex-direction:column;justify-content:center;gap:8px;overflow:visible}
  .opening:has(.opening-resume:not([hidden])) .opening-intro{display:flex;align-items:center;gap:16px}.opening:has(.opening-resume:not([hidden])) .opening-intro>.eyebrow{display:none}
  .opening-intro{margin:0 auto}.opening-intro h1{font-size:29px;margin:3px 0}.opening-intro p{font-size:14px}.opening .eyebrow{font-size:10px}
  .opening-grid{width:100%;margin:0 auto;gap:16px}.opening-card{padding:12px 18px;border-radius:12px}.opening-card h2{font-size:23px;margin:3px 0 8px}
  .opening-card label{font-size:13px;gap:4px;margin-bottom:8px}.opening-card input,.opening-card select{min-height:36px;padding:7px 9px;font-size:13px}
  .avatar-choice{height:36px;width:44px;margin-bottom:8px}.avatar-choice .avatar{width:29px;height:29px}
  .opening-extra{margin:0}.opening-extra summary{padding:2px 0 6px}.opening-extra .opening-fields{padding-top:0}
  .opening-note{font-size:12px;line-height:1.35;margin:4px 0 8px}.opening-submit,.opening-actions .opening-submit{min-height:38px;font-size:13px;padding:9px 10px}.opening-actions{gap:8px}
  .opening-card-mark{display:none}.opening-back{margin:0 auto}.opening-resume{width:100%;margin:0 auto;padding:7px 12px}.opening-resume strong{font-size:15px}.opening-resume .primary{padding:10px 14px}.opening-status{margin:0 auto;padding:6px 12px}
  #play-screen{flex:1;min-height:0;display:flex;flex-direction:column}
  .heading{padding:6px 0;min-height:25px}.heading h1{font-size:18px;margin:0}.game-meta small{display:none}.game-meta b{font:13px Arial,sans-serif}
  .first-guide{gap:12px;padding:5px 9px;margin-bottom:6px}.first-guide-top{min-width:155px}.first-guide .eyebrow{display:none}.first-guide-top h2{font-size:14px}.guide-steps p{line-height:1.3}
  .table-banner{padding:6px 10px;margin-bottom:6px;font-size:12px}
  .game-layout,.online-game-layout{flex:1;min-height:0;grid-template-columns:minmax(0,1fr) 230px;gap:18px}
  .play-area,.online-play-area{min-height:0;display:grid;grid-template-columns:minmax(350px,1fr) auto;grid-template-rows:26px minmax(290px,1fr) 49px 94px 18px;grid-template-areas:'turn turn' 'felt felt' 'controls controls' 'hand reactions' 'note note';column-gap:12px}
  .table-toolbar{grid-area:turn;height:auto;margin:0 0 4px}.turn-chip{padding:5px 10px}
  .felt,.many-seats,.online-felt{grid-area:felt;min-height:0;height:100%;padding:10px 16px;grid-template-columns:repeat(var(--opponents,3),minmax(0,1fr));grid-template-rows:76px minmax(102px,1fr) 92px;gap:0;overflow:visible;border-radius:18px}
  .felt:after{inset:12px}
  .opponents-row,.online-rail{display:contents!important}
  .seat,.seat.north,.seat.west,.seat.east,.many-seats .seat,.online-seat{grid-row:1;grid-column:auto;justify-self:center;width:auto;min-width:0;max-width:100%;flex-direction:column;gap:3px;align-self:center}
  .identity{display:grid;grid-template-columns:auto auto;align-items:center;gap:0 5px}.identity .avatar{grid-row:1/3;margin:0}.seat small.count{margin:0;display:block;font-size:9px}.seat-name{font-size:11px}
  .seat-piles,.many-seats .seat-piles{flex-direction:row;gap:5px}.many-seats .opponent-stock{display:block}.opponent-stock>small{font-size:9px;margin:2px 0 0}
  .felt .card.small,.many-seats .card.small,.many-seats .opponent-stock .card{width:25px;height:36px;font-size:20px}.felt .card.small .corner{font-size:6px}.felt .card.small.wild .value{font-size:9px}
  .table-center,.many-seats .table-center,.online-center{grid-column:1/-1;grid-row:2;align-self:center}.table-wordmark,.online-center .table-wordmark,.build-title,.table-footnote{display:none}
  .builds,.online-center .builds{display:flex;max-width:none;gap:14px;margin:0;justify-content:center}.builds .card{width:60px;height:84px;font-size:36px}.pile-wrap{gap:4px}
  .self-area,.many-seats .self-area,.online-self{grid-column:1/-1;grid-row:3;align-self:center}.self-label{margin-bottom:3px}.self-label .avatar{width:19px;height:19px}
  .self-discards .card,.self-piles>.pile-wrap>.card,.online-self-piles .card{width:41px;height:57px;font-size:29px}.self-piles{gap:18px}.self-discards{gap:9px}
  .draw-area{left:18px;bottom:12px;display:flex;align-items:center;gap:8px}.draw-area .card{width:30px;height:42px}.draw-area>small{margin:0;font-size:9px;text-align:left}
  .hand-toolbar{grid-area:controls;padding:5px 2px;flex-wrap:nowrap}.hand-toolbar p{margin:4px 0 0;font-size:12px}.hand-actions{flex-wrap:nowrap;padding:0}.hand-actions .quiet{padding:8px 10px}.hand-actions .primary{min-height:34px;padding:8px 12px;font-size:13px}
  .hand{grid-area:hand;min-height:0;padding:8px 0 4px;overflow:visible;gap:9px}.hand .card,.online-app .hand .card{width:60px;height:85px;font-size:35px}
  .reactions{grid-area:reactions;margin:0;gap:4px}.reactions>span{font-size:9px;letter-spacing:0}.reactions button{min-width:30px;min-height:32px;font-size:18px;padding:3px}
  .hand-note,.online-app .hand-note{grid-area:note;margin:0;font-size:10px;line-height:16px;max-width:none}
  .sidebar,.online-columns{padding:4px 0 0 14px;min-height:0}.section-heading{margin-bottom:7px}.section-heading h2,.online-columns h2{font-size:18px;margin:0 0 7px}.sidebar>.section-heading h2{font-size:16px;white-space:nowrap}.sidebar>.section-heading>span{font-size:7px;letter-spacing:.5px}
  .score-row{padding:7px 0;gap:7px}.score-row>strong{font-size:23px}.score-row small{font-size:10px;margin-top:2px}.progress-track{margin-top:4px}.score-note{margin:7px 0;font-size:11px}
  .tip,.score-note{display:none}.activity,.online-columns section+section{margin-top:12px}.activity li,.online-columns li{font-size:11px;line-height:1.35;padding:5px 0}.session-score{font-size:10px;line-height:1.4;margin-top:8px}
  footer{flex:none;margin:5px 0 0;padding:5px 0;font-size:9px;line-height:12px}
  .online-toolbar{margin:5px 0 7px;min-height:45px}.online-toolbar h2{font-size:20px;margin:3px 0}.online-toolbar p{font-size:12px}.online-toolbar>div:first-child{display:grid;grid-template-columns:auto auto;gap:0 15px;align-items:center}.online-toolbar p{grid-column:1/-1}
  #table-section{flex:1;min-height:0;display:flex;flex-direction:column}.online-play-area{grid-template-rows:minmax(342px,1fr) 49px 94px 18px;grid-template-areas:'felt felt' 'controls controls' 'hand reactions' 'note note'}
  .online-felt{padding:20px 24px 24px;grid-template-rows:88px minmax(102px,1fr) 108px}
  .online-seat{display:grid;grid-template-columns:auto auto;gap:2px 4px;justify-items:center}.online-seat .avatar{grid-row:1/3;width:25px;height:25px}.online-seat-private{grid-column:2;margin:0}.online-seat-private .card{width:13px;height:18px}.online-seat-count,.online-seat-piles{grid-column:1/-1}.online-seat.current{padding:4px}.online-seat-name{font-size:11px}.online-seat-piles{gap:3px}.online-seat-piles .card{width:25px;height:36px;font-size:20px}.online-seat-piles .card .corner{font-size:6px}.online-seat-piles .card.wild .value{font-size:9px}
  .online-self{display:grid;grid-template-columns:auto auto;justify-content:center;gap:3px 6px}.online-self .avatar{width:23px;height:23px}.online-self-piles{grid-column:1/-1;margin:0;gap:9px;flex-wrap:nowrap}.online-self-piles small{margin:0}.online-self-piles .pile-wrap:first-child{margin-right:9px}
  .online-deck{position:absolute;left:24px;bottom:24px;display:flex;gap:8px;margin:0}.online-deck .card{width:30px;height:42px}.online-center>small{position:absolute;right:24px;bottom:24px;font-size:9px}
  .online-lobby{padding:15px 22px;margin:auto;max-width:810px;width:100%}.online-lobby h1{font-size:27px;margin:5px 0 12px}.online-room-code{padding:8px;margin-bottom:8px}.online-room-code strong{font-size:27px;margin-top:2px}.online-lobby p{margin:6px 0;font-size:12px}.online-lobby .waiting-seats{grid-template-columns:repeat(3,minmax(0,1fr));margin:10px 0;gap:8px}.waiting-seat{padding:8px 10px}.waiting-seat b{font-size:14px;margin-top:3px}.online-lobby-options{font-size:12px!important;margin:7px 0!important}.online-lobby #start-room{padding:10px 18px}
  dialog{max-height:calc(100dvh - 24px);padding:18px;width:calc(100% - 40px)}dialog h2{font-size:25px;margin:8px 0}dialog p{font-size:12px;line-height:1.4;margin:8px 0}dialog h3{font-size:18px;margin:10px 0 4px}.wide{margin-top:8px;padding:10px 16px}
  #rules-dialog{max-width:930px}.rules-list{display:grid;grid-template-columns:1fr 1fr;gap:8px 30px;font-size:12px;line-height:1.4;margin:10px 0;padding-left:20px}.rules-list li{margin:0;padding-right:5px}
  #result .trophy{font-size:30px;margin-top:5px}#result-scores{margin:8px 0}#result .score-row{padding:5px 0}
  .online-result{position:absolute;inset:auto;grid-column:1/-1;grid-row:1/-1;margin:0;padding:14px;width:min(490px,90%)}.online-result h2{font-size:24px}.online-result p{margin:7px 0}.online-result .result-rows{gap:2px;margin:8px 0}
}
@media (min-width:1001px) and (max-height:800px) {
  .score-row{padding-top:4px;padding-bottom:4px}.score-row.current{padding-top:4px;padding-bottom:4px}
  .activity li:nth-child(n+3),.online-columns li:nth-child(n+3){display:none}
}
/* Tablet browsers need the same compact table geometry as desktop. The former
   610px table pushed the private hand below Safari's visible content area. */
@media (min-width:701px) and (max-width:1000px) {
  .online-app{padding:0 16px}.online-app .masthead{height:56px;gap:12px}.online-app .brand{font-size:25px;gap:10px}.online-app .brand small{font-size:8px;margin-top:3px}.online-app .brand-mark{width:29px;height:36px;font-size:25px}
  .online-toolbar{margin:5px 0 7px;min-height:45px}.online-toolbar h2{font-size:20px;margin:3px 0}.online-toolbar p{font-size:12px}.online-toolbar>div:first-child{display:grid;grid-template-columns:auto auto;gap:0 15px;align-items:center}.online-toolbar p{grid-column:1/-1}
  .online-play-area{display:grid;grid-template-columns:minmax(330px,1fr) auto;grid-template-rows:max(342px,calc(100dvh - 320px)) 64px 94px 32px;grid-template-areas:'felt felt' 'controls controls' 'hand reactions' 'note note';column-gap:12px}
  .online-felt{grid-area:felt;display:grid;min-height:0;height:100%;padding:20px 24px 24px;grid-template-columns:repeat(var(--opponents,3),minmax(0,1fr));grid-template-rows:88px minmax(102px,1fr) 108px;gap:0;overflow:visible}.online-felt:after{inset:12px}
  .online-rail{display:contents}.online-seat{grid-row:1;grid-column:auto;justify-self:center;align-self:center;min-width:0;max-width:100%;display:grid;grid-template-columns:auto auto;gap:2px 4px;justify-items:center}.online-seat .avatar{grid-row:1/3;width:25px;height:25px}.online-seat-private{grid-column:2;margin:0}.online-seat-private .card{width:13px;height:18px}.online-seat-count,.online-seat-piles{grid-column:1/-1}.online-seat.current{padding:4px}.online-seat-name{font-size:11px}.online-seat-piles{gap:3px}.online-seat-piles .card{width:25px;height:36px;font-size:20px}.online-seat-piles .card .corner{font-size:6px}.online-seat-piles .card.wild .value{font-size:9px}
  .online-center{grid-column:1/-1;grid-row:2;align-self:center}.online-center .table-wordmark,.online-center .build-title{display:none}.online-center .builds{display:flex;max-width:none;gap:14px;margin:0;justify-content:center}.online-center .builds .card{width:60px;height:84px;font-size:36px}.online-felt .pile-wrap{gap:4px}
  .online-self{grid-column:1/-1;grid-row:3;align-self:center;display:grid;grid-template-columns:auto auto;justify-content:center;gap:3px 6px}.online-self .avatar{width:23px;height:23px}.online-self-piles{grid-column:1/-1;margin:0;gap:9px;flex-wrap:nowrap}.online-self-piles .card{width:41px;height:57px;font-size:29px}.online-self-piles small{margin:0}.online-self-piles .pile-wrap:first-child{margin-right:9px}
  .online-deck{position:absolute;left:24px;bottom:24px;display:flex;gap:8px;margin:0}.online-deck .card{width:30px;height:42px}.online-center>small{position:absolute;right:24px;bottom:24px;font-size:9px}
  .online-play-area .hand-toolbar{grid-area:controls;padding:5px 2px;flex-wrap:nowrap;gap:8px}.online-play-area .hand-toolbar p{margin:4px 0 0;font-size:12px;line-height:16px}.online-play-area .hand-actions{flex-wrap:nowrap;gap:5px}.online-play-area .hand-actions .quiet{padding:8px;font-size:11px}.online-play-area .hand-actions .primary{min-height:34px;padding:8px 10px;font-size:13px}
  .online-play-area .hand{grid-area:hand;min-height:0;padding:8px 0 4px;gap:9px;overflow:visible}.online-app .hand .card{width:60px;height:85px;font-size:35px}.online-play-area .reactions{grid-area:reactions;margin:0;gap:4px}.online-play-area .reactions>span{font-size:9px;letter-spacing:0}.online-play-area .reactions button{min-width:30px;min-height:32px;font-size:18px;padding:3px}.online-app .hand-note{grid-area:note;margin:0;max-width:none;font-size:10px;line-height:16px}
  .online-result{position:absolute;grid-column:1/-1;grid-row:1/-1;inset:auto;margin:0;padding:14px;width:min(490px,90%)}
}
/* History alone scrolls in chat; the composer and emoji controls never shrink. */
.chat-panel{height:min(440px,calc(100dvh - 75px))}.chat-panel header,#chat-form,.chat-emoji-picker,#chat-empty{flex:none}#chat-messages{min-height:0}#chat-text{resize:none;height:62px}

.header-controls{display:flex;flex-direction:column;align-items:flex-end;gap:3px;min-width:0}.release-number{font:11px/12px Arial,Helvetica,sans-serif;color:var(--muted);white-space:nowrap}.header-controls nav{flex-wrap:wrap;justify-content:flex-end}@media(max-width:700px){.header-controls{margin-left:auto;max-width:100%}}
.online-center .builds .pile-wrap>small{font-size:9px}

.online-app .table-banner,.online-app .first-guide{background:#214936;border-color:#9ab79b55;color:#fff9e9}.online-app .guide-steps p{color:#c6d7c4}.online-app .first-guide h2,.online-app .guide-steps strong,.online-app .table-banner strong{color:#fff9e9}