/* Small-screen game room (2026-10-22).
 * Wide (>=1100px): unchanged three-column room that fits the window.
 * Small laptop (761-1099px): two columns under a slim case bar, still fitting the window.
 * Phone (<=760px): one panel at a time (Village / Abilities / Chat) behind the bottom tabs.
 * Role details, records and the graveyard open from the "Case file" button on both. */

.case-file-toggle,.case-file-close{display:none}

/* ---------- Case bar (every width up to 1099px) ---------- */
@media(max-width:1099px){
  body.in-room>.site-header{display:flex;align-items:center;flex-wrap:nowrap}
  body.in-room>.site-header nav{margin-left:auto}
  .in-room .header-settings{display:flex;margin-left:12px;flex-wrap:nowrap;flex:none;width:auto}
  .in-room .case-sidebar{display:flex;flex-direction:row;align-items:stretch;gap:8px;max-height:none;overflow:visible;padding:0}
  .in-room .case-sidebar>*{display:none}
  .in-room .case-sidebar:not(.is-open)>#role-panel{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-areas:"p n" "p c" "p i";column-gap:10px;row-gap:1px;align-content:center;align-items:center;text-align:left;padding:6px 10px;min-height:0;cursor:pointer;overflow:hidden}
  .in-room .case-sidebar:not(.is-open)>#notebook-buttons{display:flex}
  .in-room .case-sidebar>.case-file-toggle{display:inline-flex}
  .in-room .case-sidebar:not(.is-open)>#role-panel::before,.in-room .case-sidebar:not(.is-open)>#role-panel::after{display:none}
  .in-room .case-sidebar:not(.is-open)>#role-panel>*{display:none;text-align:left}
  .in-room .case-sidebar:not(.is-open)>#role-panel>.my-portrait{display:block;grid-area:p;position:relative;top:auto;left:auto;width:44px;height:44px;margin:0;box-shadow:none;outline:0}
  .in-room .case-sidebar:not(.is-open)>#role-panel>h2{display:block;grid-area:n;margin:0;font-size:20px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .in-room .case-sidebar:not(.is-open)>#role-panel>.role-faction{display:inline-block;grid-area:c;justify-self:start;margin:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .in-room .case-sidebar:not(.is-open)>#role-panel>.my-identity{display:block;grid-area:i;margin:0;padding:0;border:0;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .in-room .case-sidebar:not(.is-open)>#notebook-buttons{flex:none;flex-direction:row;gap:8px;align-items:stretch}
  .in-room .case-sidebar:not(.is-open) .notebook-button{width:auto;min-width:44px;min-height:44px;padding:6px 12px;gap:8px;justify-content:center;align-items:center;text-align:left}
  .in-room .case-sidebar:not(.is-open) .notebook-button small,
  .in-room .case-sidebar:not(.is-open) .notebook-button>span:last-child{display:none}

  .in-room .case-file-toggle{flex:none;align-items:center;justify-content:center;gap:7px;min-width:44px;min-height:44px;padding:6px 14px;border:1px solid #b4ad92;border-radius:6px;background:#f5f2e6;color:#344238;font:600 11px var(--sans);cursor:pointer}
  .in-room .case-file-toggle .dot{display:none;width:8px;height:8px;border-radius:50%;background:#b94a3d}
  .in-room .case-file-toggle.has-news .dot{display:inline-block}

  /* ---------- Case file drawer ---------- */
  .in-room .case-sidebar.is-open{position:fixed;z-index:90;top:0;right:0;bottom:0;width:min(480px,100vw);display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:14px 14px calc(18px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;background:var(--paper,#f4f0e3);box-shadow:0 0 0 100vmax #0a121a8c,-10px 0 40px #0008}
  .in-room .case-sidebar.is-open>*{display:block}
  .in-room .case-sidebar.is-open>#notebook-buttons{display:grid;grid-template-columns:1fr;gap:8px}
  .in-room .case-sidebar.is-open>.case-file-toggle{display:none}
  .in-room .case-sidebar.is-open>.profile-launch[hidden]{display:none}
  .in-room .case-sidebar.is-open>.case-file-close{display:inline-flex;align-self:flex-end;align-items:center;gap:6px;min-height:44px;padding:6px 14px;border:1px solid #b4ad92;border-radius:6px;background:#fff9;color:#344238;font:600 12px var(--sans);cursor:pointer}
  .in-room .case-sidebar.is-open>.room-records[open]{display:block}
}

/* ---------- Small laptop: fits the window (761-1099px) ---------- */
@media(min-width:761px) and (max-width:1099px){
  .in-room .site-header .brand-word{display:none}
}
@media(min-width:761px) and (max-width:1099px) and (min-height:561px){
  .in-room .game-grid{grid-template-columns:minmax(0,1fr) clamp(270px,36vw,340px);grid-template-rows:auto minmax(0,1fr);grid-template-areas:'case case' 'village interaction';align-items:stretch}
  .in-room .case-sidebar{grid-area:case}
  .in-room .village-column{grid-area:village}
  .in-room .interaction-sidebar{grid-area:interaction;height:100%}
  .in-room .village-column>.village-stage{margin-top:0;max-height:none}
  .in-room .village-column>.voting-rule{order:1}
  .in-room .interaction-sidebar>.chat-panel{height:auto;min-height:150px}
  .in-room .interaction-sidebar>.action-panel{max-height:none}
  .in-room .interaction-sidebar>.action-panel:has(form){flex-basis:auto;min-height:0;max-height:55%;overflow-y:auto}
  .in-room .interaction-sidebar>.action-panel.ch-night-actions:has(form){flex-basis:auto;min-height:0;max-height:62%}
  .in-room .case-sidebar:not(.is-open) .notebook-button>span:nth-child(2){font-size:10px}
}

/* ---------- Phone: one panel at a time (<=760px) ---------- */
@media(max-width:760px) and (min-height:561px){
  body.in-room{height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding-bottom:calc(68px + env(safe-area-inset-bottom))}
  body.in-room>.site-header{flex:none;height:48px;min-height:48px;padding:0 10px;gap:8px;flex-wrap:nowrap}
  .in-room .site-header .brand-word,.in-room .site-header nav,.in-room .site-header .header-tag{display:none}
  .in-room .case-sidebar:not(.is-open) .notebook-button>span:nth-child(2),.in-room .case-file-toggle>span:nth-child(2){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .in-room .case-sidebar:not(.is-open) .notebook-button{padding:6px 10px}
  .in-room .case-file-toggle{position:relative;padding:6px 10px;font-size:16px}
  .in-room .case-file-toggle .dot{position:absolute;top:6px;right:6px}
  .in-room .site-header .brand-mark{width:30px;height:30px;font-size:22px}
  .in-room .header-settings{flex:1 1 auto;min-width:0;margin:0 0 0 8px;gap:5px;flex-wrap:nowrap;justify-content:flex-end}
  .in-room .header-settings>button,.in-room .header-settings #motion-toggle{flex:0 1 auto;width:auto;min-width:0;min-height:36px;padding:4px 7px;font-size:10px;white-space:nowrap}
  body.in-room>#main{flex:1;display:flex;min-height:0;overflow:hidden}
  .in-room .room-screen{display:flex;flex:1;flex-direction:column;width:100%;min-width:0;min-height:0;margin:0;padding:6px 10px 8px;gap:6px}
  .in-room .room-toolbar{flex:none;flex-wrap:nowrap;min-height:44px;margin:0;gap:8px;align-items:center}
  .in-room .room-toolbar>div:first-child{flex:1;min-width:0;gap:8px}
  .in-room .room-toolbar>div:first-child>div{min-width:0}
  .in-room .room-toolbar .eyebrow{display:none}
  .in-room .room-toolbar h1{font-size:18px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .in-room .room-toolbar .icon-button{width:40px;min-height:40px;flex:none}
  .in-room .room-toolbar-actions{flex:none;flex-wrap:nowrap;gap:6px;align-items:center}
  .in-room .room-leadership,.in-room .spectator-count{display:none}
  .in-room .room-code-button{min-height:40px;padding:4px 8px;font-size:10px}

  .in-room .game-grid{flex:1;min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:6px}
  .in-room #village-stage,.in-room #action-panel,.in-room .chat-panel,.in-room .phase-banner,.in-room .voting-rule{width:100%}
  .in-room .case-sidebar:not(.is-open){flex:none}
  .in-room .village-column,.in-room .interaction-sidebar{display:contents}
  .in-room .phase-banner{flex:none;min-height:0;padding:7px 12px}
  .in-room .phase-banner h2{font-size:20px}
  .in-room .phase-banner>div:first-child>span{font-size:22px}
  .in-room .phase-clock strong{font-size:22px}
  .in-room .voting-rule{flex:none;font-size:10px;padding:5px 10px;max-height:40px;overflow:auto}
  .in-room .village-column>.voting-rule{order:0}

  .in-room #village-stage,.in-room #action-panel,.in-room .chat-panel{display:none;flex:1 1 0;min-height:0;max-height:none;margin:0}
  body.in-room[data-mtab="village"] #village-stage,body.in-room:not([data-mtab]) #village-stage{display:block}
  body.in-room[data-mtab="actions"] #action-panel{display:flex;flex-direction:column;overflow-y:auto;padding:12px 14px}
  body.in-room[data-mtab="chat"] .chat-panel{display:flex;flex-direction:column;height:auto;overflow:hidden}
  body.in-room[data-mtab="chat"] .voting-rule,body.in-room[data-mtab="chat"] .nomination-selection{display:none}
  .in-room .interaction-sidebar .action-fields-scroll{max-height:none}
  .in-room .action-form>.button{min-height:46px}
  .in-room .chat-messages{min-height:0;flex:1}

  /* stage sizes itself from its own height, as on the wide layout */
  .in-room .village-stage{aspect-ratio:auto;container-type:size;overflow:hidden;position:relative}
  .in-room .seat{width:clamp(52px,10cqh,76px)}
  .in-room .seat-portrait{width:clamp(34px,10cqh,54px);height:clamp(34px,10cqh,54px);border-width:1px}
  .in-room .seat-label{font-size:clamp(8px,2.2cqh,10px);max-width:100%;margin-top:3px;padding:2px 4px}
  .in-room .seat-number{width:16px;height:16px;font-size:8px;left:-4px;bottom:-3px}
  .in-room .seat-badge{font-size:6px;right:-5px;top:-4px;padding:2px 3px}
  .in-room .village-centre{width:min(52%,260px);padding:10px 8px;max-height:60%;overflow:hidden}
  .in-room .village-centre h3{font-size:clamp(19px,5cqh,28px)}
  .in-room .village-centre>p{font-size:10px;line-height:1.4;margin-top:5px}
  .in-room .stage-plaque{font-size:6px;bottom:7px}

}

/* Bottom tabs: every phone width, including short landscape ones */
@media(max-width:760px){
  .in-room .mobile-game-nav button{flex:1;display:grid;place-items:center;position:relative;min-height:44px;max-width:180px;padding:8px;border:1px solid #c6b57b65;border-radius:5px;background:transparent;color:#f7edcc;font:600 12px/1.3 var(--sans);cursor:pointer}
  .in-room .mobile-game-nav button[aria-current="page"]{background:#c6b57b33;border-color:#e3d29a}
  .in-room .mobile-game-nav .tab-dot{display:none;position:absolute;top:6px;right:8px;width:9px;height:9px;border-radius:50%;background:#e2685a;box-shadow:0 0 0 2px #182b27}
  .in-room .mobile-game-nav .has-dot .tab-dot{display:block}
}

/* Toasts must never sit on top of the bottom tabs. */
@media(max-width:760px){
  body.in-room .toast-region{bottom:calc(80px + env(safe-area-inset-bottom))}
}