/* Intro envelope only: the existing console and its styles remain untouched. */
html.room-enabled body { overflow:hidden; }
html.room-enabled body > :not(#video-intro):not(script):not(style):not(link) { visibility:hidden; }
#video-intro { position:fixed;inset:0;z-index:1000;overflow:hidden;background:#060310;isolation:isolate;color:#e5f3ce; }
#video-intro::before { content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,#28183c,transparent 72%); }
#intro-film { position:absolute;inset:0;transform-origin:0 0;will-change:transform; }
#intro-handoff-surface {position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none;overflow:hidden;border-radius:7px;z-index:3;will-change:transform,width,height;}
#intro-handoff-surface > .game420-start-scene {display:block!important;inset:0;}
#video-intro[data-handoff-ready=true] {background:transparent;}
#video-intro[data-handoff-ready=true]::before {display:none;}
html.room-enabled[data-intro-handoff] body > .game420-viewport {visibility:visible!important;pointer-events:none;}
html.room-enabled[data-intro-handoff] main.game420-console {visibility:visible!important;pointer-events:none;opacity:var(--handoff-shell-opacity,0);}
/* The reference photograph also contains a baked LCD. Cover only that LCD
   while the existing live artwork travels above it; never show two logos. */
html.room-enabled[data-intro-handoff] main.game420-console #console-screen {background:#030811!important;}
#video-intro video { position:absolute;left:var(--film-x,0px);top:var(--film-y,0px);width:var(--film-w,100%);height:var(--film-h,100%);max-width:none;object-fit:contain;pointer-events:none; }
#intro-idle { z-index:1; }
#intro-pickup { z-index:2;opacity:0; }
#video-intro[data-take-visible=true] #intro-pickup { opacity:1; }
#intro-saisir { position:absolute;z-index:4;left:var(--saisir-x,50%);top:var(--saisir-y,86%);transform:translate(-50%,-50%);min-width:108px;min-height:44px;padding:10px 23px;border:1px solid #b9d888;border-bottom:3px solid #4c683c;border-radius:5px;background:linear-gradient(#241b32ea,#171225ee);box-shadow:0 3px 12px #0008,inset 0 1px #bfe59d33;color:#d8f5ac;font:700 16px/1 monospace;letter-spacing:1.5px;text-transform:none;cursor:pointer;touch-action:manipulation; }
#intro-saisir:hover { border-color:#dbffb8;background:#30243e; }
#intro-saisir:active { translate:0 1px; }
#video-intro :focus-visible { outline:2px solid #e4ffb9;outline-offset:4px; }
#video-intro [hidden] { display:none!important; }
#intro-skip,#intro-sound { position:absolute;z-index:5;top:max(10px,env(safe-area-inset-top));min-height:44px;border:1px solid #ad73d075;border-radius:4px;background:#171225b8;color:#cadcbf;font:11px monospace;padding:8px 11px;cursor:pointer; }
#intro-skip { right:max(12px,env(safe-area-inset-right)); }
#intro-sound { left:max(12px,env(safe-area-inset-left)); }
#intro-recovery { position:absolute;z-index:5;left:50%;top:44%;transform:translate(-50%,-50%);width:min(300px,calc(100% - 48px));padding:18px;box-sizing:border-box;border:1px solid #80658f;border-radius:6px;background:#100e1af2;text-align:center;font:13px/1.5 Arial,sans-serif; }
#intro-recovery p { margin:0 0 12px; }
#intro-resume { min-height:44px;padding:10px 19px;border:1px solid #d7ffb8;border-radius:3px;color:#15230f;background:#b8f68d;font:700 13px monospace;cursor:pointer; }
#intro-announcement { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
@media(prefers-reduced-motion:reduce) { #intro-film { will-change:auto; } }

/* GAME420 introduction controls only. The native console and journey keep
   their existing styles, media, events and layout. */
@font-face{font-family:Game420Intro;src:url('fonts/Silkscreen-Regular.ttf?v=isolation-20261006&intro=controls-20261007') format('truetype');font-display:swap}
#video-intro[data-game420=true]:not([data-handoff-ready=true]){background:#060310;color:#e6ffd5}
#video-intro[data-game420=true]::before{
  inset:-36px;background-image:linear-gradient(#07031055,#07031055),var(--intro-room-art);
  background-size:cover;background-position:center;filter:blur(24px) saturate(.85);opacity:.8;
}
#video-intro[data-game420=true] #intro-controls{
  position:absolute;z-index:5;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));
  bottom:calc(16px + env(safe-area-inset-bottom));max-width:360px;margin-inline:auto;
  display:grid;grid-template-columns:.9fr 1.3fr;gap:14px 12px;pointer-events:none;
}
#video-intro[data-game420=true] :is(#intro-saisir,#intro-sound,#intro-skip){
  position:relative;inset:auto;transform:none;translate:none;box-sizing:border-box;min-height:44px;
  pointer-events:auto;touch-action:manipulation;cursor:pointer;font-family:Game420Intro,monospace;
  text-transform:uppercase;transition:background-color .15s,border-color .15s,box-shadow .15s;
}
#video-intro[data-game420=true] #intro-saisir{
  grid-column:1 / -1;grid-row:1;justify-self:center;width:188px;min-height:54px;padding:14px 34px;
  border:1px solid #b8ff71;border-bottom:3px solid #55863a;border-radius:8px;
  background:linear-gradient(135deg,#1c352bf2,#111b21f2 60%,#242038f2);color:#d2ffa6;
  box-shadow:0 0 0 3px #060b0cc9,0 0 0 4px #acff5b36,0 0 19px #a2ff542b,0 6px 20px #0009,inset 0 1px #ecffd249;
  font-size:16px;font-weight:400;line-height:1.15;letter-spacing:1.5px;text-shadow:0 0 9px #b7ff5b50;
}
#video-intro[data-game420=true] #intro-saisir::before,
#video-intro[data-game420=true] #intro-saisir::after{
  content:'';position:absolute;top:calc(50% - 4px);width:7px;height:8px;background:#bdff80;
  clip-path:polygon(0 0,40% 0,40% 20%,70% 20%,70% 40%,100% 40%,100% 60%,70% 60%,70% 80%,40% 80%,40% 100%,0 100%);
}
#video-intro[data-game420=true] #intro-saisir::before{left:18px}
#video-intro[data-game420=true] #intro-saisir::after{right:18px;rotate:180deg}
#video-intro[data-game420=true] :is(#intro-sound,#intro-skip){
  min-width:0;padding:10px 12px;border:1px solid #ad73d075;border-bottom:2px solid #603b73;
  border-radius:6px;background:linear-gradient(140deg,#0d0b1ed9,#1a1127de);color:#dac5ed;
  box-shadow:0 4px 14px #0007,inset 0 1px #d6a3ff12;font-size:10px;font-weight:400;line-height:1.35;
  letter-spacing:.1px;text-align:center;text-wrap:balance;
}
#video-intro[data-game420=true] #intro-sound{grid-column:1;grid-row:2}
#video-intro[data-game420=true] #intro-skip{grid-column:2;grid-row:2}
#video-intro[data-game420=true][data-sound=on] #intro-sound{border-color:#a5db7294;color:#d1f8b7;border-bottom-color:#526b3d}
@media(hover:hover){
  #video-intro[data-game420=true] #intro-saisir:hover{background:#243b2af5;border-color:#e0ffb7;box-shadow:0 0 0 3px #060b0cc9,0 0 0 4px #acff5b60,0 0 24px #a2ff5445,0 6px 20px #0009}
  #video-intro[data-game420=true] :is(#intro-sound,#intro-skip):hover{border-color:#c596ee;background:#241535f2;color:#f3e5ff}
}
#video-intro[data-game420=true] :is(#intro-saisir,#intro-sound,#intro-skip):active{translate:0 1px}
#video-intro[data-game420=true] :is(#intro-saisir,#intro-sound,#intro-skip):focus-visible{outline:2px solid #d3ff9b;outline-offset:4px}
@media(max-height:480px){#video-intro[data-game420=true] #intro-controls{bottom:calc(10px + env(safe-area-inset-bottom));gap:9px 12px}#video-intro[data-game420=true] #intro-saisir{min-height:48px;padding:10px 34px}}
@media(prefers-reduced-motion:reduce){#video-intro[data-game420=true] :is(#intro-saisir,#intro-sound,#intro-skip){transition:none}}