.mobile-language-button{display:none}
/* Mobile-only progressive disclosure. Desktop styles and control handlers stay intact. */
.mobile-icon,.mobile-preview-toggle,.mobile-filter-toggle,.mobile-room-more { display:none; }
.mobile-popover[hidden] { display:none!important; }
@media (max-width:700px),(hover:none) and (pointer:coarse) and (max-height:500px){
  .mobile-icon {display:block;width:21px;height:21px;flex:0 0 21px;}
  .mobile-icon-action {display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;}
  .mobile-icon-action>.mobile-menu-text {display:none!important;}
  body .preview {height:32px;position:relative;padding:0 16px;font-size:calc(10px * var(--pg-ts,1));}
  .preview>span {max-width:calc(100% - 44px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
  .mobile-preview-toggle {display:grid;place-items:center;width:44px;height:32px;text-decoration:none!important;}
  .mobile-popover {z-index:12000;color:var(--surface-ink);background:var(--surface-glass);border:1px solid var(--surface-edge);box-shadow:var(--surface-shadow);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-radius:16px;}
  .mobile-preview-panel {position:absolute;right:8px;top:32px;width:240px;padding:16px;display:flex;flex-direction:column;gap:14px;align-items:stretch;}
  .mobile-preview-panel>* {min-height:36px;display:flex;align-items:center;justify-content:space-between;font-size:calc(12px * var(--pg-ts,1));}
  .shell {height:calc(100dvh - 40px);}
  .shell .dashboard {padding:8px 16px 24px!important;}
  .shell .dashboard .dashboard-fixed-header {top:-8px;padding-top:4px;margin-bottom:20px;}
  .shell .dashboard .topbar {min-height:44px;gap:10px;margin-bottom:2px;}
  .shell .dashboard .nav-trigger-group {display:flex;flex:1;min-width:0;}
  .shell .dashboard #nav-brand {display:flex;gap:7px;}
  .shell .dashboard .nav-ci-icon {width:27px;height:27px;font-size:calc(20px * var(--pg-ts,1));border-radius:8px;}
  .shell .dashboard .nav-ci-wordmark {font-size:calc(16px * var(--pg-ts,1));letter-spacing:-.45px;}
  .shell .dashboard .toplinks {width:auto;gap:0;}
  .shell .dashboard .language-control,.shell .dashboard #mode {display:none;}
  /* 2026-10-03 Claude: short language button in the phone top bar (◎ + code) opening the full-screen language list. */
  .shell .dashboard .toplinks>button.mobile-language-button {display:inline-flex;align-items:center;justify-content:center;gap:3px;width:auto;min-width:48px;height:44px;min-height:44px;padding:0 6px;border:0;background:none;color:inherit;font:600 calc(13px * var(--pg-ts,1))/1 inherit;letter-spacing:.2px;}
  .shell .dashboard .toplinks>button.mobile-language-button span {font-size:calc(14px * var(--pg-ts,1));opacity:.75;}
  .shell .dashboard .toplinks>button {width:40px;min-width:40px;height:44px;min-height:44px;padding:0;}
  .shell .dashboard .toplinks>.me {width:30px;min-width:30px;height:30px;min-height:30px;margin-left:5px;font-size:calc(12px * var(--pg-ts,1));}
  .shell .dashboard .search {margin-bottom:0;gap:6px;}
  .shell .dashboard .search input {font-size:calc(16px * var(--pg-ts,1));}
  .shell .dashboard .search .menu {min-height:44px;}
  .shell .dashboard .panel-head {gap:8px;}
  .shell .dashboard .panel-head h2 {font-size:calc(24px * var(--pg-ts,1));margin-bottom:12px;}
  .shell .dashboard .panel-head .handle {display:none;}
  .shell .dashboard #main-create-party {width:44px;min-width:44px;height:44px;padding:0;border-radius:13px;}
  .shell .dashboard .tabs {justify-content:space-around;gap:0;margin-bottom:16px;}
  .shell .dashboard .tabs>button {flex:1;height:48px;padding:0;}
  .shell .dashboard .tabs>button[aria-selected=true]::after {left:25%;right:25%;}
  .shell .dashboard .secondary {padding:18px;}
  #app-navigation {max-width:calc(100vw - 48px);}
  /* 2026-10-03 Claude: the sign-in / sign-up screen is a full phone screen (account.css), not a card 24px smaller than the phone. */
  /* 2026-10-03 Claude: full-screen phone screens fill the whole screen; these size caps are only for small floating dialogs (they used to leave a 24px gap on the right and a short bottom).
     The party chat picture viewer is full screen too. */
  body dialog:not(.party-window):not(#directory):not(.auth-dialog):not(.phone-screen):not(.room-image-viewer) {max-width:calc(100vw - 24px)!important;max-height:calc(var(--phone-height,100dvh) - 24px)!important;overflow-y:auto;overscroll-behavior:contain;}
  body :is(dialog,#dm-board) :is(input:not([type=range]):not([type=checkbox]):not([type=file]),textarea,select){font-size:calc(16px * var(--pg-ts,1))!important;}
  :is(dialog,#dm-board) button:focus-visible {outline-offset:1px;}
  /* 2026-10-04 Claude: the create screen is the party card itself, enlarged (감독 2026-09-27 결정) — the phone rules that turned it into a form are gone (see mobile-screens.css). */
  #create-party-dialog .friend-invite-dialog,#create-party-dialog dialog {position:fixed!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%);margin:0!important;width:300px!important;}
  #party-settings.room-settings-glass {padding:24px;}
  #party-settings.room-settings-glass .settings-actions {bottom:-24px;margin:18px -24px -24px;padding:14px 24px;}
  /* Room header: title and window controls above compact primary actions. */
  body :is(#party-preview,.party-preview).party-window {left:8px!important;top:calc(var(--phone-top,0px) + 8px)!important;width:calc(100vw - 16px)!important;height:calc(var(--phone-height,100dvh) - 16px)!important;max-height:none!important;max-width:none!important;padding:0!important;overflow:hidden;border-radius:20px;}
  body :is(#party-preview,.party-preview).party-window.room-fullscreen {left:0!important;top:var(--phone-top,0px)!important;width:100vw!important;height:var(--phone-height,100dvh)!important;border-radius:0!important;}
  body :is(#party-preview,.party-preview).party-room .room-head {height:110px;display:grid;grid-template-columns:minmax(0,1fr) 44px 44px;grid-template-rows:50px 44px;padding:8px 10px;gap:0 2px;position:relative;z-index:4;cursor:default;}
  body .party-window .room-actions {display:contents!important;}
  body .party-window .room-title {grid-column:1;grid-row:1;}
  body .party-window .room-title h2 {font-size:calc(15px * var(--pg-ts,1));margin:0;white-space:nowrap;line-height:1.4;}
  body .party-window .room-title-line {gap:4px;}
  body .party-window .room-title>small {font-size:calc(9px * var(--pg-ts,1));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
  body .party-window .room-leave-access {min-width:28px!important;width:28px!important;height:36px!important;justify-content:center!important;}
  body .party-window .room-minimize {grid-column:2;grid-row:1;}
  body .party-window .room-close {grid-column:3;grid-row:1;}
  body .party-window .room-token-total {grid-column:1;grid-row:2;justify-self:start;text-align:left;display:flex;gap:6px;align-items:baseline;padding:10px 4px!important;min-height:44px;}
  body .party-window .room-token-total b {font-size:calc(12px * var(--pg-ts,1));}
  body .party-window [data-room-toggle] {grid-column:2;grid-row:2;}
  body .party-window .mobile-room-more {display:grid;place-items:center;grid-column:3;grid-row:2;}
  body .party-window .room-head :is(.room-minimize,.room-close,[data-room-toggle],.mobile-room-more) {width:44px!important;min-width:44px!important;height:44px!important;padding:12px!important;margin:0;border:0;justify-content:center;}
  body .party-window .room-head .room-icon-label {display:none;}
  .mobile-room-menu {position:absolute;right:10px;top:100px;width:250px;max-height:calc(var(--phone-height,100dvh) - 150px);overflow:auto;padding:8px;display:flex;flex-direction:column;}
  body .party-window .mobile-room-menu .room-icon-menu {width:100%;height:44px;min-height:44px;gap:12px;border:0!important;padding:12px!important;margin:0!important;}
  body .party-window .mobile-room-menu .room-icon-label {display:block;max-width:none;opacity:1;transform:none;padding:0;font-size:calc(13px * var(--pg-ts,1));}
  .mobile-room-menu .room-text-control {width:100%;}
  .mobile-room-menu .room-text-popover {position:static;width:auto;max-width:100%;margin:4px 0 10px;box-shadow:none!important;border-radius:10px;}
  body :is(#party-preview,.party-preview).party-room .room-layout {position:relative;display:block!important;height:calc(100% - 110px)!important;overflow:hidden;}
  body :is(#party-preview,.party-preview).party-room .room-chat {display:flex;width:100%;max-width:none;height:100%;margin:0;padding:0 14px 12px!important;}
  body :is(#party-preview,.party-preview).party-room .room-work {position:absolute;inset:0;width:100%;display:flex!important;transform:translateX(0);padding:18px 14px;visibility:visible;transition:transform 280ms cubic-bezier(.22,.8,.2,1),visibility 280ms;z-index:2;background:var(--surface-glass);backdrop-filter:blur(22px);}
  body :is(#party-preview,.party-preview).party-room.room-work-hidden .room-work {transform:translateX(101%);visibility:hidden;pointer-events:none;}
  body .party-window .room-splitter {display:none!important;}
  body .party-window .room-edge-toggle {right:0;width:24px!important;height:48px!important;z-index:3;}
  body .party-window .room-people {min-height:56px;padding:8px 0;gap:8px;}
  body .party-window .room-section-tabs {min-height:48px;gap:0;justify-content:space-around;}
  body .party-window .room-section-tabs button {flex:1;padding:8px!important;min-height:48px;}
  body .party-window .room-timeline {padding-top:14px;}
  body .party-window .room-composer {padding:12px!important;min-height:104px;}
  body .party-window .room-composer textarea {min-height:44px;height:52px;}
  body .party-window .room-details {top:110px;right:12px;max-height:calc(var(--phone-height,100dvh) - 150px);overflow:auto;}
  body .party-window .room-task-form {flex-wrap:wrap;}
  body .party-window .room-task-form input {flex-basis:100%;min-height:40px;}
  body .party-window .room-task-form select {max-width:none;flex:1;}
  body .party-window .room-preview-card {min-height:64px;}
  body .party-window .room-browser {min-height:0;flex:1;}
  body .party-window .room-work-head button {min-width:44px;min-height:44px;}
  body :is(.party-window,#dm-board,.token-window)>.popup-resize-handle {display:none;}
  #dm-board {max-height:calc(var(--phone-height,100dvh) - 16px)!important;top:auto!important;bottom:calc(8px + env(safe-area-inset-bottom));left:8px!important;width:calc(100vw - 16px)!important;}
  #dm-board.dm-wide {height:calc(var(--phone-height,100dvh) - 16px)!important;}
  #dm-handle {padding:12px!important;min-height:64px;}
  #dm-board .dm-tools button {width:40px;height:44px;}
  #dm-board.dm-mini {width:250px!important;height:64px!important;left:auto!important;right:8px;}
  #dm-board .dm-contacts {overflow-x:auto;flex-wrap:nowrap;flex-shrink:0;}
  #dm-board .dm-contacts button {min-height:40px;flex-shrink:0;}
  #dm-board #dm-input {min-height:44px;}
  body #message-arrival-bubble {max-width:calc(100vw - 24px)!important;}
  .token-window {max-width:calc(100vw - 24px)!important;}
  .token-window .token-views button {min-height:44px;padding:8px!important;}
  .token-window .token-users {overflow-x:auto;flex-wrap:nowrap;}
  .token-window .token-users button {min-height:36px;flex-shrink:0;}
  #party-window-dock {right:8px;bottom:calc(6px + env(safe-area-inset-bottom));max-width:calc(100vw - 24px);padding:16px 8px 4px;}
  #party-window-dock .party-dock-card {width:62px;flex-basis:62px;height:98px;}
  #party-window-dock .party-dock-card+.party-dock-card {margin-left:-22px;}
  #party-window-dock .dock-card-face {padding:9px 6px;}
  #party-window-dock .dock-card-face b {font-size:calc(9px * var(--pg-ts,1));}
  #directory {padding:16px 14px calc(16px + env(safe-area-inset-bottom));height:var(--phone-height,100dvh);}
  #directory[open] {gap:14px;}
  #directory h2 {font-size:calc(23px * var(--pg-ts,1));}
  #directory .directory-filters {display:flex;gap:8px;position:relative;padding:0;flex-wrap:nowrap;}
  #directory .directory-filters>.search-clear-wrap {flex:1;min-width:0;}
  #directory .directory-filters .search-clear-wrap input {min-width:0;width:100%;}
  #directory .mobile-filter-toggle {display:grid;place-items:center;flex:0 0 44px;height:44px;min-height:44px;background:var(--surface-glass);border:1px solid #8896ae38;border-radius:12px;}
  #directory .mobile-filter-toggle.has-filters {color:var(--surface-accent);box-shadow:inset 0 0 0 1px currentColor;}
  #directory .mobile-filter-panel {position:absolute;top:52px;right:0;left:0;padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  #directory .mobile-filter-panel label {border:0!important;padding:0!important;min-width:0;}
  #directory .mobile-filter-panel #filter-reset {grid-column:1/-1;min-height:44px;}
  #directory .mobile-filter-panel .unified-select-menu {max-height:210px;overflow:auto;}
  #directory-grid .party .party-copy {padding:16px 12px;}
  #directory-grid .party .meta {flex-wrap:wrap;gap:6px;}
  .toast {max-width:calc(100vw - 32px);width:max-content;bottom:20px;z-index:20000;}
  @media(max-height:600px){
    .shell {--mobile-intro-height:70dvh;}
  }
}
@media (max-width:700px),(hover:none) and (pointer:coarse) and (max-height:500px){
  /* Mobile uses solid surfaces by request. Desktop keeps its glass material. */
  :root {--surface-glass:#f1f5fa;--surface-edge:#dce3ee;--surface-shadow:0 14px 40px #15243b22;--phone-field:#ffffff;}
  body.dark {--surface-glass:#1e2838;--surface-edge:#3a475b;--surface-shadow:0 14px 40px #0005;--phone-field:#29364b;}
  html body:is(.dark,:not(.dark)) :is(dialog:not(#directory),#dm-board,#dm-profile-popover,#message-arrival-bubble,#app-navigation,.mobile-popover,.editor-category-options,.editor-background-options,.unified-select-menu,.room-text-popover,.room-details,.room-edge-toggle,.room-work,.dashboard-fixed-header) {
    background:var(--surface-glass)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;color:var(--surface-ink)!important;border-color:var(--surface-edge)!important;
  }
  html body:is(.dark,:not(.dark)) :is(dialog::backdrop,#party-window-backdrop) {backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
  html body:is(.dark,:not(.dark)) :is(.settings-actions,.room-composer,.room-preview-card,.dm-compose,.dm-compose-box,.action-head,.token-head,.room-browser) {background:var(--phone-field)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
  html body:is(.dark,:not(.dark)) #message-arrival-bubble::before {background:var(--surface-glass)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
  html body .dashboard-fixed-header {background:#fff!important;}
  html body.dark .dashboard-fixed-header {background:#191c22!important;}
  body :is(#party-preview,.party-preview).party-room.room-panels-ready .room-work {opacity:1;transform:translateX(0);transition:transform 280ms cubic-bezier(.22,.8,.2,1),visibility 0s;}
  body :is(#party-preview,.party-preview).party-room.room-panels-ready.room-work-hidden .room-work {opacity:1;transform:translateX(101%);visibility:hidden;transition:transform 280ms cubic-bezier(.22,.8,.2,1),visibility 0s 280ms;}
  body .party-window .room-token-total {flex-direction:row!important;align-items:baseline!important;border:0!important;gap:6px;margin:0!important;}
  body .party-window .mobile-room-menu .room-icon-menu {gap:12px!important;}
  body #friend-invite-dialog {z-index:90;}
  body #friend-invite-dialog .invite-close {min-width:36px;min-height:36px;}
}
@media (max-width:700px),(hover:none) and (pointer:coarse) and (max-height:500px){
  :root {--phone-safe-top:env(safe-area-inset-top,0px);--phone-safe-bottom:env(safe-area-inset-bottom,0px);}
  body {padding-top:calc(var(--phone-safe-top) + 12px);}
  .shell {height:calc(100dvh - var(--phone-safe-top) - var(--phone-safe-bottom) - 52px);margin-bottom:calc(var(--phone-safe-bottom) + 8px);}
  body dialog::backdrop {backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
  body dialog:not(.party-window):not(#directory):not(.auth-dialog):not(.phone-screen):not(.room-image-viewer) {max-height:calc(var(--phone-height,100dvh) - var(--phone-safe-top) - var(--phone-safe-bottom) - 32px)!important;}
  body :is(#party-preview,.party-preview).party-window {top:calc(var(--phone-top,0px) + var(--phone-safe-top) + 12px)!important;height:calc(var(--phone-height,100dvh) - var(--phone-safe-top) - var(--phone-safe-bottom) - 24px)!important;}
  body :is(#party-preview,.party-preview).party-window.room-fullscreen {top:calc(var(--phone-top,0px) + var(--phone-safe-top) + 8px)!important;height:calc(var(--phone-height,100dvh) - var(--phone-safe-top) - var(--phone-safe-bottom) - 16px)!important;}
  body #dm-board {max-height:calc(var(--phone-height,100dvh) - var(--phone-safe-top) - var(--phone-safe-bottom) - 24px)!important;}
  body #dm-board.dm-wide {height:calc(var(--phone-height,100dvh) - var(--phone-safe-top) - var(--phone-safe-bottom) - 24px)!important;}
  body #directory {top:calc(var(--phone-top,0px) + var(--phone-safe-top) + 8px);bottom:auto;height:calc(var(--phone-height,100dvh) - var(--phone-safe-top) - var(--phone-safe-bottom) - 16px);}
}
@media (max-width:700px),(hover:none) and (pointer:coarse) and (max-height:500px){
  body :is(#party-preview,.party-preview).party-room .room-details {top:116px;right:12px;padding-top:44px;max-height:calc(100% - 132px);z-index:3;}
  body :is(#party-preview,.party-preview).party-room .mobile-details-close {display:grid;place-items:center;position:absolute;top:2px;right:4px;width:40px;height:40px;font-size:calc(22px * var(--pg-ts,1));border:0;margin:0;padding:0;}
  body :is(#party-preview,.party-preview).party-room .room-head {z-index:4;}
  .token-head button {width:32px;height:36px;}
  .phone-keyboard :is(#party-preview,.party-preview).party-room .room-head {height:64px;grid-template-rows:48px;padding-top:8px;padding-bottom:8px;}
  .phone-keyboard :is(#party-preview,.party-preview).party-room .room-head :is(.room-token-total,[data-room-toggle],.mobile-room-more),.phone-keyboard .party-window :is(.room-people,.room-section-tabs) {display:none!important;}
  .phone-keyboard :is(#party-preview,.party-preview).party-room .room-layout {height:calc(100% - 64px)!important;}
  .phone-keyboard #dm-board .dm-contacts {display:none;}
}
@media (max-width:700px),(hover:none) and (pointer:coarse) and (max-height:500px){
  html {height:100%;overflow:hidden;overscroll-behavior:none;}
  body {position:fixed;inset:0;width:100%;height:100dvh;overflow:hidden;overscroll-behavior:none;}
  .shell .dashboard {overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y pinch-zoom;}
  .shell:not(.expanded) .dashboard {touch-action:none;}
  .shell .intro,.shell .intro #slides {-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
  .shell .intro.intro-dragging .slides {transition:none!important;will-change:transform;}
  .shell .intro .slider-nav {touch-action:none;}
  .shell {transition:grid-template-rows 220ms cubic-bezier(.2,.8,.2,1);}
}

@media (max-width:700px),(hover:none) and (pointer:coarse) and (max-height:500px){
  .shell.mobile-intro-dragging {transition:none!important;}
  body :is(#party-preview,.party-preview).party-room.room-panels-ready .room-work {transition-duration:180ms,0s;}
  body :is(#party-preview,.party-preview).party-room.room-panels-ready.room-work-hidden .room-work {transition-duration:180ms,0s;transition-delay:0s,180ms;}
  body .party-window .room-head {cursor:default;}
}
@media (max-width:700px) and (prefers-reduced-motion:reduce),(hover:none) and (pointer:coarse) and (max-height:500px) and (prefers-reduced-motion:reduce){
  .shell, .shell .intro .slides, body :is(#party-preview,.party-preview).party-room.room-panels-ready .room-work {transition:none!important;}
}

@media (max-width:700px),(hover:none) and (pointer:coarse) and (max-height:500px){
  body .resizable-popup>.popup-resize-handle {display:none!important;}
  body :is(.token-head,#dm-handle) {cursor:default;}
  body .token-window {left:50%!important;top:auto!important;bottom:calc(var(--phone-safe-bottom) + 12px)!important;transform:translateX(-50%);margin:0!important;}
}
/* 2026-10-09 Claude: the search row folds while scrolling down on phones (mobile-search-fold.js) */
@media (max-width:700px){
  .dashboard-fixed-header .search{transition:max-height .22s ease,opacity .18s ease,margin .22s ease,padding .22s ease;max-height:80px;overflow:hidden}
  .dashboard-fixed-header.search-folded .search{max-height:0!important;opacity:0;margin-top:0!important;margin-bottom:0!important;padding-top:0!important;padding-bottom:0!important;border-width:0!important;pointer-events:none}
}
@media (max-width:700px) and (prefers-reduced-motion:reduce){.dashboard-fixed-header .search{transition:none}}
@media (max-width:700px){#dashboard{overflow-anchor:none}}