:root{color-scheme:light;--green:#153d34;--paper:#fffdf7;--gold:#d9ad52;--line:#d5dacd}*{box-sizing:border-box}body{margin:0;background:#f2f2eb;color:#193a32;font:15px/1.6 system-ui,sans-serif}header{display:flex;align-items:center;gap:20px;padding:15px 3vw;background:var(--green);color:white;flex-wrap:wrap}header b{font-size:26px}header span{flex:1;color:#c2d6c7;font-size:13px}main{max-width:1800px;margin:auto;padding:22px 3vw}section{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:22px;margin-bottom:20px}h1{font-size:28px;line-height:1.3;margin:8px 0 20px}h2{font-size:21px;margin:0 0 14px}h3,p{margin:0 0 12px}small{color:#926c2c;font-weight:bold}button,.button,select,input,textarea{font:inherit;border:1px solid #b6c2b3;border-radius:7px;background:#fffef9;color:#21443b;padding:9px 13px}button,.button,select{cursor:pointer}button,.button{display:inline-block;margin:3px}button:hover,.button:hover{background:#ebf0df}button.primary{background:#205747;color:white;border-color:#205747}button:disabled{opacity:.45;cursor:default}label{display:block;margin-bottom:10px}input,textarea,select{max-width:100%}input:not([type=checkbox]),textarea{width:100%}textarea{min-height:170px}details{margin:12px 0}summary{cursor:pointer;font-weight:650}.layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(350px,1fr);gap:22px;align-items:start}.board-panel{background:#0b152d;color:white;padding:12px;position:sticky;top:10px}.bar,.board-bottom,.toolbar,.dialog-head,.row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.board-scroll{overflow:auto}.board-panel svg{display:block;width:100%;min-width:580px}.board-panel.big{position:fixed;inset:10px;z-index:10;overflow:auto;margin:0}.board-panel.big .board-scroll{max-width:1200px;margin:auto}.board-bottom{padding:8px}.board-bottom label{margin:0}.board-note{color:#bdc8dd;font-size:12px;margin:6px 10px}.hotspot{cursor:pointer;outline:none}.hotspot:hover .hit,.hotspot:focus .hit{fill:#fff9;stroke:white;stroke-width:2}.pawn{stroke:white;stroke-width:3;filter:drop-shadow(0 2px 3px #000)}#players{display:flex;gap:8px;flex-wrap:wrap}.player-chip{border:1px solid #bdc8b6;border-left:6px solid var(--seat);padding:5px 13px;border-radius:6px}.player-chip.active{background:#dce7d8;font-weight:bold}.toolbar{margin-bottom:16px}.row{border-bottom:1px solid #ecebdf;padding:6px 0;flex-wrap:nowrap}.row span{flex:1}.cash{font-size:30px;color:#26654e}.negative{color:#b83b31}#log{max-height:380px;overflow:auto;padding-left:25px}#log li{border-bottom:1px solid #eee;padding:5px}.muted,.source-note{color:#6b7d71;font-size:13px}.source-note p{margin:6px 0 0}#notice:not(:empty){background:#fff0d9;border:1px solid #ddc199;border-radius:8px;padding:12px;margin-bottom:16px}.card{border-left:4px solid var(--gold);padding:12px;background:#f0f4eb;margin:12px 0}.seat{display:grid;grid-template-columns:1fr 1fr 2fr;gap:14px;border-bottom:1px solid #ddd;padding:16px 0}.seat b{grid-column:1/-1}.controls{display:flex;gap:15px;flex-wrap:wrap}.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}dialog{max-width:min(900px,96vw);max-height:90vh;overflow:auto;width:800px;border:1px solid #a9b9a0;border-radius:14px;padding:24px;color:#193a32;background:var(--paper)}dialog::backdrop{background:#071a18b0}.dialog-head{margin-bottom:18px;position:sticky;top:-24px;background:var(--paper);z-index:1;padding-top:10px}pre{white-space:pre-wrap;word-break:break-word;font-size:13px;background:#edf0e8;padding:14px}.materials-item{border:1px solid var(--line);padding:12px;margin:10px 0;border-radius:8px}.badge{font-size:12px;color:#8c5c23;background:#f6ecd8;border-radius:5px;padding:2px 7px}table{border-collapse:collapse;width:100%}td,th{border-bottom:1px solid #ddd;padding:9px;text-align:left}.inspection{width:100%;border-radius:8px}#dice{font-size:19px;font-weight:bold;color:#ffe1a2}.die{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;background:#fffbe8;color:#143d34;border-radius:6px;margin:0 3px}.sources-list{font-size:13px}.mini{font-size:12px}.danger{color:#aa392f}@media(max-width:1000px){.layout{grid-template-columns:minmax(0,1fr)}.board-panel{position:static}.board-panel svg{min-width:0}.seat{grid-template-columns:1fr}main{padding:14px 10px}.two{grid-template-columns:1fr}section{padding:16px}}
.clock-panel{background:#edf3e9;border-color:#b6cbb4}.clock-readout{font-size:19px;font-weight:650;font-variant-numeric:tabular-nums}.clock-panel progress{width:100%;height:14px;accent-color:#205747;margin-bottom:10px}.clock-panel .controls{align-items:center}.clock-panel .controls label{font-size:13px;max-width:150px;margin:0 0 0 10px}.clock-panel p:last-child{font-size:13px;color:#607767;margin-top:8px}audio{width:100%;margin-bottom:16px}

.narrator-panel{background:#fbfaf3}.host-heading{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}.host-heading h2{margin:0}.host-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;width:42px;height:42px;background:#205747;color:white;font-weight:700}.host-avatar.speaking{box-shadow:0 0 0 6px #d9ad5233}.host-caption{border-left:3px solid #d9ad52;padding:10px 14px;background:#f1f4eb;max-height:150px;overflow:auto}.host-settings{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.host-settings label{max-width:360px;min-width:140px;margin:10px 0}.host-settings select{max-width:100%}

[hidden]{display:none!important}#market-panel p{font-size:14px}#market-panel button{margin-right:10px}

#board > .pawn,
#board > text,
#board > polyline,
#board .hotspot text {
  pointer-events: none;
}
#board-dialog {
  width: min(1200px, 96vw);
  max-width: 96vw;
}
#board-dialog .board-scroll {
  max-height: 66vh;
  max-height: 66dvh;
  border-radius: 8px;
  background: #0b152d;
}
#board-dialog svg {
  display: block;
  width: 100%;
  min-width: 760px;
}
.mobile-jump,
.mobile-only {
  display: none;
}

