/* Phones: html.phone is set by public/minigames/_phone.js (touch controls on a screen up to 600 px wide or 520 px tall).
   Touch targets are 44 px (Apple) where the screen allows, text a player needs is 13 px or more. */

/* Toolbar: Play now, You and Menu (Voice in a room). Friends, Outfit, sound and Full screen live in the Menu. */
html.phone #frameToolbar :is(#volumeButton,#clubFriends,#clubOutfit,#fullscreen,#levelChip){display:none!important}
html.phone.club-match #frameToolbar #clubMe{display:none!important}
html.phone.corner-on #clubNav #clubPlay{display:none}
html.phone #frameToolbar{gap:8px}
html.phone #frameToolbar :is(#frameMenu,#voiceButton){min-height:44px;padding:8px 14px!important;font-size:15px!important}
html.phone #clubNav #clubPlay{min-height:44px;padding:8px 14px!important;font-size:15px!important}
html.phone #frameToolbar #clubMe{min-height:44px;padding:3px 10px 3px 3px!important;gap:6px}
html.phone #frameToolbar #clubMe span{display:grid!important;max-width:34vw;text-align:left}
html.phone #frameToolbar #clubMe b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.phone #frameToolbar #clubMe small{font-size:12px}
html.phone.club-match #frameToolbar #clubMe span{display:none!important}
html.phone.clubhouse #frameMenu{position:relative}
html.phone.clubhouse #frameMenu[data-badge]::after{content:attr(data-badge);position:absolute;top:-7px;right:-7px;min-width:20px;padding:0 6px;border-radius:999px;background:#ff5f8f;color:#fff;font:700 12px/20px Fredoka,'Trebuchet MS',sans-serif;text-align:center;box-shadow:0 2px 0 #140d20}
html.phone .club-rooms button{min-height:44px!important;padding:6px 14px!important;font-size:15px!important}
html.phone #frameToolbar #frameMenu{margin-left:auto}
html:not(.phone) #menuFullscreen{display:none}
html.phone #menuFullscreen{min-height:44px}
@media (orientation:landscape) and (max-height:520px){
 html.phone.club-match #frameToolbar :is(#frameMenu,#voiceButton){min-height:36px;padding:4px 12px!important;font-size:14px!important}
}

/* Clubhouse: the Play now panel (with the first-visit welcome) and the tool bar sit by the thumbs (placed by _phone.js). */
html.phone.club-world #gameFrame.touch-controls .club-corner:not(:empty){display:grid}
html.phone.club-world #gameFrame .club-corner[data-thumb]{width:min(340px,calc(100% - 24px));padding:12px;gap:8px}
html.phone.club-world #gameFrame .club-corner .primary.big{min-height:54px;font-size:21px}
html.phone.club-world #gameFrame .club-corner .mint{min-height:46px;font-size:16px}
/* The note rides inside the Play now button, so the panel stays short and your character stays in view. */
html.phone.club-world #gameFrame .club-corner[data-thumb]{grid-template-columns:1fr}
html.phone.club-world #gameFrame .club-corner[data-thumb]:has(.club-cta-note) :is([data-corner=play],.club-cta-note){grid-row:1;grid-column:1}
html.phone.club-world #gameFrame .club-corner[data-thumb]:has(.club-welcome) :is([data-corner=play],.club-cta-note){grid-row:2}
html.phone.club-world #gameFrame .club-corner[data-thumb] .club-welcome{grid-row:1;grid-column:1}
html.phone.club-world #gameFrame .club-corner[data-thumb]:has(.club-cta-note) [data-corner=play]{min-height:68px;padding-bottom:24px}
html.phone.club-world #gameFrame .club-corner[data-thumb] .club-cta-note{align-self:end;margin:0 0 9px;z-index:1;pointer-events:none;font-size:13px;font-weight:600;color:#5a3510}
html.phone.club-world #gameFrame .club-welcome{font-size:15px}
html.phone.club-world #gameFrame .club-welcome button{min-height:44px}
/* sideways the welcome is one short card: Got it beside the greeting, no name tip (the toolbar shows your name) */
html.phone.club-world #gameFrame .club-corner[data-thumb=row] .club-welcome{grid-template-columns:1fr auto;align-items:center;column-gap:10px;padding:10px 12px}
html.phone.club-world #gameFrame .club-corner[data-thumb=row] .club-welcome>button{grid-column:2;grid-row:1}
html.phone.club-world #gameFrame .club-corner[data-thumb=row] .club-welcome>span{grid-column:1/-1}
html.phone.club-world #gameFrame .club-corner[data-thumb=row] .club-welcome>span:last-of-type{display:none}
html.phone.club-world #gameFrame .club-corner[data-thumb=row] .mint{min-height:44px}
html.phone.club-world #gameFrame .club-tools[data-thumb] details>div{top:auto;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%)}
html.phone #gameFrame .club-tools>button,html.phone #gameFrame .club-tools summary{min-height:44px;font-size:16px;white-space:nowrap}
/* Near the thumbs the tool bar shows icons only (the words stay for screen readers), so it fits between the stick and Hop. */
html.phone.club-world #gameFrame .club-tools[data-thumb]{flex-wrap:nowrap;gap:4px;padding:4px}
html.phone.club-world #gameFrame .club-tools[data-thumb] :is(summary,#chatPill){font-size:0;min-width:44px;justify-content:center;padding:6px}
html.phone.club-world #gameFrame .club-tools[data-thumb] summary::before{content:"😀";font-size:22px}
html.phone.club-world #gameFrame .club-tools[data-thumb] #chatPill::before{content:"💬";font-size:21px}
html.phone.club-world #gameFrame .club-tools[data-thumb] #chatPill i{font-size:12px}
html.phone.club-world #gameFrame .club-tools[data-thumb]>button{min-width:44px;justify-content:center}
html.phone #gameFrame .club-tools details>div button{min-height:44px;font-size:15px}
html.phone #gameFrame .club-hint{white-space:normal;text-overflow:clip;text-align:center;border-radius:16px;line-height:1.3;width:max-content;max-width:calc(100% - 24px)}

