/* ============================================================
   style.css — the look of the Game Boy portfolio.

   Reading guide
   -------------
   1. Variables (colours and fonts) — change a colour here and it
      changes everywhere.
   2. The page background.
   3. The 3D box (.rig) and its six faces.
   4. The front face: shell, screen frame, buttons.
   5. Help text under the console.
   6. Everything drawn INSIDE the screen (#screen ...). The screen is
      always 320 x 288 px in CSS; JavaScript scales it to fit, so all
      sizes in that section are in those "screen pixels".
   7. Reduced-motion: turn animations off for people who asked for
      less motion in their OS settings.
   ============================================================ */

/* ---------- 1. variables ---------- */
:root{
  /* page background (teal) and the text on it */
  --ground:#1f6b63;
  --ground-hi:#2f8a7d;
  --ground-lo:#0f3f3c;
  --ground-text:#dcefe6;
  --ground-text-dim:#9cc9bc;

  /* the plastic shell */
  --shell:#c9c4bf;
  --shell-hi:#e2ded9;
  --shell-lo:#a39d98;
  --shell-shadow:#6d6763;

  /* the dark frame around the screen and its two coloured lines */
  --bezel:#484b55;
  --bezel-hi:#5c606b;
  --line-a:#8b2f5c;
  --line-b:#2f3f7d;

  /* buttons */
  --ab:#8b2f5c;        /* A and B (burgundy) */
  --ab-hi:#b04a7b;
  --ab-lo:#5e1c3c;
  --dpad:#232327;
  --ss:#7d7a80;        /* START and SELECT (grey) */
  --ss-lo:#4c4a4f;
  --led:#e53e3e;       /* battery light */

  /* the four greens of the screen, darkest to lightest */
  --lcd0:#0f380f;
  --lcd1:#306230;
  --lcd2:#8bac0f;
  --lcd3:#9bbc0f;

  /* fonts: px-font for headings, body-font for longer text */
  --px-font:"Press Start 2P", "Courier New", monospace;
  --body-font:"VT323", "Courier New", monospace;
}
*{box-sizing:border-box}

/* ---------- 2. page background ---------- */
body{
  margin:0;
  background-color:var(--ground);
  /* two layers: a tiny dot pattern on top of a soft radial gradient */
  background-image:
    radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.2px),
    radial-gradient(ellipse at 50% 18%, var(--ground-hi) 0%, var(--ground) 42%, var(--ground-lo) 100%);
  background-size:6px 6px, 100% 100%;
  background-attachment:fixed;
  color:var(--ground-text);
  font-family:var(--px-font);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:24px 12px 32px;
  -webkit-font-smoothing:none;   /* keeps pixel fonts crisp */
}
.stage{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%;perspective:1600px}

/* ---------- 3. the 3D box ---------- */
/* .rig is an invisible box. Its size comes from the real Game Boy
   (90 x 148 x 32 mm) scaled to fit the browser window. The six .face
   elements are placed on its sides with 3D transforms. app.js sets
   --rx and --ry when you drag the console. */
