/* Online controllers and the read-only main screen. Local keeps room.css. */
body[data-screen] { background:#ace2ee; }
body[data-screen] .panel,
body[data-screen] .room-ticket,
body[data-screen] .button,
body[data-screen] .room-tab { border-radius:2px 5px 1px 3px; border-width:3px 4px 3px 2px; box-shadow:none; }
body[data-screen] .button:not(:disabled):hover { filter:none; background:#ffdf70; }
body[data-screen] .button:not(:disabled):active { transform:translate(1px,1px); }
body[data-screen] .message-bar { border-radius:3px 0 4px 1px; }
body[data-screen] .display-toolbar { display:none; }
body[data-screen] .turn-banner { flex:none; min-width:0; padding:6px 9px; border:3px solid #080808; border-radius:2px 6px 1px 4px; background:#ff9db7; font-size:.92rem; font-weight:900; line-height:1.1; overflow-wrap:anywhere; }
body[data-screen] .turn-banner[data-state="your-turn"] { background:#ffc90f; }
body[data-screen] .display-setup { display:grid; grid-template-columns:1fr auto; align-items:center; gap:5px 8px; padding:9px; border:3px solid #080808; border-radius:3px 1px 5px 0; background:#ace2ee; }
body[data-screen] .display-setup h3 { font-size:.9rem; }
body[data-screen] .display-setup label,
body[data-screen] .display-setup .display-link-controls,
body[data-screen] .display-setup small { grid-column:1 / -1; }
body[data-screen] .display-setup a { display:grid; place-items:center; text-decoration:none; text-align:center; }
body[data-screen] .display-setup input { min-height:38px; font-size:.72rem; }
body[data-screen] .display-link-controls { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px; align-items:center; }
body[data-screen] .display-link-controls input { margin:0; }
body[data-screen] .display-link-controls .button { min-height:38px; padding:4px 8px; font-size:.72rem; }
body[data-screen] .display-setup small { font-size:.73rem; font-weight:700; }

/* One seat, one comfortable controller. Personal finances never page away. */
body[data-screen="controller"] .shell { max-width:620px; }
body[data-screen="controller"] .room-tabs { grid-template-columns:repeat(4,minmax(0,1fr)); }
body[data-screen="controller"] #tab-board,
body[data-screen="controller"] #view-board,
body[data-screen="controller"] #live-board,
body[data-screen="controller"] #live-roster,
body[data-screen="controller"] #display-lobby { display:none !important; }
body[data-screen="controller"] .dashboard { display:flex; flex-direction:column; gap:5px; }
body[data-screen="controller"] .decision-stack { flex:1; min-height:0; }
body[data-screen="controller"] .personal-panel { flex:none; display:grid; gap:4px; padding:6px 8px; border:3px solid #080808; border-radius:4px 1px 6px 2px; background:#fff9e6; }
body[data-screen="controller"] .personal-identity { display:flex; align-items:center; gap:7px; min-width:0; }
body[data-screen="controller"] #personal-pawn { width:40px; height:40px; flex:none; object-fit:contain; }
body[data-screen="controller"] .personal-identity > div { flex:1; min-width:0; }
body[data-screen="controller"] #personal-name { font-size:.95rem; overflow-wrap:anywhere; }
body[data-screen="controller"] #personal-career { font-size:.75rem; }
body[data-screen="controller"] #personal-status { align-self:start; padding:3px 5px; border:2px solid #080808; background:#ffc90f; font-size:.67rem; max-width:35%; overflow-wrap:anywhere; }
body[data-screen="controller"] .personal-values { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; margin:0; }
body[data-screen="controller"] .personal-values > div { min-width:0; padding:3px 6px; border:2px solid #080808; background:#fff; }
body[data-screen="controller"] .personal-values dt { font-size:.6rem; font-weight:900; text-transform:uppercase; }
body[data-screen="controller"] .personal-values dd { margin:0; font-size:.92rem; line-height:1.1; font-weight:900; overflow-wrap:anywhere; }
body[data-screen="controller"] .personal-property-line { display:flex; gap:6px; align-items:start; font-size:.7rem; }
body[data-screen="controller"] .personal-property-line > strong { flex:none; }
body[data-screen="controller"] #personal-properties { flex:1; display:flex; flex-wrap:wrap; gap:2px 8px; margin:0; padding:0; list-style:none; font-weight:700; }
body[data-screen="controller"] #personal-properties li { min-width:0; }
body[data-screen="controller"] #personal-properties .personal-property { flex:1; display:grid; grid-template-columns:35px minmax(0,1fr); gap:1px 4px; align-content:start; }
body[data-screen="controller"] .personal-property img { width:35px; height:23px; object-fit:contain; grid-row:1 / span 2; }
body[data-screen="controller"] .personal-property strong { font-size:.64rem; line-height:1.05; overflow-wrap:anywhere; }
body[data-screen="controller"] .personal-property span { font-size:.55rem; line-height:1.1; }
body[data-screen="controller"] #personal-doom { padding:3px 5px; border:2px solid #080808; background:#ddd4e3; font-size:.7rem; font-weight:800; }
body[data-screen="controller"] .reading-controls { display:flex; flex-wrap:nowrap; }
body[data-screen="controller"] .reading-controls .button { flex:1; padding:3px 4px; }
body[data-screen="controller"] .play-pages:has(#action-previous:disabled):has(#action-next:disabled) { display:none; }
body[data-screen="controller"] .action-panel { flex:1; min-height:0; padding:7px; }
body[data-screen="controller"] .action-description { display:block; -webkit-line-clamp:unset; overflow:visible; font-size:.8rem; line-height:1.15; }
body[data-screen="controller"] .action-controls > .button { min-height:44px; font-size:.8rem; }
body[data-screen="controller"] .action-controls select { min-height:42px; }
body[data-screen="controller"] .property-art { display:none; }
body[data-screen="controller"] .action-controls .roll-die { display:none; }
body[data-screen="controller"] .decision-stack > .scene-panel,
body[data-screen="controller"] .decision-stack > .card-panel { max-height:110px; }
body[data-screen="controller"] .latest-event { min-height:26px; max-height:34px; }
body[data-screen="controller"] .match[data-detail="results"] .action-panel { max-height:62px; }
body[data-screen="controller"] .lobby { justify-content:center; gap:7px; }

/* The main screen shows the whole table, board and staged turn together. */
body[data-screen="display"] .shell { width:100%; max-width:1920px; padding:8px 12px; gap:5px; }
body[data-screen="display"] .masthead,
body[data-screen="display"] #entry,
body[data-screen="display"] .room-tabs,
body[data-screen="display"] .controller-strip,
body[data-screen="display"] #lobby,
body[data-screen="display"] #personal-panel,
body[data-screen="display"] #view-table,
body[data-screen="display"] #view-board,
body[data-screen="display"] #view-history,
body[data-screen="display"] #view-room,
body[data-screen="display"] .reading-controls,
body[data-screen="display"] .play-pages,
body[data-screen="display"] .choice-pages,
body[data-screen="display"] .page-controls,
body[data-screen="display"] .rematch-button,
body[data-screen="display"] #action-controls button,
body[data-screen="display"] #action-controls label,
body[data-screen="display"] #action-controls select,
body[data-screen="display"] #action-controls .attack-preview,
body[data-screen="display"] #action-controls .sale-preview,
body[data-screen="display"] #action-controls .choice-note { display:none !important; }
body[data-screen="display"] .display-toolbar { flex:none; min-height:42px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 10px; border:3px solid #080808; border-radius:3px 1px 5px 0; background:#ffc90f; }
body[data-screen="display"] .display-toolbar strong { font-size:.9rem; letter-spacing:.02em; }
body[data-screen="display"] .display-toolbar > div { display:flex; gap:5px; }
body[data-screen="display"] .display-toolbar .button { min-height:32px; font-size:.75rem; padding:4px 8px; }
body[data-screen="display"] .message-bar { min-height:24px; font-size:.73rem; }
body[data-screen="display"] .room-ticket { min-height:32px; padding:3px 10px; }
body[data-screen="display"] .room-ticket h1 { font-size:1rem; }
body[data-screen="display"] .progress { height:47px; }
body[data-screen="display"] .progress strong { font-size:1rem; }
body[data-screen="display"] .progress .clock-cell strong { font-size:1.2rem; }
body[data-screen="display"] .turn-banner { padding:6px 12px; font-size:1.1rem; background:#ff9db7; }
body[data-screen="display"] .dashboard { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); gap:7px; }
body[data-screen="display"] .live-board { grid-column:1; grid-row:1 / -1; border:3px solid #080808; border-radius:4px 0 5px 2px; background:#fff9e6; }
body[data-screen="display"] .live-roster { grid-column:2; grid-row:1; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:minmax(54px,1fr); max-height:none; gap:4px; }
body[data-screen="display"] .compact-player { display:grid; grid-template-columns:minmax(0,1fr); gap:3px; padding:5px 7px; min-height:54px; border-width:2px 3px 2px 2px; border-radius:3px 0 2px 4px; font-size:.82rem; }
body[data-screen="display"] .compact-player span { white-space:normal; font-size:.72rem; line-height:1.15; }
body[data-screen="display"] .compact-player.current { background:#ffc90f; box-shadow:none; border-width:3px; }
body[data-screen="display"] .decision-stack { grid-column:2; grid-row:2; gap:6px; }
body[data-screen="display"] .action-panel { flex:1 1 auto; padding:12px; background:#fff0a2; }
body[data-screen="display"] .action-panel .section-head { margin-bottom:8px; padding-bottom:6px; }
body[data-screen="display"] .action-panel h3 { font-size:1.3rem; }
body[data-screen="display"] .action-description { display:block; -webkit-line-clamp:unset; overflow:visible; font-size:1.05rem; line-height:1.25; }
body[data-screen="display"] .action-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
body[data-screen="display"] .roll-die { width:70px; height:66px; font-size:60px; }
body[data-screen="display"] .outcome-cash { font-size:1.3rem; padding:8px; }
body[data-screen="display"] .outcome-wait { flex-basis:100%; font-size:.88rem; }
body[data-screen="display"] .decision-stack > .scene-panel,
body[data-screen="display"] .decision-stack > .card-panel { flex:0 1 auto; max-height:180px; padding:10px; }
body[data-screen="display"] .scene-panel { grid-template-columns:minmax(0,1fr) minmax(0,36%); }
body[data-screen="display"] .scene-panel img,
body[data-screen="display"] .card-content img { display:block; max-height:130px; object-fit:contain; }
body[data-screen="display"] .scene-panel p,
body[data-screen="display"] .card-content p { font-size:.92rem; line-height:1.2; }
body[data-screen="display"] .latest-event { min-height:30px; max-height:50px; padding:5px 8px; font-size:.8rem; }
body[data-screen="display"] .results-panel { flex:1 1 auto; padding:10px; }
body[data-screen="display"] .results-panel h3 { margin-bottom:7px; font-size:1.2rem; }
body[data-screen="display"] .results { grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
body[data-screen="display"] .results li { padding:7px; font-size:.8rem; }
body[data-screen="display"] .match[data-detail="results"] .action-panel { flex:none; max-height:none; }
/* Final standings replace the live turn summary and duplicate roster. */
body[data-screen="display"] .match[data-detail="results"] .dashboard { grid-template-rows:minmax(0,1fr); }
body[data-screen="display"] .match[data-detail="results"] .live-roster,
body[data-screen="display"] .match[data-detail="results"] .action-panel { display:none; }
body[data-screen="display"] .match[data-detail="results"] .decision-stack { grid-row:1; }
body[data-screen="display"] .match[data-detail="results"] .results-panel { flex:1; }
body[data-screen="display"] .display-lobby { flex:1; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:center; gap:30px; padding:30px; background:#fff0a2; }
body[data-screen="display"] .display-lobby > div { display:grid; gap:18px; }
body[data-screen="display"] .display-lobby h2 { font-size:clamp(1.5rem,3vw,3rem); }
body[data-screen="display"] .display-lobby p { font-size:clamp(.95rem,1.3vw,1.3rem); }
body[data-screen="display"] #display-seats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0; padding:0; list-style:none; }
body[data-screen="display"] #display-seats .display-seat { display:grid; grid-template-columns:52px minmax(0,1fr); grid-template-rows:auto auto auto; align-items:center; gap:4px 8px; min-height:110px; padding:10px; border:3px solid #080808; border-radius:4px 1px 5px 0; background:#fff; }
body[data-screen="display"] #display-seats .display-seat strong { font-size:1rem; overflow-wrap:anywhere; }
body[data-screen="display"] #display-seats .display-seat span { font-size:.8rem; }
body[data-screen="display"] #display-seats .display-seat b { justify-self:start; padding:3px 5px; border:2px solid #080808; background:#ace2ee; font-size:.7rem; }
body[data-screen="display"] #display-seats .display-seat > img { grid-row:1 / -1; width:52px; height:64px; object-fit:contain; }

@media (max-height:690px) {
  body[data-screen="controller"] .masthead { display:none; }
  body[data-screen="controller"] .dashboard { gap:3px; }
  body[data-screen="controller"] .turn-banner { padding:4px 6px; font-size:.77rem; }
  body[data-screen="controller"] .personal-panel { gap:2px; padding:3px 6px; }
  body[data-screen="controller"] #personal-pawn { width:29px; height:29px; }
  body[data-screen="controller"] #personal-name { font-size:.76rem; line-height:1.05; }
  body[data-screen="controller"] #personal-career { font-size:.57rem; }
  body[data-screen="controller"] #personal-status { max-width:80px; padding:2px 3px; font-size:.58rem; line-height:1.1; }
  body[data-screen="controller"] .personal-values > div { padding:1px 4px; }
  body[data-screen="controller"] .personal-values dt { font-size:.48rem; }
  body[data-screen="controller"] .personal-values dd { font-size:.8rem; }
  body[data-screen="controller"] .personal-property-line { gap:4px; font-size:.59rem; line-height:1.1; }
  body[data-screen="controller"] #personal-properties { gap:1px 6px; }
  body[data-screen="controller"] .personal-property-line > strong { display:none; }
  body[data-screen="controller"] #personal-properties .personal-property { display:flex; flex-direction:column; gap:1px; }
  body[data-screen="controller"] .personal-property img { display:none; }
  body[data-screen="controller"] .personal-property strong { font-size:.6rem; }
  body[data-screen="controller"] .personal-property span { font-size:.525rem; }
  body[data-screen="controller"] #personal-doom { padding:2px 4px; border:0; font-size:.62rem; line-height:1.1; }
  body[data-screen="controller"] .reading-controls .button { min-height:28px; padding:2px 3px; border-width:2px; font-size:.6rem; line-height:1.05; }
  body[data-screen="controller"] .personal-identity { gap:5px; }
  body[data-screen="controller"] .action-panel { padding:5px; }
  body[data-screen="controller"] .action-description { margin-bottom:4px; font-size:.7rem; line-height:1.12; }
  body[data-screen="controller"] .action-controls { gap:4px; }
  body[data-screen="controller"] .action-controls select { min-height:38px; font-size:.7rem; }
  body[data-screen="controller"] .action-controls > .button { min-height:44px; padding:4px; font-size:.72rem; }
  body[data-screen="controller"] .attack-preview,
  body[data-screen="controller"] .choice-note { padding:3px 4px; font-size:.66rem; }
  body[data-screen="controller"] .latest-event { min-height:23px; max-height:23px; font-size:.6rem; }
  body[data-screen="controller"] .action-panel:has(.action-controls > button:not(:disabled)) ~ .latest-event { display:none; }
  body[data-screen="controller"] .decision-stack > .scene-panel,
  body[data-screen="controller"] .decision-stack > .card-panel { max-height:62px; }
  body[data-screen="controller"] .display-setup { padding:5px; gap:3px 5px; }
  body[data-screen="controller"] .display-setup a { min-height:36px; font-size:.7rem; }
  body[data-screen="controller"] .display-setup h3 { font-size:.75rem; }
  body[data-screen="controller"] .display-setup small { font-size:.65rem; }
}
@media (max-width:360px) and (max-height:600px) {
  body[data-screen="controller"] .turn-banner { font-size:.72rem; padding:3px 5px; }
  body[data-screen="controller"] .reading-controls .button { font-size:.6rem; min-height:28px; }
  body[data-screen="controller"] .action-panel .section-head h3 { font-size:.82rem; }
  body[data-screen="controller"] .action-description { font-size:.68rem; }
  body[data-screen="controller"] .personal-values dd { font-size:.74rem; }
  body[data-screen="controller"] .action-panel[data-can-sell="true"] .action-controls > .button { font-size:.65rem; }
  body[data-screen="controller"] .personal-property-line { font-size:.56rem; }
}
@media (min-width:1600px) and (min-height:900px) {
  body[data-screen="display"] .shell { padding:12px 18px; gap:7px; }
  body[data-screen="display"] .display-toolbar { min-height:50px; }
  body[data-screen="display"] .display-toolbar strong { font-size:1.15rem; }
  body[data-screen="display"] .progress { height:56px; }
  body[data-screen="display"] .progress strong { font-size:1.2rem; }
  body[data-screen="display"] .turn-banner { font-size:1.4rem; }
  body[data-screen="display"] .compact-player { min-height:68px; font-size:1rem; padding:7px 10px; }
  body[data-screen="display"] .compact-player span { font-size:.88rem; }
  body[data-screen="display"] .action-panel { padding:20px; }
  body[data-screen="display"] .action-panel h3 { font-size:1.7rem; }
  body[data-screen="display"] .action-description { font-size:1.3rem; }
  body[data-screen="display"] .decision-stack > .scene-panel,
  body[data-screen="display"] .decision-stack > .card-panel { max-height:250px; }
  body[data-screen="display"] .scene-panel p,
  body[data-screen="display"] .card-content p { font-size:1.15rem; }
  body[data-screen="display"] .scene-panel img,
  body[data-screen="display"] .card-content img { max-height:190px; }
  body[data-screen="display"] .latest-event { font-size:1rem; min-height:38px; }
  body[data-screen="display"] .results li { font-size:1rem; padding:12px; }
}