:root {
    --exp-coffee-0: #0f0b09;
    --exp-coffee-1: #17110d;
    --exp-coffee-2: #211711;
    --exp-coffee-3: #302117;
    --exp-line: #493326;
    --exp-line-hot: #8b5a35;
    --exp-cream: #f5e9da;
    --exp-muted: #b89d88;
    --exp-amber: #d9944c;
    --exp-gold: #f2bf5b;
    --exp-red: #d9534f;
    --exp-green: #2d9a78;
    --exp-blue: #3f83b9;
}

* { box-sizing: border-box; }
.exp-app [hidden] { display: none !important; }
body.explosivo-theme {
    margin: 0;
    min-height: 100vh;
    color: var(--text-color, var(--exp-cream));
    background: #120a05 url('/assets/images/arena-explosivo/cenario-3d.webp?v=20260809-17') center top / cover fixed no-repeat;
    font-family: 'Source Sans Pro', sans-serif;
}
body.explosivo-theme::before {
    content: "";
    position: fixed;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(rgba(12, 7, 4, .76), rgba(12, 7, 4, .9));
}
.exp-page { width: min(1180px, calc(100% - 28px)); margin: auto; padding: 20px 0 48px; }
.exp-back { color: var(--text-muted, var(--exp-muted)); text-decoration: none; font-weight: 700; }
.exp-back:hover { color: var(--accent-color, var(--exp-amber)); }

