/* ============================================================
   berylism.org — BOP
   ============================================================ */

:root{
  /* palette */
  --tyrian:        #510B47;
  --tyrian-deep:   #2B0526;
  --tyrian-black:  #16030F;
  --caput:         #592720;
  --bixbite:       #C2185B;   /* interface accent */
  --ulbre:         #B41E3D;   /* the body — red beryl */
  --bixbite-hot:   #E8336F;
  --amber:         #E8A028;
  --petrol:        #007791;
  --aqua:          #C3FBF4;
  --indigo-earth:  #24327A;
  --burgundy:      #4A0F1E;
  --burgundy-deep: #23070E;

  /* chrome */
  --chrome-lit:    #E9A9C4;
  --chrome-dim:    #3E0A20;

  /* the outermost peel — dial to zero to strip the layer */
  --crt-scan:      0.30;
  --crt-vhs:       0.20;
  --crt-grain:     0.13;
  --crt-vig:       0.92;
  --crt-sweep:     0.30;
  --fisheye:       1.0;
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0; height:100%;
  background:var(--burgundy-deep);
  overflow:hidden;
  font-family:'Playfair Display',Georgia,serif;
  color:var(--aqua);
}

#wallpaper{
  position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(120% 90% at 50% 18%, #641726 0%, var(--burgundy) 42%, var(--burgundy-deep) 100%);
  background-size:cover; background-position:center;
}
#wallpaper.has-image{ background-image:var(--wallpaper); }

#zarqa{ position:fixed; inset:0; z-index:1; display:block; width:100%; height:100%; }

/* ---------- the vessel ---------- */
#vessel-wrap{
  position:fixed; z-index:3;
  left:50%; top:50%;
  width:min(19vmin,168px); height:min(19vmin,168px);
  transform:translate(-50%,-50%);
  pointer-events:none;
  will-change:left,top;
}
#vessel{ width:100%; height:100%; overflow:visible; display:block; }

#vessel .hull{
  fill:var(--ulbre);
  pointer-events:auto;
  cursor:pointer;
  transform-box:fill-box;
  transform-origin:center;
}
#vessel-wrap.is-rest .hull{ animation:heart 0.857s ease-out infinite; }
#vessel-wrap.no-motion .hull{ animation:none; }

@keyframes heart{
  0%{transform:scale(1)} 7%{transform:scale(1.048)} 15%{transform:scale(1.004)}
  23%{transform:scale(1.030)} 34%{transform:scale(1)} 100%{transform:scale(1)}
}

#vessel .ghost{ opacity:0; mix-blend-mode:screen; pointer-events:none; }
#vessel-wrap.is-glitch .ghost{ opacity:.58; }
#vessel-wrap.is-hover  .ghost{ opacity:.40; }
.shadow{ fill:#000; opacity:.30; }

/* ============================================================
   CONSOLES
   a training-manual cover that got left on too long
   ============================================================ */

#consoles{
  position:fixed; inset:0; z-index:5;
  pointer-events:none;
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end;
  padding:0 4vw 6vh; gap:16px;
}

.mtl{
  position:relative;
  width:min(568px,92vw);
  pointer-events:auto;
  opacity:0; transform:translateY(16px);
  transition:opacity .5s ease, transform .5s ease;
}
.mtl.in{ opacity:1; transform:none; }

/* offset ghost window — glitter only */
.mtl-ghost{
  position:absolute;
  left:13px; top:13px; right:-13px; bottom:-13px;
  background:rgba(31,4,26,.74);
  border-top:2px solid rgba(233,169,196,.28);
  border-left:2px solid rgba(233,169,196,.28);
  border-right:2px solid rgba(20,3,14,.9);
  border-bottom:2px solid rgba(20,3,14,.9);
  overflow:hidden;
  font-family:'VT323',monospace;
  font-size:12px; line-height:13px; letter-spacing:2px;
  color:rgba(195,251,244,.26);
  white-space:pre; user-select:none;
}
.mtl-ghost span{ position:absolute; left:0; top:0; will-change:transform; }

