:root{
  --ink:#1b1530;
  --cream:#fff4d6;
  --pink:#ff5fa2;
  --gold:#ffd23f;
  --teal:#2ec4b6;
  --deck-bg:#120b22;
  --deck-border:#2a1c4d;
}
*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  height:-webkit-fill-available;
  background:#090614;
  overflow:hidden;
  -webkit-touch-callout:none;
  user-select:none;
  -webkit-user-select:none;
}
body{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-family:'Press Start 2P','Courier New',monospace;
  color:var(--cream);
}

/* ---------------- Blocking Landscape Lock for Mobile Portrait ---------------- */
#rotateScreen{
  display:none;
}
@media screen and (orientation: portrait) and (max-width: 1024px){
  #rotateScreen{
    display:flex!important;
    position:fixed;
    inset:0;
    z-index:999999;
    background:radial-gradient(circle at 50% 45%,#261545,#080512 80%);
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:24px;
    text-align:center;
    color:var(--cream);
  }
  #stage{
    display:none!important;
  }
}

.rotate-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  max-width:min(90vw,420px);
  padding:32px 24px;
  background:rgba(27,21,48,0.96);
  border:4px solid var(--gold);
  border-radius:18px;
  box-shadow:0 12px 36px rgba(0,0,0,0.8),inset 0 2px 0 rgba(255,255,255,0.25);
}
.rotate-anim-wrap{
  position:relative;
  width:90px;
  height:90px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.rotate-phone-icon{
  font-size:58px;
  display:inline-block;
  animation:rotateLandscape 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transform-origin:center center;
}
@keyframes rotateLandscape{
  0%, 20% { transform: rotate(0deg) scale(1); }
  50%, 75% { transform: rotate(-90deg) scale(1.15); }
  90%, 100% { transform: rotate(0deg) scale(1); }
}
.rotate-title{
  margin:0;
  font-size:clamp(16px,4.5vw,22px);
  color:var(--gold);
  letter-spacing:1px;
  text-shadow:2px 2px 0 var(--ink);
}
.rotate-badge{
  font-size:11px;
  color:#fff;
  background:#ff5fa2;
  padding:6px 14px;
  border-radius:6px;
  letter-spacing:1px;
}
.rotate-desc{
  margin:0;
  font-size:11px;
  color:var(--cream);
  line-height:1.7;
}
.rotate-sparkles{
  font-size:16px;
  color:var(--gold);
  letter-spacing:6px;
  animation:blink 1.2s infinite;
}

/* ---------------- Game Stage ---------------- */
#stage{
  position:relative;
  width:min(100vw,calc(100vh * 16 / 9));
  aspect-ratio:16/9;
  max-height:100vh;
  container-type:inline-size;
  background:#000;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  overflow:hidden;
}
#stage::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.08) 0 1px,transparent 1px 3px);
  z-index:1;
}
canvas{
  display:block;
  width:100%;
  height:100%;
  touch-action:none;
}
canvas.aim{cursor:crosshair}
[hidden]{display:none!important}

/* ---------------- HUD Notification Bar ---------------- */
#hud{
  position:absolute;
  top:clamp(40px,6.2cqw,54px);
  left:50%;
  transform:translateX(-50%);
  width:min(86%,760px);
  text-align:center;
  pointer-events:none;
  z-index:4;
}
#hud p{
  margin:0;
  padding:clamp(6px,1cqw,12px) clamp(12px,1.8cqw,22px);
  font-size:clamp(9px,1.3cqw,14px);
  line-height:1.5;
  background:rgba(27,21,48,0.95);
  color:var(--cream);
  border:clamp(2px,.35cqw,3px) solid var(--gold);
  box-shadow:0 4px 14px rgba(0,0,0,.6);
}

