/* Phone-first composition. Scrolling belongs to content, never the fixed chrome. */
:root{--surface:#fffefa;--line:#dfe5d9;--muted:#63736a;--green:#234a41}
[hidden]{display:none!important}
button,a,input,select,summary{touch-action:manipulation}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #c68826;outline-offset:3px}
.portrait-app{min-height:100svh}
.portrait-app .topbar{padding:10px 16px;min-height:60px}
.portrait-app main{padding:8px 16px 24px}
.portrait-app .brand{font-size:16px;letter-spacing:0}
.portrait-app .brand span{width:30px;height:30px;border-radius:10px}
.portrait-app h1{font-size:26px}
.portrait-app .hall-intro{padding:6px 0 12px}
.portrait-app .hall-intro h1{font-size:26px;margin:0 0 4px}
.portrait-app .hall-intro p{font-size:12px;margin:0}
.portrait-app .join-entry{margin:0 0 8px}
.portrait-app .catalog-heading{margin:0 0 6px}
.catalog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.portrait-app .catalog-game{position:relative;margin:0;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:17px;display:flex;flex-direction:column;gap:8px;min-width:0}
.portrait-app .game-icon{width:42px;height:42px;min-width:42px;font-size:26px;border-radius:12px;align-self:flex-start}
.portrait-app .game-info{display:flex;flex-direction:column;flex:1;min-width:0}
.portrait-app .game-info h3{font-size:15px;line-height:1.4;margin:0 0 4px}
.portrait-app .game-meta{font-size:11px;line-height:1.5;margin:0;color:#63736a}
.portrait-app .game-description{font-size:12px;line-height:1.5;margin:6px 0 10px;flex:1}
.portrait-app .game-info .primary{width:100%;min-height:44px;padding:8px 10px;font-size:13px;margin-top:auto}
.portrait-app .resume-section{margin:0 0 10px}
.portrait-app .resume-section h2{font-size:13px;margin:0 0 5px}
.portrait-app .resume-row{padding:8px 10px;min-height:48px;margin-bottom:5px}
.portrait-app .foot{font-size:11px;margin:14px 0 0}
.portrait-app .room-toolbar{padding:4px 0 8px;border-bottom:1px solid var(--line);margin-bottom:10px}
.portrait-app .room-toolbar .eyebrow{font-size:11px;margin:0 0 3px;letter-spacing:0}
.portrait-app .room-toolbar .room-code{font-size:18px;letter-spacing:2px}
.portrait-app .room-toolbar>.row:last-child{margin-top:0!important}
.portrait-app .room-toolbar .quiet{min-height:32px;padding:6px 8px}
.portrait-app .room-toolbar .secondary{min-height:44px;padding:8px 12px;font-size:12px}
.portrait-app .card{padding:14px;border-radius:16px;margin-bottom:10px;box-shadow:none}
.portrait-app .hero{padding:8px 0 4px}
.portrait-app .hero h1{font-size:24px;margin:0 0 6px}
.portrait-app .teams{margin:8px 0;gap:8px}
.portrait-app .team{padding:10px 8px}
.portrait-app .team button{min-height:44px}
.portrait-app .table-extras{margin:8px 0;padding:0 10px;border:1px solid var(--line);border-radius:12px;background:#fff9}
.portrait-app .table-extras>summary{min-height:44px;display:flex;align-items:center}
.portrait-app .table-extras>summary:after{content:'＋';margin-left:auto}
.portrait-app .table-extras[open]>summary:after{content:'−'}
.portrait-app .backdrop{padding:12px 12px max(12px,env(safe-area-inset-bottom));z-index:100;overscroll-behavior:contain}
.portrait-app .sheet{position:relative;border-radius:22px;max-height:calc(100dvh - 30px);padding:20px;overflow:auto}
.portrait-app .sheet-close{position:absolute;right:8px;top:6px;font-size:24px;min-width:44px;min-height:44px}
.portrait-app .login-card h2{padding-right:36px}
.portrait-app .sheet p{margin-bottom:12px}
.portrait-app .invitation h1{font-size:26px}
.portrait-tabs{display:flex;gap:4px;padding:4px;background:#e6ebe2;border-radius:12px;margin:8px 0;flex-shrink:0}
.portrait-tabs>button{flex:1;min-width:0;min-height:44px;border:0;border-radius:9px;background:transparent;font-size:12px;font-weight:700;color:#596d61;padding:6px 3px}
.portrait-tabs>button[aria-selected=true]{background:#fffefa;color:#234a41;box-shadow:0 2px 5px #234a4110}
.portrait-app .sp-welcome{padding:8px 0}
.portrait-app .sp-emblem{font-size:28px}
.portrait-app .sp-welcome h1{font-size:22px;margin:2px 0 5px}
.portrait-app .sp-welcome p{margin:4px 0;font-size:12px}
.portrait-app .sp-art-trio img{height:70px;width:25%}
.portrait-app .lc-intro{padding:10px 0}
.portrait-app .lc-intro h1{font-size:24px}
.portrait-app .lc-landmarks{margin:8px 0;font-size:28px}
.portrait-app .lc-landmarks>span{font-size:26px}
.portrait-app .other-form{margin:8px 0}
.portrait-app .other-form label{margin:8px 0 4px}
.portrait-app .lc-heading{margin:0 0 6px}
.portrait-app .lc-heading .eyebrow{display:none}
.portrait-app .lc-heading h2{font-size:18px;margin:0}
.portrait-app .lc-deck-count{padding:6px 10px;font-size:11px;display:flex;gap:5px;align-items:center}
.portrait-app .lc-deck-count b{font-size:17px}
.portrait-app .score-list{gap:6px;margin:6px 0;flex-wrap:wrap}
.portrait-app .score-list>span{padding:6px 10px;font-size:12px}
.portrait-app .lc-board{padding:6px;border-radius:12px}
.portrait-app .lc-player{margin:3px 0;font-size:11px}
.portrait-app .lc-route{padding:5px 2px}
.portrait-app .lc-stack{min-height:26px;padding:4px 0;gap:2px;max-height:56px;overflow:auto}
.portrait-app .lc-stack .lc-empty{padding-top:0}
.portrait-app .lc-discards{margin-bottom:6px}
.portrait-app .lc-discard-label{margin:5px 0}
.portrait-app .lc-discard{min-height:48px;padding:3px 0;gap:0}
.portrait-app .lc-discard>span{display:none}
.portrait-app .lc-discard b{font-size:17px}
.portrait-app .lc-controls{margin:8px 0 0}
.portrait-app .lc-controls h3{font-size:14px;margin:0 0 6px}
.portrait-app .lc-hand{gap:5px;margin:7px 0;grid-template-columns:repeat(4,minmax(0,1fr))}
.portrait-app .lc-card{padding:5px;min-height:55px;border-radius:8px;cursor:pointer}
.portrait-app .lc-card>b{font-size:20px;padding:0;line-height:1.2}
.portrait-app .lc-card[aria-pressed=true]{outline:2px solid var(--ink);outline-offset:0;background:#fff;box-shadow:0 2px 8px #19312c20}
.lc-selected-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lc-selected-actions button{min-height:44px;font-size:13px}
.lc-selection-hint{font-size:11px;color:#5b7164;margin:4px 0}
.portrait-app[data-game=codenames][data-screen=game] main>section{margin-top:8px!important}
.portrait-app .board-header h2{font-size:18px;margin:0 0 3px}
.portrait-app .board{margin:10px 0;gap:5px}
.portrait-app .word{min-height:clamp(44px,7.1dvh,64px);font-size:clamp(11px,3.5vw,16px)}
.portrait-app .clue{margin:8px 0;padding:9px 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.portrait-app .clue .eyebrow{margin:0;letter-spacing:0}
.portrait-app .clue strong{font-size:20px}
.portrait-app .dock{margin-top:8px;padding-bottom:8px}
.portrait-app .dock button{margin-top:6px}
.portrait-app .notice{margin:6px 0;padding:6px 9px;font-size:12px}
.portrait-app .race-track{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.portrait-app .race-space{min-height:54px;padding:4px}
.portrait-app .paint{max-height:34dvh;width:100%;object-fit:contain}
.portrait-app .toolbox{gap:4px;flex-wrap:wrap}
.portrait-app .toolbox button{min-height:44px;min-width:36px}
.portrait-app .hand-card{padding:12px;min-height:90px}
@media(max-width:949px){
 .portrait-app{height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden}
 .portrait-app .topbar{flex:none;padding-top:max(8px,env(safe-area-inset-top));border-bottom:1px solid var(--line);background:#f5f3ed}
 .portrait-app main{flex:1;min-height:0;overflow:auto;overscroll-behavior-y:contain;padding-bottom:max(16px,env(safe-area-inset-bottom));scrollbar-width:thin}
 .portrait-app[data-screen=game] .room-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 0 4px;margin:0 0 8px}
 .portrait-app[data-screen=game] .room-toolbar>.row:first-child{flex:1}
 .portrait-app[data-screen=game] .room-toolbar .eyebrow{font-size:10px;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .portrait-app[data-screen=game] .room-toolbar>.row:last-child .status{display:none}
 .portrait-app[data-screen=game] .room-toolbar>.row:last-child .status.offline{display:block;position:fixed;top:60px;left:0;right:0;background:#fff1d6;padding:10px;z-index:50;text-align:center}
 .portrait-app[data-screen=game] .room-toolbar .room-code{font-size:14px}
 .portrait-app[data-screen=game] .room-toolbar .quiet{min-height:44px}
}
@media(max-width:350px){.portrait-app main{padding-left:10px;padding-right:10px}.catalog-grid{gap:8px}.portrait-app .catalog-game{padding:10px}.portrait-app .sp-art{height:48px}.portrait-app .sp-card-top>strong{font-size:17px}.portrait-app .sp-pokemon{padding:6px}}
@media(min-width:950px){.portrait-app main,.portrait-app .topbar{width:min(100%,900px)}.catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.portrait-app .sp-cards{grid-template-columns:repeat(4,minmax(0,1fr))}.portrait-app .sp-art{height:110px}.portrait-app .word{min-height:75px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.portrait-app .catalog-game{padding:12px;gap:0}
.portrait-app .game-icon{position:absolute;right:10px;top:10px;width:28px;height:28px;min-width:28px;font-size:19px;border-radius:8px}
.portrait-app .game-info h3{padding-right:30px;min-height:32px;font-size:14px;display:flex;align-items:center}
.portrait-app .game-meta{font-size:10px;min-height:30px}
.portrait-app .game-description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:none;min-height:36px;margin:5px 0 9px}

/* Integrate the dedicated Splendor view without a second room header or scroll root. */
.portrait-app[data-game=splendor][data-screen=game]{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.portrait-app[data-game=splendor][data-screen=game]>.topbar{min-height:42px;height:42px;padding:4px 12px}
.portrait-app[data-game=splendor][data-screen=game]>main{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;padding:0 10px}
.portrait-app[data-game=splendor][data-screen=game] .room-toolbar{display:none}
.portrait-app[data-game=splendor] .sp-table{height:auto;flex:1;min-height:0;padding-bottom:0}
.portrait-app[data-game=splendor] .sp-bottom-dock{position:relative;left:auto;transform:none;flex:none;width:100%;padding:8px 2px max(8px,env(safe-area-inset-bottom));box-shadow:none}
.portrait-app[data-game=splendor] .sp-market{margin:0}
.portrait-app[data-game=splendor] .sp-art{height:56px;margin:0}
.portrait-app[data-game=splendor] .sp-detail-heading .sp-art{height:82px}
.portrait-app .sp-supply label:has(input:checked){background:#d7e9d0;box-shadow:inset 0 0 0 2px #436e4f}
.portrait-app .sp-supply input{accent-color:#234a41}
.portrait-app .paint{height:min(34dvh,280px);width:auto;max-width:100%;aspect-ratio:4/3;display:block;margin:auto}
.portrait-app[data-game=camelup] .portrait-tabs{margin:0 0 8px}
.portrait-app[data-game=camelup] .card:has(.portrait-tabs)>h3{display:none}
.portrait-app[data-game=camelup] .race-space{min-height:48px}
.portrait-app[data-game=camelup] .movement{padding:6px 9px;font-size:12px}
.portrait-app .score-list{display:flex;flex-wrap:nowrap}
.portrait-app .score-list>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-height:650px) and (max-width:949px){
 .portrait-app[data-game=lostcities] .lc-stack{min-height:21px;padding:2px 0}
 .portrait-app[data-game=lostcities] .lc-route{padding:3px 2px}
 .portrait-app[data-game=lostcities] .lc-card{min-height:48px}
 .portrait-app[data-game=lostcities] .lc-controls>.small{display:none}
 .portrait-app[data-game=lostcities] .lc-discard-label{font-size:9px;margin:2px}
 .portrait-app[data-game=lostcities] .lc-player{margin:2px 0}
}
.portrait-app[data-game=telestrations] .revealed-word{font-size:24px;padding:10px}
.portrait-app[data-game=telestrations] main>.card:has(.revealed-word){padding:8px 12px;margin-bottom:8px}
.portrait-app[data-game=telestrations] main>.card:has(.revealed-word) .eyebrow{margin-bottom:0}
.portrait-app[data-game=telestrations] main>h2{font-size:18px;margin:6px 0}
.portrait-app[data-game=telestrations] .toolbox{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:2px;margin:7px 0}
.portrait-app[data-game=telestrations] .toolbox button{min-width:0;padding:4px 1px;font-size:11px;min-height:44px}
@media(max-width:949px){.portrait-app,.portrait-app[data-game=splendor][data-screen=game]{height:var(--app-viewport,100dvh)}.portrait-app .sheet{max-height:calc(var(--app-viewport,100dvh) - 24px)}.sp-sheet{max-height:calc(var(--app-viewport,100dvh) - 20px)}}
.portrait-app .score-list>span{display:flex;align-items:center;gap:5px}
.portrait-app .score-list .score-name{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.portrait-app .score-list>span>b{flex:none;white-space:nowrap}

/* Stable track geometry regardless of stack height or the latest move. */
.portrait-app[data-game=camelup] .race-track{grid-template-rows:repeat(4,82px)}
.portrait-app[data-game=camelup] .race-space{height:82px;min-height:82px;position:relative;overflow:hidden;cursor:pointer}
.portrait-app[data-game=camelup] .race-space>small{position:absolute;top:3px;left:5px}
.portrait-app[data-game=camelup] .race-space:after{content:attr(data-stack-count);position:absolute;right:3px;top:3px;font-size:10px;color:#695d4e}
.portrait-app[data-game=camelup] .camel{position:absolute;left:4px;right:4px;top:calc(20px + var(--camel-index,0)*6px);height:20px;box-sizing:border-box;line-height:16px;padding:1px 4px;margin:0;border:1px solid #fff8}
.portrait-app[data-game=camelup] .movement{height:52px;min-height:52px;box-sizing:border-box;overflow:auto;font-size:12px}
.camel-inspect{max-width:min(90vw,420px);border:1px solid #cabc9e;border-radius:14px;background:#faf6eb;color:#263d31;padding:20px;line-height:1.7}.camel-inspect::backdrop{background:#142b2870}.camel-inspect button{min-height:44px;min-width:80px}

/* Codenames keeps its full 5x5 board; input stays readable when the keyboard opens. */
.portrait-app[data-game=codenames] input,.portrait-app[data-game=codenames] select{font-size:16px;min-height:44px}
.portrait-app[data-game=codenames] .word{white-space:normal;overflow-wrap:anywhere;line-height:1.3}
.portrait-app[data-game=codenames] .clue{font-size:14px}.portrait-app[data-game=codenames] form[data-form=clue]{scroll-margin-bottom:12px}