*,*::before,*::after{box-sizing:border-box}
html{font-size:16px}
body{
  margin:0;
  min-height:100vh;
  background:#070809;
  color:#eceef2;
  font-family:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  font-weight:400;
  line-height:1.5;
  letter-spacing:-0.01em;
}
a{color:inherit}

.studio-shell{
  position:relative;
  width:100%;
  height:min(72vh,720px);
  min-height:420px;
  background:#0a0c0e;
  -webkit-user-select:none;
  user-select:none;
}
#game-canvas{
  display:block;
  width:100%;
  height:100%;
  touch-action:none;
  cursor:crosshair;
  -webkit-user-select:none;
  user-select:none;
}

.studio-hud{
  position:absolute;
  inset:0;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  -webkit-user-select:none;
  user-select:none;
}
.studio-hud a,.studio-hud button,.dialogue-panel,.touch-ui{pointer-events:auto}

.hud-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:1rem 1.25rem;
  gap:1rem;
  background:linear-gradient(180deg,rgba(7,8,9,0.85) 0%,transparent 100%);
}
.hud-mark{
  font-family:"IBM Plex Serif",Georgia,serif;
  font-size:1.2rem;
  font-weight:500;
  text-decoration:none;
  letter-spacing:-0.03em;
  color:#eceef2;
}
.hud-offer{
  text-align:center;
  font-size:0.72rem;
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#4ce0c0;
  max-width:22rem;
  line-height:1.45;
}
.hud-mail{
  font-size:0.85rem;
  color:#9aa0ab;
  text-decoration:none;
  border-bottom:1px solid #2a2e36;
}
.hud-mail:hover{color:#eceef2;border-color:#4ce0c0}

.hud-tip{
  align-self:center;
  margin-bottom:1rem;
  padding:0.55rem 1rem;
  background:rgba(12,14,18,0.88);
  border:1px solid #2a2e36;
  border-radius:4px;
  font-size:0.85rem;
  color:#b4bac4;
  transition:opacity 0.4s ease;
}
.hud-tip.is-hidden{opacity:0;visibility:hidden}

.zone-labels{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.zone-label{
  position:absolute;
  transform:translate(-50%,-50%);
  padding:0.35rem 0.65rem;
  font-size:0.7rem;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#4ce0c0;
  background:rgba(7,8,9,0.75);
  border:1px solid rgba(76,224,192,0.35);
  border-radius:3px;
  white-space:nowrap;
}

.prompt-near{
  position:absolute;
  left:50%;
  bottom:5.5rem;
  transform:translateX(-50%);
  padding:0.45rem 0.9rem;
  font-size:0.82rem;
  color:#eceef2;
  background:rgba(12,14,18,0.92);
  border:1px solid #3d4450;
  border-radius:4px;
  opacity:0;
  transition:opacity 0.2s;
}
.prompt-near.is-visible{opacity:1}

.dialogue-panel{
  position:absolute;
  left:50%;
  bottom:1.25rem;
  transform:translateX(-50%);
  width:min(36rem,calc(100% - 2rem));
  padding:1rem 1.15rem 0.9rem;
  background:rgba(10,12,15,0.94);
  border:1px solid #3d4450;
  border-radius:6px;
  display:none;
  box-shadow:0 12px 40px rgba(0,0,0,0.45);
  z-index:10;
}
.dialogue-panel.is-open{display:block}
.dialogue-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:0.5rem;
  gap:0.75rem;
}
.dialogue-name{
  font-family:"IBM Plex Serif",Georgia,serif;
  font-size:1.05rem;
  font-weight:500;
}
.dialogue-role{
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:#4ce0c0;
}
.dialogue-text{
  margin:0 0 0.65rem;
  font-size:0.95rem;
  color:#d8dce3;
  line-height:1.55;
}
.dialogue-hint{
  margin:0;
  font-size:0.75rem;
  color:#7a828e;
}
.dialogue-hint kbd{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:0.85em;
  padding:0.1em 0.35em;
  background:#1a1e24;
  border-radius:3px;
  border:1px solid #2a2e36;
}

.touch-ui{display:none}
@media (pointer:coarse),(max-width:900px){
  .touch-ui{display:grid}
  .talk-btn.touch-ui{display:block}
}

.dpad{
  position:absolute;
  left:max(0.65rem,env(safe-area-inset-left));
  bottom:max(0.65rem,env(safe-area-inset-bottom));
  grid-template-columns:repeat(3,3.5rem);
  grid-template-rows:repeat(3,3.5rem);
  gap:0.2rem;
  z-index:6;
  touch-action:none;
  user-select:none;
}
.dpad-btn{
  min-width:3.5rem;
  min-height:3.5rem;
  padding:0;
  font-size:1.35rem;
  line-height:1;
  color:#eceef2;
  background:rgba(30,34,40,0.82);
  border:1px solid #3d4450;
  border-radius:8px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.dpad-btn.is-pressed,.dpad-btn:active{
  background:rgba(76,224,192,0.28);
  border-color:#4ce0c0;
  color:#4ce0c0;
}
.dpad-up{grid-column:2;grid-row:1}
.dpad-left{grid-column:1;grid-row:2}
.dpad-right{grid-column:3;grid-row:2}
.dpad-down{grid-column:2;grid-row:3}

.talk-btn{
  position:absolute;
  right:max(0.65rem,env(safe-area-inset-right));
  bottom:max(0.85rem,env(safe-area-inset-bottom));
  min-width:3.5rem;
  min-height:3.5rem;
  padding:0.65rem 1.15rem;
  font-family:inherit;
  font-size:0.95rem;
  font-weight:600;
  letter-spacing:0.02em;
  color:#06110e;
  background:#4ce0c0;
  border:1px solid #3bc9ab;
  border-radius:8px;
  z-index:6;
  touch-action:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 0.2s ease,visibility 0.2s ease;
}
.talk-btn.is-available{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.talk-btn:active{background:#3bc9ab}

@media (pointer:coarse),(max-width:900px){
  .prompt-near{bottom:7.5rem}
  .dialogue-panel{bottom:max(1rem,env(safe-area-inset-bottom))}
}

/* Crawler / SEO block */
.crawler{
  max-width:720px;
  margin:0 auto;
  padding:3rem 4vw 2rem;
  color:#b4bac4;
  font-size:0.95rem;
}
.crawler h1{
  font-family:"IBM Plex Serif",Georgia,serif;
  font-size:clamp(1.65rem,3vw,2.2rem);
  font-weight:400;
  color:#eceef2;
  line-height:1.15;
  letter-spacing:-0.03em;
}
.crawler h2{
  margin:2.5rem 0 1rem;
  font-size:1.1rem;
  font-weight:600;
  color:#eceef2;
}
.crawler ul,.crawler ol{padding-left:1.25rem}
.crawler dl{margin:0}
.crawler dl div{margin-bottom:1rem}
.crawler dt{font-weight:600;color:#eceef2;margin-bottom:0.25rem}
.crawler dd{margin:0;color:#9aa0ab}
.crawler a.mail-cta{
  display:inline-block;
  margin-top:0.5rem;
  padding:0.65rem 1rem;
  background:#4ce0c0;
  color:#06110e;
  text-decoration:none;
  font-weight:600;
  border-radius:4px;
}
.site-footer{
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem 1.5rem;
  justify-content:center;
  padding:2rem 4vw 3rem;
  font-size:0.82rem;
  color:#6d7580;
  border-top:1px solid #1a1e24;
}
.site-footer a{color:#9aa0ab;text-decoration:none}
.site-footer a:hover{color:#4ce0c0}