/* ---------------- Arcade Buttons ---------------- */
.px,.mini,.deck-mini{
  font-family:inherit;
  cursor:pointer;
  color:var(--ink);
  background:var(--gold);
  border:0;
  box-shadow:inset -3px -3px 0 rgba(0,0,0,.32),inset 3px 3px 0 rgba(255,255,255,.6),0 0 0 3px var(--ink),0 4px 0 3px rgba(0,0,0,.5);
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.px.alt{background:var(--pink);color:#fff}
.px{
  font-size:clamp(12px,1.8cqw,20px);
  padding:clamp(12px,1.5cqw,18px) clamp(20px,2.5cqw,32px);
  min-height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.px:hover,.mini:hover,.deck-mini:hover{filter:brightness(1.12)}
.px:active,.mini:active,.deck-mini:active{transform:translateY(3px)}
.px:focus-visible,.mini:focus-visible{outline:3px dashed var(--cream);outline-offset:6px}

.mini{
  position:absolute;
  font-size:clamp(10px,1.2cqw,13px);
  padding:clamp(8px,1cqw,12px) clamp(12px,1.5cqw,18px);
  min-height:44px;
  min-width:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  z-index:4;
  background:var(--cream);
}
#skip{
  top:clamp(6px,1.2cqw,14px);
  right:clamp(6px,1.2cqw,14px);
  font-size:clamp(8px,1cqw,11px);
  padding:clamp(5px,0.8cqw,8px) clamp(8px,1.2cqw,12px);
  min-height:28px;
  min-width:0;
  z-index:6;
  box-shadow:inset -2px -2px 0 rgba(0,0,0,.32),inset 2px 2px 0 rgba(255,255,255,.6),0 0 0 2px var(--ink),0 3px 0 2px rgba(0,0,0,.4);
}
#mute{
  top:clamp(6px,1.2cqw,14px);
  left:clamp(6px,1.2cqw,14px);
  font-size:clamp(8px,1cqw,11px);
  padding:clamp(5px,0.8cqw,8px) clamp(8px,1.2cqw,12px);
  min-height:28px;
  min-width:0;
  z-index:6;
  box-shadow:inset -2px -2px 0 rgba(0,0,0,.32),inset 2px 2px 0 rgba(255,255,255,.6),0 0 0 2px var(--ink),0 3px 0 2px rgba(0,0,0,.4);
}
#mute.off{
  background:#ff5fa2!important;
  color:#ffffff!important;
  box-shadow:inset -2px -2px 0 rgba(0,0,0,.32),inset 2px 2px 0 rgba(255,255,255,.6),0 0 0 2px var(--ink),0 3px 0 2px rgba(0,0,0,.4);
}
#replay{bottom:clamp(14px,2cqw,26px);right:clamp(14px,2cqw,26px);opacity:.95;z-index:6}

/* ---------------- Choice Buttons (Finale) ---------------- */
#choices{
  position:absolute;
  bottom:clamp(16px,5cqw,46px);
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(10px,2.5cqw,24px);
  z-index:4;
  max-width:92%;
}

/* ---------------- Talk to Robin Button ---------------- */
#talkBtnWrap{
  position:absolute;
  bottom:clamp(22px,6cqw,54px);
  left:50%;
  transform:translateX(-50%);
  z-index:6;
  display:flex;
  justify-content:center;
}
#talkBtn{
  font-size:clamp(14px,2.2cqw,22px);
  padding:clamp(14px,1.8cqw,22px) clamp(24px,3cqw,40px);
  background:var(--gold);
  color:var(--ink);
  animation:pulseTalk 0.9s infinite alternate;
}
@keyframes pulseTalk{from{transform:scale(1)}to{transform:scale(1.08);filter:brightness(1.2)}}

