/* A kinetic graphic language: ink, frost, paper, diagonal cuts and staggered motion. */
:root{--paper:#f2f1e6;--acid:#b7f4d2;--night:#080f16;--hot:#f08474}h1,h2,h3,.brand{font-family:'Arial Black','Malgun Gothic','Apple SD Gothic Neo',sans-serif;font-weight:900}button{transition:transform .18s cubic-bezier(.2,.8,.2,1),background-color .18s,border-color .18s,box-shadow .18s}button:focus-visible{outline:3px solid #ffdf87;outline-offset:5px}.header{background:#080f16;border-bottom:2px solid #b7f4d260}.brand{letter-spacing:-1px;font-size:21px;transform:skew(-5deg)}.brand small{transform:skew(5deg);letter-spacing:3px;font-size:7px}.header-actions .small{position:relative;overflow:hidden;border:0;border-bottom:1px solid #b7f4d240}.header-actions .small:before{content:'';position:absolute;inset:0;background:#b7f4d21a;transform:translateX(-110%) skew(-15deg);transition:transform .22s;pointer-events:none}.header-actions .small:hover:before{transform:translateX(0) skew(-15deg)}.header-actions .small:hover{transform:translateY(-3px) rotate(-2deg);background:#183b35}.title-screen .scene-bg{opacity:0}.title-screen .layout{background:#080f16}.title-stage{position:relative;isolation:isolate;min-height:calc(100svh - 76px);padding:5vh max(6vw,26px) 30px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:center;max-width:1800px;margin:auto}.title-grid{position:absolute;inset:0;z-index:-3;background:radial-gradient(#b3edd128 .8px,transparent .9px);background-size:12px 12px;mask-image:linear-gradient(110deg,transparent,#000 80%)}.title-backword{position:absolute;left:43%;top:3%;font:900 clamp(110px,18vw,280px)/.82 'Arial Black',Impact,sans-serif;letter-spacing:-.1em;color:transparent;-webkit-text-stroke:1px #c5f3de24;transform:rotate(-9deg);z-index:-2;pointer-events:none}.title-stage:after{content:'';position:absolute;left:64%;top:-30%;width:230px;height:150%;background:#b7f4d2;transform:rotate(30deg);z-index:-2}.title-copy{position:relative;z-index:3;max-width:640px;padding-bottom:35px}.title-kicker{display:flex;align-items:center;gap:14px;margin-bottom:25px;font:9px monospace;letter-spacing:1px}.title-kicker b{color:#09151b;background:#d3f6df;padding:7px 10px;transform:rotate(-3deg)}.title-kicker span{color:#a1b9b3}.title-logo{margin:0 0 26px;line-height:.99;letter-spacing:-.075em;font-size:clamp(65px,8.1vw,122px);width:max-content;position:relative;transform:rotate(-6deg)}.title-word{display:block;width:max-content;position:relative;font-style:italic}.title-word.first{color:var(--paper);text-shadow:5px 5px 0 #080f16;z-index:1}.title-word.second{color:#080f16;background:var(--acid);padding:0 .23em .1em .08em;margin-left:.4em;box-shadow:9px 9px 0 var(--paper);clip-path:polygon(3% 0,100% 0,95% 100%,0 100%)}.logo-star{display:inline-block;font-size:.7em;vertical-align:top;margin-left:.08em;animation:emblem-turn 12s steps(4,end) infinite}.title-logo small{display:block;font:900 clamp(15px,2vw,28px)/1 sans-serif;letter-spacing:.35em;color:var(--paper);margin:16px 0 0 1.8em;font-style:italic}.title-subtitle{font-size:13px;color:#cad8d3;letter-spacing:.12em;line-height:1.7;margin:38px 0 25px}.title-menu{display:flex;flex-direction:column;gap:9px;max-width:400px;transform:rotate(-3deg);margin-left:6px}.title-menu button{display:flex;align-items:center;gap:13px;padding:13px 20px 13px 16px;border:0;border-left:3px solid var(--acid);background:#12272b;color:var(--paper);text-align:left;position:relative;min-height:57px;isolation:isolate;transition:transform .2s,background-color .2s,color .2s}.title-menu button:before{content:'';position:absolute;inset:0;background:var(--paper);clip-path:polygon(0 0,100% 0,94% 100%,0 100%);z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .22s cubic-bezier(.2,.8,.2,1)}.title-menu button:hover:before,.title-menu button:focus-visible:before{transform:scaleX(1)}.title-menu button:hover,.title-menu button:focus-visible{transform:translateX(12px) rotate(1deg);color:#102124}.title-menu button>span{font:italic 13px monospace;opacity:.6}.title-menu strong{font-size:21px;letter-spacing:-.6px;white-space:nowrap}.title-menu small{font:8px monospace;letter-spacing:1px;margin-left:auto;max-width:65px}.title-menu b{font-size:22px}.title-menu .title-start{background:var(--acid);color:#081b20;border-left:5px solid var(--paper);box-shadow:7px 7px 0 #334c47}.title-visual{position:absolute;width:55%;aspect-ratio:1.1;right:0;top:3%;z-index:1;pointer-events:none}.title-disc{position:absolute;width:79%;height:79%;left:6%;top:10%;border:2px solid #f2f1e6;outline:13px solid #080f16;border-radius:50%;background:#080f16;box-shadow:0 0 0 15px #f2f1e660}.title-disc:before{content:'';position:absolute;inset:15px;border:1px dashed #b7f4d27a;border-radius:50%;animation:disc-turn 35s linear infinite}.title-skill{position:absolute;inset:7% -2% 2% -2%;background:url('assets/cards/lohen-skills.webp') 0 0/400% 300%;mix-blend-mode:screen;transform:rotate(-9deg);animation:hero-drift 6s ease-in-out infinite}.title-slash{position:absolute;height:8%;background:var(--paper);width:103%;left:-5%;top:51%;transform:rotate(-25deg);z-index:-1;clip-path:polygon(15% 0,100% 0,82% 100%,0 100%)}.title-slash.slash-two{height:2%;top:62%;background:#102b28;transform:rotate(-25deg)}.title-signature{position:absolute;right:6%;top:5%;font:900 italic clamp(40px,7.4vw,110px)/1 sans-serif;letter-spacing:-.08em;color:#080f16;transform:rotate(6deg);text-shadow:2px 2px var(--paper),-1px -1px var(--paper)}.title-character{position:absolute;bottom:0;left:22%;display:flex;align-items:center;gap:14px;background:var(--paper);color:#0a2022;padding:9px 18px 8px 8px;transform:rotate(-5deg);box-shadow:8px 8px 0 #142a2c;max-width:390px}.title-character img{width:85px;height:auto;image-rendering:pixelated}.title-character small{font:7px monospace;letter-spacing:2px}.title-character b{font-size:28px;display:block;letter-spacing:-1px;margin:3px 0}.title-character span{font-size:9px;display:block}.title-bottom{position:relative;z-index:3;grid-column:1/-1;display:flex;align-items:center;gap:28px;border-top:1px solid #c4e4d13b;padding-top:22px;margin-top:24px;max-width:100%;color:#c3d4ce}.title-bottom>div{display:flex;gap:10px;align-items:center}.title-bottom strong{font:900 italic 36px sans-serif;letter-spacing:-3px;color:var(--acid)}.title-bottom span{font-size:10px;max-width:40px;line-height:1.5}.title-bottom>p{margin-left:auto;text-align:right;font-size:11px;line-height:1.8}.title-bottom small{color:#74948b;font-size:9px}.title-ribbon{position:absolute;right:-25%;bottom:19%;width:92%;transform:rotate(-32deg);background:#080f16;color:#b7f4d2;border-block:1px solid #b7f4d2;overflow:hidden;z-index:0;pointer-events:none}.title-ribbon>span{display:block;width:max-content;white-space:nowrap;font:900 italic 15px/2.2 sans-serif;letter-spacing:6px;animation:ribbon-flow 22s linear infinite}
/* Skill illustrations share one 247 KB image atlas. */
.card{overflow:visible;border:1px solid #f2f1e630!important;border-top:5px solid var(--role)!important;border-radius:0!important;background:#0b1520!important;box-shadow:5px 6px 0 #03090e80!important;isolation:isolate}.card:after{content:'';position:absolute;inset:-1px;pointer-events:none;border-bottom:3px solid var(--role);clip-path:polygon(0 82%,100% 75%,100% 100%,0 100%);opacity:.5}.card .role-badge{font-size:9px;letter-spacing:1px;padding:1px 3px 5px;height:20px}.card .cost{z-index:2;border-radius:0;transform:rotate(-8deg);background:var(--role);color:#10202c;border:1px solid #eaf4e9;font:bold 19px sans-serif;box-shadow:3px 3px 0 #0b1520}.skill-art{display:block;position:relative;flex-shrink:0;width:calc(100% + 16px);height:95px;overflow:hidden;margin:1px -8px 4px;background:#000;clip-path:polygon(0 5%,100% 0,100% 92%,0 100%)}.skill-art-image{display:block;width:100%;height:100%;background-image:url('assets/cards/lohen-skills.webp');background-size:400% 300%;background-position:var(--art-x) var(--art-y);transition:transform .28s cubic-bezier(.16,1,.3,1)}.skill-art>i{position:absolute;right:5px;bottom:7px;font:italic 9px monospace;color:#fff8}.card:hover .skill-art-image,.card:focus-visible .skill-art-image{transform:scale(1.08) translateX(2px)}.card h3{font-weight:900;letter-spacing:-.5px}.card p{font-size:10px;color:#e4e9e6;line-height:1.5}.card .card-type{font-size:8px;letter-spacing:1px}.card:hover:not(:disabled){transform:translateY(-9px) rotate(-2deg)!important;box-shadow:7px 10px 0 #0008!important}.card.card-selected,.card.card-selected:hover:not(:disabled){transform:translateY(-13px) rotate(-3deg)!important;outline:2px solid #f5f0d3;outline-offset:3px}.combat-board .hand{height:226px;padding-top:17px;padding-bottom:10px;gap:12px}.combat-board .hand .card{height:199px;min-height:199px;padding:8px 9px}.combat-board .hand .skill-art{height:78px;margin-top:0}.combat-board .card h3{font-size:12px;line-height:1.25;margin:2px 0 4px;min-height:15px}.combat-board .card p{font-size:10px;line-height:1.35}.combat-board .card .card-type{font-size:8px;padding-top:3px}.combat-board .card .role-badge{font-size:9px}.combat-board .combat-bottom{border-top:3px solid #d7f3dc;background:#080f16f2;clip-path:polygon(1.5% 0,100% 0,100% 100%,0 100%,0 8%)}.combat-board .combat-top h2{display:inline-block;background:#080f16;padding:8px 15px 8px 8px;color:var(--paper);transform:rotate(-2deg);font-size:20px;border-left:4px solid var(--acid)}.combat-board .combat-top .eyebrow{font-family:monospace;color:var(--paper)}.combat-board .turn-tag{transform:rotate(3deg);border-right:5px solid var(--paper)}.combat-board .combat-log{transform:rotate(-.6deg);font-family:monospace}.combat-board .energy{border-radius:0;transform:rotate(-8deg);font:900 italic 29px sans-serif;border:2px solid var(--paper);background:var(--acid)}.energy-group .energy-label{padding-left:3px}.combat-board .end-turn{transform:skew(-8deg);box-shadow:5px 5px 0 #c1edd53b;font-size:14px}.combat-board .end-turn:hover{transform:skew(-8deg) translate(3px,-3px);box-shadow:2px 8px 0 #c1edd53b}.intent{border-radius:0;background:#080f16!important;border-bottom:3px solid #ef9583!important;transform:rotate(3deg)}.intent.defense{border-color:#91c8f1!important}.unit-name{font-weight:900;letter-spacing:-.2px;background:#080f16d9;padding:3px 6px;display:inline-block}.enemy.selected{border-radius:0;border-style:dashed}.bar{height:7px;border:0;transform:skew(-12deg)}.bar>i{background:var(--hot)}.status{border-radius:0;background:#bcebd7;color:#163b33;font-size:9px}.drag-ghost .card{height:225px!important;min-height:225px!important}.drag-ghost .skill-art{height:93px}.drag-ghost .card h3{margin:5px 0}.drag-ghost .card p{font-size:10px}.reward-cards .card{width:205px;min-height:300px;padding:13px 14px}.reward-cards .skill-art{height:130px}.reward-cards .card:nth-child(1){rotate:-4deg}.reward-cards .card:nth-child(3){rotate:4deg}.reward-cards .card h3{font-size:17px;margin:7px 0}.reward-cards .card p{font-size:12px}.deck-grid .card{min-height:245px}.shop-item .card{height:265px}.shop-item .skill-art{height:100px}
/* Screen-level layout and interaction motion. */
.stage-trail span{transform:skew(-6deg);transition:background .2s,translate .2s}.stage-trail span.active{box-shadow:4px 4px 0 #f3f0dc;translate:0 -4px}.page-title h1{font-size:38px;transform:rotate(-2deg);color:var(--paper);text-shadow:3px 3px #08161c}.expedition .panel{clip-path:polygon(0 0,94% 0,100% 5%,100% 100%,6% 100%,0 95%);background:var(--acid);border:0}.expedition .route-panel{border:0;border-top:6px solid var(--paper);background:#071b1bf0;box-shadow:8px 8px 0 #03101580}.route-heading{font-weight:900}.map-stop.current{transition:scale .18s}.map-stop.current:hover{scale:1.1}.map-stop.current>span{animation:route-beacon 2.8s ease-in-out infinite}.content-center>h1{font-size:clamp(30px,4.5vw,60px);letter-spacing:-2px;display:inline-block;background:var(--paper);color:#10252a;padding:7px 22px;transform:rotate(-3deg);box-shadow:8px 8px 0 #8ed8bd;margin:24px 0 30px}.content-center>.eyebrow{color:var(--acid);font:11px monospace;letter-spacing:4px}.content-center>p{color:#cedbd4}.choice{border:0;border-left:5px solid var(--acid);border-bottom:2px solid #a1caba50;background:#112d2de8;transition:transform .2s,background .2s,box-shadow .2s}.choice:hover{transform:translateY(-6px) rotate(-2deg)!important;background:#25504a;box-shadow:7px 7px 0 #b7f4d230}.choice h3{letter-spacing:-.8px;font-size:23px}.choice>span{font-size:35px;color:var(--acid)}.choice-grid .primary{transform:skew(-5deg);box-shadow:5px 5px 0 #e1eee52a}.stage-supplies span{transform:rotate(-2deg);border:0;background:var(--acid);color:#12362e;box-shadow:4px 4px 0 #ffffff36}.modal-shade{background:#030a13de;backdrop-filter:none}.modal{border:0;border-top:7px solid var(--acid);background:#0c1c25;box-shadow:10px 10px 0 #b7f4d25c!important;padding:28px 32px}.modal-head{border-bottom:2px solid #bdddc83b;padding-bottom:18px}.modal-head h2{font-size:30px;letter-spacing:-1px;transform:rotate(-3deg);background:var(--paper);color:#14282b;padding:5px 13px}.modal-head button{font-size:20px;border:0;color:var(--acid)}.rules section{border:0;border-left:3px solid #b7f4d2;background:#123230}.rules h3{color:var(--paper);letter-spacing:-.5px}.cast-content{border:0;border-left:8px solid #0d2928;transform:skew(-10deg) rotate(-4deg);box-shadow:9px 9px 0 #070f1b!important}.cast-content strong{font-weight:900;letter-spacing:-1px}.cast-content small{letter-spacing:3px}.screen-cut{position:fixed;inset:-20% -30%;z-index:250;pointer-events:none;display:flex;flex-direction:column;justify-content:center;transform:rotate(-13deg)}.screen-cut>i{height:26%;background:var(--acid);animation:screen-slash .6s cubic-bezier(.7,0,.2,1) both;transform:translateX(-130%);font-style:normal}.screen-cut>i:nth-child(2){background:#080f16;height:34%;animation-delay:.045s;display:flex;align-items:center;justify-content:center;color:var(--paper);border-block:4px solid var(--paper)}.screen-cut>i:nth-child(3){animation-delay:.08s;background:var(--paper)}.screen-cut b{font:900 italic clamp(30px,7vw,110px) sans-serif;letter-spacing:-.04em;white-space:nowrap}.turn-splash{position:fixed;left:50%;top:30%;z-index:88;pointer-events:none;background:var(--paper);color:#101d27;padding:14px 35px;border-left:9px solid var(--acid);box-shadow:10px 10px 0 #0a1c2be6;transform:translateX(-50%) rotate(-7deg);animation:turn-strike .9s both}.turn-splash small{font:9px monospace;letter-spacing:6px}.turn-splash strong{font:900 italic clamp(28px,4vw,60px) sans-serif;display:block;white-space:nowrap;letter-spacing:-3px}.turn-splash span{font:italic 55px monospace;color:#397d65;margin-left:16px}#toast{border-radius:0;transform:translateX(-50%) rotate(-2deg);background:var(--paper);border-left:6px solid var(--acid);box-shadow:5px 5px #07121b}.low-effects .title-disc:before,.low-effects .title-ribbon>span,.low-effects .logo-star{animation:none}.low-effects .title-skill{animation-duration:8s}.low-effects .map-stop.current>span{animation:none}
@keyframes screen-slash{0%{transform:translateX(-130%)}40%,51%{transform:translateX(0)}100%{transform:translateX(130%)}}@keyframes turn-strike{0%{opacity:0;translate:-110px 20px}18%,75%{opacity:1;translate:0 0}100%{opacity:0;translate:110px -20px}}@keyframes hero-drift{50%{translate:0 -9px;rotate:1deg}}@keyframes disc-turn{to{rotate:360deg}}@keyframes emblem-turn{to{rotate:360deg}}@keyframes ribbon-flow{to{translate:-50% 0}}@keyframes route-beacon{50%{box-shadow:0 0 0 9px #b7f4d208}}
@media(min-width:1500px){.title-stage{padding-top:7vh}.title-visual{right:4%;max-width:820px}.title-copy{padding-bottom:60px}.title-menu{max-width:440px}.title-menu button{min-height:67px}.title-menu strong{font-size:25px}}
@media(max-width:950px){.title-stage{padding:45px 6% 25px;min-height:820px}.title-logo{font-size:85px}.title-visual{width:61%;right:-8%;top:11%;opacity:.9}.title-copy{max-width:420px}.title-menu{max-width:340px}.title-menu strong{font-size:19px}.title-menu small{font-size:7px}.title-character{left:30%;bottom:-10%;padding:8px;max-width:240px}.title-character img{width:64px}.title-character span{font-size:8px}.title-character small{font-size:6px;letter-spacing:.7px}.title-character b{font-size:23px}.title-bottom{gap:20px;margin-top:80px}.title-bottom>p{max-width:230px}.title-stage:after{left:70%;width:180px}.title-ribbon{bottom:27%}.title-kicker{flex-direction:column;align-items:start;gap:10px}}
@media(max-width:960px){.title-stage{min-height:calc(100svh - 65px);padding:35px 23px 22px;display:block}.title-copy{padding-bottom:0;max-width:none}.title-kicker{margin-bottom:23px;gap:8px;font-size:8px}.title-logo{font-size:clamp(64px,17vw,94px);margin-bottom:28px}.title-logo small{font-size:16px}.title-logo .second{margin-left:.22em}.title-subtitle{font-size:10px;max-width:225px;margin:28px 0 24px;letter-spacing:.04em}.title-visual{width:75%;right:-22%;top:6%;opacity:.45;z-index:0}.title-character{display:none}.title-disc{outline-width:5px}.title-signature{font-size:44px;right:15%;top:0}.title-stage:after{left:79%;width:85px;top:-15%;height:110%;opacity:.55}.title-backword{top:5%;left:25%;font-size:28vw}.title-menu{max-width:340px;margin-left:0;gap:10px}.title-menu button{min-height:53px;padding:11px 12px}.title-menu strong{font-size:19px}.title-menu small{font-size:7px;max-width:60px}.title-menu button:hover{transform:translateX(5px)}.title-bottom{position:relative;margin-top:35px;flex-wrap:wrap;gap:17px;padding-top:17px}.title-bottom strong{font-size:29px}.title-bottom span{font-size:9px}.title-bottom>p{margin:0;width:100%;max-width:none;text-align:left;font-size:10px}.title-bottom small{font-size:8px}.title-ribbon{display:none}.title-visual .title-skill{animation:none}.combat-board .hand{height:212px;gap:9px}.combat-board .hand .card{height:188px;min-height:188px;width:clamp(118px,33vw,145px);min-width:118px;padding:7px}.combat-board .hand .skill-art{height:70px}.combat-board .card h3{font-size:11px;line-height:1.3}.combat-board .card p{font-size:9px}.combat-board .combat-top h2{font-size:13px;padding:6px}.combat-board .combat-log{transform:none}.combat-board .card .cost{font-size:17px;width:22px;height:22px;left:4px;top:3px}.combat-board .card .role-badge{font-size:8px}.combat-board .energy{font-size:24px}.combat-board .combat-bottom{clip-path:none}.reward-cards{gap:13px}.reward-cards .card{width:154px;min-height:260px;padding:10px}.reward-cards .skill-art{height:106px}.reward-cards .card h3{font-size:14px}.reward-cards .card p{font-size:11px}.deck-grid .card{min-height:235px}.page-title h1{font-size:26px}.modal{padding:20px 14px;box-shadow:5px 5px 0 #b7f4d25c!important}.modal-head h2{font-size:24px}.content-center>h1{letter-spacing:-1px;padding:8px 13px;font-size:29px;box-shadow:5px 5px 0 #8ed8bd}.turn-splash{padding:12px 20px}.turn-splash strong{font-size:31px;letter-spacing:-1px}.turn-splash span{font-size:34px;margin-left:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.screen-cut,.turn-splash{display:none}.title-menu button:hover,.card:hover:not(:disabled){transform:none!important}}
/* Give the skill pose most of the card face rather than compressing it into an icon strip. */
.combat-board .hand .skill-art{height:104px}.combat-board .card .card-type{padding-top:2px}.combat-board .card h3{margin:2px 0 3px}
@media(max-width:960px){.combat-board .hand .skill-art{height:91px}.combat-board .card p{line-height:1.3}}
.combat-board .end-turn:hover:not(:disabled){background:#e3ffeb;color:#102e25}