/* live window — raised bevel */
.mtl-win{
  position:relative;
  background:linear-gradient(178deg, #1E0418 0%, #33063A 48%, #1B0420 100%);
  border-top:2px solid var(--chrome-lit);
  border-left:2px solid var(--chrome-lit);
  border-right:2px solid var(--chrome-dim);
  border-bottom:2px solid var(--chrome-dim);
  box-shadow:
    5px 5px 0 rgba(11,2,7,.75),
    inset 0 0 0 1px rgba(11,2,7,.55),
    inset 0 0 60px rgba(81,11,71,.5);
}

.mtl-bar{
  display:flex; align-items:center; gap:9px;
  padding:4px 7px;
  background:linear-gradient(90deg, var(--bixbite) 0%, #7E0F3B 62%, #45081F 100%);
  border-bottom:2px solid var(--chrome-dim);
  font-family:'Archivo Black',Impact,sans-serif;
  font-size:12px; letter-spacing:.20em; text-transform:uppercase;
  color:#FFE9F1;
  text-shadow:1px 1px 0 rgba(11,2,7,.6);
}
.mtl-bar .dots{ margin-left:auto; letter-spacing:2px; opacity:.8; font-family:'VT323',monospace; font-size:15px; }

.mtl-x{
  margin-left:auto;
  width:19px; height:17px; padding:0;
  background:linear-gradient(180deg,#E9A9C4 0%, #B3708C 100%);
  border-top:2px solid #FFE9F1; border-left:2px solid #FFE9F1;
  border-right:2px solid #3E0A20; border-bottom:2px solid #3E0A20;
  color:#2B0526; cursor:pointer;
  font-family:'Archivo Black',sans-serif; font-size:11px; line-height:1;
}
.mtl-x:active{
  border-top-color:#3E0A20; border-left-color:#3E0A20;
  border-right-color:#FFE9F1; border-bottom-color:#FFE9F1;
}

.mtl-body{ position:relative; padding:16px 20px 15px; }

/* halftone band behind the masthead */
.mtl-body::before{
  content:""; position:absolute; left:0; right:0; top:0; height:118px;
  background:repeating-linear-gradient(
    to bottom,
    rgba(194,24,91,.30) 0px, rgba(194,24,91,.30) 2px,
    transparent 2px, transparent 5px);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.9) 0%, transparent 88%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.9) 0%, transparent 88%);
  pointer-events:none;
}
.mtl-body > *{ position:relative; }

/* the glitter crest */
.mtl-crest{
  text-align:center; margin:0 0 2px;
  font-family:'VT323',monospace;
  font-size:15px; letter-spacing:.42em;
  color:rgba(232,160,40,.72);
  animation:crestfade 7s ease-in-out infinite;
}
@keyframes crestfade{
  0%,100%{ opacity:.5; letter-spacing:.42em }
  50%    { opacity:1;  letter-spacing:.50em }
}

/* the masthead — didone, gradient-filled, hard shadow.
   the shadow and the chromatic ghost are drop-shadow filters, not
   pseudo-elements: background-clip:text paints into the element's
   background layer, which any negative-z-index pseudo would sit above. */