/* ---------------- On-Screen Touch Controls (Landscape Mobile) ---------------- */
.touch-pad{
  position:absolute;
  bottom:clamp(14px,4cqw,36px);
  left:clamp(14px,4cqw,36px);
  display:flex;
  gap:clamp(12px,2cqw,20px);
  z-index:5;
}
.touch-jump{
  position:absolute;
  bottom:clamp(14px,4cqw,36px);
  right:clamp(14px,4cqw,36px);
  z-index:5;
}
.touch-btn{
  width:clamp(56px,8cqw,74px);
  height:clamp(56px,8cqw,74px);
  font-size:clamp(20px,2.8cqw,28px);
  border-radius:12px;
  background:rgba(27,21,48,0.90);
  color:var(--gold);
  border:3px solid var(--gold);
  display:flex;
  align-items:center;
  justify-content:center;
  user-select:none;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  box-shadow:0 6px 14px rgba(0,0,0,0.6),inset 0 2px 0 rgba(255,255,255,0.25);
}
.touch-btn.action{
  width:clamp(92px,14cqw,130px);
  font-size:clamp(12px,1.6cqw,16px);
  letter-spacing:1px;
}
.touch-btn:active{
  background:var(--gold);
  color:var(--ink);
  transform:translateY(3px);
  box-shadow:0 2px 6px rgba(0,0,0,0.8);
}
@media (hover: hover) and (pointer: fine){
  .touch-pad, .touch-jump{display:none!important}
}



/* ---------------- Cold Boot Screen (Studio Launch) ---------------- */
#boot{
  position:absolute;
  inset:0;
  z-index:10;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at 50% 45%,#261545,#080512 75%);
  padding:20px;
  text-align:center;
}
.boot-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(10px,2cqw,20px);
  max-width:min(90%,520px);
  padding:clamp(20px,4cqw,36px) clamp(20px,5cqw,42px);
  background:rgba(27,21,48,0.92);
  border:4px solid var(--gold);
  border-radius:16px;
  box-shadow:0 12px 36px rgba(0,0,0,0.8),inset 0 2px 0 rgba(255,255,255,0.25);
}
.boot-logo-wrap{
  width:clamp(80px,12cqw,110px);
  height:clamp(80px,12cqw,110px);
  border:3px solid var(--gold);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(255,210,63,0.3);
}
.boot-logo-wrap img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.boot-brand{
  font-size:clamp(18px,3.2cqw,28px);
  color:var(--gold);
  letter-spacing:2px;
  text-shadow:2px 2px 0 var(--ink);
}
.boot-sub{
  font-size:clamp(11px,1.6cqw,15px);
  color:#ffffff;
  letter-spacing:3px;
  margin-top:-6px;
}
.boot-divider{
  width:80%;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  margin:4px 0;
}
.boot-foot{
  font-size:clamp(10px,1.2cqw,13px);
  color:#b9a9e6;
  line-height:1.6;
}

/* ---------------- Title Screen ---------------- */
#title{
  position:absolute;
  inset:0;
  z-index:5;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(12px,2.2cqw,24px);
  background:radial-gradient(circle at 50% 40%,#3a2368,#120b24 75%);
  padding:20px;
  text-align:center;
}
.title-logo-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:rgba(27,21,48,0.9);
  border:2px solid var(--gold);
  padding:6px 14px;
  border-radius:8px;
  font-size:clamp(9px,1.2cqw,12px);
  color:var(--gold);
  letter-spacing:1px;
}
.title-logo-badge img{
  width:24px;
  height:24px;
  border-radius:4px;
}
#title h1{
  margin:0;
  font-size:clamp(26px,6cqw,72px);
  font-weight:400;
  color:var(--gold);
  text-shadow:3px 3px 0 var(--pink),6px 6px 0 var(--ink);
  letter-spacing:.2cqw;
}
#title p{margin:0;font-size:clamp(11px,1.6cqw,18px);color:var(--cream)}
#title small{font-size:clamp(10px,1.1cqw,13px);color:#b9a9e6;line-height:1.6}
#title .px{margin-top:clamp(8px,1.8cqw,20px)}
#title .reintro{
  position:static;
  margin-top:8px;
  background:transparent;
  color:var(--gold);
  border:2px dashed var(--gold);
  box-shadow:none;
}
#title .reintro:hover{
  background:rgba(255,210,63,0.15);
}

.blink{animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{filter:brightness(1.3)}}
@media (prefers-reduced-motion:reduce){.blink{animation:none}}