/* Raster art supplies the frame and controls. Every label, meter and player value stays live. */
.nw-game{width:100%;max-width:none;min-width:0;margin:0;grid-template-rows:auto minmax(0,1fr) var(--chat-height);container-type:inline-size}
/* Let the cutout edges reveal the page instead of painting a purple rectangle behind them. */
.nw-game,.nw-game[data-scene]{background:transparent}
.nw-header{position:relative;aspect-ratio:1254/255;isolation:isolate;direction:ltr;z-index:6;min-width:0;background:transparent}
.header-art,.header-mobile-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}
.header-mobile-art{display:none}
.header-logo{position:absolute;left:2.6%;top:1%;width:18.1%;height:53%;border-radius:8px}
.header-logo img{display:none}
.nw-header .nw-top{position:absolute;left:22.3%;right:2.4%;top:8%;height:39%;padding:0;display:flex;align-items:center;gap:1cqw;background:none;filter:none;z-index:2}
.nw-header #game-navigation{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5cqw;height:100%;flex:1}
.header-tools{display:flex;align-items:center;justify-content:flex-end;gap:.45cqw;width:17cqw;height:79%;flex:none}
.header-button{position:relative;display:block;height:100%;width:100%;padding:0;border:0;background:none;color:#fff1d2;flex:1;min-width:0;border-radius:7px;filter:drop-shadow(0 2px 1px #160a0677);transition:filter .15s,transform .15s}
.header-button svg{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.header-button span{position:absolute;left:8%;right:8%;bottom:9%;height:19%;display:flex;align-items:center;justify-content:center;font-size:clamp(9px,1.22cqw,18px);font-weight:800;line-height:1;white-space:nowrap;text-shadow:0 2px 1px #261307,1px 0 2px #261307;direction:rtl}
.header-button:hover{filter:brightness(1.2) drop-shadow(0 0 5px #ffd57b77);transform:translateY(-1px)}
.header-button[aria-current=page]{filter:brightness(1.2) drop-shadow(0 0 3px #ffda59) drop-shadow(0 0 1px #ffda59)}
.header-button:focus-visible,.header-logo:focus-visible,.nw-header .clan-crest:focus-visible{outline:2px solid #fff0a7;outline-offset:2px}
.header-tools .header-button span{font-size:clamp(7px,.75cqw,11px)}
.header-tools .header-button{flex:0 0 5.36cqw}
.nw-header .nw-home{display:block}
.nw-header .nw-hud{position:absolute;inset:0;display:block;padding:0;background:none;filter:none;direction:ltr;pointer-events:none;z-index:1}
.nw-header .clan-crest{position:absolute;left:5.45%;top:59%;width:7.5%;height:34.5%;padding:0;border:0;box-shadow:none;border-radius:50%;background:transparent;overflow:hidden;pointer-events:auto;cursor:pointer}
.nw-header .clan-crest svg{width:100%;height:100%;margin:0;display:block}
.portrait-ring{display:none}
.clan-identity{position:absolute;left:14.65%;top:59%;width:5.15%;height:33.8%;text-align:center;pointer-events:auto}
#player-name{position:absolute;inset:0 0 auto;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:clamp(10px,1.5cqw,23px);font-weight:800;line-height:1.25;text-shadow:0 2px 2px #1d1008}
.nw-header #selected-level{position:absolute;left:0;right:0;top:47%;height:42%;display:flex;align-items:center;justify-content:center;font-size:clamp(12px,1.7cqw,26px);font-weight:900;color:#3e290f;text-shadow:0 1px #ffe78e;line-height:1;direction:ltr}
.nw-header .health-meter,.nw-header .xp-meter{position:absolute;left:28.95%;width:36.05%;height:9.6%;border:0;border-radius:999px;background:transparent;box-shadow:none;overflow:hidden;pointer-events:auto}
.nw-header .health-meter{top:63%}
.nw-header .xp-meter{top:79.2%}
.nw-header .health-meter i,.nw-header .xp-meter i{position:absolute;inset:0 auto 0 0;height:100%;border-radius:999px;box-shadow:inset 0 2px 1px #fff8,inset 0 -3px 2px #0004;transition:width .6s ease}
/* The moving shine is clipped by the current fill, including its rounded leading edge. */
.nw-header .health-meter i{background:linear-gradient(#ff6053,#e72a29 45%,#bd101b);overflow:hidden}
.nw-header .health-meter.recovering i:after{border-radius:inherit}
.nw-header .xp-meter i{background:linear-gradient(#92e4ff,#3fbaff 42%,#2663d7);min-width:0}
.nw-header .health-meter bdi,.nw-header .xp-meter bdi{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0;font-size:clamp(9px,1.38cqw,21px);font-weight:800;line-height:1;color:#fff9eb;text-shadow:0 1px 3px #180c07,1px 0 2px #180c07;white-space:nowrap;direction:ltr}
.xp-symbol{position:absolute;left:25.18%;top:79%;width:2.65%;height:10.8%;display:flex;align-items:center;justify-content:center;font-size:1.05cqw;font-weight:1000;font-style:italic;color:#65c6ff;-webkit-text-stroke:.08cqw #142d43;text-shadow:0 2px #172534;line-height:1}
.nw-header #health-recovery{position:absolute;right:3%;top:0;height:100%;display:flex;align-items:center;font-size:clamp(6px,.75cqw,11px);line-height:1;color:#ffecbd;text-shadow:0 1px 2px #591b0e}
.nw-header .health-meter.recovering i{transition:width .92s linear}
.hud-resource{position:absolute;top:67%;height:22%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25cqw;min-width:0;text-align:center;pointer-events:auto}
.hud-resource.gold-resource{left:74.3%;width:6.6%}
.hud-resource.ninja-resource{left:89.25%;width:5.1%}
.hud-resource b{font-size:clamp(12px,1.95cqw,29px);font-weight:800;line-height:1.05;max-width:100%;white-space:nowrap;color:#fff4d8;text-shadow:0 2px 2px #211006;direction:ltr}
.hud-resource b[data-digits=medium]{font-size:1.45cqw}
.hud-resource b[data-digits=long]{font-size:1.05cqw}
.hud-resource small{font-size:clamp(8px,1.12cqw,16px);font-weight:bold;line-height:1.25;color:#f6dba5;direction:rtl}
.hud-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.nw-game[data-scene=settings]{grid-template-rows:auto minmax(0,1fr)}
html[dir=ltr] .header-button span,html[dir=ltr] .hud-resource small{direction:ltr}
html[dir=ltr] .nw-header #health-recovery{direction:ltr}
html[dir=ltr] .header-button span{font-size:clamp(8px,1.08cqw,16px)}
html[dir=ltr] .header-tools .header-button span{font-size:clamp(7px,.75cqw,11px)}
@media(max-width:600px){
 .nw-header{height:211px;aspect-ratio:auto;border-bottom:3px solid #c89242;border-radius:0 0 16px 16px;overflow:hidden;background:#402718}
 .header-art{display:none}.header-mobile-art{display:block}
 .header-logo{left:10px;top:4px;width:91px;height:55px}.header-logo img{display:block;width:100%;height:100%;object-fit:contain}
 .nw-header .nw-top{left:10px;right:10px;top:65px;height:58px;gap:7px}
 .nw-header #game-navigation{gap:3px}.header-tools{width:99px;gap:3px;height:46px}
 .header-tools .header-button{flex-basis:31px}
 .header-button span,html[dir=ltr] .header-button span{font-size:8px;bottom:9%}
 .header-tools .header-button span{display:none}
 .nw-header .clan-crest{left:19px;top:139px;width:52px;height:52px}
 .portrait-ring{display:block;position:absolute;left:12px;top:133px;width:66px;height:66px;pointer-events:none;clip-path:ellipse(46% 49% at 50% 50%)}
 .clan-identity{left:112px;top:12px;width:73px;height:43px;text-align:left}
 #player-name{font-size:14px;line-height:18px}
 .nw-header #selected-level{top:22px;left:0;right:auto;width:auto;height:20px;color:#ffe398;font-size:13px;text-shadow:0 1px #251506;gap:4px}
 .nw-header #selected-level:before{content:'★';color:#ffcd47}
 .hud-resource{top:13px;height:40px;gap:3px}.hud-resource.gold-resource{left:auto;right:54px;width:90px}.hud-resource.ninja-resource{left:auto;right:10px;width:44px}
 .hud-resource b,.hud-resource b[data-digits=medium],.hud-resource b[data-digits=long]{font-size:17px}.hud-resource b[data-digits=long]{font-size:11px}.hud-resource small{font-size:9px}
 .nw-header .health-meter,.nw-header .xp-meter{left:100px;width:calc(100% - 118px);height:21px;border:1px solid #d09c50;background:#201a1b;box-shadow:0 0 0 2px #412414}
 .nw-header .health-meter{top:142px}.nw-header .xp-meter{top:176px}
 .nw-header .health-meter bdi,.nw-header .xp-meter bdi{font-size:11px}
 .xp-symbol{left:78px;top:179px;width:20px;height:16px;font-size:12px;-webkit-text-stroke:0}
 .nw-header #health-recovery{font-size:7px;right:7px}
}
@media(max-width:380px){.clan-identity{left:102px;width:62px}.hud-resource.gold-resource{right:51px;width:76px}.header-tools{width:88px}.header-tools .header-button{flex-basis:27px}.header-button span,html[dir=ltr] .header-button span{font-size:7px}.nw-header #health-recovery{display:none}}
@media(prefers-reduced-motion:reduce){.header-button,.nw-header .health-meter i,.nw-header .xp-meter i{transition:none!important}.health-meter.recovering i:after{animation:none}}