/* ALPHA 1.7: character-first, less intrusive cinematic interface.
   Keeps every existing interactive HUD button and store/map function intact. */
#shopLabels{isolation:isolate;pointer-events:none}
.shop-sign{
  max-width:min(148px,25vw)!important;min-width:0!important;
  padding:5px 9px 4px!important;
  border:1px solid rgba(220,188,133,.68)!important;
  border-top-width:1px!important;border-bottom-width:1px!important;
  border-radius:6px!important;
  background:color-mix(in srgb,var(--brand-bg,#263e4a) 67%,#0b141f)!important;
  color:#f4e8d7!important;
  font-size:clamp(9px,1vw,12px)!important;
  font-weight:650!important;line-height:1.3!important;
  letter-spacing:.35px!important;
  white-space:nowrap!important;
  text-align:center!important;
  overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 4px 12px #0009!important;
  text-shadow:0 1px 4px #000!important;
  backdrop-filter:blur(3px);
  transition:opacity .15s ease;
}
.shop-sign::before{font-size:11px!important;margin-right:4px!important;vertical-align:0!important}
.shop-sign::after{display:none!important}
.shop-sign[data-kind]{border-top-width:1px!important;border-bottom-width:1px!important}
.topbar{gap:9px;align-items:center!important}
.brand{gap:8px}
.brand strong{font-size:clamp(11px,1.2vw,14px);letter-spacing:1px}
.brand small{font-size:8px;letter-spacing:1.1px}
.top-right{gap:5px}
.top-right .menu-btn{width:35px;height:34px;border-radius:6px;font-size:15px;background:rgba(9,15,24,.80)}
.top-right .clock{font-size:11px;padding:7px 8px}
#lifeBar{top:65px;right:max(9px,env(safe-area-inset-right));font-size:10px;max-width:min(330px,53vw);flex-wrap:wrap;justify-content:end;padding:5px 8px;background:#091522e2;border-radius:7px}
#mini{width:92px;height:92px;top:108px;opacity:.85}
.quest{max-width:min(300px,33vw);padding:8px 12px;top:67px;backdrop-filter:blur(4px)}
.quest h2{font-size:15px;margin:3px 0}
.quest p{font-size:10px;line-height:1.4}
.quest .chapter{font-size:9px}
.compass{top:89px}
@media(max-width:850px) and (orientation:landscape){
 .topbar{left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));top:max(6px,env(safe-area-inset-top))}
 .brand-mark{width:24px;height:24px}
 .brand small{display:none}
 .brand strong{font-size:11px}
 .top-right{gap:3px}
 .top-right .menu-btn{height:29px;width:29px;font-size:13px}
 .top-right .clock{padding:5px;font-size:10px}
 .top-right .area-label,.top-right .locomotion-state{display:none}
 .quest{top:45px;max-width:240px;padding:6px 9px}
 .quest h2{font-size:12px}
 .quest p{font-size:9px}
 #lifeBar{top:44px;font-size:9px;max-width:220px}
 #mini{width:65px;height:65px;top:87px}
 .shop-sign{font-size:9px!important;max-width:118px!important}
}
@media(max-width:530px) and (orientation:portrait){
 .topbar{left:8px;right:8px;top:max(6px,env(safe-area-inset-top));gap:4px}
 .brand-mark{width:25px;height:25px}
 .brand strong{font-size:10px}
 .brand small{display:none}
 .top-right .clock,.top-right .locomotion-state,.top-right .area-label{display:none}
 .top-right{gap:3px}
 .top-right .menu-btn{width:28px;height:29px;font-size:12px;padding:0}
 .quest{max-width:64vw;top:54px}
 #lifeBar{top:54px;max-width:36vw;font-size:9px}
 #mini{width:77px;height:77px;top:135px}
 .shop-sign{max-width:105px!important;padding:4px 6px!important;font-size:9px!important}
}
@media(prefers-reduced-motion:reduce){.shop-sign{transition:none!important}}


