:root{
  --bg:#f5efe3; --paper:#fffdf8; --ink:#1e2a30; --muted:#6b7680; --line:#e2d9c8;
  --accent:#c9432a; --teal:#186f8c; --ok:#2f8f5b; --bad:#c9432a;
  --shadow:0 18px 40px -18px rgba(30,42,48,.35);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:16px/1.5 "Segoe UI",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;padding:0 clamp(16px,3vw,40px) 40px}
kbd{font:600 .7em/1 ui-monospace,Consolas,monospace;padding:2px 5px;border:1px solid currentColor;border-radius:4px;opacity:.55;margin-left:.4em}
button{font:inherit;color:inherit;cursor:pointer}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0 10px;flex-wrap:wrap}
h1{margin:0;font:700 26px/1 Georgia,"Times New Roman","Noto Serif SC",serif;letter-spacing:-.02em}
h1 span{color:var(--accent);margin-left:.35em;font-style:italic;font-weight:400}
.modes{display:flex;gap:4px;background:rgba(30,42,48,.06);padding:4px;border-radius:12px}
.modes button{border:0;background:transparent;padding:8px 16px;border-radius:9px;font-weight:600;color:var(--muted)}
.modes button.active{background:var(--paper);color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.08)}

/* admin */
.admin-only{display:none !important}
body.admin .admin-only{display:revert !important}
body.admin .modes .admin-only{display:inline-block !important}
body.admin .prob.admin-only{display:block !important}
.admin-btn{border:0;background:rgba(30,42,48,.06);color:var(--muted);border-radius:12px;padding:12px 16px;font-weight:600;font-size:inherit;line-height:1.5}
.admin-btn:hover{color:var(--ink)}
body.admin .admin-btn{background:var(--accent);color:#fff}
body:not(.admin) .pick-layout{grid-template-columns:1fr}
.modal{position:fixed;inset:0;background:rgba(30,42,48,.45);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal[hidden]{display:none}
.modal-box{background:var(--paper);border-radius:16px;padding:22px 24px;width:min(360px,100%);box-shadow:var(--shadow)}
.modal-box h3{margin:0 0 12px;font-size:17px}
.modal-box input{font:inherit;width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff}
.modal-box .err{color:var(--bad);font-size:13px;min-height:1.2em;margin:6px 0 10px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px}

.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:10px 0 18px;border-bottom:1px solid var(--line)}
.topics{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:5px 12px;font-size:14px;color:var(--muted)}
.chip.on{border-color:var(--teal);background:var(--teal);color:#fff}
.chip small{opacity:.7;margin-left:4px}
.chip.util{border-style:dashed;background:transparent}
.options{display:flex;align-items:center;gap:14px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper)}
.seg button{border:0;background:transparent;padding:6px 12px;font-size:14px;color:var(--muted)}
.seg button.active{background:var(--ink);color:#fff}
.pool{font-size:13px;color:var(--muted)}
.slider{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--muted);white-space:nowrap}
.slider b{color:var(--ink);min-width:1.2em;text-align:center}
.slider input[type=range]{width:110px;accent-color:var(--teal)}
.face .word.multi{font-size:clamp(22px,4vw,44px);line-height:1.3;display:flex;flex-direction:column;gap:.15em}
.face .word.multi.n5,.face .word.multi.n6{font-size:clamp(18px,3.2vw,34px);gap:.1em}
.face .word.multi span::before{content:counter(w) ". ";counter-increment:w;color:var(--muted);font-size:.6em;font-weight:400;vertical-align:.25em}
.face .word.multi{counter-reset:w}

.mode{display:none;padding-top:28px}
.mode.active{display:block}

/* card */
.card-wrap{perspective:1600px;max-width:820px;margin:0 auto}
.card{position:relative;height:clamp(260px,40vh,380px);cursor:pointer;transition:transform .55s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.card.flipped{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;background:var(--paper);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center}
.face.back{transform:rotateY(180deg);background:#fff7ec}
.face .tag{position:absolute;top:16px;left:20px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);font-weight:700}
.face .side{position:absolute;top:16px;right:20px;font-size:12px;color:var(--muted)}
.face .word{font:600 clamp(34px,6.5vw,72px)/1.15 Georgia,"Times New Roman","Noto Serif SC","Songti SC",serif;letter-spacing:-.01em;word-break:break-word}
.face.back .word{color:var(--accent)}
.face .hint{position:absolute;bottom:14px;font-size:12px;color:var(--muted)}
.card.empty .face .word{color:var(--muted);font-size:24px}

.actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:22px}
.btn{border:1px solid var(--line);background:var(--paper);padding:10px 18px;border-radius:12px;font-weight:600;transition:transform .08s}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.big{padding:12px 26px;font-size:18px;background:var(--accent);border-color:var(--accent)}
.btn.ok{color:var(--ok);border-color:var(--ok)}
.btn.bad{color:var(--bad);border-color:var(--bad)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.link{border:0;background:none;color:var(--teal);text-decoration:underline;font-size:13px;padding:0 4px}

/* pick mode */
.pick-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:28px;align-items:start}
.spotlight{text-align:center;margin-bottom:18px}
.spotlight .label{font-size:13px;color:var(--muted);letter-spacing:.08em}
.spotlight .name{font:700 clamp(40px,7vw,80px)/1.1 Georgia,"Times New Roman",serif;min-height:1.1em;color:var(--accent)}
.spotlight .name.rolling{color:var(--muted);opacity:.7}
.spotlight .name.landed{animation:pop .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{0%{transform:scale(.7);opacity:.2}100%{transform:scale(1);opacity:1}}
.prob{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:14px 16px;position:sticky;top:12px}
.prob-head{display:flex;justify-content:space-between;align-items:center;font-weight:700;margin-bottom:8px}
.chk{font-weight:400;font-size:13px;color:var(--muted);display:flex;gap:4px;align-items:center}
.prob table{width:100%;border-collapse:collapse;font-size:13px}
.prob td,.prob th{padding:4px 4px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.prob th{color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.prob td.num{text-align:right;font-variant-numeric:tabular-nums}
.prob tr.out{color:var(--muted);opacity:.5}
.prob tr.drawn td{text-decoration:line-through;color:var(--muted)}
.prob tr.hot td{background:#fff1e8;font-weight:700}
.bar{display:inline-block;height:8px;background:var(--teal);border-radius:4px;vertical-align:middle;margin-right:6px}
.note{font-size:12px;color:var(--muted);margin:10px 0 0}

.log-wrap{max-width:820px;margin:26px auto 0}
.log-head{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:6px}
.log{margin:8px 0 0;padding-left:22px;font-size:14px;columns:2;column-gap:30px}
.log li{break-inside:avoid;padding:2px 0}
.log .r-ok{color:var(--ok);font-weight:700}
.log .r-bad{color:var(--bad);font-weight:700}

/* seats */
.seats-wrap{max-width:1000px;margin:0 auto}
.seats-actions{margin-top:0}
.seats-note{text-align:center}
.room{display:flex;flex-direction:column;gap:18px;margin:18px 0}
.room.flip{flex-direction:column-reverse}
.podium{align-self:center;padding:8px 60px;border:1px solid var(--line);border-radius:10px;background:var(--ink);color:#fff;font-weight:600;letter-spacing:.3em;font-size:14px}
.rows{display:flex;flex-direction:column;gap:12px}
.room.flip .rows{flex-direction:column-reverse}
.seat-row{display:flex;gap:clamp(12px,3vw,36px);align-items:stretch}
.room.flip .seat-row,.room.flip .desk{flex-direction:row-reverse}
.seat-row .rno{width:2.2em;flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted)}
.desk{flex:1;display:flex;gap:3px;background:var(--line);padding:3px;border-radius:14px;min-width:0}
.seat{flex:1;min-width:0;border:0;background:var(--paper);border-radius:11px;padding:clamp(10px,2vh,20px) 6px;font:600 clamp(13px,1.7vw,20px)/1.2 Georgia,"Times New Roman","Noto Serif SC",serif;color:var(--ink);text-align:center;word-break:break-word;min-height:3.2em}
.seat.empty{background:transparent;color:var(--muted);font-weight:400;font-size:12px}
.seat.sel{outline:3px solid var(--accent);outline-offset:-3px}
.seat.rolling{color:var(--muted)}
.seat.warn{box-shadow:inset 0 0 0 2px var(--bad)}
.seat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative;cursor:grab;user-select:none}
.seat .big{font-size:clamp(15px,2vw,24px);line-height:1.15}
.seat .small{font:400 clamp(10px,1.1vw,13px)/1.2 "Segoe UI",system-ui,sans-serif;color:var(--muted)}
.seat .lock{position:absolute;top:4px;right:6px;font-size:11px}
.seat.locked{background:#fff3e6}
.seat.dragging{opacity:.4}
.seat.dragover{outline:3px dashed var(--teal);outline-offset:-3px}
.spotlight .name{display:flex;flex-direction:column;align-items:center;line-height:1.05}
.spotlight .name .small{font:400 clamp(16px,2.4vw,26px)/1.3 "Segoe UI",system-ui,sans-serif;color:var(--muted);margin-top:.15em}
.seat-rules{margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
.seat-rules h3{margin:0 0 10px;font-size:16px}
.seat-rules h3 .note{font-weight:400;margin:0}
.rules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.rules-grid label{font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:4px}
.rules-grid textarea{font:inherit;font-size:14px;color:var(--ink);padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--paper);resize:vertical}
@media (max-width:820px){.rules-grid{grid-template-columns:1fr}}

/* settings */
.settings{max-width:820px;margin:0 auto}
.settings .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.settings input[type=number],.settings input[type=text]{font:inherit;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--paper);width:100%}
.settings .row input[type=number]{width:90px;margin-left:8px}
.roster{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--line)}
.roster th,.roster td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left}
.roster th{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.roster td.status{font-size:12px;color:var(--muted);white-space:nowrap}
.roster tr.out{background:#f7f3ea}
.roster .del{border:0;background:none;color:var(--muted);font-size:16px}
.import{margin-top:32px;padding-top:20px;border-top:1px solid var(--line)}
.import h3{margin:0 0 6px;font-size:17px}
.import textarea{font:inherit;width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);margin:10px 0;resize:vertical}
.import .row{margin-bottom:10px}
#importTable{margin:8px 0 12px}
.import .cols{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.import .cols select{font:inherit;padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);margin-left:4px}
#importTable td.num{text-align:right;font-variant-numeric:tabular-nums}
#importTable td.skip{color:var(--muted)}

@media (max-width:820px){
  .pick-layout{grid-template-columns:1fr}
  .prob{position:static}
  .log{columns:1}
}