/* ---------- 4. The table: laptop with patch notes ---------- */
.scene-table {
  display: flex; flex-direction: column; align-items: center;
  padding: 7vh calc(var(--side) + 16px) 2vh;
}
@media (max-width: 520px) { .scene-table { padding: 8vh calc(var(--side) + 2px) 2vh; } }

/* One grid: the lid in row 1, the base and the mug in row 2, the empty front of the table in row 3.
   The tabletop spans rows 2 and 3 and starts a little above the hinge, so the lid stands on it. */
.desk {
  container: desk / inline-size;
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr);
  width: min(1240px, 100%);
  --lt-w: min(880px, 100cqw);
}
.desk > *, .lt-lid, .lt-base { grid-column: 1; }
.laptop { display: contents; }

.table-top {
  grid-row: 2 / 4; z-index: 0;
  margin: -5.5% 0 0;
  clip-path: polygon(4% 0, 96% 0, 100% calc(100% - 18px), 100% 100%, 0 100%, 0 calc(100% - 18px));
  background:
    linear-gradient(180deg, transparent calc(100% - 18px), #8a6a4a calc(100% - 18px) calc(100% - 6px), #6f543a calc(100% - 6px)),
    radial-gradient(ellipse 60% 70% at 32% 0, rgba(255, 250, 235, 0.32), rgba(255, 250, 235, 0) 70%),
    repeating-linear-gradient(90deg, rgba(120, 85, 50, 0) 0 37px, rgba(120, 85, 50, 0.07) 37px 39px, rgba(120, 85, 50, 0) 39px 61px, rgba(255, 240, 210, 0.07) 61px 64px),
    #b58f64;
}
.table-front { grid-row: 3; z-index: 1; min-height: clamp(110px, 22vh, 230px); } /* the character sheet lives here (css/sheet.css) */
@media (max-width: 520px) { .table-front { min-height: 80px; } }

/* Lid: matte black, webcam on top, screen inside */
.lt-lid {
  grid-row: 1; z-index: 2; justify-self: center;
  position: relative;
  width: var(--lt-w);
  padding: 20px 22px 24px;
  background: #2a2b2e;
  border-radius: 12px 12px 3px 3px;
  box-shadow: inset 0 0 0 1px #3d3e42, inset 0 2px 0 #3a3b3f, 10px 10px 0 rgba(70, 60, 40, 0.12);
}
.lt-cam {
  position: absolute; top: 7px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px;
  border-radius: 50%; background: #111214; box-shadow: 0 0 0 2px #232427;
}
.lt-dot { position: absolute; left: 24px; bottom: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
@media (max-width: 520px) {
  .lt-lid { padding: 14px 10px 16px; border-radius: 9px 9px 3px 3px; }
  .lt-cam { top: 4px; width: 5px; height: 5px; margin-left: -2.5px; }
  .lt-dot { left: 12px; bottom: 5px; width: 5px; height: 5px; }
}

/* Base: keyboard deck (drawn by js/laptop.js), red pointing stick on top */
.lt-base {
  grid-row: 2; z-index: 2; justify-self: center;
  position: relative;
  width: calc(var(--lt-w) * 1.064); /* the deck's back edge (94% of the SVG) matches the lid */
  filter: drop-shadow(10px 9px 0 rgba(60, 40, 20, 0.22));
}
.lt-deck { width: 100%; height: auto; aspect-ratio: 1000 / 222; }
.lt-stick {
  position: absolute; left: 46.4%; top: 39.3%;
  width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0;
  border: 0; border-radius: 50%;
  background: transparent;
  touch-action: manipulation;
}
.lt-stick::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: clamp(7px, 1.5cqw, 14px); aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #d8644d, var(--red) 55%, #7f2c1e);
  box-shadow: 0 0 0 2px #121314;
  transition: transform 0.12s ease;
}
.lt-stick:hover::before { transform: translate(-50%, -50%) scale(1.25); }
.lt-stick:active::before { transform: translate(-50%, -50%) scale(0.85); }
.lt-stick:focus-visible { outline: 3px solid #f0c64a; outline-offset: -8px; }

/* Coffee mug, wide screens only */
.mug { display: none; }
@container desk (min-width: 1160px) {
  .mug {
    display: block; grid-row: 2; z-index: 2; justify-self: end; align-self: start;
    width: 92px; height: auto; margin: 4% 3% 0 0;
  }
}

/* ---------- The screen: a real, scrollable page ---------- */
.lt-screen {
  container: screen / inline-size;
  position: relative;
  height: min(calc((var(--lt-w) - 44px) * 0.625), 58svh);
  overflow: hidden;
  background: #121314;
  border-radius: 2px;
}
@container desk (max-width: 560px) {
  .lt-screen { height: min(62svh, 32rem); }
}
/* A faint glare across the glass */
.lt-screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0) 56%, rgba(255, 255, 255, 0.09) 63%, rgba(255, 255, 255, 0) 72%);
}

