/* Golden Temple 108 · physical tabletop mode */
body.gt-table-primary {
  overflow: hidden;
  background: #f2f2f7;
}

body.gt-table-primary .wrap {
  width: 100vw;
  max-width: none;
  padding: 0;
}

body.gt-table-primary header.hero { display: none; }
body.gt-table-primary .v6-toolbar { display: none; }
body.gt-table-primary footer { display: none; }

body.gt-table-primary nav.tabs {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: 12px;
  left: 12px;
  z-index: 120;
  margin: 0;
  background: rgba(255,255,255,.9);
  border-color: rgba(62,71,83,.12);
  box-shadow: 0 14px 40px rgba(39,48,61,.12);
}

body.gt-table-primary nav.tabs button { color: #667080; }
body.gt-table-primary nav.tabs button.on {
  color: #fff;
  background: linear-gradient(135deg,#7463d8,#458fda);
}

body.gt-table-primary #tab-board {
  display: block;
  width: 100vw;
  height: 100dvh;
  margin: 0;
}

body.gt-table-primary #tab-board > .card {
  position: relative;
  width: 100vw;
  height: 100dvh;
  min-height: 680px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 48% 48%, rgba(255,214,103,.22), transparent 23%),
    radial-gradient(circle at 48% 72%, rgba(93,174,229,.12), transparent 44%),
    linear-gradient(180deg,#ffffff 0%,#f6f8fb 68%,#e9edf3 100%);
  box-shadow: none;
}

.tabletop-banner {
  position: absolute;
  top: 72px;
  right: 312px;
  left: 230px;
  z-index: 8;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  pointer-events: none;
}

