/* VÄRLDSABSORBERAREN / Kastlösa Elektriska
   Game Boy-look: fyra gröna nyanser, platt, pixligt, hårda kanter, versaler. */

:root{
  --gb0:#0f380f;   /* mörkast */
  --gb1:#306230;
  --gb2:#8bac0f;
  --gb3:#9bbc0f;   /* ljusast, text */
  --pix:"Press Start 2P", "Courier New", monospace;   /* 8-bitars pixeltypsnitt */
}

*{ box-sizing:border-box; margin:0; padding:0; }

/* hidden ska alltid dölja, även element med egen display (overlay/keypad) */
[hidden]{ display:none !important; }

html,body{
  height:100%;
  background:var(--gb0);
  color:var(--gb3);
  font-family:"Courier New",ui-monospace,monospace;
  overflow:hidden;
  letter-spacing:0.04em;
  text-transform:uppercase;
  image-rendering:pixelated;
}

canvas{ image-rendering:pixelated; }

#scen{
  position:fixed; inset:0; width:100%; height:100%; display:block;
  touch-action:none; cursor:grab;
}
#scen:active{ cursor:grabbing; }

/* Språkknapp */
.sprak{
  position:fixed; top:12px; right:12px; z-index:40;
  background:var(--gb0); color:var(--gb3); border:3px solid var(--gb3);
  padding:7px 11px; font:700 13px/1 "Courier New",monospace; letter-spacing:0.15em; cursor:pointer;
}
.sprak:hover{ background:var(--gb3); color:var(--gb0); }

/* HUD */
.hud{ position:fixed; top:0; left:0; z-index:20; padding:14px 16px; max-width:min(92vw,420px); pointer-events:none; }
.hud__titel{ font-size:17px; font-weight:700; letter-spacing:0.18em; color:var(--gb3); }
.hud__under{ font-size:11px; letter-spacing:0.4em; color:var(--gb2); margin-top:2px; }
.hud__ledtrad{
  margin-top:12px; font-size:12px; line-height:1.5; color:var(--gb3);
  background:var(--gb0); border:3px solid var(--gb1); border-left:6px solid var(--gb3);
  padding:7px 9px; min-height:1.4em;
}
.kod{ margin-top:12px; display:flex; align-items:center; gap:7px; }
.kod__etikett{ font-size:11px; letter-spacing:0.25em; color:var(--gb2); }
.kod__ruta{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:38px; border:3px solid var(--gb1); background:var(--gb0); color:var(--gb1);
  font-size:20px; font-weight:700;
}
.kod__ruta.hittad{ border-color:var(--gb3); color:var(--gb3); background:var(--gb1); }

/* Vy over on (huset vaxer) */
.vy{
  position:fixed; right:12px; bottom:12px; z-index:20;
  width:128px; height:112px;
  border:3px solid var(--gb3); background:var(--gb0);
  image-rendering:pixelated; pointer-events:none;
}

/* Hjälprad */
.hjalp{
  position:fixed; left:0; bottom:0; z-index:20; padding:10px 16px;
  font-size:10px; letter-spacing:0.08em; color:var(--gb2); pointer-events:none;
}

