/* Responsive contract shared by the Salón and both games.
   Width AND available height decide the layout. Never scale the whole UI or
   hide document overflow to disguise content which no longer fits. */
html, body { min-width: 0; }
input, select, textarea { min-width: 0; max-width: 100%; }
button, a { overflow-wrap: anywhere; }
img { max-width: 100%; }
/* One return control: the rightmost action in the top header, on every table. */
.profile-page .salon-return, .game-shell .salon-return, .uranos-page .salon-return, .difficulty-screen .salon-return {
  display: inline-flex; align-items: center; justify-content: center; width: auto;
  min-height: 44px; max-width: 100%; padding: 10px 14px; border: 1px solid #b6a17c;
  border-radius: 6px; background: #204e43; color: #fff9eb; text-decoration: none;
  font: 700 14px/1.35 "DM Sans", sans-serif; letter-spacing: normal; cursor: pointer;
}
.profile-header .salon-return { margin-left: auto; flex: 0 1 auto; }
.game-shell .game-header { grid-template-columns: minmax(0, 1fr) auto auto auto; }
.game-header > .salon-return { justify-self: end; }
.uranos-page .masthead { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr) auto; }
.masthead > .salon-return { justify-self: end; align-self: start; }
.difficulty-navigation { width: 100%; display: flex; justify-content: flex-end; margin-bottom: 12px; }
:where(main, section, article, aside, form, header, footer) { min-width: 0; }
:where(h1, h2, h3, p) { overflow-wrap: anywhere; }

/* Modal scrolling belongs to the modal, not to the obscured page. */
html:has(dialog[open]), html:has(.game-hand-overlay),
html:has(.tutorial-overlay), html:has(.result-overlay),
html:has(.language-gate:not([hidden])) { overflow: hidden; }
body:has(dialog[open]), body:has(.game-hand-overlay),
body:has(.tutorial-overlay), body:has(.result-overlay) { overflow: hidden; }
dialog { box-sizing: border-box; max-width: calc(100% - 24px); max-height: calc(100dvh - 24px); overflow: auto; overscroll-behavior: contain; }
.guest-dialog { margin: auto; max-height: calc(100dvh - 24px); }
.guest-dialog .dialog-head > div, .pass-preview > div { min-width: 0; }
.guest-dialog .dialog-head > button { flex: none; }
.guest-dialog .pass-preview strong { overflow-wrap: anywhere; }
.guest-dialog .dialog-actions { flex-wrap: wrap; }
.language-gate { overflow-y: auto; align-items: safe center; }
.language-gate section { min-width: 0; }

