/* Comedy art direction: presentation only, no game geometry or rules. */
:root{--ui-bg:#24212b;--ui-panel:#302c35;--ui-raised:#3d3741;--ui-line:#736254;--ui-gold:#ffcf45;--ui-text:#fff5df;--ui-muted:#d9c9b9;--ink:#29232c;--paper:#fff1cc;--red:#f36142;--ui-radius:14px}
body{background-color:var(--ui-bg);background-image:radial-gradient(circle at 50% 0,#a143292b,transparent 55%),radial-gradient(#f4ce8b12 1px,transparent 1px);background-size:auto,12px 12px;padding-top:22px}
header{padding:10px 6px 20px;gap:24px}h1{position:relative;isolation:isolate;font-family:'Microsoft YaHei','PingFang SC',sans-serif;font-size:clamp(28px,3.4vw,48px);font-weight:950;letter-spacing:-1px;line-height:1.25;color:var(--paper);padding:8px 20px 12px;text-shadow:3px 3px 0 var(--ink);transform:rotate(-2deg);background:var(--red);border:3px solid var(--ink);border-radius:5px 16px 5px 12px;box-shadow:5px 5px 0 var(--ui-gold)}
header .controls{gap:8px;justify-content:flex-end}.controls button{border:2px solid #71616a;background:#342e39;border-radius:8px;padding:9px 15px;font-size:14px;font-weight:800;box-shadow:0 3px 0 #15121a}.controls button:hover{background:#4a3d45;border-color:#ffd25a;transform:translateY(-2px)}.controls button.hl{background:var(--ui-gold);color:var(--ink);border-color:var(--ink)}.controls button:active{transform:translateY(2px);box-shadow:none}
#boardCol{gap:14px}#boardWrap{border:3px solid #211923;box-shadow:0 0 0 1px #e5b87966,0 10px 24px #140d1866;border-radius:15px}
.panel{background:var(--ui-panel);border:1px solid #736254;border-radius:14px;box-shadow:0 4px 0 #19161f}#matchStatus>.panel{background:var(--paper);color:var(--ink);border:2px solid var(--ink);padding:14px 22px;gap:5px 24px;box-shadow:4px 4px 0 #bc543d}
#turnInfo{font-size:22px;font-weight:900;line-height:1.5}#matchStatus #hint{color:#785339;font-size:14px;font-weight:600}#matchStatus #netStatus{color:#665853}#turnTimer{height:9px;border:1px solid #cbb890;background:#dfd0ad;border-radius:3px;overflow:hidden}#turnTimerBar{background:var(--red)}#turnTimerTxt{color:#6c4936;font-size:13px;font-weight:700}
#skillPanel{position:relative;background:#302b34;padding:20px;border:2px solid #87715a}#skillPanel h3{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:900;color:var(--paper);margin-bottom:16px}#skillPanel h3::before{content:'';width:7px;height:24px;background:var(--red);box-shadow:5px 0 0 #f4cc48;transform:skew(-10deg);margin-right:5px}
#skillList{gap:14px}#skillList .skill{position:relative;isolation:isolate;overflow:hidden;align-items:center;align-content:start;min-height:145px;padding:17px 15px 13px;background:var(--paper)!important;color:var(--ink);border:2px solid var(--ink);border-radius:5px 14px 5px 14px;box-shadow:3px 4px 0 #a68345;gap:8px;transition:transform .15s,box-shadow .15s}
#skillList .skill::before{content:'';position:absolute;right:-10px;top:-16px;width:76px;height:76px;z-index:-1;border:13px solid #e5ab3b29;border-radius:50%}#skillList .skill:nth-child(2)::before{border-radius:4px;transform:rotate(25deg);border-color:#ed735329}#skillList .skill:nth-child(3)::before{border-style:dashed}#skillList .skill:nth-child(4)::before{border-radius:0;border-width:0;background:repeating-linear-gradient(-45deg,transparent 0 7px,#dc6b4922 7px 12px)}
#skillList .skill:hover{background:#fff7df!important;border-color:#f6bf41;transform:translateY(-3px);box-shadow:3px 7px 0 #a68345}#skillList .skill .ico{display:grid;place-items:center;flex:none;width:43px;height:43px;font-size:27px;background:#f0c35a;border:1px solid #bc8e3d;border-radius:50%;line-height:1}#skillList .skill .nm{font-size:19px;letter-spacing:.02em;font-weight:900;line-height:1.4}#skillList .skill .ds{font-size:13px;color:#705c4c;line-height:1.65}#skillList .skill .pill{background:#e7d7b4;color:#5e4a36;border:0;border-radius:4px;font-size:12px;padding:3px 7px}#skillList .skill .cardState{border-top:1px dashed #b99c6d;color:#a3442e;font-size:13px;font-weight:800;padding-top:9px}
#skillList .skill[data-state='targeting']{background:#ffe39a!important;border-color:#f16644;outline-color:#ffc83e}#skillList .skill[data-state='used']{background:#c9beac!important;opacity:.65;box-shadow:none}#skillList .skill[data-state='blocked'],#skillList .skill[data-state='silenced'],#skillList .skill[data-state='waiting'],#skillList .skill[data-state='busy']{background:#dfd4bd!important;filter:none;box-shadow:2px 3px 0 #615343}#skillList .skill[data-state='used'] .cardState{color:#5b5149}#skillList .skill[data-state='silenced'] .cardState{color:#9c342b}
#progress,#oppSkills{margin-top:12px;color:#ded0be;line-height:1.8}#oppSkills .chip{background:#473c43;color:#fff0ce;border-color:#8c725d;border-radius:4px}#tipBar{background:#3f3434;border:1px dashed #b58a53;color:#ead9bc;padding:12px 16px;border-radius:8px}#legend{color:#d6c3af}
#interactionDock #actionBar,#interactionDock #shoutBar,#interactionDock #misQuiz{background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-left:7px solid var(--red);border-radius:8px;box-shadow:3px 4px 0 #ae7b40;padding:16px}#interactionDock .sTitle,#interactionDock .txt,#interactionDock #misQuiz .misQ{color:var(--ink);font-weight:900}#interactionDock .sSub,#interactionDock #misQuiz .misQh{color:#74533e}#interactionDock button,#interactionDock #misQuiz .misOpt{background:var(--ui-gold);border:2px solid var(--ink);color:var(--ink);border-radius:6px;font-weight:800}#interactionDock button.ghost{background:transparent;color:#6b4c3b;border-color:#ad9473}#interactionDock #misQuiz .misOpt{background:#fffbeb}
#restoreCast,#restoreCast.release{background:#302631f5;border:3px solid #ffce46;border-radius:7px 24px 7px 18px;box-shadow:5px 5px 0 #ee6444,inset 0 0 0 4px #302631}#restoreCast .castHeading{font-family:'Microsoft YaHei',sans-serif;font-weight:950;color:#ffdb60;border-bottom:2px dashed #b49158;letter-spacing:.02em}#restoreName{border-top:2px dashed #b49158;color:#fff0c7;font-weight:900}#restoreDesc{color:#ebd2b6}
.statusChip{background:#3e3838;border-color:#a28251;border-radius:5px;color:#ffeed2}.statusMore{color:#ffd566;border-color:#a28251}#restoreState .statusLabel{color:#ddc5a4}#battleReport{border-top:1px dashed #8d715b;margin-top:6px}#battleReport summary{color:#d9c2a3;font-weight:700}#logStrip{border:0;background:#2b2630;box-shadow:none}#log>div{background:#342e37;border-radius:5px;color:#ddcdbb}
.modal{background:#19131de6;backdrop-filter:blur(5px)}.modal .box{background:var(--paper);border:3px solid var(--ink);border-radius:8px 24px 8px 20px;color:var(--ink);box-shadow:7px 7px 0 #ee6444;padding:25px}.modal .ti{font-family:'Microsoft YaHei',sans-serif;color:var(--ink);font-size:27px;font-weight:950;letter-spacing:0;border-bottom:3px solid #f0bf48;padding-bottom:12px;margin-bottom:14px}.modal .su,.modal .su b{color:#5f4c40}.modal .su .hl,.setGroup h4{color:#a83f2d}.modal button{background:var(--ui-gold);color:var(--ink);border:2px solid var(--ink);border-radius:6px;box-shadow:2px 3px 0 #b8924e;font-size:15px}.modal button.secondary{color:var(--ink);border-color:#ae9471}.modal button:active{transform:translateY(2px);box-shadow:none}#setModal .setRow button,#setModal .setRow select,#volWrap{background:#eadabb;color:#473a31;border-color:#bda481}#joinCode,#roomWait .big{background:#fff9e8;color:var(--ink);border:2px solid #b89b71}#netMsg,.readingTimerNote{color:#715b46}footer{color:#aa958b;font-size:12px;padding-top:12px}
@media(max-width:1000px){#skillList .skill{min-height:135px}}
@media(max-width:600px){body{padding-top:12px}header{gap:14px;padding:5px 1px 16px}h1{font-size:29px;padding:6px 13px 9px;letter-spacing:0}header .controls{gap:6px;justify-content:flex-start;width:100%}.controls button{padding:7px 11px;min-height:42px;font-size:13px}#matchStatus>.panel{padding:12px 14px;gap:4px 12px}#turnInfo{font-size:18px}#matchStatus #hint{font-size:13px}#skillPanel{padding:14px 10px}#skillPanel h3{font-size:16px;margin-bottom:12px}#skillList{gap:10px}#skillList .skill{padding:12px 10px;min-height:155px;gap:7px}#skillList .skill .ico{width:32px;height:32px;font-size:22px}#skillList .skill .nm{font-size:17px}#skillList .skill .tx{min-width:60px}#skillList .skill .ds{font-size:12px}#skillList .skill .cardState{font-size:12px}#restoreCast,#restoreCast.release{border-width:2px;border-radius:8px;box-shadow:2px 2px 0 #ee6444}#restoreName{border-top:0;font-size:17px}.modal .box{padding:18px;box-shadow:4px 4px 0 #ee6444}.modal .ti{font-size:23px}#interactionDock #actionBar,#interactionDock #shoutBar,#interactionDock #misQuiz{padding:12px}}
@media(prefers-reduced-motion:reduce){#skillList .skill,.controls button{transition:none}#skillList .skill:hover,.controls button:hover{transform:none}}
#turnTimer i{background:#d49b24}#turnTimer.hot i{background:var(--red)}#ovClose{background:#eadabb!important;color:var(--ink)!important;box-shadow:2px 3px 0 #b8924e!important}#setModal .setRow button.hl{background:#ffd35b;color:#33272a;border-color:#9b733a}#skillList .skill:focus-visible{outline:3px solid #ffcf45;outline-offset:4px}.modal button:focus-visible,.modal select:focus-visible,.modal input:focus-visible{outline-color:#a74030}#sceneLoadNotice{background:#392e35;border-color:#ad8250}#restartConfirm .ti{margin-bottom:14px}#restartConfirm .su{color:#6a5141}
/* Compact turn strip: the countdown is secondary to the board. */
#matchStatus>.panel{grid-template-columns:minmax(0,1fr) auto;gap:0 16px;padding:10px 16px;min-height:48px;border-radius:9px;box-shadow:2px 3px 0 #bc543d}
#matchStatus #turnInfo{grid-column:1;grid-row:1;font-size:17px;line-height:1.5}
#matchStatus #turnTimer{display:none!important}
#matchStatus #turnTimerTxt{grid-column:2;grid-row:1;margin:0;font-size:14px;line-height:1.5;color:#76532f;font-weight:800;white-space:nowrap;padding:3px 9px;background:#e9d7ae;border-radius:5px}
#matchStatus:has(#turnTimer.hot) #turnTimerTxt{background:#f36142;color:#fff7e3}
#matchStatus #hint:empty{display:none}#matchStatus #hint:not(:empty){padding-top:6px}
#matchStatus #netStatus:not(.on){display:none}#matchStatus #netStatus.on{font-size:12px;padding-top:6px}
#matchStatus #chatRow:not(.show){display:none}
@media(max-width:600px){#matchStatus>.panel{padding:9px 12px;gap:0 8px;min-height:44px}#matchStatus #turnInfo{font-size:15px}#matchStatus #turnTimerTxt{font-size:12px;padding:3px 6px}}
/* Board-edge turn token, replacing the standalone status slab. */
#turnBadge{position:absolute;left:49.82%;top:41.870351%;transform:translate(-50%,-65%);z-index:12;display:flex;align-items:center;gap:10px;max-width:85%;min-height:40px;padding:7px 13px 7px 9px;background:#fff1cc;border:2px solid #392b2a;border-radius:8px 13px 8px 13px;box-shadow:2px 3px 0 #ae5b35;pointer-events:none;white-space:nowrap}
#turnBadge::before{content:'';width:24px;height:24px;flex:none;background:radial-gradient(circle at 35% 25%,#666,#24232a 65%);border:1px solid #16151a;border-radius:50%;box-shadow:0 2px 0 #0004}
#turnBadge[data-color='white']::before{background:radial-gradient(circle at 35% 25%,#fff,#eee5d4 70%);border-color:#b3a893}
#turnBadge #turnInfo{font-size:15px;line-height:1.4;font-weight:900;color:#392c29;grid-area:auto}
#turnBadge #turnTimer{display:none!important}#turnBadge #turnTimerTxt{font-size:12px;color:#806044;border-left:1px solid #cdb78b;padding-left:9px;margin:0;line-height:1.4;font-weight:700}
#turnBadge:has(#turnTimer.hot) #turnTimerTxt{color:#b82e23}
#turnBadge[data-ended='true']::before{display:none}
#matchStatus>.panel{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;min-height:0;padding:0 4px;border:0;background:none;box-shadow:none;border-radius:0}
#matchStatus #hint:not(:empty){padding:5px 0;color:#efd4a5;font-size:13px}#matchStatus #netStatus.on{color:#dbc4ac;padding:4px 0}
#matchStatus:not(:has(#hint:not(:empty))):not(:has(#netStatus.on)):not(:has(#chatRow.show)):not(:has(#tipBar:not([style*='display:none']))):not(:has(.statusChip)){display:none!important}
#turnBadge.turnFlip::before{animation:turnTokenFlip .32s ease-out}
@keyframes turnTokenFlip{0%{transform:perspective(100px) rotateY(100deg) scale(.8)}75%{transform:perspective(100px) rotateY(-12deg) scale(1.08)}100%{transform:none}}
@media(max-width:600px){#turnBadge{left:50%;top:18.032787%;gap:7px;min-height:34px;padding:5px 9px 5px 7px;border-radius:7px 11px 7px 11px}#turnBadge::before{width:20px;height:20px}#turnBadge #turnInfo{font-size:13px}#turnBadge #turnTimerTxt{font-size:11px;padding-left:7px}}
@media(prefers-reduced-motion:reduce){#turnBadge.turnFlip::before{animation:none}}
/* Questions must appear in the viewport, independently of board scroll position. */
#quizStage{display:none;position:fixed;inset:0;z-index:1600;background:#1b1322c9;padding:20px;align-items:center;justify-content:center;overscroll-behavior:contain}
#quizStage.show{display:flex}
#quizStage #misQuiz{position:relative;inset:auto;transform:none;display:none;width:min(100%,440px);max-height:calc(100dvh - 40px);overflow-y:auto;background:#fff1cc;border:3px solid #29232c;border-radius:9px 22px 9px 18px;box-shadow:6px 6px 0 #f36142;padding:22px;color:#392c29;animation:none}
#quizStage #misQuiz.show{display:block}#quizStage #misQuiz .misQh{font-size:17px;font-weight:900;color:#a23c2d}#quizStage #misQuiz .misQ{font-size:20px;line-height:1.6;margin:12px 0 18px}#quizStage #misQuiz .misOpt{min-height:48px;padding:12px;font-size:16px;line-height:1.5;margin:9px 0;border:2px solid #8e714a;border-radius:7px;background:#fff9e8;color:#392c29}#quizStage #misQuiz .misOpt:focus-visible{outline:3px solid #b03c29;outline-offset:2px}#quizStage #misQuiz .misBar{background:#decb9f;height:6px}#quizStage #misQuiz .misBar i{background:#de8731}