.mtl-title{
  margin:0 0 8px;
  text-align:center;
  font-family:'Playfair Display',Georgia,serif;
  font-weight:900; font-style:italic;
  font-size:clamp(30px,6vw,52px);
  line-height:1.04; letter-spacing:.02em;
  background:linear-gradient(104deg,
    #FFF6FA 0%, var(--aqua) 15%, var(--petrol) 31%,
    var(--bixbite-hot) 50%, var(--amber) 66%, #FFF6FA 82%, var(--aqua) 100%);
  background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:
    drop-shadow(4px 4px 0 rgba(11,2,7,.92))
    drop-shadow(-3px -2px 0 rgba(0,119,145,.50));
  animation:sheen 13s ease-in-out infinite, chromadrift 9s steps(1) infinite;
}
@keyframes sheen{
  0%,100%{ background-position:0% 50% }
  50%    { background-position:100% 50% }
}
@keyframes chromadrift{
  0%,71%,100%{
    filter:drop-shadow(4px 4px 0 rgba(11,2,7,.92))
           drop-shadow(-3px -2px 0 rgba(0,119,145,.50)) }
  73%{ filter:drop-shadow(4px 4px 0 rgba(11,2,7,.92))
              drop-shadow(-10px 1px 0 rgba(0,119,145,.75))
              drop-shadow(7px -3px 0 rgba(232,51,111,.5)) }
  76%{ filter:drop-shadow(4px 4px 0 rgba(11,2,7,.92))
              drop-shadow(6px -5px 0 rgba(195,251,244,.6)) }
  79%{ filter:drop-shadow(4px 4px 0 rgba(11,2,7,.92))
              drop-shadow(-2px 4px 0 rgba(232,160,40,.6)) }
}

/* the notice line — italic swash, the "Complete Tutorial" register */
.mtl-alert{
  display:block; width:100%;
  background:none; border:0; cursor:pointer;
  margin:0 0 12px; padding:2px 0;
  font-family:'Playfair Display',Georgia,serif;
  font-weight:700; font-style:italic;
  font-size:clamp(19px,3vw,27px);
  letter-spacing:.02em;
  color:var(--amber);
  text-shadow:2px 2px 0 rgba(11,2,7,.85), 0 0 22px rgba(232,160,40,.4);
  animation:emberpulse 5s ease-in-out infinite;
}
@keyframes emberpulse{
  0%,100%{ text-shadow:2px 2px 0 rgba(11,2,7,.85), 0 0 18px rgba(232,160,40,.30) }
  50%    { text-shadow:2px 2px 0 rgba(11,2,7,.85), 0 0 30px rgba(232,160,40,.70) }
}
.mtl-alert::before{ content:"~ "; opacity:.55 }
.mtl-alert::after { content:" ~"; opacity:.55 }
.mtl-alert:hover, .mtl-alert:focus-visible{
  color:#FFF6FA; outline:none;
  text-shadow:2px 2px 0 rgba(11,2,7,.85), 0 0 30px rgba(195,251,244,.9);
}

.mtl-rule{
  border:0; height:3px; margin:12px 0 11px;
  background:linear-gradient(90deg,
    transparent 0%, var(--bixbite) 12%, var(--amber) 50%, var(--bixbite) 88%, transparent 100%);
  box-shadow:0 2px 0 rgba(11,2,7,.7);
}

/* telemetry */
.mtl-tele{
  display:grid; grid-template-columns:auto 1fr; gap:3px 16px;
  margin:0;
}
.mtl-tele dt{
  font-family:'Archivo Black',Impact,sans-serif;
  font-size:11px; letter-spacing:.20em; text-transform:uppercase;
  color:var(--bixbite-hot);
  text-shadow:1px 1px 0 rgba(11,2,7,.8);
  align-self:center;
}
.mtl-tele dd{
  margin:0;
  font-family:'VT323',monospace; font-size:19px; line-height:1.25;
  color:var(--aqua); font-variant-numeric:tabular-nums;
  text-shadow:0 0 9px rgba(0,119,145,.7);
}

/* help panel */
.mtl-input{
  width:100%; resize:vertical;
  background:#12030E;
  border-top:2px solid var(--chrome-dim);
  border-left:2px solid var(--chrome-dim);
  border-right:2px solid rgba(233,169,196,.5);
  border-bottom:2px solid rgba(233,169,196,.5);
  color:var(--aqua);
  font-family:'VT323',monospace; font-size:19px; line-height:1.3;
  padding:8px 10px; outline:none;
}
.mtl-input:focus{ box-shadow:0 0 18px rgba(194,24,91,.4) inset; }

.mtl-actions{ display:flex; justify-content:flex-end; margin-top:12px; }
.mtl-send{
  background:linear-gradient(180deg,#E9A9C4 0%, #B3708C 55%, #8E1243 100%);
  border-top:2px solid #FFE9F1; border-left:2px solid #FFE9F1;
  border-right:2px solid var(--chrome-dim); border-bottom:2px solid var(--chrome-dim);
  color:#2B0526; cursor:pointer;
  font-family:'Archivo Black',Impact,sans-serif;
  font-size:12px; letter-spacing:.22em; padding:7px 24px;
  text-shadow:1px 1px 0 rgba(255,233,241,.5);
}
.mtl-send:hover{ filter:brightness(1.12); }
.mtl-send:active{
  border-top-color:var(--chrome-dim); border-left-color:var(--chrome-dim);
  border-right-color:#FFE9F1; border-bottom-color:#FFE9F1;
}

.mtl-ack{
  margin:8px 0 2px; text-align:center;
  font-family:'Playfair Display',Georgia,serif;
  font-weight:700; font-style:italic;
  font-size:clamp(17px,2.6vw,23px);
  color:var(--aqua); letter-spacing:.01em;
  text-shadow:2px 2px 0 rgba(11,2,7,.85), 0 0 20px rgba(195,251,244,.45);
}
.mtl-sub{
  margin:8px 0 0; text-align:center;
  font-family:'VT323',monospace;
  font-size:14px; letter-spacing:.34em;
  color:rgba(194,24,91,.62);
}

/* corner readout */
#tele-corner{
  position:fixed; z-index:5; left:16px; top:14px;
  font-family:'Archivo Black',Impact,sans-serif;
  font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(195,251,244,.42);
  text-shadow:1px 1px 0 rgba(11,2,7,.8), 0 0 10px rgba(0,119,145,.5);
  pointer-events:none; white-space:pre;
  opacity:0; transition:opacity .8s ease;
}
#tele-corner.in{ opacity:1; }

/* glitch-in */
.mtl.glitching{ animation:consoleglitch .46s steps(2) 1; }
@keyframes consoleglitch{
  0%  { transform:translate(0,0); filter:none }
  18% { transform:translate(-9px,3px); filter:hue-rotate(48deg) saturate(2) }
  36% { transform:translate(6px,-4px); filter:invert(.16) }
  54% { transform:translate(-4px,1px); filter:hue-rotate(-30deg) }
  72% { transform:translate(3px,0);    filter:saturate(1.5) }
  100%{ transform:translate(0,0);      filter:none }
}

/* ============================================================
   CRT — the outermost peel
   ============================================================ */
#crt{ position:fixed; inset:0; z-index:9; pointer-events:none; }

#crt .scan{
  position:absolute; inset:0;
  background:repeating-linear-gradient(to bottom,
    rgba(0,0,0,.55) 0px, rgba(0,0,0,.55) 1px, transparent 1px, transparent 3px);
  opacity:var(--crt-scan);
}
#crt .vhs{
  position:absolute; inset:0;
  background:repeating-linear-gradient(to bottom,
    rgba(195,251,244,.055) 0px, rgba(195,251,244,.055) 2px, transparent 2px, transparent 9px);
  opacity:var(--crt-vhs); mix-blend-mode:screen;
}
#crt .grain{
  position:absolute; inset:-60px; opacity:var(--crt-grain);
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='180' height='180' filter='url(%23n)'/></svg>");
  animation:grainshift .48s steps(1) infinite;
}
@keyframes grainshift{
  0%{transform:translate(0,0)} 20%{transform:translate(-18px,9px)}
  40%{transform:translate(12px,-14px)} 60%{transform:translate(-9px,-7px)}
  80%{transform:translate(15px,11px)} 100%{transform:translate(0,0)}
}
#crt .sweep{
  position:absolute; left:0; right:0; height:24vh; top:-30vh;
  background:linear-gradient(to bottom, transparent 0%,
    rgba(195,251,244,.05) 35%, rgba(195,251,244,.11) 50%,
    rgba(195,251,244,.05) 65%, transparent 100%);
  opacity:var(--crt-sweep); mix-blend-mode:screen;
  animation:sweep 11s cubic-bezier(.7,0,.85,.25) infinite;
}
@keyframes sweep{
  0%{transform:translateY(0)} 72%{transform:translateY(130vh)} 100%{transform:translateY(130vh)}
}
#crt .vig{
  position:absolute; inset:0;
  background:radial-gradient(130% 118% at 50% 50%,
    transparent 52%, rgba(11,2,7,.42) 78%, rgba(11,2,7,.86) 100%);
  opacity:var(--crt-vig);
}
#crt .bulge{
  position:absolute; inset:0;
  box-shadow:inset 0 0 90px 30px rgba(11,2,7,.55),
             inset 0 0 220px 60px rgba(43,5,38,.35);
  border-radius:1.2vmin;
}

@media (prefers-reduced-motion:reduce){
  :root{ --crt-grain:.05; --crt-sweep:0; --crt-vhs:.1; }
  #crt .grain,#crt .sweep,.mtl-title,
  .mtl-alert,.mtl-crest{ animation:none !important; }
  #vessel-wrap.is-rest .hull{ animation:none; }
}

@media (max-width:640px){
  #consoles{ padding:0 3vw 4vh; gap:12px; }
  #vessel-wrap{ width:min(26vmin,132px); height:min(26vmin,132px); }
  .mtl-body{ padding:13px 14px 12px; }
  .mtl-ghost{ left:9px; top:9px; right:-9px; bottom:-9px; }
}