/* Keypad / säkringsskåp */
.keypad{ position:fixed; inset:0; z-index:30; display:flex; align-items:center; justify-content:center; background:rgba(15,56,15,0.82); }
.keypad__panel{ background:var(--gb1); border:4px solid var(--gb3); padding:20px; width:min(90vw,320px); }
.keypad__rubrik{ font-size:13px; letter-spacing:0.25em; text-align:center; color:var(--gb3); margin-bottom:12px; }
.keypad__display{
  background:var(--gb0); border:3px solid var(--gb3); color:var(--gb3);
  font-size:30px; letter-spacing:0.3em; text-align:center; padding:10px 0; margin-bottom:14px; min-height:1.4em;
}
.keypad__display.fel{ color:var(--gb0); background:var(--gb3); }
.keypad__display.ratt{ color:var(--gb3); background:var(--gb1); }
.keypad__knappar{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.keypad__knappar button{
  background:var(--gb0); color:var(--gb3); border:3px solid var(--gb0);
  padding:13px 0; font:700 18px/1 "Courier New",monospace; cursor:pointer;
}
.keypad__knappar button:hover{ background:var(--gb3); color:var(--gb0); }
.keypad__bred{ font-size:12px !important; letter-spacing:0.08em; }
.keypad__enter{ border-color:var(--gb3) !important; }
.keypad__stang{
  display:block; width:100%; margin-top:12px; background:transparent; color:var(--gb3);
  border:none; font:700 12px/1 "Courier New",monospace; letter-spacing:0.2em; cursor:pointer;
}
.keypad__stang:hover{ color:var(--gb2); }

/* Slut: huset, langsam utzoom i rymden, citat (Space Grotesk) */
.eftertext{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; text-align:center; padding:0 24px; pointer-events:none; opacity:0; transition:opacity 2.5s; font-family:"Space Grotesk",system-ui,sans-serif; background:radial-gradient(ellipse 125% 90% at 50% 48%, rgba(0,0,0,0) 36%, rgba(0,0,0,0.45) 100%); }
.eftertext.synlig{ opacity:1; }
.eftertext__inre{ pointer-events:none; max-width:820px; }
.eftertext__rad2{ margin:0 auto; max-width:760px; min-height:4.6em; font-size:clamp(18px,3.1vw,30px); font-weight:400; font-style:italic; line-height:1.6; letter-spacing:0.01em; color:#eef3fc; text-shadow:0 2px 22px rgba(0,0,0,0.95); opacity:0; transition:opacity 0.3s; }
.eftertext__cite2{ margin-top:12px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:#9fb4d8; text-shadow:0 1px 10px rgba(0,0,0,0.85); }
.eftertext__cite2 em{ font-style:normal; color:#c6d6f2; }
.eftertext__final{ opacity:0; transition:opacity 2.2s; margin-top:30px; }
.eftertext.steg2 .eftertext__final{ opacity:1; }
.eftertext__titel{ font-size:clamp(26px,6vw,56px); font-weight:700; letter-spacing:0.3em; color:#eef4ff; text-shadow:0 0 26px rgba(120,170,255,0.5); margin-left:0.3em; }
.eftertext__igen{ display:inline-block; pointer-events:auto; margin-top:20px; color:#cfe0ff; background:transparent; border:1px solid rgba(180,205,255,0.6); padding:11px 26px; font:500 12px/1 "Space Grotesk",sans-serif; letter-spacing:0.3em; text-transform:uppercase; text-decoration:none; transition:all 0.3s; }
.eftertext__igen:hover{ background:rgba(180,205,255,0.15); border-color:#cfe0ff; }

/* Mobil: fram/bak-knappar (bara på touch) */
.mobctrls{ display:none; }
@media (hover: none), (pointer: coarse) {
  .mobctrls{ display:flex; flex-direction:column; gap:12px; position:fixed; right:16px; bottom:90px; z-index:25; }
}
.mobbtn{ width:66px; height:66px; border:3px solid #46e0ff; background:rgba(10,8,8,0.55); color:#46e0ff; font:900 26px/1 "Courier New",monospace; cursor:pointer; touch-action:none; }
.mobbtn:active{ background:#46e0ff; color:#06121a; }

/* Minispel: aterskapa strommen */
.minispel{ position:fixed; inset:0; z-index:46; display:flex; align-items:center; justify-content:center; background:rgba(22,8,8,0.92); --acc:#46e0ff; }
.minispel[data-typ="hangman"]{ --acc:#ffb24a; }
.minispel[data-typ="memory"]{ --acc:#66ff88; }
.minispel[data-typ="lights"]{ --acc:#cf7aff; }
.minispel[data-typ="ttt"]{ --acc:#46e0ff; }
.minispel__panel{ position:relative; background:#180c0c; border:4px solid var(--acc); box-shadow:0 0 0 4px #000, 0 0 36px rgba(255,255,255,0.08); padding:22px; width:min(90vw,320px); text-align:center; image-rendering:pixelated; }
.minispel__panel::after{ content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg, rgba(0,0,0,0.22) 0 2px, transparent 2px 4px); }
.minispel[data-typ="hangman"] .minispel__panel{ background:#1b1206; }
.minispel[data-typ="memory"] .minispel__panel{ background:#07180d; }
.minispel[data-typ="lights"] .minispel__panel{ background:#150719; }
.minispel[data-typ="ttt"] .minispel__panel{ background:#06141a; }
.minispel__rubrik{ display:none; }
.minispel__text{ display:none; }
.minispel__pads{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.minispel__pads .pad{ height:88px; border:3px solid #3a1414; cursor:pointer; transition:transform 0.08s, box-shadow 0.12s; }
.pad0{ background:#5a1a1a; } .pad1{ background:#1a4a5a; } .pad2{ background:#5a3a1a; } .pad3{ background:#2a2a5a; }
.minispel__pads .pad:active{ transform:scale(0.9); }
.minispel__pads .pad.aktiv{ background:#46e0ff; box-shadow:0 0 22px #46e0ff; transform:scale(1.1); }
.minispel__panel.skaka{ animation:mg-skaka 0.3s; }
.minispel__panel.vann{ animation:mg-vann 0.8s; }
@keyframes mg-skaka{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(6px)} }
@keyframes mg-vann{ 0%,100%{box-shadow:0 0 0 rgba(70,224,255,0)} 50%{box-shadow:0 0 44px rgba(70,224,255,0.95)} }
.mg-bar{ position:relative; height:48px; border:3px solid #46e0ff; background:#0c0606; margin:6px 0 2px; cursor:pointer; overflow:hidden; }
.mg-bar__zon{ position:absolute; top:0; bottom:0; background:rgba(70,224,255,0.3); border-left:2px solid #46e0ff; border-right:2px solid #46e0ff; }
.mg-bar__mark{ position:absolute; top:0; bottom:0; width:6px; background:#46e0ff; box-shadow:0 0 14px #46e0ff; }
.mg-mash{ width:100%; height:92px; margin:6px 0; background:#5a1a1a; color:#ffdede; border:4px solid #46e0ff; font:400 18px/1 var(--pix); cursor:pointer; }
.mg-mash:active{ transform:scale(0.95); background:#46e0ff; color:#06121a; }
.mg-grid{ display:grid; gap:8px; margin:8px 0; }
.mg-grid .gcell{ aspect-ratio:1/1; border:3px solid #3a1414; background:#0c0606; color:var(--acc); font:400 22px/1 var(--pix); image-rendering:pixelated; cursor:pointer; }
.mg-grid .gcell.pa{ background:var(--acc); color:#06121a; box-shadow:0 0 16px var(--acc); }
.mg-grid .gcell.matchad{ background:#1a4a5a; color:#cfeefe; opacity:0.7; }
.mg-ord{ text-align:center; }
.mg-gubbe{ color:#ffb24a; font:700 14px/1.15 "Courier New",monospace; text-align:left; display:inline-block; margin:4px auto 6px; white-space:pre; }
.mg-word{ color:var(--acc); font:400 18px/1.4 var(--pix); letter-spacing:0.08em; margin:10px 0 14px; min-height:1.2em; }
.mg-keys{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.mg-keys .gkey{ padding:10px 0; border:2px solid #3a1414; background:#0c0606; color:var(--acc); font:400 11px/1 var(--pix); cursor:pointer; }
.mg-keys .gkey:hover:not(:disabled){ background:var(--acc); color:#06121a; }
.mg-keys .gkey.ratt{ background:#1a4a5a; color:#cfeefe; }
.mg-keys .gkey.fel{ opacity:0.3; }
.mg-keys .gkey:disabled{ cursor:default; }
.mg-keys .gkey, .mg-grid .gcell{ box-shadow: inset -3px -3px 0 rgba(0,0,0,0.5), inset 3px 3px 0 rgba(255,255,255,0.1); }

/* Alla enheter: minispelspanel ryms på små skärmar */
@media (max-width:560px){
  .minispel__panel{ padding:16px; width:94vw; max-height:92vh; overflow:auto; }
  .mg-keys{ gap:4px; }
  .mg-keys .gkey{ font-size:10px; padding:9px 0; }
  .mg-word{ font-size:15px; }
  .mobbtn{ width:60px; height:60px; }
}
.minispel__stang{ display:block; width:100%; margin-top:16px; background:transparent; color:var(--acc); border:none; font:400 9px/1.4 var(--pix); letter-spacing:0.1em; cursor:pointer; }
.minispel__stang:hover{ color:#ffb24a; }

/* Ljuslada: se ett verk stort och skarpt */
.ljuslada{
  position:fixed; inset:0; z-index:45;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:rgba(15,56,15,0.93); padding:24px;
}
.ljuslada__bild{
  max-width:92vw; max-height:78vh; width:auto; height:auto;
  border:4px solid var(--gb3); image-rendering:auto; object-fit:contain;
}
.ljuslada__text{ color:var(--gb3); font-size:13px; letter-spacing:0.08em; text-transform:none; text-align:center; max-width:90vw; }
.ljuslada__stang{
  background:var(--gb0); color:var(--gb3); border:3px solid var(--gb3);
  padding:10px 24px; font:700 13px/1 "Courier New",monospace; letter-spacing:0.2em; cursor:pointer;
}
.ljuslada__stang:hover{ background:var(--gb3); color:var(--gb0); }

/* Overlays */
.overlay{
  position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  background:var(--gb0); text-align:center; padding:24px; transition:opacity 0.4s;
}
.overlay__inre{ max-width:540px; }
.overlay__titel{ font-size:clamp(26px,6vw,46px); font-weight:700; letter-spacing:0.1em; color:var(--gb3); }
.overlay__under{ margin-top:6px; font-size:14px; letter-spacing:0.5em; color:var(--gb2); }
.overlay__text{ margin-top:22px; font-size:14px; line-height:1.6; color:var(--gb3); text-transform:none; }
.overlay__fin{ margin-top:18px; font-size:12px; color:var(--gb2); line-height:1.6; }
.overlay__fin a{ color:var(--gb3); }
.stor_knapp{
  margin-top:24px; background:var(--gb0); color:var(--gb3); border:3px solid var(--gb3);
  padding:15px 32px; font:700 16px/1 "Courier New",monospace; letter-spacing:0.22em; cursor:pointer;
}
.stor_knapp:hover:not(:disabled){ background:var(--gb3); color:var(--gb0); }
.stor_knapp:disabled{ opacity:0.4; cursor:default; border-color:var(--gb1); color:var(--gb1); }

@media (max-width:520px){
  .hud{ max-width:84vw; }
  .vy{ width:96px; height:84px; }
}

/* Tillgänglighet (tillagt) */
button, a { touch-action: manipulation; }
.keypad__knappar button:focus-visible,
.pad:focus-visible,
.mobbtn:focus-visible,
.stor_knapp:focus-visible,
.minispel__stang:focus-visible,
#sprak:focus-visible { outline: 3px solid #d8e800; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .minispel__panel.skaka,
  .minispel__panel.vann { animation: none !important; }
}