#phone-intro-close,.phone-screen-bar,.phone-menu-icon{display:none}
@media (max-width:700px),(hover:none) and (pointer:coarse) and (max-height:500px){
  html body{--phone-screen-bg:#f6f8fc;--phone-panel:#e8eef6;--phone-color-scheme:light;padding:0!important;background:var(--phone-screen-bg);--phone-bar-height:calc(56px + var(--phone-safe-top));}
  html body.dark{--phone-screen-bg:#182230;--phone-panel:#263448;--phone-color-scheme:dark;background:var(--phone-screen-bg)}
  html body .preview{display:none!important}
  html body .shell{position:fixed;inset:0;width:100%;height:100dvh!important;max-height:none;margin:0!important;border-radius:0;grid-template-columns:1fr;grid-template-rows:0 minmax(0,1fr)!important;transition:none!important;overflow:hidden}
  html body .shell .intro{visibility:hidden;border-radius:0;touch-action:pan-y pinch-zoom}
  html body.phone-intro-screen .shell{grid-template-rows:minmax(0,1fr) 0!important}
  html body.phone-intro-screen .intro{visibility:visible}
  html body.phone-intro-screen .dashboard{visibility:hidden;pointer-events:none}
  html body .shell .intro .slides{height:100dvh;padding-top:calc(var(--phone-safe-top) + 70px);padding-bottom:calc(var(--phone-safe-bottom) + 92px);touch-action:pan-y pinch-zoom;transition:opacity 120ms ease!important;}
  html body .shell .intro .slides *{touch-action:pan-y pinch-zoom}
  html body .shell .intro .brand{top:calc(var(--phone-safe-top) + 18px);left:24px}
  html body .shell .intro .slider-nav{bottom:calc(var(--phone-safe-bottom) + 22px);padding:0 24px;touch-action:manipulation}
  html body #mobile-intro-toggle,html body #mobile-intro-grip{display:none!important}
  #phone-intro-close{display:grid;place-items:center;position:absolute;right:14px;top:calc(var(--phone-safe-top) + 10px);width:44px;height:44px;color:white;border-radius:50%;z-index:10}
  #phone-intro-close svg,.phone-screen-bar svg,.phone-menu-icon svg{width:22px;height:22px;flex-shrink:0}
  html body .shell .dashboard{padding:calc(var(--phone-safe-top) + 8px) 18px calc(var(--phone-safe-bottom) + 24px)!important;touch-action:pan-y pinch-zoom}
  html body .shell .dashboard .dashboard-fixed-header{top:calc(-1 * var(--phone-safe-top) - 8px);padding-top:calc(var(--phone-safe-top) + 8px);margin-bottom:16px}
  html body .phone-original-close,html body .room-minimize,html body .room-size-toggle,html body [data-token-expand],html body [data-token-mini],html body #dm-resize,html body #dm-minimize,html body #dm-expand,html body #party-window-dock,html body #party-window-backdrop,html body #message-arrival-bubble,html body .room-edge-toggle,html body .room-window-resize,html body .popup-resize-handle{display:none!important}
  html body .phone-screen-under{visibility:hidden!important;pointer-events:none!important}
  html body dialog.phone-screen:is(#create-party-dialog,#party-preview,#party-settings,#friend-invite-dialog,#directory,#leave-party-confirm,#workspace-actions,#profile-preview,#ai-preview,#dm-profile-popover,#room-friend-invites,#departure-record,.party-window,.token-window,.party-preview,.dialog,.phone-menu-screen,.phone-choice-screen),html body #dm-board.phone-screen{
    position:fixed!important;inset:var(--phone-top,0px) 0 auto!important;left:0!important;top:var(--phone-top,0px)!important;bottom:auto!important;right:0!important;width:100vw!important;min-width:0!important;max-width:none!important;height:var(--phone-height,100dvh)!important;min-height:0!important;max-height:none!important;margin:0!important;border:0!important;border-radius:0!important;transform:none!important;padding:0 0 var(--phone-safe-bottom)!important;box-shadow:none!important;background:var(--phone-screen-bg)!important;color:var(--surface-ink)!important;color-scheme:var(--phone-color-scheme);backdrop-filter:none!important;-webkit-backdrop-filter:none!important;overflow-y:auto;overscroll-behavior:none;animation:none!important;
  }
  html body dialog.phone-screen::backdrop{background:var(--phone-screen-bg)!important;backdrop-filter:none!important}
  .phone-screen-bar{display:flex;align-items:center;gap:8px;position:sticky;top:0;min-height:var(--phone-bar-height);padding:calc(var(--phone-safe-top) + 6px) 14px 6px;background:inherit;z-index:80;border-bottom:1px solid #8b9eb51c;flex-shrink:0;text-align:left}
  .phone-screen-bar>button{display:grid;place-items:center;width:44px;height:44px;padding:10px;border:0;border-radius:12px;flex:0 0 44px;background:transparent;color:inherit}
  .phone-screen-bar>h2{font-size:calc(17px * var(--pg-ts,1))!important;line-height:1.4;letter-spacing:-.3px;margin:0!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  html body .phone-screen>:not(.phone-screen-bar,.popup-resize-handle,.room-head,.room-layout,.room-details,.room-splitter,.room-window-resize,.room-edge-toggle,.card-editor,.dm-body,#dm-handle,.phone-panel-content){margin-left:22px;margin-right:22px}
  html body .phone-screen>.action-head,html body .phone-screen>.token-head,html body .phone-screen>header:not(.phone-screen-bar):not(.room-head):not(#dm-handle),html body .phone-screen>h2,html body .phone-screen>h3{display:none!important}
  html body .phone-screen>.action-body{padding-top:24px}
  html body .phone-screen>small{display:block;margin-top:24px}
  html body .phone-screen p{line-height:1.65}
  html body #dm-board.phone-screen:not([hidden]){display:flex;flex-direction:column}
  html body #dm-board.phone-screen:before{display:none}
  html body #dm-board.phone-screen #dm-handle{min-height:54px;padding:6px 18px!important}
  html body #dm-board.phone-screen .dm-tools{display:none}
  html body #dm-board.phone-screen .dm-body{min-height:0;flex:1}
  html body #dm-board.phone-screen .dm-contacts{min-height:58px;padding:8px 18px}
  html body #dm-board.phone-screen #dm-input{resize:none}
  html body :is(#party-preview,.party-preview).party-window.phone-screen{overflow:hidden}
  html body :is(#party-preview,.party-preview).party-window.phone-screen .room-head{height:48px!important;min-height:48px;display:flex;padding:0 18px!important;gap:8px;border-bottom:0}
  html body :is(#party-preview,.party-preview).party-window.phone-screen .room-title{margin-right:auto;flex:1;min-width:0}
  html body :is(#party-preview,.party-preview).party-window.phone-screen .room-title h2,html body :is(#party-preview,.party-preview).party-window.phone-screen .room-title>small{display:none}
  html body :is(#party-preview,.party-preview).party-window.phone-screen .room-title-line{justify-content:flex-start}
  html body :is(#party-preview,.party-preview).party-window.phone-screen .room-token-total{font-size:calc(11px * var(--pg-ts,1))!important;padding:8px!important;min-width:0}
  html body :is(#party-preview,.party-preview).party-window.phone-screen .room-layout{height:calc(100% - var(--phone-bar-height) - 48px)!important}
  html body :is(#party-preview,.party-preview).party-window.phone-screen .room-section-tabs{min-height:44px}
  html body :is(#party-preview,.party-preview).party-window.phone-screen .room-work{transition:none!important}
  html body :is(#party-preview,.party-preview).party-window.phone-screen .room-chat{padding:0 18px 14px!important}
  html body .phone-panel-content{position:static!important;inset:auto!important;max-height:none!important;width:auto!important;max-width:none!important;margin:0!important;padding:24px!important;box-shadow:none!important;border:0!important;border-radius:0!important;transform:none!important;backdrop-filter:none!important;background:transparent!important;color:inherit!important}
  html body .phone-panel-content>.nav-heading,html body .phone-panel-content>.nav-footer,html body [data-nav=community],html body [data-nav=intro]{display:none!important}
  html body .phone-panel-content .nav-group{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border:0;padding:12px 0}
  html body .phone-panel-content .nav-group h3{grid-column:1/-1;font-size:calc(12px * var(--pg-ts,1));margin:0 0 4px}
  html body .phone-panel-content .nav-group>button,html body .phone-menu-screen .mobile-room-menu>button,html body .phone-menu-screen .room-text-trigger{display:grid;place-items:center;width:100%;height:72px;min-height:56px;padding:16px;border:1px solid #8b9eb522!important;border-radius:16px;background:#8b9eb50c}
  html body .phone-menu-screen .mobile-room-menu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-content:start}
  html body .phone-menu-screen .room-icon-label,html body .phone-menu-screen .room-text-control>.room-text-trigger:has(+.room-text-popover:not([hidden])){display:none!important}
  html body .phone-menu-screen .room-icon-menu svg{width:24px;height:24px;flex-shrink:0;transform:none!important}
  html body .phone-menu-screen .room-text-popover{position:static;padding:20px 0;box-shadow:none!important;border:0;background:transparent!important;max-width:none;width:100%}
  html body .phone-menu-screen .room-text-popover input{width:100%;min-height:44px}
  html body .phone-menu-screen .room-details{position:static;width:auto;max-height:none;padding:0!important;transform:none;}
  html body .phone-choice-list{display:grid;gap:10px;padding:24px 0}
  html body .phone-choice-list>button{display:block;min-height:52px;padding:14px 16px;text-align:left;border:1px solid #8b9eb533;border-radius:12px;font-size:calc(15px * var(--pg-ts,1));background:transparent;color:inherit}
  html body .phone-choice-list>button[aria-pressed=true]{background:#647cdf16;border-color:#647cdf}
  html body .phone-menu-label{display:none!important}
  html body .phone-menu-icon{display:grid;place-items:center}
  html body .phone-icon-only{display:grid;place-items:center;min-height:44px;min-width:44px;padding:10px!important}
  html body .phone-icon-only [aria-hidden=true]{opacity:1}
  html body .phone-screen .leave-host-list{margin-top:24px}
  html body .phone-screen .leave-actions{position:sticky;bottom:0;padding:16px 0;background:inherit;margin-top:32px}
  html body .phone-screen .token-body{padding:24px 0}
  html body .phone-screen .token-chart{max-height:none}
  html body #friend-invite-list{height:auto;max-height:none;overflow:visible}
  html body .phone-screen .invite-friend-row{min-height:56px!important}
  html body .phone-screen .room-invite-list{height:auto;max-height:none}
  html body #create-party-dialog.phone-screen #editor-background-menu{position:static!important;align-self:flex-start;margin-top:16px}
  html body .party,html body .party:hover,html body .person:hover,html body .ai-person:hover{transform:none!important;box-shadow:none!important;transition:none!important}
  html body .party.custom-background::before,html body .party.custom-background:hover::before{filter:none!important;transition:none!important}
  html body .room-icon-menu .room-icon-label{transition:none!important}
  html body .toplinks [data-info=Messages].message-arrival{animation:none!important;box-shadow:none!important}
  html body .mobile-preview-toggle{display:none!important}
  .phone-keyboard .phone-screen-bar{min-height:var(--phone-bar-height)}
  html body.phone-keyboard :is(#party-preview,.party-preview).party-window.phone-screen .room-head{display:none!important}
  html body.phone-keyboard :is(#party-preview,.party-preview).party-window.phone-screen .room-layout{height:calc(100% - var(--phone-bar-height))!important}
}

@media (max-width:700px),(hover:none) and (pointer:coarse) and (max-height:500px){
  html body .phone-screen-bar>h2{flex:1}
  html body .phone-screen-bar .room-icon-label{display:none!important}
  html body :is(#party-preview,.party-preview).party-window.phone-screen .room-title{display:none!important}
  html body :is(#party-preview,.party-preview).party-window.phone-screen .room-head{justify-content:flex-end}
  html body :is(#party-preview,.party-preview).party-window.phone-screen .room-token-total{margin-right:auto!important;display:flex!important;align-items:center;gap:5px}
  html body :is(#party-preview,.party-preview).party-window.phone-screen .room-head .room-icon-label{display:none!important}
  html body :is(#party-preview,.party-preview).party-window.phone-screen .room-head :is([data-room-toggle],.mobile-room-more){display:grid!important;place-items:center;padding:10px!important;}
}

@media (max-width:700px),(hover:none) and (pointer:coarse) and (max-height:500px){
  html body .shell .cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;overflow:visible;padding:8px 0 16px}
  html body .shell .cards .party{width:auto!important;min-width:0;min-height:280px;padding:16px 13px;}
  html body .shell .cards .party-copy>p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  html body .shell .rail-controls>div{display:none}
  html body .shell [data-panel=community]{display:none}
  html body .phone-screen-bar [data-phone-back]{border:0!important;background:transparent!important;margin:0!important;padding:10px!important;font-size:0!important}
}
@media (max-width:700px),(hover:none) and (pointer:coarse) and (max-height:500px){
  html body .phone-screen:not(.phone-screen-under){visibility:visible!important;pointer-events:auto!important}
}

@media (max-width:700px),(hover:none) and (pointer:coarse) and (max-height:500px){html body #dm-board.phone-screen[hidden]{display:none!important}}

/* Phone readability: shared semantic colors, independent of selector specificity. */
@media (max-width:700px),(hover:none) and (pointer:coarse) and (max-height:500px){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
  html body .phone-screen{font-family:Arial,"PG Hangul","Apple SD Gothic Neo",sans-serif;font-size:calc(16px * var(--pg-ts,1));line-height:1.55;--room-ink:var(--surface-ink);--room-muted:var(--surface-muted);--room-blue:var(--surface-accent);}
  html body .phone-screen :is(p,label,legend,summary){font-size:calc(15px * var(--pg-ts,1));line-height:1.6;}
  html body .phone-screen :is(h3){font-size:calc(16px * var(--pg-ts,1));line-height:1.45;}
  html body .phone-screen :is(small,footer,[role=status]){font-size:calc(12px * var(--pg-ts,1))!important;line-height:1.55;color:var(--surface-muted)!important;}
  html body .phone-screen-bar{background:var(--phone-screen-bg)!important;color:var(--surface-ink)!important;}
  html body .phone-screen :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),textarea){background:var(--phone-field)!important;color:var(--surface-ink)!important;border-color:var(--surface-edge)!important;}
  html body .phone-screen :is(input,textarea)::placeholder{color:var(--surface-muted)!important;opacity:1;}
  html body .phone-screen :is(button,summary){-webkit-tap-highlight-color:transparent;}
  html body #workspace-actions.phone-screen .action-body{margin:0;padding:24px 22px;}
  html body #workspace-actions.phone-screen :is(label,button,summary){font-size:calc(15px * var(--pg-ts,1));min-height:44px;}
  html body #workspace-actions.phone-screen label:not(.action-check){gap:10px;margin-bottom:24px;}
  html body #workspace-actions.phone-screen .action-check{align-items:flex-start;gap:10px;}
  html body #workspace-actions.phone-screen .action-check input{margin-top:4px;flex-shrink:0;width:20px;height:20px;}
  html body #workspace-actions.phone-screen .action-row{align-items:stretch;}
  html body #workspace-actions.phone-screen .action-row button{flex:1;}
  html body #workspace-actions.phone-screen .unified-select summary{background:var(--phone-field);border-color:var(--surface-edge);color:var(--surface-ink);}
  html body #workspace-actions.phone-screen .action-foot{margin:0;padding:16px 22px;}
  html body #profile-preview.phone-screen :is(.profile-interests h3,.profile-interests label,.profile-interests summary,#profile-interest-labels){font-size:calc(14px * var(--pg-ts,1));color:var(--surface-ink);}
  html body #profile-preview.phone-screen .profile-interests label{min-height:40px;}
  html body #profile-preview.phone-screen .achievement-summary strong{font-size:calc(32px * var(--pg-ts,1));line-height:1.2;}
  html body #profile-preview.phone-screen .achievement-summary p{font-size:calc(13px * var(--pg-ts,1));color:var(--surface-muted);}
  html body #profile-preview.phone-screen .local-activity-metrics :is(dt){font-size:calc(13px * var(--pg-ts,1));line-height:1.5;}
  html body #profile-preview.phone-screen .local-activity-metrics dd{font-size:calc(24px * var(--pg-ts,1));}
  html body #dm-board.phone-screen :is(.dm-title b,.dm-message p){font-size:calc(15px * var(--pg-ts,1));}
  html body #dm-board.phone-screen .dm-contacts button{font-size:calc(13px * var(--pg-ts,1));min-height:44px;}
  html body #dm-board.phone-screen .dm-message:not(.mine) p{background:var(--phone-panel)!important;color:var(--surface-ink);}
  html body #dm-board.phone-screen .dm-message.mine p{background:var(--phone-panel);color:var(--surface-ink);}
  html body #dm-board.phone-screen :is(#dm-input,#dm-form){background:var(--phone-field)!important;color:var(--surface-ink)!important;}
  html body :is(#party-preview,.party-preview).party-window.phone-screen .room-chat{background:transparent!important;}
  html body :is(#party-preview,.party-preview).party-window.phone-screen :is(.room-message p,.room-composer textarea){font-size:calc(var(--room-message-size,12px) * 4 / 3)!important;line-height:1.65;}
  html body :is(#party-preview,.party-preview).party-window.phone-screen :is(.room-message-meta,.room-message-meta b){font-size:calc(14px * var(--pg-ts,1));}
  html body :is(#party-preview,.party-preview).party-window.phone-screen :is(.room-day,.room-model-label,.room-people>span,.room-message time,.room-compose-actions){font-size:calc(12px * var(--pg-ts,1))!important;color:var(--surface-muted)!important;}
  html body :is(#party-preview,.party-preview).party-window.phone-screen .room-token-total small{font-size:calc(11px * var(--pg-ts,1))!important;opacity:1;}
  html body :is(#party-preview,.party-preview).party-window.phone-screen :is(.room-preview-card,.room-composer,.room-browser){background:var(--phone-field)!important;color:var(--surface-ink)!important;border-color:var(--surface-edge)!important;}
  html body :is(#party-preview,.party-preview).party-window.phone-screen .room-send{background:var(--pg-btn-bg)!important;color:var(--pg-btn-fg)!important;min-width:40px;min-height:40px;}
  html body .token-window.phone-screen :is(.token-users button,.token-chart table,.token-bars header,.token-donut p,.token-chart-note,.token-legend){font-size:calc(13px * var(--pg-ts,1));color:var(--surface-ink);}
  html body .token-window.phone-screen :is(.token-summary>span,.token-chart th){font-size:calc(13px * var(--pg-ts,1));color:var(--surface-muted);}
  html body .token-window.phone-screen .token-summary strong{font-size:calc(30px * var(--pg-ts,1));}
  html body .token-window.phone-screen .token-users button{min-height:44px;}
  html body .token-window.phone-screen .token-line text{font-size:calc(16px * var(--pg-ts,1));}
  html body #party-settings.phone-screen :is(h3,label,.rs-visibility-note,.cover-picker){font-size:calc(14px * var(--pg-ts,1))!important;}
  html body #party-settings.phone-screen .rs-pair{grid-template-columns:1fr;}
  html body #party-settings.phone-screen .settings-actions{bottom:0;margin:24px 0 0;padding:16px 0;background:var(--phone-screen-bg)!important;}
  html body #party-settings.phone-screen :is(.settings-actions button,.rs-visibility button){min-height:44px;font-size:calc(15px * var(--pg-ts,1));}
  html body #leave-party-confirm.phone-screen .leave-host-option>span{font-size:calc(15px * var(--pg-ts,1));}
  html body .phone-screen :is(.invite-friend-row,.room-invite-name){font-size:calc(15px * var(--pg-ts,1))!important;}
  html body .phone-screen :is(.friend-invite-toggle,[data-invite-person]){font-size:calc(13px * var(--pg-ts,1));min-height:40px;padding:10px 14px;}
  html body .phone-screen .phone-choice-list>button{font-size:calc(16px * var(--pg-ts,1));}
  html body .phone-screen .room-details :is(p,button){font-size:calc(15px * var(--pg-ts,1));}
  html body .phone-screen .room-text-popover :is(b,output){font-size:calc(15px * var(--pg-ts,1));}
}
@media (max-width:700px),(hover:none) and (pointer:coarse) and (max-height:500px){
  html body #profile-preview.phone-screen :is(.profile-interests legend,.achievement-summary>span,.achievement-placeholder p,.subtle p){color:var(--surface-muted);font-size:calc(13px * var(--pg-ts,1));}
  html body #create-party-dialog.phone-screen #editor-background-menu summary{color:var(--surface-muted);font-size:calc(14px * var(--pg-ts,1));}
  html body :is(#party-preview,.party-preview).party-window.phone-screen .room-token-total span{font-size:calc(14px * var(--pg-ts,1))!important;color:var(--surface-ink);}
  html body :is(#party-preview,.party-preview).party-window.phone-screen .room-token-total small{font-size:calc(12px * var(--pg-ts,1))!important;}
  html body :is(#party-preview,.party-preview).party-window.phone-screen .room-preview-card>span{font-size:calc(15px * var(--pg-ts,1));}
  html body #party-settings.phone-screen :is(small,.cover-help){font-size:calc(12px * var(--pg-ts,1))!important;color:var(--surface-muted)!important;}
  html body #party-settings.phone-screen .rs-visibility-note{color:var(--surface-muted);}
  html body #dm-board.phone-screen .dm-disclaimer{font-size:calc(12px * var(--pg-ts,1))!important;color:var(--surface-muted)!important;}
}
@media (max-width:700px),(hover:none) and (pointer:coarse) and (max-height:500px){
  html body #profile-preview.phone-screen p.subtle{color:var(--surface-muted);font-size:calc(13px * var(--pg-ts,1));}
  html body #leave-party-confirm.phone-screen>p{color:var(--surface-muted);font-size:calc(15px * var(--pg-ts,1));}
  html body #leave-party-confirm.phone-screen .leave-preview-note{font-size:calc(12px * var(--pg-ts,1));}
}
@media (max-width:700px),(hover:none) and (pointer:coarse) and (max-height:500px){
  html body :is(#party-preview,.party-preview).party-window.phone-screen{--room-ink:var(--surface-ink);--room-muted:var(--surface-muted);--room-blue:var(--surface-accent);}
  html body .phone-screen hr{border:0;border-top:1px solid var(--surface-edge);}
  html body .phone-panel-content .nav-group h3{font-size:calc(13px * var(--pg-ts,1));color:var(--surface-muted);}
  html body :is(#party-preview,.party-preview).party-window.phone-screen .room-task-form{display:grid;grid-template-columns:minmax(0,1fr) auto;background:var(--phone-field);}
  html body :is(#party-preview,.party-preview).party-window.phone-screen .room-task-form>input{grid-column:1/-1;min-height:44px;}
  html body :is(#party-preview,.party-preview).party-window.phone-screen .room-task-form :is(button,summary){min-height:44px;font-size:calc(14px * var(--pg-ts,1));}
  html body :is(#party-preview,.party-preview).party-window.phone-screen .room-task-form .unified-select{min-width:0;}
  html body :is(#party-preview,.party-preview).party-window.phone-screen .room-task-item b{font-size:calc(15px * var(--pg-ts,1));}
  html body :is(#party-preview,.party-preview).party-window.phone-screen :is(.room-task-item em,.room-scope-note,.room-work-note,.room-address){font-size:calc(12px * var(--pg-ts,1));}
  html body :is(#party-preview,.party-preview).party-window.phone-screen .room-handoff-actions{flex-wrap:wrap;gap:10px;}
  html body :is(#party-preview,.party-preview).party-window.phone-screen .room-handoff-actions button{font-size:calc(14px * var(--pg-ts,1));min-height:44px;}
}
@media (max-width:700px),(hover:none) and (pointer:coarse) and (max-height:500px){
  html body :is(.shell,#directory) .party :is(.privacy-label,.category-label,.meta){font-size:calc(12px * var(--pg-ts,1))!important;line-height:1.5;}
  html body :is(.shell,#directory) .party h3{font-size:calc(15px * var(--pg-ts,1))!important;line-height:1.4;}
  html body :is(.shell,#directory) .party .party-copy>p{font-size:calc(13px * var(--pg-ts,1))!important;line-height:1.55;}
  html body :is(.shell,#directory) .party .meta{flex-wrap:wrap;gap:4px 10px;}
  html body :is(.shell,#directory) .party [data-party-open]{font-size:calc(13px * var(--pg-ts,1))!important;min-height:40px;}
  html body #dm-profile-popover.phone-screen .dm-profile-interests span{font-size:calc(13px * var(--pg-ts,1));}
  html body #dm-profile-popover.phone-screen .dm-profile-full{font-size:calc(15px * var(--pg-ts,1));min-height:44px;}
}
@media (max-width:700px),(hover:none) and (pointer:coarse) and (max-height:500px){
  html body #directory #directory-grid .party .party-copy{padding-top:44px;}
  html body :is(.shell,#directory) .party .category-label{overflow-wrap:anywhere;}
}
/* Decorative covers must never consume a phone control's tap. */
@media (max-width:700px),(hover:none) and (pointer:coarse) and (max-height:500px){
  html body #create-party-dialog.phone-screen #create-party-form{display:flex!important;flex-direction:column;}
  html body #create-party-dialog.phone-screen .editor-cover{pointer-events:none;}
  html body #create-party-dialog.phone-screen .editor-body{order:0;padding-bottom:24px!important;}
  html body #create-party-dialog.phone-screen #editor-background-menu{order:1;position:relative!important;left:auto!important;bottom:auto!important;z-index:2;margin:0 24px 24px;}
  html body #create-party-dialog.phone-screen #editor-background-menu summary{min-height:44px;display:flex;align-items:center;}
}

/* Info content stays the same when it becomes a standalone phone screen. */
@media (max-width:700px),(hover:none) and (pointer:coarse) and (max-height:500px){
 html body .phone-menu-screen .room-details>:is(.party-close,.mobile-details-close,.popup-party-cover,.chat-sample,h2,small,.party-status){display:none!important}
 html body .phone-menu-screen .room-details{color:var(--surface-ink);padding:0 22px 28px!important}
 html body .phone-menu-screen .room-details .contribution{margin-top:20px}
 html body .phone-menu-screen .room-details .completion{padding-top:22px;border-top:1px solid var(--surface-border,#cbd5e1);margin-top:24px}
 html body .phone-menu-screen .room-details .completion textarea{width:100%;min-height:100px;padding:12px;margin:10px 0;border:1px solid var(--surface-border,#cbd5e1);border-radius:12px;resize:vertical}
 html body .phone-menu-screen .room-details .completion button{min-height:44px;padding:10px 14px;border:1px solid var(--surface-border,#cbd5e1);border-radius:12px}
 html body .phone-menu-screen .room-details .decision-actions{display:flex;flex-wrap:wrap;gap:10px}
 html body .phone-menu-screen .room-details .vote-list>div{display:flex;justify-content:space-between;gap:12px;padding:10px 0}
}

@media (max-width:700px),(hover:none) and (pointer:coarse) and (max-height:500px){html body .phone-screen-bar h2 .phone-screen-subtitle{display:block;font-size:calc(12px * var(--pg-ts,1));font-weight:400;line-height:1.4;color:var(--surface-muted);margin-top:3px;max-width:100%}}

/* Named destinations in full-screen menus; compact header tools keep their icons. */
@media (max-width:700px),(hover:none) and (pointer:coarse) and (max-height:500px){
 html body #app-navigation.phone-panel-content{padding:20px!important}
 html body #app-navigation .nav-group{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:10px 0 16px}
 html body #app-navigation .nav-group h3{margin:0 0 2px;font-size:calc(12px * var(--pg-ts,1))!important;color:var(--surface-muted)}
 html body #app-navigation .nav-group>button{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:9px;height:auto;min-height:82px;min-width:0;padding:12px!important;text-align:left}
 html body #app-navigation .phone-menu-label{display:block!important;min-width:0;width:100%;font-size:calc(13px * var(--pg-ts,1))!important;line-height:1.35;font-weight:600;white-space:normal;overflow-wrap:break-word}
 html body #app-navigation .phone-menu-label>span{display:block}
 html body #app-navigation .phone-menu-label>:is(i,small){display:none}
 html body .phone-menu-screen .mobile-room-menu{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 html body .phone-menu-screen .mobile-room-menu>button,html body .phone-menu-screen .mobile-room-menu .room-text-trigger{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;min-width:0;min-height:84px;height:auto;width:100%;padding:14px!important}
 html body .phone-menu-screen .mobile-room-menu .room-icon-label{display:block!important;opacity:1!important;visibility:visible!important;max-width:none!important;width:auto!important;transform:none!important;white-space:normal;overflow:visible;margin:0;padding:0;font-size:calc(13px * var(--pg-ts,1));line-height:1.4;text-align:left;transition:none}
 html body :is([data-history],[data-record-tab],[data-request-tab],[data-profile-page],#view-directory,[data-text-reset]).phone-icon-only{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:0;padding:8px!important}
 html body :is([data-history],[data-record-tab],[data-request-tab],[data-profile-page],#view-directory,[data-text-reset])>.phone-menu-label{display:block!important;white-space:normal;font-size:calc(12px * var(--pg-ts,1))!important;line-height:1.4}
 html body :is([data-history],[data-record-tab],[data-request-tab],[data-profile-page],#view-directory,[data-text-reset])>.phone-menu-icon svg{width:17px;height:17px}
 html body .tabs [data-tab],html body .room-section-tabs [data-room-section]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;padding:7px 5px!important}
 html body .tabs [data-tab]>.mobile-menu-text,html body .room-section-tabs [data-room-section]>.mobile-menu-text{display:block!important;white-space:normal;font-size:calc(12px * var(--pg-ts,1))!important;line-height:1.3}
 html body .tabs [data-tab]>.mobile-icon,html body .room-section-tabs [data-room-section]>.mobile-icon{width:18px;height:18px;flex:0 0 18px}
}
@media(max-width:360px){html body #app-navigation .nav-group{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Filters retain their form layout when moved out of the directory into a phone screen. */
@media (max-width:700px),(hover:none) and (pointer:coarse) and (max-height:500px){
 html body .mobile-filter-panel.phone-panel-content{display:grid!important;grid-template-columns:minmax(0,1fr);gap:22px;align-content:start}
 html body .mobile-filter-panel.phone-panel-content>label{display:grid;gap:8px;min-width:0;font-size:calc(13px * var(--pg-ts,1));line-height:1.4;color:var(--surface-muted)}
 html body .mobile-filter-panel .unified-select{display:block;min-width:0;width:100%}
 html body .mobile-filter-panel .unified-select>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;width:100%;padding:12px 14px;border:1px solid var(--surface-edge);border-radius:12px;background:var(--phone-field);color:var(--surface-ink);font-size:calc(15px * var(--pg-ts,1));font-weight:500;list-style:none;cursor:pointer}
 html body .mobile-filter-panel .unified-select>summary::after{content:'⌄';color:var(--surface-muted);font-size:calc(16px * var(--pg-ts,1))}
 html body .mobile-filter-panel #filter-reset{justify-self:start;min-height:44px;padding:10px 14px;border:1px solid var(--surface-edge);border-radius:12px;color:var(--surface-ink);font-size:calc(13px * var(--pg-ts,1))}
 html body .token-views>[data-token-view]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:54px;padding:6px;min-width:0}
 html body .token-views [data-token-view]>.mobile-menu-text{display:block!important;font-size:calc(12px * var(--pg-ts,1));line-height:1.3;white-space:normal}
 html body .token-views .mobile-menu-text>[aria-hidden]{display:none}
}

@media (max-width:700px),(hover:none) and (pointer:coarse) and (max-height:500px){html[lang=en] body #app-navigation .nav-group{grid-template-columns:repeat(2,minmax(0,1fr))}html[lang=en] body #app-navigation .phone-menu-label{overflow-wrap:normal;word-break:normal}}

/* Discover: one unboxed action, aligned by the heading's content box. */
html body .shell .dashboard [data-panel=discover]>.panel-head{align-items:center;min-height:44px;margin-bottom:12px;gap:8px}
html body .shell .dashboard [data-panel=discover]>.panel-head h2{margin:0;line-height:1.25}
html body .shell .dashboard [data-panel=discover]>.panel-head h2:focus{outline:none}
html body .shell .dashboard [data-panel=discover]>.panel-head .handle{margin-top:0}
html body .shell .dashboard #main-create-party{display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px;margin:0 0 0 auto;padding:0;border:0;border-radius:8px;box-shadow:none;background:transparent;color:var(--surface-accent);transform:none;transition:color .15s}
html body .shell .dashboard #main-create-party:hover,html body .shell .dashboard #main-create-party:active{background:transparent;box-shadow:none;color:var(--surface-ink);transform:none}
html body .shell .dashboard #main-create-party>.mobile-icon{display:block;width:26px;height:26px;flex:0 0 26px;stroke-width:1.8}
html body .shell .dashboard #main-create-party>.mobile-menu-text{display:none!important}
html body .shell .dashboard #main-create-party:focus-visible{outline:2px solid var(--surface-accent);outline-offset:2px}

/* 2026-10-04 Claude: the create screen is the party card itself, enlarged (감독 2026-09-27 '입력대기중인 카드보드 그자체가 나와서 그 카드보드를
   편집하는 방식'). On a computer it is the 2026-09-27 evening approved card (Playground-Design/interactive-home/reference-aligned-editor.png,
   360×756) at the same positions; other screens use the same proportions (--ec-scale, set by sizeEditorFromPublishedCard in index.html)
   (감독 '웹은 9/27저녁 최종승인본으로 하고 나머지 환경은 알아서 비율 이쁘게'). Changes from that card: 'Create party' is a full-width button at the
   bottom ('파티만들기는 버튼으로 하단에'), '0 AI connected' is gone ('AI연결은 당연히 0이겠지'), 'Change background' moved to the top-left
   corner so the bottom holds only the button, and the four open seats fit inside the card (the approved image let the fifth circle touch the edge).
   On a phone shorter than the card, the empty band above the seats and below them shrinks first (--ec-squeeze) so the button stays on screen. */
#create-party-dialog{--ec-scale:1;--ec-title-lines:2;
 --ec-squeeze:0px;--ec-height:calc((756px - var(--ec-squeeze)) * var(--ec-scale));--ec-left:calc(33px * var(--ec-scale));
 --ec-privacy-y:calc(37px * var(--ec-scale));--ec-privacy-line:calc(23px * var(--ec-scale));
 --ec-category-y:calc(79px * var(--ec-scale));--ec-category-font:calc(18px * var(--ec-scale));--ec-category-line:calc(22px * var(--ec-scale));
 --ec-title-y:calc(119px * var(--ec-scale));--ec-title-font:calc(29px * var(--ec-scale));--ec-title-line:calc(37px * var(--ec-scale));
 --ec-title-height:calc(37px * var(--ec-title-lines) * var(--ec-scale));
 --ec-desc-y:calc((135px + 37px * var(--ec-title-lines)) * var(--ec-scale));
 --ec-desc-font:calc(20px * var(--ec-scale));--ec-desc-line:calc(32.5px * var(--ec-scale));--ec-desc-height:calc(130px * var(--ec-scale));
 --ec-people-y:calc((443px - var(--ec-squeeze) * 0.6) * var(--ec-scale));--ec-avatar:calc(50px * var(--ec-scale));--ec-gap:calc(10.5px * var(--ec-scale));--ec-person-font:calc(20px * var(--ec-scale));
 --ec-meta-y:calc((604px - var(--ec-squeeze)) * var(--ec-scale));--ec-meta-font:calc(18px * var(--ec-scale));--ec-meta-line:calc(25px * var(--ec-scale));
 --ec-action-y:calc((673px - var(--ec-squeeze)) * var(--ec-scale));--ec-action-font:calc(17px * var(--ec-scale));--ec-action-line:calc(50px * var(--ec-scale))}
@media(min-width:701px){html body #create-party-dialog:not(.phone-screen){width:calc(360px * var(--ec-scale))!important;max-width:calc(100vw - 32px)!important;padding:0!important}}
html body #create-party-dialog #editor-privacy-toggle{top:var(--ec-privacy-y)!important;right:var(--ec-left)!important}
/* Seats: host + four open seats exactly fill the row inside the card's 1px edge (5 × 50 + 4 × 10.5 = 292 = 358 − 2 × 33). */
html body #create-party-dialog :is(.editor-host,#editor-empty-seats>span,.editor-invite-seat){width:var(--ec-avatar)!important;height:var(--ec-avatar)!important;flex:0 0 var(--ec-avatar)!important;font-size:var(--ec-person-font)!important}
html body #create-party-dialog #editor-empty-seats{flex-wrap:nowrap;min-width:0;gap:var(--ec-gap)!important;margin-left:var(--ec-gap)!important}
html body #create-party-dialog #editor-empty-seats>small{flex:0 0 auto;font-size:calc(14px * var(--ec-scale));color:#8a95a6}
/* 'Change background' sits in the top-left corner, level with the privacy toggle; on a computer its options open downward over the card
   (on a phone they open as their own screen, see mobile-screens.js). */
html body #create-party-dialog:is(.phone-screen,:not(.phone-screen)) details#editor-background-menu{position:absolute!important;top:var(--ec-privacy-y)!important;bottom:auto!important;left:var(--ec-left)!important;right:auto!important;z-index:20;margin:0!important;padding:0!important;font-size:calc(15px * var(--ec-scale))!important;line-height:var(--ec-privacy-line)!important;color:#6f7d92;border:0!important;box-shadow:none!important}
html body #create-party-dialog:is(.phone-screen,:not(.phone-screen)) details#editor-background-menu>summary{padding:0!important;line-height:inherit!important;min-height:0!important;font-size:inherit!important;color:inherit!important;display:block!important}
@media(min-width:701px){html body #create-party-dialog:is(.phone-screen,:not(.phone-screen)) details#editor-background-menu .editor-background-options{position:absolute!important;top:calc(100% + 8px)!important;bottom:auto!important;left:0!important;right:auto!important;margin:0!important;width:max-content;max-width:calc(360px * var(--ec-scale) - 2 * var(--ec-left));padding:12px!important;border-radius:14px!important}}
body.dark #create-party-dialog details#editor-background-menu{color:#aeb9cb}
/* Bottom: the size line, then the button. */
html body #create-party-dialog .editor-people-note{justify-content:flex-start!important}
html body #create-party-dialog .create-footer{top:var(--ec-action-y)!important;height:var(--ec-action-line)!important}
html body #create-party-dialog #create-submit{display:flex!important;align-items:center;justify-content:center;box-sizing:border-box;width:100%!important;height:var(--ec-action-line)!important;padding:0 16px!important;margin:0!important;border:0!important;border-radius:calc(14px * var(--ec-scale))!important;background:#1f2329!important;color:#fff!important;font-size:var(--ec-action-font)!important;line-height:1.2!important;font-weight:700!important;text-align:center!important;letter-spacing:0!important;box-shadow:0 6px 16px rgba(17,22,30,.16)!important;transform:none!important}
html body #create-party-dialog #create-submit::after{content:none!important}
html body #create-party-dialog #create-submit:hover{background:#2c3139!important}
html body #create-party-dialog #create-submit:disabled{opacity:.45!important;cursor:not-allowed}
html body #create-party-dialog:not(.default-neutral) #create-submit{background:#ffffffee!important;color:#1d2433!important}
html body.dark #create-party-dialog.default-neutral #create-submit{background:#e8ecf3!important;color:#151a24!important;box-shadow:none!important}
html body #create-party-dialog #create-party-error{position:absolute;left:0;right:0;bottom:calc(100% + 6px);margin:0;font-size:calc(13px * var(--ec-scale));line-height:1.4;text-align:center;color:#c23b3b}
html body #create-party-dialog #create-party-error:empty{display:none}
@media (max-width:700px),(hover:none) and (pointer:coarse) and (max-height:500px){
 /* On a phone the screen holds the card under the top bar (whose back button replaces the card's ×), scaled to the screen width. */
 html body #create-party-dialog.phone-screen{padding:12px 16px calc(16px + env(safe-area-inset-bottom,0px))!important;overflow:auto}
 html body #create-party-dialog.phone-screen #create-party-form.card-editor{width:calc(360px * var(--ec-scale))!important;max-width:none;margin:0 auto;border-radius:calc(24px * var(--ec-scale));overflow:visible;background:#eceef3}
 html body.dark #create-party-dialog.phone-screen #create-party-form.card-editor{background:#262d3a}
 html body #create-party-dialog.phone-screen:not(.default-neutral) #create-party-form.card-editor{background:transparent}
 html body #create-party-dialog.phone-screen .create-close{display:none!important}
 html body #create-party-dialog.phone-screen .editor-capacity :is(.unified-select>summary,select){font-size:inherit!important;line-height:inherit!important;color:inherit!important;min-height:0!important;padding:0 4px!important}
}
/* The title and description are written straight onto the card: the dialogs' shared field backgrounds (glass on a computer, white on a phone)
   do not apply here; a faint wash shows only while editing. */
html body:is(.dark,:not(.dark)) #create-party-dialog :is(#create-name,#create-goal){background:transparent!important;box-shadow:none!important}
html body:is(.dark,:not(.dark)) #create-party-dialog :is(#create-name,#create-goal):focus{background:#ffffff66!important}
html body.dark #create-party-dialog :is(#create-name,#create-goal):focus{background:#ffffff0d!important}
/* Korean lines break between words, as the title measurement counts them (sizeEditorFromPublishedCard). */
html body #create-party-dialog :is(#create-name,#create-goal){word-break:keep-all;overflow-wrap:anywhere}

@media (max-width:700px),(hover:none) and (pointer:coarse) and (max-height:500px){
  /* 2026-10-03 Claude: no second header row on phones — moderator, token total and AI icons live in the people row, the room menu in the top bar. */
  html body :is(#party-preview,.party-preview).party-window.phone-screen .room-head{display:none!important}
  html body :is(#party-preview,.party-preview).party-window.phone-screen .room-layout{height:calc(100% - var(--phone-bar-height))!important}
  html body :is(#party-preview,.party-preview).party-window.phone-screen>.phone-screen-bar .mobile-room-more{display:grid!important;place-items:center;width:44px;min-width:44px;height:44px;padding:10px!important;border:0;background:none;color:inherit}
  html body .party-window.phone-screen .room-people{flex-wrap:nowrap;align-items:center;gap:8px;min-height:52px;padding:6px 0}
  html body .party-window.phone-screen .room-people>.room-laya{margin-left:auto;width:34px;height:34px;min-width:34px;min-height:34px;padding:0!important;border-radius:50%;border:1px solid var(--pg-glass-line,#c9d4e4);background:#fff;color:inherit;display:grid;place-items:center}
  html body .party-window.phone-screen .room-people>.room-laya .room-laya-label{display:none}
  html body .party-window.phone-screen .room-people>.room-token-total{display:inline-flex;align-items:baseline;gap:4px;padding:6px 10px!important;border-radius:17px;min-height:34px;font-size:calc(12px * var(--pg-ts,1))!important;border:1px solid var(--pg-glass-line,#c9d4e4);background:#fff;color:inherit}
  html body .party-window.phone-screen .room-people>.room-token-total.is-empty{display:none!important}
  html body .party-window.phone-screen .room-people>:is(.room-laya,.room-token-total)~:is(.room-live-ai,.room-peer-ai){margin-left:0}
  body.dark .party-window.phone-screen .room-people>:is(.room-laya,.room-token-total){background:#26324a;border-color:#3a4a66}
  /* 2026-10-05 감독 '사용자 목록 우측에 토큰사용량 부활': 줄 오른쪽 끝, 접으면 함께 숨김 */
  html body :is(#party-preview,.party-preview).party-window.phone-screen .room-people>.room-token-total{margin-left:auto!important;margin-right:0!important}
  html body :is(#party-preview,.party-preview).party-window .room-people.is-collapsed>.room-token-total{display:none!important}
}
/* 2026-10-03 Claude: while a phone screen (a party, a picture…) is open, pulling down does not reload the page — an accidental pull while
   scrolling the conversation or after picking photos used to reload and drop the party (감독 '자꾸 파티창에서 메인으로 나가진다'). */
html:has(>body.phone-has-screen),html body.phone-has-screen{overscroll-behavior-y:none}
/* 2026-10-04 Claude: main-screen party cards keep the create card's proportions (감독 '메인화면 파티창사이즈도 맞춰라'): the create card is
   this card enlarged (358 × 756), so a card here is 358:756 at its own width. Longer content still grows a card, and cards in one row stay
   equal (the row stretches them). There is no 'Open' button on a card: tapping the card opens it ('여긴 버튼이 필요없고 그냥 카드를 누르면
   들어가지잖아'); the button stays as an invisible cover over the whole card (keyboards and screen readers reach it, its focus ring is the card's), with the
   faces and open seats above it so they still open a profile or ask to join. */
html body .shell .cards .party{aspect-ratio:358/756;height:auto!important;min-height:0!important}
html body :is(.shell,#directory) .party{position:relative}
html body :is(.shell,#directory) .party .party-copy{position:static!important}
html body :is(.shell,#directory) .party [data-party-open]{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:inherit!important;background:transparent!important;color:transparent!important;font-size:0!important;opacity:0;z-index:1;cursor:pointer}
html body :is(.shell,#directory) .party [data-party-open]:focus-visible{opacity:1;outline:2px solid var(--pg-accent)!important;outline-offset:2px}
html body :is(.shell,#directory) .party :is(.people,.ai-people){position:relative;z-index:2}

/* 2026-10-04 Claude: layout sweep fixes (감독 '이런 레이아웃 에러 싹다 찾아내라').
   The create card's × no longer overlaps '▾ Public' (the shared 28px close sat 3px into it). */
@media(min-width:701px){html body #create-party-dialog .create-close{top:6px!important;right:6px!important}}
/* 'Party info' opens over the work panel: on a computer it is nearly solid, so the panel's text no longer shows through it. */
html body:is(.dark,:not(.dark)) :is(#party-preview,.party-preview).party-room .room-details:not([data-surface="solid"]){background-color:rgba(247,249,252,.97)!important}
html body.dark :is(#party-preview,.party-preview).party-room .room-details:not([data-surface="solid"]){background-color:rgba(30,40,56,.97)!important}
/* 2026-10-04 Claude (감독 '아이폰 가로 모드일 때 팝업 상태가 불편, 모바일은 풀사이즈 전체화면'): phones held sideways use the phone screens too
   (see the landscape query beside every max-width:700px rule). Height is short there, so a party's bars get slimmer and the conversation keeps
   the room: slimmer top bar, text-only section tabs, a compact people row, no channel tip, a one-line message box. */
@media (hover:none) and (pointer:coarse) and (max-height:500px){
 html body dialog.party-window.phone-screen>.phone-screen-bar{min-height:44px!important;height:44px!important;padding-top:0!important;padding-bottom:0!important}
 html body dialog.party-window.phone-screen>.phone-screen-bar button{width:40px!important;height:40px!important;min-height:40px!important}
 html body dialog.party-window.phone-screen .room-section-tabs{min-height:34px!important;height:34px!important}
 html body dialog.party-window.phone-screen .room-section-tabs>button{min-height:34px!important;height:34px!important;padding:4px 8px!important;font-size:calc(13px * var(--pg-ts,1))!important}
 html body dialog.party-window.phone-screen .room-section-tabs>button svg{display:none!important}
 html body dialog.party-window.phone-screen .room-people{min-height:0!important;padding-top:4px!important;padding-bottom:4px!important}
 html body dialog.party-window.phone-screen .room-people .owner-avatar{transform:scale(.85);transform-origin:left center}
 html body dialog.party-window.phone-screen .room-channel-tip{display:none!important}
 html body dialog.party-window.phone-screen form.room-composer{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:8px;min-height:0!important;padding-top:6px!important;padding-bottom:6px!important}
 html body dialog.party-window.phone-screen form.room-composer>.room-compose-actions{display:contents!important}
 html body dialog.party-window.phone-screen form.room-composer>textarea{grid-column:2;grid-row:1;min-height:38px!important;height:38px!important;max-height:30vh!important;padding-top:8px!important;padding-bottom:8px!important}
 html body dialog.party-window.phone-screen form.room-composer>:not(textarea):not(.room-compose-actions){grid-column:1/-1}
 html body dialog.party-window.phone-screen form.room-composer .pg-room-attach{grid-column:1;grid-row:1}
 html body dialog.party-window.phone-screen form.room-composer .room-send{grid-column:3;grid-row:1}
 html body dialog.party-window.phone-screen form.room-composer .room-compose-actions>span{display:none!important}
}
/* 2026-10-08 Claude (감독 '파티창 상단 토큰량 볼드 글씨를 텍스트들과 맞춰 정렬하고 토큰(일부 추정) 글자는 그 하단에 작은 사이즈로'): the number on top, its label under it, both right-aligned */
@media (max-width:700px),(hover:none) and (pointer:coarse) and (max-height:500px){
  html body :is(#party-preview,.party-preview).party-window.phone-screen .room-token-total{flex-direction:column!important;align-items:flex-end!important;justify-content:center;gap:1px!important;line-height:1.15;text-align:right}
  html body :is(#party-preview,.party-preview).party-window.phone-screen .room-token-total span{font-size:calc(15px * var(--pg-ts,1))!important;font-weight:700;line-height:1.15}
  html body :is(#party-preview,.party-preview).party-window.phone-screen .room-token-total small{font-size:calc(9.5px * var(--pg-ts,1))!important;opacity:.7;line-height:1.2;white-space:nowrap}
}

/* 2026-10-12 Claude (감독 '파티카드 사이즈 각각 다른 이유?'): the cards came out in different sizes because their heads differed — a default (grey) card
   kept an empty 16:9 cover block (its category picture is gone since today), and the 'Public/Private' and category lines are missing on some cards —
   while the card height follows its content. Now every card on the main screen has the same head: no cover block, the two label lines always take
   their height even when empty, and a card never grows past the row's 358:756 shape (long text clips inside). */
@media (max-width:700px),(hover:none) and (pointer:coarse) and (max-height:500px){
 html body .shell .cards .party>.party-art{display:none!important}
 html body .shell .cards .party .privacy-label,html body .shell .cards .party .category-label{display:block;min-height:1.4em;margin-bottom:8px}
 html body .shell .cards .party .category-label:empty::before,html body .shell .cards .party .privacy-label:empty::before{content:"\00a0"}
 html body .shell .cards .party{aspect-ratio:358/756;height:auto!important;max-height:none;overflow:hidden}
 html body .shell .cards .party .party-copy{min-width:0}
 html body .shell .cards .party .party-copy>p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
}