.exp-hero {
    position: relative;
    margin: 18px 0;
    padding: 22px 26px;
    overflow: hidden;
    border: 1px solid var(--border-warm, var(--exp-line));
    border-radius: 20px;
    background:
        repeating-linear-gradient(115deg, rgba(217, 148, 76, .035) 0 2px, transparent 2px 27px),
        linear-gradient(135deg, var(--secondary-color, var(--exp-coffee-2)), var(--primary-color, var(--exp-coffee-0)));
}
.exp-hero::after {
    content: '💣';
    position: absolute;
    right: 28px;
    top: 50%;
    opacity: .12;
    font-size: 7rem;
    transform: translateY(-50%) rotate(8deg);
}
.exp-kicker, .exp-step {
    color: var(--accent-2, var(--exp-gold));
    font: 700 .67rem 'JetBrains Mono', monospace;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.exp-hero h1 {
    margin: .25rem 0 0;
    color: var(--text-color, var(--exp-cream));
    font: 800 clamp(2rem, 5vw, 3.65rem)/1 'Heebo', sans-serif;
    letter-spacing: -.035em;
    text-transform: uppercase;
}
.exp-hero h1 i { color: var(--exp-red); filter: drop-shadow(0 0 12px rgba(217, 83, 79, .35)); }
.exp-hero p { max-width: 650px; margin: .55rem 0 0; color: var(--text-muted, var(--exp-muted)); font-size: 1.02rem; }
.exp-running .exp-hero { padding-block: 16px; }
.exp-running .exp-hero h1 { font-size: clamp(1.8rem, 3.5vw, 2.7rem); }

.exp-panel, .exp-statusbar, .exp-side > div {
    border: 1px solid var(--border-warm, var(--exp-line));
    border-radius: 18px;
    background: var(--secondary-color, var(--exp-coffee-2));
    box-shadow: 0 14px 38px rgba(0, 0, 0, .25);
}
.exp-setup { max-width: 700px; margin: 0 auto; padding: 26px; display: grid; gap: 18px; }
.exp-setup h2, .exp-modal h2 { margin: .25rem 0; font: 800 1.7rem 'Heebo', sans-serif; }
.exp-setup p, .exp-modal p { margin: .2rem 0; color: var(--text-muted, var(--exp-muted)); }
.exp-setup label { display: grid; gap: 7px; font-weight: 700; }
.exp-setup select, .exp-names input {
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    border: 1px solid var(--border-warm, var(--exp-line));
    border-radius: 11px;
    background: var(--primary-color, var(--exp-coffee-0));
    color: var(--text-color, var(--exp-cream));
    font: 600 1rem inherit;
}
.exp-names { display: grid; gap: 10px; }
.exp-primary {
    min-height: 46px;
    border: 0;
    border-radius: 12px;
    padding: 12px 18px;
    color: #24170c;
    background: linear-gradient(135deg, var(--accent-2, var(--exp-gold)), var(--accent-color, var(--exp-amber)));
    box-shadow: 0 6px 20px rgba(217, 148, 76, .18);
    cursor: pointer;
    font: 800 .92rem 'Heebo', sans-serif;
    letter-spacing: .02em;
    text-transform: uppercase;
    transition: transform .12s, filter .12s;
}
.exp-primary:hover { filter: brightness(1.07); transform: translateY(-1px); }
.exp-primary:focus-visible, .exp-option:focus-visible, .exp-cell.is-choice:focus-visible, .exp-cell.is-bomb-choice:focus-visible { outline: none; }
.exp-rules { border-top: 1px solid var(--border-warm, var(--exp-line)); padding-top: 12px; color: var(--text-muted, var(--exp-muted)); }
.exp-rules summary { cursor: pointer; color: var(--accent-color, var(--exp-amber)); font-weight: 700; }
.exp-rules ol { margin: 10px 0 0; padding-left: 22px; line-height: 1.55; }

.exp-statusbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 14px;
    padding: 13px 17px;
}
.exp-statusbar strong { display: block; margin-top: 3px; }
.exp-action { display: none !important; }
.exp-prompt {
    position: fixed;
    z-index: 24;
    top: 84px;
    left: 50%;
    width: min(620px, calc(100% - 30px));
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 14px 17px;
    border: 1px solid rgba(238, 174, 80, .82);
    border-radius: 16px;
    color: var(--exp-cream);
    background: linear-gradient(135deg, rgba(39, 25, 16, .97), rgba(17, 11, 8, .96));
    box-shadow: 0 18px 55px rgba(0,0,0,.7), inset 0 1px rgba(255,255,255,.08);
    transform: translateX(-50%);
    pointer-events: none;
    animation: expPromptIn .28s ease-out both;
}
.exp-prompt[hidden] { display: none; }
.exp-prompt-icon { font-size: 1.65rem; filter: drop-shadow(0 0 9px rgba(255,144,52,.55)); }
.exp-prompt strong { display: block; font: 800 1.05rem 'Heebo', sans-serif; }
.exp-prompt p { margin: 2px 0 0; color: var(--exp-muted); line-height: 1.25; }
.exp-prompt-counter { white-space: nowrap; padding: 7px 10px; border: 1px solid var(--exp-line-hot); border-radius: 999px; color: var(--exp-gold); background: rgba(0,0,0,.28); font: 700 .72rem 'JetBrains Mono', monospace; }
.exp-prompt-confirm { min-height: 38px; padding: 8px 13px; border: 1px solid #e7ad50; border-radius: 10px; color: #211308; background: linear-gradient(135deg,#f2c174,#d98a3d); cursor: pointer; pointer-events: auto; font: 800 .72rem 'Heebo',sans-serif; text-transform: uppercase; }
.exp-prompt-confirm:disabled { opacity:.38; filter:grayscale(.4); cursor:not-allowed; }
.exp-prompt-confirm:not(:disabled):hover { filter:brightness(1.1); box-shadow:0 0 15px rgba(242,185,86,.35); }
@keyframes expPromptIn { from { opacity:0; transform:translate(-50%,-14px) scale(.96); } to { opacity:1; transform:translate(-50%,0) scale(1); } }
.exp-stats { display: flex; gap: 9px; font: 700 .76rem 'JetBrains Mono', monospace; }
.exp-stats span { padding: 6px 9px; border: 1px solid var(--border-warm, var(--exp-line)); border-radius: 999px; background: var(--primary-color, var(--exp-coffee-0)); }
.exp-stats i { color: var(--exp-red); }
.exp-layout { display: grid; grid-template-columns: minmax(390px, 1fr) 340px; gap: 18px; align-items: start; }

.exp-board-wrap {
    position: relative;
    overflow: hidden;
    padding: 45px 22px 40px;
    border: 1px solid var(--border-warm, var(--exp-line));
    border-radius: 20px;
    background:
        linear-gradient(rgba(10, 6, 3, .36), rgba(10, 6, 3, .62)),
        url('/assets/images/arena-explosivo/cenario-3d.webp?v=20260809-17') center / cover no-repeat;
    box-shadow: inset 0 0 100px rgba(0, 0, 0, .62), 0 22px 55px rgba(0, 0, 0, .48);
}
.exp-viewport {
    width: 100%;
    overflow: hidden;
    touch-action: none;
    cursor: grab;
}
.exp-viewport.is-dragging { cursor: grabbing; }
/* A câmera agora é a projeção do palco (SVG), não mais transform de CSS. */
.exp-board { transform: none !important; }
.exp-viewport.is-dragging .exp-board { transition: none; }
.exp-camera-tools { position: absolute; z-index: 8; left: 14px; bottom: 14px; display: flex; gap: 6px; }
.exp-camera-tools button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(240,184,90,.7); border-radius: 10px; color: #f7d99b; background: rgba(18,11,7,.9); box-shadow: 0 5px 16px rgba(0,0,0,.55); cursor: pointer; }
.exp-camera-tools button:hover, .exp-camera-tools button.is-active { color: #fff; border-color: #ffd77f; background: rgba(93,53,23,.94); }
#expCameraAuto.is-active { color:#1d1308; background:linear-gradient(135deg,#f6d58d,#d99143); box-shadow:0 0 18px rgba(245,184,74,.48); }
.exp-board-wrap::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 8% 45%, rgba(255, 112, 35, .18), transparent 18%),
        radial-gradient(circle at 92% 45%, rgba(255, 112, 35, .18), transparent 18%);
    mix-blend-mode: screen;
}
.exp-board-wrap > .exp-finish, .exp-board-wrap > .exp-startline,
.exp-board-wrap > .exp-lane-heads, .exp-board { z-index: 2; }
.exp-board, .exp-lane-heads { position: relative; }
.exp-board {
    width: min(670px, 82%);
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    perspective: 900px;
}
.exp-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(7px, 1.2vw, 14px);
    margin-inline: auto;
}
.exp-row:nth-child(1) { width: 62%; }
.exp-row:nth-child(2) { width: 65.5%; }
.exp-row:nth-child(3) { width: 69%; }
.exp-row:nth-child(4) { width: 72.5%; }
.exp-row:nth-child(5) { width: 76%; }
.exp-row:nth-child(6) { width: 79.5%; }
.exp-row:nth-child(7) { width: 83%; }
.exp-row:nth-child(8) { width: 86.5%; }
.exp-row:nth-child(9) { width: 90%; }
.exp-row:nth-child(10) { width: 93.5%; }
.exp-row:nth-child(11) { width: 97%; }
.exp-row:nth-child(12) { width: 100%; }
.exp-lane-heads {
    width: min(590px, 76%);
    margin: 0 auto 8px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    color: #f4d796;
    text-align: center;
    text-shadow: 0 2px 5px #000;
    font: 800 .58rem 'JetBrains Mono', monospace;
    letter-spacing: .11em;
}
.exp-cell {
    position: relative;
    min-height: clamp(26px, 3.45vw, 43px);
    display: grid;
    place-items: center;
    border: 2px solid rgba(238, 181, 90, .82);
    border-radius: 8px;
    color: #fff;
    cursor: default;
    font: 700 .69rem 'JetBrains Mono', monospace;
    backdrop-filter: blur(1px);
    transform: rotateX(7deg);
    box-shadow: inset 0 2px rgba(255, 255, 255, .22), inset 0 -8px rgba(0, 0, 0, .28), 0 5px 0 #5c351a, 0 9px 14px rgba(0, 0, 0, .55);
    transition: transform .15s, filter .15s, box-shadow .15s;
}
.exp-cell[data-lane="0"] { background: linear-gradient(145deg, rgba(205, 70, 76, .82), rgba(96, 22, 29, .9)); }
.exp-cell[data-lane="1"] { background: linear-gradient(145deg, rgba(225, 174, 54, .84), rgba(115, 70, 12, .92)); color: #211408; }
.exp-cell[data-lane="2"] { background: linear-gradient(145deg, rgba(45, 145, 115, .83), rgba(19, 70, 57, .92)); }
.exp-cell.is-choice {
    z-index: 4;
    cursor: pointer;
    box-shadow: inset 0 -7px rgba(0, 0, 0, .14), 0 0 0 2px var(--accent-2, var(--exp-gold)), 0 0 22px rgba(242, 191, 91, .28);
    animation: expReady .8s ease-in-out infinite alternate;
}
.exp-cell.is-choice:hover { z-index: 5; filter: brightness(1.2); transform: translateY(-5px) rotateX(2deg) scale(1.025); }
.exp-cell.is-blown { color: #dbc9bd !important; background: #231916 !important; cursor: not-allowed !important; filter: saturate(.3); box-shadow: inset 0 0 18px rgba(0, 0, 0, .8); }
.exp-cell.is-blown::after { content: '💥'; position: absolute; font-size: 1.1rem; }
.exp-cell.is-blown::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255, 111, 41, .3), transparent 65%);
    animation: expEmber 1.7s ease-in-out infinite;
}
.exp-cell.is-exploding::after { content: '💥'; z-index: 12; font-size: clamp(1.8rem, 5vw, 4rem); animation: expExplosion .62s both; filter: drop-shadow(0 0 18px #ff5a16); }
.exp-cell.is-smoking::after { content: ''; width: 38px; height: 64px; border-radius: 50%; background: radial-gradient(circle, rgba(210,205,195,.75), rgba(72,65,60,.34) 48%, transparent 70%); animation: expSmoke .85s both; filter: blur(4px); }
@keyframes expExplosion { 0% { opacity: 0; transform: scale(.1) rotate(-20deg); } 35% { opacity: 1; transform: scale(1.45) rotate(8deg); } 100% { opacity: .25; transform: scale(2) rotate(18deg); } }
@keyframes expSmoke { from { opacity: .8; transform: translateY(8px) scale(.55); } to { opacity: 0; transform: translateY(-45px) scale(1.6); } }
@keyframes expReady { to { box-shadow: inset 0 -7px rgba(0, 0, 0, .14), 0 0 0 2px #ffe08a, 0 0 28px rgba(242, 191, 91, .38); } }
@keyframes expEmber { 50% { opacity: .35; transform: scale(1.08); } }

.exp-token {
    position: absolute;
    z-index: 7;
    right: -10px;
    bottom: -13px;
    width: 32px;
    height: 32px;
    border: 2px solid rgba(255,255,255,.9);
    border-radius: 50%;
    background: #271e19;
    box-shadow: 0 3px 10px #000;
    transform: translate(var(--tx, 0), var(--ty, 0));
    animation: expTokenArrive .42s cubic-bezier(.2,.8,.25,1.2);
}
.exp-sphere { overflow: hidden; isolation: isolate; background: radial-gradient(circle at 32% 25%, #fff, #8a6648 18%, #21140c 72%); }
.exp-sphere img, .exp-sphere b { width: 100%; height: 100%; display: grid; place-items: center; object-fit: cover; border-radius: inherit; }
.exp-sphere::after { content: ''; position: absolute; z-index: 3; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 29% 20%, rgba(255,255,255,.85) 0 5%, rgba(255,255,255,.23) 9%, transparent 28%), radial-gradient(circle at 65% 72%, transparent 35%, rgba(0,0,0,.55) 88%); box-shadow: inset -5px -7px 10px rgba(0,0,0,.5), inset 3px 3px 6px rgba(255,255,255,.2); }
.exp-token.is-jumping { animation: expGroupJump .72s cubic-bezier(.18,.75,.25,1) both; }
@keyframes expGroupJump { 0% { opacity:.45; transform: translate(var(--tx,0), 45px) scale(.72) rotate(-25deg); } 52% { opacity:1; transform: translate(var(--tx,0), -28px) scale(1.17) rotate(170deg); } 100% { transform: translate(var(--tx,0), var(--ty,0)) scale(1) rotate(360deg); } }
@keyframes expTokenArrive {
    from { opacity: 0; transform: translate(var(--tx, 0), calc(var(--ty, 0px) + 18px)) scale(.68); }
    to { opacity: 1; transform: translate(var(--tx, 0), var(--ty, 0)) scale(1); }
}
.exp-token-fallback { display: grid; place-items: center; color: #fff; font: 800 .66rem 'JetBrains Mono'; }
.exp-finish, .exp-startline { position: absolute; left: 0; right: 0; text-align: center; font: 800 .68rem 'JetBrains Mono'; letter-spacing: .18em; }
.exp-finish { top: 14px; color: var(--accent-2, var(--exp-gold)); }
.exp-startline { bottom: 12px; color: var(--text-faint, #8d7464); }
.exp-start-tokens { position: absolute; right: 18%; bottom: -7px; display: flex; align-items: center; }
.exp-start-tokens .exp-token { position: relative; right: auto; bottom: auto; margin-left: -7px; transform: none; }

.exp-side { display: grid; gap: 14px; }
.exp-players { padding: 11px; display: grid; gap: 7px; }
.exp-player {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 9px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: var(--primary-color, var(--exp-coffee-0));
}
.exp-player.is-turn { border-color: var(--accent-2, var(--exp-gold)); background: color-mix(in srgb, var(--accent-color, var(--exp-amber)) 8%, var(--primary-color, var(--exp-coffee-0))); }
.exp-avatar { width: 42px; height: 42px; display: grid; place-items: center; object-fit: cover; border: 2px solid rgba(255, 255, 255, .8); border-radius: 50%; color: #fff; font-weight: 800; box-shadow: inset -5px -6px 9px rgba(0,0,0,.48), inset 2px 2px 4px rgba(255,255,255,.35), 0 5px 12px rgba(0, 0, 0, .65); }
.exp-player small { display: block; color: var(--text-faint, #8d7464); }
.exp-player b { color: var(--accent-2, var(--exp-gold)); font: 700 .72rem 'JetBrains Mono'; }
.exp-action { min-height: 128px; padding: 16px; border-color: var(--exp-line-hot) !important; }
.exp-action h3 { margin: 0 0 6px; font: 800 1.08rem 'Heebo'; }
.exp-action p { margin: 0 0 12px; color: var(--text-muted, var(--exp-muted)); }
.exp-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.exp-option {
    min-height: 44px;
    padding: 8px 4px;
    border: 1px solid var(--border-warm, var(--exp-line));
    border-radius: 9px;
    background: var(--primary-color, var(--exp-coffee-0));
    color: var(--text-color, var(--exp-cream));
    cursor: pointer;
    font-weight: 800;
}
.exp-option:hover:not(:disabled) { border-color: var(--accent-color, var(--exp-amber)); color: var(--accent-2, var(--exp-gold)); }
.exp-option.is-on { border-color: var(--accent-2, var(--exp-gold)); background: rgba(217, 148, 76, .15); color: var(--accent-2, var(--exp-gold)); }
.exp-option:disabled { cursor: not-allowed; opacity: .42; }
.exp-logbox { padding: 14px; }
.exp-logbox h3 { margin: 0 0 9px; color: var(--text-muted, var(--exp-muted)); font: 800 .76rem 'Heebo'; letter-spacing: .08em; text-transform: uppercase; }
.exp-log { max-height: 178px; overflow: auto; display: grid; gap: 6px; color: var(--text-muted, var(--exp-muted)); font-size: .83rem; scrollbar-color: var(--exp-line-hot) transparent; }
.exp-log p { margin: 0; padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, .045); }
.exp-log strong { color: var(--text-color, var(--exp-cream)); }

.exp-modal { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(8, 5, 4, .97); backdrop-filter: blur(8px); }
.exp-modal[hidden], .exp-blast[hidden] { display: none; }
.exp-modal-card { width: min(470px, 100%); padding: 30px; text-align: center; border: 1px solid var(--exp-line-hot); border-radius: 20px; background: var(--secondary-color, var(--exp-coffee-2)); box-shadow: 0 30px 100px #000; }
.exp-modal-icon { display: block; margin-bottom: 10px; color: var(--exp-red); font-size: 2rem; }
.exp-privacy-avatar { width: 76px; height: 76px; margin: 0 auto 10px; object-fit: cover; border: 3px solid var(--accent-2, var(--exp-gold)); border-radius: 50%; box-shadow: 0 0 24px rgba(242, 191, 91, .25); }
.exp-private-bombs { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 13px 0; }
.exp-private-bombs:empty { display: none; }
.exp-bomb-chip { padding: 4px 7px; border: 1px solid var(--exp-line-hot); border-radius: 999px; background: var(--primary-color, var(--exp-coffee-0)); color: var(--accent-2, var(--exp-gold)); font: 700 .65rem 'JetBrains Mono'; }
.exp-blast {
    position: fixed;
    z-index: 50;
    left: var(--blast-x, 50%);
    top: var(--blast-y, 50%);
    width: 150px;
    height: 150px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 244, 174, .9) 0 4%, rgba(255, 125, 35, .72) 18%, rgba(192, 35, 18, .35) 42%, transparent 70%);
    filter: drop-shadow(0 0 24px rgba(255, 91, 25, .9));
    font-size: 70px;
    animation: blast .8s both;
    pointer-events: none;
}
@keyframes blast {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.12) rotate(-14deg); }
    32% { opacity: 1; transform: translate(-50%, -50%) scale(1.18) rotate(5deg); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8) rotate(14deg); }
}

/* Tabuleiro vetorial: a arte contém as 36 plataformas; o SVG fornece somente interação e efeitos. */
.exp-board-wrap {
    padding: 0;
    background: #090604;
    isolation: isolate;
}
.exp-board-wrap::after { z-index: 3; opacity: .5; }
.exp-board {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0;
    display: block;
    perspective: none;
}
.exp-arena-svg {
    display: block;
    width: 100%;
    height: auto;
}
.exp-arena-svg .exp-cell {
    min-height: 0;
    fill: transparent;
    stroke: transparent;
    stroke-width: 4;
    vector-effect: non-scaling-stroke;
    filter: none;
    transform: none;
    pointer-events: none;
    transition: fill .16s ease, stroke .16s ease, filter .16s ease;
}
.exp-arena-svg .exp-cell.is-choice,
.exp-arena-svg .exp-cell.is-bomb-choice {
    pointer-events: auto;
    cursor: pointer;
    fill: transparent !important;
    stroke: transparent !important;
    stroke-width: 0 !important;
    filter: none !important;
    animation: none !important;
}
.exp-arena-svg .exp-cell.is-choice:hover,
.exp-arena-svg .exp-cell.is-bomb-choice:hover,
.exp-arena-svg .exp-cell.is-bomb-choice.is-selected {
    fill: transparent !important;
    stroke: transparent !important;
    filter: none !important;
}
.exp-arena-svg .exp-cell.is-blown {
    fill: transparent !important;
    stroke: transparent !important;
    filter: none !important;
}
.exp-cell-guide { pointer-events:none; }
.exp-cell-guide polygon {
    fill:rgba(255,206,104,.1);
    stroke:#ffe3a1;
    stroke-width:2;
    vector-effect:non-scaling-stroke;
    filter:drop-shadow(0 0 2px rgba(255,176,54,.42));
    transition:fill .14s ease, stroke .14s ease, filter .14s ease;
}
.exp-cell-guide.is-hovered polygon {
    fill:rgba(255,220,140,.24);
    stroke:#fff8d2;
    filter:drop-shadow(0 0 5px rgba(255,190,67,.78));
}
.exp-cell-guide.is-selected polygon {
    fill:rgba(255,91,36,.34);
    stroke:#fff3c4;
    filter:drop-shadow(0 0 4px rgba(255,84,24,.72));
}
.exp-cell-guide text { fill:#fff4d2; text-anchor:middle; dominant-baseline:central; font-family:'JetBrains Mono',monospace; font-weight:800; letter-spacing:.2px; paint-order:stroke; stroke:rgba(20,10,5,.92); stroke-width:2px; vector-effect:non-scaling-stroke; }
.exp-cell-guide.is-selected text, .exp-cell-guide.is-hovered text { fill:#fff; }
.exp-blown-guide {
    fill:rgba(87,24,12,.42);
    stroke:#d75834;
    stroke-width:2;
    vector-effect:non-scaling-stroke;
    filter:drop-shadow(0 0 3px rgba(222,74,34,.55));
    pointer-events:none;
}
.exp-svg-token { transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 12px 10px rgba(0,0,0,.95)); }
.exp-svg-token image { clip-path: circle(50% at center); }
.exp-sphere-shine { fill: url(#expSphereGloss); stroke: rgba(255,255,255,.95); stroke-width: 4; vector-effect: non-scaling-stroke; filter: drop-shadow(-5px -6px 5px rgba(255,255,255,.3)) drop-shadow(7px 10px 7px rgba(0,0,0,.85)); }
.exp-sphere-highlight { fill: rgba(255,255,255,.72); filter: blur(1.5px); pointer-events: none; }
.exp-token-letter { fill: #fff; text-anchor: middle; font: 800 18px 'JetBrains Mono', monospace; }
.exp-svg-token.is-jumping { animation: expSvgJump 1.5s cubic-bezier(.2,.7,.2,1) both; }
.exp-svg-figbot.is-jumping { animation-name: expFigbotJump; }
@keyframes expSvgJump {
    0% { opacity:.45; transform:translate(var(--jump-x,0),var(--jump-y,92px)) scale(.68) rotate(-18deg); }
    14% { opacity:1; transform:translate(var(--jump-x,0),var(--jump-y,48px)) scale(.86,.72) rotate(-8deg); }
    50% { transform:translate(var(--jump-mid-x,0),var(--jump-mid-y,-92px)) scale(1.12) rotate(12deg); }
    78% { transform:translate(var(--jump-near-x,0),var(--jump-near-y,-20px)) scale(1.04) rotate(-5deg); }
    90% { transform:translateY(7px) scale(1.12, .82) rotate(0); }
    100% { transform:translateY(0) scale(1) rotate(0); }
}
@keyframes expFigbotJump {
    0% { opacity:.4; transform:translate(var(--jump-x,0),var(--jump-y,96px)) scale(.72); }
    15% { opacity:1; transform:translate(var(--jump-x,0),var(--jump-y,45px)) scale(1.05,.76); }
    48% { transform:translate(var(--jump-mid-x,0),var(--jump-mid-y,-104px)) scale(.96,1.08) rotate(4deg); }
    76% { transform:translate(var(--jump-near-x,0),var(--jump-near-y,-24px)) scale(1.02) rotate(-3deg); }
    89% { transform:translateY(8px) scale(1.12,.78); }
    100% { transform:translateY(0) scale(1) rotate(0); }
}
.exp-svg-token.is-punching { animation:expPunchBody 1.15s cubic-bezier(.2,.8,.25,1) both; }
.exp-punch-fx { fill:none; stroke:#ffd46e; stroke-width:7; stroke-linecap:round; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 9px #ff8b1f); animation:expPunchFx 1.15s ease-out both; }
.exp-punch-fx circle { fill:rgba(255,116,31,.22); }
@keyframes expPunchBody {
    0%,18% { transform:translateX(0) rotate(0) scale(1); }
    34% { transform:translateX(-9px) rotate(-5deg) scale(.98,1.03); }
    50% { transform:translateX(18px) rotate(7deg) scale(1.08,.96); }
    68% { transform:translateX(3px) rotate(-2deg) scale(1.02); }
    100% { transform:translateX(0) rotate(0) scale(1); }
}
@keyframes expPunchFx {
    0%,35% { opacity:0; transform:translateX(-18px) scale(.3); }
    50% { opacity:1; transform:translateX(5px) scale(1.05); }
    76%,100% { opacity:0; transform:translateX(42px) scale(1.35); }
}
.exp-svg-token.is-hit { animation:expHitKnockback 1.2s cubic-bezier(.18,.72,.3,1) both; }
.exp-hit-fx { fill:none; stroke:#ff4a20; stroke-width:8; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 13px #ffb126); animation:expHitFlash .72s ease-out both; }
@keyframes expHitKnockback {
    0% { opacity:1; transform:translate(0,0) rotate(0) scale(1); }
    12% { transform:translate(-9px,3px) rotate(-8deg) scale(1.12,.88); }
    24% { transform:translate(11px,-6px) rotate(9deg) scale(.94,1.08); }
    42% { opacity:1; transform:translate(-13px,-42px) rotate(-18deg) scale(.9); }
    72% { opacity:.72; transform:translate(24px,-96px) rotate(24deg) scale(.68); }
    100% { opacity:0; transform:translate(42px,72px) rotate(36deg) scale(.35); }
}
@keyframes expHitFlash {
    0% { opacity:0; transform:scale(.25) rotate(0); }
    24% { opacity:1; transform:scale(1.25) rotate(14deg); }
    100% { opacity:0; transform:scale(1.8) rotate(35deg); }
}
.exp-explosion, .exp-crater-mark, .exp-private-bomb { text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.exp-private-bomb use { filter: url(#expBombShadow) drop-shadow(0 0 8px rgba(255,143,31,.75)); animation: expPrivateBomb 1s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes expPrivateBomb { to { filter: url(#expBombShadow) drop-shadow(0 0 15px #ff941f); } }
.exp-explosion { pointer-events:none; filter: drop-shadow(0 0 25px #ff3d00); }
.exp-blast-halo { fill: #ff5417; opacity: .28; animation: expBlastHalo 1.2s ease-out both; transform-box:fill-box; transform-origin:center; }
.exp-blast-outer { fill: #f22509; animation: expBlastOuter 1.2s ease-out both; transform-box:fill-box; transform-origin:center; }
.exp-blast-core { fill: url(#expFireCore); animation: expBlastCore 1.2s ease-out both; transform-box:fill-box; transform-origin:center; }
.exp-blast-rays path { fill:none; stroke:#ffb128; stroke-width:9; stroke-linecap:round; animation: expBlastRays 1.2s ease-out both; transform-box:fill-box; transform-origin:center; }
.exp-blast-sparks { fill:#ffe36b; animation:expBlastSparks 1.2s ease-out both; transform-box:fill-box; transform-origin:center; }
@keyframes expBlastHalo { 0%{opacity:0;transform:scale(.05)} 24%{opacity:.75;transform:scale(.8)} 100%{opacity:0;transform:scale(2.8)} }
@keyframes expBlastOuter { 0%{opacity:0;transform:scale(.05)} 34%{opacity:1;transform:scale(1.25)} 100%{opacity:0;transform:scale(2.15)} }
@keyframes expBlastCore { 0%{opacity:0;transform:scale(.08)} 28%{opacity:1;transform:scale(1.55)} 72%{opacity:.9;transform:scale(.92)} 100%{opacity:0;transform:scale(1.35)} }
@keyframes expBlastRays { 0%{opacity:0;transform:scale(.15) rotate(-18deg)} 38%{opacity:1;transform:scale(1) rotate(5deg)} 100%{opacity:0;transform:scale(1.8) rotate(20deg)} }
@keyframes expBlastSparks { 0%{opacity:0;transform:scale(.2)} 38%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(2.2) rotate(35deg)} }
.exp-crater-mark { fill: #ff7040; font-size: 28px; opacity: .85; }
.exp-smoke { pointer-events:none; filter:blur(3px) drop-shadow(0 8px 8px rgba(0,0,0,.6)); }
.exp-smoke circle { fill:url(#expSmokeCloud); transform-box:fill-box; transform-origin:center; animation:expSmokeRise 1.8s ease-out both; }
.exp-smoke .s2{animation-delay:.08s}.exp-smoke .s3{animation-delay:.16s}.exp-smoke .s4{animation-delay:.24s}.exp-smoke .s5{animation-delay:.32s}
@keyframes expSmokeRise { 0%{opacity:0;transform:translateY(20px) scale(.4)} 24%{opacity:.95;transform:translateY(0) scale(1)} 100%{opacity:0;transform:translateY(-72px) translateX(16px) scale(2.05)} }
.exp-finish { z-index: 5; top: 10px; text-shadow: 0 2px 7px #000; }
.exp-startline { z-index: 5; bottom: 9px; text-shadow: 0 2px 7px #000; }
.exp-start-tokens { right: 18%; bottom: 4px; }
.exp-player small em { color: var(--exp-gold); font-style: normal; font-weight: 700; }

@media (max-width: 820px) {
    .exp-page { width: min(100% - 18px, 680px); padding-top: 12px; }
    .exp-hero { padding: 18px; }
    .exp-hero::after { font-size: 4rem; right: 12px; }
    .exp-layout { grid-template-columns: 1fr; }
    .exp-board-wrap { padding-inline: 0; }
    .exp-board, .exp-lane-heads { width: 100%; }
    .exp-cell { min-height: 43px; }
    .exp-side { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
    .exp-prompt { top: 68px; grid-template-columns: auto 1fr; padding: 11px 12px; }
    .exp-prompt-counter { grid-column: 1 / 3; justify-self: center; }
    .exp-prompt-confirm { grid-column: 1 / 3; width:100%; }
    .exp-camera-tools { left: 8px; bottom: 8px; }
    .exp-camera-tools button { width: 34px; height: 34px; }
    .exp-hero h1 { font-size: 1.85rem; }
    .exp-statusbar { align-items: flex-start; }
    .exp-stats { flex-direction: column; }
    .exp-board { gap: 0; }
    .exp-board, .exp-lane-heads { width: 100%; }
    .exp-cell { min-height: 40px; font-size: .62rem; }
    .exp-options { grid-template-columns: 1fr; }
}


/* Catálogo visual figBots */
.exp-setup { max-width: 980px; }
.exp-player-setup {
    display: grid;
    gap: 9px;
    padding: 15px;
    border: 1px solid var(--border-warm, var(--exp-line));
    border-radius: 15px;
    background: color-mix(in srgb, var(--primary-color, var(--exp-coffee-0)) 82%, transparent);
}
.exp-player-setup > label,
.exp-character-label {
    color: var(--accent-2, var(--exp-gold));
    font: 800 .72rem 'JetBrains Mono', monospace;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.exp-character-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(92px, 1fr));
    gap: 9px;
}
.exp-character {
    position: relative;
    min-width: 0;
    padding: 8px 7px 9px;
    border: 1px solid var(--border-warm, var(--exp-line));
    border-radius: 13px;
    background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.18));
    color: var(--text-color, var(--exp-cream));
    cursor: pointer;
    overflow: hidden;
    transition: border-color .16s, box-shadow .16s, transform .16s, background .16s;
}
.exp-character:hover,
.exp-character:focus-visible {
    border-color: var(--accent-color, var(--exp-amber));
    transform: translateY(-3px);
    outline: none;
}
.exp-character.is-selected {
    border-color: #ffd56d;
    background: linear-gradient(180deg, rgba(242,191,91,.2), rgba(121,68,25,.2));
    box-shadow: 0 0 0 2px rgba(242,191,91,.24), 0 10px 24px rgba(0,0,0,.32);
}
.exp-character.is-selected::after {
    content: '✓';
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #f2bf5b;
    color: #24170c;
    font-weight: 900;
}
.exp-character-portrait {
    position: relative;
    height: 116px;
    display: grid;
    place-items: end center;
    margin-bottom: 6px;
    border-radius: 9px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 35%, rgba(242,191,91,.18), rgba(0,0,0,.3) 68%);
}
.exp-character-portrait img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 8px 8px rgba(0,0,0,.45));
}
/* Rosto dentro de uma ESFERA dourada; ao girar, o rosto desliza e some,
   revelando a esfera; de costas some (opacidade 0 via JS). */
.exp-character-portrait .exp-face-orb {
    position: absolute;
    z-index: 2;
    width: 16%;
    aspect-ratio: 1;
    height: auto;
    left: 42%;
    top: 13%;
    border-radius: 50%;
    overflow: hidden;
    background: radial-gradient(circle at 32% 25%, #68401f 0%, #352016 48%, #160d09 78%, #090504 100%);
    box-shadow: inset -4px -3px 6px rgba(0,0,0,.82), inset 1px 1px 2px rgba(188,124,66,.2), 0 0 0 1px #59361f, 0 2px 7px rgba(0,0,0,.7);
}
.exp-character-portrait .exp-face-orb::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 24%, rgba(213,143,76,.18), rgba(255,255,255,.025) 30%, transparent 58%);
    pointer-events: none;
}
.exp-character-portrait .exp-character-profile-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    filter: saturate(1.04) contrast(1.03);
}
/* Giro por CSS para os personagens sem frames 360 (efeito de vitrine). */
.exp-character-portrait { perspective: 620px; }
.exp-character-portrait.is-spinning > img:first-child { animation: expSpinY 2.6s linear infinite; transform-style: preserve-3d; }
@keyframes expSpinY { to { transform: rotateY(360deg); } }
.exp-character strong,
.exp-character small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-character strong { font: 800 .78rem 'Heebo', sans-serif; }
.exp-character small { margin-top: 2px; color: var(--text-faint, #8d7464); font: 600 .58rem 'JetBrains Mono', monospace; }
.exp-character.is-selected small { color: var(--accent-2, var(--exp-gold)); }

@media (max-width: 820px) {
    .exp-character-grid { grid-template-columns: repeat(3, minmax(88px, 1fr)); }
    .exp-character-portrait { height: 108px; }
}
@media (max-width: 460px) {
    .exp-setup { padding: 17px; }
    .exp-player-setup { padding: 11px; }
    .exp-character-grid { grid-template-columns: repeat(2, minmax(104px, 1fr)); }
    .exp-character-portrait { height: 128px; }
}


/* FigBots de corpo inteiro no tabuleiro e escalação exclusiva */
.exp-character.is-unavailable,
.exp-character:disabled {
    cursor: not-allowed;
    opacity: .38;
    filter: saturate(.35);
    transform: none;
}
.exp-character.is-unavailable::after {
    content: 'Em uso';
    position: absolute;
    inset: auto 6px 6px;
    padding: 4px 6px;
    border-radius: 7px;
    background: rgba(16,9,5,.9);
    color: #f2bf5b;
    font: 800 .56rem 'JetBrains Mono', monospace;
    text-transform: uppercase;
}
.exp-svg-token.exp-svg-figbot { filter: drop-shadow(0 13px 8px rgba(0,0,0,.92)); }
.exp-svg-token.exp-svg-figbot image { clip-path: none; }
.exp-svg-figbot-image { pointer-events: none; }
.exp-svg-figbot-static,
.exp-svg-figbot-turn-frame { transform-box:fill-box; transform-origin:50% 100%; }
.exp-svg-figbot-turn-frame { opacity:0; pointer-events:none; }
.exp-svg-profile-face { pointer-events:none; clip-path:ellipse(48% 49% at 50% 50%); }
.exp-svg-figbot:not(.is-jumping):not(.is-hit):not(.is-punching) .exp-svg-figbot-static {
    animation:expFigbotIdle 2.6s ease-in-out infinite;
}
.exp-svg-figbot.is-spinning-360 .exp-svg-figbot-static { opacity:0; }
.exp-svg-figbot.is-spinning-360 .exp-svg-figbot-turn-frame {
    animation:expFigbot360Frame .96s steps(1,end) infinite;
    animation-delay:var(--frame-delay,0s);
}
@keyframes expFigbot360Frame {
    0%,12.4% { opacity:1; }
    12.5%,100% { opacity:0; }
}
@keyframes expFigbotIdle {
    0%,100% { transform:translateY(0) scale(1); }
    48% { transform:translateY(-3px) scale(1.015,1.025); }
    54% { transform:translateY(-3px) scale(.995,1.03); }
}
/* Os personagens do INÍCIO agora são tokens SVG na cena (ver arena-explosivo.js:
   figbotBodyMarkup + ExpPalco.groundAnchor); a escala por personagem é aplicada
   na geometria do SVG. As antigas regras de overlay do startline saíram. */
.exp-figbot-shadow { fill: rgba(0,0,0,.58); filter: blur(3px); }
.exp-token.exp-figbot-token {
    width: 62px;
    height: 86px;
    right: -23px;
    bottom: -8px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    isolation: isolate;
}
.exp-token.exp-figbot-token::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 14%;
    right: 14%;
    bottom: 1px;
    height: 13px;
    border-radius: 50%;
    background: rgba(0,0,0,.62);
    filter: blur(4px);
}
.exp-token.exp-figbot-token img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 8px 5px rgba(0,0,0,.86));
}
.exp-token.exp-profile-suit-token .exp-profile-suit-face {
    position:absolute;
    z-index:3;
    width:13.6%;
    height:13.3%;
    left:43.2%;
    top:36.3%;
    border-radius:48% 48% 45% 45%;
    object-fit:cover;
    object-position:center 28%;
    filter:saturate(1.04) contrast(1.03);
}
.exp-token.exp-profile-suit-token.exp-perfil-barista .exp-profile-suit-face { top:40.6%; width:13.6%; height:13.1%; left:43.2%; }
.exp-token.exp-profile-suit-token[title] .exp-profile-suit-face { pointer-events:none; }
.exp-start-tokens .exp-token.exp-figbot-token {
    margin-left: -19px;
    transform: none;
}


@media (prefers-reduced-motion: reduce) {
    .exp-svg-token.is-jumping, .exp-svg-token.is-punching, .exp-svg-token.is-hit, .exp-punch-fx, .exp-hit-fx { animation-duration:.25s !important; animation-iteration-count:1 !important; }
}