.rig{
  --w:min(92vw, 470px, 58vh);       /* width  */
  --h:calc(var(--w) * 148 / 90);    /* height */
  --d:calc(var(--w) * .32);         /* depth  */
  position:relative;width:var(--w);height:var(--h);
  transform-style:preserve-3d;      /* let children sit in 3D space */
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
  touch-action:pan-y;cursor:grab;   /* sideways finger drags rotate; up/down still scrolls the page */
  user-select:none;-webkit-user-select:none;
}
.rig.drag{transition:none;cursor:grabbing}   /* no easing while dragging, so it follows the pointer exactly */
.face{position:absolute;backface-visibility:hidden;-webkit-backface-visibility:hidden}  /* a face is invisible from behind */
.face.front{inset:0;transform:translateZ(calc(var(--d) / 2))}
.face.back{
  inset:0;transform:rotateY(180deg) translateZ(calc(var(--d) / 2));
  background:linear-gradient(200deg, var(--shell-hi) 0%, var(--shell) 40%, var(--shell-lo) 100%);
  border-radius:10px 10px 10px 46px;   /* the big rounded corner ends up on the other side when seen from behind */
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.3), inset -3px -3px 0 rgba(0,0,0,.18);
}
.face.side{background:linear-gradient(90deg, var(--shell-lo), var(--shell) 50%, var(--shell-lo))}
.face.left,.face.right{width:var(--d);height:var(--h);top:0;left:calc(50% - var(--d) / 2)}
.face.left{transform:rotateY(-90deg) translateZ(calc(var(--w) / 2))}
.face.right{transform:rotateY(90deg) translateZ(calc(var(--w) / 2))}
.face.top,.face.bottom{width:var(--w);height:var(--d);left:0;top:calc(50% - var(--d) / 2);background:linear-gradient(180deg, var(--shell-lo), var(--shell) 50%, var(--shell-lo))}
.face.top{transform:rotateX(90deg) translateZ(calc(var(--h) / 2))}
.face.bottom{transform:rotateX(-90deg) translateZ(calc(var(--h) / 2))}
/* small printed labels on the sides (CONTRAST, VOLUME, PHONES) */
.face.side b{
  position:absolute;left:50%;bottom:8%;transform:translateX(-50%);
  font-size:.34em;letter-spacing:.1em;color:var(--shell-shadow);font-weight:normal;white-space:nowrap;
}
.face.left b,.face.right b{bottom:auto;top:27%;transform:translateX(-50%) rotate(-90deg);transform-origin:center}
.face.left b{left:50%}
/* back face: screws, the embossed name plate, the battery cover */
.back .screws i{
  position:absolute;width:5%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #d9d5d0, #8d8782);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.4);
}
.back .screws i:nth-child(1){left:5%;top:3%}
.back .screws i:nth-child(2){right:5%;top:3%}
.back .screws i:nth-child(3){left:5%;top:46%}
.back .screws i:nth-child(4){right:5%;top:46%}
.back .plate{position:absolute;left:12%;right:12%;top:16%;text-align:center}
.back .model{
  font-size:.85em;letter-spacing:.1em;color:#8a847f;
  text-shadow:1px 1px 0 rgba(255,255,255,.55), -1px -1px 0 rgba(0,0,0,.18);   /* light + dark shadow = embossed look */
}
.back .fine{margin-top:14px;font-size:.36em;line-height:2.1;letter-spacing:.06em;color:#7c7672}
.back .battery{
  position:absolute;left:7%;right:7%;bottom:5%;height:42%;
  border-radius:8px 8px 8px 36px;
  background:linear-gradient(180deg, #c3bdb8, #aca69f);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.2), 0 -2px 0 rgba(0,0,0,.12);
}
.back .battery .ridges{
  position:absolute;left:8%;right:8%;top:22%;height:56%;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,.13) 0 2px, transparent 2px 7px);   /* grip lines */
}
.back .battery span{position:absolute;right:8%;top:7%;font-size:.36em;color:#6d6763;letter-spacing:.1em}
/* side details: wheels, link port, cartridge slot, power switch, headphone jack */
.face .dial{
  position:absolute;left:24%;width:52%;height:8%;top:13%;border-radius:6px;
  background:repeating-linear-gradient(180deg, #2b2b2f 0 2px, #55555b 2px 4px);
  box-shadow:0 0 0 2px #1b1b1e, 0 2px 4px rgba(0,0,0,.4);
}
.face .ext{position:absolute;left:22%;width:56%;height:4%;top:4%;background:#2b2b2f;border-radius:2px;box-shadow:inset 0 2px 3px rgba(0,0,0,.7)}
.face.top .slot{
  position:absolute;left:12%;right:12%;top:26%;height:48%;border-radius:3px;
  background:#26262a;box-shadow:inset 0 4px 8px rgba(0,0,0,.75), inset 0 -1px 0 rgba(255,255,255,.08);
}
.face.top .sw{position:absolute;left:4%;top:30%;width:6%;height:40%;border-radius:3px;background:linear-gradient(#5a5a5e,#2c2c30);box-shadow:0 1px 0 rgba(0,0,0,.4)}
.face.bottom .jack{position:absolute;left:47%;top:28%;width:6%;aspect-ratio:1;border-radius:50%;background:#111;box-shadow:inset 0 0 0 2px #4a4a4e}
/* soft shadow under the box (does not rotate with it) */
.floor-shadow{
  width:calc(min(92vw, 470px, 58vh) * .85);height:34px;margin-top:-6px;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(4,30,28,.6), rgba(4,30,28,0) 70%);
}

/* ---------- 4. the front face ---------- */
/* Positions inside the console are percentages of its size, so the
   whole thing scales together on any screen size. */
.console{
  background:linear-gradient(160deg, var(--shell-hi) 0%, var(--shell) 35%, var(--shell) 70%, var(--shell-lo) 100%);
  border-radius:10px 10px 46px 10px;   /* big rounded corner bottom-right, like the real one */
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.35),
    inset -3px -3px 0 rgba(0,0,0,.18);
}
.console::before{                       /* thin groove along the top edge */
  content:"";position:absolute;left:8%;right:18%;top:2.2%;height:2px;
  background:rgba(0,0,0,.18);border-radius:2px;
}
.bezel{                                 /* dark frame around the screen */
  position:absolute;left:5.5%;right:5.5%;top:4.5%;height:44.5%;
  background:linear-gradient(170deg, var(--bezel-hi), var(--bezel) 40%);
  border-radius:8px 8px 34px 8px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.08), inset 0 -2px 0 rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.3);
}
.stripes{                               /* the burgundy and blue lines */
  position:absolute;left:6%;right:6%;top:6%;height:6px;
  border-top:2px solid var(--line-a);
  border-bottom:2px solid var(--line-b);
}
.bezel-text{
  position:absolute;left:50%;top:5%;transform:translate(-50%,-50%);
  background:var(--bezel);padding:0 6px;
  font-size:.34em;letter-spacing:.06em;color:#c9ccd6;white-space:nowrap;
}
.led{                                   /* red battery light */
  position:absolute;left:4%;top:44%;
  font-size:.3em;color:#c9ccd6;letter-spacing:.04em;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.led i{
  width:8px;height:8px;border-radius:50%;background:var(--led);
  box-shadow:0 0 6px var(--led), 0 0 14px rgba(229,62,62,.6);
  animation:ledpulse 3s ease-in-out infinite;
}
@keyframes ledpulse{0%,100%{opacity:1}50%{opacity:.75}}

.lcd{                                   /* the green screen area */
  position:absolute;left:15.5%;top:16%;width:74.5%;aspect-ratio:10/9;
  background:var(--lcd3);
  box-shadow:inset 0 0 0 2px #7a9a10, inset 0 0 18px rgba(15,56,15,.35);
  overflow:hidden;
}
.lcd::after{                            /* faint pixel grid over the screen */
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(15,56,15,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,56,15,.09) 1px, transparent 1px);
  background-size:3px 3px;
  mix-blend-mode:multiply;
}
#screen{                                /* the 320x288 panel that JS scales to fit .lcd */
  position:absolute;left:0;top:0;width:320px;height:288px;
  transform-origin:0 0;
  color:var(--lcd0);
  font-family:var(--body-font);
  font-size:20px;line-height:1;
  overflow:hidden;
}
/* Greek text uses a different pixel font (VT323 has no Greek letters). */
#screen.el{--body-font:"Tiny5", "Press Start 2P", "Courier New", monospace; font-size:17px; line-height:1.15}

