/* SAKATA MONSTERS V16 | WORLD POLISH
   A single restrained visual language across UI, art and interaction. */
:root{--v16-ink:#070b16;--v16-deep:#111a2b;--v16-gold:#e9ca95;--v16-ivory:#f7eee0;--v16-silver:#b9c9dd;--v16-violet:#b8a0f7;--v16-border:rgba(212,198,170,.26)}
html{background:#080d18}body{background:#090f1e!important;color:#f5f0eb;-webkit-font-smoothing:antialiased}
body:before{opacity:.19!important;background:linear-gradient(180deg,#070b15b5,#070b15e6),url('assets/scenes/home.webp') center top/cover no-repeat!important}
#game{max-width:560px;margin:0 auto;padding-bottom:calc(100px + env(safe-area-inset-bottom));isolation:isolate}
.screen{max-width:560px!important;padding-left:16px!important;padding-right:16px!important}
.top{padding:12px 13px!important;border-bottom:1px solid #d4af7738;background:linear-gradient(115deg,#080d1cef,#1d1533e8)!important;box-shadow:0 12px 30px #060a18af;position:relative;z-index:12}
.brandname{font-family:Georgia,serif;letter-spacing:.07em;font-size:clamp(13px,3.5vw,18px)!important;color:var(--v16-ivory)}
.brandtag{font-size:8px!important;letter-spacing:.22em!important;color:#d6b990!important}
.brandmark{box-shadow:0 0 21px #ac79e53b inset;border:1px solid #e2c38b8c;background:#1a1831}
.sound,.sfx-toggle{border-color:#d5c29c57!important;background:#1a2037!important;color:#f6ddba!important;min-height:37px}
.wallet{margin:0 0 7px;background:linear-gradient(140deg,#111a2edb,#181a2de8)!important;border:1px solid var(--v16-border)!important;box-shadow:0 8px 30px #0004,inset 0 1px #ffffff13}
.wallet>div{font-variant-numeric:tabular-nums}.wallet small{color:#b6aec8!important}
.navbar{left:50%!important;transform:translateX(-50%);width:min(100%,560px)!important;border-radius:17px 17px 0 0;background:linear-gradient(180deg,#192136f7,#090e1cfb)!important;box-shadow:0 -12px 32px #060b1ecc;border-top:1px solid #e0bd814a!important;padding-bottom:env(safe-area-inset-bottom)}
.navbar .nav{color:#acb6c8!important;position:relative;transition:color .16s ease,transform .16s ease}
.navbar .nav.active{color:#ffddb0!important}.navbar .nav.active:before{content:'';position:absolute;top:0;left:25%;right:25%;height:2px;background:linear-gradient(90deg,transparent,#f0c984,transparent);box-shadow:0 0 10px #efc886}
.navbar .navicon{filter:drop-shadow(0 2px 9px #ba91f43d)}
.sectionline{margin-top:25px!important;margin-bottom:12px!important}.sectionline h3{font-family:Georgia,serif;letter-spacing:.03em;color:#f3e4c9;font-size:17px!important}.sectionline:before{content:'';width:3px;height:17px;background:linear-gradient(#ddbf83,#9364cb);display:inline-block;border-radius:3px;margin-right:8px}
.eyebrow,.v11-section-label{font-size:10px!important;letter-spacing:.21em;color:#e5c88f!important}
.h2{font-family:Georgia,serif;color:#f5e8d5}
.btn{border-radius:11px!important;min-height:44px;font-weight:800;transition:transform .12s ease,filter .12s ease,box-shadow .12s ease}
.btn:not(:disabled):active,[data-action]:not(:disabled):active{transform:scale(.975);filter:brightness(1.13)}
.btn:not(.outline):not(.secondary){background:linear-gradient(125deg,#f5dbac,#bda0ea)!important;color:#211b2e!important;box-shadow:0 5px 22px #d2a9ee23,inset 0 1px #ffffff87;border:1px solid #f3dcbd66!important}
.btn.secondary{background:linear-gradient(120deg,#273856,#191d35)!important;border-color:#94a2ca5e!important;color:#f4e9e8!important}
.panel,.v11-note,.v8-panel,.v11-mission-box{border:1px solid #d5bf9860!important;background:linear-gradient(148deg,#202840ee 0%,#121928f2 85%)!important;box-shadow:0 7px 24px #0207134f,inset 0 1px #ffffff13;border-radius:16px!important}
.badge{border:1px solid #d1b58169!important;background:#2c2943bb!important;color:#f2d9b1!important}
.v11-home-stage{min-height:407px!important;margin:0 -16px 13px!important;background:linear-gradient(180deg,#070a1800 8%,#0d142b77 45%,#0a0d1cf2 99%),url('assets/scenes/home.webp') center 47%/cover!important;border:0!important;border-bottom:1px solid #dab67a50!important;box-shadow:0 18px 46px #0007;overflow:hidden}
.v11-home-stage:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 86% 57%,#9b72ff37,transparent 48%),linear-gradient(90deg,#080b1cd8,transparent 75%)}
.v11-hero-head{z-index:3!important;width:71%!important;padding:27px 0 28px 21px!important}
.v11-hero-head h1{margin-top:30px;font-size:clamp(28px,8vw,42px)!important;color:#fff2d7;text-shadow:0 5px 22px #000f;line-height:1.32;letter-spacing:.02em}
.v11-hero-head p{color:#e9e3ec!important;line-height:1.85}
.v11-home-beast{width:78%!important;right:-21%!important;bottom:18px!important;height:74%!important;filter:drop-shadow(0 0 21px #a481ff7a)!important;opacity:.93!important}
.v11-hero-cta{min-height:48px!important;position:relative;z-index:5}
.v11-dashboard{margin-top:15px!important;gap:7px!important}.v11-dashboard>div{border:1px solid #e0c39550!important;background:linear-gradient(140deg,#24263e,#121a2d)!important;padding:14px 5px!important;box-shadow:inset 0 1px #ffffff1c}
.v11-dashboard b{font-size:27px!important}.v11-dashboard small{letter-spacing:.1em;text-transform:uppercase}
.v11-quickgrid button,.v11-hubtile{background:linear-gradient(145deg,#263452fa,#131b31fc)!important;border:1px solid #cab89465!important;box-shadow:0 9px 24px #02061362,inset 0 1px #ffffff17!important;min-height:112px;overflow:hidden}
.v11-quickgrid button:before,.v11-hubtile:before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 95% 10%,#c18dff25,transparent 52%)}
.v11-quickgrid button:after,.v11-hubtile:after{content:'↗';position:absolute;right:10px;bottom:7px;color:#e4c28d99;font-size:15px}
.v11-quickgrid span,.v11-hubtile>span{filter:drop-shadow(0 0 10px #b38ff277)}
.v11-world-hero,.v11-sanctuary-hero,.v11-arena-hero,.v11-expedition-hero{margin:0 -16px 20px!important;min-height:215px!important;background-position:center 40%;border-bottom:1px solid #ddbe8666!important;box-shadow:0 13px 25px #0006}
.v11-world-hero h1,.v11-sanctuary-hero h1,.v11-arena-hero h1,.v11-expedition-hero h1{text-shadow:0 3px 14px #000}
.v11-region-art{box-shadow:0 18px 40px #020515b5!important;border:1px solid #d4c39b66!important}
.v11-zone,.v11-league-row>div{background:linear-gradient(140deg,#26334a,#111a2f)!important;border:1px solid #b8a9aa61!important;box-shadow:0 5px 13px #03061270}
.v11-zone.selected{border:2px solid #f0c884!important;box-shadow:0 0 19px #bf9ce95c!important}
.v11-sanctuary-focus{background:linear-gradient(140deg,#26334f,#151d34)!important;border:1px solid #d2be9866!important}
.v11-friends button,.roster-entry,.team-slot{border-color:#ad9c9a77!important;background:linear-gradient(140deg,#202c42,#121a2e)!important}
.v11-friends button.active,.team-slot.on{border-color:#edc989!important;box-shadow:0 0 13px #e1bc7b55}
.v11-friends img,.v11-pet-portrait img,.roster-img img,.v8-detail-art img,.v12-avatar img,.v12-foe-portrait img{filter:contrast(1.03) saturate(.93)}
/* Navigation that makes the gameplay loop readable and actionable. */
.v16-objective{margin:18px 0 23px;border:1px solid #e5c58a92;background:linear-gradient(120deg,#30283fee,#1b2540f5 65%,#131b34f5);border-radius:16px;overflow:hidden;position:relative;box-shadow:0 7px 28px #0509169a,inset 0 1px #fff2d62b}
.v16-objective:before{content:'✦';position:absolute;right:12px;top:17px;font-family:Georgia,serif;color:#f1d2a112;font-size:100px;line-height:1;pointer-events:none}
.v16-objective-kicker{display:flex;justify-content:space-between;gap:7px;padding:12px 15px;border-bottom:1px solid #d4b98938;color:#f2d5a5;font-size:9px;font-weight:900;letter-spacing:.18em}
.v16-objective-index{color:#d2badf}
.v16-objective-content{padding:16px 15px 18px;position:relative;z-index:1}
.v16-objective-tag{display:inline-block;font-size:10px;color:#f2d7a6;font-weight:800;margin-bottom:7px}
.v16-objective h2{font-size:17px;line-height:1.45;font-family:Georgia,serif;color:#fff0d7;margin:0 0 6px!important}
.v16-objective p{font-size:11px;line-height:1.85;color:#d9d7e8;margin:0 0 13px}
.v16-objective-cta{display:flex;align-items:center;justify-content:space-between;min-height:43px;width:100%;border-radius:10px;border:1px solid #ead49aab;background:linear-gradient(110deg,#e7c68f,#b99ee9);color:#231d32;font-size:13px;font-weight:900;padding:10px 14px;box-shadow:0 4px 18px #e0b1f52b}
.v16-objective-cta span{font-size:19px}
/* Battle readability and tactical choices */
.v12-battle{background:#090f20!important}
.v12-arena{background:linear-gradient(0deg,#090e1abf,transparent 58%),url('assets/scenes/abyss.webp') center/cover!important}
.v12-bottom{background:linear-gradient(175deg,#1a2035,#0e1425 90%)!important;border-top:1px solid #dfbb8959!important}
.v12-telegraph{background:#263047e8!important;border:1px solid #9da7cb5e!important}
.v12-telegraph.alert{border-color:#f4a781!important;background:#47313def!important;box-shadow:0 0 16px #b9605a4b}
.v12-command{background:linear-gradient(145deg,#2d3856,#172139)!important;border:1px solid #a4a9c25c!important;box-shadow:inset 0 1px #ffffff1c,0 5px 14px #0005!important;min-height:58px}
.v12-command.ultimate.ready{background:linear-gradient(135deg,#845b56,#51345d)!important;border-color:#ffdb9ba8!important}
.v16-tactical{display:grid;grid-template-columns:23px 1fr auto;gap:7px;align-items:center;padding:8px 9px;margin-bottom:5px;background:linear-gradient(100deg,#2a284b,#1a2843);border:1px solid #9480ce8a;border-radius:10px;min-height:45px}
.v16-tactical-icon{color:#f7d89d;font-size:21px;text-align:center}
.v16-tactical small{display:block;color:#d6bbef;letter-spacing:.12em;font-size:8px;font-weight:900}
.v16-tactical b{display:block;color:#fff0db;font-size:10px;font-weight:700;line-height:1.4}
.v16-tactical button{font-size:10px;font-weight:900;color:#251a30;background:linear-gradient(135deg,#e7c994,#c4a4eb);border:1px solid #f0d4a5;border-radius:8px;padding:9px 8px;min-height:36px;white-space:nowrap}
.v16-tactical button:disabled{opacity:.4}
/* Navigator should feel like part of the game, not a debug overlay. */
#guide-trigger{background:linear-gradient(120deg,#42304e,#171a30)!important;border-color:#edc789!important;box-shadow:0 7px 27px #000a,0 0 16px #aa78db66!important}
.guide-box{background:linear-gradient(142deg,#332744,#17182e 59%,#0c162b)!important;border-color:#e3c28b!important;box-shadow:0 24px 80px #000d,inset 0 1px #ffffff20!important}
.guide-portrait{border-color:#d3b281!important;box-shadow:0 8px 25px #0008}
.guide-hint{background:#1d2540!important;border-color:#af9ac66b!important}
.guide-btn.primary{box-shadow:0 5px 15px #d2b1dd4b}
/* Accessibility, narrow phones and reduced animation preference. */
button:focus-visible{outline:2px solid #ffe6a9;outline-offset:2px}
@media(max-width:380px){.top{gap:3px!important;padding:9px 7px!important}.brandname{font-size:12px!important}.sound,.sfx-toggle{font-size:10px;padding:5px!important}.v11-home-stage{min-height:372px!important}.v11-home-beast{right:-25%!important}.v16-tactical{grid-template-columns:15px 1fr}.v16-tactical button{grid-column:2 / -1;width:100%}.v16-objective h2{font-size:15px}}
@media(max-height:720px){.v16-tactical{padding:4px 8px;min-height:39px}.v16-tactical b{font-size:9px}.v12-command{min-height:47px!important}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}