/* Shadow Switch — split-world title identity + device-fit polish */
:root{--ss-safe-l:max(12px,env(safe-area-inset-left,0px));--ss-safe-r:max(12px,env(safe-area-inset-right,0px));--ss-safe-t:max(10px,env(safe-area-inset-top,0px));--ss-safe-b:max(10px,env(safe-area-inset-bottom,0px))}
html,body,#game-root{min-height:100%;height:100dvh}
#screen-title{padding:0;background:linear-gradient(90deg,#f2d783 0 49.7%,#120d20 50.3% 100%);overflow:hidden}
#screen-title::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;background:#fff6bd;box-shadow:0 0 28px #fff6bd;transform:translateX(-50%)}
#screen-title::after{content:'LIGHT  ⇄  SHADOW';position:absolute;left:50%;top:calc(var(--ss-safe-t) + 3%);transform:translateX(-50%);padding:.42rem .75rem;background:#20182a;color:#ffeaa0;border:2px solid #ffeaa0;font:900 .7rem/1 ui-monospace,monospace;letter-spacing:.14em;white-space:nowrap}
#screen-title .title-card{position:absolute;inset:0;width:100%;max-width:none;max-height:none;overflow:hidden;padding:0;background:transparent;border:0;box-shadow:none;text-align:center}
#screen-title h1,#screen-title .title,#screen-title .logo{position:absolute;left:50%;top:18%;transform:translateX(-50%);margin:0!important;width:min(90%,900px);color:#fff2a8!important;text-shadow:-5px 0 0 #7a5123,5px 0 0 #362350!important;font-size:clamp(3rem,9vw,6.8rem)!important;line-height:.76!important;letter-spacing:-.05em!important;mix-blend-mode:normal}
#screen-title .subtitle{position:absolute;left:50%;top:44%;transform:translateX(-50%);width:min(72vw,620px);margin:0;padding:.6rem .8rem;background:linear-gradient(90deg,rgba(255,245,199,.9) 0 50%,rgba(27,20,42,.92) 50%);color:#fff;border:1px solid rgba(255,255,255,.45);font-weight:800;line-height:1.4;text-shadow:0 1px 2px #000}
#screen-title .menu-buttons{position:absolute;left:50%;bottom:10%;transform:translateX(-50%);width:min(72vw,620px);display:grid;grid-template-columns:1fr 1fr;gap:9px}
#screen-title .btn-pixel{min-height:54px;border-radius:0!important;border:3px solid #20162c!important;background:#f4df93!important;color:#2a1b2e!important;box-shadow:-5px 5px 0 #855f2a!important;font-family:ui-monospace,monospace!important;letter-spacing:.08em;text-transform:uppercase}
#screen-title .btn-pixel:nth-child(even){background:#241831!important;color:#f7e39d!important;border-color:#f0d67e!important;box-shadow:5px 5px 0 #50336d!important}
#screen-title .btn-primary{grid-column:1/-1;min-height:68px;background:linear-gradient(90deg,#f1d77e 0 50%,#2a1a38 50%)!important;color:#fff!important;border-color:#fff1a0!important;box-shadow:none!important;text-shadow:0 1px 2px #000;font-weight:900!important}
#screen-title .title-footer{position:absolute;left:var(--ss-safe-l);right:var(--ss-safe-r);bottom:var(--ss-safe-b);width:auto;display:flex;justify-content:space-between;align-items:center;color:#fff;opacity:.9;text-shadow:0 1px 2px #000}
#screen-title .title-footer .btn-pixel{min-width:44px;min-height:44px;padding:.35rem .6rem!important;box-shadow:none!important;background:rgba(32,24,42,.82)!important;color:#ffeaa0!important;border:1px solid #ffeaa0!important}
#screen-howto,#screen-levels,#screen-pause,#screen-result{padding:var(--ss-safe-t) var(--ss-safe-r) var(--ss-safe-b) var(--ss-safe-l)}
#screen-howto .panel-card,#screen-levels .panel-card,#screen-pause .panel-card,#screen-result .panel-card{max-height:calc(100dvh - var(--ss-safe-t) - var(--ss-safe-b) - 16px);border-radius:0!important;box-shadow:none!important;text-align:left!important;border:2px solid #f0d67e!important;background:linear-gradient(90deg,#f1dfaa 0 50%,#21172e 50%)!important;color:#fff!important}
#screen-howto .panel-card>*,#screen-levels .panel-card>*,#screen-pause .panel-card>*,#screen-result .panel-card>*{position:relative;z-index:1}
.icon-btn,.hint-btn,.chapter-tab,.btn-pixel,.nn-nudge-signup,.nn-nudge-later{min-height:44px}
.icon-btn{min-width:44px;width:44px;height:44px}
.hud{padding-top:calc(env(safe-area-inset-top,0px) + 8px);padding-left:var(--ss-safe-l);padding-right:var(--ss-safe-r)}
.hud-top,.hud-mid{width:min(calc(100vw - var(--ss-safe-l) - var(--ss-safe-r)),calc(78dvh * 2))}
.tc-left{left:var(--ss-safe-l)}
.tc-right{right:var(--ss-safe-r)}
.tc-left,.tc-right{bottom:calc(env(safe-area-inset-bottom,0px) + 14px)}
.btn-pixel:focus-visible,.icon-btn:focus-visible,.tc-btn:focus-visible,.chapter-tab:focus-visible,.level-tile:focus-visible,.nn-nudge-signup:focus-visible,.nn-nudge-later:focus-visible{outline:3px solid #fff6bd;outline-offset:3px}
@media(max-width:680px){
  #screen-title .title-card{display:grid;grid-template-rows:auto auto 1fr auto;align-content:center;gap:10px;padding:calc(var(--ss-safe-t) + 56px) var(--ss-safe-r) calc(var(--ss-safe-b) + 48px) var(--ss-safe-l);overflow:auto}
  #screen-title h1,#screen-title .title,#screen-title .logo{position:static;transform:none;width:100%;font-size:clamp(2.45rem,15vw,4.8rem)!important;line-height:.82!important;margin-top:2vh!important}
  #screen-title .subtitle{position:static;transform:none;width:min(92vw,520px);margin:0 auto;font-size:.74rem}
  #screen-title .menu-buttons{position:static;transform:none;width:min(92vw,520px);margin:auto auto 0;grid-template-columns:1fr;gap:8px}
  #screen-title .btn-pixel{min-height:46px;font-size:.66rem!important}
  #screen-title .btn-primary{grid-column:auto;min-height:54px}
  #screen-title .title-footer{position:static;width:min(92vw,520px);margin:0 auto;align-self:end}
  #screen-title::after{font-size:.58rem;letter-spacing:.09em}
  .level-grid{gap:6px}
}
@media(max-height:520px) and (orientation:landscape){
  #screen-title .title-card{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(280px,1.2fr);grid-template-rows:auto 1fr auto;column-gap:18px;align-items:center;padding:calc(var(--ss-safe-t) + 34px) var(--ss-safe-r) var(--ss-safe-b) var(--ss-safe-l)}
  #screen-title h1,#screen-title .title,#screen-title .logo{position:static;transform:none;grid-column:1;grid-row:1/3;width:100%;font-size:clamp(2rem,8.5vh,3.1rem)!important;line-height:.88!important}
  #screen-title .subtitle{position:static;transform:none;grid-column:2;grid-row:1;width:100%;font-size:.65rem;padding:.42rem .55rem}
  #screen-title .menu-buttons{position:static;transform:none;grid-column:2;grid-row:2;width:100%;grid-template-columns:repeat(3,1fr);align-self:center}
  #screen-title .btn-pixel,#screen-title .btn-primary{grid-column:auto;min-height:44px;font-size:.58rem!important;padding:.5rem!important}
  #screen-title .title-footer{position:static;grid-column:2;grid-row:3;width:100%;align-self:end}
  #screen-title::after{top:var(--ss-safe-t);font-size:.52rem}
  #screen-howto .panel-card,#screen-levels .panel-card,#screen-pause .panel-card,#screen-result .panel-card{width:min(94vw,760px);padding:14px 18px;gap:8px}
  #screen-pause .menu-buttons,#screen-result .menu-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #screen-pause .btn-text,#screen-result .btn-text{grid-column:1/-1}
  .howto-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 16px;font-size:.72rem}
  .levels-card{max-height:calc(100dvh - var(--ss-safe-t) - var(--ss-safe-b) - 10px)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}