@media (max-width: 700px), (max-width: 1000px) and (pointer: coarse) {
  body { overflow-wrap: anywhere; }
  header {
    gap: 6px;
    padding: 10px max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left));
    padding-top: max(10px, env(safe-area-inset-top));
  }
  header b { flex-basis: 100%; font-size: 22px; }
  header span { flex-basis: 100%; }
  main {
    display: flex;
    flex-direction: column;
    padding: 10px max(8px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }
  section { padding: 12px; margin-bottom: 12px; }
  h1 { font-size: 23px; margin: 6px 0 12px; }
  h2 { font-size: 19px; }
  #narrator-panel, .source-note { order: 1; }
  #game { display: flex; flex-direction: column; min-width: 0; }
  #game .layout { order: -1; gap: 0; }
  #game > .toolbar { order: -2; margin: 0 0 8px; }
  .mobile-jump {
    display: flex;
    order: -3;
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 2;
    gap: 4px;
    padding: 4px 3px;
    margin-bottom: 8px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
  }
  .mobile-jump a {
    display: grid;
    place-items: center;
    flex: 1 1 0;
    min-height: 44px;
    border-radius: 6px;
    color: #21443b;
    text-decoration: none;
    font-size: 14px;
    font-weight: 650;
    white-space: nowrap;
  }
  .mobile-jump a:focus-visible,
  .mobile-jump a:active { background: #dce7d8; }
  a.mobile-only { display: inline-flex; align-items: center; margin: 0 0 10px; }
  #board-panel, #decision-panel, #clock-panel, #ledger, #narrator-panel {
    scroll-margin-top: calc(60px + env(safe-area-inset-top, 0px));
  }
  .board-panel { padding: 7px; }
  .board-panel .bar, .board-bottom, .toolbar { gap: 6px; }
  #whose { flex: 1; min-width: 0; }
  #age { flex-shrink: 0; }
  .board-bottom { padding: 5px 0; }
  .board-note { margin: 4px 0 0; }
  .controls, .host-settings { gap: 6px; }
  #setup .controls > label, #setup .seat > label { width: 100%; margin-bottom: 5px; }
  #setup select, #form-body select { display: block; width: 100%; }
  .seat { gap: 7px; padding: 10px 0; }
  button, .button, select, input:not([type=checkbox]) { min-height: 44px; }
  button, .button { max-width: calc(100% - 6px); padding: 7px 10px; touch-action: manipulation; }
  #market-panel button { margin-right: 3px; }
  .button { text-decoration: none; }
  input, select, textarea { font-size: 16px; }
  .row { gap: 8px; }
  .row span, .row b, .row strong { min-width: 0; }
  .row b, .row strong { max-width: 62%; text-align: right; }
  .cash { font-size: 25px; }
  dialog {
    width: calc(100% - 16px);
    max-width: 96vw;
    max-height: 90vh;
    max-height: 90dvh;
    padding: 12px;
    overscroll-behavior: contain;
  }
  .dialog-head { gap: 6px; top: -12px; padding-top: 5px; margin-bottom: 10px; }
  .dialog-head h2 { flex: 1; min-width: 0; margin: 0; }
  #info-body table { table-layout: fixed; }
  #info-body td, #info-body th { padding: 5px; }
  #info-body td button { margin: 2px 0; padding-inline: 5px; }
  #info-body td input { padding-inline: 4px; }
  #board-dialog { width: calc(100% - 12px); }
}