/* Real header flow prevents overlap when labels wrap or browser zoom grows. */
.home-page, .catalogue-page { display: flex; flex-direction: column; }
.home-page .topbar, .catalogue-page .topbar { position: sticky; flex: none; }
.home-page main, .catalogue-page main { padding-top: 0; min-height: 0; flex: 1; }
.home-page footer, .catalogue-page footer { flex: none; }
.home-page .hero { min-height: 0; height: 100%; padding-block: clamp(12px, 2dvh, 24px); }
.home-page main { display: grid; align-items: center; }
.home-page .hero, .home-page .hero.with-room-chat { grid-template-columns: minmax(0, 1fr); }
.home-page .hero-copy h1 { font-size: clamp(44px, 8vw, 112px); line-height: .9; }
.home-page .with-room-chat .hero-copy h1 { font-size: clamp(40px, 5vw, 88px); overflow-wrap: normal; }
.home-page .with-room-chat .hero-copy h1 em { display: block; }
.home-page .hero-copy, .home-page .room-station, .home-page .room-chat { grid-column: auto; }
.home-page .local-player-form > div { grid-template-columns: minmax(0, 1fr) auto; }
.home-page .room-occupant b { overflow-wrap: anywhere; }
.catalogue-page .catalogue-stage { min-height: 0; padding-block: 18px; }
.catalogue-page .games { min-height: 0; display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: max(min(88%, 300px), calc((100% - 28px) / 3)); padding: 0 0 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
.catalogue-page .games { grid-template-rows: minmax(0, 1fr); }
.catalogue-page .game-card { min-height: 0; scroll-snap-align: start; }
.catalogue-page .games:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }
.catalogue-page .game-card { grid-template-rows: minmax(100px, 1fr) auto; }
.catalogue-page .card-art { height: auto; aspect-ratio: 16/9; }
.catalogue-page .catalogue-chat { min-width: 0; height: clamp(300px, calc(100dvh - 180px), 680px); }
.catalogue-page .catalogue-chat-messages { overflow-y: auto; }
.catalogue-page .card-meta { flex-wrap: wrap; }
@media (min-width: 780px) {
  .home-page .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .home-page .hero.with-room-chat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .home-page .with-room-chat .hero-copy { grid-column: 1/-1; }
}
@media (min-width: 1050px) {
  .home-page .hero.with-room-chat { grid-template-columns: minmax(0, .85fr) minmax(0, 1.1fr) minmax(0, 1.05fr); }
  .home-page .with-room-chat .hero-copy { grid-column: auto; }
  .home-page .room-chat { height: clamp(340px, calc(100dvh - 145px), 650px); }
}
@media (min-width: 780px) and (max-height: 760px) {
  .home-page .hero { gap: 22px; }
  .home-page .with-room-chat .hero-copy h1 { font-size: clamp(40px, 5vw, 64px); }
  .home-page .hero-copy .kicker { margin-bottom: 14px; }
  .home-page .intro { margin-top: 18px; font-size: 20px; }
  .home-page .room-station { padding: 10px; }
  .home-page .room-station-head { padding-bottom: 8px; }
  .home-page .room-station-head h2 { font-size: 28px; }
  .home-page .room-station .dialog-copy { font-size: 12px; }
  .home-page .room-station input, .home-page .room-station button { min-height: 42px; }
  .home-page .room-choice p, .home-page .room-existing p { font-size: 11px; }
  .home-page .room-chat header { padding: 14px; }
  .home-page .room-chat h2 { font-size: 28px; }
  .home-page .room-chat header > p:last-child { font-size: 12px; }
  .home-page .room-existing { margin-top: 6px; padding: 6px; }
  .home-page .room-existing .room-code-heading { margin-bottom: 6px; gap: 8px; }
  .home-page .room-existing .room-code-heading strong { font-size: 26px; }
  .home-page .room-existing .room-code-heading span { font-size: 16px; }
  .home-page .room-occupants { max-height: 90px; margin-block: 4px; gap: 3px; }
  .home-page .room-occupant { padding: 3px 5px; }
  .home-page .local-player-form { margin-block: 4px; padding-top: 4px; }
  .home-page .room-station .dialog-actions { margin-top: 8px; }
  .catalogue-page .catalogue-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 30%); grid-template-rows: auto minmax(0, 1fr); height: calc(100dvh - 130px); min-height: 440px; padding-block: 12px; gap: 12px; }
  .catalogue-page .section-head { grid-column: 1/-1; margin: 0; }
  .catalogue-page .games { grid-template-columns: none; }
  .catalogue-page .catalogue-chat { height: 100%; max-width: none; }
  .catalogue-page .game-card { grid-template-rows: minmax(80px, 1fr) auto; }
  .catalogue-page .card-art { aspect-ratio: auto; }
  .catalogue-page .card-copy { padding: 12px; }
  .catalogue-page .card-copy h2 { font-size: 26px; }
  .catalogue-page .card-copy > p { font-size: 12px; line-height: 1.4; }
  .catalogue-page .card-copy li { padding: 4px; font-size: 9px; }
  .catalogue-page .catalogue-chat-head { padding: 14px; }
}
@media (max-width: 779px) {
  .home-page .hero { gap: 22px; }
  .home-page .room-chat { height: 380px; }
  .home-page .room-actions { flex-direction: column; }
  .home-page .hero-copy .kicker { margin-bottom: 14px; }
  .home-page .intro { margin-top: 18px; }
}
@media (max-width: 380px) {
  .topbar { gap: 6px; padding-inline: 10px; }
  .top-actions { gap: 6px; }
  .topbar .brand { min-width: 0; flex-shrink: 1; }
  .topbar .brand-full { display: none; }
  .topbar .brand-compact { display: inline; }
  .guest-dialog form { padding: 20px 16px; }
  .language-gate section { padding: 20px 14px; }
  .guest-login-row { justify-content: flex-start; }
}

