/* Ninja Idle: transição landing → motor atual, criação e HUD simplificada. */
#screen-loading{background:#100b0c url("/assets/landing-reference.png") center / cover no-repeat;isolation:isolate;color:#ead8bb;}
#screen-loading::before{content:"";position:absolute;inset:0;background:linear-gradient(125deg,#0a0708f2 8%,#150d11e7 52%,#0a0708d9 100%);pointer-events:none;}
#screen-loading .loading-box{position:relative;z-index:1;width:min(520px,calc(100vw - 36px));padding:clamp(25px,5vw,55px) clamp(22px,4vw,44px);text-align:center;border-radius:17px;border:1px solid #8a5d44ba;background:linear-gradient(145deg,#1c1418ef,#110b0eec);box-shadow:0 25px 75px #000b;}
#screen-loading .ni-loading-mark{color:#d79962;font:42px Georgia,serif;margin:0 auto 8px;line-height:1.2;}
#screen-loading .logo-big{font:900 clamp(32px,7vw,52px) "Barlow Condensed",Impact,sans-serif;letter-spacing:.14em;color:#f4e0c5;text-shadow:0 5px 16px #000;}
#screen-loading .logo-big span{color:#d76755;}
#screen-loading .ni-loading-overline{font:700 10px "Cinzel",Georgia,serif;color:#ceaa89;letter-spacing:.22em;margin:10px 0 5px;}
#screen-loading .ni-loading-subtitle{font-size:14px;line-height:1.55;color:#d4bba7;margin:11px 0 4px;}
#screen-loading .loading-bar{height:9px;background:#35262a;border:1px solid #7b514a;border-radius:20px;margin:25px 0 11px;overflow:hidden;}
#screen-loading #loading-fill{background:linear-gradient(90deg,#b94a45,#df9968,#efd2a0);transition:width .18s ease;}
#screen-loading #loading-text{font-size:12px;line-height:1.45;letter-spacing:.02em;color:#cfb6a5;min-height:2.5em;}
#screen-loading .ni-loading-foot{font:700 9px "Cinzel",Georgia,serif;letter-spacing:.17em;color:#967c73;margin-top:25px;}
/* Personagem: clãs aparecem sempre abaixo das especializações, com preview à direita. */
#screen-create{background:radial-gradient(ellipse at top,#302025 0,#111016 67%);color:#ebdfcf;}
#screen-create .create-wrap{max-width:1240px;padding:clamp(18px,3vw,34px) clamp(14px,3vw,32px) 90px;}
#screen-create .create-body{grid-template-columns:minmax(0,1fr) minmax(245px,310px);grid-template-areas:"voc detail" "clans detail";align-items:start;gap:12px 22px;}
#screen-create #voc-grid{grid-area:voc;}
#screen-create .origin-choice{grid-area:clans;grid-column:auto;margin:0;padding:18px;background:#21191ccf;border-color:#a27365;}
#screen-create #voc-detail{grid-area:detail;top:20px;position:sticky;align-self:start;background:#21191de8;border-color:#835748;}
#screen-create .origin-clan-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
#screen-create .origin-clan-card{min-height:156px;justify-content:center;background:#211b22;border-color:#685047;color:#f1e2cf;transition:background .15s,border-color .15s;}
#screen-create .origin-clan-card small{color:#d4b6a2;}
#screen-create .origin-clan-card.selected{border:2px solid #e8bd7b;background:#45302b;box-shadow:0 0 0 2px #d9a65e55;}
#screen-create .origin-clan-card:focus-visible{outline:3px solid #ffe7b4;outline-offset:2px;}
#screen-create .origin-clan-kekkei{color:#f4c990;}
#screen-create .create-footer{flex-wrap:wrap;}
@media(max-width:850px){#screen-create .create-body{grid-template-columns:1fr;grid-template-areas:"voc" "clans" "detail"}#screen-create #voc-detail{position:static}#screen-create .create-footer{justify-content:stretch}#screen-create .create-footer .field{flex:1 1 150px}#screen-create .create-footer .field :is(input,select){min-width:0;width:100%;}}
@media(max-width:600px){#screen-create .origin-clan-grid{grid-template-columns:1fr}#screen-create .origin-clan-card{min-height:0;align-items:flex-start;text-align:left;padding:13px 15px}#screen-create .origin-clan-card small{font-size:13px}#screen-create .create-footer>button{flex:1 1 135px}}
/* Só quatro atalhos permanecem no topo: Hunt, Bolsa, Técnicas e Time. Sem barra arrastável. */
#ninja-hud-v2 .ni-icons{overflow-x:visible;max-width:none;width:max-content;gap:4px;padding:4px 6px;}
#ninja-hud-v2 .ni-icon{flex:0 0 66px;width:66px;min-width:0;}
#ninja-hud-v2 .ni-topbar{justify-content:center;}
#ninja-hud-v2 .ni-quick-actions{right:0;gap:4px;}
@media(max-width:1100px){#ninja-hud-v2 .ni-identity{display:none}#ninja-hud-v2 .ni-topbar{justify-content:flex-start}#ninja-hud-v2 .ni-icon{flex-basis:58px;width:58px}}
@media(max-width:650px){#ninja-hud-v2 .ni-topbar{inset:7px 6px auto}#ninja-hud-v2 .ni-icons{gap:2px;padding:3px}#ninja-hud-v2 .ni-icon{flex-basis:44px;width:44px;padding:4px 1px}#ninja-hud-v2 .ni-icon img{width:24px;height:24px}#ninja-hud-v2 .ni-icon span{font-size:9px}#ninja-hud-v2 .ni-quick[data-ni-action="focus"]{display:none}#ninja-hud-v2 .ni-quick:not(.ni-all-menu){width:29px}#ninja-hud-v2 .ni-all-menu{width:43px;flex-basis:43px}}
@media(max-width:370px){#ninja-hud-v2 .ni-icon{flex-basis:39px;width:39px}#ninja-hud-v2 .ni-icon span{font-size:8px}}
/* Legibilidade do mundo e pontos de hunt — arte mantém escala e hotspots alinhados. */
#screen-game #panel-map.active{width:min(1680px,calc(100vw - 16px));max-width:calc(100vw - 16px);box-sizing:border-box;padding:clamp(10px,1.6vw,22px);}
#screen-game #panel-map .ni-world-content{overflow-x:auto;overflow-y:visible;scrollbar-width:thin;overscroll-behavior-x:contain;}
#screen-game #panel-map .ni-world-stage--curated{width:100%;min-width:900px;max-width:none;aspect-ratio:1672/941;height:auto;}
#screen-game #panel-map .ni-region-stage.ni-region-user-art{width:100%;min-width:860px;max-width:none;aspect-ratio:1672/941;height:auto;}
#screen-game #panel-map .ni-world-title h2{font-size:clamp(24px,2.3vw,32px);}
#screen-game #panel-map .ni-world-title small{font-size:11px;}
#screen-game #panel-map .ni-world-tools :is(input,select){font-size:14px;min-height:40px;}
#screen-game #panel-map .ni-world-region-index{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:9px;margin:15px 0 12px;}
#screen-game #panel-map .ni-world-region-link{min-height:65px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding:11px 14px;border:1px solid #8d785b;border-radius:9px;background:#1b3028;color:#f4e6c8;text-align:left;cursor:pointer;}
#screen-game #panel-map .ni-world-region-link strong{font-size:15px;line-height:1.25;}
#screen-game #panel-map .ni-world-region-link small{font-size:12px;color:#d7bf95;}
#screen-game #panel-map .ni-world-region-link:hover,#screen-game #panel-map .ni-world-region-link:focus-visible{border-color:#f2d08f;background:#375042;outline-offset:2px;}
#screen-game #panel-map .ni-world-foot{font-size:13px;line-height:1.5;color:#c2d0c3;}
#screen-game #panel-map .ni-hunt-balloon-label strong{font-size:13px;line-height:1.28;}
#screen-game #panel-map .ni-hunt-balloon-label small{font-size:11px;}
#screen-game #panel-map .ni-region-detail{width:min(320px,36%);padding:17px;}
#screen-game #panel-map .ni-region-detail-top h3{font-size:22px;}
#screen-game #panel-map .ni-region-detail-top p{font-size:13px;}
#screen-game #panel-map .ni-region-spot{padding:13px 12px;gap:7px;}
#screen-game #panel-map .ni-region-spot strong{font-size:14px;line-height:1.3;}
#screen-game #panel-map .ni-region-spot small,#screen-game #panel-map .ni-region-spot span{font-size:12px;}
@media(max-width:760px){#screen-game #panel-map.active{left:6px;width:calc(100vw - 12px);max-width:calc(100vw - 12px);}#screen-game #panel-map .ni-world-region-index{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}#screen-game #panel-map .ni-world-region-link{padding:10px;min-height:60px}#screen-game #panel-map .ni-world-region-link strong{font-size:13px}#screen-game #panel-map .ni-region-detail{width:auto;left:8px;right:8px;max-height:56%;}#screen-game #panel-map .ni-region-detail-top h3{font-size:19px}}
@media(prefers-reduced-motion:reduce){#screen-loading #loading-fill{transition:none}}


/* Map display FIX: the old HUD's generic drawer selector (two IDs and
   three classes) was winning over #panel-map.active width declarations.
   Override it at matching/higher specificity and use the entire game area.
   The world image now fits inside the real visible overlay, not a 570px drawer. */
#screen-game .main > #panel-map.panel.active{
 position:absolute;
 top:8px;right:8px;bottom:8px;left:8px;
 width:auto;max-width:none;height:auto;
 padding:18px clamp(11px,1.8vw,24px) 20px;
 z-index:48;
 overflow-x:hidden;overflow-y:auto;
 overscroll-behavior:contain;
 box-sizing:border-box;
 background:linear-gradient(155deg,#10201ef9,#0b1719fc);
 border:1px solid #ab946c;
 border-radius:13px;
 scrollbar-width:thin;
}
#screen-game .main > #panel-map.panel.active .ni-world-content{
 width:100%;min-width:0;max-width:100%;
 overflow-x:visible;overflow-y:visible;
}
#screen-game .main > #panel-map.panel.active .ni-world-stage--curated,
#screen-game .main > #panel-map.panel.active .ni-region-stage.ni-region-user-art{
 display:block;
 width:100%;min-width:0;max-width:100%;
 height:auto;aspect-ratio:1672/941;
 margin:0;
 box-sizing:border-box;
 overflow:hidden;
}
/* Painted banners and their buttons use the same percentage coordinate system,
   so resize together without cropping the right-hand regions. */
#screen-game .main > #panel-map.panel.active :is(.ni-world-art,.ni-region-art){
 width:100%;height:100%;object-fit:fill;
}
#screen-game .main > #panel-map.panel.active .ni-world-heading{
 padding-right:47px;
}
/* The map is a temporary fullscreen exploration layer: avoid counter,
   character vitals, and toolbar covering the illustrated regions. */
#ninja-hud-v2.ni-map-open :is(.ni-topbar,.ni-counter,.ni-status,.ni-notice,.ni-menu-drawer){
 display:none!important;
}
#ninja-hud-v2.ni-map-open .ni-close-panel{
 display:grid;place-items:center;
 position:absolute;top:14px;right:16px;left:auto;
 width:38px;height:38px;padding:0;
 z-index:100;pointer-events:auto;
 border:1px solid #d8bd86;border-radius:10px;
 background:#294038;color:#f7e9cd;
 font-size:25px;font-weight:600;
 box-shadow:0 6px 18px #0009;
}
#ninja-hud-v2.ni-map-open .ni-close-panel:focus-visible{
 outline:3px solid #ffe1a1;outline-offset:2px;
}
@media(max-width:650px){
 #screen-game .main > #panel-map.panel.active{
  inset:4px;
  padding:12px 8px 19px;
  border-radius:8px;
 }
 #screen-game .main > #panel-map.panel.active .ni-world-heading{padding-right:42px}
 #ninja-hud-v2.ni-map-open .ni-close-panel{
  top:10px;right:10px;width:36px;height:36px;
 }
 /* World preview stays completely visible, with readable region names in
    the index below rather than clipping the painted map on mobile. */
 #screen-game .main > #panel-map.panel.active .ni-world-stage--curated{
  min-width:0;
 }
}