:root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#e4f8ff;color-scheme:dark}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none;background:#070e20}
body{min-height:100dvh;display:grid;place-items:center}
button{font:inherit;cursor:pointer;touch-action:manipulation}
button:focus-visible{outline:2px solid #9beaff;outline-offset:3px}
[hidden]{display:none!important}
#stage{position:relative;isolation:isolate;overflow:hidden;width:min(100vw,177.777778dvh);height:min(100dvh,56.25vw);aspect-ratio:16/9;background:#070d1f;container-type:size}
#view{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
#vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 48%,transparent 49%,#03071476);pointer-events:none}
#restart{position:absolute;z-index:7;right:2.4%;top:3.1%;width:7cqh;height:7cqh;display:grid;place-items:center;border:1px solid #4adfff9c;border-radius:50%;background:#092039b8;color:#e5fbff;font-size:3.5cqh;font-weight:850;box-shadow:0 0 1.5cqh #45d9ff35;backdrop-filter:blur(5px)}
#restart:hover{background:#185076}
#restart:active{transform:scale(.94)}
#hand{position:absolute;z-index:7;left:50%;transform:translateX(-50%);bottom:1.5%;min-width:35%;height:18%;display:flex;align-items:flex-end;justify-content:center;gap:2.0cqh;pointer-events:none}
.hand-chip{position:relative;width:16.0cqh;height:16.0cqh;padding:0;flex:none;border-radius:50%;border:.7cqh solid #1a243c;background:#112b45;box-shadow:0 .9cqh 0 #050c1e,0 1.8cqh 2.2cqh #010610a1,0 0 .5cqh var(--accent);pointer-events:auto;transform:translateY(0) rotate(var(--angle,0deg));transition:transform .3s cubic-bezier(.17,.84,.23,1),box-shadow .3s;overflow:hidden}
.hand-chip:before{content:"";position:absolute;inset:.25cqh;z-index:1;pointer-events:none;border-radius:50%;border:.44cqh solid var(--accent);box-shadow:inset 0 0 1.2cqh var(--accent)}
.hand-chip img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover}
.hand-chip:hover{transform:translateY(-1.25cqh);box-shadow:0 .65cqh 0 #050c1e,0 2.1cqh 3.5cqh #010610a9,0 0 1.7cqh var(--accent)}
.hand-chip.selected{transform:translateY(-4.0cqh) scale(1.1);box-shadow:0 .7cqh 0 #071021,0 2.3cqh 3.5cqh #000,0 0 3cqh var(--accent)}
#projection{position:absolute;z-index:15;left:50%;top:50%;transform:translate(-50%,-100%) perspective(700px) rotateX(-5deg);width:clamp(160px,39cqh,360px);max-height:76%;overflow:visible;pointer-events:auto;filter:drop-shadow(0 1.2cqh 2.2cqh #000b1fc9);animation:hologramIn .35s cubic-bezier(.1,.7,.1,1) both}
@keyframes hologramIn{from{opacity:0;transform:translate(-50%,-88%) perspective(700px) rotateX(-17deg) scale(.82)}to{opacity:1;transform:translate(-50%,-100%) perspective(700px) rotateX(-5deg) scale(1)}}
#projection:before{content:"";position:absolute;z-index:-1;bottom:-1.6cqh;left:50%;transform:translateX(-50%);width:68%;height:5cqh;background:radial-gradient(ellipse at bottom,#79f8ff85 0%,#29baf42d 45%,transparent 75%);filter:blur(.8cqh);pointer-events:none}
#projection:after{content:"";position:absolute;z-index:-2;left:50%;bottom:-5.6cqh;transform:translateX(-50%);width:3.5cqh;height:7cqh;background:linear-gradient(#58e6ffa6,#42aff11f,transparent);filter:blur(.9cqh);clip-path:polygon(10% 0,90% 0,100% 100%,0 100%);pointer-events:none}
.projection-shell{position:relative;overflow:hidden;padding:1.5cqh 1.8cqh 1.8cqh;border:1px solid #75eeffb8;border-top:2px solid #b5ffffd6;border-radius:1.25cqh;background:linear-gradient(130deg,#123f5edc,#0a1a39f0 72%);box-shadow:inset 0 0 2.4cqh #2fc2ee34,0 0 2.9cqh #33ccff6e,0 1.3cqh 2.7cqh #010916db;backdrop-filter:blur(7px)}
.projection-shell:before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,#86eaff09 0 .15cqh,transparent .18cqh 1.2cqh);animation:scan 4s linear infinite}
@keyframes scan{to{background-position:0 7cqh}}
.projection-shell>*{position:relative;z-index:1}
.projection-top{display:flex;align-items:center;gap:1.25cqh;padding-right:2.0cqh}
#pPortrait{width:7.7cqh;height:7.7cqh;border-radius:50%;border:.27cqh solid #9aefff;box-shadow:0 0 1.2cqh #33cfff91;object-fit:cover}
.projection-id{min-width:0}
#pType{font-size:1.4cqh;letter-spacing:.17em;font-weight:950;color:#9ef4ff}
#pTitle{margin:.1cqh 0 0;font:800 2.9cqh Georgia,serif;color:#fff3ce;overflow-wrap:anywhere;line-height:1.12}
#pDetail{margin:1.4cqh 0;color:#d7f6f5;font-size:1.65cqh;font-weight:740;line-height:1.3;white-space:pre-wrap}
#pDetail:empty{display:none}
#pMoves{display:flex;flex-direction:column;gap:.65cqh}
.move{display:flex;justify-content:space-between;align-items:baseline;gap:1.0cqh;padding:.7cqh 0;border-top:1px solid #69cdeb55}
.move strong{font-size:1.75cqh;line-height:1.05;color:#fff0cc}
.move span{font-size:1.35cqh;color:#9bd9e7;text-align:right;line-height:1.2}
#pActions{margin-top:1.4cqh;display:flex;flex-direction:column;gap:.7cqh}
.projection-action{display:flex;justify-content:space-between;align-items:center;gap:1cqh;background:#1c587a;border:1px solid #68d9ffac;color:#ebfbff;border-radius:.7cqh;padding:1.15cqh 1.3cqh;text-align:left;min-height:4.8cqh}
.projection-action strong{font-size:1.75cqh;white-space:nowrap}
.projection-action small{font-size:1.3cqh;color:#d9f8fc;line-height:1.2;text-align:right}
.projection-action:hover:not(:disabled){background:#2383a5}
.projection-action:disabled{opacity:.45;cursor:not-allowed}
#closeProjection{position:absolute;top:1cqh;right:1cqh;z-index:4;width:3cqh;height:3cqh;border:1px solid #90dafa8c;background:#0c233d9e;color:#d9faff;border-radius:50%;font-weight:900;font-size:1.9cqh;display:grid;place-items:center}
#flash{position:absolute;z-index:9;left:50%;top:23%;transform:translateX(-50%);text-align:center;color:#f4fbff;font-weight:1000;font-size:3.6cqh;text-shadow:0 .2cqh 1.2cqh #020a1b,0 0 1.4cqh #6afaff;pointer-events:none;opacity:0;transition:opacity .25s}
#flash.show{opacity:1}
#result{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:#041126c9;backdrop-filter:blur(7px)}
.result-panel{background:#0e2844f3;border:.3cqh solid #72ddff;border-radius:2cqh;box-shadow:0 2cqh 8cqh #000;padding:4cqh 8cqh;text-align:center}
#resultTitle{font:800 8cqh Georgia,serif;color:#f8eac4;margin:0 0 2cqh}
#again{border:0;border-radius:1cqh;background:#a5e8ee;color:#08304a;font-weight:900;font-size:2.7cqh;padding:1.5cqh 4cqh}
#loading{position:absolute;inset:0;z-index:25;display:grid;place-items:center;background:radial-gradient(circle,#1c4b6b,#060d20);font-size:3.0cqh;font-weight:850;color:#e0faff}
@media(prefers-reduced-motion:reduce){.hand-chip,#flash{transition:none}#projection,.projection-shell:before{animation:none}}

/* Round monster, triangular ability and square weapon/armor tokens in hand. */
.hand-chip{touch-action:none;user-select:none;-webkit-user-drag:none}
.hand-chip img,#pPortrait,.drag-ghost img{user-select:none;-webkit-user-drag:none}
.hand-chip[data-shape="triangle"]{
  clip-path:polygon(50% 0%,100% 92%,0% 92%);
  border:0;border-radius:0;background:var(--accent);
}
.hand-chip[data-shape="triangle"]:before{
  inset:6%;border:0;border-radius:0;
  clip-path:polygon(50% 0%,100% 91%,0% 91%);
  background:#071a2b;
  box-shadow:none;
}
.hand-chip[data-shape="triangle"] img{
  inset:7%;width:86%;height:86%;border-radius:0;
  clip-path:polygon(50% 1%,99% 92%,1% 92%);
  z-index:2;
}
.hand-chip[data-shape="square"]{border-radius:16%}
.hand-chip[data-shape="square"]:before,.hand-chip[data-shape="square"] img{border-radius:12%}
.hand-chip.dragging-origin{opacity:.24;transform:translateY(.3cqh) scale(.9)}
.hand-chip.dragging-origin img{filter:saturate(.4)}
.drag-ghost{
  position:absolute;z-index:18;width:17cqh;height:17cqh;
  transform:translate(-50%,-50%) rotate(-4deg) scale(1.08);
  pointer-events:none;touch-action:none;
  border:.7cqh solid var(--accent);
  background:#081b2a;border-radius:50%;
  box-shadow:0 1.4cqh 3.5cqh #000e20be,0 0 2.3cqh var(--accent);
  opacity:.94;overflow:hidden;will-change:left,top;
}
.drag-ghost img{width:100%;height:100%;object-fit:cover;display:block}
.drag-ghost[data-shape="triangle"]{
  clip-path:polygon(50% 0%,100% 92%,0 92%);
  border:0;border-radius:0;background:var(--accent);
}
.drag-ghost[data-shape="triangle"] img{
  width:88%;height:88%;margin:6%;clip-path:polygon(50% 0%,100% 92%,0 92%);
}
.drag-ghost[data-shape="square"],.drag-ghost[data-shape="square"] img{border-radius:15%}
#pPortrait[data-shape="triangle"]{
  clip-path:polygon(50% 0%,100% 94%,0 94%);
  border:0;border-radius:0;
  filter:drop-shadow(0 0 .5cqh #6debff);
}
#pPortrait[data-shape="square"]{border-radius:15%}

/* Monster combat details: live HP bar, turn speed and persistent passives. */
#pStats{margin-top:1.2cqh}
.stats-row{display:flex;justify-content:space-between;gap:2cqh;font-size:1.7cqh;color:#d8f9ff;font-weight:900;font-variant-numeric:tabular-nums}
#pSpeed{color:#ffe4a8}
.hp-track{margin-top:.6cqh;background:#061429;border:1px solid #6cbdcb;height:1.65cqh;border-radius:50px;overflow:hidden}
#pHpFill{height:100%;width:100%;background:linear-gradient(180deg,#a6eea1,#3daf66);border-radius:50px;transition:width .36s ease}
#pPortrait{object-fit:cover;object-position:top center}

/* Use the actual tall character paintings for the monster information panel. */
#pPortrait[data-monster="true"]{
  flex:none;width:12cqh;height:21cqh;border:1px solid #a0e7fa8c;
  border-radius:.8cqh;object-fit:cover;object-position:center top;
  background:#f8f8f8;box-shadow:0 0 1.3cqh #38a9ec5a;
}

/* Simultaneous planning controls, compact enough not to cover the 3D field. */
#turnPanel{position:absolute;left:2.3%;top:2.7%;z-index:6;color:#e4f8ff;text-shadow:0 .2cqh .8cqh #020919;pointer-events:none}
#roundBadge{font-weight:950;letter-spacing:.16em;font-size:2.4cqh}
#planText{margin-top:.45cqh;font-size:1.65cqh;color:#c1dce8;font-weight:800;white-space:nowrap}
.hp-summary{margin-top:.6cqh;display:flex;gap:2.2cqh;font-size:1.6cqh;font-weight:850;color:#e5d7a9}
.hp-summary b{color:#b4f8e1;font-variant-numeric:tabular-nums}
#readyTurn{position:absolute;z-index:8;right:2.4%;bottom:5%;border:1px solid #a3f3ff;background:linear-gradient(110deg,#13739b,#225379);color:#eefcff;border-radius:1.0cqh;padding:1.45cqh 4cqh;font-size:2.7cqh;font-weight:1000;box-shadow:0 .4cqh 0 #032438,0 0 1.3cqh #4cb9e866}
#readyTurn:disabled{opacity:.55;cursor:default}
#hand{max-width:65%;min-width:0;overflow-x:auto;overflow-y:visible;justify-content:flex-start;scrollbar-width:thin;gap:1.4cqh;padding:.6cqh 1cqh}
.hand-chip{width:12.5cqh;height:12.5cqh;flex:none}
.hand-chip.queued{opacity:.48;box-shadow:0 0 1.2cqh var(--accent)}
#enemyReveal{position:absolute;z-index:7;top:2%;left:50%;transform:translateX(-50%);max-width:42%;display:flex;align-items:center;gap:.6cqh;padding:.6cqh 1.2cqh;background:#06213cba;border:1px solid #4eb7e37d;border-radius:1.3cqh}
#enemyReveal img{width:6.4cqh;height:6.4cqh;object-fit:cover;border-radius:50%}
#enemyReveal img[data-shape="triangle"]{clip-path:polygon(50% 0,100% 94%,0 94%)}
#enemyReveal img[data-shape="square"]{border-radius:14%}
.reveal-title{font-size:1.3cqh;color:#7eeaff;font-weight:950;letter-spacing:.13em;white-space:nowrap}
#resolutionLog{position:absolute;z-index:6;left:2.2%;bottom:5%;max-width:24%;pointer-events:none;display:flex;flex-direction:column;gap:.4cqh}
#resolutionLog div{font-size:1.45cqh;color:#b9deed;text-shadow:0 .2cqh .7cqh #011322;line-height:1.2}
#reaction{position:absolute;inset:0;z-index:21;background:#031026b8;backdrop-filter:blur(4px);display:grid;place-items:center}
.reaction-box{background:#0d2b49;border:.28cqh solid #85dfff;padding:3.7cqh 5cqh;border-radius:1.5cqh;max-width:63%;box-shadow:0 2cqh 5cqh #0008;text-align:center}
#reactionTitle{font-size:3.2cqh;color:#fff1ca;font-weight:850;margin-bottom:2cqh}
.reaction-actions{display:flex;justify-content:center;gap:2cqh}
.reaction-actions button{border:1px solid #78dbed;background:#1c597a;color:#ecffff;border-radius:.9cqh;padding:1.3cqh 4cqh;font-size:2.5cqh;font-weight:950}
#projection{width:clamp(170px,43cqh,400px);max-height:82%}
.projection-shell{max-height:80cqh;overflow-y:auto}
#hand:empty{display:none}

/* Full game menu and overlay; board stays mounted below and is reused. */
#entry{position:absolute;inset:0;z-index:27;background:radial-gradient(ellipse at 50% 35%,#195276f5 0%,#06172ff7 60%,#030b1cfb 100%);
 display:grid;place-items:center;padding:3cqh;overflow-y:auto}
.entry-panel{width:min(78%,105cqh);display:flex;flex-direction:column;align-items:center;gap:1.5cqh;text-align:center}
.entry-panel h1{font:950 10cqh system-ui,sans-serif;letter-spacing:.25em;text-shadow:0 0 2.5cqh #3ceaff;margin:0 0 2cqh}
.entry-panel h2{font:900 4.7cqh system-ui,sans-serif;letter-spacing:.14em;margin:.3cqh 0 1.4cqh}
.entry-panel h3{font-size:2cqh;letter-spacing:.17em;color:#9be8fa;margin:1cqh 0}
.entry-panel p{margin:0 0 1cqh;font-weight:750;letter-spacing:.09em;font-size:2cqh;color:#d7e7ed}
.entry-panel button,.entry-panel input,.suggest-box button,.suggest-box textarea{
 border:1px solid #68d8f1;color:#e9fbff;border-radius:1.1cqh;background:#103b57;
 font:800 2.7cqh system-ui,sans-serif;padding:1.7cqh 3.5cqh;min-height:6cqh}
.entry-panel button{min-width:44cqh}
.entry-panel button:hover,.suggest-box button:hover{background:#22688d}
.entry-panel button.minor,.suggest-box button.minor{background:#09243799;border-color:#6698b6aa;font-size:2.1cqh;min-height:4.5cqh}
#joinOnline{display:flex;flex-direction:column;gap:1.4cqh;align-items:center}
#joinOnline input{min-width:42cqh;background:#041f32;text-align:center}
#entryStatus{position:absolute;bottom:3.2%;left:12%;right:12%;text-align:center;
 font-size:2cqh;color:#f5dea7;font-weight:750}
.lobby-panel{height:91%;gap:.55cqh}
.lobby-panel h3{align-self:stretch;margin:.8cqh 0 .2cqh}
.scroll-list{width:100%;overflow:auto;min-height:8cqh;max-height:26cqh;
 display:flex;flex-direction:column;gap:.6cqh;padding:.3cqh 1cqh}
.playerRow{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
 gap:.6cqh;padding:.7cqh 1cqh;background:#09243e99;border:1px solid #4789ae71;border-radius:.9cqh;
 font-size:1.85cqh;color:#e6f7ff;text-align:left}
.playerRow button{min-width:0;min-height:3.7cqh;padding:.5cqh 1.4cqh;font-size:1.65cqh}
#monsterCards{display:flex;justify-content:center;align-items:stretch;gap:2.2cqh;width:100%;flex-wrap:nowrap}
#monsterCards .monster-choice{min-width:0;width:31%;max-width:28cqh;display:flex;
 flex-direction:column;align-items:center;gap:.8cqh;padding:1cqh 1.2cqh}
.monster-choice img{width:100%;height:29cqh;object-fit:contain;object-position:top center;border-radius:.8cqh;
 background:#dce4e8;border:1px solid #b9e9f8aa}
.monster-choice span{font-size:2.05cqh;font-weight:950}
.monster-choice small{font-size:1.6cqh}
#suggestionPanel{position:absolute;z-index:32;inset:0;display:grid;place-items:center;
 background:#020b19df;backdrop-filter:blur(6px)}
.suggest-box{width:min(76%,95cqh);display:flex;flex-direction:column;gap:1.6cqh;align-items:stretch;
 background:#0d2c48;border:2px solid #62d6ed;border-radius:1.4cqh;padding:3cqh 4cqh;box-shadow:0 1.5cqh 7cqh #000c}
.suggest-box h2{font-size:3.6cqh;margin:0 0 .3cqh}
.suggest-box textarea{width:100%;min-height:20cqh;font-weight:500;resize:none;background:#031c2f}
#suggestionStatus{font-size:1.8cqh;color:#fff0bc;min-height:2cqh}
#suggestionPanel .minor{background:#0b2c43}

/* Card category is communicated by the glowing rim, not the shape. */
.hand-chip,.hand-chip[data-shape="triangle"],.hand-chip[data-shape="square"]{
 clip-path:none;border-radius:50%;border:.7cqh solid #152d49;
}
.hand-chip:before,.hand-chip[data-shape="triangle"]:before,.hand-chip[data-shape="square"]:before{
 content:"";inset:.25cqh;z-index:1;border-radius:50%;clip-path:none;
 border:.38cqh solid var(--accent);background:transparent;box-shadow:inset 0 0 1.2cqh var(--accent);
}
.hand-chip img,.hand-chip[data-shape="triangle"] img,.hand-chip[data-shape="square"] img{
 inset:0;width:100%;height:100%;margin:0;clip-path:none;border-radius:50%;
 object-fit:cover;z-index:0;
}
.drag-ghost,.drag-ghost[data-shape="triangle"],.drag-ghost[data-shape="square"]{
 clip-path:none;border-radius:50%;border:.7cqh solid var(--accent);
}
.drag-ghost img,.drag-ghost[data-shape="triangle"] img,.drag-ghost[data-shape="square"] img{
 clip-path:none;width:100%;height:100%;margin:0;border-radius:50%;
}
#pPortrait[data-shape="triangle"],#pPortrait[data-shape="square"]{
 clip-path:none;border-radius:50%;border:.27cqh solid #9aefff;
}
#enemyReveal img[data-shape="triangle"],#enemyReveal img[data-shape="square"]{
 clip-path:none;border-radius:50%;
}
#pPortrait[data-monster="true"]{background:transparent;object-fit:contain;mix-blend-mode:normal;border:0}
.monster-choice img{background:transparent;border:0;object-fit:contain}
#battleCinematic{
 position:absolute;inset:0;z-index:12;pointer-events:none;
 background:radial-gradient(ellipse at 50% 58%,#183a6a68 2%,#05152ddc 72%,#040d20e8);
 overflow:hidden;isolation:isolate;
 animation:cinematic-appear .18s ease-out both;
}
@keyframes cinematic-appear{from{opacity:0}to{opacity:1}}
.cinematic-monster{
 position:absolute;bottom:12%;width:31%;height:69%;object-fit:contain;
 filter:drop-shadow(0 0 1.9cqh var(--fx,#7defff))
        drop-shadow(0 1cqh 1.6cqh #02131c);
 transition:transform .25s ease-out;z-index:3;
}
.cinematic-monster-left{left:8%}
.cinematic-monster-right{right:8%;transform:scaleX(-1)}
.cinematic-monster-left.striking{animation:monster-strike-left .76s ease-in-out both}
.cinematic-monster-right.striking{animation:monster-strike-right .76s ease-in-out both}
@keyframes monster-strike-left{0%,100%{transform:translateX(0)}40%{transform:translateX(10%) scale(1.10)}}
@keyframes monster-strike-right{0%,100%{transform:scaleX(-1) translateX(0)}40%{transform:scaleX(-1) translateX(10%) scale(1.10)}}
.cinematic-halo{
 position:absolute;bottom:11%;width:33%;height:6%;
 border-radius:50%;background:radial-gradient(ellipse,var(--fx,#66d9ff),transparent 75%);
 opacity:.75;filter:blur(.9cqh);z-index:2
}
.halo-left{left:7%}.halo-right{right:7%}
#filmAction{
 position:absolute;left:30%;top:9%;width:40%;z-index:7;
 font-size:clamp(13px,3.3cqh,30px);font-weight:1000;text-align:center;
 color:#f5ffff;text-shadow:0 0 1.7cqh var(--fx,#52dfff),0 .3cqh 1.5cqh #03111b;
 padding:.6cqh 1cqh;line-height:1.14;
}
#filmDamage{
 position:absolute;top:46%;left:50%;z-index:9;transform:translate(-50%,-50%);
 font-size:11cqh;font-weight:1000;font-variant-numeric:tabular-nums;
 color:#ffec96;text-shadow:0 0 2cqh #ff7c1e,0 .8cqh 1.2cqh #030d22;
}
#filmDamage.pop{animation:damage-pop .62s ease-out both}
@keyframes damage-pop{
 0%{transform:translate(-50%,-50%) scale(.3);opacity:0}
 30%{transform:translate(-50%,-65%) scale(1.3);opacity:1}
 100%{transform:translate(-50%,-100%) scale(1);opacity:0}
}
#filmEffects{position:absolute;inset:0;z-index:5;overflow:hidden}
.fx-particle{
 position:absolute;left:50%;top:52%;width:1.4cqh;height:1.4cqh;
 background:var(--fx,#80e8ff);box-shadow:0 0 2cqh var(--fx,#80e8ff);
 border-radius:50%;filter:blur(.15cqh);animation:fx-burst .85s ease-out forwards;
 animation-delay:var(--delay,0ms);
}
@keyframes fx-burst{from{transform:translate(0,0) scale(1.0);opacity:1}
 to{transform:translate(var(--dx,0),var(--dy,0)) scale(.12);opacity:0}}
#battleCinematic[data-effect="fireball"] #filmEffects{background:radial-gradient(circle at 50% 55%,#ff5c235c,transparent 42%)}
#battleCinematic[data-effect="circle"] #filmEffects{background:conic-gradient(from 0deg at 50% 55%,transparent,#ae82fc41,transparent,#ae82fc41,transparent)}
#battleCinematic[data-effect="hope"] #filmEffects{background:radial-gradient(circle at 50% 55%,#fff5b050,transparent 46%)}
#battleCinematic[data-effect="anti"] #filmEffects{background:linear-gradient(135deg,transparent 40%,#ff659d44 50%,transparent 60%)}
#battleCinematic[data-effect="trap"] #filmEffects{background:radial-gradient(circle at 50% 55%,#7d61ff75,transparent 42%)}
#battleCinematic[data-effect="airshot"] #filmEffects{background:linear-gradient(100deg,transparent 35%,#72ebff66 50%,transparent 65%)}
#battleCinematic[data-effect="slash"] #filmEffects{background:linear-gradient(122deg,transparent 42%,#f9e6c277 50%,transparent 57%)}
#battleCinematic[data-kind="damage"]{background-color:#48151a42}
#battleCinematic[data-kind="heal"]{background-color:#12584238}
#readyTurn:disabled{filter:saturate(.35)}

/* Distinct visual signatures for remaining support-chip effects. */
#battleCinematic[data-effect="reveal"] #filmEffects{background:repeating-conic-gradient(from 20deg at 50% 50%,#3ff5ff3b 0deg 13deg,transparent 14deg 36deg)}
#battleCinematic[data-effect="buddy"] #filmEffects{background:radial-gradient(ellipse at 58% 55%,#b3ffaf6b 0%,#36d9bd30 30%,transparent 52%)}
#battleCinematic[data-effect="plate"] #filmEffects{background:linear-gradient(90deg,transparent 17%,#c5e9ff70 47%,#aab7ce70 53%,transparent 83%)}
#battleCinematic[data-effect="gun"] #filmEffects{background:repeating-linear-gradient(90deg,transparent 0 16%,#a9ecff22 17%,transparent 20%)}
#battleCinematic[data-effect="garbage"] #filmEffects{background:conic-gradient(at 50% 53%,#a6f5bb4a,transparent 70deg,#98cb864a 130deg,transparent 220deg,#a6f5bb4a)}
#battleCinematic[data-effect="scratch"] #filmEffects{background:linear-gradient(110deg,transparent 39%,#ffe5aa87 41%,transparent 43%,transparent 53%,#ffe5aa87 55%,transparent 58%)}
#battleCinematic[data-effect="bite"] #filmEffects{background:radial-gradient(ellipse at 50% 54%,#ff665d55 0%,transparent 43%)}
#battleCinematic[data-effect="headbutt"] #filmEffects{background:radial-gradient(ellipse at 50% 56%,#bedfff55 0%,transparent 38%)}


/* Wenrexa holographic redesign: wide, fixed inspector independent of the selected chip. */
#projection{
 left:50% !important;
 top:49% !important;
 transform:translate(-50%,-50%) !important;
 width:min(85cqw,142cqh) !important;
 max-width:95% !important;
 height:auto !important;
 max-height:78% !important;
 overflow:visible !important;
 filter:drop-shadow(0 1.4cqh 2.5cqh #000a) drop-shadow(0 0 1.9cqh #02f4da44);
 animation:wenrexa-inspect-in .18s ease-out both !important;
}
@keyframes wenrexa-inspect-in{
 from{opacity:0;scale:.96}
 to{opacity:1;scale:1}
}
#projection::before,#projection::after{display:none!important}
#projection .projection-shell{
 position:relative;display:grid !important;
 grid-template-columns:minmax(0,28%) minmax(0,1fr) !important;
 grid-template-rows:minmax(0,1fr);
 column-gap:2.3cqh;
 align-items:stretch !important;
 width:100%;
 padding:2.9cqh 4.5cqh 2.6cqh 3.2cqh !important;
 min-height:25cqh;
 max-height:min(75cqh,80cqh) !important;
 overflow-y:auto !important;
 border:0 !important;
 border-radius:1.3cqh !important;
 background-image:url('/Codvd/assets/wenrexa-landscape.webp'),linear-gradient(135deg,#06192cf5,#092d39f0 70%,#05131fd9) !important;
 background-repeat:no-repeat;
 background-position:center;
 background-size:100% 100%;
 box-shadow:0 1.2cqh 3cqh #000d,0 0 1cqh #24f3d66b,inset 0 0 .5cqh #b7fff0c9 !important;
 backdrop-filter:blur(8px);
}
#projection .projection-shell::before{display:none}
#projection .projection-shell > *{min-width:0}
#projection .projection-portrait-frame{
 align-self:stretch;
 position:relative;
 min-height:25cqh;
 display:flex;align-items:center;justify-content:center;
 padding:1.3cqh;
 border:1px solid #4cffdb81;
 border-radius:1cqh;
 background:radial-gradient(ellipse at 50% 36%,#267e7f55,#04101ac4 75%);
 box-shadow:inset 0 0 2cqh #44ffc52b;
}
#projection .projection-portrait-frame::after{
 content:"";position:absolute;inset:.8cqh;border-radius:.6cqh;
 border:1px solid #54fcdc38;pointer-events:none;
}
#projection #pPortrait,
#projection #pPortrait[data-monster="true"],
#projection #pPortrait[data-shape="square"],
#projection #pPortrait[data-shape="triangle"]{
 width:100% !important;height:100% !important;
 max-height:46cqh !important;object-fit:contain !important;
 object-position:center center;
 border:0 !important;border-radius:0 !important;
 filter:drop-shadow(0 0 1.1cqh #16efd44d);
 background:transparent !important;
 box-shadow:none !important;
 clip-path:none !important;
}
#projection .projection-information{
 display:flex;flex-direction:column;min-width:0;
 gap:1.1cqh;overflow:visible;
 align-self:center;
}
#projection .projection-id{min-width:0;display:flex;align-items:baseline;gap:1.6cqh;flex-wrap:wrap;padding-right:3cqh}
#projection #pType{
 font-size:1.65cqh;color:#79ffdf;
 letter-spacing:.14em;font-weight:950;
 border:1px solid #30b6a16b;background:#0b4c4c77;
 border-radius:.45cqh;padding:.3cqh .7cqh;
}
#projection #pTitle{
 font:900 clamp(13px,3.6cqh,36px) system-ui,sans-serif !important;
 line-height:1.1;letter-spacing:.015em;overflow-wrap:anywhere;
 color:#e1fff9 !important;
 text-shadow:0 0 1.1cqh #22eab45c;
}
#projection #pDetail{
 font-size:1.82cqh;line-height:1.34;color:#c9f7ee;
 padding:.6cqh 1.1cqh;margin:0 !important;
 border-left:.35cqh solid #4fffd8a3;
 background:#09252c88;
 white-space:pre-wrap;
}
#projection #pStats{margin:0}
#projection .stats-row{font-size:1.75cqh}
#projection .hp-track{height:1.5cqh}
#projection #pMoves{
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
 gap:.7cqh 1cqh;
}
#projection .move{
 border:1px solid #61d7c655;border-radius:.5cqh;
 background:#0726309e;padding:.7cqh 1cqh;
 flex-direction:column;align-items:start;justify-content:start;gap:.45cqh;
 min-height:5cqh;
}
#projection .move strong{color:#e8fff5;font-size:1.7cqh}
#projection .move span{font-size:1.42cqh;text-align:left;color:#a9ded5}
#projection #pActions{
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
 gap:.8cqh;margin-top:.25cqh;
}
#projection .projection-action{
 display:flex;flex-direction:column;align-items:start;
 min-width:0;min-height:5.5cqh;
 padding:.85cqh 1.1cqh;
 border:0;border-radius:.35cqh;
 background:#072b3d url('/Codvd/assets/wenrexa-button.webp') center / 100% 100% no-repeat;
 color:#ddfffb;
 box-shadow:0 .2cqh 1cqh #0006;
}
#projection .projection-action strong{font-size:1.7cqh;white-space:normal}
#projection .projection-action small{font-size:1.3cqh;text-align:left}
#projection .projection-action.active{filter:brightness(1.3)}
#projection .projection-action:disabled{opacity:.46}
#projection .projection-action:hover:not(:disabled){filter:brightness(1.3)}
#projection #closeProjection{
 top:1.1cqh;right:1.2cqh;z-index:10;
 border:0;border-radius:50%;
 width:4.3cqh;height:4.3cqh;
 background:transparent url('/Codvd/assets/wenrexa-close.webp') center/contain no-repeat !important;
 color:transparent;font-size:0;box-shadow:none;
}
#projection #closeProjection:hover{filter:brightness(1.2)}
/* Bring the supplied hologram texture into all menu actions, not only the inspector. */
.entry-panel button:not(.monster-choice),.suggest-box button,#readyTurn,
.reaction-actions button{
 background-image:url('/Codvd/assets/wenrexa-button.webp');
 background-size:100% 100%;
 background-position:center;
 background-repeat:no-repeat;
 background-color:#082b35;
 border:0;
 box-shadow:0 .35cqh 1.1cqh #0008;
}
.entry-panel button:not(.monster-choice):hover,.suggest-box button:hover,#readyTurn:hover:not(:disabled){
 filter:brightness(1.2);
}
.entry-panel .monster-choice{
 background:linear-gradient(165deg,#15465399,#071f2cd0);
 border:1px solid #5df3d78a;
 box-shadow:inset 0 0 1.4cqh #3bfec91c;
}
#entry{background:radial-gradient(ellipse at center,#0a4b54eb,#031221f8 70%)}
#monsterCards img{filter:drop-shadow(0 .45cqh .6cqh #0009)}
@media(max-aspect-ratio:1/1){
 #projection{width:94%!important;max-height:83%!important}
 #projection .projection-shell{grid-template-columns:30% minmax(0,1fr)!important;padding:1.9cqh 2.5cqh!important}
 #projection .projection-portrait-frame{min-height:20cqh}
}

/* Real Wenrexa RPG icons: Mascot / Battle Magic / Long Dagger. */
#projection #pCategoryGlyph{
 width:3.8cqh;height:3.8cqh;flex:none;display:inline-block;
 background-image:url('/Codvd/assets/wenrexa-rpg-icons.webp');
 background-repeat:no-repeat;
 background-size:300% 100%;
 background-position:0 0;
 filter:drop-shadow(0 0 .5cqh #8cfdeb70);
}
#projection[data-category="ability"] #pCategoryGlyph{background-position:50% 0}
#projection[data-category="weapon"] #pCategoryGlyph,
#projection[data-category="armor"] #pCategoryGlyph{background-position:100% 0}
/* Secondary menu controls from Free Hologram Interface Wenrexa. */
.entry-panel button.minor,.suggest-box button.minor{
 background-image:url('/Codvd/assets/wenrexa-free-button.webp') !important;
 background-size:100% 100% !important;
 background-repeat:no-repeat;
 background-color:#062c35cc;
}
#projection #closeProjection{
 position:absolute;
 background:radial-gradient(circle at center,#0b2b37e8 0%,#03212df2 68%,#0a324091 73%) !important;
 border:.23cqh solid #81ffdf !important;
 border-radius:50% !important;
 box-shadow:0 0 1.1cqh #22f8d095 !important;
}
#projection #closeProjection::before,
#projection #closeProjection::after{
 content:"";position:absolute;left:50%;top:50%;
 width:52%;height:.28cqh;border-radius:.3cqh;background:#ccfff4;
 transform:translate(-50%,-50%) rotate(45deg);
}
#projection #closeProjection::after{transform:translate(-50%,-50%) rotate(-45deg)}


/* Codvd suggestion categories: square checkbox appearance, mutually exclusive radio input. */
#suggestionPanel[hidden],[hidden]{display:none!important}
.suggestion-categories{
 min-width:0;width:100%;border:0;margin:0;padding:0;
 display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
 gap:.85cqh;align-items:stretch;
}
.suggestion-categories legend{
 display:block;width:100%;padding:0 0 1cqh;
 color:#b6fff1;font-weight:900;font-size:2.15cqh;
 letter-spacing:.07em;
}
.suggestion-option{
 display:flex;align-items:center;justify-content:center;
 position:relative;padding:1.2cqh .7cqh;gap:.8cqh;
 min-height:5.5cqh;cursor:pointer;text-align:center;
 border:1px solid #73cdce90;border-radius:.6cqh;
 background:linear-gradient(155deg,#153d53aa,#061f33ee);
 color:#bddbe4;font-size:1.87cqh;font-weight:850;
 transition:background .15s,border-color .15s,box-shadow .15s;
}
.suggestion-option input{
 appearance:none;-webkit-appearance:none;
 flex:none;width:1.7cqh;height:1.7cqh;
 padding:0;margin:0;min-height:0;min-width:0;
 border:.23cqh solid #76c1d0;border-radius:.2cqh;
 background:#021b28;box-shadow:inset 0 0 .35cqh #0008;
}
.suggestion-option input:checked{
 border-color:#b6ffe9;background:#49f1c4;
 box-shadow:0 0 1.1cqh #4ce4c37d;
}
.suggestion-option input:checked::after{
 content:"";display:block;
 width:.64cqh;height:.35cqh;
 border-left:.22cqh solid #002e34;
 border-bottom:.22cqh solid #002e34;
 transform:translate(.32cqh,.30cqh) rotate(-45deg);
}
.suggestion-option:has(input:checked){
 border-color:#a6ffe6;color:#edfff9;
 background:linear-gradient(150deg,#156969dd,#083d53ef);
 box-shadow:inset 0 0 1.2cqh #69ffca44,0 0 1.1cqh #35e6c74a;
}
.suggestion-option:has(input:focus-visible){outline:.35cqh solid #fff5b8;outline-offset:.2cqh}
.suggestion-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6cqh;align-items:center}
#suggestionCount{font-size:1.7cqh;color:#ffcf89;font-weight:750}
#suggestionCount[data-valid="true"]{color:#8bf5d0}
#suggestionStatus{font-size:1.75cqh;flex:1;text-align:right}
#sendSuggestion:disabled{
 opacity:.48;cursor:not-allowed;
 filter:saturate(.25) brightness(.85);
}
#suggestionText{font-size:2.1cqh;line-height:1.4}
@media(max-width:560px){
 .suggestion-option{font-size:1.65cqh;gap:.45cqh;padding:.85cqh .4cqh}
 .suggestion-categories{gap:.45cqh}
}


/* Codvd cinematic V2: clear large monsters and truly animated hit effects. */
#battleCinematic{
 z-index:16 !important;
 background:radial-gradient(ellipse at center,#183550bd 2%,#061224f5 76%) !important;
 backdrop-filter:blur(2px);
}
.cinematic-monster{bottom:7%;height:78%;width:34%;max-width:34%;filter:drop-shadow(0 0 2.2cqh var(--fx)) drop-shadow(0 .9cqh 1cqh #000b)}
.cinematic-monster-left{left:5%}
.cinematic-monster-right{right:5%}
.cinematic-monster-left.striking{animation:codvd-lunge-left 1.95s cubic-bezier(.2,.6,.2,1) both}
.cinematic-monster-right.striking{animation:codvd-lunge-right 1.95s cubic-bezier(.2,.6,.2,1) both}
.cinematic-monster-left.hit,.cinematic-monster-right.hit{
 animation:codvd-hit 1.28s ease-out both;
}
@keyframes codvd-lunge-left{
 0%,100%{transform:translateX(0) scale(1)}
 18%{transform:translateX(-5%) scale(.97)}
 50%{transform:translateX(17%) scale(1.12)}
 70%{transform:translateX(13%) scale(1.07)}
}
@keyframes codvd-lunge-right{
 0%,100%{transform:scaleX(-1) translateX(0) scale(1)}
 18%{transform:scaleX(-1) translateX(-5%) scale(.97)}
 50%{transform:scaleX(-1) translateX(17%) scale(1.12)}
 70%{transform:scaleX(-1) translateX(13%) scale(1.07)}
}
@keyframes codvd-hit{
 0%,100%{filter:drop-shadow(0 0 1.8cqh var(--fx))}
 16%,29%{filter:drop-shadow(0 0 3cqh #ff4d52) brightness(2)}
 24%,43%{filter:drop-shadow(0 0 3cqh #ffd3aa) brightness(1.5)}
}
#filmAction{
 left:21%;top:4%;width:58%;padding:1.2cqh 2cqh;
 background:linear-gradient(90deg,transparent,#0b3149c0 17%,#0b3149c0 83%,transparent);
 border-bottom:.15cqh solid var(--fx);
 font-size:clamp(15px,3.9cqh,38px);
 line-height:1.19;
 text-shadow:0 0 1.8cqh var(--fx),0 .3cqh 1.3cqh #000;
}
#filmDamage{
 top:48%;left:50%;
 z-index:11;font-size:15cqh;
 font-weight:1000;
 -webkit-text-stroke:.25cqh #4f230e;
}
#filmDamage.pop{animation:codvd-damage-number 1.6s cubic-bezier(.17,.8,.2,1) both}
@keyframes codvd-damage-number{
 0%{transform:translate(-50%,-30%) scale(.3);opacity:0}
 17%{transform:translate(-50%,-70%) scale(1.65);opacity:1}
 43%{transform:translate(-50%,-80%) scale(1.17);opacity:1}
 77%{transform:translate(-50%,-100%) scale(1.17);opacity:1}
 100%{transform:translate(-50%,-130%) scale(1);opacity:0}
}
#filmEffects{z-index:7}
.fx-projectile{
 position:absolute;left:17%;top:50%;
 width:9cqh;height:9cqh;border-radius:50%;
 background:radial-gradient(circle at 34% 30%,#fff 0%,var(--fx) 29%,#082c439e 84%);
 box-shadow:0 0 2cqh var(--fx),0 0 7cqh var(--fx),0 0 15cqh var(--fx);
 opacity:0;
 animation:codvd-shoot 2.1s cubic-bezier(.3,.45,.35,1) both;
 z-index:6;
}
#battleCinematic[data-side="enemy"] .fx-projectile{
 left:77%;animation-name:codvd-shoot-back
}
@keyframes codvd-shoot{
 0%,14%{transform:translate(0,0) scale(.15);opacity:0}
 29%{transform:translate(2cqh,-1cqh) scale(1.1);opacity:1}
 66%{transform:translate(35cqh,0) scale(1.4);opacity:1}
 85%{transform:translate(55cqh,-1cqh) scale(1.8);opacity:0}
 100%{opacity:0}
}
@keyframes codvd-shoot-back{
 0%,14%{transform:translate(0,0) scale(.15);opacity:0}
 29%{transform:translate(-2cqh,-1cqh) scale(1.1);opacity:1}
 66%{transform:translate(-35cqh,0) scale(1.4);opacity:1}
 85%{transform:translate(-55cqh,-1cqh) scale(1.8);opacity:0}
 100%{opacity:0}
}
.fx-projectile::before,.fx-projectile::after{
 content:"";position:absolute;inset:-1cqh;
 border:.35cqh solid var(--fx);border-radius:50%;
 box-shadow:0 0 2cqh var(--fx);
 animation:codvd-orbit 1.1s linear infinite;
}
.fx-projectile::after{inset:-2.8cqh;border-style:dashed;animation-direction:reverse;opacity:.72}
@keyframes codvd-orbit{to{transform:rotate(360deg)}}
.fx-shockwave{
 position:absolute;left:50%;top:53%;height:12cqh;width:12cqh;
 border:1cqh solid var(--fx);border-radius:50%;
 transform:translate(-50%,-50%) scale(.05);
 box-shadow:0 0 2cqh var(--fx),inset 0 0 1.8cqh var(--fx);
 animation:codvd-impact-wave 1.6s ease-out both;
 animation-delay:var(--wave-delay,0ms);
}
@keyframes codvd-impact-wave{
 0%,12%{transform:translate(-50%,-50%) scale(.08);opacity:0}
 18%{opacity:1}
 100%{transform:translate(-50%,-50%) scale(3.8);opacity:0}
}
.fx-particle{
 left:50%;top:53%;height:var(--size,1cqh);width:var(--size,1cqh);
 background:radial-gradient(circle,#fff,var(--fx));
 box-shadow:0 0 1.4cqh var(--fx),0 0 3cqh var(--fx);
 animation:codvd-sparks 1.8s ease-out both;
}
@keyframes codvd-sparks{
 0%,15%{transform:translate(0,0) scale(.2);opacity:0}
 25%{opacity:1;transform:translate(0,0) scale(1.5)}
 100%{transform:translate(var(--dx),var(--dy)) scale(.15);opacity:0}
}
.fx-strike{
 position:absolute;top:50%;left:50%;width:4.6cqh;height:40cqh;
 transform:translate(-50%,-50%) rotate(33deg) scaleY(.1);
 background:linear-gradient(90deg,transparent,var(--fx) 22%,white 50%,var(--fx) 78%,transparent);
 opacity:0;filter:blur(.2cqh) drop-shadow(0 0 3cqh var(--fx));
 animation:codvd-strike 1.65s ease-out both;
}
@keyframes codvd-strike{
 0%,24%{transform:translate(-50%,-50%) rotate(33deg) scaleY(.1);opacity:0}
 30%,43%{transform:translate(-50%,-50%) rotate(33deg) scaleY(1.1);opacity:1}
 72%,100%{transform:translate(-50%,-50%) rotate(33deg) scaleY(.1);opacity:0}
}
#battleCinematic[data-kind="place"] .fx-projectile,
#battleCinematic[data-kind="draw"] .fx-projectile,
#battleCinematic[data-kind="discard"] .fx-projectile{display:none}
#battleCinematic[data-effect="fireball"] .fx-projectile{
 background:radial-gradient(circle,#fff7a1 8%,#ffcd38 26%,#ff6412 52%,#b91608 77%,transparent 92%);
 border-radius:55% 40% 55% 30%;filter:drop-shadow(0 0 3cqh #ff6809);
}
#battleCinematic[data-effect="slash"] .fx-projectile,
#battleCinematic[data-effect="scratch"] .fx-projectile,
#battleCinematic[data-effect="bite"] .fx-projectile,
#battleCinematic[data-effect="jab"] .fx-projectile{
 background:linear-gradient(115deg,transparent 15%,#fff 50%,var(--fx) 65%,transparent 88%);
 border-radius:0;filter:drop-shadow(0 0 3cqh var(--fx));
}
#battleCinematic[data-effect="airshot"] .fx-projectile{
 background:linear-gradient(110deg,transparent,#e1ffff 45%,#4be8ff 60%,transparent);
 border-radius:10%;height:3cqh;width:30cqh;
}
#battleCinematic[data-effect="circle"] .fx-projectile{
 background:conic-gradient(#9669ff,#e7c4ff,#976eff,#e7c4ff,#9669ff);
 border:1cqh dotted #dcc7ff;box-shadow:0 0 6cqh #bc8dff;
}
#battleCinematic[data-effect="hope"] .fx-projectile{
 background:radial-gradient(circle,#fff,#f2fd93 38%,#6effa5 60%,transparent 85%);
}
#battleCinematic[data-effect="trap"] .fx-projectile{
 background:repeating-conic-gradient(#a97fff 0 24deg,#322261 25deg 48deg);
 border-radius:16%;transform-origin:50% 50%;
}
#battleCinematic[data-effect="anti"] .fx-projectile{
 background:linear-gradient(120deg,transparent 25%,#f7a0ff 50%,transparent 75%);
 border-radius:0;
}
#battleCinematic[data-effect="plate"] .fx-projectile,
#battleCinematic[data-effect="buddy"] .fx-projectile{
 background:radial-gradient(ellipse,#c8ffe8 0%,#80f3c190 52%,transparent 80%);
 border:1cqh solid var(--fx);
}
#battleCinematic[data-kind="damage"]{animation:codvd-hurt-flash 1.6s ease-out both}
@keyframes codvd-hurt-flash{
 0%,100%{box-shadow:inset 0 0 0 #f33}
 30%{box-shadow:inset 0 0 12cqh #e14e4c52}
 55%{box-shadow:inset 0 0 6cqh #e14e4c2d}
}
#resolutionLog{opacity:.75;max-width:32%;font-size:1.45cqh}
#resolutionLog .round-action-line{
 color:#daf8f2;text-shadow:0 0 1cqh #000;
 font-size:1.55cqh;line-height:1.17;animation:codvd-log-in .28s ease-out both;
}
@keyframes codvd-log-in{from{transform:translateY(.8cqh);opacity:0}to{transform:translateY(0);opacity:1}}

/* Mobile portrait extraction should not show source white rectangles while loading. */
#monsterCards img.portrait-pending{visibility:hidden}
#monsterCards .monster-choice{
 position:relative;isolation:isolate;overflow:hidden;
 border:1px solid #68dfdba8;box-shadow:inset 0 0 1.4cqh #29f3db30;
}
#monsterCards .monster-choice::before,#monsterCards .monster-choice::after{content:none!important}
#monsterCards .monster-choice img{
 display:block;background:transparent!important;
 border:none!important;box-shadow:none!important;
 filter:drop-shadow(0 0 .7cqh #8fe8f32b);
 -webkit-mask-image:none;mask-image:none;
 object-position:center center;
}

/* Projectiles traverse the full 16:9 arena instead of stopping mid-table. */
@keyframes codvd-shoot{
 0%,12%{transform:translate(0,0) scale(.15);opacity:0}
 25%{transform:translate(3cqw,-1cqh) scale(.9);opacity:1}
 66%{transform:translate(35cqw,0) scale(1.3);opacity:1}
 85%{transform:translate(53cqw,-1cqh) scale(1.9);opacity:0}
 100%{opacity:0}
}
@keyframes codvd-shoot-back{
 0%,12%{transform:translate(0,0) scale(.15);opacity:0}
 25%{transform:translate(-3cqw,-1cqh) scale(.9);opacity:1}
 66%{transform:translate(-35cqw,0) scale(1.3);opacity:1}
 85%{transform:translate(-53cqw,-1cqh) scale(1.9);opacity:0}
 100%{opacity:0}
}

/* Individual rule-result animations: dice, coin, healing, dodges and bleed. */
#battleCinematic[data-kind="dice"] .fx-projectile{
 left:49%;top:42%;width:11cqh;height:11cqh;
 border:.6cqh solid #bedfff;border-radius:1.5cqh;
 background:
  radial-gradient(circle,#334b7e 40%,transparent 43%) 22% 21%/2.6cqh 2.6cqh,
  radial-gradient(circle,#334b7e 40%,transparent 43%) 78% 77%/2.6cqh 2.6cqh,
  radial-gradient(circle,#334b7e 40%,transparent 43%) 50% 50%/2.6cqh 2.6cqh,
  #edfaff;
 background-repeat:no-repeat;
 box-shadow:0 0 2cqh #c6fdff;
 animation:codvd-roll 1.3s ease-out both;
}
#battleCinematic[data-kind="coin"] .fx-projectile{
 left:49%;top:42%;width:12cqh;height:12cqh;
 border:1cqh solid #ffeba7;border-radius:50%;
 background:radial-gradient(circle,#fff9c8,#f4bc44 70%,#9e6a17);
 box-shadow:0 0 5cqh #ffe49c;
 animation:codvd-flip 1.35s ease-out both;
}
@keyframes codvd-roll{
 0%{transform:translate(-50%,-50%) scale(.15) rotate(-270deg);opacity:0}
 35%{transform:translate(-50%,-85%) scale(1.25) rotate(115deg);opacity:1}
 80%,100%{transform:translate(-50%,-50%) scale(1) rotate(360deg);opacity:1}
}
@keyframes codvd-flip{
 0%{transform:translate(-50%,-40%) rotateY(0deg) scale(.25);opacity:0}
 27%{opacity:1}
 78%,100%{transform:translate(-50%,-60%) rotateY(1080deg) scale(1.1);opacity:1}
}
#battleCinematic[data-kind="heal"] .fx-projectile{
 left:50%;top:49%;width:15cqh;height:15cqh;
 border:.75cqh solid #afffd3;
 background:radial-gradient(circle at center,#f4fff6,#83ffd6 45%,transparent 72%);
 animation:codvd-heal 1.7s ease-out both;
}
@keyframes codvd-heal{
 0%{transform:translate(-50%,20%) scale(.2);opacity:0}
 26%{transform:translate(-50%,-20%) scale(1);opacity:1}
 80%{transform:translate(-50%,-110%) scale(1.6);opacity:1}
 100%{transform:translate(-50%,-150%) scale(2);opacity:0}
}
#battleCinematic[data-kind="dodge"] .fx-projectile,
#battleCinematic[data-kind="miss"] .fx-projectile{display:none}
#battleCinematic[data-kind="dodge"] .fx-shockwave{border-style:dashed}
#battleCinematic[data-kind="bleed"] .fx-projectile{
 left:48%;top:50%;
 background:radial-gradient(circle,#ffdee4,#e32258 48%,#8a1735 80%);
 width:12cqh;height:14cqh;border-radius:80% 80% 85% 20%;
 animation:codvd-bleed 1.6s ease-out both;
}
@keyframes codvd-bleed{
 0%{transform:translateY(-10cqh) scale(.3);opacity:0}
 35%{transform:translateY(1cqh) scale(1.1);opacity:1}
 88%{transform:translateY(9cqh) scale(.9);opacity:.9}
 100%{transform:translateY(13cqh) scale(.8);opacity:0}
}


/* === Codvd composition 09: three independent holographic stations ===
   The images supplied by the player are references ONLY. All scenery below
   is made with CSS and existing project artwork / Wenrexa UI textures.
   The central inspector is TRANSPARENT so the real 3D board remains visible.
*/
#projection{
 position:absolute!important;
 inset:13.2% 2.1% 20% 2.1%!important;
 left:2.1%!important;top:13.2%!important;
 width:95.8%!important;height:66.8%!important;
 max-width:none!important;max-height:none!important;
 overflow:visible!important;
 transform:none!important;scale:1!important;
 filter:none!important;pointer-events:none!important;
 background:transparent!important;
 animation:codvd-inspect-open .22s ease-out both!important;
 z-index:15!important;
}
@keyframes codvd-inspect-open{
 from{opacity:0;translate:0 1.5cqh}
 to{opacity:1;translate:0 0}
}
#projection::before,#projection::after{content:none!important}
#projection .projection-shell{
 display:grid!important;
 grid-template-columns:minmax(0,30%) minmax(0,35%) minmax(0,31%)!important;
 grid-template-rows:minmax(0,79%) minmax(0,19%)!important;
 gap:2%!important;
 width:100%!important;height:100%!important;
 min-height:0!important;max-height:none!important;
 margin:0!important;padding:0!important;
 border:0!important;border-radius:0!important;
 box-shadow:none!important;
 background:transparent!important;backdrop-filter:none!important;
 overflow:visible!important;
 animation:none!important;
 pointer-events:none;
}
#projection .projection-shell::before{content:none!important}
#projection .projection-shell > *{
 min-width:0!important;min-height:0!important;
 box-sizing:border-box;
}
#projection .inspect-id-panel,
#projection .inspect-control-panel,
#projection .inspect-effect-panel{
 position:relative;
 border:.28cqh solid #45e3e6;
 background:linear-gradient(145deg,#062832f4,#04262eed 60%,#011922f7);
 border-radius:1.9cqh;
 box-shadow:inset 0 0 0 .3cqh #02151d,inset 0 0 1.8cqh #20f0cf40,0 0 1.4cqh #1de0eb43,0 .7cqh 2cqh #0008;
 pointer-events:auto;
}
#projection .inspect-id-panel::before,
#projection .inspect-control-panel::before,
#projection .inspect-effect-panel::before{
 content:"";pointer-events:none;
 position:absolute;inset:.8cqh;
 border:.15cqh solid #72e6d849;
 clip-path:polygon(0 0,calc(100% - 2cqh) 0,100% 2cqh,100% 100%,2cqh 100%,0 calc(100% - 2cqh));
 border-radius:.5cqh;
}
#projection .inspect-id-panel{
 grid-column:1;grid-row:1;
 display:flex!important;flex-direction:column;
 justify-content:center;align-items:flex-start;
 padding:3cqh 3.25cqh!important;
 overflow:hidden;
}
#projection .inspect-identification{
 display:flex;align-items:center;gap:1.2cqh;flex-wrap:wrap;
 margin-bottom:1.2cqh;
}
#projection #pCategoryGlyph{
 width:4.6cqh!important;height:4.6cqh!important;
 background-image:url('/Codvd/assets/wenrexa-rpg-icons.webp');
 background-size:300% 100%;
 flex:none;
}
#projection #pType{
 border:.22cqh solid #35cdbdc9!important;
 border-radius:.55cqh!important;
 padding:.65cqh 1.2cqh!important;
 background:linear-gradient(180deg,#054953a1,#053c45a1)!important;
 font-size:2.45cqh!important;letter-spacing:.12em!important;
 font-weight:950!important;line-height:1.1!important;
 color:#69ffe0!important;
 white-space:nowrap;
}
#projection #pTitle{
 margin:0 0 2.3cqh!important;
 max-width:100%;
 font:950 clamp(13px,5.5cqh,58px)/1.07 system-ui,sans-serif!important;
 letter-spacing:-.025em!important;
 text-shadow:0 .3cqh 1cqh #000,0 0 1.4cqh #a3ffff27;
 color:#f4fff8!important;
 overflow-wrap:break-word;
}
#projection #pStats{
 width:100%!important;max-width:100%!important;
 margin:1.2cqh 0 0!important;
}
#projection .stats-row{
 display:flex!important;justify-content:space-between!important;
 gap:1cqh;margin-bottom:1cqh;
 color:#fff5c0!important;font-size:2.35cqh!important;
 font-weight:900!important;white-space:nowrap;
}
#projection .hp-track{
 width:100%!important;height:2cqh!important;
 border:.3cqh solid #78e3f2!important;border-radius:2cqh!important;
 background:#0b3036!important;overflow:hidden;
 box-shadow:0 0 1.2cqh #44ffde6c;
}
#projection #pHpFill{height:100%;background:linear-gradient(90deg,#45cf92,#aeffd4,#56d5d6)!important}
#projection .inspect-art-stage{
 position:relative;
 grid-column:2;grid-row:1;
 display:flex!important;align-items:flex-end;justify-content:center;
 pointer-events:none!important;
 min-width:0;overflow:visible;
}
#projection .inspect-art-glow{
 position:absolute;inset:16% 8% 8%;
 background:radial-gradient(ellipse at center,#5cecff2b,transparent 66%);
 filter:blur(3cqh);pointer-events:none;z-index:0;
}
#projection .inspect-art-stage #pPortrait,
#projection .inspect-art-stage #pPortrait[data-monster="true"],
#projection .inspect-art-stage #pPortrait[data-shape]{
 position:relative;z-index:2;
 display:block;
 width:100%!important;height:94%!important;
 max-height:none!important;max-width:100%!important;
 padding:0 0 2.8cqh!important;margin:0!important;
 border:0!important;outline:0!important;border-radius:0!important;
 object-fit:contain!important;object-position:center bottom!important;
 background:transparent!important;
 box-shadow:none!important;clip-path:none!important;
 mix-blend-mode:normal!important;
 filter:drop-shadow(0 .8cqh .9cqh #031322a6) drop-shadow(0 0 .6cqh #75f7fa32)!important;
 transform:none!important;
}
#projection[data-inspect-mode="support"] .inspect-art-stage #pPortrait{
 width:89%!important;height:85%!important;
 padding-bottom:4cqh!important;
}
#projection .inspect-art-base{
 position:absolute;left:12%;right:12%;bottom:0;
 height:12%!important;z-index:1;
 border-radius:50%;
 transform:perspective(90cqh) rotateX(58deg);
 border:.65cqh solid #55f9ed;
 background:radial-gradient(ellipse,#1e9dcdb5 0%,#095e9ed9 55%,#052a48ef 80%,transparent);
 box-shadow:0 0 1.7cqh #50fff3,0 0 3.1cqh #10ceff70,
  inset 0 0 2cqh #7efbff;
 pointer-events:none;
}
#projection .inspect-control-panel{
 grid-column:3;grid-row:1;
 padding:2.2cqh!important;
 display:grid!important;
 grid-template-columns:minmax(0,1fr);
 grid-template-rows:repeat(4,minmax(0,1fr));
 row-gap:1.1cqh;overflow:hidden;
}
#projection .inspect-control-panel #pMoves,
#projection .inspect-control-panel #pActions{
 display:contents!important;
 margin:0!important;padding:0!important;
}
#projection .inspect-control-panel .projection-action,
#projection .inspect-control-panel .move,
#projection .inspect-control-panel .inspect-empty-action{
 position:relative;
 display:flex!important;flex-direction:column!important;
 align-items:flex-start!important;justify-content:center!important;
 width:100%!important;height:100%!important;min-height:0!important;
 margin:0!important;padding:1.1cqh 2.0cqh!important;
 border:.3cqh solid #19dac9!important;
 border-radius:1.6cqh!important;
 overflow:hidden;
 background:linear-gradient(145deg,#043b45e8,#021e2bee)!important;
 box-shadow:inset 0 0 0 .35cqh #00141eaa,0 0 .55cqh #05e5cc59!important;
 text-align:left!important;
 gap:.45cqh!important;
 line-height:1.15!important;
}
#projection .inspect-control-panel .projection-action strong,
#projection .inspect-control-panel .move strong{
 display:block!important;
 color:#eafff5!important;
 font:900 2.75cqh/1.12 system-ui,sans-serif!important;
 white-space:normal!important;overflow-wrap:anywhere;
}
#projection .inspect-control-panel .projection-action small,
#projection .inspect-control-panel .move span{
 display:block!important;font-size:1.75cqh!important;
 line-height:1.21!important;text-align:left!important;
 white-space:normal!important;color:#bdeee5!important;
 max-width:100%;overflow-wrap:anywhere;
}
#projection .inspect-control-panel .projection-action:hover:not(:disabled){
 border-color:#c5ffed!important;box-shadow:0 0 1.65cqh #2effe2!important;
 background:linear-gradient(145deg,#0d6870,#054457)!important;
}
#projection .inspect-control-panel .projection-action.active{
 border-color:#c5fff7!important;
 box-shadow:inset 0 0 1.6cqh #7bfff966,0 0 1.7cqh #24fff5d6!important;
}
#projection .inspect-control-panel .projection-action:disabled{opacity:.45!important}
#projection .inspect-control-panel .inspect-empty-action{
 border-color:#138b8a94!important;
 background:linear-gradient(150deg,#08363c91,#041d2ba6)!important;
 opacity:.76;pointer-events:none;
}
#projection .inspect-effect-panel{
 grid-column:1 / 4;grid-row:2;
 display:flex;align-items:center;
 gap:2cqh;padding:1.3cqh 3.2cqh!important;
 overflow:hidden;
}
#projection #pEffectLabel{
 display:inline-flex;align-items:center;justify-content:center;
 flex:none;
 border:.25cqh solid #33dfc9;
 border-radius:.8cqh;
 background:linear-gradient(#074c51,#032832);
 padding:.9cqh 1.9cqh;
 font:950 2.55cqh system-ui,sans-serif;
 letter-spacing:.09em;color:#72ffde;
}
#projection #pDetail{
 margin:0!important;padding:0!important;
 min-width:0;max-width:100%;
 background:none!important;border:0!important;
 color:#e8fff7!important;
 font:750 clamp(11px,2.8cqh,28px)/1.28 system-ui,sans-serif!important;
 overflow-wrap:anywhere;white-space:normal!important;
 max-height:100%;overflow-y:auto;
}
#projection #closeProjection{
 position:absolute!important;
 top:-5.2cqh!important;right:0!important;
 width:5.2cqh!important;height:5.2cqh!important;
 pointer-events:auto;
 z-index:20!important;
 font-size:0!important;color:transparent!important;
 background:radial-gradient(circle,#073341,#03202f)!important;
}
#projection #closeProjection::before,#projection #closeProjection::after{
 content:""!important;
 display:block!important;position:absolute;
 width:55%;height:.4cqh;background:#d5fff2;
 top:50%;left:50%;
 transform:translate(-50%,-50%) rotate(45deg);
}
#projection #closeProjection::after{transform:translate(-50%,-50%) rotate(-45deg)}
@media(prefers-reduced-motion:reduce){
 #projection{animation:none!important}
}

/* Selection composition: supplied room, illustrated chest and independent
   full-body portraits. All positions scale with the same 16:9 stage. */
#entry:has(#monsterPick:not([hidden])){padding:0;background:#071625;overflow:hidden}
#monsterPick.pick-panel{
 position:absolute;inset:0;width:100%;max-width:none;height:100%;
 padding:0;margin:0;display:block;text-align:center;overflow:hidden;isolation:isolate;
 background:url('/Codvd/assets/monster-selection-background.webp') center/100% 100% no-repeat;
}
#monsterPick.pick-panel[hidden]{display:none!important}
#monsterPick .selection-supply-chest{
 position:absolute;z-index:1;left:31.75%;top:14.5%;width:36.5%;height:44%;
 object-fit:contain;pointer-events:none;filter:drop-shadow(0 .6cqh .4cqh #14263b80);
}
#monsterPick .selection-heading{position:absolute;left:0;right:0;top:6.6%;z-index:5;pointer-events:none}
#monsterPick .selection-heading h2{
 display:flex;align-items:center;justify-content:center;gap:1.3cqh;
 margin:0;font:950 clamp(11px,5.7cqh,54px)/1.1 system-ui,sans-serif;
 letter-spacing:.065em;color:#fff6df;text-shadow:0 .35cqh .15cqh #18273d,0 0 .7cqh #18273d;
 white-space:nowrap;
}
#monsterPick .selection-heading h2::before,#monsterPick .selection-heading h2::after{content:none}
#monsterPick .selection-heading h2 span{font-weight:500;color:#a2f5f4;text-shadow:none}
#monsterPick #choiceStatus{margin:1cqh 0 0;font-size:clamp(6px,1.65cqh,15px);font-weight:700;color:#dfedfa;text-shadow:0 .2cqh .5cqh #18273d}
#monsterPick #monsterCards{position:absolute;z-index:3;inset:0;width:100%;height:100%;display:block;overflow:visible}
#monsterPick #monsterCards .monster-choice{
 position:absolute;left:15.7%;top:27%;width:21.8%;height:57.4%;max-width:none;
 min-width:0;min-height:0;display:block;padding:0;margin:0;border:0;border-radius:0;
 background:transparent;box-shadow:none;overflow:visible;outline-offset:.7cqh;
}
#monsterPick #monsterCards .monster-choice[data-monster="bear"]{left:38.9%;top:38%;width:22.2%;height:52.7%}
#monsterPick #monsterCards .monster-choice[data-monster="dino"]{left:65.8%;top:31.3%;height:53.1%}
#monsterPick .monster-choice .choice-figure{
 position:absolute;z-index:3;left:0;top:0;width:100%;height:84.5%;
 display:flex;align-items:flex-end;justify-content:center;pointer-events:none;
 transform-origin:center bottom;transition:filter .15s;
}
#monsterPick #monsterCards .monster-choice .choice-figure img{
 display:block;width:auto;height:100%;max-width:100%;max-height:100%;
 object-fit:contain;object-position:center bottom;filter:drop-shadow(0 .45cqh .3cqh #14263b80);
}
#monsterPick .monster-choice .choice-platform{
 position:absolute;z-index:1;left:0;bottom:13.6%;width:100%;height:17%;
 border:.42cqh solid #9df7f6;border-radius:50%;pointer-events:none;
 background:radial-gradient(ellipse,#81f5f41c,transparent 72%);
 box-shadow:0 0 .7cqh #82f5f466,inset 0 0 1cqh #82f5f433;
}
#monsterPick .monster-choice .choice-nameplate{
 position:absolute;z-index:4;left:5%;bottom:0;width:90%;height:15.2%;
 min-height:0;max-height:none;margin:0;padding:.55cqh .7cqh;
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25cqh;
 color:#fff5e4;background:#95ebee;
 clip-path:polygon(7% 0,93% 0,100% 25%,100% 75%,93% 100%,7% 100%,0 75%,0 25%);
 border:0;border-radius:0;box-shadow:none;overflow:visible;isolation:isolate;
}
#monsterPick .monster-choice .choice-nameplate::before{
 content:"";position:absolute;inset:.32cqh;z-index:-1;background:linear-gradient(#284e69,#19334f);
 clip-path:polygon(7% 0,93% 0,100% 25%,100% 75%,93% 100%,7% 100%,0 75%,0 25%);
}
#monsterPick .monster-choice .choice-nameplate strong{display:block;max-width:100%;margin:0;font:900 clamp(7px,2.65cqh,25px)/1.1 system-ui,sans-serif;white-space:nowrap;overflow-wrap:normal}
#monsterPick .monster-choice .choice-nameplate small{display:block;font:800 clamp(6px,2.1cqh,20px)/1.1 system-ui,sans-serif;color:#e4fbff;white-space:nowrap}
#monsterPick .monster-choice:hover .choice-figure,#monsterPick .monster-choice.chosen .choice-figure{filter:drop-shadow(0 0 .7cqh #8cffff80)}
#monsterPick .monster-choice:hover .choice-nameplate,#monsterPick .monster-choice:focus-visible .choice-nameplate,#monsterPick .monster-choice.chosen .choice-nameplate{background:#eaffb6}
#monsterPick #backPick{position:absolute;left:2.5%;bottom:2.5%;z-index:6;width:14cqh;height:5.7cqh;padding:.5cqh;font-size:2.1cqh}
#entry:has(#monsterPick:not([hidden])) #entryStatus{position:absolute;bottom:1%;left:20%;width:60%;z-index:7;padding:0;margin:0;font-size:1.5cqh;pointer-events:none}
/* The game has one visual representation of each chip: its horizontal 3D face.
   These transparent projected buttons are only accessible interaction targets. */
#boardPieceLayer{position:absolute;inset:0;z-index:6;pointer-events:none}
#boardPieceLayer .nexus-visual-piece{
 position:absolute;display:block;margin:0;padding:0;min-width:0;min-height:0;
 border:0;border-radius:50%;background:transparent;box-shadow:none;cursor:pointer;
 transform:translate(-50%,-50%);pointer-events:auto;touch-action:manipulation;
}
#boardPieceLayer .nexus-visual-piece:focus-visible{outline:.4cqh solid #fff0a0;outline-offset:.2cqh}
#boardPieceLayer .nexus-visual-piece[hidden]{display:none!important}
#loading .loading-card{width:min(65%,64cqh);text-align:center;font-size:2.5cqh}
#loading .loading-card>strong{font-size:8cqh;letter-spacing:.18em;color:#c2f9ff}
#loading .loading-card p{min-height:3em;display:grid;place-items:center;line-height:1.5}
#loading progress{display:block;width:100%;height:1.3cqh;accent-color:#80f8ff;border:0;border-radius:1cqh;overflow:hidden}
#loading progress::-webkit-progress-bar{background:#17344b}
#loading progress::-webkit-progress-value{background:#80f8ff}
#retryLoading{margin:3cqh 0 0;padding:1.2cqh 3.5cqh;border:1px solid #80f8ff;background:#18435c;color:#e3fcff;border-radius:.6cqh;font-weight:800;font-size:2.5cqh}
@media(prefers-reduced-motion:reduce){#monsterPick .monster-choice .choice-figure{transition:none}}

/* True 3D coin/die cinematics from the user-uploaded GLBs. Keep CSS effect as
   fallback on browsers without WebGL or while the model is loading. */
#battleCinematic #filmEffects .codvd-physical-roll{
 position:absolute!important;left:50%!important;top:52%!important;
 transform:translate(-50%,-50%)!important;
 width:43cqh!important;height:32.25cqh!important;
 display:block!important;pointer-events:none!important;
 z-index:15!important;
 background:transparent!important;
 filter:drop-shadow(0 1cqh 2cqh #081224d9);
}
#battleCinematic #filmEffects.roll-3d-ready .fx-projectile{
 display:none!important;
}
@media (prefers-reduced-motion:reduce){
 #battleCinematic #filmEffects .codvd-physical-roll{
  filter:none;
 }
}