/* iPad table: a fixed 1366 × 1024 stage, scaled to fit the screen. */
html, body { height: 100%; overflow: hidden; background: #cfa97f; overscroll-behavior: none; }
#viewport { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#stage {
  width: 1366px; height: 1024px; flex: none; position: relative; overflow: hidden; transform-origin: center center;
  background: repeating-linear-gradient(90deg, #d8b48b 0px, #d8b48b 118px, #cfa97f 118px, #cfa97f 120px), #d8b48b;
}
#stage::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 40% 50%, rgba(255,240,215,.35), rgba(80,50,20,.22) 80%); pointer-events: none; }

.topbar { position: absolute; left: 0; top: 0; right: 0; height: 64px; background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 4px 14px rgba(40,30,20,.08); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; z-index: 5; }
.topbar .brand { display: flex; align-items: center; gap: 12px; }
.topbar .brand b { font-size: 17px; font-weight: 800; }
.topbar .brand .sep { color: #b7b9bd; }
.topbar .brand .sub { font-size: 15px; font-weight: 500; color: var(--ink-3); }
.icon-btn { width: 44px; height: 44px; border: 1px solid #e4e4e1; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; }
.stat { display: flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: 10px; background: #f4f4f2; }
.stat span { font-size: 11px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.stat b { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }

.guide { position: absolute; left: 50%; top: 84px; transform: translateX(-50%); z-index: 4; }

.lobby-main { position: absolute; left: 48px; top: 148px; width: 860px; display: flex; flex-direction: column; gap: 24px; z-index: 1; }
.join-card { background: #fff; border-radius: 18px; padding: 28px; box-shadow: 0 10px 28px rgba(40,30,20,.22); display: flex; gap: 32px; align-items: center; }
.qr { width: 220px; height: 220px; flex: none; border-radius: 12px; display: block; background: #fff; }
.join-card .code-tile { width: 78px; height: 96px; font-size: 54px; }
.join-card p { margin: 0; font-size: 15px; color: var(--ink-2); line-height: 1.5; max-width: 46ch; }
.on-wood { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.seats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.seat { background: #fff; border-radius: 14px; padding: 14px; display: flex; align-items: center; gap: 12px; box-shadow: 0 6px 16px rgba(40,30,20,.16); min-height: 70px; border: 0; text-align: left; color: var(--ink); font-size: inherit; }
.seat .dot { width: 16px; height: 16px; }
.seat .who { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.seat .who b { font-size: 17px; font-weight: 800; }
.seat .who small { font-size: 12px; color: var(--ink-3); }
.seat .ok { font-size: 12px; font-weight: 700; color: var(--green); }
.seat .asleep { font-size: 12px; font-weight: 700; color: var(--amber-ink); }
.level-btn { align-self: flex-start; border: 0; background: none; padding: 0; font-size: 12px; color: var(--ink-3); text-decoration: underline dotted; text-underline-offset: 3px; }
.add-seat { grid-column: span 2; height: 56px; border-radius: 14px; border: 2px dashed rgba(255,255,255,.9); background: rgba(60,40,20,.2); color: #fff; font-weight: 700; font-size: 15px; }

.setup { position: absolute; right: 16px; top: 88px; width: 410px; padding: 22px; background: #fff; border-radius: 16px; box-shadow: 0 10px 28px rgba(40,30,20,.22); display: flex; flex-direction: column; gap: 20px; z-index: 2; }
.setup h2 { margin: 0; font-size: 20px; font-weight: 800; }
.group { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; gap: 8px; }
.col { display: flex; flex-direction: column; gap: 8px; }
.problem { margin: 0; font-size: 13px; font-weight: 600; color: var(--amber-ink); text-align: center; }

.play-panel { position: absolute; left: 112px; top: 160px; width: 840px; padding: 36px; background: #fff; border-radius: 18px; box-shadow: 0 14px 30px rgba(60,35,10,.35); display: flex; flex-direction: column; gap: 18px; }
.play-panel h1 { margin: 0; font-size: 34px; font-weight: 800; }
.play-panel p { margin: 0; font-size: 17px; color: var(--ink-2); line-height: 1.5; }
.players { position: absolute; right: 16px; top: 88px; width: 360px; padding: 20px; background: #fff; border-radius: 16px; box-shadow: 0 10px 28px rgba(40,30,20,.2); display: flex; flex-direction: column; gap: 10px; }
.players h2 { margin: 0; font-size: 18px; font-weight: 800; display: flex; justify-content: space-between; align-items: baseline; }
.players h2 small { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.prow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: #f6f6f4; }
.prow b { flex: 1; font-size: 15px; }
.tag-asleep { font-size: 11px; font-weight: 600; color: var(--amber-ink); background: #fbefd2; padding: 3px 8px; border-radius: 999px; }
.wood-hint { position: absolute; left: 112px; bottom: 28px; width: 620px; padding: 8px 14px; border: 1.5px dashed rgba(255,255,255,.85); border-radius: 10px; color: #fff; font-size: 13px; font-weight: 600; background: rgba(60,40,20,.3); }

.notice { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 9; }
.notice div { background: #fff; border-radius: 18px; padding: 32px 40px; box-shadow: 0 14px 30px rgba(60,35,10,.35); font-size: 20px; font-weight: 700; }