:root{
  --paper:#fbf6e9; --paper2:#fffdf7; --ink:#33291e; --apple:#d1462f; --apple-dk:#a3341f;
  --chalk:#2f7d5b; --sky:#4a86c5; --pencil:#f2b544; --line:#e4d4b4;
}
*{ box-sizing:border-box; }
html,body{ margin:0; min-height:100%; }
body{ font-family:"Trebuchet MS",system-ui,sans-serif; color:var(--ink);
  background:repeating-linear-gradient(0deg, transparent 0 31px, rgba(74,134,197,.07) 31px 32px), linear-gradient(180deg,#fdfaf1,var(--paper)); }

.topbar{ display:flex; align-items:center; gap:14px; padding:10px 18px; background:#fff9ee; border-bottom:2px solid var(--line); position:sticky; top:0; z-index:5; }
.brand{ font-family:"Rockwell","Bookman Old Style",serif; font-weight:700; color:var(--apple); font-size:1.25rem; }
.proto{ font-size:.72rem; letter-spacing:.03em; color:#8a7a5e; background:#fff2c9; border:1px dashed rgba(163,52,31,.4); padding:3px 9px; border-radius:999px; }

/* setup */
#setup{ max-width:560px; margin:40px auto; padding:0 16px; }
.panel{ background:var(--paper2); border:1px solid var(--line); border-radius:16px; padding:26px 28px; box-shadow:0 10px 26px rgba(51,41,30,.1); }
.panel h1{ font-family:"Rockwell",serif; color:var(--apple); margin:.1em 0 .2em; }
.muted{ color:#6b5b45; font-size:.9rem; }
.row{ display:flex; align-items:center; gap:10px; margin:16px 0; font-weight:700; }
select,input[type=text]{ font:inherit; padding:6px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; }
#seatConfig{ display:flex; flex-direction:column; gap:8px; margin:8px 0 18px; }
.seatrow{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px 12px; }
.dot{ width:16px; height:16px; border-radius:50%; box-shadow:inset 0 0 0 2px rgba(0,0,0,.15); }
.seatrow input{ flex:1; }
.toggle{ font-size:.8rem; font-weight:700; border:1px solid var(--line); border-radius:999px; padding:4px 12px; cursor:pointer; background:#fff; }
.toggle.ai{ background:var(--sky); color:#fff; border-color:var(--sky); }
button.primary{ font:inherit; font-weight:700; color:#fff; background:var(--apple); border:none; border-radius:999px; padding:11px 22px; cursor:pointer; box-shadow:0 4px 0 var(--apple-dk); }
button.primary:active{ transform:translateY(2px); box-shadow:0 2px 0 var(--apple-dk); }
button.ghost{ font:inherit; background:#fff; border:1px solid var(--line); border-radius:999px; padding:5px 14px; cursor:pointer; }

/* status */
.statusbar{ display:flex; gap:10px; align-items:center; padding:12px 18px; flex-wrap:wrap; }
.chip{ background:var(--paper2); border:1px solid var(--line); border-radius:999px; padding:6px 14px; font-weight:700; font-size:.85rem; }
.chip.teacher{ background:#eaf5ef; border-color:#bfe0cf; color:var(--chalk); }

.cols{ display:grid; grid-template-columns:1fr 340px; gap:18px; padding:0 18px 40px; align-items:start; }
@media (max-width:900px){ .cols{ grid-template-columns:1fr; } }

/* board */
.board{ display:flex; flex-direction:column; gap:10px; }
.brow{ display:grid; gap:10px; }
.room{ position:relative; background:var(--paper2); border:1.5px solid var(--line); border-radius:12px; padding:10px 12px 34px; min-height:96px; }
.room.hall{ background:#eef3fb; border-color:#c7d8ef; }
.room.active{ border-color:var(--apple); box-shadow:0 0 0 2px rgba(209,70,47,.25); background:#fff6f3; }
.room .rname{ font-family:"Rockwell",serif; font-weight:700; color:var(--apple-dk); font-size:.95rem; }
.room .rteach{ font-size:.72rem; color:var(--chalk); font-weight:700; }
.room .rnum{ position:absolute; top:8px; right:10px; font-size:.7rem; color:#b3a488; }
.room .pawns{ position:absolute; left:10px; bottom:9px; display:flex; gap:5px; flex-wrap:wrap; }
.pawn{ width:18px; height:18px; border-radius:50%; box-shadow:inset 0 0 0 2px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.2); font-size:0; }
.pawn.you{ box-shadow:inset 0 0 0 2px rgba(0,0,0,.18), 0 0 0 3px var(--pencil); }
.monitor{ position:absolute; right:9px; bottom:8px; font-size:1.15rem; filter:drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.badge-active{ position:absolute; top:8px; left:10px; font-size:.62rem; font-weight:700; color:#fff; background:var(--apple); border-radius:999px; padding:1px 7px; }

/* scoreboard */
.scoreboard{ display:flex; flex-direction:column; gap:6px; }
.scorerow{ display:flex; align-items:center; gap:9px; background:var(--paper2); border:1px solid var(--line); border-radius:10px; padding:7px 11px; }
.scorerow.turn{ border-color:var(--apple); box-shadow:0 0 0 2px rgba(209,70,47,.18); }
.scorerow .nm{ flex:1; font-weight:700; }
.scorerow .ai{ font-size:.64rem; background:var(--sky); color:#fff; border-radius:999px; padding:1px 7px; }
.scorerow .pp{ font-family:"Rockwell",serif; font-weight:700; color:var(--apple-dk); }
.scorerow .loc{ font-size:.7rem; color:#8a7a5e; }

/* turn panel */
.turnpanel{ background:var(--paper2); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.turnpanel h3{ margin:.1em 0 .4em; font-family:"Rockwell",serif; color:var(--apple); }
.acts{ display:flex; flex-wrap:wrap; gap:8px; }
.acts button, .opt{ font:inherit; font-size:.85rem; font-weight:700; cursor:pointer; border:1px solid var(--line); background:#fff; border-radius:9px; padding:8px 12px; }
.acts button.go{ background:var(--chalk); color:#fff; border-color:var(--chalk); }
.acts button:disabled{ opacity:.4; cursor:default; }
.sub{ margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); }
.sub .opt{ margin:4px 4px 0 0; }
.hint{ font-size:.78rem; color:#6b5b45; margin:4px 0 0; }
.hand{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.card{ font-size:.76rem; font-weight:700; border-radius:8px; padding:6px 9px; border:1px solid var(--line); background:#fff; cursor:pointer; }
.card.assignment{ background:#eef7f0; border-color:#c3e2cd; }
.card.playable{ box-shadow:0 0 0 2px var(--pencil); }
.card small{ display:block; font-weight:400; color:#8a7a5e; }

/* log */
.log{ background:#20242b; color:#dfe6ee; border-radius:12px; padding:10px 12px; font-size:.78rem; line-height:1.5; max-height:230px; overflow:auto; }
.log .l{ margin:2px 0; } .log .l b{ color:#ffd9a0; }

/* modal */
.modal{ position:fixed; inset:0; background:rgba(30,24,16,.5); display:flex; align-items:center; justify-content:center; z-index:20; }
.modal[hidden]{ display:none; }
.modal-card{ background:var(--paper2); border-radius:16px; padding:24px 28px; max-width:460px; text-align:center; box-shadow:0 20px 50px rgba(0,0,0,.4); }
.modal-card h2{ font-family:"Rockwell",serif; color:var(--apple); margin:.1em 0 .3em; }