@font-face{font-family:Franklin;src:url('assets/franklin.ttf')}
@font-face{font-family:FranklinBold;src:url('assets/franklin-cond.ttf');font-weight:700}

:root{color-scheme:dark;font-family:Franklin,'Arial Narrow',sans-serif;background:#222;color:#17140e}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;align-items:flex-start;justify-content:center}
button,input,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #e5ae41;outline-offset:2px}
button{color:inherit}
.text-button{padding:0;border:0;background:none;text-transform:uppercase;text-decoration:underline;color:#794824}
button img{display:block;pointer-events:none}
#shell{margin:24px auto 0;max-width:100%;width:770px}
#viewport{position:relative;width:770px;height:560px;overflow:hidden}
#game{position:relative;width:770px;height:560px;transform-origin:top left;overflow:hidden;isolation:isolate;background:#30171a url('assets/selection-bg.jpg') 0 0/770px 560px;font:12px Franklin,sans-serif;text-transform:uppercase;user-select:none}
#game.battle{background:#619a67 url('assets/battle-bg.jpg') center/auto 560px}
#game.night{filter:sepia(.22) saturate(.85)}
.boot{margin:250px auto;color:#fbefcc;text-align:center;letter-spacing:3px}
.outside-bar{display:flex;justify-content:space-between;align-items:center;min-height:43px;gap:12px;color:#888;font:10px Arial,sans-serif;letter-spacing:1px}
.brand{white-space:nowrap;color:#c0b6a7}
.brand b{margin-left:7px;font-weight:400;color:#b26543}
.outside-actions{display:flex;gap:15px;align-items:center}
.outside-actions button{font:9px Arial,sans-serif;background:none;border:0;color:#a69b8e;letter-spacing:.7px;padding:7px 0}
.connection{font:9px Arial;letter-spacing:0;color:#8e9b8b}
.connection::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:#879777;margin-right:5px}
.toolbar{position:absolute;z-index:12;left:4px;top:3px;display:flex;gap:8px;align-items:center}
.toolbar button,.sound-button{background:#283135b5;color:#fff;border:1px solid #b8b6ac88;border-radius:12px;height:22px;padding:1px 9px;font-size:10px;text-transform:uppercase}
.toolbar .hamburger{border-radius:6px;padding:1px 5px;font-family:Arial;font-size:14px}
.toolbar .bot-button{background:#f1d59a;color:#352014;border-color:#f6e4b8;font-family:FranklinBold}
.toolbar .bot-button:hover{background:#fff0be}
.untimed-training{height:13px;text-align:center;color:#213b36;font-size:10px;line-height:13px;background:#eee1b9b0}
#training-coach{margin-top:10px;padding:14px 16px;background:#f4e6bd url('assets/parchment.jpg') center/cover;border:2px solid #8d291b;color:#322218;font:14px Franklin}
#training-coach[hidden]{display:none}
.training-coach-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;color:#8d291b}
.training-coach-heading b{font:18px FranklinBold}
.training-coach-heading span{font-size:12px}
.training-coach-copy h2{margin:10px 0 4px;font:16px FranklinBold}
.training-coach-copy p{margin:0 0 12px;line-height:1.4}
.training-coach-controls{display:flex;flex-wrap:wrap;gap:8px}
.training-coach-controls .paper-button{font-size:12px;padding:6px 10px;min-width:0}
#shell:fullscreen:has(#training-coach:not([hidden])){display:flex;flex-direction:column;justify-content:flex-start;align-items:center;overflow-y:auto}
#shell:fullscreen #training-coach{width:100%}
@media(max-width:500px){#training-coach{padding:10px}.training-coach-controls{gap:6px}.training-coach-heading b{font-size:16px}}
.sound-button{position:absolute;right:8px;top:3px;border:0;background:none;font-size:13px}
.selection-art{position:absolute;left:18px;top:13px;width:331px;height:267px;pointer-events:none}
.main-actions{position:absolute;top:251px;left:20px;display:flex;gap:8px;height:57px;align-items:center}
.art-button{padding:0;border:0;background:none;transition:filter .15s,transform .15s}
.art-button:hover{filter:brightness(1.2);transform:translateY(-2px)}
.art-button img{width:192px;height:57px}
.art-button.logout{position:relative}
.art-button.logout img{width:118px}
.profile-button-label{position:absolute;left:12px;top:24px;width:62px;height:15px;display:grid;place-items:center;background:#eed9a3;font-size:12px;line-height:15px;color:#2d2117}
.scroll{position:absolute;left:52px;top:315px;width:697px;height:222px;background:url('assets/parchment.jpg') 0 0/697px 222px}
.scroll:before{content:'';position:absolute;left:-29px;top:-9px;width:46px;height:239px;background:url('assets/scroll-cap.png') center/100% 100%;pointer-events:none;z-index:3}
.roster{position:absolute;left:35px;top:25px;display:grid;grid-template-columns:repeat(7,50px);grid-template-rows:repeat(3,50px);gap:10px 11px}
.portrait{position:relative;display:block;padding:0;border:1px solid #1a1712;background:#d9d0a5;width:50px;height:50px;overflow:hidden}
.portrait>img{width:100%;height:100%;object-fit:cover}
.portrait:hover{border-color:#ad2112;box-shadow:0 0 0 2px #b8241777}
.portrait.chosen{background:#dcd2a8;border-color:#a99c77}
.portrait.chosen img{opacity:0}
.portrait.chosen:hover img{opacity:.35}
.portrait.selected{box-shadow:0 0 0 2px #ad2112}
.portrait.large{width:77px;height:77px}
.roster .portrait:active{transform:scale(.95)}
.roster-empty{grid-column:1/8;padding:45px 12px;color:#6e4d30}
.page-arrow{position:absolute;top:115px;border:0;background:none;padding:0;font:40px Arial,sans-serif;color:#fcf4c9;text-shadow:-1px -1px #292419,1px 1px #292419}
.page-arrow.next{left:437px}
.page-arrow.prev{left:-13px;top:20px}
.page-number{position:absolute;left:170px;bottom:20px;font-size:8px;color:#8c7353}
.scroll-bottom{position:absolute;bottom:10px;left:35px;display:flex;justify-content:space-between;align-items:center;width:416px}
.mini-button{background:#f4e6bb;border:1px solid #aa7c59;border-radius:10px;min-width:55px;font-size:9px;height:15px;line-height:12px;padding:0 9px;color:#6d472d;text-transform:uppercase}
.mini-button:hover{background:#fff7d6}
.mini-button.active{background:#b92c1d;color:white}
.mini-button.wide{min-width:114px}
.profile-avatar{position:absolute;left:487px;top:26px}
.profile-text{position:absolute;left:576px;top:24px;line-height:16px;width:115px;font-size:12px;white-space:nowrap}
.profile-text strong{font-weight:400}
.selected-team{position:absolute;left:487px;top:128px;display:flex;gap:11px}
.selected-team .empty{font:24px FranklinBold;color:#a49669;display:grid;place-items:center}
.team-readiness{position:absolute;left:487px;top:186px;width:180px;text-align:center;font-size:10px}
.team-manager{position:absolute;left:532px;top:199px;width:86px;font-size:8px}
.top-panel{position:absolute;left:141px;top:24px;width:545px;height:222px;background:url('assets/parchment.jpg') 0 0/697px 222px;animation:unroll .25s ease-out;z-index:2}
.top-panel:after{content:'';position:absolute;left:539px;top:-9px;width:46px;height:239px;background:url('assets/scroll-cap.png') center/100% 100%;transform:scaleX(-1);pointer-events:none}
.top-heading{margin:0;position:absolute;left:28px;top:13px;font-size:14px;font-weight:400;color:#a52e22;max-width:485px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.detail-icons{position:absolute;left:28px;top:32px;display:flex;align-items:center;gap:17px}
.detail-icons .detail-character{margin-right:43px}
.detail-icons button{padding:0;border:1px solid #14110c;background:#d7ceaa;width:77px;height:77px}
.detail-icons button img{width:75px;height:75px}
.detail-icons button:hover,.detail-icons button.active{outline:2px solid #a72e1d;outline-offset:1px}
.detail-copy{position:absolute;left:28px;top:122px;width:485px;font-size:12px;line-height:13px;max-height:74px;overflow:auto;scrollbar-width:thin}
.detail-copy b{display:block;color:#a72e1d;font-size:14px;font-weight:400;margin-bottom:3px}
.detail-add{position:absolute;right:25px;bottom:10px;z-index:2}
.detail-meta{position:absolute;bottom:12px;left:28px;width:485px;display:flex;justify-content:space-between;font-size:11px}
.chakra-dots{display:inline-flex;align-items:center;gap:3px}
.chakra{display:inline-block;width:10px;height:10px;border:1px solid #151515;background:#fff;vertical-align:middle}
.chakra.tai{background:#3ef143}
.chakra.blood{background:#e72d2d}
.chakra.nin{background:#46b8e9}
.chakra.gen{background:white}
.chakra.random{background:#141414}
.class-label{font-size:9px;color:#675039}
.filter-popover{position:absolute;z-index:14;left:74px;top:322px;width:248px;padding:12px;background:#f6e9c7;border:1px solid #9f321d;border-radius:7px;box-shadow:0 6px 20px #0006}
.filter-popover label{display:block;color:#a32d1f;font-size:10px;letter-spacing:1px;margin-bottom:5px}
.filter-popover input,.filter-popover select{width:100%;font:12px Franklin;background:#fff7e6;color:#382416;border:1px solid #b49d78;padding:6px 7px;margin-bottom:7px;border-radius:3px}
.chakra-filters{margin:4px 0 0;padding:5px 7px 2px;border:1px solid #b49d78}
.chakra-filters legend{color:#743227;font:12px FranklinBold}
.chakra-filters > div{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.chakra-filters label{display:flex;align-items:center;gap:4px;letter-spacing:0;color:#352416}
.chakra-filters input[type="checkbox"]{width:auto;margin:0;accent-color:#a33a26}
.battle-art{position:absolute;inset:0;background:url('assets/battle-frame.png') 0 0/770px 560px;pointer-events:none}
.battle-player{position:absolute;top:9px;left:32px;width:240px;text-align:right;padding-right:58px;min-height:50px}
.battle-player.enemy{left:506px;text-align:left;padding:12px 0 0 58px}
.battle-player .name{font:19px FranklinBold;color:#b03e36;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.battle-player .rank{font:14px FranklinBold}
.battle-avatar{position:absolute;right:0;top:0;width:50px;height:50px;border:1px solid #111}
.battle-player.enemy .battle-avatar{left:0;right:auto}
.battle-avatar img{width:48px;height:48px;object-fit:cover}
.turn-control{position:absolute;left:293px;top:11px;width:193px;text-align:center;z-index:4}
.ready-button{padding:0;display:block;width:100%;background:none;border:0;font:16px FranklinBold;color:#141414;line-height:17px;text-transform:uppercase}
.ready-button:disabled{color:#4a4b43}
.timer-track{height:12px;border:1px solid #17120e;background:#c8bea4;margin-top:1px}
.timer-fill{height:100%;background:#b33322;transition:width .25s linear}
.chakra-pool{display:flex;gap:11px;align-items:center;font-size:12px;margin-top:6px}
.chakra-count{white-space:nowrap}
.exchange{font-size:10px;border:0;background:none;padding:1px}
.battle-row{position:absolute;left:0;width:770px;height:116px}
.battle-portrait{position:absolute;left:32px;top:18px;width:77px;height:77px;overflow:visible}
.battle-portrait>img{width:75px;height:75px}
.battle-portrait.enemy{left:690px}
.battle-portrait.dead>img{filter:grayscale(1);opacity:.45}
.battle-portrait.targetable{outline:3px solid #eee37b;outline-offset:3px;animation:target-pulse .9s infinite alternate;cursor:crosshair}
.battle-portrait.targetable:hover{outline-color:#f74a28}
.health{position:absolute;left:-1px;top:78px;width:77px;height:16px;border:1px solid #17150c;background:#c2bb8f;font-size:12px;text-align:center;line-height:14px}
.health-fill{position:absolute;inset:0 auto 0 0;background:#6bee36;transition:width .3s ease}
.health-fill.changing{animation:health-change .4s ease-out}
@keyframes health-change{from{width:var(--previous-health)}}
@media(prefers-reduced-motion:reduce){.health-fill.changing{animation:none}}
.health.low .health-fill{background:#eccb42}
.health.critical .health-fill{background:#e65a3a}
.health span{position:relative;z-index:1}
.effect-icons{position:absolute;left:82px;top:0;display:flex;gap:2px}
.enemy .effect-icons{left:auto;right:82px}
.effect-icon{font:10px Arial;padding:3px;background:#f9edc9;border:1px solid #543d24;white-space:nowrap;color:#49371f}
.skill-strip{position:absolute;left:103px;top:42px;width:381px;height:79px;background:url('assets/skills-parchment.png') center/100% 100%;display:flex;align-items:center;padding-left:98px;gap:6px}
.skill-button{position:relative;width:56px;height:56px;flex:none;padding:0;border:1px solid #17130d;background:#e8debc}
.skill-button img{width:54px;height:54px}
.skill-button.unavailable img{opacity:.35;filter:grayscale(.2)}
.skill-button.unavailable:after{content:'';position:absolute;inset:0;background:#d4c5a528;pointer-events:none}
.skill-button.picked{outline:3px solid #edd760;outline-offset:1px}
.skill-button.queued{outline:2px solid #3d9c3d}
.skill-button .cooldown{position:absolute;inset:0;display:grid;place-items:center;color:#fff;text-shadow:1px 1px 3px #000;font:28px FranklinBold;background:#0004}
.queue-holder{position:absolute;left:125px;top:53px;width:56px;height:56px;border:1px solid #17130d;background:#666;color:#b3b3ac;font:42px FranklinBold;padding:0}
.queue-holder img{width:54px;height:54px}
.queue-holder .queue-number{position:absolute;top:-5px;left:-5px;width:16px;height:16px;border:1px solid #442c12;background:#f6e5b1;font:11px FranklinBold;color:#702513;display:grid;place-items:center}
.target-hint{position:absolute;left:200px;top:125px;z-index:10;background:#f9edcce8;border:1px solid #9a4d2c;padding:4px 9px;color:#7c2e1b;font-size:11px}
.battle-info{position:absolute;left:247px;top:426px;width:523px;height:134px;background:url('assets/info-pane.png') center/100% 100%;padding:25px 20px 15px 31px;display:flex;gap:10px}
.battle-info .info-icon{width:77px;height:77px;object-fit:cover;border:1px solid #17130e;flex:none}
.info-content{font-size:11px;line-height:12px;min-width:0;max-height:93px;overflow:auto;flex:1;scrollbar-width:thin}
.info-content h2{font-size:14px;font-weight:400;color:#a73021;line-height:15px;margin:0 0 4px}
.info-content p{margin:0 0 5px}
.info-content .info-meta{display:flex;gap:22px;margin-top:6px;font-size:10px}
.battle-controls{position:absolute;left:30px;top:426px;display:flex;flex-direction:column;gap:0;z-index:3}
.battle-controls button{border:0;background:url('assets/button.png') 0 0/182px 46px;width:182px;height:46px;text-align:left;padding-left:38px;font:13px Franklin;text-transform:uppercase}
.battle-controls button:hover{filter:brightness(1.15)}
.practice-label{position:absolute;right:18px;top:407px;color:#242d23;font-size:11px;text-shadow:0 1px #fff8}
.float-hit{position:absolute;left:15px;top:20px;font:32px FranklinBold;color:#fff;text-shadow:2px 2px 0 #9e2117;pointer-events:none;animation:float-hit .9s ease-out forwards;z-index:15}
.overlay{position:absolute;inset:0;background:#07121080;z-index:30;display:flex;align-items:center;justify-content:center}
.dialog{position:relative;width:570px;max-height:460px;background:#f4e6bd url('assets/parchment.jpg') center/cover;border:7px solid #8d2318;box-shadow:0 0 0 2px #3e2319,0 15px 45px #0007;padding:24px 28px 22px;color:#272016;text-transform:none;animation:dialog-in .16s ease-out;overflow:auto;scrollbar-width:thin}
.dialog.small{width:390px}
.dialog h1{font:22px FranklinBold;color:#9e2d1f;margin:0 0 16px;text-transform:uppercase}
.dialog h2{font:16px FranklinBold;color:#9e2d1f;margin:15px 0 7px}
.dialog p{font:14px Franklin;line-height:1.45;margin:8px 0}
.dialog label{display:block;font-size:12px;margin:10px 0 4px;text-transform:uppercase}
.dialog input,.dialog select{display:block;width:100%;color:#292018;background:#fff9e9;border:1px solid #a38a62;border-radius:2px;padding:9px 10px;font:15px Franklin;user-select:text}
.dialog .close{position:absolute;right:8px;top:6px;border:0;background:none;font:20px Arial;color:#8d291f;padding:3px 7px}
.dialog-actions{display:flex;gap:10px;margin-top:19px;justify-content:center;flex-wrap:wrap}
.paper-button{border:1px solid #4f3b22;background:#f9eab8;min-width:100px;padding:7px 15px;font:15px FranklinBold;color:#2b2117;text-transform:uppercase;box-shadow:inset 0 0 0 1px #fff9}
.paper-button:hover{background:#fff4ce}
.paper-button.primary{background:#a83320;color:#fff2cf;border-color:#732619}
.paper-button:disabled{opacity:.45}
.dialog .muted{color:#80664a;font-size:12px}
.dialog .badge{display:inline-block;font-size:10px;background:#6d7d42;color:#fff6d5;padding:3px 8px;margin:0 0 10px;letter-spacing:1px;text-transform:uppercase}
.choice-list{display:flex;flex-direction:column;gap:9px}
.choice{display:block;text-align:left;border:1px solid #bfa277;padding:13px 15px;background:#fff6d694;color:#352617;width:100%;font:14px Franklin}
.choice:hover{background:#fff8e7;border-color:#a43620}
.choice strong{display:block;font:17px FranklinBold;color:#9b3023;margin-bottom:4px}
.choice small{font-size:12px;color:#766044}
.bot-dialog fieldset{margin:0 0 16px;padding:0;border:0;min-width:0}
.bot-dialog legend{padding:0;margin-bottom:7px;color:#562c1f;font:15px FranklinBold}
.bot-modes,.bot-levels{display:grid;gap:6px}
.bot-modes{grid-template-columns:repeat(2,minmax(0,1fr))}
.bot-levels{grid-template-columns:repeat(5,minmax(0,1fr))}
.bot-dialog .bot-option{display:flex;align-items:center;gap:6px;margin:0;padding:8px;border:1px solid #bfa277;background:#fff6d6b3;text-transform:none;cursor:pointer}
.bot-dialog .bot-option:has(input:checked){background:#ffebad;border-color:#a83320;box-shadow:inset 0 0 0 1px #a83320}
.bot-dialog .bot-option input{flex:none;width:auto;margin:0;accent-color:#a83320}
.bot-option strong,.bot-option small{display:block}
.bot-option small{margin-top:3px;color:#69503a;font-size:11px}
.saved-team{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid #cdb78d;gap:12px}
.saved-team .thumbs{display:flex;gap:5px}
.saved-team img{width:40px;height:40px;border:1px solid #382b1d}
.saved-team .saved-name{flex:1}
.saved-team .mini-button{height:23px}
.mission{padding:12px 0;border-bottom:1px solid #cdb78d}
.mission-title{display:flex;justify-content:space-between;font-size:15px}
.mission p{font-size:12px}
.mission-progress{height:5px;background:#d4c19a;margin-top:8px}
.mission-progress>i{display:block;height:100%;background:#9c3c24}
.mission.done .mission-progress>i{background:#688245}
.progression-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.progression-tabs .mini-button[aria-pressed=true]{background:#8d2318;color:#fff6d5;border-color:#632019}
.mission-unlock{display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px}
.mission-unlock.mission-without-portrait{grid-template-columns:minmax(0,1fr)}
.mission-unlock>img{width:42px;height:42px;border:1px solid #927052;object-fit:cover}
.mission-unlock .mission-title{gap:10px}
.mission-unlock .mission-title span{flex:none;color:#7b492e;font-size:12px}
.mission-unlock .mission-title b{min-width:0}
.mission-goal{display:grid;grid-template-columns:1fr auto;gap:4px 8px;font-size:12px}
.mission-goal progress{grid-column:1/-1;width:100%;height:6px;accent-color:#9c3c24}
.mission-unlock.done progress{accent-color:#688245}
.progression-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 16px}
.progression-stats div,.season-summary{border:1px solid #cdb78d;background:#fff6d58c;padding:8px 10px}
.progression-stats dt,.season-summary span{font-size:12px;color:#744c34}
.progression-stats dd{margin:2px 0 0;font:15px FranklinBold}
.season-summary{display:flex;align-items:center;justify-content:space-between;gap:10px}
.history-win{color:#3e5b22}
.history-loss{color:#872b20}
.tabs{display:flex;border-bottom:1px solid #bba27a;margin-bottom:10px}
.tabs button{background:none;border:0;padding:5px 12px;font-size:13px;color:#775c3c}
.tabs button.active{border-bottom:2px solid #a53222;color:#a53222}
.log-list{max-height:240px;overflow:auto;font:12px Franklin;line-height:1.4}
.log-entry{padding:6px 0;border-bottom:1px solid #d8c69d}
.log-entry .turn{display:inline-block;min-width:38px;color:#95794f}
.log-entry.damage{color:#a92e1c}
.log-entry.victory{color:#4f752e;font-weight:bold}
.chat-form{display:flex;gap:7px;margin-top:12px}
.chat-form input{flex:1;min-width:0}
.chat-form .paper-button{min-width:65px}
.leaderboard{width:100%;border-collapse:collapse;font:13px Franklin}
.leaderboard th{text-align:left;color:#9b3023;padding:7px 3px;border-bottom:1px solid #a88b61}
.leaderboard td{padding:9px 3px;border-bottom:1px solid #d6c29c}
.code{font:36px FranklinBold!important;letter-spacing:8px;text-align:center;color:#9c3020;padding:12px;border:1px dashed #ad8c5c;user-select:text}
.searching{text-align:center;padding:14px 0}
.spinner{width:32px;height:32px;border:3px solid #d1ba8a;border-top-color:#9f3020;border-radius:50%;margin:16px auto;animation:spin .9s linear infinite}
.result-dialog{text-align:center;width:570px}
.result-dialog .result-title{font:45px FranklinBold;letter-spacing:2px}
.result-team{display:flex;gap:12px;justify-content:center;margin:18px 0}
.result-team img{width:77px;height:77px;border:1px solid #24180f}
.result-stats{display:flex;justify-content:center;gap:30px;font-size:15px}
.result-stats b{font:23px FranklinBold;color:#a02e20;display:block}
.chakra-payment{display:flex;gap:14px;margin:14px 0;justify-content:center}
.payment-color{width:70px;text-align:center;font-size:11px}
.payment-color .chakra{width:20px;height:20px}
.payment-color input{margin-top:6px;text-align:center;padding:5px}
.settings-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0}
.settings-row input[type=checkbox]{width:auto}
.settings-row select{width:150px}
#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,15px);background:#f7e8c5;color:#81331f;border:1px solid #a65531;box-shadow:0 4px 22px #0006;border-radius:3px;padding:11px 18px;font:14px Franklin;max-width:90vw;z-index:100;opacity:0;transition:opacity .15s,transform .15s;pointer-events:none}
#toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes target-pulse{to{outline-color:#f2a52f}
}
@keyframes float-hit{to{transform:translateY(-45px);opacity:0}
}
@keyframes spin{to{transform:rotate(360deg)}
}
@keyframes unroll{from{clip-path:inset(0 100% 0 0)}
to{clip-path:inset(0)}
}
@keyframes dialog-in{from{opacity:0;transform:translateY(5px)}
to{opacity:1;transform:translateY(0)}
}
@media(max-width:800px){#shell{margin-top:0}
.outside-bar{padding:0 10px;min-height:48px}
.outside-actions{gap:10px}
.connection{display:none}
.brand{font-size:9px}
.outside-actions button{font-size:8px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
}
.turn-art {
  position: absolute;
  pointer-events: none;
}
.turn-art.your-turn {
  left: 482px;
  top: 86px;
  width: 214px;
  height: 526px;
}
.turn-art.other-turn {
  left: 350px;
  top: 72px;
  width: 338px;
  height: 488px;
}
.battle-naruto {
  position: absolute;
  left: 125px;
  top: 417px;
  width: 153px;
  pointer-events: none;
  z-index: 3;
}
.battle-portrait {
  isolation: isolate;
}
.academy-frame {
  position: absolute;
  left: -33px;
  top: -30px;
  width: 110px;
  height: 139px;
  background: url('assets/academy-battle-frame.png') center / 100% 100%;
  z-index: -1;
  pointer-events: none;
}
.enemy .academy-frame {
  transform: scaleX(-1);
}
.battle-info {
  z-index: 4;
}

/* Calm first-play experience. The logical stage remains 770 × 560. */
.calm {
  text-transform: none;
}
.calm .toolbar {
  top: 14px;
  left: 18px;
}
.calm .toolbar button {
  height: 30px;
  padding: 3px 12px;
  font: 13px Franklin;
  text-transform: none;
  background: #251c1cd9;
}
.home-art {
  position: absolute;
  left: -50px;
  bottom: 0;
  width: 420px;
  opacity: .16;
  pointer-events: none;
}
.home-content {
  position: absolute;
  left: 110px;
  top: 52px;
  width: 550px;
  text-align: center;
  color: #fff2d3;
}
.home-eyebrow {
  font-size: 11px;
  letter-spacing: 4px;
  color: #efbc80;
}
.home-content h1 {
  font: 37px FranklinBold;
  margin: 8px 0 4px;
  letter-spacing: .2px;
  text-shadow: 0 2px 9px #270e09;
}
.home-intro {
  margin: 0 0 20px;
  font-size: 16px;
  color: #f5d3ad;
}
.home-team {
  display: flex;
  justify-content: center;
  gap: 18px;
}
.team-card {
  position: relative;
  width: 150px;
  background: #f4e8c8 url('assets/parchment.jpg') center / auto 100%;
  border: 1px solid #bba275;
  border-radius: 8px;
  box-shadow: 0 8px 24px #170b0855;
  padding-bottom: 8px;
  color: #442e23;
}
.team-change {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 15px 10px 5px;
  color: inherit;
}
.team-change img,
.empty-slot {
  width: 75px;
  height: 75px;
  border: 1px solid #685037;
  border-radius: 3px;
  margin-bottom: 10px;
}
.empty-slot {
  display: grid;
  place-items: center;
  font-size: 40px;
  background: #e3d4b0;
}
.team-change b {
  font: 20px FranklinBold;
}
.team-change .role {
  font-size: 13px;
  color: #75603e;
  padding: 3px 0;
}
.team-change small {
  font-size: 11px;
  margin-top: 8px;
  text-decoration: underline;
}
.skills-link {
  font: 11px Franklin;
  border: 0;
  color: #8d3c23;
  background: transparent;
  padding: 5px;
  text-decoration: underline;
}
.team-card:hover {
  border-color: #ecbf7c;
}
.home-rules {
  font-size: 13px;
  color: #f4d9b2;
  margin: 18px 0 10px;
}
.play-primary {
  display: block;
  border: 1px solid #ffd39a;
  border-radius: 5px;
  width: 260px;
  padding: 9px 20px;
  margin: 0 auto;
  background: linear-gradient(#dd7832, #b6471e);
  color: #fff4d9;
  font: 25px FranklinBold;
  box-shadow: 0 4px 16px #240c08a0, inset 0 1px #ffe3ac44;
}
.play-primary:hover {
  filter: brightness(1.12);
}
.play-primary span {
  margin-left: 25px;
}
.home-secondary {
  display: flex;
  justify-content: center;
  gap: 35px;
}
.home-secondary button {
  background: transparent;
  color: #ffe5c6;
  border: 0;
  padding: 8px;
  font-size: 13px;
  text-decoration: underline;
}
.first-play-note {
  min-height: 12px;
  font-size: 11px;
  color: #f0c8a1;
  margin: 8px 0 0;
}
.calm .dialog {
  border-width: 3px;
  border-radius: 8px;
}
.calm .dialog h1 {
  font-size: 23px;
  text-transform: none;
}
.calm .paper-button,
.calm .mini-button {
  text-transform: none;
}
.menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.calm .choice strong {
  font-size: 19px;
}
.calm .choice {
  border-radius: 5px;
  padding: 11px 15px;
}
.roster-dialog {
  width: 660px;
}
.choose-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.choose-card {
  border: 1px solid #c5ad83;
  background: #fffae8bd;
  border-radius: 5px;
  display: flex;
  align-items: center;
  text-align: left;
  padding: 10px;
  gap: 8px;
  min-width: 0;
}
.choose-card img {
  width: 46px;
  height: 46px;
  border-radius: 3px;
}
.choose-card b,
.choose-card small {
  display: block;
}
.choose-card b {
  font: 16px FranklinBold;
}
.choose-card small {
  color: #765d3e;
  font-size: 11px;
  margin-top: 3px;
}
.choose-card:hover {
  border-color: #ad3924;
  background: #fff3cd;
}
.choose-card.on-team {
  box-shadow: inset 0 0 0 1px #9c9f78;
}
.roster-search {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}
.roster-search input {
  flex: 1;
  min-width: 0;
}
.roster-search select {
  width: 145px;
}
.roster-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 15px;
  color: #765d3e;
}
.roster-pagination button {
  background: transparent;
  border: 1px solid #b3986c;
  border-radius: 4px;
  padding: 5px 10px;
}
.roster-pagination button:disabled {
  opacity: .35;
}
.role-tag {
  color: #85613a;
  margin-top: -7px !important;
}
.skill-summaries {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.skill-summaries > div {
  display: flex;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid #c4ac8170;
}
.skill-summaries img {
  width: 50px;
  height: 50px;
  border: 1px solid #826443;
  border-radius: 3px;
}
.skill-summaries b {
  display: block;
  font-size: 15px;
  font-weight: normal;
}
.skill-summaries strong {
  display: block;
  font: 20px FranklinBold;
  color: #9c3e26;
  margin-top: 3px;
}
.expand-detail {
  border: 0;
  background: transparent;
  color: #8b3f23;
  text-decoration: underline;
  padding: 13px 0 0;
  font-size: 13px;
}
.focused-summary {
  display: flex;
  align-items: center;
  gap: 17px;
  margin-bottom: 5px;
}
.focused-summary img {
  width: 60px;
  height: 60px;
  border: 1px solid #826443;
}
.focused-summary strong {
  font: 26px FranklinBold;
  color: #9c3e26;
}
.advanced-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin: 20px 0;
}
.calm.battle {
  background: #afc9a0;
}
.calm .battle-art {
  opacity: .42;
}
.battle-topline {
  position: absolute;
  left: 125px;
  top: 16px;
  width: 625px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #304536;
}
.battle-topline button {
  border: 1px solid #61775c80;
  background: #fffff299;
  border-radius: 4px;
  padding: 5px 10px;
  font: 12px Franklin;
  color: #304536;
}
.turn-guide {
  position: absolute;
  left: 130px;
  top: 43px;
  width: 510px;
  text-align: center;
}
.turn-steps {
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  color: #3c503a;
}
.turn-steps span {
  padding: 3px 8px;
  border-radius: 3px;
  background: #faf6e499;
}
.turn-steps span.active {
  background: #914b2d;
  color: #fff3d9;
}
.turn-steps i {
  font-style: normal;
}
.turn-guide p {
  font: 14px Franklin;
  margin: 5px 0 0;
  color: #29412c;
}
.lesson-counter {
  position: absolute;
  top: 37px;
  left: 0;
  width: 100%;
  font: 11px Franklin;
  color: #714b2a;
}
.enemy-caption {
  position: absolute;
  right: 15px;
  top: 81px;
  font-size: 10px;
  width: 90px;
  text-align: center;
  color: #344c34;
}
.calm .battle-row {
  height: 98px;
}
.unit-name {
  position: absolute;
  top: 12px;
  left: 16px;
  width: 96px;
  text-align: center;
  font: 12px FranklinBold;
  color: #314332;
}
.calm .battle-portrait {
  top: 30px;
  left: 28px;
  width: 64px;
  height: 64px;
  border-radius: 4px;
  background: #eee3c4;
  border-color: #405b3b;
}
.calm .battle-portrait.enemy {
  left: 680px;
}
.calm .battle-portrait > img {
  width: 62px;
  height: 62px;
}
.calm .academy-frame {
  display: none;
}
.calm .health {
  top: 65px;
  left: -1px;
  width: 64px;
  height: 13px;
  font-size: 10px;
  line-height: 11px;
}
.calm .effect-icons {
  top: -16px;
  left: 0;
  max-width: 95px;
}
.calm .effect-icon {
  padding: 1px 3px;
  border: 0;
  font-size: 8px;
  background: #ffffe8;
  border-radius: 2px;
}
.calm .enemy .effect-icons {
  right: 0;
  left: auto;
}
.calm .skill-strip {
  left: 124px;
  top: 28px;
  width: 525px;
  height: 77px;
  padding: 0;
  gap: 8px;
  background: none;
}
.skill-card {
  position: relative;
  width: 125px;
  height: 75px;
  flex: none;
  background: #fff9e7ec;
  border: 1px solid #9b9f7a;
  border-radius: 5px;
  box-shadow: 0 2px 5px #30402717;
}
.two-skills .skill-card {
  width: 220px;
}
.skill-select {
  position: relative;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  grid-template-rows: 25px 14px 1fr;
  align-content: start;
  align-items: start;
  column-gap: 5px;
  row-gap: 2px;
  border: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  text-align: left;
  padding: 4px 5px;
  border-radius: 4px;
}
.skill-select img {
  width: 25px;
  height: 25px;
  object-fit: cover;
  border: 1px solid #846a45;
  border-radius: 2px;
}
.skill-select > b {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-right: 12px;
  font: 11px/12px FranklinBold;
  color: #4c3526;
}
.skill-card-summary {
  grid-column: 1 / -1;
  font: 12px/14px FranklinBold;
  color: #87452b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-cost {
  grid-column: 1 / -1;
  display: flex;
  align-content: start;
  align-items: center;
  flex-wrap: wrap;
  gap: 1px 5px;
  font: 10px/11px FranklinBold;
  color: #392919;
}
.cost-part { white-space: nowrap; }
.cost-part .chakra { width: 7px; height: 7px; vertical-align: baseline; margin: 0; }
.detail-cost { color: #50402c; }
.skill-summaries .detail-cost { display: block; margin-top: 4px; }
.skill-summaries .detail-cost strong { display: inline; margin: 0; color: inherit; font: inherit; font-weight: bold; }
.two-skills .skill-select > b { font-size: 15px; line-height: 17px; }
.two-skills .skill-card-summary { font-size: 14px; }
.skill-info-button {
  position: absolute;
  top: 4px;
  right: 3px;
  padding: 0 2px;
  border: 0;
  color: #705e3e;
  background: transparent;
  font: 15px Arial;
}
.skill-card.unavailable {
  background: #e3e6d4ed;
}
.skill-card.unavailable .skill-select > img,
.skill-card.unavailable .skill-select > b,
.skill-card.unavailable .skill-card-summary {
  opacity: .63;
}
.skill-card.picked {
  outline: 3px solid #efac3a;
}
.skill-card.queued {
  border-color: #5c8042;
  box-shadow: inset 0 0 0 2px #5c8042;
}
.skill-card.lesson-focus {
  width: 260px;
  outline: 2px solid #ae7741;
}
.skill-card.lesson-focus .skill-select b {
  font-size: 16px;
  line-height: 20px;
}
.calm .battle-portrait.targetable {
  outline: 3px solid #b77928;
  animation: target-pulse .9s infinite alternate;
}
.turn-plan {
  position: absolute;
  top: 423px;
  left: 24px;
  width: 495px;
  min-height: 110px;
  padding: 10px 14px;
  background: #fff9e6eb;
  border: 1px solid #9b9f7a;
  border-radius: 5px;
}
.plan-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
}
.plan-heading b {
  font: 15px FranklinBold;
  color: #4e3b29;
}
.plan-heading > span {
  color: #7f6a4e;
  font-size: 11px;
}
.empty-queue {
  font-size: 12px;
  color: #827258;
  margin: 18px 0;
}
.queued-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 23px;
  font-size: 12px;
  color: #483e2d;
}
.queued-line small {
  color: #7c5936;
  margin-left: 10px;
}
.queued-line button {
  background: transparent;
  border: 0;
  text-decoration: underline;
  font: 11px Franklin;
  color: #9b4830;
}
.end-turn-area {
  position: absolute;
  left: 542px;
  top: 444px;
  width: 205px;
  text-align: center;
}
.end-turn-button {
  width: 100%;
  padding: 12px 10px;
  background: #a54f29;
  color: #fff2d2;
  border: 1px solid #814526;
  border-radius: 4px;
  font: 22px FranklinBold;
  box-shadow: 0 2px 6px #34462325;
}
.end-turn-button:disabled {
  background: #71806a;
  border-color: #677a5c;
  opacity: .65;
}
.end-turn-area > span {
  font-size: 10px;
  color: #4c6046;
  display: block;
  margin-top: 6px;
}
.end-turn-area .timer-track {
  margin-top: 7px;
  height: 3px;
  border: 0;
  background: #aebc9d;
}
.end-turn-area .timer-fill {
  background: #728957;
}
.calm .dialog .chakra-dots {
  vertical-align: middle;
}
.calm .dialog li {
  margin-bottom: 10px;
}

/* Full reference kits share one three-character turn. */
.move-ready { color: #476833; font: 10px Franklin; margin-left: 6px; }
.passive-link { margin-left: 7px; padding: 1px 5px; border: 1px solid #a59977; border-radius: 8px; background: #fff7dc; color: #68512e; font: 9px Franklin; }
.calm .queued-line { gap: 5px; min-height: 24px; }
.move-number { flex: 0 0 15px; font-size: 10px; color: #8d7856; text-align: center; }
.move-description { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calm .queued-line small { margin-left: 5px; font-size: 10px; }
.move-actions { display: flex; gap: 3px; flex: none; }
.calm .move-actions button { min-width: 20px; padding: 2px; }
.calm .move-actions button:disabled { opacity: .3; cursor: default; }
.pending-move { color: #8a806b; font-size: 10px; }
.pending-move b { font-weight: normal; }
.passives-section { margin: 16px 0; border-top: 1px solid #b5a583; padding-top: 10px; }
.passives-section > summary { cursor: pointer; font: 15px FranklinBold; color: #725234; }
.passive-detail { display: flex; gap: 12px; margin: 14px 0; align-items: flex-start; }
.passive-detail > img { width: 38px; height: 38px; object-fit: cover; border: 1px solid #998264; border-radius: 3px; }
.passive-detail > div { flex: 1; }
.passive-detail small { display: block; color: #81735b; margin-top: 4px; }
.implemented-rules { margin: 8px 0; font-size: 12px; color: #7e735e; }
.implemented-rules summary { cursor: pointer; }
.calm .battle-portrait.acting { animation: team-action .7s ease-out; outline: 2px solid #f5bc53; z-index: 3; }
@keyframes team-action { 0% { transform: translateX(0); box-shadow: 0 0 0 0 #ffc966; } 35% { transform: translateX(12px) scale(1.08); box-shadow: 0 0 0 7px #ffc96666; } 100% { transform: translateX(0); box-shadow: 0 0 0 15px #ffc96600; } }
@media (prefers-reduced-motion: reduce) { .calm .battle-portrait.acting { animation: none; outline: 3px solid #f5bc53; } }
.calm .battle-portrait.enemy.acting { animation-name: team-action-enemy; }
@keyframes team-action-enemy { 0% { transform: translateX(0); box-shadow: 0 0 0 0 #ffc966; } 35% { transform: translateX(-12px) scale(1.08); box-shadow: 0 0 0 7px #ffc96666; } 100% { transform: translateX(0); box-shadow: 0 0 0 15px #ffc96600; } }

/* Planning and playback share the same portrait positions. */
.calm .battle-portrait.choosing-target {
  outline: 3px solid #ffe29a;
  box-shadow: 0 0 0 6px #5b321d95;
  z-index: 5;
}
.calm .battle-portrait.targetable {
  outline: 3px solid #ffe398;
  box-shadow: 0 0 0 5px #8f521e99;
  z-index: 4;
}
.calm .battle-portrait.planned-target:not(.targetable):not(.choosing-target) {
  outline: 2px solid #b9e488;
  box-shadow: 0 0 0 4px #31562d99;
}
.calm .skill-card.picked { background: #fff0c4; box-shadow: 0 0 0 5px #78421865; z-index: 4; }
.calm .skill-card.performing { opacity: 1; filter: none; outline: 2px solid #ffcc68; box-shadow: 0 0 0 4px #80532285; }
.calm .battle-portrait.acting { z-index: 5; }
.calm .battle-portrait.impacted {
  outline: 3px solid #e8b35d;
  box-shadow: 0 0 0 5px #51392499;
  z-index: 4;
}
.calm .battle-portrait.impacted.damage { outline-color: #ff7763; animation: impact-shake .35s ease-out; }
.calm .battle-portrait.impacted.healing { outline-color: #a5eaaa; }
.action-tag, .impact-badge {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 4px;
  padding: 3px 6px;
  white-space: nowrap;
  font: 12px FranklinBold;
  pointer-events: none;
  z-index: 7;
}
.action-tag { top: -15px; background: #593820; color: #ffe2a0; }
.impact-badge { bottom: 5px; background: #493625; color: #ffe7ae; animation: impact-pop .35s ease-out both; }
.impact-badge.damage { background: #81291e; color: #fff0eb; }
.impact-badge.healing { background: #245139; color: #e0ffdc; }
@keyframes impact-pop {
  from { opacity: .3; transform: translate(-50%, 6px) scale(.85); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes impact-shake {
  25% { transform: translateX(-4px); }
  65% { transform: translateX(4px); }
}
.action-feed {
  height: 118px;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  gap: 5px;
  border-left: 4px solid #507b45;
  background: #fffaeaf5;
}
.action-feed.enemy-action { border-left-color: #b75537; }
.action-heading { display: flex; justify-content: space-between; gap: 8px; font: 12px FranklinBold; color: #6f4a32; }
.action-heading small { font: 11px Franklin; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.action-name { display: flex; align-items: center; gap: 8px; color: #392716; font: 18px FranklinBold; }
.action-name img, .recap-list img { width: 25px; height: 25px; object-fit: cover; border-radius: 3px; }
.action-outcome { font: 13px/1.2 Franklin; color: #533823; overflow: auto; }
.opponent-recap {
  margin-top: 4px;
  padding: 3px 7px;
  border-radius: 3px;
  border: 1px solid #604c3460;
  color: #3f3224;
  background: #fff6dc;
  font: 11px FranklinBold;
}
.recap-list { display: grid; gap: 8px; }
.recap-list > div { display: flex; gap: 8px; padding: 8px; border: 1px solid #b3a37a; border-radius: 4px; background: #fff7df; }
.recap-list p { margin: 4px 0 0; }
@media (prefers-reduced-motion: reduce) {
  .calm .battle-portrait.targetable,
  .calm .battle-portrait.acting,
  .calm .battle-portrait.impacted,
  .impact-badge { animation: none; }
}
.calm .battle-portrait.incoming-target { outline: 3px dashed #ffdf92; }
.calm .battle-portrait.acting.windup { animation-duration: .32s; }
.calm .battle-portrait.acting.follow-through:not(.impacted) { animation: none; }
/* A short trail connects the actor and the marked target during windup. */
#viewport { overflow: clip; }
.action-trails { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.action-trails path {
  fill: none;
  stroke: #ffd47d;
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px #4f2319);
  stroke-dasharray: .18 .82;
  animation: action-travel .32s linear both;
}
.action-trails path.support { stroke: #b9efab; }
@keyframes action-travel { from { stroke-dashoffset: 1; opacity: .4; } to { stroke-dashoffset: .12; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .action-trails path { animation: none; stroke-dasharray: .03 .02; }
}

.chakra-meters {
  position: absolute;
  top: 408px;
  left: 24px;
  right: 23px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  z-index: 2;
}
.chakra-meter {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 5px 9px;
  color: #e6f7ff;
  background: linear-gradient(115deg, #103d64, #112c49 72%);
  border: 1px solid #73bce8;
  border-radius: 5px;
  box-shadow: 0 2px 5px #18352e5c;
}
.chakra-meter-heading { display: flex; align-items: center; gap: 6px; font: 14px FranklinBold; }
.chakra-orb {
  display: inline-block;
  flex: 0 0 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #efffff 4%, #8de6ff 32%, #3da6ef 63%, #185483);
  box-shadow: 0 0 8px #7acfff;
}
.chakra-total { margin-left: auto; font: 10px Franklin; color: #c0e8ff; }
.chakra-total strong { font: 17px FranklinBold; color: #fff; margin-right: 2px; }
.chakra-balances { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.chakra-balance {
  display: flex;
  position: relative;
  align-items: center;
  gap: 3px;
  padding: 2px 4px;
  border-radius: 3px;
  background: #ffffff12;
  font: 10px Franklin;
}
.chakra-balance .chakra { flex: 0 0 7px; width: 7px; height: 7px; margin: 0; border-radius: 2px; }
.chakra-balance b { margin-left: auto; font: 13px FranklinBold; color: #fff; }
.energy-meters .chakra-meter { min-height: 50px; align-content: center; }
.chakra-increase {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 4px;
  border: 1px solid #8adbff;
  border-radius: 5px;
  background: #124772;
  color: #e9faff;
  font: 11px FranklinBold;
  animation: chakra-rise 1.3s ease-out var(--chakra-delay) both;
}
.chakra-pulse { animation: chakra-glow 1.3s ease-out var(--chakra-delay) both; }
.chakra-pulse .chakra-orb { animation: chakra-orb-pulse 1.3s ease-out var(--chakra-delay) both; }
.chakra-gaining { animation: chakra-balance-glow 1.3s ease-out var(--chakra-delay) both; }
@keyframes chakra-glow {
  20% { box-shadow: 0 0 16px 4px #59ccff; border-color: #bbf0ff; }
}
@keyframes chakra-orb-pulse {
  20% { transform: scale(1.27); box-shadow: 0 0 16px #b9faff; }
}
@keyframes chakra-balance-glow {
  20% { background: #3685ae; }
}
@keyframes chakra-rise {
  0% { opacity: 0; transform: translateY(4px); }
  12%, 70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-7px); }
}
@keyframes chakra-fade { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .chakra-pulse, .chakra-pulse .chakra-orb, .chakra-gaining { animation: none; }
  .chakra-increase { animation: chakra-fade 1.3s steps(1, end) var(--chakra-delay) both; }
}

.calm .turn-plan { top: 467px; height: 84px; min-height: 0; padding: 5px 12px; }
.calm .plan-heading { margin-bottom: 1px; }
.calm .queued-line { min-height: 19px; }
.calm .queued-line.pending-move { justify-content: flex-start; }
.calm .empty-queue { margin: 9px 0; }
.calm .action-feed { gap: 2px; }
.calm .action-name img { width: 19px; height: 19px; }
.calm .action-name { font-size: 16px; }
.calm .action-outcome { font-size: 12px; }
.calm .end-turn-area { top: 469px; }
.calm .end-turn-button { padding: 7px 8px; font-size: 19px; }
.calm .end-turn-area .timer-track { margin-top: 4px; }
.calm .end-turn-area > span { margin-top: 3px; }

.calm .fullscreen-toolbar { left: auto; right: 18px; }
.calm .fullscreen-toolbar button { width: 109px; padding-inline: 4px; }
.calm .battle-topline { width: 500px; }
#shell:fullscreen { display: grid; place-items: center; background: #222; }
#shell:fullscreen .outside-bar { display: none; }

.home-team-options {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 14px 0 10px;
}
.home-team-options .home-rules { margin: 0; }
.random-team-button {
  border: 1px solid #e2b67d;
  border-radius: 5px;
  padding: 5px 11px;
  background: #43251b;
  color: #fff0d1;
  font: 13px FranklinBold;
}
.random-team-button:hover { background: #613620; }

/* Classic client geometry is measured in its 770 × 560 stage. */
.battle-effects{--effect-color:#ffc568;position:absolute;inset:0;z-index:8;pointer-events:none}
.battle-effects svg{width:100%;height:100%;overflow:visible}
.effect-lightning{--effect-color:#88e7ff}
.effect-chakra{--effect-color:#69cfff}
.effect-fire{--effect-color:#ff9357}
.effect-heal{--effect-color:#97efbb}
.effect-guard{--effect-color:#b8b7ff}
.attack-charge{fill:none;stroke:var(--effect-color);stroke-width:4;transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 0 7px var(--effect-color));animation:attack-charge var(--attack-travel) ease-out both}
.attack-flight{fill:none;stroke:var(--effect-color);stroke-width:5;stroke-linecap:round;stroke-dasharray:.18 .82;animation:action-travel var(--attack-travel) ease-in both;filter:drop-shadow(0 0 5px var(--effect-color))}
.attack-projectile{fill:#fff7e8;stroke:var(--effect-color);stroke-width:5;filter:drop-shadow(0 0 9px var(--effect-color))}
.effect-chakra .attack-projectile{stroke-dasharray:5 3;stroke-width:9}
.effect-fire .attack-projectile{stroke-width:12}
.lightning-bolt{fill:none;stroke:var(--effect-color);stroke-width:3;stroke-linejoin:bevel;filter:drop-shadow(0 0 6px #fff);stroke-dasharray:900;stroke-dashoffset:900;animation:lightning-reveal var(--attack-travel) ease-out both}
.attack-impact{color:var(--effect-color)}
.attack-impact.healing{color:#8df1ad}
.attack-impact.blocked,.attack-impact.support{color:#beb8ff}
.attack-impact.debuff{color:#dbaaff}
.impact-block{fill:#fff1c7;stroke:#302128;stroke-width:3;paint-order:stroke;font:19px FranklinBold}
.impact-ring{fill:none;stroke:currentColor;stroke-width:5;transform-origin:0 0;animation:impact-wave .75s ease-out both}
.impact-core{fill:currentColor;animation:impact-flare .5s ease-out both}
.impact-sparks{stroke:currentColor;stroke-width:4;stroke-linecap:round;transform-origin:0 0;animation:impact-scatter .7s ease-out both}
.impact-slash{fill:none;stroke:#fff8dc;stroke-width:7;stroke-linecap:round;animation:impact-flare .55s ease-out both}
.healing-cross{fill:none;stroke:#e4ffe8;stroke-width:7;stroke-linecap:round;animation:healing-rise .8s ease-out both}
.guard-shield{fill:#464a8a66;stroke:#e4dfff;stroke-width:3;animation:shield-appear .7s ease-out both}
.attack-announcement{position:absolute;top:387px;left:213px;width:355px;display:flex;gap:9px;align-items:center;padding:7px 11px;border:1px solid var(--effect-color);border-radius:5px;background:#14252def;color:#fff5d8;box-shadow:0 3px 15px #0008;animation:attack-title .18s ease-out both;text-transform:none}
.attack-announcement img{width:32px;height:32px;border:1px solid var(--effect-color)}
.attack-announcement span{min-width:0}
.attack-announcement small{display:block;color:var(--effect-color);font:10px Franklin;letter-spacing:.8px;text-transform:uppercase}
.attack-announcement b{display:block;font:16px FranklinBold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.enemy-effect .attack-announcement{background:#351e28ef;border-left:4px solid #f29983}
.reference .battle-portrait.acting{outline:3px solid #ffdb8e;z-index:5}
.reference .battle-portrait.acting.windup{animation:team-action .52s ease-out both}
.reference .battle-portrait.enemy.acting.windup{animation-name:team-action-enemy}
.reference .battle-portrait.impacted.damage{outline:3px solid #ff9e75;animation:impact-shake .35s ease-out}
.reference .battle-portrait.impacted.healing{outline:3px solid #a5eaaa}
.reference .battle-portrait.incoming-target{outline:3px dashed #ffe5a4}
.reference .impact-badge{bottom:auto;top:-24px;font-size:19px;padding:4px 8px;border:1px solid #ffe2aa;animation:damage-rise 1s ease-out both;z-index:10}
.reference .action-tag{top:auto;bottom:19px;font-size:10px}
.reference .skill-button.performing{outline:3px solid #ffde85;box-shadow:0 0 15px #ffe495;z-index:4}
.reference .skill-button.performing img{opacity:1;filter:none}
@keyframes attack-charge{from{transform:scale(.6);opacity:.25}to{transform:scale(1.2);opacity:1}}
@keyframes impact-wave{from{transform:scale(.35);opacity:1}to{transform:scale(1.6);opacity:0}}
@keyframes impact-flare{from{opacity:.8}to{opacity:0}}
@keyframes impact-scatter{from{transform:scale(.5);opacity:1}to{transform:scale(1.5);opacity:0}}
@keyframes lightning-reveal{to{stroke-dashoffset:0}}
@keyframes healing-rise{from{transform:translateY(12px);opacity:1}to{transform:translateY(-28px);opacity:0}}
@keyframes shield-appear{0%{transform:scale(.7);opacity:0}30%{transform:scale(1);opacity:1}100%{opacity:0}}
@keyframes attack-title{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes damage-rise{0%{opacity:0;transform:translate(-50%,8px) scale(.8)}20%,65%{opacity:1;transform:translate(-50%,-8px) scale(1)}100%{opacity:0;transform:translate(-50%,-27px)}}
@media(prefers-reduced-motion:reduce){
  .attack-projectile,.lightning-bolt,.impact-core,.impact-sparks,.impact-slash{display:none}
  .attack-flight{stroke-dasharray:.03 .02;opacity:.6}
  .impact-ring{opacity:.65;stroke-width:3}
  .reference .impact-badge{opacity:1}
}
body { justify-content: flex-start; }
#shell { margin: 0; }
#game.reference.battle { background: #619a67 url('assets/reference-battle-bg.png') 0 0 / 770px 560px; }
.reference .battle-art { display: none; }
.reference .battle-portrait.enemy { left: 659px; }
.reference .battle-player { padding-top: 12px; }
.reference .battle-player.enemy { padding-left: 56px; }
.reference .skill-strip { z-index: 1; transition: transform .18s ease-out; }
.reference .skill-strip.opponent-planning { transform: translateX(-77px); }
.reference .queue-holder, .reference .battle-portrait { z-index: 2; }
.reference .queue-holder { background: #414141; color: #999; }
.reference .skill-button .cooldown { color: #111; font-size: 40px; background: #fff4; text-shadow: none; }
.reference .health { top: 78px; color: #111; }
.reference .effect-icon { width: 22px; height: 22px; padding: 0; display: grid; place-items: center; }
.reference .effect-icon img { width: 20px; height: 20px; }
.reference .queued-effects { position: absolute; left: 82px; top: 24px; display: flex; gap: 2px; }
.reference .enemy .queued-effects { left: auto; right: 82px; }
.reference .queued-effects .effect-icon { opacity: .8; }
.reference .turn-preview-button { position: absolute; left: 388px; top: 408px; }
.inspection-skills { position: absolute; left: 254px; bottom: calc(100% - 12px); text-align: center; }
.inspection-skills > span { color: #fff; text-shadow: 1px 1px 2px #111, -1px -1px 2px #111; }
.inspection-skills > div { display: flex; gap: 4px; padding: 4px; background: #e7ddbd; border: 1px solid #311a13; border-radius: 4px 4px 0 0; }
.inspection-skills button { display: grid; padding: 0; border: 1px solid #311a13; background: #302b1e; }
.inspection-skills img { width: 22px; height: 22px; }
.reference .battle-controls { left: 8px; top: 427px; }
.reference .battle-controls button { height: 41px; padding-left: 40px; }
.reference .battle-controls button:first-child { transform: translateX(43px); padding-left: 20px; }
.reference .battle-controls button:nth-child(2) { transform: translateX(21px); padding-left: 18px; }
.reference .battle-controls .battle-volume { padding-left: 26px; }
.reference-tools { position: absolute; z-index: 12; top: 3px; right: 7px; display: flex; gap: 3px; }
.reference-tools button { border: 0; background: transparent; color: white; font: 12px Franklin; }
.reference.battle .reference-tools { right: 4px; }
.reference.battle .reference-tools [data-action="sound"] { display: none; }
.reference-random { position: absolute; right: 8px; top: 199px; }
.reference .info-enemy-team { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.reference .info-enemy-team button { padding: 0; border: 1px solid #111; background: #e7ddbd; }
.reference .info-enemy-team img { width: 54px; height: 54px; }
.reference .opponent-info h2 { margin: 0; color: #a73021; font: 15px FranklinBold; }
.reference .opponent-info p { margin: 2px 0; }
.reference .overlay:has(.reference-payment) { align-items: start; justify-content: start; }
.reference-payment {
  position: absolute; top: 100px; left: 203px; width: 391px; height: 290px;
  padding: 44px 34px 30px 79px;
  background: url('assets/modal.png') center / 100% 100%;
  color: #111; font: 12px FranklinBold, sans-serif;
}
.reference-payment h1 { text-align: center; font-size: 15px; margin: 0 0 10px; }
.reference-payment h1 strong { color: #a32c1e; }
.payment-columns { display: flex; justify-content: space-between; padding-right: 16px; }
.payment-row { display: grid; grid-template-columns: 81px 20px 25px 25px 83px 16px; align-items: center; min-height: 18px; }
.payment-row span { white-space: nowrap; }
.payment-row b { text-align: center; }
.payment-row button { border: 0; background: none; font: bold 16px Arial; padding: 0; }
.payment-row button:disabled { opacity: .35; }
.payment-skills { display: flex; gap: 8px; height: 38px; margin: 10px 0 8px 5px; }
.payment-skills img { width: 36px; height: 36px; border: 1px solid #16120d; }
.payment-actions { display: flex; justify-content: space-between; padding: 0 30px 0 27px; }
.payment-actions button { width: 90px; height: 27px; border: 1px solid #362416; background: #f6e7bf; font: 17px FranklinBold; text-transform: uppercase; }
.payment-actions button:disabled { opacity: .55; }
.reference .dialog.classic-popup {
  position: absolute; top: 100px; left: 203px; width: 391px; height: 290px;
  max-height: none; padding: 44px 34px 28px 79px; border: 0; box-shadow: none;
  background: url('assets/modal.png') center / 100% 100%;
  text-align: center; text-transform: uppercase; overflow: hidden;
}
.reference .classic-popup h1 { margin-bottom: 15px; font-size: 15px; }
.reference .classic-popup .close { right: 16px; top: 26px; }
.reference .classic-popup input { width: 90%; }
.reference .classic-popup .dialog-actions { justify-content: center; }
.reference .classic-popup .paper-button { font-weight: 700; text-transform: uppercase; }
.classic-search-art, .reference .surrender-art {
  width: 192px; height: 125px; margin: 0 auto; display: block;
}
.classic-search-art { position: relative; background: url('assets/search-eye.png') center / cover; }
.classic-search-art::after {
  content: ''; position: absolute; top: 29px; left: 69px; width: 63px; height: 63px;
  background: url('assets/search-pupil.png') center / contain; animation: spin 1s linear infinite;
}
.reference .result-dialog {
  position: absolute; left: 64px; top: 115px; width: 642px; height: 322px; max-height: none;
  padding: 0; border: 0; box-shadow: none; background: url('assets/result-panel.png') center / 100% 100%;
  text-transform: uppercase; overflow: hidden;
}
.reference .result-dialog .result-title {
  position: absolute; left: 338px; top: 36px; width: 271px; margin: 0; text-align: center;
  font: 42px FranklinBold; color: #9e302a;
}
.reference .result-art { position: absolute; left: 81px; top: 47px; width: 236px; height: 226px; }
.reference .result-copy { position: absolute; left: 340px; top: 80px; width: 273px; }
.reference .result-copy p { font: 12px/1.2 Franklin; margin-bottom: 14px; }
.reference .result-dialog .dialog-actions { position: absolute; left: 338px; bottom: 42px; width: 271px; justify-content: center; }
.reference .result-dialog .paper-button { border: 0; background: none; color: #9e302a; text-transform: uppercase; font: 22px FranklinBold; }