* { margin:0; padding:0; box-sizing:border-box; }
html,body {
  height:100%; background:#07040d; color:#e8e0ff;
  font-family:"Courier New",ui-monospace,monospace;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  touch-action:none; -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
}
canvas#game { touch-action:none; }
body::before{
  content:""; position:fixed; inset:0; pointer-events:none;
  background:radial-gradient(circle at 18% 20%,rgba(255,79,163,.12),transparent 32%),radial-gradient(circle at 82% 70%,rgba(79,227,255,.10),transparent 34%),radial-gradient(ellipse at 50% 45%,rgba(120,60,200,.16),rgba(0,0,0,.92) 72%);
}
#frame{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:stretch; gap:10px; }
button{ font-family:inherit; }

#experience-bar{ min-height:58px; display:flex; align-items:center; gap:18px; padding:8px 10px; background:linear-gradient(180deg,rgba(24,12,39,.96),rgba(12,7,23,.96)); border:1px solid #2b1b45; border-radius:8px; box-shadow:0 10px 30px rgba(0,0,0,.28); }
.brand-lockup{ display:flex; align-items:center; gap:10px; min-width:190px; }
.brand-mark{ width:34px; height:34px; display:grid; place-items:center; border:1px solid #ff4fa3; color:#ffd447; background:#211032; font-weight:bold; font-size:17px; box-shadow:inset 0 0 0 3px #0d0718; }
.brand-lockup b{ display:block; color:#f4f0ff; font-size:14px; letter-spacing:2px; }
.brand-lockup small{ display:block; color:#6f628c; font-size:8px; letter-spacing:1.2px; margin-top:3px; }
.experience-status{ display:flex; flex-direction:column; gap:2px; margin-right:auto; padding-left:18px; border-left:1px solid #2b1b45; }
.status-label{ color:#6f628c; font-size:8px; letter-spacing:1px; }
#experience-progress{ color:#ffd447; font-size:15px; }
.experience-actions{ display:flex; align-items:stretch; gap:7px; }
.experience-actions button,#np{ border:1px solid #34204f; color:#a99cc4; background:#120a1e; border-radius:6px; min-height:38px; padding:6px 11px; cursor:pointer; transition:border-color .15s,color .15s,transform .15s; }
.experience-actions button:hover,#np:hover{ border-color:#ff4fa3; color:#f4f0ff; transform:translateY(-1px); }
.experience-actions button span{ font-size:9px; letter-spacing:.7px; }
.experience-actions button b{ display:block; color:#ffd447; font-size:9px; margin-top:2px; }

#screen{ position:relative; align-self:center; line-height:0; border:2px solid #2b1b45;
  box-shadow:0 0 0 4px #0d0718, 0 0 40px rgba(255,79,163,.25), 0 0 90px rgba(79,227,255,.12);
  border-radius:6px; overflow:hidden; background:#000; }
canvas#game{ display:block; image-rendering:pixelated; image-rendering:crisp-edges; }
#scanlines{ position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.16) 0 1px, rgba(0,0,0,0) 1px 3px);
  mix-blend-mode:multiply; opacity:.55; }
#bar{ width:100%; min-height:34px; display:flex; justify-content:space-between; align-items:center; font-size:11px; letter-spacing:.5px; color:#7e6ea8; gap:16px; }
#np{ color:#ff4fa3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:42%; min-height:32px; text-align:left; }
#np.on .np-ico{ animation:pulse 1s steps(2) infinite; }
.np-ico{ margin-right:6px; }
@keyframes pulse{ 0%{opacity:1} 50%{opacity:.25} 100%{opacity:1} }
#hints{ display:flex; align-items:center; gap:14px; white-space:nowrap; }
#hints span{ color:#756a92; font-size:10px; }
kbd{ display:inline-block; min-width:24px; padding:3px 5px; margin-right:4px; border:1px solid #493062; border-bottom-width:2px; border-radius:4px; background:#150a24; color:#e8e0ff; font:10px/1 "Courier New",monospace; text-align:center; }

#controls-panel[hidden]{ display:none; }
#controls-panel{ position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:20px; background:rgba(4,3,9,.82); backdrop-filter:blur(8px); }
.controls-card{ width:min(480px,94vw); background:#0d0718; border:1px solid #ff4fa3; border-radius:10px; padding:22px; box-shadow:0 24px 80px rgba(0,0,0,.65),0 0 44px rgba(255,79,163,.12); }
.controls-heading{ display:flex; justify-content:space-between; align-items:start; }
.controls-heading small{ color:#ff4fa3; font-size:9px; letter-spacing:2px; }
.controls-heading h2{ color:#f4f0ff; font-size:22px; letter-spacing:2px; margin-top:4px; }
#controls-close{ width:40px; height:40px; border:1px solid #3a2159; border-radius:6px; background:#150a24; color:#ff4fa3; font-size:22px; cursor:pointer; }
.controls-card p{ color:#a99cc4; font:13px/1.7 "Courier New",monospace; margin:18px 0; }
.control-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.control-grid span{ display:flex; align-items:center; gap:6px; min-height:42px; padding:7px; border:1px solid #2b1b45; background:#120a1e; }
.control-grid b{ color:#a99cc4; font-size:10px; }
#controls-got-it{ width:100%; min-height:46px; margin-top:16px; border:1px solid #6fe36f; border-radius:6px; background:#14251b; color:#6fe36f; font-weight:bold; letter-spacing:1px; cursor:pointer; }
#touch-ui{ display:none; }

/* ---- the video, popped out of the television ---- */
#vplayer{
  position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  background:rgba(4,3,9,.90); opacity:0; pointer-events:none; transition:opacity .18s ease;
  padding:16px;
}
#vplayer.on{ opacity:1; pointer-events:auto; }
#vbox{
  width:min(920px,96vw); max-height:94vh; display:flex; flex-direction:column; gap:8px;
  background:#0d0718; border:2px solid #ff4fa3; border-radius:6px; padding:10px;
  box-shadow:0 0 0 4px #07040d, 0 0 60px rgba(255,79,163,.22);
}
#vhead{ display:flex; align-items:center; gap:12px; }
#vtitle{ color:#ffd447; font-size:14px; letter-spacing:1px; flex:0 0 auto;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:46%; }
#vhint{ color:#5b5178; font-size:10px; flex:1 1 auto; text-align:right;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#vclose{
  flex:0 0 auto; background:#150a24; color:#ff4fa3; border:1px solid #3a2159; border-radius:4px;
  font:16px/1 "Courier New",monospace; padding:2px 9px 4px; cursor:pointer;
}
#vclose:hover{ background:#2b1b45; }
#vstage{
  position:relative; width:100%; aspect-ratio:16/9; background:#000;
  border:1px solid #2b1b45; overflow:hidden; display:flex; align-items:center; justify-content:center;
}
/* when it is not popped out the element still has to decode, so it is shrunk, not hidden */
#vstage video{ width:1px; height:1px; opacity:0; }
#vplayer.on #vstage video{
  width:100%; height:100%; opacity:1; object-fit:contain;
  image-rendering:auto;                     /* the whole point: not pixellated here */
}
#vmsg{
  display:none; position:absolute; inset:0; z-index:2;
  flex-direction:column; align-items:center; justify-content:center; gap:6px;
  color:#7a6f98; font-size:11px; text-align:center; padding:20px; line-height:1.7;
}
#vmsg.on{ display:flex; }
#vmsg b{ color:#ff5a5a; font-weight:normal; font-size:13px; }
#vmsg code{ color:#ffd447; }
#vfoot{ display:flex; align-items:stretch; gap:8px; min-height:0; }
.vbtn{
  flex:0 0 auto; background:#150a24; color:#c9c2e0; border:1px solid #3a2159; border-radius:4px;
  font:11px/1 "Courier New",monospace; padding:0 10px; cursor:pointer;
}
.vbtn:hover{ background:#2b1b45; color:#ffd447; }
#vlist{
  flex:1 1 auto; display:flex; flex-direction:column; gap:3px;
  max-height:118px; overflow-y:auto; padding-right:4px;
}
.vrow{
  display:flex; align-items:center; gap:8px; text-align:left; cursor:pointer;
  background:#120a1e; color:#a99cc4; border:1px solid #241634; border-radius:3px;
  font:11px/1.5 "Courier New",monospace; padding:4px 8px; width:100%;
}
.vrow:hover{ background:#2b1b45; color:#f4f0ff; }
.vrow.cur{ border-color:#ff4fa3; color:#f4f0ff; background:#231037; }
.vrow.bad{ color:#6b4550; border-style:dashed; }
.vmark{ color:#6fe36f; width:10px; flex:0 0 auto; }
.vrow.bad .vmark{ color:#ff5a5a; }
.vname{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#vnote{ color:#3f3357; font-size:10px; text-align:center; }

@media (hover:none) and (pointer:coarse){
  #vbox{ width:100vw; height:100vh; max-height:100vh; border-radius:0; border-width:0 0 0 0; }
  #vhint{ display:none; }
  #vlist{ max-height:74px; }
}

/* ---- phones ---- */
#rotate{ display:none; }
#fs{ display:none; }

@media (hover:none) and (pointer:coarse){
  body::before{ display:none; }
  #frame{ gap:0; width:100%; height:100%; justify-content:center; }
  #experience-bar{ display:none; }
  #screen{ border-width:0; border-radius:0; box-shadow:none; }
  #bar{ display:none; }
  #scanlines{ opacity:.30; }
  #touch-ui{ display:block; position:fixed; inset:0; z-index:35; pointer-events:none; }
  #touch-pause{ position:fixed; top:max(8px,env(safe-area-inset-top)); right:max(8px,env(safe-area-inset-right)); width:56px; height:56px; pointer-events:auto; border:1px solid rgba(255,79,163,.8); border-radius:14px; background:rgba(13,7,24,.88); color:#ff4fa3; font-size:21px; box-shadow:0 8px 24px rgba(0,0,0,.34); }
  #touch-stick{ position:fixed; width:78px; height:78px; pointer-events:auto; border:2px solid rgba(111,227,111,.72); border-radius:50%; background:rgba(13,7,24,.78); color:rgba(244,240,255,.72); display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-rows:1fr 1fr 1fr; place-items:center; box-shadow:inset 0 0 22px rgba(111,227,111,.08),0 8px 24px rgba(0,0,0,.28); touch-action:none; }
  #touch-stick span{ font-size:12px; line-height:1; }
  #touch-stick span:nth-child(1){ grid-column:2; grid-row:1; }
  #touch-stick span:nth-child(2){ grid-column:1; grid-row:2; }
  #touch-stick i{ grid-column:2; grid-row:2; width:25px; height:25px; border-radius:50%; background:#6fe36f; opacity:.34; }
  #touch-stick span:nth-child(4){ grid-column:3; grid-row:2; }
  #touch-stick span:nth-child(5){ grid-column:2; grid-row:3; }
  /* the drive uses it as a trackpad: bigger, no arrows printed on it, and the
     knob slides under the thumb instead of sitting in the middle */
  #touch-stick.trackpad{ width:88px; height:88px; border-color:rgba(176,111,255,.75); }
  #touch-stick.trackpad span{ display:none; }
  #touch-stick.trackpad i{ width:32px; height:32px; background:#b06fff; opacity:.5; transition:none; }
  #touch-stick.trackpad.active{ border-color:#b06fff; }
  #touch-stick.trackpad.active i{ opacity:.9; }
  #touch-stick.active{ border-color:#6fe36f; transform:scale(1.04); }
  #touch-stick.active i{ opacity:.8; }
  #touch-actions{ position:fixed; display:flex; flex-direction:column-reverse; align-items:center; gap:10px; pointer-events:none; }
  .touch-action{ width:72px; height:72px; flex:0 0 72px; pointer-events:auto; border:2px solid var(--action,#ff4fa3); border-radius:50%; background:rgba(13,7,24,.84); color:#f4f0ff; font:bold 10px/1.1 "Courier New",monospace; letter-spacing:.3px; box-shadow:0 8px 24px rgba(0,0,0,.34); touch-action:none; }
  .touch-action.secondary{ width:58px; height:58px; flex-basis:58px; font-size:8px; }
  .touch-action.active{ background:#34182d; transform:scale(.96); }
  #touch-menu[hidden]{ display:none; }
  #touch-menu{ position:fixed; inset:0; pointer-events:auto; display:flex; flex-direction:column; justify-content:center; gap:8px; padding:calc(env(safe-area-inset-top) + 24px) max(24px,env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 24px) max(24px,env(safe-area-inset-left)); background:rgba(4,3,9,.90); backdrop-filter:blur(7px); }
  #touch-menu h2{ color:#ffd447; font-size:14px; letter-spacing:2px; text-align:center; margin-bottom:4px; }
  #touch-menu button{ width:min(330px,100%); min-height:48px; margin:0 auto; border:1px solid #493062; border-radius:8px; background:#150a24; color:#e8e0ff; font:bold 11px/1 "Courier New",monospace; }
  #touch-menu button:first-of-type{ border-color:#6fe36f; color:#6fe36f; }
  /* fullscreen lives in the pad's own menu now, so nothing floats over the game */
  #fs{ display:none; }
  /* Portrait is not a supported way to play: the game is a 480x270 room and
     squeezed into a tall phone it is unreadable. So it does not open at all —
     the whole screen is this, until the handset is turned. The one way a person
     gets stuck here is rotation lock, so say so rather than leaving them
     tapping at a picture of a rectangle. */
  @media (orientation:portrait){
    #screen, #touch-ui, #shell, #bar{ display:none !important; }
    #rotate{
      display:flex; position:fixed; inset:0; z-index:80;
      flex-direction:column; align-items:center; justify-content:center; gap:14px;
      background:#07040d; text-align:center; padding:24px;
    }
    .rot-icon{
      font-size:64px; color:#ff4fa3; line-height:1;
      transform:rotate(0deg); animation:turnit 2.4s ease-in-out infinite;
    }
    .rot-title{ color:#ff4fa3; font-size:16px; letter-spacing:2px; }
    .rot-sub{ color:#7e6ea8; font-size:11px; line-height:1.6; }
    .rot-lock{ color:#5b5178; font-size:10px; line-height:1.7; max-width:22em; }
  }
}
@keyframes turnit{
  0%,35%{ transform:rotate(0deg) scaleX(.62); }
  65%,100%{ transform:rotate(90deg) scaleX(.62); }
}

/* Carries the notch and home-bar insets into JS, so the canvas can be kept
   clear of both. See insets() in core.js. */
#safe{
  position:fixed; top:0; left:0; width:0; height:0; visibility:hidden; pointer-events:none;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px)
          env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
}

/* the popped-out video, sized for thumbs */
@media (hover:none) and (pointer:coarse){
  #vclose{ font-size:22px; padding:6px 16px 8px; }
  .vbtn{ padding:0 18px; font-size:13px; }
  .vrow{ padding:9px 10px; font-size:12px; }
  #vlist{ max-height:88px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
}