.brand{                                 /* logo under the screen */
  position:absolute;left:6%;top:51%;
  font-size:.5em;color:var(--line-b);letter-spacing:.02em;
  font-style:italic;text-shadow:1px 1px 0 rgba(255,255,255,.4);
  line-height:1.5;
}
.brand span{display:block;font-size:.72em;color:#3d3a42;font-style:normal;letter-spacing:.14em;}

/* --- buttons --- */
.btn{cursor:pointer;touch-action:none;}               /* touch-action:none stops the page scrolling when you tap them */
.btn:focus-visible{outline:3px solid #fff;outline-offset:2px}

.dpad{position:absolute;left:7%;top:58%;width:26%;aspect-ratio:1;}
.dpad .k{                               /* the four arms */
  position:absolute;background:linear-gradient(#333338, var(--dpad));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.12), inset 0 -3px 0 rgba(0,0,0,.5), 0 3px 0 rgba(0,0,0,.35);
}
.dpad .k.up{left:33.3%;top:0;width:33.4%;height:36%;border-radius:4px 4px 0 0}
.dpad .k.down{left:33.3%;bottom:0;width:33.4%;height:36%;border-radius:0 0 4px 4px}
.dpad .k.left{left:0;top:33.3%;width:36%;height:33.4%;border-radius:4px 0 0 4px}
.dpad .k.right{right:0;top:33.3%;width:36%;height:33.4%;border-radius:0 4px 4px 0}
.dpad .c{position:absolute;left:33.3%;top:33.3%;width:33.4%;height:33.4%;background:var(--dpad);}   /* centre piece */
.dpad .c::after{
  content:"";position:absolute;left:25%;top:25%;width:50%;height:50%;border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #3a3a40, #151517);
}
.dpad .k.pressed{transform:translateY(2px);box-shadow:inset 0 2px 0 rgba(0,0,0,.4)}   /* .pressed is added by JS */

.ab{position:absolute;right:6%;top:57%;width:34%;aspect-ratio:2/1.2;transform:rotate(-24deg);}   /* A/B sit at an angle */
.ab .round{
  position:absolute;width:46%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 32%, var(--ab-hi), var(--ab) 55%, var(--ab-lo));
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.35), 0 4px 0 var(--ab-lo), 0 6px 4px rgba(0,0,0,.3);
}
.ab .round.b{left:0;top:40%}
.ab .round.a{right:0;top:0}
.ab .round.pressed{transform:translateY(3px);box-shadow:inset 0 -1px 0 rgba(0,0,0,.35), 0 1px 0 var(--ab-lo)}
.ab .lab{position:absolute;font-size:.55em;color:var(--line-b);font-weight:bold;}
.ab .lab.b{left:14%;top:108%}
.ab .lab.a{right:14%;top:68%}

.ss{position:absolute;left:29%;top:81.5%;display:flex;gap:9%;width:42%;transform:rotate(-24deg);}   /* SELECT / START */
.ss .pill{position:relative;flex:1;}
.ss .pill .cap{
  height:12px;border-radius:8px;
  background:linear-gradient(#8f8c92, var(--ss) 50%, var(--ss-lo));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 3px 0 var(--ss-lo), 0 4px 3px rgba(0,0,0,.3);
}
.ss .pill.pressed .cap{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(0,0,0,.2), 0 1px 0 var(--ss-lo)}
.ss .pill .lab{
  position:absolute;left:50%;top:18px;transform:translateX(-50%);
  font-size:.4em;color:var(--line-b);letter-spacing:.06em;white-space:nowrap;
}
.speaker{                               /* six slanted slots */
  position:absolute;right:7%;bottom:5%;width:22%;aspect-ratio:1.1;
  transform:rotate(-24deg);display:flex;justify-content:space-between;
}
.speaker i{
  width:9%;height:100%;border-radius:4px;
  background:linear-gradient(#7c7671, #57524e);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5);
}
.speaker i:nth-child(odd){background:linear-gradient(#5b5652, #3f3b38)}

/* ---------- 5. help text under the console ---------- */
.legend{
  font-size:8px;line-height:2.2;letter-spacing:.06em;
  color:var(--ground-text-dim);text-align:center;max-width:470px;margin:0;
}
.legend b{color:var(--ground-text);font-weight:normal}
.legend kbd{font:inherit;color:var(--ground-text);border:1px solid var(--ground-text-dim);padding:1px 4px;border-radius:2px;}

/* ---------- 6. inside the screen (320x288 units) ---------- */
/* Every screen is built from a few parts:
   .hdr  dark bar at the top with the title
   .win  a bordered window; .win.body is the scrollable one
   .foot the bottom bar with button hints
   .dlg  an RPG-style text box at the bottom
   .menu a list where one row (.sel) is highlighted with ▶ */
#screen .hdr{
  font-family:var(--px-font);font-size:8px;
  background:var(--lcd0);color:var(--lcd3);
  padding:6px 8px;display:flex;justify-content:space-between;align-items:center;
  letter-spacing:.04em;cursor:pointer;
}
#screen .hdr .r{opacity:.85}
#screen .win{
  position:absolute;left:8px;right:8px;
  border:2px solid var(--lcd0);box-shadow:inset 0 0 0 2px var(--lcd3), inset 0 0 0 4px var(--lcd0);   /* double border */
  padding:10px 10px;background:var(--lcd3);
}
#screen .win.body{top:32px;bottom:34px;overflow:hidden}
#screen .win.body .inner{position:absolute;left:10px;right:10px;top:10px;transition:top .12s steps(4)}   /* JS moves "top" to scroll */
#screen .foot{
  position:absolute;left:0;right:0;bottom:0;height:26px;
  font-family:var(--px-font);font-size:7px;color:var(--lcd0);
  display:flex;justify-content:space-between;align-items:center;padding:0 10px;
  letter-spacing:.04em;cursor:pointer;
}
#screen .foot .more{animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

#screen .menu{list-style:none;margin:0;padding:0;font-family:var(--px-font);font-size:9px}
#screen .menu li{padding:5px 0 5px 22px;position:relative;line-height:1.3;cursor:pointer}
#screen .menu li:hover:not(.sel){background:rgba(15,56,15,.08)}
#screen .menu li.sel::before{content:"▶";position:absolute;left:4px;top:5px}
#screen .menu li .tag{float:right;font-size:7px;padding:2px 3px;background:var(--lcd0);color:var(--lcd3);}
#screen .menu li.sel .tag{background:var(--lcd1)}
#screen .menu li .sub{display:block;font-family:var(--body-font);font-size:16px;color:var(--lcd1);margin-top:3px}
#screen.el .menu li .sub{font-size:14px}
#screen .menu li a{color:inherit;text-decoration:none;display:block;margin:-5px 0 -5px -22px;padding:5px 0 5px 22px}

#screen .dlg{
  position:absolute;left:8px;right:8px;bottom:8px;min-height:70px;
  border:2px solid var(--lcd0);box-shadow:inset 0 0 0 2px var(--lcd3), inset 0 0 0 4px var(--lcd0);
  padding:10px 10px 8px;background:var(--lcd3);font-size:19px;line-height:1.05;
}
#screen.el .dlg{font-size:15px;line-height:1.15}
#screen p{margin:0 0 8px}
#screen ul.bul{margin:0;padding:0 0 0 12px;list-style:none}          /* bullet list with ■ */
#screen ul.bul li{position:relative;margin:0 0 6px;line-height:1.05}
#screen.el ul.bul li{line-height:1.15}
#screen ul.bul li::before{content:"■";position:absolute;left:-12px;top:1px;font-size:10px}
#screen .stat{margin-bottom:7px}                                      /* label above value, on the PLAYER screen */
#screen .stat b{display:block;font-weight:normal;color:var(--lcd1);font-family:var(--px-font);font-size:7px;margin-bottom:3px}
#screen .stat span{display:block;font-size:18px;line-height:1;overflow-wrap:anywhere}
#screen.el .stat span{font-size:15px;line-height:1.1}
#screen .lab{font-family:var(--px-font);font-size:7px;background:var(--lcd0);color:var(--lcd3);display:inline-block;padding:3px 4px;margin:4px 0 6px}   /* small dark label */
#screen .chips{display:flex;flex-wrap:wrap;gap:4px 6px;margin-bottom:6px}
#screen .chip{border:2px solid var(--lcd0);padding:1px 5px;font-size:17px;line-height:1.1}   /* one skill */
#screen.el .chip{font-size:15px}
#screen .act{                                                         /* yes / no buttons */
  display:inline-block;font-family:var(--px-font);font-size:8px;padding:6px 8px;margin:4px 6px 0 0;
  border:2px solid var(--lcd0);cursor:pointer;
}
#screen .act.pri{background:var(--lcd0);color:var(--lcd3)}
#screen .act:hover{background:var(--lcd1);color:var(--lcd3);border-color:var(--lcd1)}
#screen .face{display:block;width:112px;height:112px;image-rendering:pixelated;border:2px solid var(--lcd0);background:var(--lcd3);flex:none}   /* the 56px portrait shown at 2x */
#screen .langsw{font-family:var(--px-font);font-size:7px;margin-top:14px;letter-spacing:.1em}   /* EN / ΕΛ switch on the title */
#screen .langsw span{padding:3px 5px;cursor:pointer}
#screen .langsw span.on{background:var(--lcd0);color:var(--lcd3)}

