.world-controls{position:absolute;inset:0;pointer-events:none;z-index:8;display:none;user-select:none}
.world-controls[hidden]{display:none!important}
@media(pointer:coarse),(max-width:600px){.world-controls{display:block}}
.preview-touch~.world-controls,.view:has(.preview-touch)>.world-controls{display:block}
.world-controls[data-mode="tap"]{display:none!important}

.world-dpad{position:absolute;left:14px;bottom:128px;width:108px;height:108px;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);align-items:center;text-align:center;border:1px solid rgba(245,230,190,.3);border-radius:50%;background:rgba(35,53,47,.13);box-shadow:inset 0 0 0 6px rgba(22,35,31,.05);opacity:.25;touch-action:none;pointer-events:auto;transition:opacity .15s,transform .15s}
.world-dpad:active{opacity:.62;transform:scale(.98)}
.world-dpad span{display:grid;place-items:center;width:100%;height:100%}
.world-dpad svg{width:18px;height:18px;fill:rgba(255,246,216,.9);filter:drop-shadow(0 1px 1px rgba(0,0,0,.55))}
.pad-up{grid-column:2;grid-row:1}.pad-left{grid-column:1;grid-row:2}.pad-center{grid-column:2;grid-row:2}.pad-right{grid-column:3;grid-row:2}.pad-down{grid-column:2;grid-row:3}
.pad-left svg{transform:rotate(-90deg)}.pad-right svg{transform:rotate(90deg)}.pad-down svg{transform:rotate(180deg)}
.pad-center:after{content:"";width:18px;height:18px;border-radius:50%;background:rgba(255,246,216,.24);box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}

.world-actions{position:absolute;right:13px;bottom:126px;width:116px;height:90px;opacity:.28;pointer-events:none;transition:opacity .15s}
.world-actions:active{opacity:.68}
.world-actions button{position:absolute;width:50px;height:50px;border-radius:50%;border:1px solid rgba(246,226,180,.55);background:rgba(91,100,57,.58);color:#fff0c6;font:700 19px/1 Georgia,serif;box-shadow:0 2px 0 rgba(24,37,30,.55),inset 0 1px rgba(255,255,255,.22);touch-action:manipulation;pointer-events:auto}
.world-actions button:active{background:rgba(124,140,77,.88);transform:translateY(1px);box-shadow:0 1px 0 rgba(24,37,30,.55)}
.world-actions .action-b{left:2px;bottom:2px}.world-actions .action-a{right:2px;top:2px}

/* Phones: the chat sits in the bottom-left corner, just above the deck bar that
   overlaps the world's bottom edge (46px), its messages stacked above it. */
@media(pointer:coarse),(max-width:600px){.world-root .chat-input{bottom:54px;max-width:200px}.world-root .chat-log{bottom:86px;max-width:220px;max-height:76px}.world-root .room-label{top:8px;bottom:auto}}
/* Lines from the game itself: "X has joined the game". */
.world-root .chat-log .chat-log-system{color:#e8c547;font-style:italic}
@media(min-width:760px){body.world-open .app{max-width:1100px}}
body.in-combat .wardrobe-world-entry{display:none!important}
body.mob-selected .wardrobe-world-entry{display:none!important}
/* the scene shrinks to the stage only once the card sheet is up (combat-stage, see WorldScene._shrinkToStage) */
body.in-combat.combat-stage .world-root{flex:0 0 var(--combat-stage-height,140px);overflow:hidden}
body.in-combat .encounter-sheet.is-reading{top:var(--combat-stage-height,140px);bottom:var(--world-progress-height,46px);height:auto!important;max-height:none;transition:top .3s cubic-bezier(.22,1,.36,1)}
/* The stage is only worth its full height at the moment a grade actually
   lands a hit (see app.js's playHitBeat) -- the rest of the time, reading and
   grading a card, it collapses completely (a sliver only showed a slice of
   torso) so the card gets the room (bigger
   than a plain Anki card, no dead space at the bottom), same idea as the
   peek sheet already not reserving stage space for itself (see
   EncounterPanel._setHeight's is-reading scoping note). */
body.in-combat.sheet-reading-card .world-root{flex-basis:0}
body.in-combat.sheet-reading-card .encounter-sheet.is-reading{top:0}
body.in-combat.sheet-reading-card.combat-hit-active .world-root{flex-basis:var(--combat-stage-height,140px)}
body.in-combat.sheet-reading-card.combat-hit-active .encounter-sheet.is-reading{top:var(--combat-stage-height,140px)}

/* The empty card panel that rises with the zoom when a fight starts (WorldScene.enterCombatStage);
   same place and colours as the card sheet (.encounter-sheet.is-reading: the theme's --card-bg), just under it. */
.combat-curtain{position:absolute;left:0;right:0;top:var(--combat-stage-height,140px);bottom:var(--world-progress-height,46px);z-index:4;pointer-events:none;background:var(--card-bg,#fffdf8);border:1px solid var(--card-line,#c4ccc8);border-bottom:0;border-radius:10px 10px 0 0;box-shadow:0 -4px 18px #162b3230;animation:combat-curtain-rise .45s cubic-bezier(.22,1,.36,1) both}
body.dark-mode .combat-curtain{background:rgba(18,18,19,.98);border-color:#38383b}
.combat-curtain.is-done{opacity:0;transition:opacity .2s ease-out}
@keyframes combat-curtain-rise{from{transform:translateY(100%)}to{transform:none}}
.encounter-sheet.is-appearing .sheet-content,.encounter-sheet.is-appearing .sheet-hud{animation:sheet-content-in .28s ease-out both}
@media (prefers-reduced-motion:reduce){.combat-curtain{animation-duration:.01s}.encounter-sheet.is-appearing .sheet-content,.encounter-sheet.is-appearing .sheet-hud{animation-duration:.01s}}

/* "Open all" chests: a small glass pill above the chest button (fx.css places that one). */
.chest-open-all{position:fixed;right:8px;bottom:calc(var(--nav-h,64px) + 122px);z-index:800;padding:5px 10px;border-radius:999px;
  background:var(--glass,rgba(20,20,18,.8));border:1px solid var(--glass-edge,#756a55);color:var(--ink,#eee5d2);font:700 12px/1.2 inherit;cursor:pointer;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.chest-open-all[hidden],body.in-combat .chest-open-all{display:none}
.chest-open-all:disabled{opacity:.6;cursor:default}


/* An empty chat log is not shown (it left a dark bar above the chat box). */
.world-root .chat-log:empty { display: none !important; }

/* Explain's answer under the card (encounter-panel.js) */
.card-explain-text { margin: 14px 0 0; padding: 10px 12px; border-left: 3px solid #c8a04a; background: #ffffff0d; border-radius: 6px; font-size: 15px; line-height: 1.55; white-space: pre-line; }
.card-explain-text.is-note { border-left-color: #8a8270; font-size: 13px; opacity: .85; }

/* The chat in the name tags' look (game-text.js): Arial 11 px, white with a black
   outline, no box -- a touch soft, like AdventureQuest Worlds. */
.world-root .chat-log {
  background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  font: 11px/1.45 Arial, Helvetica, sans-serif !important; color: #fff !important; letter-spacing: .2px;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 2px #000;
  filter: blur(.25px);
}
.world-root .chat-log .chat-log-name { font-weight: 700; }
.world-root .chat-input { font: 12px Arial, Helvetica, sans-serif !important; }