/* Profile forms and small windows remain readable without minimum-width traps. */
.profile-page .profile-header > *, .profile-page .profile-card { min-width: 0; }
.profile-page .profile-layout { grid-template-columns: minmax(0, 1fr); }
.profile-page .profile-card { padding: clamp(16px, 2.5vw, 28px); }
.profile-page .profile-delete-dialog { overflow-y: auto; padding: clamp(16px, 3vw, 28px); }
@media (min-width: 780px) {
  .profile-page .profile-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 380px) {
  .profile-page { padding: 14px; }
  .profile-page .profile-pass { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 14px; box-shadow: 4px 4px 0 #d7c5a3; }
  .profile-page .profile-pass > span { font-size: 40px; }
  .profile-page .profile-pass strong { font-size: 22px; }
  .profile-page .profile-delete-dialog .email-password-field { flex-wrap: wrap; }
  .profile-page .profile-delete-dialog .email-password-field input { flex-basis: 100%; width: 100%; }
  .profile-page .email-password-toggle { min-height: 44px; }
}

/* Keep modal locks above the compact board's normal document-flow rules. */
html:has(.game-shell):has(.game-hand-overlay),
html:has(.game-shell):has(.tutorial-overlay),
html:has(.game-shell):has(.result-overlay),
body:has(.game-shell):has(.game-hand-overlay),
body:has(.game-shell):has(.tutorial-overlay),
body:has(.game-shell):has(.result-overlay) { overflow: hidden; }

/* Game overlays: one bounded scrolling surface; fixed controls never extend
   outside the viewport, including landscape phones and on-screen keyboards. */
.game-transition-screen, .uranos-page .game-transition { overflow-y: auto; align-content: safe center; height: 100dvh; padding: clamp(16px, 3vw, 36px); }
.game-transition-screen .transition-rights, .uranos-page .game-transition .transition-rights { position: static; inset: auto; margin-top: 12px; }
.game-transition-screen h1, .uranos-page .game-transition h2 { font-size: clamp(36px, min(8vw, 13dvh), 120px); }
.game-transition-screen p, .uranos-page .game-transition p { font-size: clamp(16px, 1.8vw, 26px); }
.game-transition-screen strong, .uranos-page .game-transition strong { max-width: 100%; }
/* Difficulty selection is a bounded workspace, not a viewport-sized poster. */
.difficulty-screen:has(.difficulty-picker) {
  display: grid;
  grid-template-rows: auto auto auto minmax(340px, 1fr) auto;
  justify-items: center;
  align-items: start;
  min-width: 0;
  height: 100dvh;
  min-height: 100dvh;
  padding: 76px 24px 18px;
  gap: 14px;
}
.difficulty-screen > .difficulty-navigation {
  position: absolute;
  top: 20px;
  right: max(24px, calc((100vw - 1240px) / 2));
  width: auto;
  margin: 0;
  display: flex;
  justify-content: flex-end;
}
.difficulty-screen:has(.difficulty-picker) > span { font-size: 12px; }
.difficulty-screen:has(.difficulty-picker) > h1 {
  max-width: 900px;
  font-size: clamp(30px, 3.2vw, 48px);
  line-height: 1.1;
  text-wrap: balance;
}
.difficulty-screen:has(.difficulty-picker) > p {
  max-width: 860px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}
.difficulty-screen .difficulty-stage {
  width: min(1240px, 100%);
  min-width: 0;
  min-height: 340px;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
  align-items: stretch;
}
.difficulty-screen .difficulty-picker { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; min-height: 0; gap: 14px; }
.difficulty-screen .difficulty-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.difficulty-screen .difficulty-stage .difficulty-options button {
  min-width: 0;
  min-height: 160px;
  padding: 18px;
}
.difficulty-screen .difficulty-options small { font-size: 11px; }
.difficulty-screen .difficulty-options b { margin: 8px 0; font-size: 28px; }
.difficulty-screen .difficulty-options strong { font-size: 13px; }
.difficulty-screen .difficulty-options em { padding-top: 12px; font-size: 13px; line-height: 1.45; }
.difficulty-screen .difficulty-chat {
  grid-column: auto;
  grid-row: auto;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 18px;
}
.difficulty-screen .difficulty-chat h3 { flex: 0 0 auto; font-size: 14px; }
.difficulty-screen .difficulty-chat .chat-scroll { flex: 1 1 0; height: 0; min-height: 0; overflow-y: auto; }
.difficulty-screen .difficulty-chat .chat-scroll p,
.difficulty-screen .difficulty-chat .chat-scroll em,
.difficulty-screen .difficulty-chat input { font-size: 16px; }
.difficulty-screen .difficulty-chat .chat-scroll p,
.difficulty-screen .difficulty-chat .chat-scroll em { line-height: 1.5; }
.difficulty-screen .difficulty-chat .chat-scroll p b { font-size: 14px; }
.difficulty-screen .difficulty-chat form { flex: 0 0 auto; }
.difficulty-screen .difficulty-actions button { min-width: 0; min-height: 48px; padding: 10px; font-size: 11px; }
.difficulty-screen .entry-rights { position: static; inset: auto; margin: 0; }
@media (min-width: 1050px) and (max-height: 700px) {
  .difficulty-screen:has(.difficulty-picker) { padding: 76px 20px 20px; gap: 12px; }
  .difficulty-screen:has(.difficulty-picker) > h1 { font-size: 36px; }
  .difficulty-screen .difficulty-stage .difficulty-options button { min-height: 134px; padding: 12px; }
  .difficulty-screen .difficulty-options b { font-size: 25px; }
  .difficulty-screen .difficulty-options em { padding-top: 8px; font-size: 12px; }
}
@media (max-width: 1049.98px) {
  .difficulty-screen:has(.difficulty-picker) { display: flex; height: auto; justify-content: flex-start; padding: 88px 18px 24px; gap: 16px; }
  .difficulty-screen .difficulty-stage { max-width: 680px; grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
  .difficulty-screen .difficulty-chat { height: 280px; }
}
@media (max-width: 520px) {
  .difficulty-screen:has(.difficulty-picker) { padding-inline: 14px; }
  .difficulty-screen .difficulty-options,
  .difficulty-screen .difficulty-actions { grid-template-columns: minmax(0, 1fr); }
  .difficulty-screen .difficulty-stage .difficulty-options button { min-height: 142px; padding: 16px; }
  .difficulty-screen > .difficulty-navigation { right: 14px; }
}
/* Only the top return control is positioned; game actions stay in flow. */
.uranos-page #difficultyScreen { padding-top: 88px; }
.uranos-page #difficultyScreen .difficulty-footer-actions {
  position: static;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  gap: 12px;
}
.uranos-page #difficultyScreen .difficulty-footer-actions > button { min-width: 0; width: 100%; }
@media (max-width: 540px) {
  .uranos-page #difficultyScreen .difficulty-footer-actions { grid-template-columns: minmax(0, 1fr); }
}
.game-hand-overlay, .tutorial-overlay, .result-overlay { padding: 10px; }
.tutorial-modal, .result-overlay section { width: min(1120px, 100%); max-height: calc(100dvh - 20px); }
.result-overlay section button { min-width: 0; max-width: 100%; }
.tutorial-modal footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tutorial-modal footer > div { grid-column: 1/-1; flex-wrap: wrap; }
.tutorial-modal footer button { min-width: 0; }
.tutorial-content { padding: clamp(20px, 4vw, 48px); }
.crisis-briefing { max-height: calc(100dvh - 24px); overflow-y: auto; }
.crisis-briefing > button { min-width: 0; max-width: 100%; }
.resolution-next { min-width: 0; max-width: calc(100% - 24px); }
.resolution-sequence { overflow-y: auto; align-content: safe center; }
.resolution-edict, .resolution-counter { min-width: 0; }
@media (max-width: 600px) {
  .resolution-edict, .resolution-counter { display: flex; flex-direction: column; gap: 14px; }
  .resolution-cards > div, .resolution-final-cards, .facedown-plays { flex-wrap: wrap; }
  .tutorial-papers, .tutorial-card { grid-template-columns: minmax(0, 1fr); }
  .tutorial-race, .tutorial-play { flex-wrap: wrap; }
}

/* Chachipirulis: use the compact table only when it has enough height. */
.game-shell .game-header { grid-template-columns: minmax(0, 1fr) auto auto auto; }
.game-shell .header-actions { min-width: 0; flex-wrap: wrap; }
.game-shell .table-layout { grid-template-columns: minmax(0, 230px) minmax(0, 1fr) minmax(0, 280px); }
.game-shell .player-row { grid-template-columns: 24px minmax(0, 1fr) auto; }
.game-shell .player-row span { overflow-wrap: anywhere; }
@media (max-width: 1150px), (max-height: 560px) {
  html:has(.game-shell), body:has(.game-shell) { height: auto; overflow-y: auto; }
  .game-shell { height: auto; max-height: none; min-height: 100dvh; overflow: visible; }
  .game-shell .table-layout { min-height: 0; flex: auto; overflow: visible; grid-template-columns: minmax(0, 210px) minmax(0, 1fr); }
  .game-shell .chat-panel { grid-column: 1/-1; min-height: 240px; }
  .game-shell .game-legal { position: static; }
}
@media (max-width: 700px) {
  .game-shell .game-header { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .game-shell .game-header > .salon-return { grid-column: 2; grid-row: 1; }
  .game-shell .round-seal { grid-column: 1; grid-row: 2; }
  .game-shell .header-actions { grid-column: 2; grid-row: 2; justify-self: end; }
  .game-shell .table-layout { display: block; }
  .game-shell .card-table { min-height: 340px; }
}
@media (min-width: 980px) and (min-height: 560px) {
  html:has(.game-shell), body:has(.game-shell) { height: 100%; overflow: hidden; }
  .game-shell { height: 100dvh; min-height: 0; max-height: 100dvh; overflow: hidden; }
  .game-shell .game-header { flex-basis: 56px; min-height: 56px; padding: 8px 16px; }
  .game-shell .table-layout { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr) minmax(0, 250px); flex: 1 1 0; min-height: 0; overflow: hidden; }
  .game-shell .briefing { padding: 12px; min-height: 0; overflow-y: auto; }
  .game-shell .card-table { padding: 12px; min-height: 0; }
  .game-shell .chat-panel { grid-column: auto; min-height: 0; padding: 12px; }
  .game-shell .chat-scroll { min-height: 0; overflow-y: auto; }
  .game-shell .game-legal { position: static; }
  .game-shell .crisis-briefing { padding: 14px; max-height: 100%; }
  .game-shell .crisis-briefing > .edict-seal { width: 48px; height: 48px; }
  .game-shell .crisis-briefing > h2 { font-size: clamp(28px, 3vw, 42px); }
  .game-shell .crisis-briefing > p { font-size: 13px; }
  .game-shell .crisis-briefing > div { margin: 10px 0; padding: 10px; }
  .game-shell .crisis-briefing > div b { font-size: 20px; }
  .game-shell .crisis-briefing > button { min-height: 44px; }
}
.hand-modal.carousel-hand .hand-control { min-height: 0; }
@media (min-width: 961px) and (max-height: 700px) {
  .hand-modal.carousel-hand .hand-deck { grid-template-rows: auto minmax(410px, 1fr) auto; }
  .hand-modal.carousel-hand .hand-control { min-height: 0; }
}
@media (max-width: 1100px) {
  .hand-modal.carousel-hand .hand-workspace { grid-template-columns: minmax(0, 1fr); height: auto; }
  .hand-modal.carousel-hand .hand-deck { grid-template-rows: auto minmax(410px, auto) auto; }
  .hand-modal.carousel-hand .hand-control, .hand-modal.carousel-hand .hand-control:has(.counter-selection) { height: auto; min-height: 0; grid-template-rows: 240px auto auto; }
  .hand-modal.carousel-hand .hand-control:has(.counter-selection) { grid-template-rows: 240px auto auto auto; }
}
@media (max-width: 760px) {
  .hand-modal.carousel-hand { --hand-card-width: min(230px, calc(100vw - 48px)); }
  .hand-modal.carousel-hand .hand-row { grid-template-columns: minmax(0, 1fr); grid-template-rows: 430px auto; }
  .hand-modal.carousel-hand .hand-deck { grid-template-rows: auto auto auto; }
  .hand-modal.carousel-hand .hand-context-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 980px) and (min-height: 560px) {
  .hand-modal.carousel-hand { --hand-card-width: clamp(260px, calc((100dvh - 210px) * .625), 300px); }
  .hand-modal.carousel-hand .hand-workspace { grid-template-columns: minmax(0, 1fr) clamp(250px, 22vw, 350px); height: 100%; min-height: 0; }
  .hand-modal.carousel-hand .hand-deck { grid-template-rows: auto minmax(350px, 1fr) auto; min-height: 0; }
  .hand-modal.carousel-hand .hand-control { height: 100%; min-height: 0; grid-template-rows: minmax(150px, 1fr) auto auto; }
  .hand-modal.carousel-hand .hand-control:has(.counter-selection) { grid-template-rows: minmax(150px, 1fr) auto auto auto; }
  .hand-modal.carousel-hand .hand-context-grid { gap: 8px; }
  .hand-modal.carousel-hand .hand-context-grid article { padding: 8px; }
  .hand-modal.carousel-hand .hand-context-grid h2 { font-size: 18px; }
  .hand-modal.carousel-hand .hand-context-grid p { font-size: 12px; }
}

/* Hand cards keep a portrait silhouette instead of stretching to fill a tall
   workspace. Text rows stay intrinsic; only the artwork takes spare space. */
.hand-modal.carousel-hand .hand-row .hand-cards { align-items: flex-start; }
.hand-modal.carousel-hand .hand-row .hand-cards > .playing-card.illustrated-card {
  height: max(420px, calc(var(--hand-card-width) * 1.6)) !important;
  min-height: min-content;
  aspect-ratio: 5 / 8;
}
.hand-modal.carousel-hand .hand-row .hand-cards {
  min-height: calc(max(420px, var(--hand-card-width) * 1.6) + 24px);
}
/* The plan is a pair of compact card-shaped targets, not two more full-size
   hand cards. Empty and filled targets share their dimensions. */
.hand-modal.carousel-hand { --hand-slot-width: min(210px, calc(var(--hand-card-width) * .7)); }
.hand-modal.carousel-hand .hand-row {
  grid-template-columns: minmax(0, 1fr) calc(var(--hand-slot-width) * 2 + 12px);
}
.hand-modal.carousel-hand .hand-plan-column { align-self: start; grid-template-rows: auto auto auto; }
.hand-modal.carousel-hand .hand-plan-column .hand-plan-slots,
.hand-modal.carousel-hand .hand-plan-column .hand-plan-slots:has(.filled) {
  height: auto !important;
  min-height: 0;
  grid-template-rows: auto;
  align-items: start;
}
.hand-modal.carousel-hand .hand-row .plan-drop-slot,
.hand-modal.carousel-hand .hand-row .plan-drop-slot.filled {
  height: calc(var(--hand-slot-width) * 1.6);
  min-height: 0;
  aspect-ratio: 5 / 8;
  align-self: start;
}
.hand-modal.carousel-hand .hand-row .slot-card.illustrated-card {
  width: 100%;
  max-width: 100%;
  height: 100% !important;
  min-height: 0;
  grid-template-rows: 40px minmax(12px, 1fr) max-content max-content max-content max-content;
  gap: 4px;
  padding: 5px;
  border-width: 4px;
  aspect-ratio: 5 / 8;
}
.hand-modal.carousel-hand .hand-row .slot-card.illustrated-card h3 { font-size: 13px; padding: 4px; }
.hand-modal.carousel-hand .hand-row .slot-card.illustrated-card.title-long h3,
.hand-modal.carousel-hand .hand-row .slot-card.illustrated-card.title-very-long h3,
.hand-modal.carousel-hand .hand-row .slot-card.illustrated-card.title-word-long h3 { font-size: 12px; }
.hand-modal.carousel-hand .hand-row .slot-card.illustrated-card .card-top { grid-template-columns: 30px minmax(0, 1fr); }
.hand-modal.carousel-hand .hand-row .slot-card.illustrated-card .card-top b { font-size: 22px; }
.hand-modal.carousel-hand .hand-row .slot-card.illustrated-card .card-top,
.hand-modal.carousel-hand .hand-row .slot-card.illustrated-card .card-top span,
.hand-modal.carousel-hand .hand-row .slot-card.illustrated-card .card-top b { color: #fff8e8; }
.hand-modal.carousel-hand .hand-row .slot-card.illustrated-card .card-top .card-symbol { font-size: 23px !important; }
.hand-modal.carousel-hand .hand-row .slot-card.illustrated-card .card-family { padding: 4px; }
.hand-modal.carousel-hand .hand-row .slot-card.illustrated-card .card-family b { font-size: 10px; }
.hand-modal.carousel-hand .hand-row .slot-card.illustrated-card .ability-box { padding: 4px !important; }
.hand-modal.carousel-hand .hand-row .slot-card.illustrated-card .ability-box b { font-size: 10px; }
.hand-modal.carousel-hand .hand-row .slot-card.illustrated-card .ability-box p { font-size: 10px !important; line-height: 1.2 !important; }
.hand-modal.carousel-hand .hand-row .slot-card.illustrated-card .card-color { font-size: 13px !important; padding: 4px !important; }
.hand-modal.carousel-hand .hand-deck {
  grid-template-rows: auto minmax(calc(max(420px, var(--hand-card-width) * 1.6) + 24px), 1fr) auto;
}
@media (max-width: 1250px) {
  .hand-modal.carousel-hand .hand-workspace { grid-template-columns: minmax(0, 1fr); height: auto; }
  .hand-modal.carousel-hand .hand-control,
  .hand-modal.carousel-hand .hand-control:has(.counter-selection) { height: auto; min-height: 0; grid-template-rows: 240px auto auto; }
  .hand-modal.carousel-hand .hand-control:has(.counter-selection) { grid-template-rows: 240px auto auto auto; }
}
@media (max-width: 900px) {
  .hand-modal.carousel-hand .hand-row { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  .hand-modal.carousel-hand .hand-deck { grid-template-rows: auto auto auto; }
  .hand-modal.carousel-hand .hand-plan-column .hand-plan-slots { grid-template-columns: repeat(2, var(--hand-slot-width)); justify-content: center; }
}
@media (max-width: 979px), (max-height: 559px) {
  .hand-modal.carousel-hand { --hand-card-width: clamp(240px, calc(100vw - 64px), 260px); }
  .hand-modal.carousel-hand .hand-row { grid-template-rows: auto auto; }
}
@media (max-width: 600px) {
  .hand-modal.carousel-hand .hand-plan-column .hand-plan-slots,
  .hand-modal.carousel-hand .hand-plan-column .hand-plan-slots:has(.filled) {
    grid-template-columns: var(--hand-slot-width);
  }
}

/* Uranos: remove the historical 901px desktop trap and allow safe flow when
   the complete board cannot fit, rather than clipping the lower tools. */
.uranos-page .header-console { min-width: 0; }
.uranos-page .status-strip { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
.uranos-page .status-strip > div { min-width: 0; overflow-wrap: anywhere; }
.uranos-page .hand-dialog { overflow: auto; max-height: calc(100dvh - 20px); }
.uranos-page .hand-dialog .hand-zone { min-height: 100%; height: auto; }
.uranos-page .hand-dialog .hand-workspace { height: auto; min-height: 100%; }
.uranos-page .hand-dialog .hand-play-space { grid-template-rows: auto auto minmax(270px, 1fr) minmax(140px, auto); }
.uranos-page .hand-dialog .hand-command-row { height: auto; }
.uranos-page .hand-dialog .hand-table-chat { height: clamp(300px, calc(100dvh - 70px), 720px); }
@media (max-width: 1100px), (max-height: 600px) {
  html:has(.uranos-page), body.uranos-page { height: auto; min-height: 100dvh; overflow-y: auto; }
  body.uranos-page { display: block; }
  .uranos-page .masthead { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding-block: 14px; gap: 14px; }
  .uranos-page .masthead > .salon-return { grid-column: 2; grid-row: 1; }
  .uranos-page .header-console { grid-column: 1/-1; }
  .uranos-page main { display: grid; grid-template-rows: auto auto auto; padding-block: 14px; gap: 14px; }
  .uranos-page .arena-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .uranos-page .arena-layout > .player-panel { grid-column: auto; grid-row: 2; }
  .uranos-page .arena-layout > .board-shell { grid-column: 1/-1; grid-row: 1; min-height: 240px; }
  .uranos-page .play-area, .uranos-page .play-area.no-companion { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uranos-page .play-area .companion-chat, .uranos-page .play-area .chronicle { height: 300px; }
  .uranos-page .table-tools { width: 100%; margin-bottom: 0; }
  .uranos-page .game-legal { position: static; margin-bottom: 14px; }
}
@media (max-width: 760px) {
  .uranos-page .header-console { grid-template-columns: minmax(0, 1fr); }
  .uranos-page .header-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uranos-page .header-actions a, .uranos-page .header-actions button { white-space: normal; }
  .uranos-page .board { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 4px; overflow: visible; }
  .uranos-page .board-topline { flex-wrap: wrap; }
  .uranos-page .board-topline > *, .uranos-page .environment { min-width: 0; max-width: 100%; }
  .uranos-page .arena-layout, .uranos-page .play-area, .uranos-page .play-area.no-companion { grid-template-columns: minmax(0, 1fr); }
  .uranos-page .arena-layout > .player-panel { grid-row: auto; }
  .uranos-page .table-tools { grid-template-columns: minmax(0, 1fr); }
  .uranos-page .hand-dialog .hand-command-row, .uranos-page .hand-dialog .turn-actions { grid-template-columns: minmax(0, 1fr); }
  .uranos-page .hand-dialog .hand-action { height: auto; min-height: 80px; }
  .uranos-page .hand-dialog .hand-status-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uranos-page .hand-dialog .hand-board-summary { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 980px) and (min-height: 600px) {
  html:has(.uranos-page), body.uranos-page { height: 100%; min-height: 0; overflow: hidden; }
  body.uranos-page { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
  .uranos-page .masthead { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr) auto; min-height: 72px; padding: 8px 0; gap: 12px; }
  .uranos-page .masthead h1 { font-size: clamp(30px, 3vw, 60px); }
  .uranos-page .masthead .subtitle { display: none; }
  .uranos-page .header-console { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .uranos-page .header-console .status-strip > div { padding: 6px; min-height: 44px; }
  .uranos-page .header-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .uranos-page .header-actions .salon-link { grid-row: auto; min-height: 32px; padding: 6px 8px; font-size: 12px; }
  .uranos-page .header-actions button { min-height: 28px; padding: 4px 8px; font-size: 11px; }
  .uranos-page main { min-height: 0; display: grid; grid-template-rows: minmax(210px, .8fr) minmax(160px, 1.2fr) auto; gap: 10px; padding: 10px 0; overflow-y: auto; }
  .uranos-page .arena-layout { display: grid; grid-template-columns: clamp(160px, 16vw, 300px) minmax(0, 1fr) clamp(160px, 16vw, 300px); gap: 10px; }
  .uranos-page .arena-layout > .player-b { grid-column: 1; grid-row: 1; }
  .uranos-page .arena-layout > .board-shell { grid-column: 2; grid-row: 1; min-height: 0; padding: 12px; }
  .uranos-page .arena-layout > .player-a { grid-column: 3; grid-row: 1; }
  .uranos-page .arena-layout > .player-panel { margin: 0; padding: 10px; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
  .uranos-page .arena-layout .player-heading > div { flex-wrap: wrap; gap: 6px; }
  .uranos-page .arena-layout .player-heading h2 { font-size: clamp(16px, 1.1vw, 23px); }
  .uranos-page .arena-layout .board { margin-top: 14px; }
  .uranos-page .arena-layout .board-topline { margin: 0; flex-wrap: wrap; }
  .uranos-page .arena-layout .goal { height: clamp(64px, 10dvh, 100px); }
  .uranos-page .arena-layout .track .cell { height: clamp(52px, 8dvh, 84px); }
  .uranos-page .play-area, .uranos-page .play-area.no-companion { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; }
  .uranos-page .play-area .companion-chat, .uranos-page .play-area .chronicle { height: auto; min-height: 0; padding: 12px; }
  .uranos-page .play-area .companion-messages, .uranos-page .play-area #gameLog { min-height: 0; flex: 1; overflow-y: auto; }
  .uranos-page .table-tools { min-height: 44px; width: min(720px, 100%); margin: 0; }
  .uranos-page .table-tools button { min-height: 44px; }
  .uranos-page .game-legal { position: static; padding: 6px 0; margin: 0 auto; }
}
/* Chat spans the lower workspace; the acta and tools share the right column. */
.uranos-page .play-area,
.uranos-page .play-area.no-companion {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-rows: minmax(220px, 1fr) auto;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  align-items: stretch;
}
.uranos-page .play-area > .companion-chat { grid-column: 1; grid-row: 1 / 3; min-height: 320px; height: auto; }
.uranos-page .play-area > .chronicle { grid-column: 2; grid-row: 1; min-width: 0; height: auto; min-height: 220px; }
.uranos-page .play-area > .table-tools { grid-column: 2; grid-row: 2; width: 100%; min-width: 0; margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.uranos-page .play-area > .table-tools .open-hand { grid-column: 1 / -1; }
.uranos-page .play-area > .table-tools button { min-width: 0; white-space: normal; padding: 10px; }
.uranos-page .play-area .companion-messages,
.uranos-page .play-area #gameLog { min-height: 0; overflow-y: auto; overflow-wrap: anywhere; }
@media (min-width: 980px) and (min-height: 600px) {
  .uranos-page main { grid-template-rows: minmax(210px, .7fr) minmax(260px, 1.3fr); }
  .uranos-page .play-area { grid-template-rows: minmax(140px, 1fr) auto; }
  .uranos-page .play-area > .companion-chat { min-height: 0; }
  .uranos-page .play-area > .chronicle { min-height: 0; }
}
@media (max-width: 760px) {
  .uranos-page .play-area,
  .uranos-page .play-area.no-companion { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .uranos-page .play-area > .companion-chat { grid-column: 1; grid-row: 1; height: 360px; }
  .uranos-page .play-area > .chronicle { grid-column: 1; grid-row: 2; height: 280px; }
  .uranos-page .play-area > .table-tools { grid-column: 1; grid-row: 3; }
}
html:has(.uranos-page.transition-open), body.uranos-page.transition-open { overflow: hidden; }
html:has(.uranos-page):has(dialog[open]), body.uranos-page:has(dialog[open]) { overflow: hidden; }
@media (min-width: 900px) {
  .uranos-page .hand-dialog .hand-zone { height: 100%; min-height: 0; padding: 12px; }
  .uranos-page .hand-dialog .hand-workspace { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 22vw, 380px); height: 100%; min-height: 0; gap: 12px; }
  .uranos-page .hand-dialog .hand-play-space { display: grid; grid-template-rows: auto auto minmax(270px, 1fr) auto; min-height: 0; gap: 8px; }
  .uranos-page .hand-dialog .section-heading { min-height: 0; }
  .uranos-page .hand-dialog .section-heading h2 { font-size: clamp(20px, 1.7vw, 32px); }
  .uranos-page .hand-dialog .section-heading p { font-size: 12px; }
  .uranos-page .hand-dialog .hand-state-dashboard { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .uranos-page .hand-dialog .hand { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; height: 100%; min-height: 270px; padding-bottom: 8px; touch-action: pan-x pan-y; }
  .uranos-page .hand-dialog .hand .card { flex: 0 0 clamp(180px, 15vw, 230px); width: clamp(180px, 15vw, 230px); height: 100%; min-height: 270px !important; max-width: none; }
  .uranos-page .hand-dialog .hand-command-row { display: grid; grid-template-columns: minmax(150px, .3fr) minmax(0, 1fr); min-height: 100px; }
  .uranos-page .hand-dialog .turn-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 100px; height: auto; }
  .uranos-page .hand-dialog .minor-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
  .uranos-page .hand-dialog .hand-action { min-height: 46px; padding: 8px; }
  .uranos-page .hand-dialog .hand-action > small { font-size: 10px; }
  .uranos-page .hand-dialog .uranos-play-slot { min-height: 100px; padding: 26px 10px 10px; }
  .uranos-page .hand-dialog .hand-table-chat { height: 100%; min-height: 300px; }
}