/* Controls belong to the game layout, never float above the board. */
.play-stage{height:100dvh;min-height:100dvh;padding:8px max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));background:linear-gradient(165deg,#dff5ff,#eeffe3 60%,#fff2bd)}
.play-topbar{gap:8px}.play-topbar>button{max-width:90px}.play-content{grid-template-rows:64px auto minmax(0,1fr) auto;gap:4px}
.guest-preview{margin-top:12px;padding:8px 10px;border:2px solid #d8c9f6;border-radius:16px;background:#fffaf0}.guest-preview>strong{display:block;font-size:.8rem;color:#52398c;margin-bottom:5px}.guest-preview-list{display:flex;gap:4px;overflow:auto;max-height:56px}.guest-preview-list img{flex:none;width:44px;height:44px;object-fit:contain;background:#f1ebff;border-radius:11px}
.guest-line{display:flex;justify-content:center;gap:6px;max-width:100%;overflow:auto;padding:2px 3px 5px;scrollbar-width:thin}.guest-seat{position:relative;flex:none;display:grid;place-items:center;width:clamp(32px,8vw,48px);height:clamp(32px,8vw,48px);border-bottom:4px solid var(--guest-color);border-radius:0;background:transparent}.guest-seat img{width:100%;height:100%;object-fit:contain}.guest-seat.waiting{opacity:.9}
button{touch-action:manipulation;cursor:pointer}.play-topbar>button,.toolbelt button,.map-shell>button,.menu-actions button,.profile-row button,dialog>button{border:2px solid #ad96d2;border-radius:12px;background:#fffaf0;color:#392358;min-height:44px;padding:6px 12px;font-weight:800}
button[aria-pressed=true]{background:#6440a7;color:#fff;border-color:#4f2d90}button:disabled{opacity:.45;cursor:default}
.play-prompt{grid-template-columns:48px 1fr 48px;min-height:0;padding:0}.reaction-portrait{width:46px;height:54px;border-radius:12px}.reaction-portrait img,.token img{object-fit:contain}.portrait{height:150px}.character-dumka .portrait img{transform:none}
.board-wrap{overflow:auto;display:flex;align-items:flex-start;justify-content:flex-start;overscroll-behavior:contain;touch-action:pan-x pan-y;scrollbar-gutter:stable}
.board-scene{position:relative;flex:none;width:min(100%,calc(100dvh - 320px),560px);min-width:calc(var(--size)*38px + 12px);margin:auto}.board{width:100%;min-width:100%;min-height:calc(var(--size)*38px + 12px);gap:3px;padding:4px;border-radius:15px;overflow:visible}
.cell{background:var(--region-color);border-radius:7px}.cell:focus-visible{z-index:5;outline-offset:-4px}.token{width:94%;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible;filter:drop-shadow(0 3px 2px #30244055)}.region-symbol{position:absolute;left:3px;bottom:1px;font-size:10px;font-weight:900;color:#302440;pointer-events:none}.fixed-badge{position:absolute;top:0;right:3px;font-size:12px;color:#302440}.pencil-note{font-size:36px;line-height:1;color:#493160}
.play-prompt{grid-template-columns:minmax(0,1fr) auto}.board-count{font-weight:950;color:#583990;background:#fff;border-radius:999px;padding:4px 8px}.board-celebration{position:absolute;z-index:11;bottom:3%;left:4%;right:4%;display:grid;justify-items:center;gap:3px;padding:10px 12px 12px;border:3px solid #6eaa36;border-radius:20px;background:rgba(255,252,225,.96);box-shadow:0 10px 30px #30244055;text-align:center;animation:celebration-in .45s ease-out both}.board-celebration strong{font-size:clamp(1.1rem,4vw,1.6rem);color:#315618}.board-celebration p{margin:0;font-weight:850;font-size:clamp(.72rem,2.5vw,1rem)}.board-celebration small{font-size:.68rem;line-height:1.15}.board-celebration button{min-height:44px;margin-top:3px;border:0;border-radius:13px;padding:6px 16px;color:#fff;background:#6546b3;font-weight:900}.celebration-sparkles{color:#edae14;letter-spacing:.5em}.board-won .token{animation:figurine-joy .7s ease-in-out 2}.win-meta{text-align:center;font-size:.72rem;font-weight:800;color:#4c445b}@keyframes celebration-in{from{transform:translateY(20px) scale(.8);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes figurine-joy{50%{transform:translateY(-4px) rotate(-3deg)}}
.play-footer{min-height:0;padding-top:4px}.toolbelt{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;padding:4px}.toolbelt button{padding:5px 10px;font-size:13px}.mode-buttons{display:flex;gap:3px}.instruction{font-size:14px}.hint-row{box-shadow:inset 0 0 0 3px #68469e}.hint-target{box-shadow:inset 0 0 0 5px #fff, inset 0 0 0 9px #4b247f}
.selected-companion{border-color:#6440a7}
dialog{max-width:min(94vw,620px);max-height:90dvh;overflow:auto;border:3px solid #7355c6;border-radius:24px;background:#fffbea;color:#302440;padding:22px;box-shadow:0 20px 80px #30244055}dialog::backdrop{background:#30244088}dialog p{line-height:1.5}dialog h3{margin-bottom:6px}.menu-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.profile-row{justify-content:flex-start}.map-shell>button{margin:5px}.storage-warning{position:fixed;bottom:0;background:#fff4ac;color:#342500;margin:0;width:100%;padding:8px;font-size:12px}
.rule-x{position:absolute;inset:0;display:grid;place-items:center;z-index:9;font-family:system-ui,sans-serif;font-size:clamp(25px,7vw,58px);line-height:1;font-weight:900;color:#473556;text-shadow:0 2px #fff;pointer-events:none;animation:rule-x 1s ease both}
.rule-x.conflict{color:#bf143d;font-size:clamp(30px,9vw,74px);text-shadow:0 0 3px #fff,0 2px #fff;animation-duration:1.8s}
@keyframes rule-x{0%{transform:scale(0) rotate(-18deg);opacity:0}25%{transform:scale(1.12) rotate(4deg);opacity:1}38%,77%{transform:scale(1) rotate(0);opacity:1}100%{transform:scale(0) rotate(16deg);opacity:0}}
@media(max-width:380px){.toolbelt button{padding:5px 7px}.play-topbar .board-kicker{display:none}.language-button{min-width:40px}.board{min-width:calc(var(--size)*36px + 12px);min-height:calc(var(--size)*36px + 12px)}}
@media(max-height:520px) and (min-width:600px){.play-stage{grid-template-rows:48px minmax(0,1fr)}.play-content{max-width:900px;width:100%;grid-template-columns:100px minmax(0,1fr) 160px;grid-template-rows:minmax(0,1fr)}.play-prompt{display:flex;flex-direction:column;justify-content:center}.guest-line{display:none}.board-wrap{grid-column:2}.play-footer{grid-column:3}.board{width:min(100%,calc(100dvh - 70px))}.toolbelt{flex-direction:column}.toolbelt button{font-size:12px}.mode-buttons{flex-direction:column}}
@media(prefers-reduced-motion:reduce){.rule-x{animation:none!important;opacity:1;transform:none}}

/* Four real face/body poses are isolated in one review sheet per character.
   Frame changes follow game events; the original neutral assets remain intact. */
.actor-frame{display:block;flex:none;width:100%;height:100%;background-image:var(--actor-sheet);background-repeat:no-repeat;background-size:400% 100%;background-position:0 50%;pointer-events:none}
.actor-frame[data-pose="1"]{background-position:33.333% 50%}
.actor-frame[data-actor="kd01"][data-pose="1"]{background-image:url('./assets/compact/kd01-surprise-r5e-review.webp')!important;background-size:contain;background-position:center}
.actor-frame[data-actor="kd02"][data-pose="1"]{background-image:url('./assets/compact/kd02-surprise-r5e-review.webp')!important;background-size:contain;background-position:center}
.actor-frame[data-pose="2"]{background-position:66.667% 50%}
.actor-frame[data-pose="3"]{background-position:100% 50%}
.guest-seat .actor-frame{width:100%;height:100%}
.reaction-portrait .actor-frame{width:100%;height:100%}
.token .actor-frame{width:100%;height:100%}
.actor-still{width:100%;height:100%;object-fit:contain}
/* Profile creation and deletion stay inside the game's accessible dialog. */
.profile-editor{display:grid;gap:.55rem;margin:.8rem 0;padding:.8rem;border:2px solid #7454a8;border-radius:14px;background:#fffdf2}
.profile-editor label{font-weight:800}
.profile-editor input{font:inherit;min-height:44px;padding:.55rem .7rem;border:2px solid #7454a8;border-radius:10px;background:#fff;color:#291746}
.profile-editor input:focus-visible{outline:3px solid #f7bb3c;outline-offset:2px}