/* Numeric polyhedral dice, readable countdown, and full-screen action films. */
.numeric-die{--die-size:55px;width:var(--die-size);height:var(--die-size);position:relative;perspective:600px;flex-shrink:0;filter:drop-shadow(0 5px 5px #0007)}
.dice-view{position:absolute;inset:0;transform:rotateX(-14deg) rotateY(-18deg);transform-style:preserve-3d}
.dice-cube{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .19s cubic-bezier(.2,.7,.3,1)}
.cube-face{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(130deg,#fff,#e2e5ea);border:2px solid #27354a;border-radius:7px;color:#151820;font:bold calc(var(--die-size)*.69)/1 'Arial',sans-serif;backface-visibility:hidden;text-shadow:0 1px white;box-shadow:inset 0 0 6px #0002}
.face-0{transform:translateZ(calc(var(--die-size)/2))}.face-1{transform:rotateY(180deg) translateZ(calc(var(--die-size)/2))}.face-2{transform:rotateY(90deg) translateZ(calc(var(--die-size)/2))}.face-3{transform:rotateY(-90deg) translateZ(calc(var(--die-size)/2))}.face-4{transform:rotateX(90deg) translateZ(calc(var(--die-size)/2))}.face-5{transform:rotateX(-90deg) translateZ(calc(var(--die-size)/2))}
.numeric-die.is-rolling .dice-cube{animation:cube-tumble .55s linear infinite}.numeric-die.is-rolling{animation:die-hover .4s ease-in-out infinite}.die-result{position:absolute;inset:-2px;display:grid;place-items:center;color:#111722;background:linear-gradient(145deg,#fff,#e2e4e9);border:3px solid #263348;clip-path:polygon(14% 0,86% 0,100% 15%,100% 85%,86% 100%,14% 100%,0 85%,0 15%);font:bold calc(var(--die-size)*.75)/1 Arial,sans-serif;opacity:1;transition:opacity .08s}.is-rolling .die-result{opacity:0}.numeric-die.result-fire:before{content:'';position:absolute;inset:-24px -14px -8px;background:conic-gradient(from 5deg,#ffce3d,#ff7400,#ffe89a,#ff5e00,#ffce3d);clip-path:polygon(10% 100%,0 65%,19% 48%,15% 15%,40% 37%,55% 0,64% 36%,90% 12%,85% 55%,100% 65%,93% 100%);z-index:-1;animation:flame-die .25s ease-in-out infinite alternate}
.dice-control .numeric-die{--die-size:40px;margin:6px 8px}.battle-dice .numeric-die{--die-size:66px;margin:4px 8px}.move-roll-overlay{position:absolute;left:32px;top:28px;z-index:10;display:flex;align-items:center;gap:22px;pointer-events:none}.move-roll-overlay .numeric-die{--die-size:92px}.move-roll-overlay small{display:block;color:#fff;text-shadow:1px 2px 3px #000;font-size:13px;font-weight:700}.move-roll-overlay strong{display:block;color:#fff8d9;text-shadow:2px 3px 2px #102337;font-size:25px}.steps-counter{position:absolute;left:22px;top:15px;z-index:8;background:#fff;color:#101827;border:3px solid #142436;width:66px;text-align:center;box-shadow:3px 4px 0 #0005;border-radius:3px;animation:count-pop .17s ease-out}.steps-counter small{display:block;font-size:11px;font-weight:700;line-height:1.8}.steps-counter b{font:bold 38px/1.1 Arial;display:block;padding-bottom:5px}.body-sprite{background-repeat:no-repeat;image-rendering:auto;pointer-events:none}.world-character{width:75px!important;height:105px!important;left:calc(50% - 37.5px)!important;top:calc(53% - 87px)!important;animation:none!important;transform-origin:50% 90%;filter:drop-shadow(0 6px 3px #0005)}.world-character .body-sprite{width:100%;height:100%}.world-character.walking{animation:traveler-bob .23s ease-in-out infinite!important}.world-character.facing-left .body-sprite{transform:scaleX(-1)}.world-character:after{content:'';position:absolute;left:25%;right:25%;height:8px;bottom:0;background:#001a2c55;border-radius:50%;z-index:-1}.world-scene .side-journal{display:none}.world-scene .world-tag{left:auto;right:15px;font-size:11px;background:#071625a8}.world-scene .world-help{bottom:12px}.world-scene canvas{background:transparent}.world-scene .path-choice{top:76%}
.skill-film{position:relative;width:100%;height:100%;overflow:hidden;background:#081936;color:white;isolation:isolate;--skill-color:#7bd4ff}.skill-film:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 48% 45%,color-mix(in srgb,var(--skill-color),transparent 55%),transparent 65%);z-index:-1}.film-speedlines{position:absolute;inset:-30%;background:repeating-linear-gradient(176deg,transparent 0 17px,#ffffff0e 18px 20px,transparent 21px 40px,#ffffff18 41px 43px);transform:rotate(-8deg);animation:film-lines calc(.3s*var(--tempo)) linear infinite}.film-horizon{position:absolute;inset:40% -30% 30%;background:linear-gradient(0deg,transparent,var(--skill-color),transparent);filter:blur(25px);opacity:.22;transform:rotate(-8deg)}.film-closeup{position:absolute;left:12%;top:-7%;height:115%;width:min(597.6px,896px);filter:drop-shadow(0 10px 20px #0008);transition:opacity .1s;transform:translateX(-7%);animation:face-arrive calc(.36s*var(--tempo)) ease-out both}.film-closeup.monster-art{width:720px;left:6%;top:-5%}.film-name{position:absolute;right:6%;left:49%;top:37%;z-index:5;text-shadow:0 3px 5px #000,2px 2px 0 #000}.film-name h2{font:700 clamp(25px,53.76px,58px)/1.5 'Noto Sans Thai',sans-serif}.film-name small{font-size:12px;letter-spacing:2px;color:#fff5d0}.film-action{position:absolute;inset:0;opacity:0;transform-origin:50% 60%}.film-body{position:absolute;left:calc(50% - 172.8px);bottom:3%;height:633.6px;width:345.6px;filter:drop-shadow(0 8px 8px #0007);transform-origin:50% 90%}.film-monster{position:absolute;width:540px;height:576px;left:calc(50% - 270px);bottom:5%;filter:drop-shadow(0 10px 15px #0007);transform-origin:50% 80%}.film-caption{position:absolute;bottom:5%;left:12%;right:12%;text-align:center;font-size:12px;color:#fff8de;text-shadow:0 2px 4px #000;opacity:0}.film-magic-circle{position:absolute;width:338.4px;height:338.4px;left:calc(50% - 169.2px);top:calc(50% - 93.6px);border:3px solid var(--skill-color);border-radius:50%;box-shadow:0 0 15px var(--skill-color),inset 0 0 15px var(--skill-color);opacity:0;transform:rotateX(64deg);animation:circle-turn calc(2s*var(--tempo)) linear infinite}.film-magic-circle:before,.film-magic-circle:after{content:'';position:absolute;inset:13%;border:2px solid var(--skill-color);transform:rotate(45deg)}.film-magic-circle:after{inset:25%;transform:rotate(15deg);border-radius:50%}.film-aura{position:absolute;inset:15% 25% 8%;background:radial-gradient(ellipse at 50% 70%,transparent 20%,var(--skill-color) 65%,transparent 72%);opacity:0;mix-blend-mode:screen;filter:blur(15px)}.film-projectile{position:absolute;inset:0;opacity:0;pointer-events:none}.film-projectile>i{position:absolute;left:28%;top:43%;width:48%;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 12px 6px var(--skill-color),0 0 40px var(--skill-color);transform-origin:left;transform:rotate(-12deg)}.film-projectile>i:nth-child(2){top:50%;transform:rotate(9deg)}.film-projectile>i:nth-child(3){top:57%;transform:rotate(-5deg)}.film-particles{position:absolute;inset:0;opacity:0;pointer-events:none}.film-particles i{position:absolute;left:var(--px);top:var(--py);height:9px;width:9px;background:#fff;border-radius:50%;box-shadow:0 0 14px 5px var(--skill-color);animation:particle-blast calc(.7s*var(--tempo)) ease-out var(--delay) infinite}.film-whiteout{position:absolute;inset:0;background:white;opacity:0;pointer-events:none}.film-strike-mark{position:absolute;inset:0;opacity:0;background:linear-gradient(140deg,transparent 44%,#fff 49%,var(--skill-color) 51%,transparent 55%);mix-blend-mode:screen}
.skill-film[data-phase=windup] .film-closeup,.skill-film[data-phase=strike] .film-closeup,.skill-film[data-phase=release] .film-closeup,.skill-film[data-phase=impact] .film-closeup{opacity:0}.skill-film:not([data-phase=closeup]) .film-name{top:5%;left:5%;right:5%;text-align:center;transition:top .12s}.skill-film:not([data-phase=closeup]) .film-name h2{font-size:clamp(18px,32px,32px)}.skill-film:not([data-phase=closeup]) .film-name small{display:none}.skill-film[data-phase=windup] .film-action,.skill-film[data-phase=strike] .film-action,.skill-film[data-phase=release] .film-action{opacity:1}.skill-film[data-phase=windup] .film-caption{opacity:1}.skill-film[data-phase=windup] .film-body{animation:body-charge calc(.43s*var(--tempo)) ease-out both}.skill-film[data-phase=strike] .film-body{animation:body-strike calc(.62s*var(--tempo)) cubic-bezier(.15,.8,.3,1) both}.skill-film[data-phase=release] .film-body{transform:translateX(166.4px) scale(1.08)}.skill-film[data-phase=strike] .film-projectile,.skill-film[data-phase=release] .film-particles{opacity:1;animation:projectile-go calc(.6s*var(--tempo)) ease-out both}.skill-film[data-phase=windup] .film-magic-circle,.skill-film[data-phase=windup] .film-aura{opacity:.7}.skill-film[data-phase=impact] .film-whiteout{opacity:1}.skill-film[data-phase=black]{background:black}.skill-film[data-phase=black]>*{opacity:0!important}.enemy-film .film-action{transform:scaleX(-1)}
.fx-kind-slash[data-phase=strike] .film-strike-mark,.fx-kind-impact[data-phase=strike] .film-strike-mark{opacity:1;animation:slash-cut calc(.4s*var(--tempo)) ease-out both}.fx-kind-beam .film-projectile>i{height:35px;transform:none!important;top:46%;width:70%;left:35%}.fx-kind-beam .film-projectile>i:not(:first-child){display:none}.fx-kind-fire .film-projectile>i{width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,#fff7bc,#ffbd42 35%,#ff5d19 65%,transparent 70%);box-shadow:0 0 35px #f94;left:40%;top:40%}.fx-kind-fire .film-projectile>i:nth-child(2){width:65px;height:65px;top:29%;left:30%}.fx-kind-fire .film-projectile>i:nth-child(3){width:80px;height:80px;top:61%;left:36%}.fx-kind-ice .film-projectile>i{width:65px;height:210px;clip-path:polygon(50% 0,100% 80%,50% 100%,0 80%);background:linear-gradient(90deg,#4bb9e2,#e2ffff,#75d9f6);top:31%;left:43%;box-shadow:none}.fx-kind-holy .film-projectile>i{height:540px;width:30px;top:0;left:65%;background:linear-gradient(90deg,transparent,#fff9c6,white,#fff9c6,transparent);transform:none!important}.fx-kind-holy .film-projectile>i:nth-child(2){left:45%;height:432px;top:15%}.fx-kind-holy .film-projectile>i:nth-child(3){left:80%;height:432px;top:15%}.fx-kind-shadow .film-projectile>i{height:120px;width:120px;background:#10051e;border:3px solid #bd7dff;box-shadow:0 0 35px #7e32bc;left:50%;top:38%}.fx-kind-nature .film-projectile>i{height:396px;width:22px;top:25%;left:55%;background:linear-gradient(90deg,#1c6244,#b4ffb2,#277d47);transform:rotate(15deg);border-radius:45%}.fx-kind-nature .film-projectile>i:nth-child(2){left:65%;transform:rotate(-20deg)}.fx-kind-nature .film-projectile>i:nth-child(3){left:75%;transform:rotate(30deg)}.fx-kind-storm .film-projectile>i{height:504px;width:65px;left:65%;top:5%;clip-path:polygon(50% 0,100% 0,60% 39%,95% 38%,0 100%,35% 53%,0 54%);background:white;border-radius:0;box-shadow:none}.fx-kind-portal .film-projectile>i{width:288px;height:396px;left:55%;top:15%;border-radius:50%;border:12px solid #bda2ff;background:#050912;box-shadow:0 0 40px #a47eff;transform:none!important}.fx-kind-portal .film-projectile>i:not(:first-child){display:none}.film-support .film-body{animation-name:support-rise!important}.film-support .film-projectile{opacity:0!important}.film-support[data-phase=strike] .film-magic-circle{opacity:1}.film-support[data-phase=strike] .film-particles{opacity:1}.skill-film[data-phase=strike] .film-monster{animation:monster-lunge calc(.62s*var(--tempo)) ease-out both}.skill-film[data-phase=windup] .film-monster{transform:translateX(-64px) scale(.93,1.04)}
.battle{background:#020305;grid-template-rows:84px minmax(0,1fr) 106px}.battle-top{padding:9px 14px;gap:8px}.duel{padding:0 12px;gap:6px}.fighter-panel{border-radius:0;border:1px solid #7e9da6}.battle-top .meter{height:9px;border-radius:0}.battle-top .meter>i{background:linear-gradient(0deg,#ff8240,#ffc26a)}.battle-top .meter.mp>i{background:linear-gradient(0deg,#9085e5,#bdacff)}.turn-arrow{font-size:0}.turn-arrow:after{content:'▶▶▶';font-size:22px;color:#ff9d77;text-shadow:0 0 4px #f84}.battle-bottom{background:#020305;gap:12px;padding:11px 15px}.battle-message{background:#f8f7f2;color:#101823;border:2px solid #bac2cb;border-radius:8px;padding:10px 14px;max-width:430px;min-width:250px;font-size:13px;min-height:69px}.battle-message .gold{color:#71453a;font-weight:700}.battle-commands button{background:transparent;border:1px solid #ffffff3b;padding:9px 11px}.damage-number{font:bold 40px/1 Arial,sans-serif;top:39%;color:#fff;-webkit-text-stroke:1.5px #101010;text-shadow:2px 3px 0 #141414;animation:reference-damage 1.65s ease-out forwards}.damage-number small{font-size:10px;color:#fff;text-shadow:1px 1px #000;margin-top:6px}.hit{animation:reference-hit .5s steps(1)!important}.hit .fighter-figure{animation:victim-flash .5s steps(1)!important}.impact-star{position:absolute;width:72px;height:72px;left:calc(50% - 36px);top:calc(39% - 36px);z-index:9;background:#fff59a;clip-path:polygon(50% 0,61% 30%,90% 8%,76% 40%,100% 50%,73% 60%,91% 91%,60% 73%,50% 100%,39% 72%,8% 91%,26% 59%,0 50%,28% 39%,9% 9%,40% 28%);animation:star-impact .45s ease-out both;filter:drop-shadow(0 0 10px #ffb135)}.battle .meter>i{transition:width 1.15s linear}.battle .panel-label{font-size:9px;background:#0009}.scene-wipe{position:fixed;inset:0;background:#000;z-index:75;pointer-events:none;clip-path:circle(0 at 50% 50%);animation:encounter-wipe .65s ease-in-out forwards}
@keyframes cube-tumble{0%{transform:rotateX(0) rotateY(0) rotateZ(0)}100%{transform:rotateX(360deg) rotateY(720deg) rotateZ(90deg)}}@keyframes die-hover{50%{transform:translateY(-8px)}}@keyframes flame-die{to{transform:scale(1.07,.93);filter:brightness(1.25)}}@keyframes count-pop{from{transform:scale(1.18)}to{transform:scale(1)}}@keyframes traveler-bob{50%{transform:translateY(-6px)}}@keyframes film-lines{to{transform:translateX(-140px) rotate(-8deg)}}@keyframes face-arrive{from{transform:translateX(20%) scale(.9);opacity:0}to{transform:translateX(-7%) scale(1);opacity:1}}@keyframes body-charge{from{transform:translateX(0) scale(1)}to{transform:translateX(-89.6px) scale(1.07)}}@keyframes body-strike{0%{transform:translateX(-89.6px) scale(1.05)}40%{transform:translateX(128px) scale(1.12)}100%{transform:translateX(166.4px) scale(1.08)}}@keyframes monster-lunge{0%{transform:translateX(-89.6px) scale(.9,1.08)}45%{transform:translateX(153.6px) scale(1.16,.94)}100%{transform:translateX(179.2px) scale(1.08)}}@keyframes support-rise{from{transform:translateY(36px)}to{transform:translateY(-14.4px)}}@keyframes projectile-go{from{transform:translateX(-20%);opacity:0}25%{opacity:1}to{transform:translateX(32%);opacity:0}}@keyframes particle-blast{from{transform:translate(0,0) scale(.4);opacity:0}25%{opacity:1}to{transform:rotate(var(--turn)) translateX(100px) scale(.2);opacity:0}}@keyframes circle-turn{to{transform:rotateX(64deg) rotateZ(360deg)}}@keyframes slash-cut{from{transform:translateX(-30%) scaleX(.2);opacity:0}30%{opacity:1}to{transform:translateX(20%) scaleX(1.4);opacity:0}}@keyframes reference-damage{0%{opacity:0;transform:translate(-50%,0)}12%{opacity:1;transform:translate(-50%,-55%)}25%{transform:translate(-50%,-45%)}85%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-50%,-65%)}}@keyframes reference-hit{10%,40%{transform:translateX(-5px)}25%,55%{transform:translateX(5px)}100%{transform:translateX(0)}}@keyframes victim-flash{0%,40%{filter:brightness(0) invert(1)}20%,60%,100%{filter:none}}@keyframes star-impact{from{transform:scale(.2) rotate(-20deg);opacity:0}20%{opacity:1}to{transform:scale(1.3) rotate(35deg);opacity:0}}@keyframes encounter-wipe{0%{clip-path:circle(0 at 50% 50%)}55%{clip-path:circle(100% at 50% 50%)}100%{clip-path:circle(0 at 50% 50%)}}


.showcase-body{height:150px;width:110px}.turn-arrow.enemy-direction:after{content:'◀◀◀'}
@media(prefers-reduced-motion:reduce){.film-speedlines{animation-duration:1.8s}.world-character.walking{animation:none!important}.hit{animation:none!important}.numeric-die.is-rolling .dice-cube{animation-duration:1.4s}}
.film-body{width:460.8px;left:calc(50% - 230.4px)}

.atlas-film{background:#090f23!important}.atlas-action{position:absolute;inset:0;margin:auto;width:min(648px,1024px);height:min(648px,1024px);background-repeat:no-repeat;background-position:0 0}.atlas-film .film-name{z-index:3;bottom:12px;top:auto;pointer-events:none}.atlas-film .film-name h2{font-size:clamp(18px,38.4px,34px)}

.basic-preview-art{width:180px;height:180px;max-width:100%;margin:auto;background-size:400% 400%;background-position:0 0;background-repeat:no-repeat;border-radius:12px}