@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700;800;900&family=Press+Start+2P&display=swap');

:root{font-family:'Noto Sans SC',sans-serif;color:#ede3d1;background:#171514;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}html{min-width:320px}body{margin:0}button{font:inherit}button:focus-visible{outline:3px solid #f0d67f;outline-offset:3px}button:disabled{cursor:not-allowed}::selection{background:#ae463d;color:white}
.page-shell{min-height:100vh;background:radial-gradient(circle at 50% -170px,#432824 0,transparent 580px),linear-gradient(90deg,#171514,#201918 50%,#171514);position:relative;overflow:hidden}
.page-shell:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.16;background-image:linear-gradient(#fff2 1px,transparent 1px),linear-gradient(90deg,#fff2 1px,transparent 1px);background-size:4px 4px;mask-image:linear-gradient(to bottom,#000,transparent 85%)}
.site-header{height:74px;border-bottom:1px solid #654c3c;display:flex;align-items:center;justify-content:space-between;padding:0 max(28px,calc((100vw - 1280px)/2));background:#161514d9;position:relative;z-index:2}.brand{display:flex;align-items:center;gap:12px}.brand-emblem{height:41px;width:41px;display:grid;place-items:center;color:#f3da9c;background:#9e3a31;border:3px solid #c76748;box-shadow:3px 3px 0 #070707;font-weight:900;font-size:22px;line-height:1}.brand strong{display:block;font-size:21px;font-weight:900;letter-spacing:2px;line-height:1.1;color:#f7e8cf}.brand small{font-family:'Press Start 2P',monospace;color:#c8875a;font-size:6px;letter-spacing:1px}.header-right{display:flex;align-items:center;gap:22px}.header-tag{font-size:12px;color:#c8b6a0;font-weight:700;letter-spacing:1px}.header-tag i,.arena-status i{display:inline-block;width:7px;height:7px;background:#85b891;margin-right:7px;box-shadow:0 0 9px #86c89b}.header-button,.sound-button{background:none;border:0;color:#e8d7be;cursor:pointer;font-weight:700;font-size:12px;letter-spacing:1px}.header-button span{color:#c79b68}.header-button:hover,.sound-button:hover{color:#f6bd6a}.sound-button{font-size:22px;width:28px}
.game-wrap{max-width:1280px;margin:0 auto;padding:36px 28px 22px;position:relative;z-index:1}.topline{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:29px}.eyebrow{font-family:'Press Start 2P',monospace;font-size:8px;letter-spacing:1.3px;color:#c67d52}.tiny-star{color:#edc787;font-family:sans-serif;font-size:12px}.topline h1{font-size:clamp(28px,3.3vw,46px);line-height:1.2;margin:12px 0 8px;color:#f4e7d3;letter-spacing:3px;font-weight:900;text-shadow:3px 3px 0 #422922}.topline h1 span{color:#d96043}.topline p{font-size:12px;color:#a89789;margin:0;letter-spacing:2px}.round-stamp{height:76px;width:92px;border:1px solid #80533c;background:#281d1a;box-shadow:inset 0 0 0 4px #201715;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(3deg);margin-right:3px}.round-stamp span{font-family:'Press Start 2P',monospace;color:#bc8964;font-size:7px}.round-stamp strong{font-family:'Press Start 2P',monospace;color:#f7db9c;font-size:28px;margin-top:9px}
.arena-frame{background:#28211e;padding:7px;border:2px solid #8f5f41;box-shadow:0 0 0 4px #100e0d,0 12px 30px #0007}.arena-topbar,.arena-footer{height:29px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:10px;color:#c49c79;font-weight:800;letter-spacing:1px;background:#2d211b}.arena-status{color:#e6d5ba}.arena-scene{height:280px;position:relative;overflow:hidden;background:linear-gradient(180deg,#342936 0%,#665054 46%,#c67c55 79%,#d79059 100%);isolation:isolate}.arena-scene:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0 3px,#281d2a12 3px 4px);pointer-events:none;z-index:10}.sky-stars i{position:absolute;background:#e9b98e;width:4px;height:4px;box-shadow:0 0 10px #eebf91;z-index:1}.sky-stars i:nth-child(1){top:24px;left:10%}.sky-stars i:nth-child(2){top:55px;left:28%}.sky-stars i:nth-child(3){top:16px;left:42%}.sky-stars i:nth-child(4){top:71px;left:62%}.sky-stars i:nth-child(5){top:32px;left:80%}.sky-stars i:nth-child(6){top:84px;left:91%}.moon{position:absolute;width:118px;height:118px;background:#e6bd91;box-shadow:0 0 0 12px #e8b88c2a,0 0 60px 25px #ebb58467;left:calc(50% - 59px);top:10px;border-radius:50%}.mountain{position:absolute;bottom:47px;width:130%;left:-15%;height:150px;clip-path:polygon(0 80%,11% 57%,16% 66%,27% 28%,36% 73%,42% 60%,51% 32%,57% 52%,64% 19%,76% 77%,87% 42%,100% 75%,100% 100%,0 100%)}.mountain-back{background:#6c5358;opacity:.8;transform:translateY(-11px)}.mountain-front{background:#4a414b;clip-path:polygon(0 83%,9% 60%,17% 69%,28% 40%,35% 74%,45% 58%,50% 80%,58% 42%,66% 75%,76% 58%,84% 65%,95% 32%,100% 48%,100% 100%,0 100%);transform:translateY(30px)}.village{position:absolute;bottom:43px;z-index:2;display:flex;gap:5px;align-items:end}.village-left{left:5%}.village-right{right:6%;transform:scaleX(-1)}.village i{display:block;width:54px;height:40px;background:#322f39;clip-path:polygon(0 25%,50% 0,100% 25%,100% 35%,88% 35%,88% 100%,12% 100%,12% 35%,0 35%);box-shadow:inset 0 -14px #292c35}.village i:nth-child(2){width:44px;height:62px}.village i:nth-child(3){width:72px;height:31px}.scene-ground{position:absolute;bottom:0;width:100%;height:64px;background:repeating-linear-gradient(90deg,#443e40 0 72px,#514548 72px 74px),linear-gradient(#4e4346,#342f32);border-top:8px solid #655257;z-index:3}.scene-ground:before{content:'';position:absolute;top:8px;left:0;width:100%;height:2px;background:#917468;opacity:.5}.ground-line{position:absolute;bottom:22px;width:100%;height:4px;background:repeating-linear-gradient(90deg,#9c7663 0 25px,transparent 25px 44px);z-index:4;opacity:.55}.fighter{position:absolute;bottom:31px;z-index:5;display:flex;align-items:center;flex-direction:column;width:160px}.fighter-left{left:21%}.fighter-right{right:21%}.fighter-sprite{width:118px;height:142px;filter:drop-shadow(5px 5px 0 #1c1c27);z-index:2;position:relative;animation:bob 2s steps(2,end) infinite}.fighter-right .fighter-sprite{transform:scaleX(-1);animation:bob-right 2.2s steps(2,end) infinite}.fighter-glow{position:absolute;bottom:37px;width:120px;height:100px;background:#e5a72a44;filter:blur(24px);opacity:0;transition:opacity .2s}.fighter-right .fighter-glow{background:#dd454b66}.fighter-active .fighter-glow{opacity:1}.fighter-shadow{position:absolute;bottom:20px;width:112px;height:15px;background:#1d222caa;filter:blur(5px);border-radius:50%}.fighter-label{z-index:3;background:#282029;border:1px solid #bd8a68;color:#f7e1c8;font-size:11px;font-weight:900;padding:2px 13px;letter-spacing:2px;box-shadow:3px 3px 0 #201a1e}.fighter-active .fighter-label{border-color:#f8d48b;color:#ffdfa2}.versus-mark{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);z-index:6;text-align:center;color:#f4dabb;text-shadow:3px 3px 0 #752d33,-3px -3px 0 #752d33;font-weight:900}.versus-mark span{display:block;font-size:42px;line-height:1}.versus-mark small{font-family:'Press Start 2P',monospace;font-size:9px;color:#f2ab7b}.arena-footer{height:24px;font-size:9px;color:#927763}.victory-banner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:12;background:#211a1bea;border:3px solid #e0aa63;box-shadow:0 0 0 5px #231514,0 0 38px #f4bb7044;padding:12px 50px;text-align:center;min-width:270px}.victory-banner span,.victory-banner small{display:block;color:#d69556;font-size:11px;letter-spacing:4px;font-weight:900}.victory-banner strong{display:block;font-size:34px;color:#ffdc9a;letter-spacing:7px;line-height:1.4}.victory-banner small{font-family:'Press Start 2P',monospace;font-size:8px;letter-spacing:2px}
.dashboard{display:grid;grid-template-columns:minmax(280px,366px) 1fr;gap:18px;margin-top:22px}.left-column{display:flex;flex-direction:column;gap:12px}.player-card{background:#231f1d;border:1px solid #604739;padding:13px 16px 11px;position:relative;box-shadow:inset 0 0 0 3px #191716;transition:border-color .2s}.player-card.is-active{border-color:#ce9c5e;background:#2b231e}.player-card.is-active:before{content:'';position:absolute;left:-2px;top:12px;bottom:12px;width:3px;background:#eac17a;box-shadow:0 0 9px #eac17a}.player-card--1.is-active{border-color:#c66e65}.player-card--1.is-active:before{background:#e26c5a;box-shadow:0 0 9px #e26c5a}.player-top,.player-foot{display:flex;align-items:center;justify-content:space-between}.player-top{margin-bottom:9px}.player-ident{display:flex;align-items:center;gap:10px}.player-no{font-family:'Press Start 2P',monospace;font-size:8px;padding:7px 5px;background:#bd8042;color:#2b211e}.player-card--1 .player-no{background:#b75551;color:#ffe2d1}.player-name{font-size:17px;font-weight:900;color:#f5e2c7;letter-spacing:2px}.player-mark{font-size:10px;color:#9e8b7c;letter-spacing:1px}.stat-row{display:grid;grid-template-columns:43px 1fr 48px;align-items:center;gap:7px;margin:6px 0}.stat-label{color:#b49d86;font-size:10px;font-weight:800}.stat-track{height:10px;background:#433632;border:2px solid #6f5143;position:relative;overflow:hidden}.stat-fill{height:100%;display:block;transition:width .3s}.hp-fill{background:linear-gradient(90deg,#a6403c,#ea7154)}.chakra-fill{background:linear-gradient(90deg,#397b9f,#69bed5)}.stat-row strong{text-align:right;font-family:'Press Start 2P',monospace;font-size:11px;color:#f4dcb7}.stat-row small{font-size:7px;color:#988574}.player-foot{margin-top:10px;border-top:1px solid #4c3a32;padding-top:7px;font-size:10px;color:#bca18b;font-weight:700}.player-foot b{color:#f4d29b}.battle-log{border:1px solid #574238;background:#211d1b;min-height:99px;padding:10px 14px}.panel-heading{font-size:10px;font-weight:900;letter-spacing:2px;color:#ce9b6b;border-bottom:1px solid #46362f;padding-bottom:6px}.panel-heading span{color:#cb5944}.log-items{max-height:80px;overflow:auto}.log-items p{font-size:10px;line-height:1.5;color:#b6a18f;margin:7px 0}.log-items p:first-child{color:#e8d0b2}
.turn-panel{border:1px solid #84604a;background:linear-gradient(145deg,#30251f,#211c1a 73%);box-shadow:inset 0 0 0 4px #211b18;min-width:0;padding:20px 25px 18px;display:flex;flex-direction:column}.turn-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid #684d3b}.turn-head h2{font-size:24px;letter-spacing:2px;margin:8px 0 0;color:#f4e2c7;font-weight:900}.turn-indicator{font-family:'Press Start 2P',monospace;font-size:10px;color:#e3ad70;vertical-align:3px}.turn-phase{border:1px solid #a76846;background:#4d3026;color:#f0b683;padding:5px 9px;font-size:10px;font-weight:900;letter-spacing:1px;white-space:nowrap}.dice-zone{padding-top:13px}.zone-title{display:flex;justify-content:space-between;align-items:center;gap:12px}.zone-title span{font-weight:900;font-size:12px;color:#e3c4a1;letter-spacing:1px}.zone-title small{font-size:10px;color:#a68b76}.dice-row{display:flex;justify-content:center;gap:20px;margin:9px 0 12px}.die{width:64px;height:64px;flex:none;border:3px solid #d6ae83;background:#f1ddbc;box-shadow:4px 4px 0 #8e5a45,inset -4px -4px 0 #cfb38c;display:grid;place-items:center;border-radius:5px;position:relative;transition:transform .15s,filter .15s}.die:disabled:not(.has-value){opacity:.6}.die.can-reroll:hover{transform:translateY(-5px) rotate(-4deg);filter:brightness(1.1);box-shadow:4px 9px 0 #8e5a45,inset -4px -4px 0 #cfb38c}.die-question{font-family:'Press Start 2P',monospace;font-size:30px;color:#ae947b;padding-top:4px}.pip-grid{display:grid;grid-template-columns:repeat(3,10px);grid-template-rows:repeat(3,10px);gap:4px}.pip-grid i.lit{width:9px;height:9px;background:#9f443c;box-shadow:1px 1px 0 #583331;border-radius:2px}.combo-line{display:flex;justify-content:center;align-items:center;gap:12px;min-height:24px;font-size:10px;color:#ad927d}.combo-badge{padding:4px 8px;background:#41342d;color:#c8aa8d;border:1px solid #725441;font-weight:900}.combo-badge.pair,.combo-badge.straight{background:#60422a;color:#f4cb7e;border-color:#b57946}.combo-badge.triple{background:#803c30;color:#ffdd97;border-color:#e6a45b;animation:pulse 1.3s infinite}.action-message{min-height:43px;display:flex;align-items:center;gap:11px;background:#211b19;border-left:3px solid #ad6645;padding:8px 12px;color:#e7d0b4;font-size:11px;line-height:1.5;margin-top:10px}.message-symbol{font-size:17px;color:#eab16b}.main-action{margin-top:auto;padding-top:14px}.primary-button{border:2px solid #f0bd73;color:#311d18;background:linear-gradient(#eec185,#d99c57);box-shadow:4px 4px 0 #783b2b,inset 0 2px #ffe1ac;cursor:pointer;font-weight:900;letter-spacing:2px;transition:transform .12s,box-shadow .12s,filter .12s}.primary-button:hover{transform:translateY(-2px);filter:brightness(1.09);box-shadow:4px 6px 0 #783b2b,inset 0 2px #ffe1ac}.primary-button:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #783b2b,inset 0 2px #ffe1ac}.roll-button{width:100%;height:42px;font-size:13px}.roll-button span{float:right;font-family:'Press Start 2P',monospace;font-size:7px;color:#6f402d;margin:5px 8px 0 0}.roll-button.is-rolling{animation:pulse .2s steps(2,end) infinite}.select-hint{text-align:center;color:#e1b779;font-weight:800;font-size:12px;letter-spacing:2px;padding:8px}.select-hint span{display:inline-block;animation:point 1s infinite}
.skills-section{margin-top:29px}.skills-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:12px}.skills-heading h2{font-size:23px;margin:7px 0 0;color:#efdec5;letter-spacing:2px}.skills-heading h2 span{font-size:15px;color:#d79d5e}.keyboard-hint{font-size:10px;color:#927f6e}.keyboard-hint b{display:inline-grid;place-items:center;height:21px;width:21px;margin-left:3px;border:1px solid #80624b;background:#2c2521;color:#d5bb98;font-family:'Press Start 2P',monospace;font-size:8px}.skills-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.skill-card{min-height:105px;display:grid;grid-template-columns:36px 1fr;grid-template-rows:1fr auto;gap:5px 9px;position:relative;text-align:left;background:#26211e;border:1px solid #5b4538;box-shadow:inset 0 0 0 3px #1c1917;color:#b6a18d;padding:12px;transition:transform .14s,border-color .14s,background .14s,box-shadow .14s}.skill-card.available{cursor:pointer;color:#f2dcc2;border-color:#a0714f}.skill-card.available:hover{transform:translateY(-4px);background:#342820;border-color:#e6ba78;box-shadow:inset 0 0 0 3px #231b18,0 5px 0 #5e3a2a}.skill-card:disabled{opacity:.55}.skill-number{position:absolute;top:9px;right:10px;color:#745d4c;font-family:'Press Start 2P',monospace;font-size:8px}.skill-icon{grid-row:1/3;width:34px;height:34px;display:grid;place-items:center;background:#885d32;border:2px solid #bb8449;color:#f7d59b;font-size:20px;line-height:1}.tone-red .skill-icon{background:#853d35;border-color:#c7654c;color:#ffbb87}.tone-blue .skill-icon{background:#365569;border-color:#6c9aab;color:#c4e4e7}.tone-green .skill-icon{background:#465f43;border-color:#819b65;color:#d2eab5}.skill-body{display:block;padding-right:7px}.skill-body strong{font-size:13px;display:block;letter-spacing:1px}.skill-body small{display:block;color:#a48d77;font-size:10px;margin-top:4px;white-space:nowrap}.skill-end{grid-column:2;display:flex;justify-content:space-between;align-items:end;gap:5px}.skill-cost{font-size:10px;color:#e2b170;font-weight:800}.skill-end b{font-size:10px;color:#eacfa9;white-space:nowrap}.site-footer{border-top:1px solid #40332d;display:flex;justify-content:space-between;margin-top:28px;padding-top:13px;font-size:10px;color:#73685f;letter-spacing:1px}.site-footer b{color:#bd734f}
.modal-backdrop{position:fixed;inset:0;background:#0b090bdc;display:grid;place-items:center;z-index:30;padding:20px;backdrop-filter:blur(5px)}.rules-modal{position:relative;width:min(680px,100%);border:2px solid #bf8454;background:#2b211d;box-shadow:0 0 0 7px #17120f,0 20px 80px #000b;padding:30px}.modal-close{position:absolute;right:19px;top:13px;border:0;background:none;color:#d9ae80;font-size:28px;cursor:pointer}.rules-modal h2{font-size:30px;letter-spacing:3px;margin:9px 0 21px;color:#f8dbad}.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.rules-grid>div{border-top:1px solid #70503b;padding-top:9px}.rule-step{font-family:'Press Start 2P',monospace;font-size:9px;color:#cf8757}.rules-grid h3{font-size:15px;color:#f0d1ab;margin:6px 0}.rules-grid p{font-size:11px;color:#bfa993;line-height:1.8;margin:0}.rules-go{width:100%;padding:10px;margin-top:23px}.rules-go span{float:right}
@keyframes bob{50%{transform:translateY(-3px)}}@keyframes bob-right{50%{transform:scaleX(-1) translateY(-3px)}}@keyframes pulse{50%{filter:brightness(1.2)}}@keyframes point{50%{transform:translateY(4px)}}
@media(max-width:950px){.game-wrap{padding:28px 18px}.site-header{padding:0 20px}.dashboard{grid-template-columns:270px 1fr}.turn-panel{padding:17px}.skills-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fighter-left{left:15%}.fighter-right{right:15%}}
@media(max-width:690px){.site-header{height:62px;padding:0 15px}.brand-emblem{width:35px;height:35px;font-size:19px}.brand strong{font-size:16px}.brand small{font-size:5px}.header-tag{display:none}.header-button{font-size:10px}.header-right{gap:8px}.game-wrap{padding:24px 13px}.topline{margin-bottom:20px}.topline h1{font-size:27px;letter-spacing:1px}.topline p{font-size:10px;letter-spacing:0}.round-stamp{width:65px;height:62px;flex:none;margin-left:8px}.round-stamp strong{font-size:18px}.round-stamp span{font-size:6px}.arena-topbar span:last-child,.arena-footer span:nth-child(2){display:none}.arena-scene{height:220px}.fighter{width:115px;bottom:22px}.fighter-left{left:8%}.fighter-right{right:8%}.fighter-sprite{width:90px;height:112px}.fighter-label{font-size:9px}.versus-mark span{font-size:30px}.moon{width:85px;height:85px;left:calc(50% - 42px)}.dashboard{grid-template-columns:1fr;margin-top:16px}.left-column{display:grid;grid-template-columns:1fr 1fr;gap:8px}.player-card{padding:10px}.player-mark{display:none}.player-name{font-size:14px}.stat-row{grid-template-columns:34px 1fr 35px;gap:3px}.stat-label{font-size:9px}.stat-row strong{font-size:8px}.stat-row small{font-size:6px}.player-foot{font-size:9px}.battle-log{display:none}.turn-panel{min-height:330px}.skills-heading h2{font-size:20px}.keyboard-hint{display:none}.skills-grid{gap:8px}.skill-card{min-height:100px;padding:9px;grid-template-columns:28px 1fr;gap:3px 6px}.skill-icon{width:26px;height:26px;font-size:16px}.skill-body strong{font-size:12px}.skill-body small{font-size:9px;white-space:normal}.skill-end b{font-size:9px}.site-footer span:last-child{display:none}.rules-modal{padding:22px}.rules-grid{gap:12px}.rules-grid p{font-size:10px}}
@media(max-width:380px){.topline h1{font-size:23px}.dice-row{gap:13px}.die{width:58px;height:58px}.skills-grid{grid-template-columns:1fr}.skill-card{min-height:68px;grid-template-columns:35px 1fr}.skill-body small{white-space:nowrap}.fighter-left{left:3%}.fighter-right{right:3%}}
@media(max-width:690px){.rules-modal{max-height:90vh;overflow:auto}.rules-grid{grid-template-columns:1fr;gap:13px}.rules-grid h3{margin:3px 0}.rules-grid p{line-height:1.5}}
.tone-purple .skill-icon{background:#59476c;border-color:#9c78b3;color:#ecd4fa}
.player-round-note{border-top:1px solid #49382f;color:#bfa383;font-size:9px;font-weight:700;letter-spacing:.3px;margin-top:8px;padding-top:7px;white-space:nowrap}
.skill-card.is-selected,.skill-card.is-selected:hover{border-color:#f0c076;background:#483222;box-shadow:inset 0 0 0 3px #2f221a,0 0 0 1px #f0c076;transform:none}
.skill-card.is-selected .skill-cost{color:#fbe4a8}.skill-card.is-selected .skill-icon{filter:brightness(1.22)}
.primary-button:disabled,.primary-button:disabled:hover{opacity:.45;cursor:not-allowed;filter:none;transform:none;box-shadow:4px 4px 0 #783b2b,inset 0 2px #ffe1ac}
.secondary-button{border:1px solid #a57555;color:#e3c49f;background:#3c2c25;cursor:pointer;font-weight:900;letter-spacing:2px;box-shadow:3px 3px 0 #1c1715}
.secondary-button:hover{background:#584035}.secondary-button span{float:right;margin-right:10px}
.combo-builder{background:#28201c;border:1px solid #715038;padding:10px 12px;margin-top:12px}
.budget-line{display:flex;align-items:baseline;justify-content:space-between;gap:10px;color:#b9a18c;font-size:10px;font-weight:800}
.budget-line strong{font-family:'Press Start 2P',monospace;color:#9cdeec;font-size:12px}.budget-line small{color:#9a887b;font-size:7px}
.selected-tray{display:flex;gap:5px;flex-wrap:wrap;min-height:25px;margin-top:9px;align-items:center}.selected-tray span{background:#6c4830;border:1px solid #b58055;color:#f4d3a0;font-size:9px;padding:3px 6px;font-weight:800}.selected-tray .empty-selection{background:transparent;border:0;color:#8f7b6c;padding:0;font-weight:500}
.stage-explainer{min-height:178px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:9px;color:#d8b58b}.stage-explainer>span{font-size:40px;line-height:1;color:#e5b36d;text-shadow:3px 3px #733e30}.stage-explainer strong{font-size:16px;color:#f4dbb6;letter-spacing:2px}.stage-explainer small{font-size:10px;color:#a98e78;line-height:1.6}
.handoff-curtain{position:absolute;z-index:8;left:50%;top:49%;transform:translate(-50%,-50%);min-width:260px;padding:16px 20px;text-align:center;background:#241c22ed;border:2px solid #c49a6a;box-shadow:0 0 0 5px #1f1a20,0 8px 25px #0009}.handoff-curtain span{display:block;font-family:'Press Start 2P',monospace;color:#c8956d;font-size:8px}.handoff-curtain strong{display:block;color:#ffe1b0;font-size:19px;margin:8px 0;letter-spacing:2px}.handoff-curtain small{color:#bf9e86;font-size:11px}
.duel-plans{display:grid;grid-template-columns:1fr 1fr;gap:12px}.duel-plan{background:#29211e;border:1px solid #75543d;padding:13px}.duel-plan--1{border-color:#81524c}.duel-plan-head{display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid #564037;padding-bottom:8px;color:#f2d2aa;font-size:13px;font-weight:900}.duel-plan--1 .duel-plan-head{color:#eeb1a6}.duel-plan-head small{font-size:9px;color:#ae947c;font-weight:700;white-space:nowrap}.duel-plan-cards{display:flex;flex-wrap:wrap;gap:6px;padding-top:9px}.duel-plan-cards span{display:flex;align-items:center;gap:6px;border:1px solid #80583e;background:#3a2a20;color:#f0d5ae;padding:5px 7px;font-size:10px;font-weight:800}.duel-plan-cards span b{color:#e9a76a}.duel-plan-cards span small{color:#b99877}.duel-plan-cards .tone-blue{border-color:#557d8c}.duel-plan-cards .tone-red{border-color:#a85646}.duel-plan-cards .tone-green{border-color:#708c5a}.duel-plan-cards .tone-purple{border-color:#8a6b9b}
.fighter-duel{animation:duel-shake .62s .22s steps(2,end) both}.fighter-duel .fighter-sprite{animation:damage-blink .62s .22s steps(2,end) both}
@keyframes duel-shake{0%,35%,100%{transform:translateX(0)}48%{transform:translateX(-4px)}60%{transform:translateX(5px)}72%{transform:translateX(-3px)}}
.arena-frame{scroll-margin-top:18px}
.skill-codex{border-top:1px solid #70503b;margin-top:20px;padding-top:12px}
.skill-codex h3{font-size:13px;color:#f0d1ab;letter-spacing:2px;margin:0 0 9px}
.skill-codex>div{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.skill-codex span{display:flex;align-items:center;gap:4px;min-width:0;padding:5px 6px;background:#372a23;border:1px solid #674a37;color:#e4c7a4;font-size:10px;font-weight:800;white-space:nowrap}
.skill-codex span b{color:#e4a467}.skill-codex span small{color:#b28c68;margin-left:auto;font-size:9px}
.skill-card.is-sealed{opacity:.68;border-style:dashed;background:repeating-linear-gradient(135deg,#2c2420 0 8px,#251f1c 8px 16px)}
.skill-card.is-sealed .skill-icon{background:#44352e;border-color:#876950;color:#c5a27d;font-family:'Press Start 2P',monospace;font-size:18px}
.skill-card.is-sealed .skill-end b{color:#a18973}
.duel-plan-cards em{font-size:10px;color:#927e6d;font-style:normal}
.draw-zone{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:10px 12px;background:#35251f;border:1px solid #a67850;box-shadow:inset 0 0 0 3px #251b18}.draw-zone strong{display:block;color:#f5d4a7;font-size:13px;letter-spacing:2px}.draw-zone small{display:block;color:#b99a7d;font-size:10px;margin-top:4px}.draw-button{flex:none;padding:8px 12px;background:#bf7d48;border:2px solid #e6ae71;color:#2b1a16;font-weight:900;font-size:11px;cursor:pointer;box-shadow:3px 3px 0 #5a3425}.draw-button b{color:#fff1c9;margin-left:8px}.draw-button:hover:not(:disabled){filter:brightness(1.13);transform:translateY(-2px)}.draw-button:disabled{opacity:.45;cursor:not-allowed}
.offer-grid{margin:10px 0 14px;grid-template-columns:repeat(3,minmax(0,1fr))}.offer-card{min-width:0;cursor:pointer;border-color:#b58657;background:#332720}.offer-card:hover:not(:disabled){transform:translateY(-3px);border-color:#f0c076;box-shadow:inset 0 0 0 3px #231b18,0 5px 0 #5e3a2a}.offer-card:disabled{opacity:.55;cursor:not-allowed}.offer-card .skill-body small{white-space:normal}.offer-rarity{position:absolute;top:8px;right:9px;color:#f6d6a3;font-family:'Press Start 2P',monospace;font-size:9px}.offer-card .skill-end b{color:#ffe19c}.empty-offer{margin:10px 0 14px;padding:15px;text-align:center;border:1px dashed #77563e;color:#bfa486;font-size:11px}
.combo-preview{min-height:22px;margin-top:7px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}.combo-preview span,.duel-combos span{padding:3px 6px;border:1px solid #d89b5b;background:#62402b;color:#ffdaa2;font-size:10px;font-weight:900}.combo-preview small{color:#9c8671;font-size:9px}.duel-combos{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.empty-hand{min-height:150px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;background:repeating-linear-gradient(135deg,#26211e 0 10px,#211c1a 10px 20px);border:1px dashed #77563e;color:#baa084}.empty-hand>span{font-size:35px;color:#a77a51}.empty-hand strong{font-size:16px;color:#e3c09a;letter-spacing:2px}.empty-hand small{font-size:10px}
.fx-cast-title small{display:block;font-size:9px;letter-spacing:0;color:#fff7db;margin-top:3px}
.hand-grid{align-items:stretch}.skill-card .element-tag{border:1px solid currentColor;padding:2px 4px;font-size:9px}.element-wind{--element-color:#8fe1c3;color:#8fe1c3!important}.element-fire{--element-color:#ef9a68;color:#ef9a68!important}.element-earth{--element-color:#dbbb83;color:#dbbb83!important}.element-lightning{--element-color:#a9c5fa;color:#a9c5fa!important}.element-water{--element-color:#83d8e4;color:#83d8e4!important}.skill-card[class*="element-"]{border-left:3px solid var(--element-color)}.skill-card .skill-body strong{color:#efd9bd}.skill-card.is-selected .skill-body strong{color:#ffe7ba}
.hand-item{min-width:0;display:flex;flex-direction:column;gap:5px}.hand-item .skill-card{width:100%;flex:1}.recycle-button{width:100%;padding:7px 8px;background:#302722;border:1px solid #816047;color:#dfbd96;font-size:10px;font-weight:800;cursor:pointer;text-align:left}.recycle-button b{float:right;color:#a9d6c0}.recycle-button:hover:not(:disabled){background:#453024;border-color:#d9a673}.recycle-button:disabled{opacity:.42;cursor:not-allowed}.carried-note{padding:5px 7px;color:#bca18a;font-size:10px}.hand-limit{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:9px 0;padding:7px 9px;background:#28362e;border:1px solid #63866e;color:#bfe0be;font-size:10px}.hand-limit strong{white-space:nowrap}.hand-limit.is-over{background:#4a2924;border-color:#e18a64;color:#ffd0ab}.main-action .primary-button:disabled{opacity:.58;cursor:not-allowed;filter:none;transform:none;box-shadow:2px 2px 0 #783b2b}
@media(max-width:690px){.draw-zone{align-items:stretch}.draw-zone small{font-size:9px}.draw-button{padding:6px 8px}.empty-hand{min-height:120px}.skill-end{align-items:center}.skill-end b{white-space:normal;text-align:right}}
@media(max-width:690px){.offer-grid{grid-template-columns:1fr}.offer-card{min-height:70px}.offer-card .skill-body small{white-space:normal}}
.arena-scene{container-type:inline-size}
.fighter-cast{animation:cast-forward .58s cubic-bezier(.22,1,.36,1) both;z-index:7}
.fighter-right.fighter-cast{animation-name:cast-backward}
.fighter-buff{animation:buff-rise .65s cubic-bezier(.22,1,.36,1) both}
.fighter-hit{animation:hurt-shake .62s .25s steps(2,end) both}
.fighter-hit .fighter-sprite{animation:damage-blink .62s .25s steps(2,end) both}
.scene-impact{animation:scene-shake .55s .25s steps(2,end) both}
.combat-fx{position:absolute;top:37%;width:76px;height:76px;z-index:9;pointer-events:none;transform:translate(-50%,-50%)}
.combat-fx.from-left{left:28%}.combat-fx.from-right{left:72%}
.combat-fx.fx-projectile.from-left{animation:fly-right .67s cubic-bezier(.25,1,.5,1) both}
.combat-fx.fx-projectile.from-right{animation:fly-left .67s cubic-bezier(.25,1,.5,1) both}
.combat-fx.fx-self{top:49%;animation:self-burst .7s cubic-bezier(.22,1,.36,1) both}
.fx-core,.fx-ring,.fx-particle{position:absolute;display:block;left:50%;top:50%;transform:translate(-50%,-50%)}
.fx-core{width:34px;height:34px;background:#ffe6a7;box-shadow:0 0 0 4px #a35b3f,0 0 25px #e6ac5e}
.fx-ring{width:48px;height:48px;border:4px solid #ffe7a4;opacity:.8;animation:ring-pop .56s .21s ease-out both}
.fx-particle{width:7px;height:7px;background:#ffe3a0;box-shadow:0 0 9px currentColor;animation:particle-pop .55s .22s ease-out both}
.fx-particle-a{--px:-35px;--py:-28px}.fx-particle-b{--px:34px;--py:-20px}.fx-particle-c{--px:10px;--py:33px}
.fx-blade .fx-core{width:45px;height:13px;transform:translate(-50%,-50%) rotate(-35deg);background:#fff4cb;box-shadow:0 0 0 4px #d7a668,0 0 20px #fff0be;clip-path:polygon(0 25%,77% 25%,100% 50%,77% 75%,0 75%)}
.fx-taijutsu .fx-core{width:44px;height:44px;border-radius:50%;background:#f0ac62;box-shadow:0 0 0 5px #a04e3e,0 0 24px #f7b86a}
.fx-taijutsu .fx-core:after{content:'拳';position:absolute;inset:0;display:grid;place-items:center;color:#6b2e2b;font-weight:900;font-size:23px}
.fx-shuriken .fx-core{width:47px;height:47px;background:#f0e6ca;box-shadow:none;clip-path:polygon(50% 0,61% 36%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:shuriken-spin .22s linear infinite}
.fx-wind .fx-core{width:48px;height:48px;background:transparent;border:9px solid #9de2d8;border-left-color:transparent;border-radius:50%;box-shadow:0 0 20px #6deac7;animation:wind-spin .3s linear infinite}
.fx-wind .fx-ring,.fx-wind .fx-particle{border-color:#a7f0df;background:#a7f0df}
.fx-fire .fx-core{width:53px;height:57px;background:radial-gradient(circle at 50% 70%,#fff1aa 0 18%,#ffc063 21% 45%,#ed6e38 52% 68%,#b23e39 72%);border-radius:45% 45% 50% 50%;clip-path:polygon(50% 0,65% 26%,82% 13%,78% 40%,94% 51%,80% 86%,52% 100%,20% 89%,7% 52%,26% 35%,22% 15%,41% 34%);box-shadow:0 0 24px #f58739}
.fx-fire .fx-ring,.fx-fire .fx-particle{border-color:#ffb366;background:#ffb366}
.fx-lightning .fx-core{width:48px;height:62px;background:#dcf9ff;clip-path:polygon(56% 0,13% 55%,47% 52%,30% 100%,91% 37%,58% 43%,83% 0);box-shadow:none;filter:drop-shadow(0 0 9px #87e4ff)}
.fx-lightning .fx-ring,.fx-lightning .fx-particle{border-color:#9feeff;background:#9feeff}
.fx-guard .fx-core{width:53px;height:60px;background:#9cc8cb;clip-path:polygon(50% 0,95% 18%,88% 72%,50% 100%,12% 72%,5% 18%);box-shadow:0 0 0 5px #4c819a,0 0 24px #a8e8e3}
.fx-guard .fx-ring,.fx-guard .fx-particle{border-color:#a8e8e3;background:#a8e8e3}
.fx-clone .fx-core{width:35px;height:50px;background:#d5b6eb;box-shadow:-17px 7px 0 #89719a,17px 7px 0 #89719a,0 0 25px #b98dda;border-radius:50% 50% 30% 30%;opacity:.8}
.fx-clone .fx-ring,.fx-clone .fx-particle{border-color:#d2aaf0;background:#d2aaf0}
.fx-heal .fx-core{width:16px;height:55px;background:#d8f9a7;box-shadow:0 0 20px #8dde88}
.fx-heal .fx-core:after{content:'';position:absolute;width:55px;height:16px;background:#d8f9a7;left:-20px;top:19px;box-shadow:0 0 20px #8dde88}
.fx-heal .fx-ring,.fx-heal .fx-particle{border-color:#b8ed9a;background:#b8ed9a}
.fx-charge .fx-core{width:45px;height:45px;border-radius:50%;background:radial-gradient(circle,#f7e5ff 0 25%,#b986e6 45%,#704b9b 75%);box-shadow:0 0 26px #c89cf3}
.fx-charge .fx-ring,.fx-charge .fx-particle{border-color:#d8b5fb;background:#d8b5fb}
.combat-pop{position:absolute;top:25%;z-index:11;font-family:'Press Start 2P',monospace;font-size:21px;color:#ffda9f;text-shadow:3px 3px 0 #5b2a2b,-2px -2px 0 #5b2a2b;pointer-events:none;animation:pop-number .65s .25s cubic-bezier(.22,1,.36,1) both;white-space:nowrap}
.pop-left{left:28%}.pop-right{right:28%}.pop-heal{color:#cefab3}.pop-defense{color:#bcecf2}.pop-chakra{color:#e3c8fb;font-size:15px}
.victory-banner{animation:victory-enter .35s .65s cubic-bezier(.22,1,.36,1) both}
@keyframes cast-forward{0%,100%{transform:translateX(0)}35%{transform:translateX(17px)}65%{transform:translateX(32px)}}
@keyframes cast-backward{0%,100%{transform:translateX(0)}35%{transform:translateX(-17px)}65%{transform:translateX(-32px)}}
@keyframes buff-rise{0%,100%{transform:translateY(0)}40%{transform:translateY(-10px)}}
@keyframes hurt-shake{0%,35%,100%{transform:translateX(0)}48%{transform:translateX(-8px)}60%{transform:translateX(8px)}72%{transform:translateX(-5px)}}
@keyframes damage-blink{0%,40%,70%,100%{filter:drop-shadow(5px 5px 0 #1c1c27)}50%,62%{filter:brightness(2) drop-shadow(0 0 12px #ffb3a3)}}
@keyframes scene-shake{0%,55%,100%{transform:translateX(0)}61%{transform:translateX(-3px)}70%{transform:translateX(3px)}79%{transform:translateX(-2px)}}
@keyframes fly-right{0%{transform:translate(-50%,-50%) scale(.35);opacity:0}18%{opacity:1}72%{transform:translate(calc(-50% + 44cqw),-50%) scale(1);opacity:1}100%{transform:translate(calc(-50% + 44cqw),-50%) scale(1.5);opacity:0}}
@keyframes fly-left{0%{transform:translate(-50%,-50%) scale(.35);opacity:0}18%{opacity:1}72%{transform:translate(calc(-50% - 44cqw),-50%) scale(1);opacity:1}100%{transform:translate(calc(-50% - 44cqw),-50%) scale(1.5);opacity:0}}
@keyframes self-burst{0%{transform:translate(-50%,-50%) scale(.25);opacity:0}30%{opacity:1}70%{transform:translate(-50%,-50%) scale(1.2);opacity:1}100%{transform:translate(-50%,-50%) scale(1.6);opacity:0}}
@keyframes ring-pop{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}45%{opacity:1}100%{transform:translate(-50%,-50%) scale(1.8);opacity:0}}
@keyframes particle-pop{0%{transform:translate(-50%,-50%);opacity:0}40%{opacity:1}100%{transform:translate(calc(-50% + var(--px)),calc(-50% + var(--py)));opacity:0}}
@keyframes shuriken-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes wind-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes pop-number{0%{transform:translateY(12px) scale(.6);opacity:0}45%{opacity:1}100%{transform:translateY(-32px) scale(1);opacity:0}}
@keyframes victory-enter{from{transform:translate(-50%,-40%) scale(.8);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
@media(max-width:690px){.skill-codex>div{grid-template-columns:repeat(2,minmax(0,1fr))}.skill-codex span{font-size:10px}}
@media(max-width:690px){.player-round-note{font-size:7px;letter-spacing:0;white-space:normal}.budget-line{font-size:9px}.budget-line strong{font-size:10px}.duel-plans{grid-template-columns:1fr}.duel-plan-head small{font-size:8px}.stage-explainer{min-height:155px}.handoff-curtain{min-width:220px}.handoff-curtain strong{font-size:15px}}
/* Each jutsu follows a cast → travel or build → impact → release timeline. */
.fx-layer{position:absolute;inset:0;z-index:8;pointer-events:none;--fx-accent:#ffe1a0;--fx-glow:#ffb45c}
.fx-layer.fx-wind{--fx-accent:#b8fff2;--fx-glow:#46dec3}.fx-layer.fx-fire{--fx-accent:#ffe39a;--fx-glow:#ff7037}.fx-layer.fx-lightning{--fx-accent:#e5fbff;--fx-glow:#62ddff}.fx-layer.fx-guard{--fx-accent:#bdf5f0;--fx-glow:#69cbd4}.fx-layer.fx-clone{--fx-accent:#eccbff;--fx-glow:#b977e9}.fx-layer.fx-heal{--fx-accent:#ddffbd;--fx-glow:#8ae86b}.fx-layer.fx-charge{--fx-accent:#f0d8ff;--fx-glow:#bd83f3}
.fx-cast-title{position:absolute;top:11%;z-index:12;min-width:130px;padding:8px 10px;text-align:center;border:2px solid var(--fx-accent);background:#211b29e8;box-shadow:4px 4px 0 #19151d,0 0 24px var(--fx-glow);color:var(--fx-accent);font-size:14px;font-weight:900;letter-spacing:2px;text-shadow:0 0 12px var(--fx-glow);animation:spell-call var(--fx-duration) steps(2,end) both}
.from-left>.fx-cast-title{left:19%}.from-right>.fx-cast-title{right:19%}
.combat-fx{top:47%;width:112px;height:112px;filter:drop-shadow(0 0 13px var(--fx-glow))}
.combat-fx.fx-projectile.from-left{animation:spell-flight-right var(--fx-duration) cubic-bezier(.26,.65,.33,1) both}
.combat-fx.fx-projectile.from-right{animation:spell-flight-left var(--fx-duration) cubic-bezier(.26,.65,.33,1) both}
.combat-fx.fx-self{top:51%;animation:spell-build var(--fx-duration) ease-out both}
.fx-core{filter:drop-shadow(0 0 8px var(--fx-glow));animation:core-pulse calc(var(--fx-duration) / 5) steps(2,end) infinite alternate}
.fx-ring{width:78px;height:78px;border-width:6px;border-color:var(--fx-accent);box-shadow:0 0 20px var(--fx-glow),inset 0 0 18px var(--fx-glow);animation:spell-ring var(--fx-duration) ease-out both}
.fx-particle{width:12px;height:12px;background:var(--fx-accent);box-shadow:0 0 12px 4px var(--fx-glow);animation:spell-spark var(--fx-duration) ease-out both}
.fx-particle-a{--px:-70px;--py:-55px}.fx-particle-b{--px:67px;--py:-44px}.fx-particle-c{--px:24px;--py:68px}
.fx-trail,.fx-echo{position:absolute;display:block;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--fx-accent);box-shadow:0 0 20px 5px var(--fx-glow)}
.fx-trail{width:85px;height:10px;clip-path:polygon(0 50%,100% 0,100% 100%);opacity:.75;animation:trail-flare var(--fx-duration) both}.from-left .fx-trail{transform:translate(-100%,-50%)}.from-right .fx-trail{transform:translate(0,-50%) scaleX(-1)}
.fx-echo{width:28px;height:28px;opacity:.75;animation:echo-burst var(--fx-duration) both}.fx-echo-a{margin:-35px 0 0 -30px}.fx-echo-b{margin:25px 0 0 23px;animation-delay:60ms}
.fx-impact{position:absolute;top:48%;width:120px;height:120px;z-index:10;border:7px solid var(--fx-accent);border-radius:50%;box-shadow:0 0 24px 8px var(--fx-glow),inset 0 0 25px var(--fx-glow);animation:impact-burst var(--fx-duration) steps(3,end) both}
.impact-left{left:28%;transform:translate(-50%,-50%)}.impact-right{left:72%;transform:translate(-50%,-50%)}
.fx-impact:before,.fx-impact:after{content:'';position:absolute;left:50%;top:50%;width:160px;height:7px;background:var(--fx-accent);box-shadow:0 0 18px var(--fx-glow);transform:translate(-50%,-50%) rotate(45deg)}.fx-impact:after{transform:translate(-50%,-50%) rotate(-45deg)}
.fx-impact i{position:absolute;left:50%;top:50%;width:13px;height:13px;background:var(--fx-accent);box-shadow:0 0 13px var(--fx-glow);animation:impact-debris var(--fx-duration) both}.fx-impact i:nth-child(1){--dx:-90px;--dy:-55px}.fx-impact i:nth-child(2){--dx:95px;--dy:-43px}.fx-impact i:nth-child(3){--dx:15px;--dy:88px}
.self .fx-impact{width:90px;height:90px;border-style:dashed;animation-name:support-aura}.self .fx-impact:before,.self .fx-impact:after{width:110px;height:4px}
.combat-pop{top:19%;font-size:27px;animation:spell-number var(--fx-duration) cubic-bezier(.18,.7,.35,1) both}
.self .combat-pop{animation-name:support-number}
.fighter-cast{animation:cast-forward var(--fx-duration) steps(4,end) both}.fighter-right.fighter-cast{animation-name:cast-backward}.fighter-buff{animation:buff-rise var(--fx-duration) steps(4,end) both}.fighter-hit{animation:hurt-shake var(--fx-duration) steps(3,end) both}.fighter-hit .fighter-sprite{animation:damage-blink var(--fx-duration) steps(3,end) both}.scene-impact{animation:scene-shake var(--fx-duration) steps(3,end) both}
.fighter-duel{animation:duel-left var(--fx-duration) steps(4,end) both;z-index:7}.fighter-right.fighter-duel{animation-name:duel-right}.fighter-duel .fighter-sprite{animation:damage-blink var(--fx-duration) steps(3,end) both}
.fx-blade .fx-core{width:95px;height:25px;transform:translate(-50%,-50%) rotate(-30deg);box-shadow:0 0 0 5px #d5a066,0 0 27px 10px #fff1ba}.fx-blade .fx-trail{width:130px;height:17px}.fx-blade .fx-impact{border-radius:3px;transform:translate(-50%,-50%) rotate(-35deg);height:24px;width:180px;box-shadow:0 0 28px 12px #fff5cb}
.fx-taijutsu .fx-core{width:75px;height:75px;box-shadow:0 0 0 9px #a04e3e,0 0 32px 14px #f7b86a}.fx-taijutsu .fx-core:after{font-size:40px}.fx-taijutsu .fx-trail{width:130px;height:35px;background:#efb16e;clip-path:polygon(0 30%,100% 0,100% 100%,0 70%)}.fx-taijutsu .fx-impact{border-width:11px}
.fx-shuriken .fx-core{width:70px;height:70px;animation:shuriken-spin .18s linear infinite}.fx-shuriken .fx-echo{width:36px;height:36px;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:shuriken-spin .23s linear infinite}.fx-shuriken .fx-trail{height:5px;background:#e5f0ff}
.fx-wind .fx-core{width:84px;height:84px;border-width:14px;animation:wind-spin .36s linear infinite}.fx-wind .fx-trail{width:140px;height:64px;background:repeating-linear-gradient(0deg,transparent 0 9px,#a9fff0 10px 15px,transparent 16px 23px);clip-path:none}.fx-wind .fx-echo{width:76px;height:76px;border:9px solid #b4fff1;border-left-color:transparent;border-radius:50%;background:transparent;animation:wind-spin .55s linear infinite}
.fx-fire .fx-core{width:90px;height:98px;box-shadow:0 0 32px 16px #f86a30;animation:flame-flicker .2s steps(2,end) infinite alternate}.fx-fire .fx-trail{width:135px;height:62px;background:linear-gradient(90deg,transparent,#ff8d39,#ffdf78);clip-path:polygon(0 50%,28% 8%,100% 0,95% 100%,26% 88%)}.fx-fire .fx-echo{width:24px;height:40px;border-radius:50% 50% 50% 0;background:#ffa34a;animation:ember-flicker var(--fx-duration) both}.fx-fire .fx-impact{background:radial-gradient(circle,#fff0a9 0 15%,#ff8b39 30%,#ff593275 63%,transparent 70%);border-color:#ffd17b;box-shadow:0 0 36px 20px #ff713d}
.fx-lightning .fx-core{width:78px;height:100px;filter:drop-shadow(0 0 18px #8aeaff);animation:bolt-flicker .11s steps(2,end) infinite}.fx-lightning .fx-trail{width:180px;height:40px;background:#d7faff;clip-path:polygon(0 60%,24% 25%,40% 65%,55% 30%,75% 60%,100% 20%,85% 85%,63% 55%,43% 95%,26% 50%);box-shadow:0 0 24px 8px #5ddaff}.fx-lightning .fx-impact{border-width:10px;border-color:#e4fcff;background:#8beaff77;box-shadow:0 0 40px 20px #65d7ff}
.fx-guard .fx-core{width:86px;height:102px;box-shadow:0 0 0 8px #4c819a,0 0 35px 13px #a8e8e3}.fx-guard .fx-trail{width:130px;height:95px;clip-path:polygon(0 100%,14% 36%,34% 65%,52% 0,68% 58%,88% 28%,100% 100%);background:#78a5b0;opacity:.6}.fx-guard .fx-impact{border:9px solid #bdf4ed;border-radius:4px;transform:translate(-50%,-50%) rotate(45deg)}
.fx-clone .fx-core{width:48px;height:70px;box-shadow:-38px 10px 0 #9d73bb,38px 10px 0 #9d73bb,0 0 32px #c28be8}.fx-clone .fx-echo{width:35px;height:65px;border-radius:45% 45% 25% 25%;background:#d7b3ec;opacity:.5;animation:clone-split var(--fx-duration) both}.fx-clone .fx-echo-a{margin:0}.fx-clone .fx-echo-b{margin:0;animation-direction:reverse}.fx-clone .fx-impact{border-style:dotted}
.fx-heal .fx-core{width:24px;height:82px;box-shadow:0 0 31px 12px #8dde88}.fx-heal .fx-core:after{width:82px;height:24px;left:-29px;top:29px;box-shadow:0 0 31px 12px #8dde88}.fx-heal .fx-trail{width:96px;height:96px;background:radial-gradient(circle,#8ce97780,transparent 67%);clip-path:none;border-radius:50%}.fx-heal .fx-particle{animation-name:healing-mote}
.fx-charge .fx-core{width:75px;height:75px;box-shadow:0 0 40px 16px #c695f5}.fx-charge .fx-trail{width:112px;height:112px;border:11px dashed #e7c5ff;border-radius:50%;background:transparent;clip-path:none;animation:chakra-spiral var(--fx-duration) linear both}.fx-charge .fx-echo{width:23px;height:23px;border-radius:50%;background:#f0d4ff;animation:chakra-orbit var(--fx-duration) linear both}.fx-charge .fx-echo-b{animation-direction:reverse}
@keyframes spell-call{0%,8%{opacity:0;transform:translateY(12px) scale(.85)}14%,52%{opacity:1;transform:translateY(0) scale(1)}65%,100%{opacity:0;transform:translateY(-10px) scale(1.05)}}
@keyframes duel-left{0%,15%,100%{transform:translateX(0)}33%,55%{transform:translateX(28px)}70%{transform:translateX(16px)}76%{transform:translateX(4px)}82%{transform:translateX(20px)}}
@keyframes duel-right{0%,15%,100%{transform:translateX(0)}33%,55%{transform:translateX(-28px)}70%{transform:translateX(-16px)}76%{transform:translateX(-4px)}82%{transform:translateX(-20px)}}
@keyframes spell-flight-right{0%,17%{opacity:0;transform:translate(-50%,-50%) scale(.4)}28%{opacity:1;transform:translate(-50%,-50%) scale(1)}68%{opacity:1;transform:translate(calc(-50% + 44cqw),-50%) scale(1.2)}78%,100%{opacity:0;transform:translate(calc(-50% + 44cqw),-50%) scale(1.8)}}
@keyframes spell-flight-left{0%,17%{opacity:0;transform:translate(-50%,-50%) scale(.4)}28%{opacity:1;transform:translate(-50%,-50%) scale(1)}68%{opacity:1;transform:translate(calc(-50% - 44cqw),-50%) scale(1.2)}78%,100%{opacity:0;transform:translate(calc(-50% - 44cqw),-50%) scale(1.8)}}
@keyframes spell-build{0%,10%{opacity:0;transform:translate(-50%,-20%) scale(.35)}28%,68%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}100%{opacity:0;transform:translate(-50%,-75%) scale(1.65)}}
@keyframes spell-ring{0%,28%{opacity:0;transform:translate(-50%,-50%) scale(.2)}48%{opacity:.95}80%,100%{opacity:0;transform:translate(-50%,-50%) scale(2.2)}}
@keyframes spell-spark{0%,28%{opacity:0;transform:translate(-50%,-50%) scale(.2)}45%,70%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--px)),calc(-50% + var(--py))) scale(.3)}}
@keyframes core-pulse{to{opacity:.65;scale:1.12}}@keyframes trail-flare{0%,20%{opacity:0}34%,67%{opacity:.9}80%,100%{opacity:0}}@keyframes echo-burst{0%,25%{opacity:0;scale:.4}40%,68%{opacity:.75;scale:1}85%,100%{opacity:0;scale:1.6}}
@keyframes impact-burst{0%,65%{opacity:0;scale:.25}70%{opacity:1;scale:1.25}80%{opacity:.85;scale:.9}100%{opacity:0;scale:1.9}}
@keyframes support-aura{0%,23%{opacity:0;scale:.25}38%,72%{opacity:1;scale:1.2}100%{opacity:0;scale:1.8}}
@keyframes impact-debris{0%,66%{opacity:0;transform:translate(-50%,-50%) scale(.2)}72%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.4)}}
@keyframes spell-number{0%,66%{opacity:0;transform:translateY(20px) scale(.5)}74%{opacity:1;transform:translateY(0) scale(1.2)}100%{opacity:0;transform:translateY(-38px) scale(1)}}
@keyframes support-number{0%,35%{opacity:0;transform:translateY(20px) scale(.5)}45%,78%{opacity:1;transform:translateY(0) scale(1.1)}100%{opacity:0;transform:translateY(-32px) scale(1)}}
@keyframes flame-flicker{to{transform:translate(-50%,-50%) scale(.9,1.12) rotate(5deg)}}@keyframes ember-flicker{0%,25%{opacity:0}45%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-115%) scale(.3)}}
@keyframes bolt-flicker{0%,100%{opacity:1}50%{opacity:.35;transform:translate(-48%,-50%) scaleX(1.18)}}
@keyframes healing-mote{0%,20%{opacity:0;transform:translate(-50%,35px)}45%,70%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--px)),calc(-90% + var(--py)))}}
@keyframes clone-split{0%,20%{opacity:0;transform:translate(-50%,-50%) scale(.3)}55%{opacity:.8;transform:translate(-125%,-50%) scale(1)}100%{opacity:0;transform:translate(-185%,-50%) scale(1.15)}}
@keyframes chakra-spiral{0%,17%{opacity:0;transform:translate(-50%,-50%) rotate(0) scale(.2)}40%,80%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(540deg) scale(1.8)}}
@keyframes chakra-orbit{0%,20%{opacity:0;transform:translate(-50%,-50%) rotate(0) translateX(15px)}40%,80%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(540deg) translateX(75px)}}
.stat-row{grid-template-columns:43px 1fr 69px}.player-foot{gap:8px;white-space:nowrap}.player-foot span:nth-child(2){color:#8ecbd4}.player-foot span:nth-child(2) b{color:#b8e8ed}
.dice-row{flex-wrap:wrap;gap:12px}.skill-library{display:flex;flex-direction:column;gap:25px}.library-title{display:flex;align-items:baseline;gap:12px;border-bottom:1px solid #5b4436;padding-bottom:8px;margin-bottom:10px}.library-title h3{font-size:15px;letter-spacing:2px;color:#e9c99f;margin:0}.library-title span{font-size:10px;color:#967f6a}.library-group .skills-grid{align-items:stretch}.skill-card:disabled{opacity:.67}.skill-card:disabled .skill-cost{color:#a98261}.rules-modal{max-height:90vh;overflow:auto}.skill-codex>div{grid-template-columns:repeat(4,minmax(0,1fr))}.skill-codex span{font-size:9px}
@media(max-width:690px){.stat-row{grid-template-columns:34px 1fr 54px}.player-foot{font-size:8px;gap:2px}.dice-row{gap:8px}.die{width:58px;height:58px}.library-title h3{font-size:13px}.library-title span{font-size:9px}.skill-codex>div{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:380px){.player-foot{flex-wrap:wrap}.library-group .skills-grid{grid-template-columns:1fr}}
@media(max-width:690px){.fx-cast-title{font-size:10px;min-width:85px;letter-spacing:0}.from-left>.fx-cast-title{left:11%}.from-right>.fx-cast-title{right:11%}.combat-fx{scale:.72}.fx-impact{scale:.72}.combat-pop{font-size:18px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.fx-layer{display:none}.victory-banner{opacity:1!important;transform:translate(-50%,-50%)!important}}

/* A single arena canvas keeps the controls visible together; JS fits it to the viewport. */
html,body{width:100%;height:100%;overflow:hidden}
#app{width:1360px;transform-origin:top left}
.page-shell{min-height:0;width:100%;overflow:visible}
.modal-backdrop{position:absolute}
.site-header{height:52px;padding:0 24px}
.brand-emblem{width:34px;height:34px;font-size:18px}
.brand strong{font-size:17px}.brand small{font-size:5px}
.game-wrap{width:1360px;max-width:none;margin:0;padding:10px 18px 12px;display:grid;grid-template-columns:320px minmax(0,1fr) 400px;grid-template-rows:auto auto auto;gap:10px 14px;align-items:start}
.topline{grid-column:1/-1;margin:0;align-items:center;min-height:48px}
.topline h1{font-size:27px;margin:2px 0 0;line-height:1.1}.topline p{display:none}
.round-stamp{width:66px;height:43px;transform:none}.round-stamp strong{font-size:17px;margin-top:4px}
.arena-frame{grid-column:1;grid-row:2;padding:4px;box-shadow:0 0 0 2px #100e0d,0 5px 15px #0006}
.arena-topbar{height:23px;padding:0 6px;font-size:8px}.arena-topbar span:last-child{display:none}
.arena-footer{height:18px;padding:0 6px;font-size:8px}.arena-footer span:nth-child(2){display:none}
.arena-scene{height:205px}.moon{width:82px;height:82px;left:calc(50% - 41px)}
.fighter{width:100px;bottom:19px}.fighter-left{left:4%}.fighter-right{right:4%}.fighter-sprite{width:82px;height:102px}.fighter-label{font-size:9px}.fighter-shadow{width:78px}.versus-mark span{font-size:30px}
.dashboard{display:contents}.left-column{grid-column:1;grid-row:3;display:flex;flex-direction:column;gap:7px;min-width:0}
.player-card{padding:8px 10px 7px}.player-top{margin-bottom:4px}.player-name{font-size:14px}.player-mark{font-size:8px}.stat-row{margin:3px 0;gap:5px}.player-foot{margin-top:5px;padding-top:5px;font-size:9px}.player-round-note{margin-top:4px;padding-top:4px;font-size:8px}
.battle-log{min-height:0;height:83px;padding:7px 9px}.panel-heading{padding-bottom:3px}.log-items{max-height:55px}
.turn-panel{grid-column:2;grid-row:2/4;padding:12px 14px;min-height:0;height:100%;align-self:stretch}
.turn-head{padding-bottom:7px}.turn-head h2{font-size:19px;margin-top:4px}.turn-phase{font-size:9px}
.dice-zone{padding-top:7px}.dice-row{margin:6px 0 7px;gap:9px}.die{width:49px;height:49px}.die-question{font-size:22px}.pip-grid{transform:scale(.78)}.combo-line{min-height:20px}
.draw-zone{margin-top:8px;padding:7px 9px}.draw-zone strong{font-size:11px}.draw-zone small{font-size:9px;margin-top:2px}.draw-button{padding:5px 8px;font-size:10px}
.offer-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:7px 0}.offer-card{min-height:92px}
.skill-card{min-height:88px;padding:8px;grid-template-columns:26px 1fr;gap:3px 6px}.skill-icon{width:25px;height:25px;font-size:16px}.skill-body strong{font-size:11px}.skill-body small{font-size:9px;white-space:normal;line-height:1.3}.skill-end{align-items:end;flex-wrap:wrap}.skill-cost{font-size:8px}.skill-card .element-tag{font-size:8px}.skill-end b{font-size:9px}
.combo-builder{margin-top:7px;padding:7px 9px}.hand-limit{margin:5px 0;padding:5px 7px}.selected-tray{margin-top:5px;min-height:18px}.combo-preview{margin-top:4px;min-height:18px}
.action-message{min-height:35px;margin-top:7px;padding:5px 8px}.main-action{padding-top:8px}.roll-button{height:36px}
.stage-explainer{min-height:135px}
.skills-section{grid-column:3;grid-row:2/4;min-width:0;align-self:stretch;margin:0;background:#241e1b;border:1px solid #76533d;padding:10px;box-shadow:inset 0 0 0 3px #1c1816}
.skills-heading{margin-bottom:7px}.skills-heading h2{font-size:17px;margin-top:3px}.keyboard-hint{font-size:9px;display:inline}
.hand-grid,.duel-plans{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.hand-grid .skill-card{min-height:84px}.recycle-button{padding:4px 6px;font-size:9px}.hand-item{gap:3px}
.empty-hand{min-height:260px}.site-footer{display:none}
.rules-modal{max-height:85vh}

.skill-codex h3 small{font-size:10px;color:#ac8f74;font-weight:500;letter-spacing:0}
.skill-codex .codex-card{display:flex;align-items:center;gap:6px;min-width:0;padding:7px 8px;background:#372a23;border:1px solid #674a37;color:#e4c7a4;text-align:left;cursor:pointer}
.skill-codex .codex-card:hover,.skill-codex .codex-card:focus-visible{background:#513b2d;border-color:#e7ae70;transform:translateY(-2px)}
.skill-codex .codex-card>b{color:var(--element-color);font-size:17px}
.skill-codex .codex-card>span{display:block;padding:0;background:none;border:0;font-size:10px;color:#f2d5ae;white-space:normal;line-height:1.3}
.skill-codex .codex-card small{display:block;margin:3px 0 0;color:#b99370;font-size:8px}
.detail-backdrop,.team-backdrop{z-index:32;background:#0b090be8}
.card-detail-modal,.team-modal{position:relative;width:min(460px,calc(100% - 24px));padding:28px;border:2px solid #bf8454;background:linear-gradient(145deg,#372923,#211b19);box-shadow:0 0 0 6px #17120f,0 20px 65px #000c;color:#f1dbbd}
.card-detail-modal{border-top:5px solid var(--element-color)}
.card-detail-title{display:flex;align-items:center;gap:16px;margin:16px 0}.card-detail-icon{width:62px;height:62px;display:grid;place-items:center;background:#543a2a;border:2px solid var(--element-color);font-size:33px;color:var(--element-color)}
.card-detail-title h2,.team-modal h2{margin:0;color:#f7dfba;font-size:27px}.card-detail-title p{margin:5px 0 0;color:var(--element-color);font-size:12px;font-weight:800}
.card-detail-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}.card-detail-stats>div{background:#241c19;border:1px solid #70503b;padding:10px}.card-detail-stats small,.card-detail-effect small,.card-detail-combos small,.team-credit small{display:block;color:#b49273;font-size:10px;letter-spacing:1px}.card-detail-stats strong{display:block;margin-top:6px;color:#f6d9a8;font-size:17px}
.card-detail-effect{background:#2f251f;border-left:4px solid var(--element-color);padding:13px}.card-detail-effect strong{display:block;margin-top:7px;font-size:16px;line-height:1.5;color:#f7e0c3}.card-detail-note,.card-detail-combos p{font-size:11px;line-height:1.7;color:#bca48e}.card-detail-combos{border-top:1px solid #604938;padding-top:12px;margin-top:15px}.card-detail-combos p{margin:5px 0 0}
.detail-back-button{width:100%;padding:10px;margin-top:18px}.team-modal h2{margin:10px 0 22px}.team-credit{border-top:1px solid #70503b;padding:15px 0}.team-credit strong{display:block;margin-top:8px;font-size:20px;color:#f7dbad}.team-credit strong span{color:#b78058}

@media (orientation:landscape) and (max-height:650px){
  #app,.game-wrap{width:960px}
  .site-header{height:36px;padding:0 12px}.brand{gap:7px}.brand-emblem{width:26px;height:26px;font-size:15px;border-width:2px}.brand strong{font-size:13px}.brand small{font-size:4px}.header-right{gap:12px}.header-tag{display:none}.header-button{font-size:11px}.sound-button{font-size:18px;width:24px}
  .game-wrap{grid-template-columns:220px minmax(0,1fr) 260px;gap:6px 8px;padding:5px 10px 7px}.topline{min-height:28px}.topline h1{font-size:18px;margin:1px 0}.topline .eyebrow{display:none}.round-stamp{width:48px;height:28px}.round-stamp span{font-size:5px}.round-stamp strong{font-size:12px;margin-top:2px}
  .arena-frame{padding:3px}.arena-topbar{height:18px;font-size:7px}.arena-footer{height:14px;font-size:7px}.arena-scene{height:120px}.moon{width:60px;height:60px;left:calc(50% - 30px)}.fighter{width:74px;bottom:16px}.fighter-left{left:2%}.fighter-right{right:2%}.fighter-sprite{width:60px;height:74px}.fighter-label{font-size:8px;padding:1px 8px}.fighter-shadow{width:58px}.versus-mark span{font-size:22px}.versus-mark small{font-size:6px}.scene-ground{height:44px}.village{bottom:35px;scale:.65}
  .left-column{display:flex;gap:4px}.player-card{padding:5px 7px 4px}.player-top{margin-bottom:2px}.player-name{font-size:11px}.player-mark{display:none}.player-ident{gap:5px}.player-no{font-size:6px;padding:5px 3px}.stat-row{grid-template-columns:31px 1fr 47px;margin:2px 0;gap:3px}.stat-label{font-size:8px}.stat-row strong{font-size:8px}.stat-row small{font-size:6px}.stat-track{height:7px}.player-foot{font-size:7px;margin-top:3px;padding-top:3px}.player-round-note{display:none}.battle-log{display:block;height:36px;padding:4px 6px}.panel-heading{font-size:8px;padding-bottom:2px}.log-items{max-height:18px}.log-items p{font-size:8px;margin:3px 0}
  .turn-panel{padding:7px 8px;min-height:0}.turn-head{padding-bottom:4px}.turn-head h2{font-size:14px;margin-top:2px}.turn-phase{font-size:7px;padding:3px 5px}.turn-indicator{font-size:7px}.eyebrow{font-size:7px}.dice-zone{padding-top:3px}.zone-title span{font-size:9px}.zone-title small{font-size:8px}.dice-row{gap:5px;margin:3px 0 4px}.die{width:35px;height:35px;border-width:2px}.die-question{font-size:17px}.pip-grid{transform:scale(.55)}.combo-line{min-height:16px;font-size:8px}.combo-badge{padding:2px 5px}
  .draw-zone{margin-top:4px;padding:4px 6px}.draw-zone strong{font-size:9px}.draw-zone small{font-size:7px;margin-top:1px}.draw-button{padding:3px 6px;font-size:8px;border-width:1px}.offer-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:4px 0}.offer-card{min-height:63px}.empty-offer{margin:4px 0;padding:7px;font-size:9px}.skill-card{min-height:58px;padding:4px;grid-template-columns:17px 1fr;gap:2px 3px}.skill-icon{width:17px;height:17px;font-size:11px;border-width:1px}.skill-body strong{font-size:8px}.skill-body small{font-size:7px;line-height:1.2;margin-top:1px}.skill-end b,.skill-card .element-tag{font-size:7px;padding:1px 2px}.skill-number,.offer-rarity{font-size:6px;top:4px;right:4px}
  .combo-builder{margin-top:4px;padding:4px 6px}.budget-line{font-size:8px}.budget-line strong{font-size:9px}.hand-limit{margin:3px 0;padding:3px 4px;font-size:8px}.selected-tray{margin-top:3px;min-height:14px}.selected-tray span{font-size:7px;padding:2px 3px}.combo-preview{margin-top:2px;min-height:14px}.combo-preview span,.combo-preview small{font-size:7px}.action-message{min-height:25px;margin-top:4px;padding:3px 5px;font-size:8px}.message-symbol{font-size:12px}.main-action{padding-top:4px}.roll-button{height:28px;font-size:10px}.roll-button span{font-size:6px}.stage-explainer{min-height:90px;gap:4px}.stage-explainer>span{font-size:24px}.stage-explainer strong{font-size:11px}.stage-explainer small{font-size:8px}
  .skills-section{padding:6px}.skills-heading{margin-bottom:4px}.skills-heading h2{font-size:12px;margin-top:1px}.keyboard-hint{font-size:7px}.hand-grid,.duel-plans{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.hand-grid .skill-card{min-height:54px}.hand-item{gap:2px}.recycle-button{padding:2px 3px;font-size:7px}.carried-note{font-size:7px;padding:2px}.empty-hand{min-height:120px}.empty-hand strong{font-size:11px}.empty-hand small{font-size:8px;text-align:center}.empty-hand>span{font-size:20px}
  .rules-modal{max-height:82vh}.team-modal{padding:18px}.card-detail-modal{padding:12px 16px;max-height:94vh;overflow:auto}.card-detail-title{gap:10px;margin:7px 0}.card-detail-icon{width:42px;height:42px;font-size:24px}.card-detail-title h2{font-size:20px}.card-detail-title p{font-size:10px;margin-top:2px}.card-detail-stats{gap:5px;margin:8px 0}.card-detail-stats>div{padding:6px}.card-detail-stats strong{font-size:13px;margin-top:2px}.card-detail-effect{padding:7px}.card-detail-effect strong{font-size:13px;line-height:1.3;margin-top:3px}.card-detail-note,.card-detail-combos p{font-size:9px;line-height:1.35;margin:5px 0}.card-detail-combos{margin-top:6px;padding-top:6px}.detail-back-button{padding:6px;margin-top:7px}
}