.pn {
  height: 100%;
  display: flex; flex-direction: column;
  background: #f2f1ec;
  color: var(--ink);
  font-family: var(--f-device); font-size: 0.875rem; line-height: 1.5;
}
.pn-bar {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  height: 28px; padding: 0 10px;
  background: #d8d9d4; border-bottom: 1px solid #b9bab5;
  font-size: 0.72rem; color: var(--ink-soft);
}
.pn-win { display: flex; gap: 6px; }
.pn-win i { width: 10px; height: 10px; border: 1.5px solid #8b8d90; }
.pn-body { flex: 1; min-height: 0; display: flex; }

/* Build list (wide screens) */
.pn-nav {
  display: none;
  flex: none; width: 14.5rem;
  overflow-y: auto; padding: 14px 8px 18px;
  background: #e6e7e2; border-right: 1px solid #c3c4bf;
  scrollbar-width: thin;
}
@container screen (min-width: 640px) { .pn-nav { display: block; } }
.pn-nav-label {
  margin: 0 8px 8px; font-size: 0.7rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft);
}
.pn-nav ul { list-style: none; margin: 0; padding: 0; }
.pn-nav-btn {
  display: block; width: 100%;
  padding: 5px 8px; border: 0; border-radius: 2px;
  background: transparent; text-align: left;
  font-family: var(--f-device); font-size: 0.76rem; line-height: 1.3;
}
.pn-nav-btn:hover { background: #f4f4f0; }
.pn-nav-btn[aria-current] { background: #fff; box-shadow: inset 3px 0 0 var(--red); }
.pn-nav-btn:focus-visible { outline-offset: -3px; }
.pn-nav-ver { font-weight: 500; color: var(--accent); }

/* The page itself */
.pn-pane {
  position: relative; /* entries measure their offsetTop from here */
  flex: 1; min-width: 0;
  overflow-y: auto;
  padding: 18px 22px 26px;
  scrollbar-width: thin; scrollbar-color: #8b8f94 #e2e3de;
}
.pn-pane:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
@container screen (max-width: 420px) {
  .pn { font-size: 0.8125rem; }
  .pn-pane { padding: 14px 14px 22px; }
}
.pn-head { margin-bottom: 4px; }
.pn-title { margin: 0; font-size: 1.5rem; font-weight: 500; line-height: 1.15; }
.pn-sub { margin: 4px 0 0; color: var(--ink-soft); }
.pn-current {
  display: inline-block; margin: 10px 0 0; padding: 1px 8px;
  border: 1.5px solid var(--go); color: var(--go); font-weight: 500;
}

.pn-entry { margin-top: 18px; padding-top: 16px; border-top: 1px dashed #aeb0ab; }
.pn-entry.is-next {
  padding: 14px 16px 16px;
  background: #fff; border: 2px solid var(--ink);
  box-shadow: 3px 4px 0 var(--ink);
}
.pn-h { margin: 0; font-size: 1.05rem; font-weight: 500; line-height: 1.3; }
.pn-h:focus { outline: none; }
.pn-h:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pn-ver { color: var(--accent); }
.pn-tag {
  display: inline-block; margin-left: 0.6em; padding: 0 0.45em;
  border: 1.5px solid var(--go); color: var(--go);
  font-size: 0.68rem; line-height: 1.5; text-transform: uppercase; letter-spacing: 0.08em; vertical-align: 0.15em;
}
.pn-org { margin: 4px 0 0; }
.pn-meta { margin: 0; font-size: 0.8rem; color: var(--ink-soft); }

.pn-k {
  margin: 12px 0 3px;
  font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em;
}
.pn-list { list-style: none; margin: 0; padding: 0; }
.pn-list li { position: relative; margin: 3px 0; padding-left: 1.5em; }
.pn-list li::before { position: absolute; left: 0.2em; top: 0; font-weight: 500; }
.k-buffs { color: var(--go); }
.k-fixes { color: var(--accent); }
.k-issues { color: var(--red); }
.pn-list li { color: var(--ink); }
.k-buffs li::before { content: "+"; color: var(--go); }
.k-fixes li::before { content: "~"; color: var(--accent); }
.k-issues li::before { content: "!"; color: var(--red); }

.pn-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.pn-btn {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px;
  border: 2px solid var(--ink); background: #fff; color: var(--ink);
  font-family: var(--f-slide); font-weight: 700; font-size: 0.9rem; text-decoration: none;
}
.pn-btn:hover { background: #fff6e6; }
.pn-btn-main { background: var(--accent); border-color: var(--accent); color: #fff; }
.pn-btn-main:hover { background: #26475a; }
.pn-end { margin: 26px 0 0; font-size: 0.78rem; color: var(--ink-soft); text-align: center; }

.table-hint { text-align: center; }