/* One horizontal strip per target; nothing floats over portraits. */
.statusRow{display:flex;flex-flow:row nowrap;align-items:flex-start;gap:3px;height:23px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;max-width:370px}
#enemies .fighterInfo{left:-240px;width:235px}
#enemies .statusRow{right:0;left:auto;width:235px;max-width:235px;justify-content:flex-end}
.targetAction.pendingEffect{position:relative;inset:auto;transform:none;flex:0 0 22px;outline:1px solid #b99d55;outline-offset:-1px}
.effectIcon{flex:0 0 22px}
#turnSummary{position:absolute;left:382px;top:-28px;bottom:auto;width:146px;height:28px;display:flex;align-items:center;justify-content:flex-start;gap:4px;white-space:normal;text-shadow:none;background:#e8dfb9;border:1px solid #4e573b;border-radius:5px 5px 0 0;padding:3px 5px}
#turnSummary .inspectPrompt{position:absolute;bottom:29px;right:0;white-space:nowrap;font-size:8px;color:#e9e3c6;text-shadow:1px 1px #102117}
#turnSummary button{display:block;flex:0 0 31px;min-width:31px;width:31px;height:25px;margin:0;padding:0;border:1px solid #172219;background:#202e24}
#turnSummary button img{width:100%;height:100%;object-fit:contain}
#turnSummary button:hover{outline:1px solid #d6b76d}
#details{padding-top:9px}
#details>p:not(.energyExplanation){max-height:65px;line-height:13px;font-size:9px;text-transform:none;padding-top:2px;margin-right:3px}
#details .characterDetail{object-fit:cover;object-position:top}
#details .miniEffects{margin-top:8px}
#details .recharge{bottom:4px}
.bottomTools button{height:12px;margin-bottom:2px;font-size:6.5px}
.bottomTools #newGameButton{height:16px}
#surrenderButton{color:#87382c;background:#ead9b5}
#characterPreview{padding-right:34px;border-right-width:4px}
.scrollHandle{position:absolute;right:-1px;top:-12px;bottom:-12px;width:30px;background:linear-gradient(90deg,#3b4f34,#809163,#3b4f34);border:2px solid #2b3728;border-top:9px solid #773c31;border-bottom:9px solid #773c31;border-radius:8px;color:#1a2e20;font-size:27px;padding:0}
.scrollHandle span{display:block;writing-mode:vertical-rl;font-size:10px;letter-spacing:3px;margin:10px auto}
#previewRole{right:47px;top:42px}
#addPreview{right:47px;width:139px}
#previewDescription{right:45px}
#previewDescription .menuCosts span{display:none}
#lobbyRoster{display:grid;grid-template-columns:repeat(3,108px);grid-auto-rows:70px;gap:5px 9px;top:48px;left:16px;width:356px}
#lobbyRoster button{width:108px;height:70px;padding:0;border:0}
#lobbyRoster img{width:57px;height:55px}
#lobbyRoster b{font-size:8px;margin-top:1px;line-height:10px}
#lobbyRoster button.inspected{outline:1px solid #ac8148}
.previewClosed #lobbyRoster button.inspected{outline:none}
#presetTrio{font-size:7px!important}
#resultOverlay{position:absolute;inset:0;background:#08130d88;z-index:20;display:grid;place-items:center}
#resultScroll{position:relative;width:598px;min-height:267px;margin-left:35px;border:8px solid #853c31;border-left-width:10px;background:radial-gradient(ellipse at top,#f4ebc9,#e6dfb9);box-shadow:4px 6px 10px #0007;padding:14px 16px;display:flex;gap:20px;color:#17231a}
#resultScroll .scrollBinding{left:-47px;width:39px}
#resultPortrait{width:192px;height:220px;object-fit:cover;object-position:top;background:radial-gradient(#849578,#344c36);border:1px solid #33452d}
.resultCopy{flex:1;display:flex;flex-direction:column;align-items:flex-start}
#resultTitle{font-size:32px;font-weight:normal;margin:0 0 10px;color:#ad3734;align-self:center}
#resultScroll.victory #resultTitle{color:#3d693b}
#resultSubtitle{font-size:12px;margin:0 0 11px}
#resultText{font-size:11px;line-height:17px;margin:0}
#resultContinue{margin-top:auto;align-self:flex-end;background:none;border:0;font-size:20px;font-weight:bold;color:#9a3931;padding:12px 8px 0}
[data-character-id="the-shape"] .portrait img,img[data-character-id="the-shape"],[data-character-id="the-shape"]>img{object-fit:cover;object-position:53% 9%}
[data-character-id="the-shape"] .portrait img{transform:scale(1.2);transform-origin:53% 14%}
#previewPortrait[data-character-id="the-shape"],#resultPortrait[data-character-id="the-shape"]{object-position:53% 15%}

/* Expanded chronological roster: all 16 killers remain visible. */
#lobbyRoster{grid-template-columns:repeat(6,54px);grid-auto-rows:48px;gap:2px 5px;top:45px;left:13px;width:354px;height:148px;overflow:visible;align-content:start}
#lobbyRoster button{width:54px;height:48px;padding:0;display:flex;align-items:center;flex-direction:column;gap:1px}
#lobbyRoster img{width:38px;height:37px;object-fit:cover;object-position:top}
#lobbyRoster b{font-size:7px;line-height:9px;margin:0;max-width:54px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#rosterFilters button:disabled{opacity:.45;cursor:not-allowed}
#previewDescription p{font-size:11px;line-height:15px}

/* Team slots stay in place while selecting, removing, and dragging. */
#teamSlots>.teamSlot{position:relative;width:67px;height:84px;flex:0 0 67px;transition:box-shadow .15s,transform .15s}
#teamSlots .teamSlot>button[data-team-character]{width:67px;height:84px;display:block;border:1px solid #69744e;background:linear-gradient(#a4ad87,#d2d0ac);box-shadow:inset 0 0 0 2px #e0d7ae44}
#teamSlots .teamSlot>button[data-team-character]:hover{border-color:#c89c50;box-shadow:0 0 0 1px #c89c50}
#teamSlots .removeTeamMember{position:absolute;z-index:2;right:0;top:0;width:13px;height:13px;min-width:0;padding:0;border:0;background:#8b3f31;color:#fff1ca;font:12px/13px Arial}
#teamSlots .emptySlot{flex:0 0 67px;border:1px dashed #7e8960;background:#a7b18a33;color:#747d58;box-shadow:inset 0 0 12px #23361d18}
#teamSlots .dropTarget{outline:2px solid #e4bb61;outline-offset:2px;box-shadow:0 0 10px #e4bb6155;transform:translateY(-2px)}
#teamSlots.acceptingCharacter{border-radius:3px;box-shadow:0 0 0 3px #d8b76566}
#lobbyRoster [draggable="true"],#teamSlots [draggable="true"]{cursor:grab}
#lobbyRoster [draggable="true"]:active,#teamSlots [draggable="true"]:active{cursor:grabbing}
.draggingCharacter{opacity:.45}
#lobbyRoster button,#teamSlots [data-team-character]{touch-action:none;user-select:none}
[data-team-draggable="true"],#teamSlots [data-team-character]{cursor:grab}
.teamDragGhost{position:fixed;width:64px;height:64px;object-fit:cover;transform:translate(-50%,-50%);pointer-events:none;z-index:10000;border:2px solid #dfbb68;box-shadow:0 4px 16px #0009;border-radius:3px;opacity:.9}
#teamSlots img,#lobbyRoster img{user-select:none;-webkit-user-drag:none}
.activePlayer img{border-color:#d5b76b!important;box-shadow:0 0 0 1px #d5b76b,0 0 8px #d5b76b44}
.opponentTurn #endTurn:disabled{opacity:1;cursor:default}
.opponentTurn .energyBar,.opponentTurn #energyStatus,.opponentTurn #exchangeButton{visibility:hidden;pointer-events:none}
.opponentTurn #readyLabel{color:#f1ddbb}
.opponentTurn .timerTrack{border-color:#c5b590}

/* Descriptions are inspected by click, including unavailable skills. */
#energyStatus{display:none}
.skill[data-unavailable="true"]{cursor:help}
.skill[data-unavailable="true"] img{opacity:.32;filter:grayscale(.8)}
.skill[data-unavailable="true"]:hover{outline:1px solid #9b9776}