/* Millbury Mansion's table: the floor plan, the seats, the notebook and the
   Your move card, on the room's structure (games/room/room.css), from the
   tokens in millbury-mansion.css.

   Steadiness first: the plan is as big as the window allows and never
   changes size; the Your move card never changes size; what comes and goes
   (a card shown to you, the notebook's strip, the lit squares) is drawn
   over what's there. The notebook scrolls inside itself, never the page. */

/* ── the frame ───────────────────────────────────────────────────────── */
.felt.mmansion { position: relative; height: calc(100dvh - 2 * var(--frame)); min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.felt.mmansion.docked { grid-template-columns: minmax(0, 1fr) 320px; }
.mmansion .logdock { min-height: 0; display: flex; flex-direction: column; }
.mmansion .logdock:empty { display: none; }
.mmansion .logdock .gamelog { flex: 1; }
.mmansion .tablemain { display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; }
.mmansion .gamelog.drawer { position: absolute; z-index: 30; right: 14px; top: 64px; bottom: 230px; width: min(360px, calc(100% - 28px)); box-shadow: -10px 10px 30px rgba(0, 0, 0, .45); }
.mmansion .logbtn.on { background: var(--pick-tint); box-shadow: var(--pick-ring); }
.mmansion .bar .tools .stop.unseen { visibility: hidden; }
.mmansion .gamelog .who svg { vertical-align: -1px; margin-right: 3px; }
.mmansion .bar .title .phase { color: var(--soft); }
.mmansion .mmdots { display: inline-flex; gap: 4px; }
.mmansion .mmdots i { width: 4.4px; height: 4.4px; border-radius: 50%; background: currentColor; }

/* The stage: the plan beside the side column on a wide window, above it on
   a tall one. The plan's width is what its height allows (less the face-up
   row under it), leaving the side at least 360px. */
.mmansion .stagebox { flex: 1; min-height: 0; min-width: 0; container-type: size; }
.mmansion .stage {
  --up: 48px;
  --bw: min(calc(100cqh - var(--up)), calc(100cqw - 376px));
  height: 100%; display: grid; gap: 16px; grid-template-rows: minmax(0, 1fr);
  grid-template-columns: var(--bw) min(560px, calc(100cqw - var(--bw) - 16px)); justify-content: center;
}
.mmansion .boardcol { position: relative; min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.mmansion .boardwrap { position: relative; width: 100%; aspect-ratio: 1; flex: none; }
.mmansion .side { display: flex; flex-direction: column; gap: 12px; min-height: 0; min-width: 0; }
.mmansion .mmsidebody { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mmansion .mmsidebody > .nbook { flex: 1; }
.mmansion .panelhead { margin: 0; font: var(--display-weight) var(--t-heading)/1.15 var(--display); color: var(--ink); }
.mmansion .seatslot { position: absolute; left: 50%; bottom: 56px; translate: -50% 0; z-index: 5; }

/* the face-up cards, under the plan */
.mmfaceup { flex: none; height: 40px; display: flex; align-items: center; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.mmfaceup[hidden] { display: none; }
.mmkicker { flex: none; margin-right: 4px; font: 700 12px/1 var(--ui-font); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.mmupcard {
  flex: none; height: 36px; box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 6px;
  background: linear-gradient(180deg, #f4ebd3, #e6d9b8); color: var(--nb-ink); font: 700 14px/1 var(--ui-font); white-space: nowrap;
  box-shadow: inset 0 1px 0 #fffaf0, 0 1px 2px rgba(0, 0, 0, .4), 0 6px 12px rgba(0, 0, 0, .3);
}
.mmupcard .nbsw { margin-right: 0; width: 10px; height: 10px; }
.mmupnote { margin-left: auto; flex: none; font: 400 14px/1.3 var(--ui-font); color: var(--soft); white-space: nowrap; }

/* ── the seats: a chip each, round from your left, you last ───────────── */
.mmseats { flex: none; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 6px; }
.mmchip {
  position: relative; height: 44px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 0 8px; min-width: 0;
  border-radius: 10px; background: var(--chip); border: var(--chip-edge);
}
.mmchip.turn { border-color: transparent; box-shadow: 0 0 0 2px var(--turn); }
.mmchip.out { opacity: .72; }
.mmchipmark { position: relative; flex: none; width: 22px; height: 22px; display: grid; }
.mmchipdot { position: absolute; right: -3px; bottom: -3px; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--manor); }
.mmchiptext { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mmchipname { font: 700 15px/1.1 var(--ui-font); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mmchipname small { font-weight: 400; color: var(--soft); font-size: 13px; }
.mmchipas { font: 400 13px/1.1 var(--ui-font); color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mmchippill {
  position: absolute; right: 6px; top: -9px; padding: 2px 6px; border-radius: 999px; background: var(--manor); border: 1.5px solid rgba(241, 234, 219, .45);
  font: 700 12px/1 var(--ui-font); letter-spacing: .04em; color: var(--ink);
}

/* ── who you'll play, before the first turn ───────────────────────────── */
.mmcast { flex: 1; min-height: 0; overflow: auto; padding: 14px 16px 16px; border-radius: var(--panel-radius); background: var(--panel); border: var(--panel-edge); }
.mmcastlead { margin: 6px 0 12px; font: 400 15px/1.35 var(--ui-font); color: var(--soft); }
.mmcastgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mmcastopt {
  all: unset; box-sizing: border-box; min-height: 176px; padding: 10px 6px 8px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 1.5px solid rgba(241, 234, 219, .14); color: var(--ink); cursor: pointer; text-align: center;
}
.mmcastopt.on { background: rgba(241, 234, 219, .14); border-color: transparent; box-shadow: inset 0 0 0 2px var(--ink); }
.mmcastopt:disabled { cursor: default; }
.mmcastopt.taken { opacity: .55; }
.mmcastopt:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) { .mmcastopt:not(:disabled):hover { background: rgba(241, 234, 219, .07); } }
.mmcastname { font: 700 15px/1.15 var(--ui-font); }
.mmcastrole { font: italic 400 14px/1.1 var(--display); color: var(--soft); }
.mmcasttaken { margin-top: 2px; padding: 3px 8px; border-radius: 999px; font: 800 13px/1 var(--ui-font); color: var(--turn-ink); background: var(--turn); }
.mmcasttaken.free { background: none; color: var(--soft); font-weight: 400; }
.mmcastopt.taken .mmcasttaken { background: rgba(241, 234, 219, .18); color: var(--ink); }

/* the phone's glance at the ledger, under the plan */
.mmlatestslot { display: none; }
@media (max-width: 640px) {
  .felt.mmansion:not(.casting) .mmlatestslot { display: block; flex: 1 1 0; min-height: 0; overflow: hidden; }
  .mmlatest {
    max-height: 100%; box-sizing: border-box; overflow: hidden; padding: 8px 14px 4px; border-radius: 6px; color: var(--nb-ink);
    background: linear-gradient(90deg, #e6d9b8, #f3ead2 10%, #f3ead2); box-shadow: inset 0 1px 0 #fffaf0, 0 1px 2px rgba(0, 0, 0, .45), 0 10px 20px rgba(0, 0, 0, .35);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
  }
  .mmlatest.empty p { margin: 4px 0 8px; font: italic 400 15px/1.35 var(--display); color: var(--nb-ink-soft); }
  .mmlatesthead { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 700 12px/1 var(--ui-font); letter-spacing: .14em; text-transform: uppercase; color: #7a5a2a; }
  .mmlatestopen { all: unset; min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; font: 700 15px/1 var(--ui-font); letter-spacing: 0; text-transform: none; color: var(--nb-ink); text-decoration: underline; text-underline-offset: 4px; }
  .mmlatest .nbentry { border-bottom: 0; padding-top: 2px; }
}

/* ── a card shown to you: over the plan ───────────────────────────────── */
.mmshown { position: absolute; inset: 0; z-index: 6; cursor: pointer; }
.mmshown[hidden] { display: none; }
.mmshownscrim { position: absolute; inset: 0; border-radius: 12px; background: radial-gradient(ellipse at 50% 42%, rgba(10, 7, 16, .45), rgba(10, 7, 16, .82)); }
.mmshownpill {
  position: absolute; left: 50%; top: 6%; translate: -50% 0; display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; border-radius: 999px; white-space: nowrap;
  background: rgba(12, 9, 18, .85); border: 1.5px solid rgba(241, 234, 219, .2); font: 400 20px/1 var(--display); color: var(--ink);
}
.mmshown .mmcard { position: absolute; left: 50%; top: 16%; translate: -50% 0; scale: min(1, calc(var(--bwpx, 656) / 600)); transform-origin: top center; }
.mmshown .mmcard.lift { animation: mmlift 700ms cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes mmlift { from { opacity: 0; transform: translateY(120px) rotate(8deg) scale(.7); } }
.mmslip {
  position: absolute; left: 14%; right: 14%; bottom: 13%; box-sizing: border-box; padding: 12px 16px 14px; border-radius: 4px; rotate: 1deg;
  background: linear-gradient(90deg, #e6d9b8, #f3ead2 10%, #f3ead2); color: var(--nb-ink);
  box-shadow: inset 0 1px 0 #fffaf0, 0 1px 2px rgba(0, 0, 0, .45), 0 14px 26px rgba(0, 0, 0, .45);
}
.mmsliphead { display: flex; align-items: center; gap: 8px; font: 700 15px/1.2 var(--ui-font); }
.mmsliphead .nbtag { width: 22px; height: 22px; }
.mmslipkicker { margin-left: auto; font: 700 12px/1 var(--ui-font); letter-spacing: .14em; text-transform: uppercase; color: #7a5a2a; }
.mmslipbody { padding: 6px 0 0 30px; font: 400 15px/1.45 var(--ui-font); color: #3a2e20; }
.mmslipline { font-weight: 700; color: var(--nb-green); }
.mmslipline::after { content: ''; display: inline-block; width: 2px; height: 16px; margin-left: 2px; vertical-align: -3px; background: var(--nb-ink); animation: mmcaret 900ms steps(1) infinite; }
@keyframes mmcaret { 50% { opacity: 0; } }

/* ── the Your move card ──────────────────────────────────────────────── */
.mmansion .dock {
  flex: none; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; container-type: inline-size;
  border-radius: 12px; background: rgba(10, 7, 18, .45); border: 2px solid transparent; transition: border-color .2s, box-shadow .2s;
}
.mmansion .dock.yours { border-color: var(--turn); box-shadow: 0 0 0 4px rgba(233, 196, 106, .10), 0 0 26px rgba(233, 196, 106, .16); }
.mmansion .dock { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "say say" "dice actions"; align-items: center; }
.mmansion .say { grid-area: say; margin: 0; min-height: 2.75em; font-size: var(--t-body); line-height: 1.375; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mmansion .say b { color: var(--turn); }
.mmansion .mmdice { grid-area: dice; display: flex; }
.mmansion .actions { grid-area: actions; display: flex; gap: 8px; justify-content: flex-end; align-items: center; min-width: 0; min-height: var(--btn-h, 44px); }
.mmansion .act { min-width: 0; padding-inline: 14px; }
.mmansion .act.main { padding-inline: 16px; }
.mmansion .act .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mmansion .btn.slot.hide { display: none; }
/* (End turn, the quiet move: underlined words, no edge) */
.mmansion .act.quietslot { background: transparent; border-color: transparent; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; padding-inline: 8px; }
.felt.mmansion .bar .mmbookbtn { display: none; }
.felt.mmansion .bar .mmbookbtn.unseen { display: none !important; }
.mmbookicon { display: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
@container (max-width: 420px) {
  .mmansion .actions { gap: 6px; }
  .mmansion .actions .btn.slot { padding-inline: 10px; font-size: 15px; }
  .mmansion .act.quietslot { padding-inline: 4px; }
  .mmansion .dock { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "say dice" "actions actions"; column-gap: 8px; }
  .mmansion .mmdie { width: 26px; height: 26px; }
  .mmansion .actions .btn.slot.alt { padding-inline: 9px; }
  .mmansion .dock kbd { display: none; }
}

/* ── sheets: where to, suggest, accuse ───────────────────────────────── */
.mm-pick .mmpickbody { display: flex; flex-direction: column; gap: 16px; }
.mm-pick .mmpickbody > p { margin: 0; }
.mm-pick section h3 { margin: 0 0 8px; font: 700 12px/1 var(--ui-font); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.mm-pick .mmplaces { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.mm-pick .mmplace { height: auto; min-height: 52px; padding-block: 6px; display: grid; justify-items: start; justify-content: stretch; gap: 2px; text-align: left; }
.mm-pick .mmplace > span { width: 100%; text-align: left; }
.mm-pick .mmplace.ruled .mmplacename { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.mm-pick .mmplacesub { font-size: var(--t-note); font-weight: 400; color: var(--soft); }
.mm-pick .mmchoices { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.mm-pick .mmchoice {
  all: unset; box-sizing: border-box; min-height: 52px; padding: 6px 10px; display: flex; align-items: center; gap: 10px; border-radius: 10px; cursor: pointer;
  border: 1.5px solid rgba(241, 234, 219, .25); color: var(--ink); font: 700 15px/1.2 var(--ui-font);
}
.mm-pick .mmchoice.on { background: var(--pick-tint); border-color: transparent; box-shadow: var(--pick-ring); }
.mm-pick .mmchoice:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mm-pick .mmchoice.ruled .mmchoicename { text-decoration: line-through; text-decoration-thickness: 1.5px; color: var(--soft); font-weight: 400; }
.mm-pick .mmchoice .mmcameo { flex: none; filter: none; }
.mm-pick .mmchoicenote { margin-left: auto; font: 400 13px/1 var(--ui-font); color: var(--soft); }
.mm-pick .mmwhere { margin: 0; font: italic 400 17px/1.3 var(--display); }
.mm-pick .mmpicksum { margin: 0; padding: 10px 12px; border-radius: 8px; background: rgba(0, 0, 0, .22); font: 400 18px/1.3 var(--display); color: var(--turn); }

/* ── the result ──────────────────────────────────────────────────────── */
.mmemblem svg { width: 72px; height: 72px; }
.house-scrim-result .house-sheet.mm-result { --house-sheet-width: 560px; }
.mmresult .mmanswer { margin: 0 0 12px; font: 400 20px/1.35 var(--display); text-wrap: balance; }
.mmresult .mmanswer b { font-weight: 400; color: var(--turn); }
.mmresult .mmhands { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mmresult .mmhands li { display: grid; gap: 4px; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, .18); }
.mmresult .mmhands li.won { box-shadow: inset 0 0 0 2px var(--turn); }
.mmresult .mmhandwho { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mmresult .mmhandpill { padding: 3px 8px 1px; border-radius: 999px; background: var(--turn); color: var(--turn-ink); font: 800 12px/1.2 var(--ui-font); }
.mmresult .mmhandpill.out { background: none; color: var(--soft); border: 1.5px solid rgba(241, 234, 219, .35); }
.mmresult .mmhandcards { font-size: var(--t-note); color: var(--soft); }

/* ── tall windows: the plan above the rest ─────────────────────────────── */
@media (max-aspect-ratio: 6/5) and (min-width: 641px) {
  .mmansion .stage { display: flex; flex-direction: column; gap: 10px; }
  .mmansion .boardcol { flex: none; width: min(100cqw, calc(52cqh - var(--up))); margin: 0 auto; }
  .mmansion .side { flex: 1 1 0; }
}

/* ── phones: the seats, the plan, the Your move card; the notebook a sheet ── */
@media (max-width: 640px) {
  .felt.mmansion { height: 100dvh; gap: 0; }
  .mmansion .tablemain { gap: 6px; }
  .felt.mmansion .bar .tools { display: none; }
  .felt.mmansion .bar .more { display: inline-flex; min-width: 44px; min-height: 44px; }
  .mmansion .stage { display: flex; flex-direction: column; gap: 8px; }
  .mmansion .side { display: contents; }
  .mmansion .mmseats { order: -1; gap: 5px; }
  .mmansion .mmchip { height: 40px; gap: 9px; padding: 0 4px; justify-content: center; }
  .mmansion .mmchipas { display: none; }
  .mmansion .mmchipname { font-size: 13px; }
  .mmansion .mmchipname small { display: none; }
  .mmansion .boardcol { flex: none; }
  .mmansion .mmsidebody { flex: 1 1 0; min-height: 0; }
  .mmansion .dock { margin-top: auto; padding: 10px 12px 12px; gap: 8px; }
  .mmansion .say { font-size: 15px; }
  .mmansion .mmupnote, .mmansion .mmfaceup .mmkicker { display: none; }
  .mmansion .bar .title .phase { display: none; }
  .mmplate { bottom: 0; translate: -50% 50%; height: 18px; padding: 2px 10px 0; }
  .felt.mmansion .bar .mmbookbtn { padding-inline: 6px; }
  .mmansion .mmfaceup { height: auto; min-height: 40px; flex-wrap: wrap; overflow: visible; row-gap: 6px; }
  .mmshownpill { font-size: 16px; top: 3%; }
  .mmshown .mmcard { top: 13%; }
  .mmslip { left: 4%; right: 4%; bottom: 3%; padding: 8px 12px 10px; }
  .mmslipbody { padding-left: 0; font-size: 14px; }
}
@media (max-width: 640px) {
  .felt.mmansion:not(.casting) .mmsidebody > .nbook {
    position: fixed; left: 0; right: 0; bottom: 0; top: 18dvh; z-index: 40; translate: 0 105%; visibility: hidden;
    transition: translate 260ms cubic-bezier(.2, .8, .2, 1), visibility 0s 260ms;
  }
  .felt.mmansion.bookopen .mmsidebody > .nbook { translate: 0 0; visibility: visible; transition: translate 260ms cubic-bezier(.2, .8, .2, 1); }
  .felt.mmansion.bookopen::after { content: ''; position: fixed; inset: 0; z-index: 39; background: rgba(8, 6, 14, .55); }
  .felt.mmansion:not(.casting) .mmsidebody > .nbook .nbcover { border-radius: 18px 18px 0 0; padding: 12px 6px 0; }
  .felt.mmansion:not(.casting) .mmsidebody > .nbook .nbpage { border-radius: 10px 10px 0 0; box-shadow: 0 -1px 0 #fffaf0; padding: 6px 10px 0 14px; }
  .felt.mmansion .bar .mmbookbtn { display: inline-flex; min-height: 44px; }
  .felt.mmansion .nbdone {
    display: inline-flex; align-items: center; height: 44px; padding: 0 8px; border: 0; background: none; color: var(--nb-ink); cursor: pointer;
    font: 700 16px/1 var(--ui-font); text-decoration: underline; text-underline-offset: 4px;
  }
  .felt.mmansion .nbhead { flex-wrap: wrap; }
  .felt.mmansion .nbtitles { order: 0; flex-basis: calc(100% - 84px); }
  .felt.mmansion .nbdone { order: 1; margin-left: auto; }
  .felt.mmansion .nbtabs { order: 2; }
  .felt.mmansion .nbhintbtn { order: 3; margin-left: auto; }
  .felt.mmansion .mmsidebody { flex: 1 1 0; }
}
@media (max-width: 360px) {
  .felt.mmansion .bar .mmbookbtn .mmbooklabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .felt.mmansion .bar .mmbookbtn .mmbookicon { display: block; }
  .felt.mmansion .bar .mmbookbtn { min-width: 44px; justify-content: center; }
  .mmansion .mmchiptext { display: none; }
  .mmansion .mmchip { justify-content: center; }
  .mmansion .mmupcard { height: 32px; padding: 0 10px; font-size: 13px; }
}
/* phones on their side: the plan at the left, as tall as the screen */
@media (max-height: 520px) {
  #app { padding: 0; }
  .felt.mmansion {
    height: 100dvh; border: 0; border-radius: 0; gap: 0;
    padding: max(4px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
  }
  .felt.mmansion .bar .tools { display: none; }
  .felt.mmansion .bar .more { display: inline-flex; min-height: 36px; }
  .mmansion .stage { --up: 0px; --bw: min(calc(100cqh - 10px), calc(100cqw - 316px)); grid-template-columns: var(--bw) min(520px, calc(100cqw - var(--bw) - 12px)); gap: 12px; }
  .mmansion .mmfaceup { display: none; }
  .mmplate { bottom: 0; translate: -50% 50%; height: 18px; padding: 2px 10px 0; }
  .mmansion .side { gap: 6px; }
  .mmansion .mmchip { height: 36px; padding: 0 4px; gap: 4px; }
  .mmansion .mmchipas, .mmansion .mmchipname small { display: none; }
  .mmansion .mmchipname { font-size: 13px; }
  .mmansion .mmseats { gap: 4px; }
  .mmansion .dock { margin-top: auto; padding: 6px 10px 8px; gap: 4px; }
  .mmansion .say { font-size: 14px; min-height: calc(2 * 1.375 * 14px); }
  .mmansion .act { min-height: 36px; font-size: 14px; }
  .mmansion .dock kbd { display: none; }
  .mmshown .mmslip { display: none; }
  .mmshownpill { font-size: 15px; top: 3%; }
}
@media (pointer: coarse) {
  .mmansion .act { min-height: 44px; }
  .felt.mmansion .bar .btn { min-height: 44px; }
}
@media (pointer: coarse) and (max-height: 520px) {
  .mmansion .act { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .mmansion .dock, .felt.mmansion .mmsidebody > .nbook { transition: none !important; }
  .mmshown .mmcard.lift, .mmslipline::after { animation: none; }
}