body{padding:12px 12px 24px;background:#161e28}main{display:block!important;width:100%!important;max-width:1672px!important;margin:0 auto}#boardWrap{width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:1672/941;padding:0!important;overflow:hidden;border-radius:8px;background:url('../围坐场景校正源图.png') center/100% 100% no-repeat!important}
#sceneRepair,#sceneSkill{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#sceneRepair{z-index:1}#sceneSkill{z-index:64}#board{position:absolute!important;left:35.944976%!important;top:41.870351%!important;width:27.751196%!important;max-width:none!important;height:auto!important;margin:0!important;transform:none!important;box-shadow:none!important;border-radius:0!important;background:transparent!important;z-index:3}
#misTable,#misSeatLayer,#misFront,.misSeat,#misJojo{display:none!important}#misStage{z-index:61}#misBubble{display:none!important}aside{display:grid!important;grid-template-columns:1fr 1.25fr 1fr;gap:12px;width:100%!important;max-width:none!important;margin-top:12px}aside .panel{margin:0!important}aside #tipBar{grid-column:1/-1}#banner{top:3%!important;bottom:auto!important}#actionBar{bottom:5%!important}#shoutBar{z-index:100;bottom:2%;max-width:96%;background:#1d2c37;border-color:#c0a06b}.shoutBar .sTitle{font-size:18px}.shoutBar .sSub{font-size:14px}.shoutBar button{font-size:15px;padding:9px 14px}
#restoreCast{display:none;position:absolute;z-index:63;left:1.5%;bottom:5%;width:29%;height:66%;padding:12px 16px;grid-template-rows:19% minmax(0,1fr) 13% 12%;background:linear-gradient(145deg,#293740,#18232c);border:1px solid #c9a05a;border-radius:5px 22px;box-shadow:inset 0 0 0 5px #1d2930;container-type:inline-size;pointer-events:none}#restoreCast.active{display:grid}.castHeading{display:flex;align-items:center;justify-content:center;border-bottom:1px solid #b99556;color:#ffe9ad;font-size:clamp(20px,10cqw,38px);font-weight:900;letter-spacing:.04em}#restorePortrait{width:100%;height:100%;min-height:0;object-fit:contain;padding:10px 0}#restoreName{display:flex;align-items:center;justify-content:center;border-top:1px solid #ad8c50;font-size:clamp(18px,9cqw,32px);font-weight:800;color:#fff0cb}#restoreDesc{display:flex;align-items:center;justify-content:center;text-align:center;font-size:clamp(12px,5cqw,19px);line-height:1.25;color:#dfd4b7}
#restoreCast.release{background:transparent;border-color:transparent;box-shadow:none;transition:background .25s}#restoreCast.release .castHeading,#restoreCast.release #restoreName,#restoreCast.release #restoreDesc{opacity:0}#restoreCast.release #restorePortrait{filter:drop-shadow(0 5px 8px #edcf8655);transform:translateX(8%);transition:transform .25s}
#restoreState{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0;font-size:13px}#restoreState span{border:1px solid #8a9d7c;background:#24372f;border-radius:15px;padding:4px 9px}#skillList .skill.unavailable{filter:grayscale(.8);opacity:.65}#skillList .skill.unavailable .pill{background:#504c48;color:#fff} @media(max-width:850px){aside{grid-template-columns:1fr!important}.shoutBar{flex-wrap:wrap;gap:6px}.shoutBar .sMain{min-width:120px}}

/* Layout pass 1: preserve canvas coordinates and game rules. */
#boardCol{width:100%;min-width:0;gap:12px}
#matchStatus{position:static;display:block!important;margin:0!important;min-width:0;max-height:none;overflow:visible}
#matchStatus>.panel{display:grid;grid-template-columns:auto minmax(120px,1fr);gap:4px 20px;align-items:center;padding:12px 16px}
#turnInfo{grid-column:1;font-size:18px}#turnTimer{grid-column:2;margin:0}#turnTimerTxt{grid-column:2;font-variant-numeric:tabular-nums}#hint{grid-column:1/-1;margin:0;line-height:1.5}#restoreState{grid-column:1/-1;margin:2px 0}#netStatus,#chatRow{grid-column:1/-1}
#skillPanel{width:100%;max-width:none}#skillList{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}#skillList .skill{min-width:0;margin:0;padding:12px;flex-wrap:wrap;align-content:start;gap:8px}#skillList .skill .tx{flex:1;min-width:90px}#skillList .skill .ds{font-size:13px;line-height:1.5;margin-top:4px}#skillList .pill{margin-left:0;font-size:12px;max-width:100%;white-space:normal}
#battleReport{width:100%;border-top:1px solid #43505a;padding:10px 0;color:#d9ccb1}#battleReport summary{cursor:pointer;font-size:14px;padding:8px;min-height:40px}#logStrip{width:100%;margin-top:8px}#log{flex-direction:column;align-items:stretch;max-height:180px;overflow:auto}#log>div{max-width:none;flex:none;display:block}header{width:100%;max-width:1672px;display:flex;align-items:center;justify-content:space-between;gap:12px}header .controls{margin:0}.controls button{min-height:40px;font-size:14px}#legend{font-size:13px}#tipBar{margin-bottom:8px}
@media(max-width:1000px){#skillList{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
 body{padding:8px 10px max(16px,env(safe-area-inset-bottom))}header{flex-wrap:wrap;margin-bottom:10px}h1{font-size:17px;letter-spacing:2px;padding:5px 10px}header .controls{gap:4px}.controls button{font-size:12px;padding:5px 8px;min-height:40px}
 #boardCol{gap:10px}#matchStatus>.panel{padding:10px 12px;gap:3px 10px}#turnInfo{font-size:16px}#turnTimerTxt{font-size:12px}#hint{font-size:14px}#netStatus{font-size:12px}
 /* A fixed crop of the same scene: x=601,y=284,w=464,h=610. */
 #boardWrap{aspect-ratio:464/610;background-size:360.344828% 154.262295%!important;background-position:49.751656% 85.800604%!important;border-radius:10px}
 #sceneRepair,#sceneSkill{inset:auto;left:-129.525862%;top:-46.557377%;width:360.344828%;height:154.262295%;max-width:none}
 #board{left:0!important;top:18.032787%!important;width:100%!important;touch-action:manipulation}
 #restoreCast{left:2%;top:1%;bottom:auto;width:96%;height:16%;padding:5px 8px;grid-template-columns:70px 1fr;grid-template-rows:1fr 1fr;gap:2px 8px;border-radius:8px;container-type:normal;background:#1d2c37}
 #restoreCast .castHeading{display:none}#restorePortrait{grid-column:1;grid-row:1/3;padding:0}#restoreName{grid-column:2;grid-row:1;font-size:17px;border:0;justify-content:flex-start}#restoreDesc{grid-column:2;grid-row:2;font-size:13px;justify-content:flex-start;text-align:left}#restoreCast.release{background:#1d2c37;border-color:#c9a05a}#restoreCast.release #restoreName,#restoreCast.release #restoreDesc{opacity:1}#restoreCast.release #restorePortrait{transform:none}
 #shoutBar{bottom:0;max-width:100%;width:100%;padding:8px;gap:5px;border-width:1px;border-radius:8px;justify-content:center}.shoutBar .sTitle{font-size:16px}.shoutBar .sSub{font-size:13px}.shoutBar button{min-height:40px;font-size:14px;padding:8px 12px}#actionBar{bottom:1%!important;width:96%;padding:8px}#actionBar .txt{white-space:normal;font-size:14px}#actionBar button{min-height:40px}#banner{font-size:22px;top:8%!important}
 #skillPanel{padding:10px}#skillList{gap:8px}#skillList .skill{padding:9px;gap:5px;box-shadow:none}#skillList .skill .ico{font-size:20px}#skillList .skill .tx{min-width:68px}#skillList .skill .nm{font-size:15px}#skillList .skill .ds{font-size:12px}#progress,#oppSkills{font-size:12px}#restoreState{font-size:12px;gap:4px}.modal .box{transform:none;width:100%;min-width:0!important;padding:18px;max-height:85dvh}.setRow button,.setRow select{min-height:42px}footer{font-size:11px;line-height:1.5}
}

.readingTimerNote{font-size:12px;line-height:1.6;color:#d4c8b0;margin-top:14px;text-align:center}

/* Cast pass 2: retain a quiet stage so portraits do not merge into the crowd. */
#sceneSkill{z-index:62}#restoreCast{z-index:63}
#restoreCast.release{background:linear-gradient(145deg,rgba(31,45,53,.97),rgba(20,32,40,.95));border-color:#c9a05a;box-shadow:inset 0 0 0 5px #1d2930}
#restoreCast.release .castHeading,#restoreCast.release #restoreName,#restoreCast.release #restoreDesc{opacity:1}
#restoreCast.release #restorePortrait{transform:none}
#restoreCast.active{animation:castArrive .25s ease-out}
@keyframes castArrive{from{opacity:0;transform:translateX(-15px)}to{opacity:1;transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){#restoreCast.active{animation:none}}

/* Compact persistent states directly beneath the playing surface. */
#restoreState{display:flex;align-items:flex-start;gap:6px;margin:0;padding:6px 2px;flex-wrap:wrap;min-width:0}#restoreState[hidden]{display:none}
#restoreState .statusLabel{border:0;background:none;border-radius:0;padding:9px 3px;font-size:12px;color:#b9b09d;flex:none}
.statusChip{border:1px solid #677b6f;border-radius:7px;background:#23332e;color:#f2ecdc;max-width:100%;font-size:13px}.statusChip summary{cursor:pointer;min-height:36px;padding:8px 10px;list-style:none}.statusChip summary::after{content:' ▾';color:#c7b88c}.statusChip[open]{flex-basis:100%;max-width:580px}.statusChip p{padding:0 10px 10px;line-height:1.6;color:#e0d7c3}.statusChip[data-type='silence']{background:#3d2b2b;border-color:#a67966}.statusChip[data-type='bind']{background:#303a25}.statusMore{font:inherit;font-size:13px;min-height:36px;background:none;color:#ead2a2;border:1px solid #736247;border-radius:7px;padding:6px 10px;cursor:pointer}
#skillList .skill .cardState{flex-basis:100%;margin-top:3px;border:0;border-top:1px solid #18172240;border-radius:0;padding:8px 0 0;background:transparent;color:inherit;line-height:1.4;font-size:13px;text-align:left;white-space:normal}
#skillList .skill[data-state='blocked'],#skillList .skill[data-state='silenced'],#skillList .skill[data-state='waiting'],#skillList .skill[data-state='busy']{filter:saturate(.25);opacity:.85;box-shadow:none;cursor:help}
#skillList .skill[data-state='silenced'] .cardState{color:#692311;font-weight:900}
#skillList .skill[data-state='used']{opacity:.55;cursor:not-allowed}#skillList .skill.used::after{display:none}
#skillList .skill:focus-visible,.statusChip summary:focus-visible,.statusMore:focus-visible{outline:3px solid #fff3c6;outline-offset:3px}
#skillList .skill[data-state='targeting']{outline:3px solid #fff1bb;outline-offset:2px;animation:none}
@media(max-width:600px){#restoreState{gap:4px;padding:0}.statusChip summary,.statusMore{min-height:40px}.statusChip{font-size:12px}#skillList .skill .cardState{font-size:12px;min-height:35px}}

/* Interaction dock: target selection and shout/counter share space, never overlap. */
#interactionDock{display:none;width:100%;min-width:0}#interactionDock:has(.show){display:block}
#interactionDock #actionBar,#interactionDock #shoutBar{position:static!important;inset:auto!important;transform:none!important;max-width:100%;width:100%;margin:0;z-index:auto;box-shadow:none;opacity:1;pointer-events:auto;border-radius:10px}
#interactionDock #actionBar{display:none;min-height:52px}#interactionDock #actionBar.show{display:flex}#interactionDock #shoutBar{display:none;flex-wrap:wrap;gap:10px;padding:12px 16px;min-height:72px}#interactionDock #shoutBar.show{display:flex}
#interactionDock:has(#shoutBar.show) #actionBar{display:none!important}
#interactionDock .sMain{flex:1 1 260px;min-width:0}#interactionDock .sSub{font-size:14px;line-height:1.6}#interactionDock .sTitle{font-size:18px;line-height:1.4}#interactionDock .dbWrap{flex:1 1 120px;max-width:240px}#interactionDock button{min-height:44px}#interactionDock .txt{white-space:normal;font-size:15px;line-height:1.5}#interactionDock .cd{font-variant-numeric:tabular-nums;min-width:2.5em;text-align:center}
@media(max-width:600px){#interactionDock #shoutBar{padding:10px;gap:8px}#interactionDock .sMain{flex-basis:calc(100% - 42px)}#interactionDock .sTitle{font-size:16px}#interactionDock .sSub{font-size:13px}#interactionDock .dbWrap{max-width:none}#interactionDock #actionBar{padding:10px;gap:8px}}

/* Visual pass 5: one warm, readable interface around the accepted scene. */
:root{--ui-bg:#191e21;--ui-panel:#242b2e;--ui-raised:#30383b;--ui-line:#645b49;--ui-gold:#e7c58a;--ui-text:#f6efdf;--ui-muted:#c9c0ae;--ui-radius:10px}
body{background:var(--ui-bg);background-image:none;color:var(--ui-text);font-family:'Microsoft YaHei','PingFang SC','Noto Sans SC',sans-serif;font-size:14px;line-height:1.5}
h1{font-family:'STKaiti','KaiTi','Microsoft YaHei',serif;transform:none;background:transparent;color:var(--ui-gold);border:0;box-shadow:none;border-radius:0;font-size:26px;line-height:1.3;padding:4px 0;letter-spacing:2px}
.controls button,.setRow button,.setRow select,#chatRow button{background:var(--ui-panel);border:1px solid var(--ui-line);border-radius:8px;color:var(--ui-text);box-shadow:none;font-weight:600;transition:background .15s,border-color .15s}
.controls button:hover,.setRow button:hover,#chatRow button:hover{background:var(--ui-raised);border-color:var(--ui-gold);transform:none}.controls button.hl,.setRow button.hl{background:#493c29;border-color:#9e8051;color:#ffe5b2}.controls button:active,.setRow button:active{background:#51452f}
.panel,#logStrip{background:var(--ui-panel);border:1px solid var(--ui-line);border-radius:var(--ui-radius);box-shadow:none}.panel h3{color:var(--ui-gold);font-size:15px;font-weight:700;letter-spacing:0;line-height:1.5}#legend{color:var(--ui-muted);line-height:1.6}#legend b{color:var(--ui-text)}
#skillList .skill{background:var(--ui-raised)!important;border:1px solid #75664c;color:var(--ui-text);border-radius:8px;box-shadow:none;transition:border-color .15s,background .15s;transform:none;filter:none}#skillList .skill:hover{background:#3a4142!important;border-color:var(--ui-gold);transform:none;box-shadow:none}#skillList .skill .nm{font-size:16px;font-weight:700;line-height:1.4}#skillList .skill .ds{opacity:1;color:var(--ui-muted);font-weight:400;line-height:1.6}#skillList .skill .cardState{border-top-color:#9e8b654d;color:var(--ui-gold);font-weight:600}#skillList .skill[data-state='silenced'] .cardState{color:#f0b79f}#skillList .skill[data-state='targeting']{background:#413a2c!important}#skillList .skill[data-state='used'] .cardState{color:var(--ui-muted)}
#hint{color:#f2d298}#netStatus{color:var(--ui-muted)}#progress{color:var(--ui-muted);line-height:1.7}#progress b{color:var(--ui-gold)}#oppSkills{color:var(--ui-muted)}#oppSkills .chip{background:#30383b;border:1px solid var(--ui-line);color:var(--ui-text)}#oppSkills .chip.used{opacity:.6}
#log>div{background:#1c2326;color:var(--ui-muted);font-size:13px;line-height:1.6}#log .sys{color:var(--ui-muted)}#log .skillLine{color:#efd39d}#log .warn{color:#f0b79f}#logStrip .lsTag{color:var(--ui-gold)}#tipBar{background:#302e26;border:1px solid #8e7951;border-radius:8px;font-size:14px;line-height:1.7}#tipBar b{color:var(--ui-gold)}
.modal{background:rgba(12,18,20,.78)}.modal .box{background:var(--ui-panel);border:1px solid #a0875d;border-radius:14px;box-shadow:0 16px 50px #0007;transform:none;color:var(--ui-text)}.modal .ti{color:var(--ui-gold);font-size:24px;line-height:1.4;letter-spacing:1px}.modal .su{color:var(--ui-muted);font-size:14px;line-height:1.8}.modal .su .hl,.setGroup h4{color:var(--ui-gold)}.modal .su b{color:var(--ui-text)}.modal button{background:#d8b77c;color:#24251f;border:1px solid #d8b77c;border-radius:8px;box-shadow:none;min-height:44px;font-weight:700}.modal button:active{transform:none;box-shadow:none}.modal button.secondary{background:transparent;color:var(--ui-text);border-color:var(--ui-line)}#setModal .setRow button,#setModal .setRow select{background:var(--ui-raised);color:var(--ui-text);border:1px solid var(--ui-line)}#volWrap{background:var(--ui-raised);border:1px solid var(--ui-line);color:var(--ui-text)}#joinCode{background:#1b2427;color:var(--ui-text);border-color:var(--ui-line)}#roomWait .big{background:#1b2427;color:var(--ui-gold)}
#interactionDock #actionBar,#interactionDock #shoutBar{background:var(--ui-panel);border:1px solid #a0875d;color:var(--ui-text)}#interactionDock .sSub{color:var(--ui-muted)}#interactionDock button{border:1px solid #d8b77c;border-radius:8px;background:#d8b77c;color:#24251f;font-weight:700}#interactionDock button.ghost{background:transparent;color:var(--ui-text);border-color:var(--ui-line)}#interactionDock .txt{color:var(--ui-gold)}
button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #ffe3a8;outline-offset:3px}#restartConfirm .restartActions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}#restartConfirm .em{display:none}#restartConfirm .box{text-align:left;width:min(100%,420px)}#restartConfirm .ti{margin-top:0}#restartConfirm .su{margin-bottom:0}
@media(max-width:600px){h1{font-size:22px}.panel h3{font-size:14px}#skillList .skill .nm{font-size:15px}.modal .ti{font-size:22px}.modal .su{font-size:14px}#restartConfirm .restartActions button{flex:1;padding:9px 12px}}
@media(prefers-reduced-motion:reduce){#boardWrap.shake,#banner.show,.skill.selecting,.hatDrop,.stampFx{animation:none!important}*{scroll-behavior:auto!important}}

#sceneLoadNotice{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:var(--ui-muted);padding:8px 10px;border:1px solid var(--ui-line);border-radius:8px;background:var(--ui-panel)}#sceneLoadNotice[hidden],#portraitStatus[hidden]{display:none!important}#sceneLoadNotice button,#portraitStatus{font:inherit;color:var(--ui-gold);border:1px solid var(--ui-line);background:var(--ui-panel);border-radius:7px;padding:8px 10px;min-height:40px;cursor:pointer}
#portraitStatus{position:absolute;left:8%;right:8%;top:43%;pointer-events:auto;z-index:1;font-size:13px}#restoreCast.assetPending::after{content:'人物动作准备中';position:absolute;top:45%;left:10%;right:10%;text-align:center;color:var(--ui-muted);font-size:14px;pointer-events:none}#restoreCast.assetPending:has(#portraitStatus:not([hidden]))::after{display:none}
@media(max-width:600px){#portraitStatus{top:15%;left:2%;right:auto;width:70px;font-size:11px;padding:4px}#restoreCast.assetPending::after{left:2%;right:auto;width:70px;font-size:11px;top:40%}}

/* Dialogs stay within the visible phone viewport and scroll internally. */
body.dialogOpen{overflow:hidden}.modal{padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));overscroll-behavior:contain}
.modal .box{min-width:0!important;max-width:min(100%,460px);max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;overflow-wrap:anywhere;scrollbar-gutter:stable}
.modal input,.modal select{max-width:100%}#joinRow{min-width:0;flex-wrap:wrap}.setRow{min-width:0}.setRow>button,.setRow>select{max-width:100%;white-space:normal}#volWrap{max-width:100%}.modal button{touch-action:manipulation}
@media(max-width:600px){body{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}.modal .box{padding:16px;max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}.modal input,.modal select{font-size:16px}#chatRow button{min-height:44px}}
@media(max-height:500px){.modal .box{padding:14px 18px}.modal .em{font-size:26px}.modal .ti{margin:4px 0 8px}.modal .su{margin-bottom:10px}}

#interactionDock #misQuiz{position:static;transform:none;width:100%;box-sizing:border-box;background:var(--ui-panel);border:1px solid var(--ui-line);border-radius:10px;padding:14px;box-shadow:none;color:var(--ui-text);animation:none}
#interactionDock #misQuiz .misQh{font-size:14px;color:var(--ui-gold)}#interactionDock #misQuiz .misQ{font-size:16px;line-height:1.6;color:var(--ui-text)}#interactionDock #misQuiz .misOpt{font-size:14px;line-height:1.5;min-height:44px;background:var(--ui-raised);color:var(--ui-text);border:1px solid var(--ui-line);border-radius:7px}#interactionDock #misQuiz .misOpt:disabled{opacity:.8}#interactionDock #misQuiz .misBar{background:#514a3b}#interactionDock #misQuiz .misBar i{background:var(--ui-gold)}

#board:focus-visible{outline:2px solid var(--ui-gold);outline-offset:2px}