/* Lobby bar and settings: 44 px targets. */
html.phone.club-lounge #loungeBar button{min-height:44px}
html.phone.club-lounge #loungeQuick button{min-width:44px}
html.phone #menuControls .check-control,html.phone .lounge-settings label:has(input[type=checkbox]){min-height:44px}

/* Chat: bigger quick phrases, and the button moves off the results receipt. */
html.phone #chatQuick button{min-height:38px;padding:6px 12px;font-size:15px}
html.phone #chatBox header button{min-height:40px;min-width:40px;font-size:15px}
html.phone #chatBox header b{font-size:14px}
html.phone #chatLog{font-size:15px}
html.phone.phase-results #gameFrame #chatPill{top:8px;bottom:auto;left:auto;right:8px}

/* Match HUD: readable status, hints, kill feed and chaos tags. */
html.phone #gameFrame #personal{font-size:13px;white-space:nowrap;flex-wrap:nowrap;max-width:calc(100% - 20px)}
html.phone #gameFrame #mobileHint{font-size:13px;line-height:1.3;height:auto}
html.phone #gameFrame :is(#round,#mode,#population){font-size:13px}
html.phone #gameFrame #timer{font-size:15px}
html.phone #gameFrame #combatFeed>div{font-size:12px}
html.phone #gameFrame #modBadge :is(em,i,span,b){font-size:13px}
html.phone #boardStandings .who{max-width:11ch}
@media (orientation:landscape) and (max-height:520px){html.phone #gameFrame #personal{font-size:12px}}

/* Outfit on phones held upright: a slim "Your look" bar stays in view while you scroll the items. */
@media (orientation:portrait){
 html.phone #gameMenu #wardrobe .outfit-look{position:sticky;top:calc(var(--mh,64px) - 8px);z-index:5;display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:10px;align-items:center;padding:6px 10px 8px;border-top-width:3px;border-radius:16px}
 html.phone #gameMenu #wardrobe .outfit-look header{position:absolute;top:8px;right:10px;padding:0}
 html.phone #gameMenu #wardrobe .outfit-look header h3{display:none}
 html.phone #gameMenu #wardrobe .outfit-look .look-stage{grid-row:1/span 3;display:block;padding:0}
 html.phone #gameMenu #wardrobe #wardrobePreview{max-width:76px}
 html.phone #gameMenu #wardrobe #lookPlayer{display:none}
 html.phone #gameMenu #wardrobe .look-item{margin:0;padding:0 86px 0 0;border:0;text-align:left}
 html.phone #gameMenu #wardrobe #selectedName{margin:0;font-size:17px}
 html.phone #gameMenu #wardrobe #selectedGoal{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 html.phone #gameMenu #wardrobe .look-note{margin-top:4px;padding:6px 8px;font-size:13px}
 html.phone #gameMenu #wardrobe .look-actions{display:flex;flex-wrap:wrap;gap:6px;padding:6px 0 0}
 html.phone #gameMenu #wardrobe .look-actions>button{width:auto;min-height:40px;font-size:14px}
 html.phone #gameMenu #wardrobe #equipOutfit{min-height:40px;font-size:15px}
 html.phone #gameMenu #wardrobe #equipOutfit:disabled{display:none}
 html.phone #gameMenu #wardrobe #wardrobeStatus{grid-column:2;padding:2px 0 0;min-height:0;font-size:13px;text-align:left}
}
/* Outfit on phones held sideways: your look on the left, categories and items on the right. */
@media (orientation:landscape) and (max-height:520px){
 html.phone #gameMenu #wardrobe .outfit-page{grid-template-columns:190px minmax(0,1fr);grid-template-areas:"look rail" "look shelf";column-gap:14px;row-gap:8px}
 html.phone #gameMenu #wardrobe .outfit-look{grid-area:look;position:sticky;top:calc(var(--mh,64px) - 8px);order:0}
 html.phone #gameMenu #wardrobe .outfit-rail{grid-area:rail;order:0}
 html.phone #gameMenu #wardrobe .outfit-shelf{grid-area:shelf}
 html.phone #gameMenu #wardrobe .outfit-look .look-stage{grid-template-columns:1fr;justify-items:center;padding:0 8px}
 html.phone #gameMenu #wardrobe #wardrobePreview{max-width:120px}
 html.phone #gameMenu #wardrobe #lookPlayer{display:none}
 html.phone #gameMenu #wardrobe .look-item{margin-top:4px;padding:6px 10px 0}
 html.phone #gameMenu #wardrobe #selectedName{font-size:17px}
 html.phone #gameMenu #wardrobe .look-actions{padding:8px 10px 0}
 html.phone #gameMenu #wardrobe #equipOutfit{min-height:44px;font-size:15px}
 /* short screens: tabs and search share a row, the category name is already in the rail, the heading is slimmer */
 html.phone #gameMenu #wardrobe .outfit-shelf{display:flex;flex-wrap:wrap;align-items:center;column-gap:10px}
 html.phone #gameMenu #wardrobe .shelf-tabs{flex:none;border:0}
 html.phone #gameMenu #wardrobe .shelf-find{flex:1 1 180px;margin:0}
 html.phone #gameMenu #wardrobe :is(.shelf-sub,.shelf-grid,.shelf-goal){flex-basis:100%}
 html.phone #gameMenu #wardrobe .shelf-sub{margin:8px 0 0}
 html.phone #gameMenu #wardrobe .shelf-grid{margin-top:10px}
 html.phone #gameMenu #wardrobe .shelf-head{display:none}
 html.phone #gameMenu #wardrobe .outfit-rail button{min-height:44px}
 html.phone #gameMenu.cosmetics-mode .menu-heading{padding-block:4px}
}

/* Upright matches: the status line sits in the match bar (moved by _landscape.js), the round names give way and the objective hint
   moves up, so one row fewer covers the arena. */
@media (orientation:portrait){
 html.phone #gameFrame.playing .matchbar>div:first-child{display:none}
 html.phone #gameFrame.playing #mobileHint{top:8px}
 html.phone #gameFrame .matchbar #personal{margin:0 8px 0 0}
}
/* Results on phones: the rewards strip comes right under the winner, and the vote box is one compact row pinned at the bottom
   (it used to cover most of a sideways screen). */
html.phone #gameFrame #resultsPanel:not(.hidden){display:flex;flex-direction:column}
html.phone #gameFrame #resultsPanel>*{order:5}
html.phone #gameFrame #resultsPanel>#winner{order:1}
html.phone #gameFrame #resultsPanel>#resultRewards{order:2;margin:4px 0 10px}
html.phone #gameFrame #resultsPanel>#results{order:3}
html.phone #gameFrame #resultsPanel>#matchVotes{order:9}
html.phone #gameFrame #matchVotes:not(.hidden){display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:8px 10px}
html.phone #gameFrame #matchVotes h3{display:none}
html.phone #gameFrame #matchVotes .social-actions{display:flex;flex:1 1 220px;gap:8px;margin:0}
html.phone #gameFrame #matchVotes .social-actions button{flex:1 1 auto;width:auto;min-height:44px;margin:0}
html.phone #gameFrame #matchVotes #voteLeave{flex:0 0 auto;width:auto;min-height:44px;margin:0;padding:6px 14px}
html.phone #gameFrame #matchVotes #voteLeave small{display:none}
html.phone #gameFrame #matchVotes #voteStatus{order:3;flex-basis:100%;margin:0;font-size:13px;line-height:1.3}
@media (orientation:landscape) and (max-height:520px){html.phone #gameFrame #resultsPanel>#winner{font-size:24px;margin:0 0 4px}}
/* The party-points screen between minigames gets the same order: stamp, title, rewards strip, countdown, then the rows. */
html.phone #gameFrame #awardsPanel:not(.hidden){display:flex;flex-direction:column}
html.phone #gameFrame #awardsPanel>*{order:6}
html.phone #gameFrame #awardsPanel>.stamp{order:1;align-self:flex-start}
html.phone #gameFrame #awardsPanel>#awardsTitle{order:2}
html.phone #gameFrame #awardsPanel>#partyRewards{order:3;margin:4px 0 8px}
html.phone #gameFrame #awardsPanel>#awardsCountdown{order:4;margin:0 0 8px}
@media (orientation:landscape) and (max-height:520px){html.phone #gameFrame #awardsPanel>#awardsTitle{font-size:24px;margin:2px 0 4px}html.phone #gameFrame #awardsPanel>.stamp{margin:0}}