/* pixel sprite: one element, every pixel is a box-shadow (see app.js sprite()) */
.sprite{width:3px;height:3px;position:relative;margin:0 auto}
.sprite i{position:absolute;left:0;top:0;width:3px;height:3px}

/* boot: the logo drops from above in 28 steps, like the original */
#screen .boot{position:absolute;inset:0}
#screen .boot .logo{
  position:absolute;left:0;right:0;top:-40px;text-align:center;
  font-family:var(--px-font);font-size:16px;letter-spacing:.06em;color:var(--lcd0);
}
#screen .boot .logo small{display:block;font-size:6px;margin-top:8px;letter-spacing:.2em;color:var(--lcd1)}
#screen .boot.go .logo{animation:drop 1.4s steps(28) forwards}
@keyframes drop{to{top:122px}}

/* title screen */
#screen .title{position:absolute;inset:0;padding:22px 0 0;text-align:center}
#screen .title h1{font-family:var(--px-font);font-size:13px;margin:0;line-height:1.6;color:var(--lcd0)}
#screen .title h1 small{display:block;font-size:7px;letter-spacing:.2em;color:var(--lcd1);margin-top:6px}
#screen .title .press{font-family:var(--px-font);font-size:8px;margin-top:18px;animation:blink 1.1s steps(2) infinite}
#screen .title .copy{position:absolute;left:0;right:0;bottom:8px;font-family:var(--px-font);font-size:6px;color:var(--lcd1);letter-spacing:.08em}
#screen .ground{position:absolute;left:0;right:0;bottom:30px;height:6px;background:repeating-linear-gradient(90deg,var(--lcd0) 0 6px,var(--lcd2) 6px 12px)}
#screen .title .walker{position:absolute;bottom:37px;left:-40px;animation:walk 9s linear infinite}   /* the little character walking across */
@keyframes walk{to{left:340px}}

#screen canvas.game{display:block;image-rendering:pixelated}   /* Pong */

/* ---------- 7. reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  #screen .boot.go .logo{animation-duration:.01s}
  #screen .title .walker{animation:none;left:150px}
  .led i{animation:none}
  #screen .title .press,#screen .foot .more{animation:none}
}