/* ALPHA 1.7.1 SCREENSHOT CORRECTION: interaction UI must never cover faces. */
#portalGuide{
  top:auto!important;
  bottom:clamp(91px,21dvh,165px)!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  max-width:min(300px,46vw)!important;
  width:max-content!important;
  padding:7px 11px!important;
  font-size:clamp(10px,1.0vw,12px)!important;
  font-weight:600!important;
  letter-spacing:0!important;
  line-height:1.4!important;
  border:1px solid #bba17499!important;
  border-radius:7px!important;
  background:#07111ed9!important;
  color:#ead7b4!important;
  box-shadow:0 5px 14px #0006!important;
  white-space:normal!important;
}
#sparringHint{
  top:clamp(85px,18dvh,140px)!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  font-size:10px!important;
  background:#101820c7!important;
  border:1px solid #c3a36c77!important;
  box-shadow:0 3px 8px #0007!important;
  padding:5px 8px!important;
  border-radius:5px!important;
  opacity:.9;
}
#comboReadout{max-width:230px;padding:7px 9px;background:#0b1524a8}
#comboReadout strong{font-size:12px}
#comboReadout small{font-size:9px}
@media(max-height:500px) and (orientation:landscape){
 #portalGuide{bottom:17dvh!important;max-width:250px!important;padding:5px 8px!important;font-size:10px!important}
 #sparringHint{top:16dvh!important;font-size:9px!important}
}
@media(max-width:580px) and (orientation:portrait){
 #portalGuide{bottom:24dvh!important;max-width:min(240px,64vw)!important;font-size:10px!important}
 #sparringHint{top:25dvh!important;max-width:200px!important;white-space:normal!important;text-align:center}
}


/* ALPHA 1.7.1 HOMEPAGE FIX: mobile splash stays readable inside in-app browsers. */
#start:not(.hidden){display:flex;align-items:flex-start;justify-content:center;overscroll-behavior:contain}
#start .splash{flex:0 0 auto;margin:auto 0;max-width:580px}
#start .notice{max-width:440px;margin:14px auto 6px;text-align:center;color:#c7b18d}
#start .release-head{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 6px;flex-wrap:wrap}
#start .release-head strong{color:#ead9b9;font-size:12px;font-weight:700;letter-spacing:.5px}
#start .release-tag{border:1px solid #bca16a88;border-radius:20px;background:#bca16a22;padding:3px 9px;font:700 10px ui-monospace,monospace;color:#e5c388;letter-spacing:1px}
#start .release-sub{font-size:11px;line-height:1.6;margin:4px 0 7px;color:#c4baa7}
#start .release-details{border-top:1px solid #bca16a33;padding-top:6px;margin:5px auto 0;font-size:10px;line-height:1.6;text-align:left}
#start .release-details summary{font-size:11px;cursor:pointer;color:#d9c493;text-align:center;list-style:revert}
#start .release-details p{font-size:10px;line-height:1.65;margin:6px 0}
#start .release-details[open]{padding:7px 10px;border:1px solid #bca16a33;border-radius:8px;background:#080f1a99}
@media(orientation:portrait){
 #start{padding:max(18px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))}
 #start .emblem{width:52px;height:52px;margin:14px auto 22px}
 #start .emblem span{font-size:27px}
 #start .eyebrow{font-size:9px;margin-bottom:7px;letter-spacing:2px}
 #start .hero-title{font-size:clamp(34px,8vw,48px);line-height:1.12;letter-spacing:3px;margin:0 0 8px}
 #start .hero-en{font-size:10px;line-height:1.4;letter-spacing:2px}
 #start .goldline{margin:16px auto;width:76%}
 #start .intro{font-size:13px;line-height:1.85;margin:0 auto 17px;max-width:340px}
 #start .primary.wide{width:min(330px,85vw);min-height:48px}
 #start .secondary{width:min(330px,85vw);min-height:42px}
 #start .splash-controls{margin:11px auto 0;max-width:360px}
 #start .splash-controls .tiny{font-size:10px;line-height:1.55}
 #start #resumeLabel{font-size:10px;margin:10px 0 6px}
}
@media(max-height:680px) and (orientation:portrait){
 #start .emblem{margin:8px auto 17px;width:44px;height:44px}
 #start .emblem span{font-size:24px}
 #start .hero-title{font-size:clamp(30px,7vw,39px)}
 #start .goldline{margin:12px auto}
 #start .intro{font-size:12px;line-height:1.65;margin:0 auto 12px}
 #start .notice{margin:9px auto 4px}
}