.tabletop-banner > div:first-child { max-width: 590px; }
.tabletop-kicker,
.tabletop-section-title span,
.tabletop-card-label span,
.tabletop-control-title span {
  color: #8d650b;
  font: 800 8px/1.25 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.tabletop-banner h2 {
  margin: 4px 0 2px;
  color: #26313d;
  font-size: clamp(19px,2.8vw,29px);
  letter-spacing: -.03em;
}

.tabletop-banner p {
  max-width: 570px;
  color: #6d7886;
  font-size: 10px;
  line-height: 1.35;
}

.tabletop-round {
  display: grid;
  min-width: 120px;
  padding: 10px 12px;
  border: 1px solid rgba(67,81,99,.14);
  border-radius: 15px;
  background: rgba(255,255,255,.8);
  box-shadow: 0 8px 24px rgba(50,62,80,.08);
  text-align: right;
}
.tabletop-round span { color: #317dbd; font: 800 8px/1 ui-monospace,monospace; letter-spacing: .1em; }
.tabletop-round b { margin-top: 4px; color: #26313d; font-size: 14px; }
.tabletop-round small { margin-top: 3px; color: #768291; font-size: 8px; }

.tabletop-players,
.tabletop-controls,
.tabletop-event,
.tabletop-book,
.tabletop-objective,
.tabletop-bookshelf,
.tabletop-turnorder {
  position: absolute;
  z-index: 10;
  border: 1px solid rgba(65,79,98,.13);
  border-radius: 17px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 18px 48px rgba(42,54,72,.12), inset 0 1px #fff;
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
}

.tabletop-players {
  top: 110px;
  left: 14px;
  width: 202px;
  padding: 12px;
}

.tabletop-section-title,
.tabletop-card-label,
.tabletop-control-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tabletop-section-title i,
.tabletop-card-label i { color: #7e8996; font: 700 8px/1 ui-monospace,monospace; font-style: normal; }
.tabletop-mini { border: 0; color: #317dbd; background: transparent; font: 800 9px system-ui,sans-serif; cursor: pointer; }

.tabletop-player-list { display: grid; gap: 5px; margin-top: 9px; }
.tabletop-player {
  display: grid;
  min-height: 39px;
  padding: 6px 7px;
  grid-template-columns: 23px 1fr auto;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(65,79,98,.1);
  border-left: 4px solid var(--player);
  border-radius: 11px;
  background: rgba(247,249,251,.92);
  text-align: left;
  cursor: pointer;
}
.tabletop-player.active { background: color-mix(in srgb,var(--player) 16%,white); outline: 2px solid color-mix(in srgb,var(--player) 65%,#617080); }
.tabletop-player .piece { width: 17px; height: 17px; border-radius: 50%; background: var(--player); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.tabletop-player b { display:block; color: #344150; font-size: 9px; line-height: 1.1; }
.tabletop-player small { display:block; margin-top: 2px; color:#7a8592; font: 700 7px/1 ui-monospace,monospace; }
.tabletop-player em { color:#7e8996; font: 800 8px/1 ui-monospace,monospace; font-style:normal; }

.tabletop-controls {
  top: 110px;
  right: 14px;
  width: 284px;
  padding: 12px;
}
.tabletop-control-title b { color:#26313d; font-size: 14px; }
.tabletop-dice { display:grid; grid-template-columns: repeat(4,1fr); gap:4px; margin: 9px 0; }
.tabletop-dice > div { display:grid; min-height:50px; place-items:center; align-content:center; border:1px solid rgba(67,81,99,.12); border-radius:11px; background:#f4f7fa; }
.tabletop-dice b { color:#344150; font:850 17px/1 ui-monospace,monospace; }
.tabletop-dice span { margin-top:4px; color:#7c8794; font-size:6.5px; font-weight:800; text-transform:uppercase; }
.tabletop-roll { width: 100%; margin-bottom: 5px; }
.tabletop-controls .btn { min-height: 35px; }

.tabletop-event {
  top: 332px;
  right: 14px;
  width: 284px;
  padding: 13px;
  border-top: 4px solid #7463d8;
}
.tabletop-event h3,
.tabletop-book h3 { margin: 7px 0 4px; color:#273340; font-size: 15px; line-height: 1.2; }
.tabletop-event > p,
.tabletop-book > p { color:#687584; font-size: 10px; line-height:1.4; }
.tabletop-event-meta { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.tabletop-event-meta span { padding:4px 6px; color:#637080; border-radius:7px; background:#f0f3f7; font:700 7px/1 ui-monospace,monospace; }
.tabletop-responses { display:grid; grid-template-columns: repeat(3,1fr); gap:4px; margin-top:10px; }
.tabletop-responses button { min-height:52px; padding:5px; color:#7a8592; border:1px solid rgba(67,81,99,.12); border-radius:9px; background:#f5f7fa; cursor:not-allowed; opacity:.48; }
.tabletop-responses.is-awaiting button { color:#344150; cursor:pointer; opacity:1; }
.tabletop-responses button:hover { border-color:#7463d8; transform:translateY(-1px); }
.tabletop-responses b,.tabletop-responses span { display:block; }
.tabletop-responses b { font-size:8px; }
.tabletop-responses span { margin-top:3px; font-size:6.5px; line-height:1.15; }

.tabletop-book { bottom: 130px; right: 14px; width: 284px; padding: 13px; border-top: 4px solid #c88f28; }
.tabletop-book .btn { margin-top:9px; }

.tabletop-objective { left:14px; bottom:130px; width:202px; padding:12px; }
.tabletop-progress { height:8px; margin:9px 0 8px; overflow:hidden; border-radius:999px; background:#e7ebf0; }
.tabletop-progress i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#f0c94d,#d89227,#7463d8); transition:width .35s ease; }
.tabletop-materials { display:grid; grid-template-columns:repeat(4,1fr); gap:3px; }
.tabletop-materials span { padding:5px 2px; border-radius:6px; color:#6f7a88; background:#f3f5f8; font:700 6.5px/1.1 ui-monospace,monospace; text-align:center; }
.tabletop-materials span b { display:block; color:#344150; font-size:9px; }
.tabletop-objective p { margin-top:8px; color:#778291; font-size:8px; line-height:1.35; }

.tabletop-bookshelf { left:14px; bottom:38px; width:202px; padding:12px; }
.tabletop-deck-row { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
.tabletop-deck-row button { padding:5px 6px; color:var(--deck); border:1px solid color-mix(in srgb,var(--deck) 35%,#dae0e7); border-radius:8px; background:#fff; font:800 7px system-ui,sans-serif; cursor:pointer; }
.tabletop-bookshelf p { margin-top:7px; color:#778291; font-size:7px; line-height:1.3; }

.tabletop-turnorder { bottom:38px; left:230px; right:312px; min-height:44px; padding:8px 12px; display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:center; }
.tabletop-turnorder span { color:#8d650b; font:800 7px/1 ui-monospace,monospace; letter-spacing:.1em; }
.tabletop-turnorder b { color:#4e5b6b; font-size:9px; }
.tabletop-turnorder small { grid-column:2; color:#8993a0; font-size:7px; }

body.gt-table-primary #tab-board .boardhead,
body.gt-table-primary #tab-board .statusrow,
body.gt-table-primary #tab-board #rayLegend,
body.gt-table-primary #tab-board > .card > h3,
body.gt-table-primary #tab-board > .card > .cap,
body.gt-table-primary #tab-board #flowerSel,
body.gt-table-primary #tab-board #flowerSvg,
body.gt-table-primary #tab-board #flowerNote,
body.gt-table-primary #tab-board #log { display:none; }

body.gt-table-primary #tab-board #starSvg {
  position:absolute;
  top: 145px;
  bottom: 95px;
  left: 224px;
  width: calc(100% - 534px);
  height: auto;
  max-width: none;
  margin: 0;
  z-index: 2;
}

body.gt-table-primary #tab-board #starSvg::after { content:""; }
body.gt-table-primary #tab-board .scell { transition: transform .15s ease; }
body.gt-table-primary #tab-board .scell:hover { filter: drop-shadow(0 4px 5px rgba(35,50,70,.25)); }

/* Keep every action in document flow. The former top/bottom anchored
   event and passport cards overlapped at ordinary desktop heights. */
@media (min-width: 921px) {
  body.gt-table-primary { overflow: auto; }
  body.gt-table-primary #tab-board { height: auto; min-height: 100dvh; }
  body.gt-table-primary #tab-board > .card {
    display: grid;
    grid-template-columns: 202px minmax(0, 1fr) 284px;
    grid-template-rows: auto auto auto auto;
    gap: 14px;
    align-items: start;
    height: auto;
    min-height: 100dvh;
    padding: 24px 14px 28px;
    overflow: visible;
  }
  body.gt-table-primary #tab-board > .card > .tabletop-banner,
  body.gt-table-primary #tab-board > .card > .tabletop-players,
  body.gt-table-primary #tab-board > .card > .tabletop-controls,
  body.gt-table-primary #tab-board > .card > .tabletop-event,
  body.gt-table-primary #tab-board > .card > .tabletop-book,
  body.gt-table-primary #tab-board > .card > .tabletop-objective,
  body.gt-table-primary #tab-board > .card > .tabletop-bookshelf,
  body.gt-table-primary #tab-board > .card > .tabletop-turnorder {
    position: relative;
    inset: auto;
    width: auto;
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
  }
  .tabletop-banner { grid-column: 2; grid-row: 1; flex-wrap: wrap; }
  .tabletop-players { grid-column: 1; grid-row: 1 / 3; }
  .tabletop-controls { grid-column: 3; grid-row: 1; }
  .tabletop-event { grid-column: 3; grid-row: 2; }
  .tabletop-book { grid-column: 3; grid-row: 3; }
  .tabletop-objective { grid-column: 1; grid-row: 3; }
  .tabletop-bookshelf { grid-column: 1; grid-row: 4; }
  .tabletop-turnorder { grid-column: 2 / 4; grid-row: 4; }
  body.gt-table-primary #tab-board #starSvg {
    position: relative;
    inset: auto;
    grid-column: 2;
    grid-row: 2 / 4;
    align-self: start;
    width: 100%;
    height: auto;
    min-width: 0;
    margin: 0;
  }
}

@media (max-width: 920px) {
  body.gt-table-primary { overflow:auto; }
  body.gt-table-primary #tab-board { height:auto; min-height:100dvh; }
  body.gt-table-primary #tab-board > .card { height:auto; min-height:100dvh; padding:84px 12px 28px; overflow:visible; }
  .tabletop-banner { position:relative; top:auto; right:auto; left:auto; margin:0 0 12px; }
  .tabletop-round { display:none; }
  .tabletop-players,.tabletop-controls,.tabletop-event,.tabletop-book,.tabletop-objective,.tabletop-bookshelf,.tabletop-turnorder { position:relative; top:auto; right:auto; bottom:auto; left:auto; width:auto; margin:8px 0; }
  .tabletop-players { order:1; }
  .tabletop-controls { order:2; }
  .tabletop-event { order:3; }
  .tabletop-book { order:4; }
  .tabletop-objective { order:5; }
  .tabletop-bookshelf { order:6; }
  .tabletop-turnorder { order:7; }
  body.gt-table-primary #tab-board > .card { display:flex; flex-direction:column; }
  body.gt-table-primary #tab-board #starSvg { position:relative; top:auto; bottom:auto; left:auto; width:100%; height:auto; min-height:420px; order:2; margin:12px 0; }
  .tabletop-banner { order:0; }
}

@media (max-width: 520px) {
  .tabletop-responses { grid-template-columns:1fr; }
  .tabletop-responses button { min-height:38px; }
  .tabletop-turnorder { grid-template-columns:1fr; }
  .tabletop-turnorder small { grid-column:1; }
}
