:root{color-scheme:dark;--gold:#e9bc7d;--gold-dark:#886038;--ink:#15100d;--parchment:#e6cba1}
*{box-sizing:border-box}
html,body{height:100%;width:100%;margin:0;overflow:hidden}
body{font-family:Georgia,"Times New Roman",serif;color:#f5e7cf;background:#080d12}
body::before{content:"";position:fixed;inset:-25px;z-index:-2;background:linear-gradient(#0a1115b9,#080c10a3),url("../assets/dungeon.webp") center/cover no-repeat;filter:brightness(.68) blur(8px)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 38%,transparent 15%,#05080c99 85%),linear-gradient(90deg,#0007,transparent 18%,transparent 82%,#0007)}
button{font:inherit;cursor:pointer;touch-action:manipulation}
button:disabled{opacity:.4;cursor:not-allowed}
button:focus-visible{outline:3px solid #ffe1a1;outline-offset:3px}
.game-shell{height:100vh;height:100dvh;max-width:1600px;margin:auto;display:grid;grid-template-rows:minmax(95px,14vh) minmax(65px,9vh) minmax(0,1fr) minmax(62px,12vh) minmax(54px,9vh);gap:clamp(5px,1.1vh,13px);padding:clamp(7px,1.2vh,16px) clamp(9px,2vw,30px);overflow:hidden}
.topbar{display:grid;grid-template-columns:minmax(220px,1.1fr) minmax(0,2.5fr) auto;align-items:stretch;gap:clamp(8px,1.4vw,20px);min-height:0}
.brand{position:relative;display:flex;align-items:center;gap:10px;min-width:0;background:linear-gradient(120deg,#2c0f0bf2,#4b1a12c9 58%,#150b0aee);border:1px solid #7e442c;border-radius:4px 12px 12px 4px;box-shadow:inset 0 0 24px #000c,0 6px 20px #0008;padding:8px clamp(8px,1.3vw,19px)}
.brand::after{content:"";position:absolute;inset:4px;border:1px solid #a46a3a55;pointer-events:none}
.brand-ornament{font-size:clamp(1.5rem,4.5vh,3.5rem);color:#cda16a;text-shadow:0 2px 5px #000;flex:none}
.brand-copy{min-width:0}
.brand h1{margin:0;font-size:clamp(2rem,4.8vw,5rem);font-weight:900;line-height:.95;letter-spacing:-.055em;text-transform:uppercase;color:#e8c08a;text-shadow:0 2px #66381d,0 5px 3px #0a0301,1px -1px #fff4}
.brand p{margin:8px 0 0;font-size:clamp(.52rem,.95vw,1.05rem);letter-spacing:.12em;color:#e8bd7b;white-space:nowrap}
.hud{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;min-width:0;border:1px solid #6d5137;background:linear-gradient(#0d171ddd,#0b1217f5);box-shadow:inset 0 0 0 3px #121c23,0 5px 16px #0009;border-radius:7px;padding:clamp(7px,1.1vh,15px)}
.hud-item{display:flex;align-items:center;justify-content:center;gap:clamp(5px,.7vw,12px);min-width:0;padding:0 clamp(4px,.9vw,14px);border-right:1px solid #775e4c8c}
.hud-item:last-child{border-right:0}
.hud-icon{flex:none;font-size:clamp(1.4rem,3vw,3.2rem);line-height:1;color:#d7a15b;text-shadow:0 2px 3px #000}
.life .hud-icon{color:#c73824;text-shadow:1px 1px #f4a15a,0 2px 6px #000}
.potion-icon{color:#9ab65b}
.hud-copy{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px}
.hud-label,.section-label{color:var(--gold);letter-spacing:.13em;font-size:clamp(.6rem,1vw,.94rem)}
.hud-copy strong{font-size:clamp(.85rem,1.65vw,1.55rem);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-copy small{color:#dfc9a6;font-size:clamp(.56rem,.9vw,.95rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.life-track{height:9px;width:clamp(48px,9vw,155px);max-width:100%;margin-top:4px;border-radius:7px;border:1px solid #866548;background:#171213;overflow:hidden;box-shadow:inset 0 1px 3px #000}
#healthbar{height:100%;width:100%;background:repeating-linear-gradient(90deg,#c8241d 0,#e7452b 19%,#6c100e 20%,#bd2a1e 21%);transition:width .25s}
.topbuttons{display:flex;align-items:flex-start;gap:6px}
.topbuttons button{height:clamp(35px,4vw,51px);width:clamp(35px,4vw,51px);border-radius:50%;border:1px solid #ac7c45;background:radial-gradient(circle,#23313b,#0d1419);color:#ebc28b;font-size:1.5rem;box-shadow:0 2px 9px #000a}
.room-heading{position:relative;justify-self:center;align-self:center;width:min(650px,100%);text-align:center;padding:clamp(7px,1.3vh,15px) 15px;background:linear-gradient(100deg,#0a1119ec,#101a22fa,#0a1119ec);border:1px solid #876344;box-shadow:inset 0 0 0 3px #17232a,0 5px 12px #000a;clip-path:polygon(2% 0,98% 0,100% 18%,100% 82%,98% 100%,2% 100%,0 82%,0 18%)}
.room-heading p{margin:4px 0 0;font-size:clamp(.82rem,1.55vw,1.38rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room-progress{position:absolute;right:12px;top:7px;color:#c7a782;font:clamp(.53rem,.75vw,.8rem) system-ui,sans-serif}
.room-progress strong{color:#f1d4a6}
.arena{min-height:0;display:flex;align-items:center;justify-content:center;padding:0 clamp(0px,3vw,40px)}
.room{height:100%;width:min(100%,1290px);min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(7px,1.5vw,23px)}
.card{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:clamp(7px,1.3vh,13px);border:2px solid #9d713c;border-radius:11px;background:linear-gradient(135deg,#d9b47d,#f2ddb1 18%,#dec08c 90%,#9f7445);color:#21130c;box-shadow:inset 0 0 0 4px #f5ddb0,inset 0 0 0 6px #96704470,0 6px 0 #322012,0 13px 22px #000b;transition:transform .15s,box-shadow .15s;animation:deal .25s both;animation-delay:var(--delay)}
.card::before{content:"";position:absolute;inset:7px;border:1px solid #8e613f88;border-radius:5px;pointer-events:none}
.card:hover:not(:disabled),.card:focus-visible{transform:translateY(-5px);box-shadow:inset 0 0 0 4px #f5ddb0,0 0 0 3px #f5b63c,0 0 25px #ffb938b0,0 12px 24px #000}
.card.red{color:#86231b}
.corner{z-index:1;align-self:flex-start;font-size:clamp(1.3rem,3.4vw,3.1rem);line-height:1;font-weight:bold}
.illustration{position:relative;flex:1;min-height:0;width:100%;margin:5px 0;overflow:hidden;border:3px solid #775034;border-radius:4px;background:#211a15;box-shadow:inset 0 0 12px #0009}
.card-art{display:block;width:100%;height:100%;object-fit:cover;object-position:center;filter:contrast(1.13) saturate(.95)}
.kind{z-index:1;text-transform:uppercase;font-size:clamp(.75rem,1.4vw,1.3rem);font-weight:700;text-align:center}
.power{z-index:1;font-size:clamp(.66rem,1.1vw,1.05rem);text-align:center;color:#473325}
.actions{display:grid;grid-template-columns:1.1fr 1.15fr 1.1fr .75fr;gap:clamp(6px,1.2vw,16px);width:min(100%,1160px);margin:auto;min-height:0}
.action-button{display:flex;align-items:center;justify-content:center;gap:clamp(5px,.9vw,12px);min-width:0;border:1px solid #b67e54;border-radius:10px;color:#f7e7cf;font-size:clamp(.66rem,1.15vw,1.05rem);font-weight:700;letter-spacing:.025em;text-shadow:0 1px 2px #000;padding:6px;background:linear-gradient(#702d21,#3c1512);box-shadow:inset 0 1px 0 #ffffff33,0 5px 12px #0009}
.action-button>span:first-child{font-size:clamp(1.1rem,2.5vw,2.2rem);color:#e8b26e}
.action-button.next{background:linear-gradient(#294152,#182a35);border-color:#7893a4}
.action-button.flee{background:linear-gradient(#292b29,#101619);border-color:#9a764d}
.action-button.restart{background:linear-gradient(#5b4b35,#29241d);border-color:#9a764d}
.action-button:disabled{filter:grayscale(.6)}
.log{display:flex;align-items:center;justify-content:center;gap:14px;min-height:0;width:min(100%,780px);margin:auto;padding:7px 16px;background:linear-gradient(100deg,#080d13ed,#111d26f5,#080d13ed);border:1px solid #86623f;box-shadow:inset 0 0 0 3px #1b2930,0 4px 14px #0009;text-align:center}
.log-icon{font-size:clamp(1.4rem,3vh,2.5rem)}
.log-copy{min-width:0}
.log p{margin:3px 0 0;font-size:clamp(.72rem,1.3vw,1.1rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
dialog{width:min(440px,calc(100% - 25px));max-height:85dvh;overflow:auto;border:1px solid #b58a50;border-radius:12px;padding:20px;background:linear-gradient(#24313b,#0c141a);color:#f5e6cd;box-shadow:0 15px 55px #000d}
dialog::backdrop{background:#000b}
dialog h2{color:var(--gold);font-size:1.6rem}
dialog p{line-height:1.45}
.wide{width:100%;padding:12px;background:#85562d;color:#fff3dd;border:1px solid #c79a5d;border-radius:8px}
.effect{position:fixed;z-index:10;left:50%;top:45%;pointer-events:none;font:bold clamp(2rem,7vw,5rem) Georgia,serif;color:#ff8585;text-shadow:0 4px 18px #000;animation:impact .75s forwards}
.effect.heal{color:#a4f1a7}.effect.weapon{color:#f9d18a}
@keyframes deal{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes impact{0%{opacity:0;transform:translate(-50%,-20%) scale(.6)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}100%{opacity:0;transform:translate(-50%,-95%) scale(.95)}}
@media(max-width:900px){
.game-shell{grid-template-rows:minmax(86px,15vh) minmax(58px,9vh) minmax(0,1fr) minmax(55px,10vh) minmax(48px,8vh)}
.topbar{grid-template-columns:minmax(155px,.9fr) minmax(0,2fr) auto}
.brand-ornament{display:none}.brand h1{font-size:clamp(1.7rem,4vw,3.2rem)}
.hud-icon{font-size:1.5rem}.hud-item{padding:0 4px}
.hud-copy small{display:none}
}
@media(max-width:600px){
.game-shell{grid-template-rows:minmax(76px,12vh) minmax(58px,8vh) minmax(0,1fr) minmax(76px,12vh) minmax(48px,7vh);padding:7px;gap:6px}
.topbar{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:5px}
.brand{min-height:0;padding:5px 9px}.brand h1{font-size:clamp(1.6rem,7vw,2.5rem)}.brand p{font-size:.52rem;margin:3px 0 0}
.topbuttons{align-items:center}.topbuttons button{width:31px;height:31px;font-size:1rem}
.hud{grid-column:1/-1;grid-row:2;padding:5px}
.hud-icon{font-size:1.15rem}.hud-copy strong{font-size:clamp(.69rem,2.5vw,.98rem)}.hud-label{font-size:.53rem;letter-spacing:.03em}
.hud-item{gap:3px}.life-track{height:5px;margin-top:2px}
.room-heading{padding:6px 7px}.room-heading p{font-size:clamp(.65rem,2.4vw,.95rem)}.room-progress{position:static;display:block;font-size:.55rem;margin-top:2px}
.room{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:7px}
.arena{padding:0 4px}.card{padding:5px}.corner{font-size:clamp(1.05rem,4vw,1.5rem)}
.illustration{margin:2px 0;border-width:2px}.kind{font-size:clamp(.65rem,2.6vw,.85rem)}.power{font-size:.65rem}
.actions{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.action-button{flex-direction:column;gap:1px;font-size:clamp(.5rem,1.8vw,.72rem);padding:4px 2px}
.action-button>span:first-child{font-size:1.35rem}
.log{padding:4px 8px}.log-icon{display:none}.log p{font-size:.72rem}.log .section-label{font-size:.58rem}
}
@media(max-height:620px) and (orientation:landscape){
.game-shell{grid-template-rows:minmax(45px,13vh) minmax(37px,10vh) minmax(0,1fr) minmax(40px,12vh) minmax(30px,8vh)}
.brand h1{font-size:clamp(1.5rem,5vh,2.4rem)}.brand p{margin:1px 0 0}
.room{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:1fr}
.corner{font-size:1.1rem}.kind{font-size:.7rem}.power{display:none}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Refinamentos de interação: prévia de dano, feedback da HUD e botões. */
.card.inspected:not(:disabled) {
  transform: translateY(-5px);
  box-shadow: inset 0 0 0 4px #f5ddb0, 0 0 0 3px #ffd67a,
              0 0 27px #ffb938b0, 0 13px 24px #000;
}
.hud-pulse { animation: hud-pulse .45s ease-out; }
.potion-spent { color: #a2a4a2; }
.action-button:not(:disabled):active { transform: translateY(2px); }
.action-button:not(:disabled):hover { filter: brightness(1.17); }
.action-button:focus-visible { outline: 3px solid #ffdf99; outline-offset: 2px; }
@keyframes hud-pulse {
  0%, 100% { filter: brightness(1); }
  35% { filter: brightness(1.9); text-shadow: 0 0 12px #ffbe68; }
}
@media (hover:none) {
  .card.inspected:not(:disabled) { transform: none; }
}
@media (prefers-reduced-motion:reduce) {
  .hud-pulse { animation:none!important; }
}

/* Correção: o título deve respeitar a largura disponível no painel. */
.brand { overflow: hidden; min-width: 0; }
.brand-copy { min-width: 0; flex: 1 1 auto; }
.brand h1 {
  display: block;
  max-width: 100%;
  width: 100%;
  font-size: clamp(1.1rem, 3.55vw, 3.45rem);
  letter-spacing: -.065em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.brand p {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  font-size: clamp(.45rem, .76vw, .87rem);
  letter-spacing: .075em;
}
@media (max-width: 900px) {
  .brand h1 { font-size: clamp(1rem, 3.2vw, 2.35rem); }
}
@media (max-width: 600px) {
  .brand h1 { font-size: clamp(1.15rem, 6vw, 2.1rem); }
  .brand p { font-size: clamp(.42rem, 1.6vw, .62rem); }
}

/* HUD CSS refinada: molduras, alinhamento e tipografia sem imagens de interface. */
:root{--metal:#b99258;--panel:#101b22f0;--panel-edge:#7b5a37}
.brand,.hud,.room-heading,.log{
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.brand{
  border:2px solid #8e5b36;
  background:linear-gradient(135deg,#56261b,#341714 58%,#170e0e);
  box-shadow:inset 0 0 0 2px #21100b,inset 0 0 22px #000a,0 5px 20px #0009;
}
.brand::after{inset:5px;border:1px solid #d09a574d}
.brand-copy{display:flex;flex-direction:column;justify-content:center;min-width:0}
.brand h1{
  font-size:clamp(1rem,2.8vw,3.15rem);
  letter-spacing:-.055em;
  text-overflow:clip;
}
.brand p{font-size:clamp(.45rem,.72vw,.82rem);letter-spacing:.07em}
.hud{
  align-items:stretch;
  padding:clamp(6px,1vh,12px);
  background:linear-gradient(180deg,#24333bf2,#0d151cef);
  border:2px solid var(--panel-edge);
  box-shadow:inset 0 0 0 2px #1b2529,0 5px 18px #0009;
}
.hud-item{
  min-width:0;
  justify-content:flex-start;
  gap:clamp(5px,.7vw,12px);
  padding:0 clamp(4px,.65vw,12px);
}
.hud-item:not(:last-child){border-right:1px solid #b78a4c70}
.hud-icon{
  width:clamp(23px,2.4vw,40px);
  text-align:center;
  font-size:clamp(1.3rem,2.5vw,2.5rem);
}
.hud-copy{min-width:0;flex:1;gap:2px}
.hud-label{font:700 clamp(.59rem,.8vw,.9rem) system-ui,sans-serif;letter-spacing:.12em}
.hud-copy strong{
  display:block;
  width:100%;
  font-size:clamp(.78rem,1.38vw,1.35rem);
  line-height:1.15;
  font-weight:700;
}
.hud-copy small{font-size:clamp(.56rem,.73vw,.81rem)}
.life-track{width:100%;height:8px;margin-top:5px}
.room-heading{
  width:min(720px,100%);
  border:2px solid #957149;
  border-radius:8px;
  clip-path:none;
  background:linear-gradient(90deg,#101921e9,#26323be9 50%,#101921e9);
  box-shadow:inset 0 0 0 2px #111c23,0 4px 16px #0009;
}
.room-heading .section-label{font-weight:bold}
.room-heading p{padding:0 68px;font-size:clamp(.78rem,1.15vw,1.1rem)}
.room-progress{right:12px;top:50%;transform:translateY(-50%);white-space:nowrap}
.action-button{
  border-width:2px;
  border-radius:9px;
  box-shadow:inset 0 1px 0 #f3d2a733,inset 0 -3px 0 #0005,0 4px 10px #0009;
  transition:filter .15s,transform .15s,box-shadow .15s;
}
.action-button:not(:disabled):hover{
  filter:brightness(1.15);
  box-shadow:inset 0 1px 0 #f3d2a755,0 0 0 1px #e1ae6d,0 6px 15px #0009;
}
.action-button:disabled{opacity:.55;filter:saturate(.45)}
.log{
  border:2px solid #8c673d;
  border-radius:8px;
  background:linear-gradient(90deg,#0c141af2,#233039ef,#0c141af2);
}
.log-copy{min-width:0;max-width:100%}
@media (max-width:1050px){
  .topbar{grid-template-columns:minmax(155px,.95fr) minmax(0,2.3fr) auto;gap:8px}
  .brand-ornament{font-size:1.6rem}
  .brand h1{font-size:clamp(1rem,2.5vw,2.2rem)}
  .hud-item{padding:0 4px;gap:4px}
  .hud-icon{width:22px;font-size:1.45rem}
  .hud-copy small{font-size:.6rem}
}
@media (max-width:600px){
  .game-shell{
    grid-template-rows:minmax(105px,18dvh) minmax(48px,8dvh) minmax(0,1fr) minmax(58px,10dvh) minmax(42px,7dvh);
  }
  .topbar{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr) minmax(48px,1fr);gap:5px}
  .brand{padding:5px 10px}
  .brand-ornament{display:none}
  .brand h1{font-size:clamp(1.25rem,5.5vw,2rem)}
  .brand p{font-size:clamp(.43rem,1.7vw,.65rem)}
  .hud{grid-column:1/-1;grid-row:2;padding:4px 3px}
  .hud-item{gap:3px;padding:0 3px}
  .hud-icon{width:15px;font-size:1.1rem}
  .hud-label{font-size:.52rem;letter-spacing:.02em}
  .hud-copy strong{font-size:clamp(.59rem,2.1vw,.84rem)}
  .hud-copy small{display:none}
  .life-track{height:5px;margin-top:2px}
  .room-heading{padding:5px 9px}
  .room-heading p{padding:0;font-size:clamp(.62rem,2.3vw,.84rem)}
  .room-progress{position:static;transform:none;display:block;font-size:.56rem;margin-top:2px}
  .action-button{gap:2px;padding:3px 1px}
  .action-button>span:first-child{font-size:1.25rem}
  .log{padding:4px 8px}
}
@media (max-height:620px) and (orientation:landscape){
  .game-shell{grid-template-rows:minmax(44px,13dvh) minmax(36px,10dvh) minmax(0,1fr) minmax(39px,12dvh) minmax(28px,8dvh)}
  .brand p{display:none}
  .hud-copy small{display:none}
  .room-heading p{padding:0 55px}
}
@media (max-height:400px){
  .log{display:none}
  .game-shell{grid-template-rows:minmax(40px,14dvh) minmax(30px,10dvh) minmax(0,1fr) minmax(35px,14dvh)}
}

/* Cenário dungeon: imagem centralizada, proporção preservada e legibilidade. */
body::before {
  inset:0;
  background-image:linear-gradient(180deg,rgba(5,9,13,.54),rgba(5,9,13,.36) 45%,rgba(5,9,13,.62)),url("../assets/dungeon.webp");
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  filter:none;
}

/* Atmosfera da masmorra: efeitos decorativos, sem bloquear os controles. */
body{isolation:isolate}
body::before{z-index:-3}
body::after{z-index:-2}
.dungeon-atmosphere{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:layout paint}
.torchlight{position:absolute;width:48vw;height:88vh;top:2%;mix-blend-mode:normal;opacity:.30;filter:blur(30px);will-change:opacity,transform;animation:torch-flicker 4.8s ease-in-out infinite}
.torchlight-left{left:-21vw;background:radial-gradient(ellipse,#ff9b28aa 0%,#e767163c 32%,transparent 69%)}
.torchlight-right{right:-19vw;top:12%;background:radial-gradient(ellipse,#fcb04b99 0%,#f26a183b 35%,transparent 71%);animation-delay:-2.1s;animation-duration:5.6s}
.mist{position:absolute;left:-25%;width:150%;height:32%;bottom:-13%;opacity:.24;filter:blur(30px);background:radial-gradient(ellipse at 50% 80%,#9daeb39c,transparent 68%);animation:mist-drift 18s ease-in-out infinite alternate}
.mist-far{bottom:16%;height:18%;opacity:.11;filter:blur(40px);animation-duration:25s;animation-direction:alternate-reverse}
.embers{position:absolute;inset:0}
.embers i{position:absolute;bottom:-8px;left:var(--x);width:3px;height:3px;border-radius:50%;background:#ffd08b;box-shadow:0 0 9px 3px #f18b2c8c;opacity:0;animation:ember-rise var(--t) linear infinite;animation-delay:var(--d)}
.embers i:nth-child(1){--x:7%;--t:9s;--d:-2s}
.embers i:nth-child(2){--x:13%;--t:12s;--d:-8s}
.embers i:nth-child(3){--x:19%;--t:10s;--d:-5s}
.embers i:nth-child(4){--x:24%;--t:13s;--d:-10s}
.embers i:nth-child(5){--x:77%;--t:9s;--d:-6s}
.embers i:nth-child(6){--x:82%;--t:11s;--d:-3s}
.embers i:nth-child(7){--x:89%;--t:14s;--d:-12s}
.embers i:nth-child(8){--x:94%;--t:10s;--d:-7s}
.embers i:nth-child(9){--x:10%;--t:15s;--d:-4s}
.embers i:nth-child(10){--x:17%;--t:11s;--d:-9s}
.embers i:nth-child(11){--x:84%;--t:12s;--d:-1s}
.embers i:nth-child(12){--x:91%;--t:13s;--d:-11s}
@keyframes torch-flicker{0%,100%{opacity:.25;transform:scale(1)}16%{opacity:.38}32%{opacity:.28;transform:scale(1.06)}48%{opacity:.41}63%{opacity:.27}81%{opacity:.35;transform:scale(.98)}}
@keyframes mist-drift{from{transform:translateX(-3%) translateY(0)}to{transform:translateX(3%) translateY(-5%)}}
@keyframes ember-rise{0%{opacity:0;transform:translate(0,0) scale(.6)}12%{opacity:.8}75%{opacity:.45}100%{opacity:0;transform:translate(35px,-78vh) scale(.15)}}
@media(max-width:650px){.torchlight{width:65vw;filter:blur(20px);opacity:.2}.mist{opacity:.13}.embers i:nth-child(n+7){display:none}}
@media(prefers-reduced-motion:reduce){.torchlight,.mist,.embers i{animation:none!important}.embers{display:none}.torchlight{opacity:.24}.mist{opacity:.12}}

/* Pintura de fundo e recortes do primeiro plano usam a mesma projeção cover. */
body::before{
 inset:0!important;
 background:linear-gradient(180deg,#070b1059,#06080a39 48%,#06080a61),
 url("../assets/dungeon.webp") center center / cover no-repeat!important;
 filter:none!important;
 z-index:-3!important;
}
body::after{z-index:-2!important}
.dungeon-atmosphere{z-index:-1!important}
.game-shell{position:relative;z-index:1}
.foreground-scene{
 position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden;
}
.foreground-prop{
 position:absolute;inset:0;
 background-position:center center;
 background-repeat:no-repeat;
 background-size:cover;
 pointer-events:none;
}
.foreground-prop-left{background-image:url("../assets/foreground-left.webp")}
.foreground-prop-right{background-image:url("../assets/foreground-right.webp")}
/* O cenário recortado fica na frente das cartas, mas não intercepta interações. */
@media(max-width:700px){
 .foreground-scene{opacity:.72}
}


/* Layout refinado — um único conjunto de regras finais para cartas e camadas.
   HUD > recortes do cenário > cartas > fundo. */
body{isolation:isolate}
.game-shell{position:relative;z-index:auto;isolation:auto}
.foreground-scene{
  position:fixed;inset:0;z-index:30;pointer-events:none;
}
.foreground-prop{pointer-events:none}
.arena{position:relative;z-index:10;min-height:0;align-items:flex-start;justify-content:center}
.room{
  position:relative;z-index:auto;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:minmax(0,1fr);
  min-height:0;
}
.card{
  position:relative;z-index:20;
  min-width:0;min-height:0;overflow:hidden;
  padding:clamp(5px,.7vh,9px);
}
.corner{flex:none}
.illustration{flex:1 1 auto;min-height:0;margin:3px 0}
.kind,.power{flex:none;line-height:1.12}
.topbar,.room-heading,.actions,.log{
  position:relative;z-index:40;
}
.hud,.brand,.topbuttons{position:relative;z-index:41}
dialog[open]{z-index:100}
@media (min-width:701px){
  .arena{padding:clamp(3px,.6vh,9px) clamp(18px,3vw,48px) 0}
  .room{
    width:min(76%,800px);
    height:min(82%,clamp(210px,42vh,400px));
    gap:clamp(8px,1.1vw,15px);
    margin:0 auto;
  }
  .corner{font-size:clamp(1.15rem,2.1vw,2rem)}
  .kind{font-size:clamp(.72rem,1.1vw,1rem)}
  .power{font-size:clamp(.65rem,.95vw,.85rem)}
}
@media (min-width:701px) and (max-height:760px){
  .room{width:min(73%,740px);height:min(79%,39vh)}
}
@media (max-width:700px){
  .arena{padding:4px 8px 0}
  .room{
    width:min(90%,490px);
    height:86%;
    margin:0 auto;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(0,1fr));
    gap:7px;
  }
  .card{padding:4px}
  .corner{font-size:clamp(.9rem,3vw,1.3rem)}
  .kind{font-size:clamp(.57rem,2vw,.8rem)}
  .power{font-size:clamp(.54rem,1.7vw,.7rem)}
  .foreground-scene{opacity:.78}
}
@media (max-height:620px) and (orientation:landscape){
  .room{
    width:min(76%,780px);
    height:92%;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-rows:minmax(0,1fr);
  }
  .power{display:block}
}
@media (max-height:450px) and (min-width:701px){
  .room{width:min(74%,690px);height:92%}
}

/* Profundidade dinâmica: deslocamentos sutis sem alterar a ordem das camadas. */
:root{--parallax-x:0px;--parallax-y:0px}
body::before{
  transform:translate3d(calc(var(--parallax-x) * -.16),calc(var(--parallax-y) * -.16),0) scale(1.035);
  transition:transform .24s ease-out;
}
.foreground-prop{
  transform:translate3d(var(--parallax-x),var(--parallax-y),0) scale(1.025);
  transition:transform .24s ease-out;
  will-change:transform;
}
.foreground-prop-right{
  transform:translate3d(calc(var(--parallax-x) * 1.15),calc(var(--parallax-y) * 1.15),0) scale(1.025);
}
.mist-near{opacity:.17}
.mist-far{opacity:.09}
@media (hover:none),(pointer:coarse){
  body::before,.foreground-prop,.foreground-prop-right{transform:none;transition:none}
}
@media (prefers-reduced-motion:reduce){
  body::before,.foreground-prop,.foreground-prop-right{transform:none!important;transition:none!important}
}

/* Parallax EXCLUSIVAMENTE no background. Objetos frontais permanecem fixos. */
.foreground-prop,
.foreground-prop-right{
  transform:none!important;
  transition:none!important;
  will-change:auto!important;
}
body::before{
  transform:translate3d(var(--parallax-x),var(--parallax-y),0) scale(1.06);
  transition:transform .24s ease-out;
  will-change:transform;
}
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){
  body::before{transform:scale(1.06)!important;transition:none!important}
}

/* Artes individuais, sem símbolos de naipe sobre a ilustração. */
.card-art{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.corner{letter-spacing:0}

/* Ilustrações refinadas: recorte sem a moldura duplicada do mosaico.
   A área da arte não comprime o título nem a descrição. */
.card{display:flex;flex-direction:column}
.card .illustration{
  display:block;
  position:relative;
  width:100%;
  min-width:0;
  min-height:0;
  flex:1 1 0;
  overflow:hidden;
  border-radius:4px;
  background:#121923;
  border:1px solid #705338;
}
.card .card-art{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 45%;
  filter:contrast(1.035) saturate(1.06);
}
.card .kind,.card .power,.card .corner{
  position:relative;
  z-index:1;
  flex-shrink:0;
  overflow-wrap:normal;
  white-space:normal;
}
.card .kind{line-height:1.12}
.card .power{line-height:1.12}
@media(max-width:700px){
 .card .illustration{margin:2px 0}
 .card .kind,.card .power{line-height:1.08}
}

/* Inclinação 3D das cartas, somente para mouse. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .room{perspective:1100px}
  .room .card{
    --tilt-x:0deg;--tilt-y:0deg;--glow-x:50%;--glow-y:50%;
    transform-style:preserve-3d;
    transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transition:transform 180ms ease-out,box-shadow 180ms ease-out,filter 180ms ease-out;
  }
  .room .card.tilting{
    transition:transform 65ms linear,box-shadow 180ms ease-out;
    box-shadow:0 14px 25px #0009,0 0 14px #c9965966;
  }
  .room .card.tilting::after{
    content:"";position:absolute;inset:0;z-index:8;
    pointer-events:none;border-radius:inherit;
    background:radial-gradient(circle at var(--glow-x) var(--glow-y),#fff6d52a,transparent 48%);
  }
}
@media (prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){
 .room .card{--tilt-x:0deg;--tilt-y:0deg}
 .room .card.tilting::after{display:none}
}

/* Correção: a animação de distribuição não deve manter transform:none
   após terminar, pois isso impede rotateX/rotateY de funcionar. */
.room .card { animation-fill-mode:backwards; }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 .room .card.tilting,
 .room .card.tilting:hover:not(:disabled),
 .room .card.tilting:focus-visible,
 .room .card.tilting.inspected:not(:disabled) {
   transform:perspective(900px) translateY(-4px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) !important;
   transform-origin:center center;
 }
 .room .card:not(.tilting):hover:not(:disabled) {
   transform:translateY(-5px);
 }
}

/* Visual v2: transformação exclusiva com prioridade sobre hover/inspected.
   A animação deal não pode continuar impondo sua transformação após entrar. */
#room .card { animation-fill-mode:backwards; transform-origin:50% 50%; }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 #room .card.tilting,
 #room .card.tilting:hover:not(:disabled),
 #room .card.tilting:focus-visible,
 #room .card.tilting.inspected:not(:disabled) {
   transform:perspective(850px) translateY(-6px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(1.025) !important;
   box-shadow:0 18px 28px #000a,0 0 0 2px #e6b86a,0 0 23px #d9a94d66 !important;
   transition:transform 75ms ease-out,box-shadow 170ms ease-out;
   z-index:10;
 }
 #room .card.tilting::after {
   content:"";position:absolute;inset:0;border-radius:inherit;z-index:9;
   pointer-events:none;
   background:radial-gradient(circle at var(--glow-x,50%) var(--glow-y,50%),#fff5b94b 0%,#ffe8b214 34%,transparent 65%);
   mix-blend-mode:normal;
 }
}
#room .card.card-pressed { filter:brightness(1.15); }
@media (prefers-reduced-motion:reduce) {
 #room .card {transition:none !important}
 #room .card.tilting::after{display:none}
}

/* Ação de carta: partículas sobre a carta escolhida, sem alterar o layout. */
.card-action-fx{
 position:fixed;z-index:9999;pointer-events:none;
 width:1px;height:1px;overflow:visible;
 animation:card-action-fade .8s ease-out both;
}
.card-action-fx span{
 position:absolute;left:-10px;top:-13px;
 font-size:22px;font-weight:900;
 text-shadow:0 0 10px currentColor,0 2px 3px #000;
 animation:card-action-particle .72s cubic-bezier(.2,.7,.2,1) both;
 animation-delay:var(--stagger);
}
.card-action-fx.fx-monster{color:#f16c54}
.card-action-fx.fx-potion{color:#82f3a6}
.card-action-fx.fx-weapon{color:#f6d07d}
@keyframes card-action-particle{
 0%{opacity:0;transform:rotate(var(--angle)) translateY(0) scale(.45)}
 18%{opacity:1}
 85%{opacity:.95}
 100%{opacity:0;transform:rotate(var(--angle)) translateY(calc(-1 * var(--distance))) scale(1.2)}
}
@keyframes card-action-fade{0%,70%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.card-action-fx{display:none}}

/* Efeitos de impacto V4: anel expansivo, clarão e 12 partículas. */
.card-action-fx{
 position:fixed;z-index:9999;pointer-events:none;
 width:1px;height:1px;overflow:visible;
 animation:card-action-fade .9s ease-out both;
 --fx-color:#e6c174;--fx-rgb:230,193,116;
}
.card-action-fx.fx-monster{--fx-color:#ff685d;--fx-rgb:255,104,93;color:var(--fx-color)}
.card-action-fx.fx-potion{--fx-color:#76ffc1;--fx-rgb:118,255,193;color:var(--fx-color)}
.card-action-fx.fx-weapon{--fx-color:#ffdc78;--fx-rgb:255,220,120;color:var(--fx-color)}
.card-action-fx.fx-discard{--fx-color:#aaa5a0;--fx-rgb:170,165,160;color:var(--fx-color)}
.card-action-fx .fx-particle{
 position:absolute;left:-9px;top:-13px;
 font-size:19px;font-weight:900;line-height:1;
 color:var(--fx-color);
 text-shadow:0 0 8px var(--fx-color),0 2px 3px #000;
 animation:card-action-particle .72s cubic-bezier(.16,.75,.22,1) both;
 animation-delay:var(--stagger);
}
.card-action-fx .fx-ring{
 position:absolute;left:-9px;top:-9px;width:18px;height:18px;
 border:2px solid var(--fx-color);border-radius:50%;
 box-shadow:0 0 12px rgba(var(--fx-rgb),.9),inset 0 0 7px rgba(var(--fx-rgb),.55);
 animation:fx-impact-ring .52s ease-out both;
}
.card-action-fx .fx-flash{
 position:absolute;left:-20px;top:-20px;width:40px;height:40px;
 border-radius:50%;
 background:radial-gradient(circle,rgba(var(--fx-rgb),.9),rgba(var(--fx-rgb),.25) 38%,transparent 75%);
 animation:fx-impact-flash .42s ease-out both;
}
@keyframes fx-impact-ring{
 0%{opacity:1;transform:scale(.2)}
 100%{opacity:0;transform:scale(5.5)}
}
@keyframes fx-impact-flash{
 0%{opacity:0;transform:scale(.3)}
 20%{opacity:1;transform:scale(1.5)}
 100%{opacity:0;transform:scale(3)}
}
@keyframes card-action-particle{
 0%{opacity:0;transform:rotate(var(--angle)) translateY(0) scale(.4)}
 15%{opacity:1}
 80%{opacity:.95}
 100%{opacity:0;transform:rotate(var(--angle)) translateY(calc(-1 * var(--distance))) scale(.9)}
}
@media(prefers-reduced-motion:reduce){.card-action-fx{display:none!important}}

/* V5: cartas ligeiramente mais largas, sem alterar a altura nem as camadas. */
@media (min-width:701px){
  .arena .room{width:min(84%,890px)}
}
@media (min-width:701px) and (max-height:760px){
  .arena .room{width:min(81%,830px)}
}
@media (max-width:700px){
  .arena .room{width:min(96%,530px)}
}
@media (max-height:620px) and (orientation:landscape){
  .arena .room{width:min(84%,860px)}
}
@media (max-height:450px) and (min-width:701px){
  .arena .room{width:min(82%,760px)}
}

/* V6 — Arte full bleed, naipe restaurado, informações sobrepostas.
   O enquadramento não adiciona margens laterais na imagem. */
#room .card{
  position:relative;
  display:block;
  padding:0;
  isolation:isolate;
  overflow:hidden;
  border:2px solid #9c713f;
  border-radius:12px;
  background:#15100e;
  color:#fff4d9;
  box-shadow:inset 0 0 0 1px #e7bd76,0 6px 0 #322012,0 13px 22px #000b;
}
#room .card::before{
  content:"";
  position:absolute;
  z-index:3;
  inset:4px;
  border:1px solid #c49b6280;
  border-radius:8px;
  pointer-events:none;
}
#room .card .illustration{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  min-height:0;
  overflow:hidden;
  background:#15100e;
}
#room .card .card-art{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:50% 40%;
  filter:contrast(1.06) saturate(1.08);
}
#room .card .illustration::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,#0c080b85 0%,transparent 24%,transparent 45%,#100b0ca6 70%,#110b0aee 100%);
}
#room .card .suit-badge{
  position:absolute;
  top:8px;
  left:8px;
  z-index:5;
  width:clamp(24px,2.8vw,38px);
  height:clamp(28px,3.2vw,42px);
  display:grid;
  place-items:center;
  font-size:clamp(1.2rem,2vw,1.9rem);
  line-height:1;
  font-weight:800;
  color:#f4eee4;
  text-shadow:0 2px 2px #000;
  background:linear-gradient(145deg,#302827,#120f14);
  border:1px solid #d5a766;
  border-radius:7px 7px 10px 10px;
  box-shadow:0 3px 8px #000a,inset 0 0 0 1px #000;
}
#room .card.red .suit-badge{color:#ff6765}
#room .card .corner{
  position:absolute;
  top:8px;
  right:8px;
  left:auto;
  z-index:5;
  display:grid;
  place-items:center;
  min-width:clamp(28px,3vw,43px);
  height:clamp(28px,3vw,43px);
  padding:0 5px;
  border-radius:50%;
  border:2px solid #e3b96e;
  background:radial-gradient(circle at 35% 30%,#ad4830,#651d1d 72%);
  box-shadow:0 2px 8px #000c,inset 0 0 0 1px #330d0d;
  color:#fff8e6;
  text-shadow:0 2px 2px #000;
  font-size:clamp(.95rem,1.8vw,1.6rem);
  line-height:1;
}
#room .card .card-footer{
  position:absolute;
  z-index:4;
  bottom:0;
  left:0;
  right:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  padding:7px 8px 9px;
  background:linear-gradient(180deg,transparent,#0b0808c7 14%,#17100eef 100%);
  color:#fff3d7;
}
#room .card .kind{
  display:block;
  margin:0;
  padding:5px 3px;
  border:1px solid #a7824b;
  border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg,#30221d,#151010);
  color:#fff2d6;
  font-family:Georgia,serif;
  font-size:clamp(.68rem,1.1vw,1rem);
  font-weight:700;
  letter-spacing:.035em;
  line-height:1.1;
  text-align:center;
  text-shadow:0 1px 2px #000;
}
#room .card .power{
  display:block;
  margin:3px 0 0;
  padding:5px 3px;
  border:1px solid #8b6543;
  border-radius:3px;
  background:linear-gradient(180deg,#e5c99c,#c5a678);
  color:#392015;
  font-size:clamp(.62rem,.9vw,.84rem);
  line-height:1.15;
  font-weight:700;
  text-align:center;
  text-shadow:none;
}
@media(max-width:700px){
 #room .card .suit-badge{top:5px;left:5px;width:26px;height:30px;font-size:1.25rem}
 #room .card .corner{top:5px;right:5px;min-width:28px;height:28px;font-size:1rem}
 #room .card .card-footer{padding:4px 5px 6px}
 #room .card .kind{padding:3px 2px;font-size:clamp(.61rem,2vw,.78rem)}
 #room .card .power{padding:3px 2px;font-size:clamp(.56rem,1.8vw,.69rem)}
}
@media(max-height:620px) and (orientation:landscape){
 #room .card .card-footer{padding:3px 5px 5px}
 #room .card .kind{padding:2px;font-size:.65rem}
 #room .card .power{padding:2px;font-size:.58rem}
}

/* Ilustrações em WebP HD sem texto, borda ou elementos de interface no arquivo. */
#room .card .card-art{
 object-fit:cover;
 object-position:50% 45%;
 image-rendering:auto;
}

/* Mobile motion controls: explicit opt-in and device orientation. */
.gyro-controls[hidden]{display:none!important}
.gyro-controls{
 position:fixed;z-index:110;bottom:calc(12px + env(safe-area-inset-bottom));left:50%;
 transform:translateX(-50%);width:min(92vw,430px);
 display:flex;align-items:center;gap:9px;
 padding:8px 10px;border:1px solid #aa8451;border-radius:12px;
 background:#181412ed;color:#f5e5ca;box-shadow:0 5px 24px #000a;
 font:12px/1.25 system-ui,sans-serif;
}
.gyro-controls button{
 flex-shrink:0;border:1px solid #caa56a;border-radius:8px;
 background:#50351f;color:#fff4da;padding:10px 9px;
 font:600 12px system-ui,sans-serif;cursor:pointer;
}
.gyro-controls button[aria-pressed=true]{background:#33503b}
.gyro-controls span{min-width:0}
@media (hover:none),(pointer:coarse){
 html.gyro-active #room .card,
 html.gyro-active #room .card:hover,
 html.gyro-active #room .card.inspected{
   --tilt-x:var(--gyro-card-x,0deg);
   --tilt-y:var(--gyro-card-y,0deg);
   transform:perspective(900px) rotateX(var(--gyro-card-x,0deg)) rotateY(var(--gyro-card-y,0deg)) !important;
   transition:transform 110ms linear,box-shadow 180ms ease-out;
   transform-origin:center center;
 }
 html.gyro-active #room .card::after{
   content:"";position:absolute;inset:0;z-index:8;pointer-events:none;
   border-radius:inherit;
   background:radial-gradient(circle at var(--gyro-glow-x,50%) var(--gyro-glow-y,50%),#fff0bf25,transparent 52%);
 }
}
@media (prefers-reduced-motion:reduce){
 html.gyro-active #room .card{transform:none!important}
 .gyro-controls{display:none}
}


/* V10: menu de configurações e regras, sem barra de controles flutuante. */
#help{display:inline-flex;align-items:center;gap:7px;justify-content:center;padding:0 12px;min-width:68px}
#help .menu-label{font-size:11px;font-weight:800;letter-spacing:.06em}
.settings-dialog{width:min(94vw,520px);max-height:min(86dvh,760px);overflow-y:auto;padding:0;background:#171512;color:#f5e6ce;border:2px solid #b48c58;border-radius:14px;box-shadow:0 20px 70px #000e}
.settings-dialog::backdrop{background:#000b;backdrop-filter:blur(4px)}
.settings-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;background:linear-gradient(110deg,#33251b,#191614);border-bottom:1px solid #9a7548}
.settings-heading h2{margin:0;font:700 1.4rem Georgia,serif;color:#f7d9a1}
#closeRules{font-size:1.25rem;min-width:38px;min-height:38px;border:1px solid #b48c58;border-radius:8px;color:#f5e6ce;background:#382b20;cursor:pointer}
.settings-section{padding:15px 20px;border-bottom:1px solid #6e553b}
.settings-section h3{margin:0 0 12px;color:#e6be82;font:700 1.08rem Georgia,serif}
.settings-option{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 0}
.settings-option>div{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.settings-option strong{font-size:.98rem;color:#fff1d6}
.settings-option small{font-size:.8rem;line-height:1.35;color:#c6b6a0}
.settings-switch{flex-shrink:0;min-width:91px;min-height:40px;border:1px solid #8e7152;border-radius:22px;padding:7px 12px;background:#40342e;color:#ddd0c0;font-weight:700;cursor:pointer}
.settings-switch.is-on{background:#31543e;border-color:#7fc29b;color:#eaffed}
.settings-switch:focus-visible,#closeRules:focus-visible{outline:3px solid #f3d18e;outline-offset:3px}
.settings-status{margin:0 0 8px;font-size:.78rem;color:#d3b98f;line-height:1.4}
.rules-section p{margin:0 0 11px;color:#e1d3c0;line-height:1.5;font-size:.9rem}
@media(max-width:480px){.settings-heading{padding:13px 15px}.settings-section{padding:13px 15px}.settings-option{gap:9px}.settings-switch{min-width:83px}}

/* V11: botão do menu redondo, somente com ícone hambúrguer. */
#help {
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  flex: 0 0 42px;
  width: 42px;
  min-width: 42px;
  max-width: 42px;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  font-size: 22px;
  line-height: 1;
  text-align: center;
}
#help:focus-visible {
  outline: 3px solid #f3d18e;
  outline-offset: 3px;
}


/* V12 MOBILE FIRST: layout independente da altura fixa do desktop. */
html{min-width:280px}
button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
@media (max-width:700px) and (orientation:portrait){
  html,body{min-width:280px;min-height:100%;overflow-x:hidden}
  body{overscroll-behavior-y:contain}
  .game-shell{
    box-sizing:border-box;
    width:100%;max-width:100%;
    min-height:100svh;height:auto;
    min-height:100dvh;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto minmax(0,1fr) auto auto;
    align-content:start;
    gap:clamp(5px,1.1svh,10px);
    padding:calc(7px + env(safe-area-inset-top)) max(9px,env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom)) max(9px,env(safe-area-inset-left));
    overflow:visible;
  }
  .topbar{
    display:grid;
    grid-template-columns:minmax(0,1fr) 44px;
    grid-template-rows:auto auto;
    align-items:center;
    gap:6px 8px;
    min-height:0;
  }
  .brand{min-width:0;min-height:43px;padding:5px 10px}
  .brand-ornament{display:none}
  .brand-copy{min-width:0}
  .brand h1{font-size:clamp(1.18rem,5.5vw,1.7rem);white-space:nowrap}
  .brand p{font-size:clamp(.43rem,1.65vw,.62rem);white-space:nowrap}
  .topbuttons{grid-column:2;grid-row:1;justify-self:center;align-self:center}
  #help{width:44px;min-width:44px;max-width:44px;height:44px;min-height:44px;max-height:44px;flex-basis:44px;border-radius:50%;padding:0}
  .hud{
    grid-column:1/-1;grid-row:2;
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0;min-height:62px;padding:6px 3px;
    box-sizing:border-box;
  }
  .hud-item{min-width:0;gap:3px;padding:2px clamp(2px,.7vw,5px);align-items:center}
  .hud-icon{width:auto;flex:0 0 auto;font-size:clamp(.85rem,3.5vw,1.1rem)}
  .hud-copy{min-width:0}
  .hud-label{font-size:clamp(.48rem,1.65vw,.62rem);letter-spacing:0}
  .hud-copy strong{font-size:clamp(.57rem,2.1vw,.84rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .hud-copy small{display:none}
  .life-track{height:4px;margin-top:3px}
  .room-heading{
    box-sizing:border-box;
    width:100%;max-width:100%;
    min-height:49px;
    padding:6px 10px;
    clip-path:none;border-radius:7px;
  }
  .room-heading p{font-size:clamp(.7rem,2.5vw,.86rem);line-height:1.3;padding:0 2px}
  .room-progress{display:block;position:static;font-size:.62rem;margin-top:3px}
  .arena{
    width:100%;min-width:0;min-height:0;
    padding:0;
    display:flex;justify-content:center;align-items:stretch;
    position:relative;z-index:10;
  }
  .arena .room,#room{
    box-sizing:border-box;
    width:min(100%,490px);max-width:100%;
    height:auto;min-height:0;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(0,1fr));
    gap:clamp(7px,2.4vw,12px);
    margin:0 auto;
  }
  #room .card{
    box-sizing:border-box;
    width:100%;height:auto;
    min-width:0;min-height:0;
    aspect-ratio:0.83;
    padding:0;
    overflow:hidden;
    border-radius:clamp(8px,2.4vw,13px);
    touch-action:manipulation;
    -webkit-user-select:none;user-select:none;
  }
  #room .card .illustration{position:absolute;inset:0;width:100%;height:100%}
  #room .card .card-art{width:100%;height:100%;object-fit:cover}
  #room .card .suit-badge{top:5px;left:5px;width:clamp(26px,7vw,34px);height:clamp(28px,7.5vw,36px);font-size:clamp(1.1rem,4.3vw,1.45rem)}
  #room .card .corner{top:5px;right:5px;min-width:clamp(27px,7vw,35px);height:clamp(27px,7vw,35px);font-size:clamp(1rem,3.8vw,1.4rem)}
  #room .card .card-footer{padding:5px 5px 7px;max-width:100%}
  #room .card .kind{font-size:clamp(.65rem,2.45vw,.84rem);padding:3px 2px}
  #room .card .power{font-size:clamp(.59rem,2.15vw,.76rem);padding:3px 2px;line-height:1.15}
  .actions{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(46px,auto));
    gap:7px;width:100%;max-width:490px;margin:0 auto;
    min-height:0;
  }
  .actions .action-button{
    min-width:0;min-height:46px;height:auto;
    display:flex;align-items:center;justify-content:center;gap:6px;
    padding:8px 6px;border-radius:8px;
    font-size:clamp(.65rem,2.6vw,.85rem);
    white-space:normal;line-height:1.1;
  }
  .actions .action-button>span:first-child{font-size:1.1rem}
  .log{width:100%;max-width:490px;min-height:42px;box-sizing:border-box;padding:5px 9px;gap:6px}
  .log-icon{display:none}
  .log .section-label{font-size:.56rem}
  .log p{font-size:clamp(.68rem,2.3vw,.82rem);line-height:1.25}
  .foreground-scene{pointer-events:none;opacity:.45}
  .foreground-prop{transform:none!important;will-change:auto}
  .settings-dialog{max-height:calc(100dvh - 28px);max-width:calc(100vw - 20px)}
}
@media (max-width:700px) and (orientation:portrait) and (min-height:740px){
  .game-shell{min-height:100dvh}
  .arena .room,#room{width:min(100%,490px,calc((100dvh - 330px)*.83))}
}
@media (max-width:700px) and (orientation:portrait) and (max-height:739px){
  .game-shell{grid-template-rows:auto auto auto auto auto}
  .arena .room,#room{width:min(100%,430px)}
  .foreground-scene{opacity:.3}
}
@media (max-width:350px) and (orientation:portrait){
  .hud-icon{display:none}
  .hud-item{justify-content:center;padding:2px}
  .actions .action-button{font-size:.65rem}
}
@media (max-height:620px) and (orientation:landscape) and (pointer:coarse){
  .game-shell{padding-top:max(4px,env(safe-area-inset-top));padding-bottom:max(4px,env(safe-area-inset-bottom))}
  .foreground-scene{opacity:.3;pointer-events:none}
  .foreground-prop{transform:none!important}
  #help{width:40px;min-width:40px;max-width:40px;height:40px;min-height:40px;max-height:40px}
  .actions .action-button{min-height:38px;touch-action:manipulation}
}

/* V13 — Tela de abertura em camadas independentes para animação. */
body.title-open{overflow:hidden}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.title-screen{position:fixed;inset:0;z-index:1000;isolation:isolate;display:grid;place-items:center;overflow:hidden;background:#080b11}
.title-screen[hidden]{display:none!important}
.title-background{position:absolute;inset:-4%;z-index:-3;background:url("../assets/splash/dungeon_gate.webp") center center/cover no-repeat;animation:title-bg-enter 14s ease-out both;will-change:transform}
.title-vignette{position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 50% 48%,transparent 13%,#06080a3b 66%,#020204b8 100%),linear-gradient(180deg,#03060c38 0%,transparent 25%,#0505077a 100%);pointer-events:none}
.title-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(0px,1vh,10px);width:min(92vw,850px);transform:translateY(1.5vh)}
.title-logo{display:block;width:min(78vw,660px);height:auto;max-height:min(63dvh,650px);object-fit:contain;mix-blend-mode:normal;filter:drop-shadow(0 12px 16px #000c) drop-shadow(0 0 15px #12aef555);animation:title-logo-enter 1.05s cubic-bezier(.2,.9,.3,1) both,title-logo-float 5s ease-in-out 1.1s infinite;user-select:none;pointer-events:none}
.title-play{position:relative;z-index:3;display:grid;place-items:center;min-width:clamp(205px,30vw,360px);min-height:clamp(64px,10vh,88px);padding:10px 38px;cursor:pointer;border:3px solid #e5b76b;border-radius:12px;clip-path:polygon(5% 0,95% 0,100% 19%,100% 81%,95% 100%,5% 100%,0 81%,0 19%);background:linear-gradient(180deg,#9c1712,#590c0a 55%,#270606);box-shadow:inset 0 0 0 3px #2b100c,inset 0 6px 16px #ff9d3850,0 8px 0 #180906,0 15px 28px #000c,0 0 30px #f65c2438;color:#ffedbc;text-shadow:0 2px 0 #5c2408,0 0 15px #f5ae4b;font:900 clamp(1.6rem,4vw,2.5rem)/1 Georgia,serif;letter-spacing:.065em;transition:filter .2s,scale .2s;animation:title-button-enter .7s ease-out .55s both}
.title-play:hover{filter:brightness(1.2);scale:1.035}
.title-play:active{scale:.97}
.title-play:focus-visible{outline:4px solid #77d9ff;outline-offset:6px}
.title-embers{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.title-embers i{position:absolute;bottom:-8%;left:calc(4% + (var(--i) * 6%));width:4px;height:4px;border-radius:50%;background:#ffab41;box-shadow:0 0 11px 3px #f96a29a8;opacity:0;animation:title-ember calc(3.4s + var(--i)*.22s) linear calc(var(--i)*-.53s) infinite}
.title-embers i:nth-child(1){--i:1}.title-embers i:nth-child(2){--i:2}.title-embers i:nth-child(3){--i:3}.title-embers i:nth-child(4){--i:4}
.title-embers i:nth-child(5){--i:5}.title-embers i:nth-child(6){--i:6}.title-embers i:nth-child(7){--i:7}.title-embers i:nth-child(8){--i:8}
.title-embers i:nth-child(9){--i:9}.title-embers i:nth-child(10){--i:10}.title-embers i:nth-child(11){--i:11}.title-embers i:nth-child(12){--i:12}
.title-embers i:nth-child(13){--i:13}.title-embers i:nth-child(14){--i:14}.title-embers i:nth-child(15){--i:15}.title-embers i:nth-child(16){--i:16}
.title-screen.is-leaving{animation:title-fade-out .55s ease-in forwards;pointer-events:none}
@keyframes title-bg-enter{from{transform:scale(1.11)}to{transform:scale(1)}}
@keyframes title-logo-enter{from{opacity:0;transform:translateY(-22px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes title-logo-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes title-button-enter{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}
@keyframes title-ember{0%{opacity:0;transform:translate(0,0) scale(.4)}12%{opacity:.8}80%{opacity:.6}100%{opacity:0;transform:translate(35px,-95vh) scale(1.6)}}
@keyframes title-fade-out{to{opacity:0;transform:scale(1.035);visibility:hidden}}
@media(max-width:700px) and (orientation:portrait){
  .title-background{inset:-5%;background-position:center center}
  .title-content{width:100%;gap:clamp(8px,3vh,26px);transform:translateY(-2vh)}
  .title-logo{width:min(97vw,540px);max-height:55dvh}
  .title-play{min-width:min(75vw,320px);min-height:64px;font-size:clamp(1.55rem,7vw,2.1rem)}
}
@media(max-height:550px) and (orientation:landscape){
  .title-content{flex-direction:row;gap:3vw}
  .title-logo{width:min(52vw,450px);max-height:78dvh}
  .title-play{min-width:clamp(150px,24vw,260px);min-height:62px}
}
@media(prefers-reduced-motion:reduce){
 .title-background,.title-logo,.title-play,.title-embers i,.title-screen.is-leaving{animation:none!important}
 .title-screen.is-leaving{opacity:0}
}


/* V15: ações sempre acessíveis em celulares, inclusive telas baixas. */
@media (max-width:700px) and (orientation:portrait){
  html{height:auto;overflow-x:hidden}
  body:not(.title-open){
    height:auto;
    min-height:100dvh;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  body:not(.title-open) .game-shell{
    height:auto;
    min-height:100dvh;
    overflow:visible;
    grid-template-rows:auto auto auto auto auto;
    padding-bottom:calc(12px + env(safe-area-inset-bottom));
  }
  body:not(.title-open) .arena{min-height:0;overflow:visible}
  body:not(.title-open) .arena .room,
  body:not(.title-open) #room{
    width:min(100%,440px,calc((100dvh - 305px)*.83));
    min-width:0;
  }
  body:not(.title-open) .actions{
    position:sticky;
    bottom:env(safe-area-inset-bottom);
    z-index:35;
    padding:7px;
    box-sizing:border-box;
    border:1px solid #9a754880;
    border-radius:12px;
    background:linear-gradient(180deg,#15191df5,#090d12fa);
    box-shadow:0 -5px 22px #000a;
    margin:0 auto;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(48px,auto));
  }
  body:not(.title-open) #flee{display:flex!important;visibility:visible!important;min-height:48px}
  body:not(.title-open) .actions .action-button{min-height:48px}
}
@media (max-width:700px) and (orientation:portrait) and (max-height:620px){
  body:not(.title-open) .arena .room,
  body:not(.title-open) #room{width:min(100%,340px)}
}


/* V16 — barra fixa independente da altura da grade e do navegador móvel. */
@media (max-width:700px) and (orientation:portrait){
  html,body:not(.title-open){
    height:auto!important;
    min-height:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }
  body:not(.title-open) .game-shell{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    height:auto!important;
    min-height:100dvh!important;
    max-height:none!important;
    overflow:visible!important;
    padding-bottom:calc(132px + env(safe-area-inset-bottom))!important;
  }
  body:not(.title-open) .game-shell > .topbar,
  body:not(.title-open) .game-shell > .room-heading,
  body:not(.title-open) .game-shell > .arena,
  body:not(.title-open) .game-shell > .log{
    flex:0 0 auto;
    min-height:0;
  }
  body:not(.title-open) .arena{
    overflow:visible!important;
    width:100%;
    align-items:flex-start;
  }
  body:not(.title-open) .arena .room,
  body:not(.title-open) #room{
    width:min(100%,440px)!important;
    height:auto!important;
    grid-template-rows:repeat(2,auto)!important;
    align-content:start;
  }
  body:not(.title-open) #room .card{
    height:auto!important;
    aspect-ratio:.83!important;
  }
  body:not(.title-open) .actions{
    position:fixed!important;
    left:50%!important;
    right:auto!important;
    bottom:0!important;
    transform:translateX(-50%)!important;
    z-index:800!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,48px)!important;
    gap:7px!important;
    width:min(calc(100% - 12px),490px)!important;
    max-width:490px!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:7px 7px calc(7px + env(safe-area-inset-bottom))!important;
    border:1px solid #ad8657;
    border-radius:13px 13px 0 0;
    background:#0c1219f7;
    box-shadow:0 -5px 24px #000c;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    overflow:visible!important;
  }
  body:not(.title-open) .actions > .action-button{
    display:flex!important;
    flex-direction:row!important;
    justify-content:center!important;
    align-items:center!important;
    width:100%!important;
    height:48px!important;
    min-height:48px!important;
    max-height:none!important;
    min-width:0!important;
    margin:0!important;
    padding:5px 6px!important;
    font-size:clamp(.68rem,2.8vw,.88rem)!important;
    line-height:1.1!important;
    white-space:normal!important;
    overflow:visible!important;
  }
  body:not(.title-open) #flee,
  body:not(.title-open) #restart{
    display:flex!important;
    visibility:visible!important;
    opacity:1;
  }
  body:not(.title-open) .actions > .action-button > span{
    min-width:0;
  }
  body:not(.title-open) .actions > .action-button > span:first-child{
    font-size:1.15rem!important;
    flex:none;
  }
}

/* V17: cabeçalho da sala compacto, quatro cartas legíveis e ações fixas. */
@media (max-width:700px) and (orientation:portrait){
  body:not(.title-open) .room-heading{
    width:calc(100% - 20px)!important;
    min-height:0!important;
    padding:5px 10px!important;
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr) auto!important;
    gap:5px 9px!important;
    align-items:center!important;
    text-align:left!important;
    border-radius:9px;
    clip-path:none!important;
  }
  body:not(.title-open) .room-heading .section-label{
    font-size:clamp(.59rem,2.3vw,.72rem)!important;
    white-space:nowrap;
  }
  body:not(.title-open) .room-heading #message{
    min-width:0!important;
    margin:0!important;
    font-size:clamp(.68rem,2.7vw,.85rem)!important;
    line-height:1.2!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden!important;
  }
  body:not(.title-open) .room-heading .room-progress{
    position:static!important;
    display:block!important;
    margin:0!important;
    font-size:clamp(.55rem,2.2vw,.69rem)!important;
    white-space:nowrap;
  }
  body:not(.title-open) .arena .room,
  body:not(.title-open) #room{
    width:min(calc(100% - 6px),340px)!important;
    gap:7px!important;
    margin:4px auto 0!important;
  }
  body:not(.title-open) #room .card{
    aspect-ratio:.79!important;
    min-height:0!important;
  }
  body:not(.title-open) .game-shell{
    padding-bottom:calc(126px + env(safe-area-inset-bottom))!important;
  }
}
@media (max-width:370px) and (orientation:portrait){
  body:not(.title-open) .arena .room,
  body:not(.title-open) #room{width:min(calc(100% - 6px),310px)!important}
}


/* V18 — HUD compacta e quatro cartas acima dos controles fixos. */
@media (max-width:700px) and (orientation:portrait){
  body:not(.title-open) .topbar{
    gap:4px!important;
    padding-top:3px!important;
    padding-bottom:3px!important;
    grid-template-rows:auto auto!important;
  }
  body:not(.title-open) .hud{
    min-height:0!important;
    height:48px!important;
    max-height:48px!important;
    padding:3px 4px!important;
    margin:0!important;
    align-items:center!important;
    border-width:1px!important;
    border-radius:8px!important;
    box-sizing:border-box!important;
  }
  body:not(.title-open) .hud-item{
    height:36px!important;
    min-height:0!important;
    padding:0 3px!important;
    gap:3px!important;
    align-items:center!important;
  }
  body:not(.title-open) .hud-icon{
    font-size:clamp(.77rem,2.8vw,1rem)!important;
    line-height:1!important;
    width:13px!important;
  }
  body:not(.title-open) .hud-copy{
    gap:0!important;
    justify-content:center!important;
    line-height:1.05!important;
  }
  body:not(.title-open) .hud-label{
    font-size:clamp(.45rem,1.7vw,.57rem)!important;
    line-height:1.1!important;
    letter-spacing:0!important;
  }
  body:not(.title-open) .hud-copy strong{
    font-size:clamp(.57rem,2.35vw,.77rem)!important;
    line-height:1.15!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  body:not(.title-open) .hud-copy small{display:none!important}
  body:not(.title-open) .life-track{
    height:3px!important;
    margin-top:2px!important;
  }
  body:not(.title-open) .room-heading{
    margin-top:2px!important;
    margin-bottom:2px!important;
  }
  body:not(.title-open) .arena .room,
  body:not(.title-open) #room{
    width:min(calc(100% - 8px),300px,calc((100dvh - 295px)*.72))!important;
    min-width:220px!important;
    gap:6px!important;
    margin:2px auto 0!important;
  }
  body:not(.title-open) #room .card{
    aspect-ratio:.79!important;
    padding:3px!important;
  }
  body:not(.title-open) #room .kind{
    font-size:clamp(.6rem,2.4vw,.75rem)!important;
    line-height:1.1!important;
  }
  body:not(.title-open) #room .power{
    font-size:clamp(.55rem,2.2vw,.69rem)!important;
    line-height:1.1!important;
  }
}
@media (max-width:700px) and (orientation:portrait) and (max-height:640px){
  body:not(.title-open) .arena .room,
  body:not(.title-open) #room{
    width:min(calc(100% - 8px),255px)!important;
    min-width:0!important;
  }
}


/* V19 — remove o painel de histórico somente no mobile;
   aproveita o espaço liberado para ampliar as quatro cartas. */
@media (max-width:700px) and (orientation:portrait){
  body:not(.title-open) .game-shell > .log{
    display:none!important;
  }
  body:not(.title-open) .arena .room,
  body:not(.title-open) #room{
    width:min(calc(100% - 8px),354px,calc((100dvh - 270px)*.81))!important;
    min-width:0!important;
    gap:7px!important;
    margin:4px auto 0!important;
  }
  body:not(.title-open) #room .card{
    aspect-ratio:.79!important;
  }
  body:not(.title-open) .game-shell{
    padding-bottom:calc(128px + env(safe-area-inset-bottom))!important;
  }
}
@media (max-width:700px) and (orientation:portrait) and (max-height:640px){
  body:not(.title-open) .arena .room,
  body:not(.title-open) #room{
    width:min(calc(100% - 8px),300px,calc((100dvh - 250px)*.78))!important;
  }
}

/* V20 — cronômetro e hall da fama estilo fliperama */
.arcade-strip{display:flex;align-items:center;justify-content:space-between;gap:9px;max-width:1050px;width:100%;margin:0 auto 5px;padding:6px 12px;border:1px solid #b58a51;border-radius:9px;background:#111b25e8;color:#f4d29b;font:700 12px Georgia,serif;box-sizing:border-box}
.arcade-strip strong{font-variant-numeric:tabular-nums;color:#fff3cf;font-size:15px}
#arcade-scores,.arcade-dialog button{background:linear-gradient(#64442c,#302018);border:1px solid #bb955c;color:#ffebc4;border-radius:7px;padding:7px 9px;font-weight:800;cursor:pointer}
.arcade-dialog{color:#f4dfb6;background:#101820;border:2px solid #ad854d;border-radius:14px;width:min(92vw,440px);max-height:85dvh;overflow:auto;padding:22px;box-shadow:0 10px 60px #000d}
.arcade-dialog::backdrop{background:#000b}
.arcade-dialog h2{font:800 25px Georgia,serif;text-align:center;color:#f6c974}
.arcade-dialog p{line-height:1.4;font-size:13px}
.arcade-dialog label{display:block;margin:16px 0 7px;font-weight:700}
.arcade-name{display:flex;gap:8px}
.arcade-name input{width:90px;min-width:0;text-transform:uppercase;letter-spacing:.18em;text-align:center;font:bold 23px monospace;color:#ffe5a1;background:#0b1118;border:1px solid #bd965b;border-radius:7px}
#arcade-leaderboard{padding:0;list-style:none;font:700 14px/2 monospace;color:#f3dfac}
#arcade-leaderboard li{border-bottom:1px solid #71593c6b;white-space:nowrap}
#arcade-notice{color:#aee4d0;min-height:20px}
#arcade-close{width:100%;margin-top:12px}
@media(max-width:700px) and (orientation:portrait){
 body:not(.title-open) .arcade-strip{padding:3px 8px;gap:5px;font-size:10px;margin:0 auto 2px;min-height:30px}
 body:not(.title-open) .arcade-strip strong{font-size:12px}
 body:not(.title-open) #arcade-scores{font-size:10px;padding:4px 5px}
 body:not(.title-open) .arena .room,body:not(.title-open) #room{width:min(calc(100% - 8px),354px,calc((100dvh - 297px)*.81))!important}
}

/* V21: cartas se ajustam ao espaço real entre a sala e os controles. */
@media (max-width:700px) and (orientation:portrait){
 body:not(.title-open) .arena{flex:none!important;min-height:0!important;overflow:visible!important}
 body:not(.title-open) .arena .room,
 body:not(.title-open) #room{
   width:var(--mobile-room-width,min(calc(100% - 8px),354px))!important;
   max-width:calc(100% - 8px)!important;
   min-width:0!important;
   height:auto!important;
   grid-template-columns:repeat(2,minmax(0,1fr))!important;
   grid-template-rows:repeat(2,auto)!important;
   gap:7px!important;
   margin:4px auto 0!important;
 }
 body:not(.title-open) #room .card{
   width:100%!important;
   height:auto!important;
   min-height:0!important;
   aspect-ratio:.79!important;
   overflow:hidden;
 }
 body:not(.title-open) .game-shell{
   padding-bottom:calc(128px + env(safe-area-inset-bottom))!important;
 }
}

.arcade-ending{width:min(94vw,510px);max-height:90dvh;overflow-y:auto;box-sizing:border-box;padding:0;border:2px solid #c59b59;border-radius:18px;background:radial-gradient(ellipse at top,#283846,#10141c 75%);color:#f8e4bd;box-shadow:0 16px 75px #000e}
.arcade-ending::backdrop{background:#000c;backdrop-filter:blur(5px)}
.arcade-ending-inner{padding:16px 18px;text-align:center}
.arcade-ending-crest{font-size:25px}
.arcade-ending h2{font:900 clamp(25px,6vw,38px) Georgia,serif;color:#f3cb86;margin:6px 0}
.arcade-ending #endingText{font-size:13px;margin:6px 0 12px;color:#e3d2b6}
.arcade-end-time{display:flex;align-items:center;justify-content:space-between;padding:9px 13px;border:1px solid #8c7048;background:#0b121bc9;border-radius:10px}
.arcade-end-time span{font-size:11px}
.arcade-end-time strong{font:800 24px monospace;color:#ffdf8d}
.arcade-end-result{margin:9px 0;color:#e6bf83;font:700 12px Georgia,serif}
.arcade-end-form{margin-top:10px}
.arcade-end-form label{display:block;font:bold 12px Georgia,serif;margin-bottom:7px}
.arcade-end-form>div{display:flex;gap:7px;justify-content:center}
.arcade-end-form input{width:88px;min-width:0;box-sizing:border-box;border:1px solid #d2a75e;border-radius:8px;background:#0a1018;color:#fff0c7;text-align:center;font:bold 22px monospace;letter-spacing:.12em;text-transform:uppercase}
.arcade-end-form button,.arcade-ending #playAgain{min-height:43px;padding:9px 12px;border:1px solid #d4a65d;border-radius:8px;background:linear-gradient(#874a2b,#4e261e);color:#fff0c9;font-weight:800}
.arcade-end-form button:disabled{opacity:.65}
#arcade-end-notice{min-height:17px;font-size:12px;color:#aee5cb;margin:9px 0}
.arcade-ending h3{font:800 19px Georgia,serif;color:#f6d38f;margin:9px 0 0}
.arcade-end-caption{font-size:11px;color:#c4b69f;margin:3px 0 6px}
#arcade-end-board{padding:0;margin:0 0 12px;list-style:none;max-height:180px;overflow:auto}
#arcade-end-board li{display:grid;grid-template-columns:1fr 1fr auto;gap:7px;text-align:left;align-items:center;padding:6px 3px;border-bottom:1px solid #6f573a77;font:700 12px monospace}
#arcade-end-board li span:nth-child(2){text-align:center;color:#c8b99f;font-size:10px}
#arcade-end-board li strong{color:#f6cf7c;font-variant-numeric:tabular-nums}
.arcade-ending #playAgain{display:block;width:100%;margin-top:8px}
@media(max-width:700px){.arcade-ending-inner{padding:12px 14px}.arcade-ending{max-height:88dvh}.arcade-end-time strong{font-size:20px}#arcade-end-board{max-height:140px}}


/* V24: estado desabilitado consistente, inclusive na barra mobile. */
body:not(.title-open) .actions #flee:disabled,
body:not(.title-open) .actions #flee[disabled]{
  opacity:.34!important;
  filter:grayscale(.85) saturate(.3) brightness(.72)!important;
  cursor:not-allowed!important;
  box-shadow:none!important;
  pointer-events:none;
  transition:opacity .2s ease,filter .2s ease;
}
body:not(.title-open) .actions #flee:not(:disabled){
  opacity:1!important;
  filter:none!important;
  cursor:pointer!important;
  pointer-events:auto;
  transition:opacity .2s ease,filter .2s ease;
}

/* V25: controle de musica independente dos efeitos sonoros. */
#music-toggle{min-width:92px}

#boss-panel[hidden]{display:none!important}
.boss-panel{width:min(100%,500px);margin:0 auto 8px}
.boss-card{padding:10px 15px;border:2px solid #bd543f;border-radius:13px;background:radial-gradient(ellipse at top,#69332e,#24191c 72%);color:#fbe5cc;text-align:center}
.boss-emblem{font-size:35px}
.boss-title{font:900 18px Georgia,serif;color:#ffc88d}
.boss-stats{margin:5px 0;font:800 15px monospace}
.boss-stats span{font-size:11px}
.boss-health-track{height:9px;background:#120c12;border:1px solid #b57562;border-radius:9px;overflow:hidden}
#boss-healthbar{height:100%;width:100%;background:linear-gradient(90deg,#b52628,#f77751);transition:width .25s}
.boss-tip{font-size:11px;margin-top:5px}
#room.boss-room{grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:1fr!important;width:min(100%,620px)!important;gap:8px!important}
@media(max-width:700px) and (orientation:portrait){
 .boss-panel{width:min(calc(100% - 10px),354px);margin:0 auto 5px}
 .boss-card{padding:6px 10px}.boss-emblem{font-size:27px}.boss-title{font-size:13px}.boss-stats{font-size:12px;margin:3px 0}.boss-tip{font-size:10px}
 body:not(.title-open) #room.boss-room{width:min(calc(100% - 10px),354px)!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:auto!important;gap:5px!important}
 body:not(.title-open) #room.boss-room .card{aspect-ratio:.7!important}
 body:not(.title-open) #room.boss-room .kind{font-size:10px!important}
 body:not(.title-open) #room.boss-room .power{font-size:9px!important}
}

/* V27 — Boss as the fourth card in the same 2x2 room */
#boss-panel{display:none!important}
#room.boss-room{
 display:grid!important;
 grid-template-columns:repeat(2,minmax(0,1fr))!important;
 grid-template-rows:repeat(2,auto)!important;
 gap:7px!important;
 width:min(100%,500px)!important;
}
#room.boss-room .card{
 width:100%!important;
 min-width:0!important;
 height:auto!important;
 aspect-ratio:.79!important;
}
#room.boss-room .boss-main-card{
 display:block!important;
 position:relative;
 overflow:hidden;
 padding:0!important;
 border:2px solid #b86a48!important;
 border-radius:12px;
 background:#160d14;
 cursor:default!important;
 opacity:1!important;
 filter:none!important;
 box-shadow:0 0 17px #c32f4459, inset 0 0 0 1px #e0a968;
}
.boss-main-art{
 position:absolute;
 inset:0;
 width:100%;
 height:100%;
 object-fit:cover;
 object-position:center 28%;
 pointer-events:none;
}
.boss-main-overlay{
 position:absolute;
 inset:auto 0 0;
 padding:21px 5px 7px;
 text-align:center;
 color:#ffe4b5;
 background:linear-gradient(transparent,#130a12f5 40%,#130a12);
 text-shadow:0 2px 3px #000;
 pointer-events:none;
}
.boss-main-overlay strong{
 display:block;
 font:900 clamp(9px,1.8vw,15px) Georgia,serif;
 line-height:1.1;
}
.boss-main-health{font:900 clamp(14px,2vw,22px) monospace;color:#ffb5a5;margin:4px 0}
.boss-main-track{height:7px;border:1px solid #e0a079;background:#200c12;border-radius:9px;overflow:hidden}
.boss-main-track>div{height:100%;background:linear-gradient(90deg,#b41e35,#ff7456);transition:width .22s}
@media(max-width:700px) and (orientation:portrait){
 body:not(.title-open) #room.boss-room{
  width:var(--mobile-room-width,min(calc(100% - 8px),354px))!important;
  max-width:calc(100% - 8px)!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,auto)!important;
 }
 body:not(.title-open) #room.boss-room .card{
  aspect-ratio:.79!important;
 }
 .boss-main-overlay{padding:15px 3px 4px}
 .boss-main-overlay strong{font-size:clamp(9px,2.5vw,12px)}
 .boss-main-health{font-size:clamp(13px,4vw,19px);margin:2px 0}
 .boss-main-track{height:6px}
}

/* V28: boss is an interactive target; attack consumes equipped weapon. */
#room.boss-room .boss-main-card{cursor:pointer!important;touch-action:manipulation}
#room.boss-room .boss-main-card:focus-visible{outline:3px solid #ffdc8a;outline-offset:2px}
#room.boss-room .boss-main-card:active{transform:scale(.975)}
.boss-main-hint{display:block;margin-top:4px;font:800 10px Georgia,serif;letter-spacing:.04em;color:#ffcf8b}
@media(max-width:700px){.boss-main-hint{font-size:9px;margin-top:2px}}

/* V29 — feedback visual do golpe no chefe e destruição da arma */
.boss-hit-burst,.weapon-break-burst{position:fixed;z-index:1200;pointer-events:none;transform:translate(-50%,-50%)}
.boss-hit-number{position:absolute;left:0;top:0;transform:translate(-50%,-50%);color:#ffe7a4;font:900 clamp(26px,8vw,50px) Georgia,serif;text-shadow:0 2px 0 #6e1820,0 0 14px #ff473f;animation:boss-number-pop .78s ease-out both;white-space:nowrap}
.boss-hit-spark,.weapon-break-burst span{position:absolute;left:0;top:0;color:#ffc368;font-size:23px;text-shadow:0 0 8px #ff4c27;animation:boss-spark .7s cubic-bezier(.15,.7,.2,1) forwards;--distance:45px}
.weapon-break-burst span{color:#d7eaff;font-size:18px;--distance:32px;animation-duration:.65s}
.boss-main-card.boss-struck{animation:boss-shake .43s ease-out!important}
.boss-main-card.boss-defeated{animation:boss-defeat .8s ease-out!important}
@keyframes boss-number-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}18%{opacity:1;transform:translate(-50%,-90%) scale(1.4)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-185%) scale(1)}}
@keyframes boss-spark{0%{opacity:1;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(0) scale(.3)}65%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(calc(-1 * var(--distance))) scale(.2)}}
@keyframes boss-shake{0%,100%{transform:translateX(0);filter:none}15%,45%{transform:translateX(-6px);filter:brightness(2) sepia(.4)}30%,60%{transform:translateX(6px);filter:brightness(1.8)}}
@keyframes boss-defeat{0%{filter:brightness(2);transform:scale(1)}35%{filter:brightness(3) saturate(0);transform:scale(1.07)}100%{filter:brightness(.3);transform:scale(.92)}}
@media(prefers-reduced-motion:reduce){.boss-hit-burst,.weapon-break-burst{display:none!important}.boss-main-card.boss-struck,.boss-main-card.boss-defeated{animation:none!important}}


/* V32 — Uma largura de referência para HUD, cartas e controles no desktop.
   A área útil se adapta ao viewport sem alterar a composição mobile. */
@media (min-width: 901px) {
 body:not(.title-open) .game-shell{
  --play-width: min(1120px, calc(100vw - 48px));
  box-sizing:border-box!important;
  width:100%!important;
  max-width:1400px!important;
  min-width:0!important;
  min-height:0!important;
  height:100dvh!important;
  margin:0 auto!important;
  padding:clamp(8px,1.3vh,15px) 24px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:
    minmax(72px,auto)
    minmax(38px,auto)
    minmax(48px,auto)
    minmax(0,1fr)
    minmax(50px,auto)
    minmax(36px,auto)!important;
  gap:clamp(6px,1vh,11px)!important;
  align-content:stretch!important;
  overflow:hidden!important;
 }
 body:not(.title-open) .topbar{
  grid-row:1!important;
  width:var(--play-width)!important;
  max-width:100%!important;
  margin:0 auto!important;
  min-width:0!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:minmax(235px,.8fr) minmax(0,2fr) auto!important;
  gap:12px!important;
 }
 body:not(.title-open) .brand{min-width:0!important}
 body:not(.title-open) .brand h1{font-size:clamp(23px,2.6vw,38px)!important}
 body:not(.title-open) .hud{min-width:0!important}
 body:not(.title-open) .hud-item{min-width:0!important;padding-inline:clamp(5px,.8vw,13px)!important}
 body:not(.title-open) .hud-copy strong{font-size:clamp(13px,1.3vw,21px)!important}
 body:not(.title-open) .arcade-strip,
 body:not(.title-open) .room-heading,
 body:not(.title-open) .actions,
 body:not(.title-open) .log{
  width:var(--play-width)!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  min-width:0!important;
  min-height:0!important;
  margin-inline:auto!important;
 }
 body:not(.title-open) .arcade-strip{grid-row:2!important}
 body:not(.title-open) .room-heading{
  grid-row:3!important;
  padding:6px 16px!important;
  align-self:stretch!important;
 }
 body:not(.title-open) .arena{
  grid-row:4!important;
  box-sizing:border-box!important;
  min-width:0!important;
  min-height:0!important;
  width:var(--play-width)!important;
  max-width:100%!important;
  height:100%!important;
  margin:0 auto!important;
  padding:5px 0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
 }
 body:not(.title-open) .arena #room,
 body:not(.title-open) #room,
 body:not(.title-open) #room.boss-room{
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  grid-template-rows:minmax(0,1fr)!important;
  gap:clamp(8px,1.3vw,17px)!important;
  width:min(100%, 1030px)!important;
  max-width:100%!important;
  height:min(100%, 360px)!important;
  min-height:0!important;
  max-height:100%!important;
  margin:auto!important;
  padding:0!important;
  align-items:stretch!important;
  justify-items:stretch!important;
 }
 body:not(.title-open) #room>.card,
 body:not(.title-open) #room.boss-room>.card{
  box-sizing:border-box!important;
  min-width:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  aspect-ratio:auto!important;
  margin:0!important;
  align-self:stretch!important;
  justify-self:stretch!important;
 }
 body:not(.title-open) .actions{
  grid-row:5!important;
  height:100%!important;
  align-self:stretch!important;
  gap:clamp(7px,1vw,14px)!important;
 }
 body:not(.title-open) .actions .action-button{
  min-width:0!important;
  height:100%!important;
  padding-inline:clamp(4px,.8vw,14px)!important;
  font-size:clamp(11px,1.1vw,16px)!important;
 }
 body:not(.title-open) .log{grid-row:6!important;height:100%!important}
}
@media (min-width:901px) and (max-height:720px){
 body:not(.title-open) .game-shell{
  grid-template-rows:minmax(62px,auto) minmax(32px,auto) minmax(40px,auto) minmax(0,1fr) minmax(42px,auto) minmax(32px,auto)!important;
  gap:5px!important;
 }
 body:not(.title-open) #room,
 body:not(.title-open) #room.boss-room{height:min(100%,290px)!important}
}

/* V33: tablet / desktop estreito, isolado do mobile <=600px.
   A sala e as cartas usam a mesma largura do HUD e dos controles. */
@media (min-width:601px) and (max-width:900px) and (min-height:650px){
 body:not(.title-open) .game-shell{
  --play-width:min(100%,760px);
  width:100%!important;
  max-width:820px!important;
  height:100dvh!important;
  padding:8px clamp(10px,2vw,18px)!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:
    minmax(96px,14vh)
    minmax(47px,7vh)
    minmax(55px,8vh)
    minmax(0,1fr)
    minmax(52px,8vh)
    minmax(42px,6vh)!important;
  gap:clamp(5px,.8vh,9px)!important;
  overflow:hidden!important;
 }
 body:not(.title-open) .topbar{grid-row:1!important;width:var(--play-width)!important;margin-inline:auto!important}
 body:not(.title-open) .arcade-strip{grid-row:2!important;width:var(--play-width)!important;max-width:100%!important;margin-inline:auto!important;min-height:0!important}
 body:not(.title-open) .room-heading{
  grid-row:3!important;
  width:var(--play-width)!important;
  max-width:100%!important;
  margin-inline:auto!important;
  align-self:stretch!important;
  padding:5px 12px!important;
 }
 body:not(.title-open) .arena{
  grid-row:4!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  width:var(--play-width)!important;
  height:100%!important;
  max-width:100%!important;
  min-height:0!important;
  margin:0 auto!important;
  padding:5px 0!important;
  overflow:hidden!important;
 }
 body:not(.title-open) #room,
 body:not(.title-open) #room.boss-room{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,minmax(0,1fr))!important;
  gap:clamp(9px,1.4vw,15px)!important;
  width:min(100%,540px)!important;
  max-width:100%!important;
  height:min(100%,460px)!important;
  max-height:100%!important;
  margin:auto!important;
  padding:0!important;
  align-items:stretch!important;
 }
 body:not(.title-open) #room>.card,
 body:not(.title-open) #room.boss-room>.card{
  box-sizing:border-box!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-height:100%!important;
  aspect-ratio:auto!important;
  margin:0!important;
 }
 body:not(.title-open) .actions{
  grid-row:5!important;
  width:var(--play-width)!important;
  max-width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin-inline:auto!important;
  gap:8px!important;
 }
 body:not(.title-open) .log{
  grid-row:6!important;
  width:var(--play-width)!important;
  max-width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin-inline:auto!important;
 }
 body:not(.title-open) .brand h1{font-size:clamp(20px,3vw,29px)!important}
 body:not(.title-open) .hud-copy strong{font-size:clamp(12px,1.8vw,16px)!important}
 body:not(.title-open) .hud-icon{font-size:clamp(17px,2.4vw,22px)!important}
}

/* V35 — layout de carta baseado na referência:
   ilustração inteira, identificação e descrição no topo.
   Base V33: profundidade do cenário original, sem V34. */
#room .card:not(.boss-main-card){
 position:relative;
 overflow:hidden;
 padding:0!important;
 background:#1a100d!important;
 border:2px solid #a57842!important;
 border-radius:13px;
 box-shadow:inset 0 0 0 3px #17100d,inset 0 0 0 5px #a57741,0 6px 0 #24150f,0 10px 20px #000b;
}
#room .card:not(.boss-main-card)::before{
 content:"";
 position:absolute;
 inset:5px;
 z-index:4;
 border:1px solid #c49457a8;
 border-radius:8px;
 pointer-events:none;
}
#room .card:not(.boss-main-card) .illustration{
 position:absolute!important;
 inset:7px!important;
 display:block!important;
 width:auto!important;
 height:auto!important;
 min-height:0!important;
 margin:0!important;
 padding:0!important;
 border:0!important;
 border-radius:7px!important;
 overflow:hidden!important;
 background:#130d0a;
}
#room .card:not(.boss-main-card) .card-art{
 display:block!important;
 width:100%!important;
 height:100%!important;
 object-fit:cover!important;
 object-position:center 47%!important;
}
#room .card:not(.boss-main-card) .illustration::after{
 content:"";
 position:absolute;
 inset:0;
 background:linear-gradient(to bottom,#09070866 0%,transparent 33%,transparent 72%,#09070845 100%);
 pointer-events:none;
}
#room .card:not(.boss-main-card) .card-footer{
 position:absolute!important;
 top:clamp(9px,1vw,15px)!important;
 left:clamp(8px,1vw,15px)!important;
 right:clamp(8px,1vw,15px)!important;
 bottom:auto!important;
 z-index:6!important;
 display:flex!important;
 flex-direction:column!important;
 align-items:stretch!important;
 justify-content:center!important;
 gap:0!important;
 padding:0!important;
 border:2px solid #c79b60;
 border-radius:7px;
 background:#f0d5a7!important;
 color:#28190f!important;
 box-shadow:0 2px 5px #000b;
 overflow:hidden;
}
#room .card:not(.boss-main-card) .kind{
 display:block!important;
 width:100%!important;
 margin:0!important;
 padding:clamp(3px,.55vh,8px) clamp(30px,3vw,48px)!important;
 box-sizing:border-box!important;
 background:linear-gradient(#2c1914,#0c090a)!important;
 color:#f7e3c0!important;
 font:900 clamp(11px,1.35vw,21px)/1.08 Georgia,serif!important;
 text-transform:uppercase;
 text-align:center!important;
 white-space:nowrap!important;
 overflow:hidden;
 text-overflow:ellipsis;
}
#room .card:not(.boss-main-card) .power{
 display:block!important;
 width:100%!important;
 box-sizing:border-box!important;
 margin:0!important;
 padding:clamp(3px,.45vh,6px) 4px!important;
 background:linear-gradient(#f7e0b6,#d8b985)!important;
 color:#352010!important;
 font:700 clamp(9px,1.02vw,15px)/1.1 Georgia,serif!important;
 text-align:center!important;
 white-space:nowrap!important;
 overflow:hidden;
 text-overflow:ellipsis;
}
#room .card:not(.boss-main-card) .suit-badge{
 top:clamp(11px,1.15vw,18px)!important;
 left:clamp(11px,1.15vw,18px)!important;
 z-index:8!important;
 width:clamp(25px,3vw,48px)!important;
 height:clamp(27px,3.3vw,52px)!important;
 border:2px solid #ad7b47!important;
 border-radius:8px!important;
 background:linear-gradient(#281b1a,#0e0c10)!important;
 color:#f6e5d1!important;
 box-shadow:0 2px 4px #000a!important;
 font-size:clamp(15px,2vw,30px)!important;
}
#room .card.red:not(.boss-main-card) .suit-badge{color:#ff6671!important}
#room .card:not(.boss-main-card) .corner{
 top:clamp(11px,1.15vw,18px)!important;
 right:clamp(11px,1.15vw,18px)!important;
 z-index:8!important;
 width:clamp(28px,3.2vw,52px)!important;
 min-width:0!important;
 height:clamp(28px,3.2vw,52px)!important;
 border:2px solid #e5b768!important;
 border-radius:50%!important;
 background:radial-gradient(circle at 35% 30%,#c94235,#73131a)!important;
 color:#fff0d7!important;
 font:900 clamp(16px,2.2vw,32px)/1 Georgia,serif!important;
 text-shadow:0 2px 3px #000!important;
 box-shadow:0 2px 5px #0009!important;
}
@media(max-width:900px){
 #room .card:not(.boss-main-card) .card-footer{
  top:8px!important;left:7px!important;right:7px!important;
  border-width:1px;
 }
 #room .card:not(.boss-main-card) .kind{
  padding:4px 25px!important;
  font-size:clamp(10px,1.8vw,16px)!important;
 }
 #room .card:not(.boss-main-card) .power{
  font-size:clamp(8px,1.4vw,12px)!important;
  padding:3px 2px!important;
 }
 #room .card:not(.boss-main-card) .suit-badge{
  top:10px!important;left:9px!important;
  width:clamp(24px,3.6vw,34px)!important;
  height:clamp(26px,4vw,36px)!important;
  font-size:clamp(15px,2.5vw,22px)!important;
 }
 #room .card:not(.boss-main-card) .corner{
  top:10px!important;right:9px!important;
  width:clamp(26px,3.8vw,37px)!important;
  height:clamp(26px,3.8vw,37px)!important;
  font-size:clamp(16px,2.6vw,23px)!important;
 }
}
@media(max-width:600px){
 #room .card:not(.boss-main-card) .kind{
  font-size:clamp(9px,2.7vw,13px)!important;
  padding:3px 22px!important;
 }
 #room .card:not(.boss-main-card) .power{
  font-size:clamp(8px,2vw,11px)!important;
 }
 #room .card:not(.boss-main-card) .suit-badge{
  width:24px!important;height:26px!important;font-size:15px!important;
 }
 #room .card:not(.boss-main-card) .corner{
  width:26px!important;height:26px!important;font-size:16px!important;
 }
}

/* V36 — Desktop: cabeçalho das cartas sem colisões ou truncamento.
   Container queries dimensionam o texto pela largura real de cada carta. */
@media (min-width:901px){
 #room .card:not(.boss-main-card){
  container-type:inline-size!important;
  overflow:hidden!important;
 }
 #room .card:not(.boss-main-card) .card-footer{
  box-sizing:border-box!important;
  top:4cqw!important;
  left:3cqw!important;
  right:3cqw!important;
  width:auto!important;
  bottom:auto!important;
  height:clamp(45px,25cqw,76px)!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:minmax(0,1fr) minmax(0,.72fr)!important;
  align-content:stretch!important;
  gap:0!important;
  padding:0!important;
  overflow:visible!important;
  border:1.5px solid #d3a465!important;
  border-radius:6px!important;
  background:#edcea0!important;
 }
 #room .card:not(.boss-main-card) .kind,
 #room .card:not(.boss-main-card) .power{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  box-sizing:border-box!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-width:100%!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
  text-align:center!important;
  line-height:1.05!important;
  letter-spacing:0!important;
  font-variant:normal!important;
  transform:none!important;
 }
 #room .card:not(.boss-main-card) .kind{
  padding:0 23cqw!important;
  font-family:Georgia,serif!important;
  font-size:clamp(9px,8cqw,20px)!important;
  font-weight:900!important;
 }
 #room .card:not(.boss-main-card) .power{
  padding:0 3cqw!important;
  font-family:Georgia,serif!important;
  font-size:clamp(8px,5.2cqw,13px)!important;
  font-weight:700!important;
 }
 #room .card:not(.boss-main-card) .suit-badge{
  box-sizing:border-box!important;
  top:5cqw!important;
  left:5cqw!important;
  width:20cqw!important;
  height:20cqw!important;
  min-width:0!important;
  min-height:0!important;
  font-size:12cqw!important;
  line-height:1!important;
  border-radius:6px!important;
  padding:0!important;
  z-index:9!important;
 }
 #room .card:not(.boss-main-card) .corner{
  box-sizing:border-box!important;
  top:5cqw!important;
  right:5cqw!important;
  width:20cqw!important;
  height:20cqw!important;
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  font-size:12cqw!important;
  line-height:1!important;
  z-index:9!important;
 }
}

/* V37 — HUD com três indicadores: VIDA, ARMA, BARALHO.
   O elemento da poção permanece no DOM para a lógica do jogo. */
.hud>.hud-item:nth-child(3){display:none!important}
.hud{
 display:grid!important;
 grid-template-columns:repeat(3,minmax(0,1fr))!important;
 align-items:center!important;
}
.hud>.hud-item{
 min-width:0!important;
 width:100%!important;
 box-sizing:border-box!important;
 justify-content:center!important;
}
.hud>.hud-item:nth-child(2){
 border-right:1px solid #7b5a37!important;
}
.hud>.hud-item:nth-child(4){border-right:0!important}
.hud .hud-copy{min-width:0!important;flex:1 1 auto!important}
.hud .hud-copy strong{
 max-width:100%!important;
 white-space:nowrap!important;
 overflow:hidden!important;
 text-overflow:ellipsis!important;
}
@media(min-width:601px){
 body:not(.title-open) .hud>.hud-item{
  padding-inline:clamp(9px,1.5vw,22px)!important;
 }
 body:not(.title-open) .hud .hud-copy strong{
  font-size:clamp(13px,1.4vw,22px)!important;
 }
 body:not(.title-open) .hud .hud-copy small{
  font-size:clamp(9px,.8vw,13px)!important;
 }
}
@media(max-width:600px){
 body:not(.title-open) .hud>.hud-item{
  padding-inline:clamp(3px,1.5vw,10px)!important;
 }
}

/* V38: texto de arma curto e inteiramente legivel em todas as larguras. */
.hud #weapon{
 display:block!important;
 min-width:0!important;
 max-width:100%!important;
 font-size:clamp(12px,1.5vw,22px)!important;
 white-space:nowrap!important;
 overflow:visible!important;
 text-overflow:clip!important;
 letter-spacing:0!important;
}
.hud #weaponDetail{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
@media(max-width:600px){
 .hud #weapon{font-size:clamp(11px,3.2vw,17px)!important}
}

/* V39 — Ilustração de interação, 3 segundos, sem deslocar a carta. */
#room .card.interaction-active{
 z-index:30!important;
 isolation:isolate;
 pointer-events:none;
}
#room .card.interaction-wait{pointer-events:none}
#room .card .interaction-reveal{
 position:absolute!important;
 inset:4px!important;
 z-index:30!important;
 border-radius:inherit;
 overflow:hidden;
 background:#110b0b;
 pointer-events:none;
 box-shadow:inset 0 0 0 2px #f3bc6b,0 0 18px #e9944766;
 animation:interaction-frame 3s ease-in-out both;
}
#room .card .interaction-reveal img{
 position:absolute;
 inset:0;
 width:100%!important;
 height:100%!important;
 object-fit:cover!important;
 object-position:center!important;
 display:block;
 animation:interaction-zoom 3s ease-out both;
}
#room .card .interaction-reveal::after{
 content:"";
 position:absolute;
 inset:0;
 background:linear-gradient(transparent 70%,#090707c9 100%);
 pointer-events:none;
}
#room .card .interaction-caption{
 position:absolute;
 bottom:7%;
 left:4%;
 right:4%;
 z-index:2;
 color:#ffe4ac;
 font:900 clamp(10px,1.5vw,17px)/1.15 Georgia,serif;
 letter-spacing:.06em;
 text-shadow:0 2px 4px #000,0 0 10px #000;
 text-align:center;
}
@keyframes interaction-zoom{
 0%{transform:scale(1.12);filter:brightness(.8)}
 15%{filter:brightness(1.15)}
 80%{transform:scale(1.01);filter:brightness(1)}
 100%{transform:scale(1);filter:brightness(.85)}
}
@keyframes interaction-frame{
 0%{opacity:0;filter:brightness(1.4)}
 10%{opacity:1;filter:brightness(1)}
 90%{opacity:1}
 100%{opacity:1}
}
@media(prefers-reduced-motion:reduce){
 #room .card .interaction-reveal,
 #room .card .interaction-reveal img{animation:none!important}
}

/* V40: interação instantânea com imagem flutuante por 1,5 s.
   O estado do jogo e seus efeitos são atualizados no mesmo clique. */
.interaction-floating{
 z-index:9999!important;
 box-sizing:border-box!important;
 pointer-events:none!important;
 overflow:hidden!important;
 border:2px solid #d4a65e!important;
 border-radius:12px!important;
 background:#110b0b!important;
 box-shadow:0 0 22px #e9944766,0 8px 25px #000a!important;
 animation:interaction-frame 1.5s ease-in-out both!important;
}
.interaction-floating img{
 position:absolute;
 inset:0;
 width:100%!important;
 height:100%!important;
 object-fit:cover!important;
 object-position:center!important;
 animation:interaction-zoom 1.5s ease-out both!important;
}
.interaction-floating::after{
 content:"";
 position:absolute;
 inset:0;
 background:linear-gradient(transparent 70%,#090707c9 100%);
 pointer-events:none;
}
.interaction-floating .interaction-caption{
 position:absolute;
 bottom:7%;
 left:4%;
 right:4%;
 z-index:2;
 color:#ffe4ac;
 font:900 clamp(10px,1.5vw,17px)/1.15 Georgia,serif;
 text-align:center;
 text-shadow:0 2px 5px #000;
}
@media(prefers-reduced-motion:reduce){
 .interaction-floating,.interaction-floating img{animation:none!important}
}

/* V42 — A arte permanece dentro da carta original.
   A sala é atualizada somente depois de 1,5 s; o estado/HUD muda na hora. */
#room .card.interaction-active{
 position:relative!important;
 isolation:isolate;
 z-index:5!important;
 pointer-events:none!important;
}
#room .card .interaction-in-slot{
 position:absolute!important;
 inset:3px!important;
 width:auto!important;
 height:auto!important;
 z-index:40!important;
 display:block!important;
 box-sizing:border-box!important;
 border:1px solid #d4a65e!important;
 border-radius:8px!important;
 overflow:hidden!important;
 pointer-events:none!important;
 background:#110b0b!important;
 animation:interaction-frame 1.5s ease-in-out both!important;
}
#room .card .interaction-in-slot img{
 position:absolute!important;
 inset:0!important;
 width:100%!important;
 height:100%!important;
 object-fit:cover!important;
 object-position:center!important;
 animation:interaction-zoom 1.5s ease-out both!important;
}
#room .card .interaction-in-slot::after{
 content:"";
 position:absolute;
 inset:0;
 background:linear-gradient(transparent 70%,#090707c9);
 pointer-events:none;
}
#room .card .interaction-in-slot .interaction-caption{
 position:absolute;
 z-index:2;
 bottom:7%;
 left:4%;
 right:4%;
 color:#ffe4ac;
 font:900 clamp(10px,1.5vw,17px)/1.15 Georgia,serif;
 text-align:center;
 text-shadow:0 2px 5px #000;
}
@media(prefers-reduced-motion:reduce){
 #room .card .interaction-in-slot,
 #room .card .interaction-in-slot img{animation:none!important}
}

/* V43: efeitos cinematográficos distintos, contidos no slot, 1,5 segundo. */
#room .card .interaction-in-slot{isolation:isolate}
#room .card .interaction-in-slot .cinematic-scene{
 position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none;
}
#room .card .interaction-in-slot .cinematic-emblem{
 position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);
 font-size:clamp(34px,6vw,80px);font-weight:900;
 text-shadow:0 0 14px currentColor,0 4px 15px #000;
 animation:cin-emblem 1.5s ease-in-out both;
}
#room .card .interaction-in-slot .cinematic-particle{
 position:absolute;left:50%;top:50%;font-size:clamp(14px,2.5vw,27px);
 color:var(--cin-accent);text-shadow:0 0 12px currentColor;
 opacity:0;animation:cin-particle 1.5s ease-out both;
 animation-delay:var(--cin-delay);
}
#room .card .cinematic-monster{
 --cin-accent:#ff6a39;
 border-color:#ed5533!important;
 box-shadow:inset 0 0 32px #b81518aa,0 0 16px #ff4a34aa!important;
}
#room .card .cinematic-monster::before{
 content:"";position:absolute;inset:-30%;z-index:2;pointer-events:none;
 background:linear-gradient(115deg,transparent 40%,#fff2cfdf 48%,#ff5733cf 51%,transparent 59%);
 transform:translateX(-110%) rotate(-15deg);
 animation:cin-slash 1.5s ease-out both;
}
#room .card .cinematic-monster .cinematic-emblem{color:#ffe6ca;animation:cin-monster-hit 1.5s both}
#room .card .cinematic-monster img{animation:cin-monster-image 1.5s ease-in-out both!important}
#room .card .cinematic-weapon{
 --cin-accent:#ffe5a0;
 border-color:#ffe7a3!important;
 box-shadow:inset 0 0 30px #f1ba4a99,0 0 18px #e9c05f88!important;
}
#room .card .cinematic-weapon::before{
 content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
 background:linear-gradient(115deg,transparent 18%,#fff9d1a8 46%,transparent 65%);
 animation:cin-forge 1.5s ease-out both;
}
#room .card .cinematic-weapon .cinematic-emblem{color:#fff3bf}
#room .card .cinematic-weapon img{animation:cin-weapon-image 1.5s ease-in-out both!important}
#room .card .cinematic-potion{
 --cin-accent:#81ffb5;
 border-color:#76ebac!important;
 box-shadow:inset 0 0 35px #1bbf8a77,0 0 20px #3cffb077!important;
}
#room .card .cinematic-potion::before{
 content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
 background:radial-gradient(circle at 50% 62%,#a8ffb899,transparent 65%);
 animation:cin-heal 1.5s ease-in-out both;
}
#room .card .cinematic-potion .cinematic-emblem{color:#c2ffd4}
#room .card .cinematic-potion img{animation:cin-potion-image 1.5s ease-in-out both!important}
#room .card .cinematic-boss{
 --cin-accent:#ff466f;
 border-color:#e23a65!important;
 box-shadow:inset 0 0 35px #d10d5088,0 0 20px #ef245c99!important;
}
#room .card .cinematic-boss::before{
 content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
 background:radial-gradient(circle,#ff194f99,transparent 70%);
 animation:cin-boss-flash 1.5s ease-in-out both;
}
#room .card .cinematic-boss .cinematic-emblem{color:#ffd1d8}
#room .card .cinematic-boss img{animation:cin-monster-image 1.5s ease-in-out both!important}
@keyframes cin-particle{
 0%,15%{opacity:0;transform:translate(-50%,-50%) scale(.3)}
 35%{opacity:1}
 78%{opacity:.9}
 100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--cin-angle)) translateY(calc(-1 * var(--cin-distance))) scale(.6)}
}
@keyframes cin-emblem{
 0%,12%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-20deg)}
 25%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}
 65%{opacity:.85;transform:translate(-50%,-50%) scale(1)}
 100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}
}
@keyframes cin-monster-hit{
 0%,12%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-45deg)}
 26%{opacity:1;transform:translate(-50%,-50%) scale(1.4) rotate(10deg)}
 45%{transform:translate(-50%,-50%) scale(.9) rotate(-10deg)}
 100%{opacity:0;transform:translate(-50%,-50%) scale(1.4)}
}
@keyframes cin-slash{
 0%,12%{opacity:0;transform:translateX(-110%) rotate(-15deg)}
 23%{opacity:1}
 43%,100%{opacity:0;transform:translateX(110%) rotate(-15deg)}
}
@keyframes cin-monster-image{
 0%{transform:scale(1.05);filter:brightness(.75)}
 23%{transform:scale(1.13) translateX(-3%);filter:brightness(1.6) saturate(1.4)}
 32%{transform:scale(1.1) translateX(3%);filter:brightness(.8)}
 42%{transform:scale(1.05);filter:brightness(1.25)}
 100%{transform:scale(1);filter:brightness(.85)}
}
@keyframes cin-forge{
 0%{opacity:0;transform:translateX(-80%)}
 30%{opacity:1}
 70%{opacity:.6}
 100%{opacity:0;transform:translateX(75%)}
}
@keyframes cin-weapon-image{
 0%{transform:scale(.96);filter:brightness(.65)}
 35%{transform:scale(1.12);filter:brightness(1.65) contrast(1.1)}
 100%{transform:scale(1);filter:brightness(1)}
}
@keyframes cin-heal{
 0%{opacity:0;transform:scale(.3)}
 35%{opacity:.9;transform:scale(1)}
 100%{opacity:0;transform:scale(1.4)}
}
@keyframes cin-potion-image{
 0%{transform:scale(1);filter:brightness(.7)}
 45%{transform:scale(1.07);filter:brightness(1.35) saturate(1.35)}
 100%{transform:scale(1);filter:brightness(1)}
}
@keyframes cin-boss-flash{
 0%{opacity:0;transform:scale(.5)}
 25%{opacity:1;transform:scale(1.2)}
 100%{opacity:0;transform:scale(1.5)}
}
@media(prefers-reduced-motion:reduce){
 #room .card .interaction-in-slot .cinematic-emblem,
 #room .card .interaction-in-slot .cinematic-particle,
 #room .card .interaction-in-slot::before,
 #room .card .interaction-in-slot img{animation:none!important}
 #room .card .interaction-in-slot .cinematic-particle{display:none}
}

/* V44: inventário de um slot, compacto e responsivo */
.inventory-panel{
 position:relative;z-index:4;box-sizing:border-box;
 max-width:1120px;width:100%;margin:12px auto 14px;
 padding:12px 14px;border:1px solid #8c6a3b;
 border-radius:12px;background:linear-gradient(135deg,#241d1aee,#10161cee);
 box-shadow:inset 0 1px 0 #d4a9683b,0 5px 18px #0006;
 color:#f3d9ad;
}
.inventory-heading{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.inventory-heading>span{font-size:25px}
.inventory-heading>div{display:flex;flex-direction:column;gap:3px}
.inventory-heading strong{font:800 13px Georgia,serif;letter-spacing:1.5px}
.inventory-heading small{font-size:11px;color:#bfb2a1}
.inventory-controls{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.inventory-item{
 flex:1 1 135px;min-height:40px;display:flex;align-items:center;justify-content:center;
 padding:6px 10px;border:1px dashed #786449;border-radius:8px;
 background:#0c0c10bb;color:#b6aa9b;font:700 13px Georgia,serif;
 text-align:center;letter-spacing:.5px;
}
.inventory-item.inventory-occupied{border-style:solid;border-color:#d4a25b;color:#ffe5b6;background:#322719}
.inventory-button{
 min-height:42px;padding:8px 12px;border-radius:8px;border:1px solid #a77b46;
 background:linear-gradient(#54402b,#2c241e);color:#f8dfb1;
 font:800 11px Georgia,serif;letter-spacing:.5px;cursor:pointer;
 touch-action:manipulation;
}
.inventory-button:disabled{opacity:.4;cursor:not-allowed}
.inventory-store.is-storing{background:linear-gradient(#5b4031,#4d1d1d);border-color:#e1a165}
.inventory-use:not(:disabled){border-color:#a6d1a0;background:linear-gradient(#375a3b,#1d382b)}
.inventory-button:focus-visible{outline:3px solid #f5d89b;outline-offset:3px}
@media(max-width:600px){
 .inventory-panel{width:calc(100% - 18px);margin:8px auto;padding:10px}
 .inventory-heading{margin-bottom:7px}
 .inventory-heading small{font-size:10px}
 .inventory-controls{gap:6px}
 .inventory-item{flex-basis:100%;min-height:33px}
 .inventory-button{flex:1;min-height:40px}
}

/* V45: inventário integrado aos quatro botões de ação. */
.actions .inventory-action{border-color:#bd985d;background:linear-gradient(180deg,#54412d,#251d1c)}
.actions .inventory-action.inventory-occupied{border-color:#b9d88e;background:linear-gradient(180deg,#3d5334,#192d24)}
.actions .inventory-action.inventory-drop-target{
 outline:3px solid #ffe6a1;outline-offset:2px;
 box-shadow:0 0 28px #f7c666b8,inset 0 0 15px #f7c66688;
 transform:scale(1.04);
}
.inventory-bonus{font-size:clamp(16px,2vw,25px);white-space:nowrap;font-weight:900}
.inventory-drag-ghost{
 position:fixed;z-index:100000;pointer-events:none;transform:translate(-50%,-50%);
 padding:14px 20px;border:2px solid #f0c77c;border-radius:12px;
 color:#fff0ca;background:#231c1bee;box-shadow:0 0 28px #f5bf6c88;
 font:900 23px Georgia,serif;white-space:nowrap;
}
.inventory-drag-origin{filter:brightness(.55);opacity:.75}
#room .card{touch-action:none}
.pause-restart{
 display:inline-flex;align-items:center;justify-content:center;
 min-height:38px;padding:8px 12px;margin:8px;
 border:1px solid #bd795e;border-radius:8px;
 background:#542923;color:#ffe0c9;font:800 12px Georgia,serif;
 cursor:pointer;
}
@media(max-width:600px){
 .actions .inventory-action{min-width:0}
 .inventory-bonus{font-size:19px}
}

/* V46: tablet estreito 601–700 px — restaura ordem e fluxo do jogo.
   Neutraliza regras antigas de viewport fixo e botões destacados. */
@media (min-width:601px) and (max-width:700px) and (orientation:portrait){
 html,body{height:auto!important;min-height:100%!important;overflow-x:hidden!important;overflow-y:auto!important}
 body:not(.title-open) .game-shell{
  display:flex!important;flex-direction:column!important;align-items:stretch!important;
  box-sizing:border-box!important;width:100%!important;max-width:700px!important;
  height:auto!important;min-height:100dvh!important;max-height:none!important;
  padding:10px 14px 24px!important;gap:10px!important;
  overflow:visible!important;margin:0 auto!important;
 }
 body:not(.title-open) .game-shell>.topbar,
 body:not(.title-open) .game-shell>.arcade-strip,
 body:not(.title-open) .game-shell>.room-heading,
 body:not(.title-open) .game-shell>.arena,
 body:not(.title-open) .game-shell>.actions,
 body:not(.title-open) .game-shell>.log{
  position:relative!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
  transform:none!important;grid-row:auto!important;grid-column:auto!important;
  flex:0 0 auto!important;align-self:stretch!important;
  width:100%!important;max-width:100%!important;
  height:auto!important;min-height:0!important;
  margin:0!important;
 }
 body:not(.title-open) .game-shell>.topbar{order:1!important}
 body:not(.title-open) .game-shell>.arcade-strip{order:2!important}
 body:not(.title-open) .game-shell>.room-heading{order:3!important}
 body:not(.title-open) .game-shell>.arena{order:4!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  overflow:visible!important;padding:6px 0!important;
 }
 body:not(.title-open) .game-shell>.actions{order:5!important;
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,minmax(48px,auto))!important;
  gap:8px!important;padding:0!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
 }
 body:not(.title-open) .game-shell>.actions>.action-button{
  box-sizing:border-box!important;min-height:48px!important;height:48px!important;
  width:100%!important;min-width:0!important;
  flex-direction:row!important;gap:8px!important;padding:6px!important;
  font-size:clamp(10px,1.9vw,13px)!important;
 }
 body:not(.title-open) .game-shell>.log{order:6!important;display:flex!important}
 body:not(.title-open) #room,
 body:not(.title-open) #room.boss-room{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,minmax(0,1fr))!important;
  box-sizing:border-box!important;width:min(100%,520px)!important;
  height:auto!important;max-height:none!important;
  aspect-ratio:1.15!important;gap:10px!important;
  margin:0 auto!important;padding:0!important;
 }
 body:not(.title-open) #room>.card,
 body:not(.title-open) #room.boss-room>.card{
  width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;
  max-height:none!important;aspect-ratio:auto!important;margin:0!important;
 }
 body:not(.title-open) .topbar{min-height:82px!important}
 body:not(.title-open) .room-heading{min-height:42px!important}
 body:not(.title-open) .arcade-strip{min-height:32px!important}
}


/* V48 — título sempre completo, mesmo com regras antigas de fontes. */
body:not(.title-open) .brand-copy{min-width:0!important;overflow:hidden!important}
body:not(.title-open) .brand h1{
 display:block!important;box-sizing:border-box!important;
 max-width:100%!important;width:100%!important;
 overflow:visible!important;text-overflow:clip!important;
 white-space:nowrap!important;letter-spacing:-.055em!important;
 line-height:1.1!important;
}

/* V49 — Brasão refinado: moldura dupla, detalhes dourados e tipografia responsiva. */
body:not(.title-open) .brand{
 position:relative!important;
 isolation:isolate;
 overflow:hidden!important;
 border:1px solid #c28a4e!important;
 border-radius:10px!important;
 background:
  radial-gradient(ellipse at 50% -35%,#b97c4638 0%,transparent 72%),
  linear-gradient(135deg,#371b16 0%,#25110f 52%,#130c0c 100%)!important;
 box-shadow:
  inset 0 0 0 2px #170d0c,
  inset 0 0 0 4px #96633666,
  inset 0 0 20px #0009,
  0 2px 0 #6c4227,
  0 7px 16px #0008!important;
}
body:not(.title-open) .brand::before{
 content:"✦"!important;
 display:block!important;
 position:absolute!important;
 z-index:1!important;
 top:50%!important;
 left:7px!important;
 transform:translateY(-50%)!important;
 width:auto!important;height:auto!important;
 font-size:11px!important;line-height:1!important;
 color:#d6a15e!important;
 background:none!important;
 box-shadow:none!important;
 pointer-events:none!important;
}
body:not(.title-open) .brand::after{
 content:""!important;
 display:block!important;
 position:absolute!important;
 inset:5px!important;
 border:1px solid #c18b5273!important;
 border-radius:6px!important;
 background:none!important;
 box-shadow:none!important;
 pointer-events:none!important;
}
body:not(.title-open) .brand-copy{
 position:relative!important;
 z-index:2!important;
 flex:1 1 auto!important;
 min-width:0!important;
 width:auto!important;
 padding:3px 9px 3px 15px!important;
 overflow:hidden!important;
}
body:not(.title-open) .brand h1{
 display:block!important;
 width:100%!important;
 max-width:100%!important;
 margin:0!important;
 padding:0!important;
 white-space:nowrap!important;
 text-overflow:clip!important;
 overflow:visible!important;
 font-family:Georgia,"Times New Roman",serif!important;
 font-weight:900!important;
 font-variant:small-caps!important;
 letter-spacing:-.055em!important;
 line-height:1.05!important;
 color:#f8d8a1!important;
 text-shadow:0 1px 0 #fff5d8a6,0 2px 0 #9d5e32,0 4px 3px #070303,0 0 16px #df9d4a5c!important;
}
body:not(.title-open) .brand p{
 margin:4px 0 0!important;
 max-width:100%!important;
 overflow:hidden!important;
 text-overflow:ellipsis!important;
 white-space:nowrap!important;
 font-family:Georgia,"Times New Roman",serif!important;
 font-weight:700!important;
 letter-spacing:.055em!important;
 color:#d7ac74!important;
 text-shadow:0 1px 2px #000!important;
}
@media(max-width:600px){
 body:not(.title-open) .brand-copy{padding-left:11px!important;padding-right:3px!important}
 body:not(.title-open) .brand::before{left:4px!important;font-size:8px!important}
 body:not(.title-open) .brand::after{inset:3px!important}
}

/* V50 — reserva espaço real para o título completo em qualquer desktop. */
body:not(.title-open) .brand{box-sizing:border-box!important;min-width:0!important}
body:not(.title-open) .brand-copy{box-sizing:border-box!important;min-width:0!important;max-width:100%!important}
body:not(.title-open) .brand h1{font-variant:normal!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important}
body:not(.title-open) .brand p{font-size:clamp(8px,.7vw,11px)!important}


/* V51: reserva largura ao título; fonte ajustada pelo tamanho real do texto. */
body:not(.title-open) .brand-copy{overflow:visible!important;min-width:0!important}
body:not(.title-open) .brand h1{
 display:block!important;width:100%!important;max-width:100%!important;
 white-space:nowrap!important;overflow:visible!important;
 text-overflow:clip!important;font-stretch:normal!important;
}


/* V52 — Prólogo em HQ, quadros recortados com entrada sequencial de 1 segundo */
.comic-intro[hidden]{display:none!important}
.comic-intro{
 position:fixed;inset:0;z-index:200000;
 background:radial-gradient(ellipse at 50% 20%,#342015,#08090c 80%);
 display:flex;align-items:center;justify-content:center;
 padding:clamp(8px,2vw,22px);
 box-sizing:border-box;
 color:#f5d6a2;
}
.comic-stage{
 display:flex;flex-direction:column;
 width:min(100%,860px);height:min(100%,920px);min-height:0;
 border:2px solid #a87940;border-radius:12px;
 background:#0a090a;overflow:hidden;
 box-shadow:0 0 0 3px #21150e,0 20px 60px #000c;
}
.comic-header,.comic-footer{
 flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
 gap:12px;padding:12px 16px;
 background:linear-gradient(90deg,#24150e,#16131a);
}
.comic-header{border-bottom:1px solid #7f5934}
.comic-footer{border-top:1px solid #7f5934}
.comic-kicker{font:800 clamp(11px,2vw,17px) Georgia,serif;letter-spacing:.08em}
.comic-counter,.comic-hint{font:700 12px Georgia,serif;color:#d7b584}
.comic-panels{
 min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain;
 display:flex;flex-direction:column;gap:6px;
 padding:7px;background:#070708;scrollbar-color:#a67a47 #17100d;
}
.comic-panel{
 margin:0;flex:0 0 auto;width:100%;
 border:2px solid #b39b7a;background:#100d0d;
 opacity:0;transform:translateY(22px) scale(.97);
 transition:opacity .55s ease,transform .65s cubic-bezier(.2,.8,.2,1);
 overflow:hidden;
}
.comic-panel-visible{opacity:1;transform:translateY(0) scale(1)}
.comic-panel img{display:block;width:100%;height:auto;user-select:none}
.comic-next{
 flex:0 0 auto;min-height:44px;padding:10px 17px;
 border:1px solid #e6b76e;border-radius:8px;
 background:linear-gradient(#654321,#322012);
 color:#fff0cf;font:800 13px Georgia,serif;
 cursor:pointer;touch-action:manipulation;
}
.comic-next:disabled{opacity:.4;cursor:wait}
.comic-next:focus-visible{outline:3px solid #f8d995;outline-offset:2px}
@media(max-width:600px){
 .comic-intro{padding:5px}
 .comic-stage{height:100%;border-radius:8px}
 .comic-header,.comic-footer{padding:9px 10px}
 .comic-kicker{font-size:11px}
 .comic-counter{font-size:10px}
 .comic-hint{font-size:10px;max-width:42%}
 .comic-next{font-size:11px;padding:9px}
 .comic-panels{gap:4px;padding:4px}
}
@media(prefers-reduced-motion:reduce){
 .comic-panel{transition:none!important}
}


/* V53 — tela de HQ totalmente preta, sem textos ou molduras. */
.comic-intro{
 background:#000!important;
 padding:0!important;
 inset:0!important;
}
.comic-stage{
 position:relative!important;
 width:100%!important;
 max-width:none!important;
 height:100%!important;
 min-height:0!important;
 max-height:none!important;
 border:0!important;
 border-radius:0!important;
 background:#000!important;
 box-shadow:none!important;
 overflow:hidden!important;
}
.comic-panels{
 flex:1!important;
 width:100%!important;
 box-sizing:border-box!important;
 background:#000!important;
 padding:0 0 70px!important;
 gap:0!important;
 border:0!important;
 scrollbar-color:#4a4a4a #000!important;
}
.comic-panel{
 box-sizing:border-box!important;
 border:0!important;
 border-radius:0!important;
 background:#000!important;
 margin:0 auto!important;
 width:min(100%,1043px)!important;
 box-shadow:none!important;
}
.comic-panel img{
 display:block!important;
 width:100%!important;
 height:auto!important;
}
.comic-next{
 position:absolute!important;
 z-index:5!important;
 right:clamp(12px,3vw,35px)!important;
 bottom:clamp(12px,3vh,30px)!important;
 width:56px!important;
 height:56px!important;
 min-height:56px!important;
 padding:0!important;
 border:0!important;
 border-radius:50%!important;
 background:#111e!important;
 color:#fff!important;
 box-shadow:none!important;
 font:900 34px/1 Arial,sans-serif!important;
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 cursor:pointer;
}
.comic-next:not(:disabled):hover{background:#292929!important}
.comic-next:disabled{opacity:.25!important;cursor:wait}
@media(max-width:600px){
 .comic-next{width:48px!important;height:48px!important;min-height:48px!important;font-size:28px!important}
 .comic-panels{padding-bottom:62px!important}
}

/* V55: original comic layout - paired frames remain side-by-side. */
.comic-panel-row{display:grid;grid-template-columns:minmax(0,1fr);gap:5px;width:100%;flex:0 0 auto}
.comic-panel-row-pair{grid-template-columns:repeat(2,minmax(0,1fr))}
.comic-panel-row .comic-panel{min-width:0;width:100%;height:100%}
.comic-panel-row .comic-panel img{width:100%;height:100%;object-fit:fill}
@media(max-width:600px){.comic-panel-row{gap:3px}}


/* V56 — respiro entre os quadros sem moldura, sobre fundo preto. */
.comic-panels{
  gap:14px!important;
  padding:12px 12px 78px!important;
  background:#000!important;
}
.comic-panel-row{
  gap:12px!important;
  background:#000!important;
}
.comic-panel-row-pair{
  column-gap:12px!important;
}
.comic-panel{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
@media(max-width:600px){
  .comic-panels{
    gap:9px!important;
    padding:8px 8px 70px!important;
  }
  .comic-panel-row,
  .comic-panel-row-pair{
    gap:8px!important;
  }
}

/* V57 — preservar proporções e centralizar cada quadro na HQ. */
.comic-panel-row{
 width:min(100%,1043px)!important;
 max-width:1043px!important;
 margin-inline:auto!important;
 align-items:start!important;
}
.comic-panel-row .comic-panel{
 height:auto!important;
 min-height:0!important;
 align-self:start!important;
}
.comic-panel-row .comic-panel img{
 width:100%!important;
 height:auto!important;
 object-fit:contain!important;
 object-position:center!important;
}
.comic-panel-row-pair{
 grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
}

/* V58: recortes fiéis à imagem de referência, sem zoom ou corte CSS. */
.comic-panel-row .comic-panel,
.comic-panel-row .comic-panel img{
 aspect-ratio:auto!important;
 max-height:none!important;
 min-height:0!important;
 object-fit:contain!important;
 object-position:center!important;
}
.comic-panel-row .comic-panel img{
 display:block!important;
 width:100%!important;
 height:auto!important;
}

/* V61: impedir que a interface da partida apareça durante o prólogo. */
body.title-open #game,
body.title-open .dungeon-atmosphere,
body.title-open .foreground-scene{
 visibility:hidden!important;
 pointer-events:none!important;
}
body.title-open #comic-intro:not([hidden]){
 visibility:visible!important;
}

/* V62 — tela exclusiva após derrotar o Boss, conforme referência enviada. */
.boss-victory[hidden]{display:none!important}
.boss-victory{
 position:fixed;inset:0;z-index:300000;
 display:grid;place-items:center;background:#000;
 padding:0;box-sizing:border-box;
}
.boss-victory-scene{
 position:relative;width:100%;height:100%;
 background:#000 url("../assets/victory-boss.webp") center center/contain no-repeat;
 overflow:hidden;
 font-family:Georgia,"Times New Roman",serif;
}
.boss-victory-record{
 position:absolute;top:7%;right:3%;width:53%;
 text-align:center;text-shadow:2px 3px 5px #000,0 0 16px #000;
}
.boss-victory-record h2{
 margin:0 0 2%;font-size:clamp(27px,5.6vw,95px);
 line-height:1.05;letter-spacing:.025em;color:#f5b72e;
 font-weight:900;text-transform:uppercase;
}
.boss-victory-record p{
 margin:0;color:#fff;font-weight:900;
 font-size:clamp(12px,3vw,51px);
 white-space:nowrap;letter-spacing:.01em;
}
.boss-victory-bottom{
 position:absolute;left:6%;bottom:7%;
 display:flex;flex-direction:column;align-items:flex-start;gap:12px;
}
.boss-victory-bottom h2{
 margin:0;font-size:clamp(48px,7.3vw,125px);
 line-height:1;color:#f5b72e;font-weight:900;
 text-shadow:2px 3px 5px #000,0 0 18px #000;
 font-variant:small-caps;
}
#boss-victory-register{
 background:#21140de8;color:#ffda95;
 border:2px solid #bc853b;border-radius:7px;
 font:800 clamp(12px,1.2vw,18px) Georgia,serif;
 padding:12px 17px;cursor:pointer;min-height:44px;
}
#boss-victory-register:focus-visible{outline:3px solid white;outline-offset:3px}
@media(max-width:650px){
 .boss-victory-scene{background-position:center 43%;background-size:cover}
 .boss-victory-record{top:10%;right:2%;width:66%}
 .boss-victory-record h2{font-size:clamp(26px,7vw,52px)}
 .boss-victory-record p{font-size:clamp(11px,3vw,20px)}
 .boss-victory-bottom{left:5%;bottom:5%}
 .boss-victory-bottom h2{font-size:clamp(46px,12vw,82px)}
}

/* V63 — derrota exclusiva, inclusive antes do Boss; botão reinicia a partida. */
.game-defeat[hidden]{display:none!important}
.game-defeat{position:fixed;inset:0;z-index:300001;display:grid;place-items:center;background:#000}
.game-defeat-scene{position:relative;width:100%;height:100%;overflow:hidden;background:#000 url("../assets/defeat-boss.webp") center/contain no-repeat;font-family:Georgia,"Times New Roman",serif}
.game-defeat-heading{position:absolute;left:5%;top:12%;width:55%;text-shadow:2px 3px 5px #000,0 0 14px #000}
.game-defeat-heading h2{margin:0 0 10px;color:#f7b737;font-size:clamp(45px,7.4vw,128px);font-weight:900;line-height:1.1}
.game-defeat-heading p{margin:0;color:#fff;font-size:clamp(13px,2.6vw,45px);font-weight:900;white-space:nowrap}
#game-defeat-retry{position:absolute;left:5%;bottom:8%;min-height:50px;padding:15px 28px;border:3px solid #e8a83a;border-radius:8px;background:linear-gradient(180deg,#510c0c,#200607);color:#fff1c8;font:900 clamp(17px,2.1vw,35px) Georgia,serif;box-shadow:0 0 0 2px #2b0b08,inset 0 0 0 2px #9c5018,0 5px 22px #000;cursor:pointer}
#game-defeat-retry:hover{filter:brightness(1.18)}
#game-defeat-retry:focus-visible{outline:3px solid #fff;outline-offset:5px}
@media(max-width:650px){
 .game-defeat-scene{background-size:cover;background-position:center}
 .game-defeat-heading{top:10%;left:4%;width:92%}
 .game-defeat-heading h2{font-size:clamp(45px,12vw,78px)}
 .game-defeat-heading p{font-size:clamp(12px,3.4vw,21px)}
 #game-defeat-retry{left:5%;bottom:7%;padding:12px 18px;font-size:clamp(16px,4.3vw,24px)}
}


/* V64 — vitória e derrota como cena 16:9 centralizada sobre o tabuleiro,
   seguindo a composição enviada pelo jogador. */
.boss-victory,
.game-defeat{
  position:fixed!important;
  inset:0!important;
  z-index:300000!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:clamp(10px,2vw,30px)!important;
  box-sizing:border-box!important;
  background:rgba(0,0,0,.52)!important;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.boss-victory[hidden],
.game-defeat[hidden]{display:none!important}
.boss-victory-scene,
.game-defeat-scene{
  position:relative!important;
  width:min(100%,830px,calc(80dvh * 16 / 9))!important;
  height:auto!important;
  aspect-ratio:16 / 9!important;
  max-height:80dvh!important;
  flex:0 0 auto;
  overflow:hidden!important;
  background-size:100% 100%!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  box-shadow:0 16px 55px rgba(0,0,0,.7)!important;
  container-type:inline-size;
}
.boss-victory-record{
  position:absolute!important;
  top:4%!important;
  right:3%!important;
  width:52%!important;
  text-align:center!important;
  text-shadow:1px 2px 5px #000,0 0 13px #000!important;
}
.boss-victory-record h2{
  font-size:clamp(18px,5.4cqw,54px)!important;
  margin:0 0 1.5%!important;
  line-height:1.1!important;
}
.boss-victory-record p{
  font-size:clamp(10px,3.05cqw,28px)!important;
  white-space:nowrap!important;
  letter-spacing:0!important;
  line-height:1.15!important;
}
.boss-victory-bottom{
  position:absolute!important;
  left:7%!important;
  bottom:4%!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:flex-end!important;
  gap:14px!important;
}
.boss-victory-bottom h2{
  font-size:clamp(28px,6.7cqw,65px)!important;
  line-height:1!important;
  white-space:nowrap!important;
}
#boss-victory-register{
  font-size:clamp(9px,1.5cqw,14px)!important;
  min-height:32px!important;
  padding:7px 10px!important;
}
.game-defeat-heading{
  position:absolute!important;
  top:5%!important;
  left:4%!important;
  width:65%!important;
  text-shadow:1px 2px 5px #000,0 0 14px #000!important;
}
.game-defeat-heading h2{
  font-size:clamp(24px,6.5cqw,64px)!important;
  line-height:1.08!important;
  margin:0 0 1.5%!important;
}
.game-defeat-heading p{
  font-size:clamp(10px,2.65cqw,25px)!important;
  white-space:nowrap!important;
}
#game-defeat-retry{
  position:absolute!important;
  left:5%!important;
  bottom:6%!important;
  min-height:36px!important;
  font-size:clamp(12px,2.2cqw,22px)!important;
  padding:9px 16px!important;
}
@media(max-width:650px){
 .boss-victory,.game-defeat{
  padding:8px!important;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
 }
 .boss-victory-scene,.game-defeat-scene{
  width:min(100%,calc(92dvh * 16 / 9))!important;
  max-height:92dvh!important;
  background-size:100% 100%!important;
 }
 .boss-victory-record{top:5%!important;right:2%!important;width:57%!important}
 .boss-victory-record h2{font-size:5.2cqw!important}
 .boss-victory-record p{font-size:2.8cqw!important}
 .boss-victory-bottom{left:5%!important;bottom:5%!important;gap:7px!important}
 .boss-victory-bottom h2{font-size:7cqw!important}
 #boss-victory-register{font-size:1.9cqw!important;min-height:28px!important;padding:5px 7px!important}
 .game-defeat-heading{top:6%!important;left:4%!important;width:80%!important}
 .game-defeat-heading h2{font-size:7cqw!important}
 .game-defeat-heading p{font-size:2.7cqw!important}
 #game-defeat-retry{font-size:2.6cqw!important;min-height:32px!important;padding:6px 10px!important}
}


/* V65 — cenas finais substituem as cartas dentro da arena.
   O HUD, comandos e demais informações permanecem visíveis. */
.arena{position:relative!important;isolation:isolate}
.arena:has(> .boss-victory:not([hidden])) #room,
.arena:has(> .game-defeat:not([hidden])) #room{
 visibility:hidden!important;
 pointer-events:none!important;
}
.arena > .boss-victory,
.arena > .game-defeat{
 position:absolute!important;
 inset:0!important;
 width:100%!important;
 height:100%!important;
 min-height:0!important;
 max-height:none!important;
 z-index:10!important;
 padding:0!important;
 margin:0!important;
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 background:transparent!important;
 backdrop-filter:none!important;
 -webkit-backdrop-filter:none!important;
 overflow:visible!important;
 pointer-events:auto!important;
}
.arena > .boss-victory[hidden],
.arena > .game-defeat[hidden]{display:none!important}
.arena > .boss-victory .boss-victory-scene,
.arena > .game-defeat .game-defeat-scene{
 position:relative!important;
 width:min(100%,830px)!important;
 height:auto!important;
 max-height:100%!important;
 aspect-ratio:16 / 9!important;
 background-size:100% 100%!important;
 background-position:center!important;
 border:0!important;
 box-shadow:0 10px 30px rgba(0,0,0,.42)!important;
 transform:translate3d(calc(var(--parallax-x,0px) * .22),calc(var(--parallax-y,0px) * .22),0);
 transition:transform .22s ease-out;
 will-change:transform;
}
@media(max-width:650px){
 .arena > .boss-victory .boss-victory-scene,
 .arena > .game-defeat .game-defeat-scene{
  width:100%!important;
  max-height:100%!important;
  background-size:100% 100%!important;
 }
}
@media(prefers-reduced-motion:reduce){
 .arena > .boss-victory .boss-victory-scene,
 .arena > .game-defeat .game-defeat-scene{
  transform:none!important;transition:none!important;
 }
}


/* V66 — as telas finais recebem profundidade e moldura das cartas. */
.arena > .boss-victory .boss-victory-scene,
.arena > .game-defeat .game-defeat-scene{
  --final-tilt-x:0deg;
  --final-tilt-y:0deg;
  --final-shift-x:0px;
  --final-shift-y:0px;
  background-image:none!important;
  overflow:hidden!important;
  isolation:isolate;
  border:3px solid #a97939!important;
  border-radius:12px!important;
  outline:1px solid #e8b965;
  outline-offset:-8px;
  box-shadow:inset 0 0 0 4px #28180e,
    inset 0 0 0 7px #d5a356,
    0 7px 0 #28160d,0 18px 35px #000c!important;
  transform:perspective(950px)
    translate3d(calc(var(--parallax-x,0px) * .22),calc(var(--parallax-y,0px) * .22),0)
    rotateX(var(--final-tilt-x)) rotateY(var(--final-tilt-y))!important;
  transition:transform 140ms ease-out,box-shadow 180ms ease-out!important;
  transform-style:preserve-3d;
}
.arena > .boss-victory .boss-victory-scene::before,
.arena > .game-defeat .game-defeat-scene::before{
  content:"";
  position:absolute;
  inset:-3%;
  z-index:-1;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform:translate3d(var(--final-shift-x),var(--final-shift-y),0) scale(1.035);
  transition:transform 140ms ease-out;
  pointer-events:none;
}
.arena > .boss-victory .boss-victory-scene::before{
  background-image:url("../assets/victory-boss.webp");
}
.arena > .game-defeat .game-defeat-scene::before{
  background-image:url("../assets/defeat-boss.webp");
}
.arena > .boss-victory .boss-victory-scene::after,
.arena > .game-defeat .game-defeat-scene::after{
  content:"";position:absolute;inset:9px;
  border:1px solid #f3ca7b70;
  border-radius:5px;pointer-events:none;z-index:20;
}
@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){
 .arena > .boss-victory .boss-victory-scene,
 .arena > .game-defeat .game-defeat-scene{
  transform:none!important;transition:none!important;
 }
 .arena > .boss-victory .boss-victory-scene::before,
 .arena > .game-defeat .game-defeat-scene::before{
  transform:scale(1.035)!important;transition:none!important;
 }
}


/* V67 — no mobile, a arte final ocupa mais altura e fica centralizada na arena. */
@media (max-width:650px){
 .arena:has(> .boss-victory:not([hidden])),
 .arena:has(> .game-defeat:not([hidden])){
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:8px 12px!important;
  min-height:0!important;
  box-sizing:border-box!important;
 }
 .arena > .boss-victory,
 .arena > .game-defeat{
  position:absolute!important;
  inset:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:8px 12px!important;
  box-sizing:border-box!important;
 }
 .arena > .boss-victory .boss-victory-scene,
 .arena > .game-defeat .game-defeat-scene{
  width:min(100%,560px)!important;
  height:auto!important;
  aspect-ratio:5 / 4!important;
  max-height:calc(100% - 12px)!important;
  margin:auto!important;
  flex:none!important;
  background:none!important;
  border-radius:12px!important;
 }
 .arena > .boss-victory .boss-victory-scene::before,
 .arena > .game-defeat .game-defeat-scene::before{
  inset:-3%!important;
  background-size:cover!important;
  background-position:center center!important;
 }
 .boss-victory-record{
  top:5%!important;right:3%!important;width:61%!important;
 }
 .boss-victory-record h2{font-size:clamp(19px,6.5cqw,38px)!important}
 .boss-victory-record p{font-size:clamp(9px,2.8cqw,17px)!important}
 .boss-victory-bottom{bottom:5%!important;left:5%!important}
 .boss-victory-bottom h2{font-size:clamp(34px,8cqw,55px)!important}
 .game-defeat-heading{top:5%!important;left:5%!important;width:85%!important}
 .game-defeat-heading h2{font-size:clamp(28px,8cqw,55px)!important}
 .game-defeat-heading p{font-size:clamp(10px,3cqw,18px)!important}
 #game-defeat-retry{left:5%!important;bottom:6%!important}
}


/* V68 — conteúdo do botão Inventário sempre dentro de seus limites. */
.actions #inventory-slot{
 box-sizing:border-box!important;
 min-width:0!important;
 max-width:100%!important;
 overflow:hidden!important;
 display:flex!important;
 flex-direction:row!important;
 align-items:center!important;
 justify-content:center!important;
 flex-wrap:nowrap!important;
 gap:clamp(3px,.7vw,8px)!important;
 padding-inline:clamp(5px,1vw,12px)!important;
}
.actions #inventory-slot .inventory-bonus{
 display:block!important;
 flex:0 0 auto!important;
 min-width:0!important;
 max-width:38%!important;
 font-size:clamp(13px,1.65vw,23px)!important;
 line-height:1!important;
 white-space:nowrap!important;
 letter-spacing:-.04em!important;
}
.actions #inventory-slot > span:last-child{
 display:block!important;
 flex:0 1 auto!important;
 min-width:0!important;
 max-width:100%!important;
 overflow:hidden!important;
 text-overflow:ellipsis!important;
 white-space:nowrap!important;
 font-size:clamp(9px,1.05vw,14px)!important;
 line-height:1.15!important;
 letter-spacing:0!important;
}
@media(max-width:700px){
 .actions #inventory-slot{
  gap:4px!important;
  padding-inline:5px!important;
 }
 .actions #inventory-slot .inventory-bonus{
  font-size:clamp(12px,3.8vw,18px)!important;
  max-width:35%!important;
 }
 .actions #inventory-slot > span:last-child{
  font-size:clamp(9px,2.7vw,12px)!important;
 }
}
@media(max-width:360px){
 .actions #inventory-slot .inventory-bonus{font-size:12px!important}
 .actions #inventory-slot > span:last-child{font-size:9px!important}
}


/* V69 — entrada cinematográfica; animações não alteram o transform do parallax. */
@keyframes result-frame-entrance{
  0%{opacity:0;filter:brightness(.4) blur(7px);clip-path:inset(15% 15% round 14px)}
  55%{opacity:1;filter:brightness(1.22) blur(0);clip-path:inset(0 round 12px)}
  100%{opacity:1;filter:brightness(1) blur(0);clip-path:inset(0 round 12px)}
}
@keyframes result-art-entrance{
  0%{opacity:.3;filter:brightness(.4) saturate(.7);
      transform:translate3d(var(--final-shift-x),var(--final-shift-y),0) scale(1.16)}
  60%{opacity:1;filter:brightness(1.22) saturate(1.1)}
  100%{opacity:1;filter:brightness(1) saturate(1);
       transform:translate3d(var(--final-shift-x),var(--final-shift-y),0) scale(1.035)}
}
@keyframes result-content-entrance{
  0%{opacity:0;translate:0 14px}
  100%{opacity:1;translate:0 0}
}
.arena > .boss-victory:not([hidden]) .boss-victory-scene,
.arena > .game-defeat:not([hidden]) .game-defeat-scene{
 animation:result-frame-entrance .9s cubic-bezier(.18,.7,.25,1) both!important;
}
.arena > .boss-victory:not([hidden]) .boss-victory-scene::before,
.arena > .game-defeat:not([hidden]) .game-defeat-scene::before{
 animation:result-art-entrance 1.15s cubic-bezier(.18,.7,.25,1) both!important;
}
.arena > .boss-victory:not([hidden]) .boss-victory-record,
.arena > .game-defeat:not([hidden]) .game-defeat-heading{
 animation:result-content-entrance .6s ease-out .55s both;
}
.arena > .boss-victory:not([hidden]) .boss-victory-bottom,
.arena > .game-defeat:not([hidden]) #game-defeat-retry{
 animation:result-content-entrance .65s ease-out .85s both;
}
@media(prefers-reduced-motion:reduce){
 .arena > .boss-victory:not([hidden]) .boss-victory-scene,
 .arena > .game-defeat:not([hidden]) .game-defeat-scene,
 .arena > .boss-victory:not([hidden]) .boss-victory-scene::before,
 .arena > .game-defeat:not([hidden]) .game-defeat-scene::before,
 .arena > .boss-victory:not([hidden]) .boss-victory-record,
 .arena > .game-defeat:not([hidden]) .game-defeat-heading,
 .arena > .boss-victory:not([hidden]) .boss-victory-bottom,
 .arena > .game-defeat:not([hidden]) #game-defeat-retry{
  animation:none!important;
 }
}


/* V70 — permitir parallax nos dispositivos touch sem afetar acessibilidade. */
@media(hover:none),(pointer:coarse){
 .arena > .boss-victory .boss-victory-scene,
 .arena > .game-defeat .game-defeat-scene{
  transform:perspective(900px) rotateX(var(--final-tilt-x,0deg)) rotateY(var(--final-tilt-y,0deg))!important;
  transition:transform 170ms ease-out!important;
 }
 .arena > .boss-victory .boss-victory-scene::before,
 .arena > .game-defeat .game-defeat-scene::before{
  transform:translate3d(var(--final-shift-x,0px),var(--final-shift-y,0px),0) scale(1.13)!important;
  transition:transform 170ms ease-out!important;
 }
}
@media(prefers-reduced-motion:reduce){
 .arena > .boss-victory .boss-victory-scene,
 .arena > .game-defeat .game-defeat-scene{transform:none!important;transition:none!important}
 .arena > .boss-victory .boss-victory-scene::before,
 .arena > .game-defeat .game-defeat-scene::before{transform:scale(1.035)!important;transition:none!important}
}


/* V71: layout determinístico; evita que animações e proporções concorrentes
   façam a cena final variar de tamanho. */
.arena:has(> .boss-victory:not([hidden])),
.arena:has(> .game-defeat:not([hidden])){
 position:relative!important;
 min-height:clamp(250px,45dvh,510px)!important;
 align-items:center!important;
 justify-content:center!important;
}
.arena > .boss-victory:not([hidden]),
.arena > .game-defeat:not([hidden]){
 position:absolute!important;
 inset:0!important;
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 padding:8px!important;
 overflow:visible!important;
}
.arena > .boss-victory .boss-victory-scene,
.arena > .game-defeat .game-defeat-scene{
 position:relative!important;
 flex:none!important;
 box-sizing:border-box!important;
 width:min(94%,830px)!important;
 height:auto!important;
 aspect-ratio:16 / 9!important;
 max-height:none!important;
 margin:auto!important;
 overflow:hidden!important;
 transform:perspective(1000px) rotateX(var(--final-tilt-x,0deg)) rotateY(var(--final-tilt-y,0deg))!important;
 transition:transform 180ms ease-out!important;
 animation:result-frame-entrance .9s ease-out both!important;
 isolation:isolate;
 background:none!important;
}
.arena > .boss-victory .boss-victory-scene::before,
.arena > .game-defeat .game-defeat-scene::before{
 z-index:0!important;
 inset:-7%!important;
 transform:translate3d(var(--final-shift-x,0px),var(--final-shift-y,0px),0) scale(1.04)!important;
 transition:transform 180ms ease-out!important;
 animation:none!important;
 background-size:cover!important;
 background-position:center!important;
}
.arena > .boss-victory .boss-victory-scene > *,
.arena > .game-defeat .game-defeat-scene > *{
 z-index:2;
}
@media(max-width:650px){
 .arena:has(> .boss-victory:not([hidden])),
 .arena:has(> .game-defeat:not([hidden])){
  min-height:clamp(270px,43dvh,440px)!important;
 }
 .arena > .boss-victory .boss-victory-scene,
 .arena > .game-defeat .game-defeat-scene{
  width:min(96%,560px)!important;
  aspect-ratio:5 / 4!important;
  height:auto!important;
  max-height:none!important;
 }
}
@media(prefers-reduced-motion:reduce){
 .arena > .boss-victory .boss-victory-scene,
 .arena > .game-defeat .game-defeat-scene{
  animation:none!important;transform:none!important;transition:none!important;
 }
 .arena > .boss-victory .boss-victory-scene::before,
 .arena > .game-defeat .game-defeat-scene::before{
  transform:scale(1.04)!important;transition:none!important;
 }
}


/* V72: medidas consistentes; parallax independente da animação de entrada. */
.arena:has(> .boss-victory:not([hidden])),
.arena:has(> .game-defeat:not([hidden])){
  min-height:clamp(280px,45dvh,510px)!important;
  overflow:visible!important;
}
.arena > .boss-victory .boss-victory-scene,
.arena > .game-defeat .game-defeat-scene{
  width:min(94%,830px)!important;
  aspect-ratio:16/9!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  transform:perspective(1100px) rotateX(var(--final-tilt-x,0deg)) rotateY(var(--final-tilt-y,0deg))!important;
  transform-origin:center!important;
  backface-visibility:hidden;
  transition:none!important;
}
.arena > .boss-victory .boss-victory-scene::before,
.arena > .game-defeat .game-defeat-scene::before{
  inset:-8%!important;
  transform:translate3d(var(--final-shift-x,0px),var(--final-shift-y,0px),0) scale(1.055)!important;
  transition:none!important;
}
@media(max-width:650px){
 .arena:has(> .boss-victory:not([hidden])),
 .arena:has(> .game-defeat:not([hidden])){
  min-height:clamp(300px,48dvh,460px)!important;
 }
 .arena > .boss-victory .boss-victory-scene,
 .arena > .game-defeat .game-defeat-scene{
  width:min(96%,560px)!important;
  aspect-ratio:5/4!important;
 }
}
@media(prefers-reduced-motion:reduce){
 .arena > .boss-victory .boss-victory-scene,
 .arena > .game-defeat .game-defeat-scene{
  transform:none!important;animation:none!important;
 }
 .arena > .boss-victory .boss-victory-scene::before,
 .arena > .game-defeat .game-defeat-scene::before{
  transform:scale(1.055)!important;animation:none!important;
 }
}


/* V73 — cronômetro, recorde e sala numa única moldura. */
body:not(.title-open) .game-shell>.game-status-panel{
 order:2!important;
 position:relative!important;
 grid-row:auto!important;
 width:var(--play-width,100%)!important;
 max-width:100%!important;
 margin:4px auto 8px!important;
 padding:0!important;
 box-sizing:border-box!important;
 background:linear-gradient(120deg,#101b24,#192934 55%,#101922)!important;
 border:2px solid #a47b46!important;
 border-radius:10px!important;
 box-shadow:inset 0 0 0 1px #27313b,0 3px 10px #0008!important;
 color:#f7e4be;
 display:flex!important;
 flex-direction:column!important;
 overflow:hidden!important;
}
.game-status-panel .status-top,
.game-status-panel .status-bottom{
 display:grid;
 align-items:center;
 box-sizing:border-box;
 gap:8px;
 padding:7px 12px;
 width:100%;
 min-width:0;
}
.game-status-panel .status-top{
 grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) auto;
 border-bottom:1px solid #98704470;
 font-size:clamp(11px,1.15vw,14px);
}
.game-status-panel .status-top>span{
 min-width:0;
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
}
.game-status-panel #arcade-scores{
 margin:0!important;
 min-width:0;
 max-width:100%;
 font-size:clamp(10px,1vw,13px);
 padding:6px 9px;
}
.game-status-panel .status-bottom{
 grid-template-columns:auto minmax(0,1fr) auto;
 min-height:42px;
}
.game-status-panel .status-bottom .section-label{
 white-space:nowrap;
}
.game-status-panel #message{
 min-width:0;
 margin:0!important;
 text-align:center;
 line-height:1.25;
}
.game-status-panel .room-progress{
 white-space:nowrap;
 text-align:right;
}
@media(max-width:700px){
 body:not(.title-open) .game-shell>.game-status-panel{
  margin:3px auto 7px!important;
 }
 .game-status-panel .status-top{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
  padding:5px 8px;
  gap:5px;
  font-size:clamp(9px,2.3vw,12px);
 }
 .game-status-panel #arcade-scores{
  font-size:clamp(9px,2.4vw,12px);
  padding:5px 7px;
 }
 .game-status-panel .status-bottom{
  grid-template-columns:auto minmax(0,1fr) auto;
  padding:6px 8px;
  gap:7px;
  min-height:38px;
 }
 .game-status-panel .status-bottom .section-label{
  font-size:clamp(10px,2.6vw,13px);
 }
 .game-status-panel #message{
  font-size:clamp(11px,3vw,15px);
 }
 .game-status-panel .room-progress{
  font-size:clamp(9px,2.3vw,12px);
 }
 /* Espaço economizado no painel é destinado à arena e às cartas. */
 body:not(.title-open) .game-shell>.arena:not(:has(> .boss-victory:not([hidden]))):not(:has(> .game-defeat:not([hidden]))){
  padding-block:3px!important;
  min-height:0!important;
 }
 body:not(.title-open) .arena #room{
  width:min(100%,620px)!important;
  max-width:100%!important;
 }
}


/* V74: a imagem deve existir apenas na camada móvel, não duplicada no cartão. */
.arena > .boss-victory .boss-victory-scene,
.arena > .game-defeat .game-defeat-scene{
 background-image:none!important;
 background-color:#080507!important;
 transform-style:preserve-3d!important;
 animation:result-frame-entrance .8s ease-out both!important;
}
.arena > .boss-victory .boss-victory-scene::before,
.arena > .game-defeat .game-defeat-scene::before{
 content:""!important;
 position:absolute!important;
 z-index:0!important;
 inset:-9%!important;
 background-repeat:no-repeat!important;
 background-size:cover!important;
 background-position:center!important;
 opacity:1!important;
 will-change:transform;
 transform:translate3d(var(--final-shift-x,0px),var(--final-shift-y,0px),0) scale(1.065)!important;
 animation:none!important;
}
.arena > .boss-victory .boss-victory-scene::before{
 background-image:url("../assets/victory-boss.webp")!important;
}
.arena > .game-defeat .game-defeat-scene::before{
 background-image:url("../assets/defeat-boss.webp")!important;
}
.arena > .boss-victory .boss-victory-scene > *,
.arena > .game-defeat .game-defeat-scene > *{
 position:absolute;
 z-index:2!important;
}
#help{
 appearance:none!important;
 -webkit-appearance:none!important;
 display:grid!important;
 place-items:center!important;
 width:44px!important;
 height:44px!important;
 min-width:44px!important;
 min-height:44px!important;
 max-width:44px!important;
 max-height:44px!important;
 padding:0!important;
 border-radius:50%!important;
 background:radial-gradient(circle at 40% 25%,#24313a,#101820)!important;
 color:#e7ad51!important;
 font-family:Arial,sans-serif!important;
 font-size:22px!important;
 font-weight:400!important;
 line-height:1!important;
 text-shadow:none!important;
 box-shadow:0 2px 8px #0008!important;
}
#help::before,#help::after{content:none!important;display:none!important}


/* V75 — painel antes das cartas, sem sobreposição com comandos fixos. */
body:not(.title-open) .game-shell>.game-status-panel{
 order:2!important;
 grid-row:2!important;
 grid-column:1/-1!important;
 align-self:start!important;
 position:relative!important;
 z-index:3!important;
}
body:not(.title-open) .game-shell>.arena{
 order:3!important;
 grid-row:3!important;
 grid-column:1/-1!important;
 position:relative!important;
}
body:not(.title-open) .game-shell>.actions{
 order:4!important;
}
body:not(.title-open) .game-shell>.log{order:5!important}
@media(max-width:700px) and (orientation:portrait){
 body:not(.title-open) .game-shell{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  min-height:100dvh!important;
  height:auto!important;
  padding-bottom:calc(134px + env(safe-area-inset-bottom))!important;
  overflow:visible!important;
 }
 body:not(.title-open) .game-shell>.topbar{
  order:1!important;flex:0 0 auto!important;
 }
 body:not(.title-open) .game-shell>.game-status-panel{
  order:2!important;flex:0 0 auto!important;
  width:calc(100% - 20px)!important;
  margin:8px auto 10px!important;
 }
 body:not(.title-open) .game-shell>.arena{
  order:3!important;
  flex:0 0 auto!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  padding:6px 10px 18px!important;
  margin:0 auto!important;
  width:100%!important;
  box-sizing:border-box!important;
  overflow:visible!important;
 }
 body:not(.title-open) .arena #room,
 body:not(.title-open) #room,
 body:not(.title-open) #room.boss-room{
  width:min(100%,440px)!important;
  max-width:440px!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:1.10!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
  margin:0 auto!important;
 }
 body:not(.title-open) #room>.card,
 body:not(.title-open) #room.boss-room>.card{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:auto!important;
 }
 body:not(.title-open) .game-shell>.actions{
  order:4!important;
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  bottom:0!important;
  transform:translateX(-50%)!important;
  width:min(calc(100% - 12px),490px)!important;
  margin:0!important;
  z-index:800!important;
 }
 body:not(.title-open) .game-shell>.log{
  order:5!important;
 }
}


/* V76 — botão Pause integrado ao brasão, sem ocupar coluna própria. */
body:not(.title-open) .topbar>.brand{
 display:flex!important;
 align-items:center!important;
 gap:clamp(4px,1vw,12px)!important;
 padding-right:clamp(7px,1.3vw,14px)!important;
 overflow:hidden!important;
}
body:not(.title-open) .topbar>.brand .brand-copy{
 flex:1 1 auto!important;
 width:auto!important;
 min-width:0!important;
 max-width:100%!important;
}
body:not(.title-open) .topbar>.brand .topbuttons{
 position:relative!important;
 flex:0 0 auto!important;
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 margin:0!important;
 padding:0!important;
 z-index:41!important;
}
body:not(.title-open) .topbar>.brand #help{
 width:clamp(32px,3.6vw,44px)!important;
 height:clamp(32px,3.6vw,44px)!important;
 min-width:0!important;
 min-height:0!important;
 max-width:none!important;
 max-height:none!important;
 flex-basis:auto!important;
 font-size:clamp(18px,2vw,23px)!important;
}
@media(max-width:700px){
 body:not(.title-open) .topbar{
  grid-template-columns:minmax(0,1fr)!important;
 }
 body:not(.title-open) .topbar>.brand{
  grid-column:1/-1!important;
  grid-row:1!important;
  width:100%!important;
 }
 body:not(.title-open) .topbar>.brand .brand-copy h1{
  font-size:clamp(19px,5.5vw,36px)!important;
  letter-spacing:-.045em!important;
 }
 body:not(.title-open) .topbar>.brand .topbuttons{
  margin-left:auto!important;
 }
 body:not(.title-open) .topbar>.hud{
  grid-column:1/-1!important;
  grid-row:2!important;
 }
}


/* V78 — recuo seguro do Pause dentro da moldura do título. */
body:not(.title-open) .topbar>.brand{
  box-sizing:border-box!important;
  padding-right:clamp(18px,3.2vw,28px)!important;
}
body:not(.title-open) .topbar>.brand .topbuttons{
  margin-right:clamp(3px,0.6vw,7px)!important;
}
@media(max-width:700px){
  body:not(.title-open) .topbar>.brand{
    padding-right:clamp(16px,3.8vw,24px)!important;
  }
  body:not(.title-open) .topbar>.brand .topbuttons{
    margin-left:auto!important;
    margin-right:3px!important;
  }
}

/* V82 — Absorção Sombria: efeitos sem alterar o fluxo do combate. */
.boss-absorption-layer{position:fixed;inset:0;z-index:9998;pointer-events:none;overflow:hidden}
.boss-soul-particle{position:absolute;display:block;color:#f74362;text-shadow:0 0 9px #ff153b,0 0 20px #a60023;font-size:clamp(12px,2.5vw,24px);animation:bossSoulFly 1.15s cubic-bezier(.18,.75,.25,1) both;will-change:transform,opacity}
@keyframes bossSoulFly{0%{opacity:0;transform:translate(var(--spread-x),var(--spread-y)) scale(.45)}12%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(var(--travel-x),var(--travel-y)) scale(.12)}}
.boss-absorption-value{position:absolute;display:block;transform:translate(-50%,-50%);color:#ffb0bb;text-shadow:0 2px 5px #120006,0 0 14px #e60036;font:bold clamp(18px,3vw,32px) Georgia,serif;white-space:nowrap;animation:bossHealValue 1.35s ease-out both}
@keyframes bossHealValue{0%,55%{opacity:0;transform:translate(-50%,-30%) scale(.7)}72%{opacity:1;transform:translate(-50%,-80%) scale(1.25)}100%{opacity:0;transform:translate(-50%,-170%) scale(1)}}
.boss-main-card.boss-absorbing{animation:bossAbsorbGlow 1.2s ease-in-out!important}
@keyframes bossAbsorbGlow{0%,100%{filter:none}65%{filter:drop-shadow(0 0 19px #ef244b) brightness(1.3)}}
.boss-main-track{overflow:hidden}
.boss-main-track>div{transition:width .45s ease}
.boss-absorption-risk{outline:2px solid rgba(245,64,89,.8)!important;outline-offset:1px}
.boss-absorption-warning{position:absolute;z-index:18;bottom:5px;left:50%;transform:translateX(-50%);max-width:94%;padding:3px 6px;border:1px solid #d65c63;border-radius:5px;background:rgba(35,4,12,.9);color:#ffd8d9;font:700 clamp(9px,1.6vw,12px) Georgia,serif;white-space:nowrap;pointer-events:none;text-shadow:0 1px 2px #000}
@media(prefers-reduced-motion:reduce){.boss-soul-particle,.boss-absorption-value,.boss-main-card.boss-absorbing{animation:none!important}.boss-main-track>div{transition:none}}


/* V83 — HUD e painel com alinhamento idêntico, cartas mais altas e arte íntegra. */
@media (max-width:700px) and (orientation:portrait){
 body:not(.title-open) .game-shell>.game-status-panel{
  width:calc(100% - 20px)!important;
  max-width:none!important;
  margin:5px auto 3px!important;
  border-radius:10px!important;
 }
 body:not(.title-open) .game-shell>.topbar .hud{
  box-sizing:border-box!important;
 }
 body:not(.title-open) .game-shell>.arena{
  padding:2px 8px 4px!important;
  margin:0 auto!important;
 }
 body:not(.title-open) .arena #room,
 body:not(.title-open) #room,
 body:not(.title-open) #room.boss-room{
  width:min(100%,460px)!important;
  max-width:460px!important;
  aspect-ratio:.89!important;
  gap:7px!important;
  margin:0 auto!important;
 }
 body:not(.title-open) #room>.card:not(.boss-main-card){
  padding:0!important;
 }
 body:not(.title-open) #room .card:not(.boss-main-card) .illustration{
  inset:6px!important;
 }
 body:not(.title-open) #room .card:not(.boss-main-card) .card-art{
  object-fit:contain!important;
  object-position:center center!important;
  background:#120d0b!important;
 }
 body:not(.title-open) .game-shell{
  padding-bottom:calc(142px + env(safe-area-inset-bottom))!important;
 }
}
@media (min-width:701px){
 body:not(.title-open) .game-shell>.game-status-panel{
  margin-top:3px!important;
  margin-bottom:4px!important;
 }
}


/* V84 — painel alinhado, enquadramento integral e arena responsiva. */
@media (max-width:700px) and (orientation:portrait){
 body:not(.title-open) .game-shell{
  --v84-side:clamp(8px,2.2vw,15px);
  box-sizing:border-box!important;
  padding-inline:var(--v84-side)!important;
  padding-bottom:calc(156px + env(safe-area-inset-bottom))!important;
  gap:0!important;
 }
 body:not(.title-open) .game-shell>.topbar{
  width:100%!important;
  margin:0!important;
  gap:5px!important;
 }
 body:not(.title-open) .topbar>.hud{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  box-sizing:border-box!important;
 }
 body:not(.title-open) .game-shell>.game-status-panel{
  width:100%!important;
  max-width:none!important;
  box-sizing:border-box!important;
  margin:7px 0 6px!important;
  border-radius:11px!important;
 }
 body:not(.title-open) .game-status-panel .status-top{
  grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr) auto!important;
  padding:5px clamp(7px,2vw,12px)!important;
  gap:clamp(3px,1vw,8px)!important;
  min-height:33px!important;
 }
 body:not(.title-open) .game-status-panel .status-bottom{
  grid-template-columns:auto minmax(0,1fr) auto!important;
  padding:5px clamp(7px,2vw,12px)!important;
  gap:clamp(4px,1.4vw,10px)!important;
  min-height:36px!important;
 }
 body:not(.title-open) .game-status-panel .status-best{
  text-align:center!important;
  font-size:clamp(9px,2.25vw,12px)!important;
 }
 body:not(.title-open) .game-status-panel .status-clock,
 body:not(.title-open) .game-status-panel .room-progress{
  font-size:clamp(9px,2.35vw,12px)!important;
 }
 body:not(.title-open) .game-status-panel .section-label{
  font-size:clamp(9px,2.3vw,12px)!important;
 }
 body:not(.title-open) .game-status-panel #message{
  font-size:clamp(11px,2.8vw,15px)!important;
  line-height:1.15!important;
  text-wrap:balance;
  overflow-wrap:break-word;
 }
 body:not(.title-open) .game-shell>.arena{
  width:100%!important;
  padding:0 1px 6px!important;
  margin:0 auto!important;
  overflow:visible!important;
  min-height:0!important;
 }
 body:not(.title-open) .arena #room,
 body:not(.title-open) #room,
 body:not(.title-open) #room.boss-room{
  width:min(100%,490px)!important;
  max-width:490px!important;
  aspect-ratio:.91!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,minmax(0,1fr))!important;
  gap:clamp(5px,1.5vw,9px)!important;
  margin:0 auto!important;
 }
 body:not(.title-open) #room>.card:not(.boss-main-card){
  min-width:0!important;
  min-height:0!important;
  width:100%!important;
  height:100%!important;
  overflow:hidden!important;
 }
 body:not(.title-open) #room .card:not(.boss-main-card) .illustration{
  inset:clamp(4px,1.1vw,7px)!important;
  overflow:hidden!important;
 }
 body:not(.title-open) #room .card:not(.boss-main-card) .card-art{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  max-width:100%!important;
  max-height:100%!important;
 }
 body:not(.title-open) .game-shell>.actions{
  width:min(calc(100% - 12px),490px)!important;
  padding-bottom:max(7px,env(safe-area-inset-bottom))!important;
 }
}
@media (max-width:380px) and (orientation:portrait){
 body:not(.title-open) .game-status-panel .status-top{
  grid-template-columns:minmax(0,.75fr) minmax(0,1fr) auto!important;
 }
 body:not(.title-open) .game-status-panel #arcade-scores{
  padding:4px 5px!important;
  font-size:10px!important;
 }
 body:not(.title-open) .game-status-panel .status-bottom{
  gap:4px!important;
 }
 body:not(.title-open) .game-status-panel #message{
  font-size:11px!important;
 }
}

/* V85 — altura real entre painel e controles; sem sobreposição das cartas. */
@media (max-width:700px) and (orientation:portrait){
 body:not(.title-open) .game-shell{
  padding-bottom:calc(var(--v85-actions-height,150px) + 10px)!important;
 }
 body:not(.title-open) .game-shell>.arena{
  flex:0 0 auto!important;
  padding:0 1px 2px!important;
 }
 body:not(.title-open) .arena #room,
 body:not(.title-open) #room,
 body:not(.title-open) #room.boss-room{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:490px!important;
  height:var(--v85-room-height,auto)!important;
  max-height:var(--v85-room-height,none)!important;
  aspect-ratio:auto!important;
  min-height:0!important;
  gap:clamp(4px,1.2vw,7px)!important;
  overflow:visible!important;
 }
 body:not(.title-open) #room>.card:not(.boss-main-card){
  min-height:0!important;
  max-height:100%!important;
 }
 body:not(.title-open) .game-shell>.actions{
  box-sizing:border-box!important;
  padding:6px 8px max(8px,env(safe-area-inset-bottom))!important;
  gap:clamp(5px,1.4vw,9px)!important;
 }
 body:not(.title-open) .game-shell>.actions .action-button{
  min-height:48px!important;
  height:clamp(48px,7.2dvh,62px)!important;
  padding:6px 5px!important;
  font-size:clamp(11px,3vw,16px)!important;
  touch-action:manipulation;
 }
}