/* Safe Clean Green — shared styles */
:root{
    --bg:#0e1822; --bg-2:#152433; --bg-3:#0a131c;
    --grn:#5dffa0; --grn-dim:#37c47a; --cyan:#5bd1ff; --cyan-dim:#2f9fd0;
    --amber:#ffc24b; --amber-dk:#b8841f; --magenta:#ff5d8f;
    --text:#e7f1ea; --text-dim:#a6bcb1; --muted:#6f8a82; --ink:#07131b;
    --grass:#3ec850; --grass-dk:#1f9e3a; --dirt:#c5571a;
    --line:rgba(93,255,160,.16); --line-cy:rgba(91,209,255,.20);
    --glow:0 0 8px rgba(93,255,160,.45); --glow-cy:0 0 8px rgba(91,209,255,.5); --glow-amber:0 0 10px rgba(255,194,75,.5);
    --pixel:'Press Start 2P',monospace; --term:'VT323',monospace;
    --chunk:5px 5px 0 rgba(7,19,27,.45);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--bg);color:var(--text);font-family:var(--term);font-size:21px;line-height:1.5;overflow-x:hidden;background-image:radial-gradient(ellipse at 50% -10%, rgba(91,209,255,.10), transparent 55%);}
  ::selection{background:var(--grn);color:var(--ink)}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px}

  .crt{position:fixed;inset:0;pointer-events:none;z-index:60;background:radial-gradient(ellipse at center, transparent 68%, rgba(0,0,0,.34) 100%);}
  .crt::before{content:"";position:fixed;inset:0;background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.08) 3px);}

  #boot{position:fixed;inset:0;z-index:100;background:var(--bg-3);display:flex;align-items:center;justify-content:center;font-family:var(--term);font-size:23px;color:var(--grn);padding:24px;transition:opacity .5s ease;}
  #boot .lines{width:min(540px,90vw);text-shadow:var(--glow)}
  #boot .blink::after{content:"_";animation:blink 1s steps(1) infinite}
  @keyframes blink{50%{opacity:0}}

  .hud{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);background:rgba(14,24,34,.9);backdrop-filter:blur(5px)}
  .hud .wrap{display:flex;align-items:center;justify-content:space-between;height:62px;gap:16px}
  .brand{font-family:var(--pixel);font-size:14px;color:var(--grn);text-shadow:var(--glow);white-space:nowrap}
  .brand .d{color:var(--amber)}
  .status{display:flex;align-items:center;gap:18px;font-size:18px;color:var(--text-dim)}
  .dot{width:9px;height:9px;border-radius:50%;background:var(--grn);box-shadow:var(--glow);display:inline-block;margin-right:7px;animation:pulse 1.6s infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
  .status .phone{color:var(--cyan)}

  /* ============ STAGE ============ */
  .stage{position:relative;overflow:hidden;height:clamp(520px,66vh,640px);background:linear-gradient(#5C94FC 0 62%, #6da0fc);}
  @keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  .sun{position:absolute;top:30px;right:7%;z-index:1;width:74px;height:74px}
  .strip{position:absolute;left:0;width:200%}
  .strip>svg{position:absolute;top:0;width:50%;height:100%}
  .strip>svg:last-child{left:50%}

  .cloudsL{top:26px;height:110px;z-index:1;animation:scrollx 95s linear infinite}
  .mtnL{bottom:150px;height:170px;z-index:1;opacity:.9;animation:scrollx 140s linear infinite}
  .skylineL{bottom:96px;height:190px;z-index:2;animation:scrollx 64s linear infinite}
  .hillsL{bottom:84px;height:110px;z-index:3;animation:scrollx 38s linear infinite}

  .ground{position:absolute;left:0;bottom:0;width:100%;height:84px;z-index:4;background:var(--dirt);
    background-image:
      linear-gradient(var(--grass) 0 12px, var(--grass-dk) 12px 16px, transparent 16px),
      repeating-linear-gradient(90deg, rgba(0,0,0,.28) 0 3px, transparent 3px 42px),
      linear-gradient(transparent 16px, rgba(255,255,255,.22) 16px 19px, transparent 19px),
      linear-gradient(transparent 78px, rgba(0,0,0,.25) 78px 84px);
    animation:groundscroll .9s linear infinite}
  @keyframes groundscroll{from{background-position:0 0,0 0,0 0,0 0}to{background-position:0 0,-42px 0,0 0,0 0}}

  .level{position:absolute;left:0;bottom:0;width:100%;height:100%;z-index:5;overflow:hidden}
  .lset{position:absolute;top:0;width:50%;height:100%}
  .item{position:absolute;width:54px;height:54px;animation:bob2 1.7s ease-in-out infinite;filter:drop-shadow(3px 4px 0 rgba(7,19,27,.3))}
  .item svg{width:100%;height:100%;display:block}
  .bubble{position:absolute;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(210,240,255,.28) 46%, rgba(120,200,255,.12) 72%);border:2px solid rgba(255,255,255,.85);box-shadow:0 0 10px rgba(255,255,255,.4);animation:bob2 2.3s ease-in-out infinite}
  @keyframes bob2{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

  .mascot{position:absolute;left:13%;bottom:74px;width:86px;height:116px;z-index:6}
  .mascot.jump{animation:hop .92s cubic-bezier(.45,0,.3,1) 1}
  @keyframes hop{0%{transform:translateY(0)}45%{transform:translateY(-66px)}58%{transform:translateY(-66px)}100%{transform:translateY(0)}}
  .mascot .bot{width:100%;height:100%;animation:bobrun .5s ease-in-out infinite}
  .flut{animation:flut 1.1s ease-in-out infinite;transform-origin:50% 18%}
  @keyframes flut{0%,100%{transform:skewX(-2deg)}50%{transform:skewX(2deg)}}
  @keyframes bobrun{0%{transform:translateY(0)}50%{transform:translateY(-2px)}100%{transform:translateY(0)}}
  .legL{animation:stepa .4s ease-in-out infinite}
  .legR{animation:stepb .4s ease-in-out infinite}
  @keyframes stepa{0%{transform:translateY(0)}50%{transform:translateY(-2px)}100%{transform:translateY(0)}}
  @keyframes stepb{0%{transform:translateY(-2px)}50%{transform:translateY(0)}100%{transform:translateY(-2px)}}
  .armL{animation:swa .56s ease-in-out infinite}
  .armR{animation:swb .56s ease-in-out infinite}
  @keyframes swa{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
  @keyframes swb{0%,100%{transform:translateY(-2px)}50%{transform:translateY(0)}}
  .spark{position:absolute;width:7px;height:7px;background:#fff;box-shadow:0 0 9px #fff;animation:trail .85s linear infinite}
  .spark.s2{animation-delay:.42s}
  @keyframes trail{0%{left:-4px;top:62%;opacity:1;transform:scale(1)}100%{left:-46px;top:48%;opacity:0;transform:scale(.3)}}

  .stagehud{position:absolute;top:16px;left:0;right:0;z-index:8;display:flex;justify-content:space-between;gap:12px;
    font-family:var(--pixel);font-size:11px;letter-spacing:1px;color:#fff;text-shadow:2px 2px 0 #0c2438;padding:0 26px}
  .stagehud .mid{color:#ffd23c}
  @media(max-width:780px){.stagehud .mid{display:none}}

  .stage .wrap{position:absolute;top:58px;left:0;right:0;z-index:7}
  .panel{background:rgba(10,30,48,.85);border:3px solid #eaf6ff;box-shadow:var(--chunk);padding:26px 28px;max-width:620px}
  .panel h1{font-family:var(--pixel);color:#fff;font-size:clamp(20px,4.2vw,38px);line-height:1.5;letter-spacing:1px;margin-bottom:16px}
  .panel h1 .em{color:#ffd23c}
  .panel .lead{font-size:clamp(19px,2.2vw,23px);color:#d9ecff;margin-bottom:20px}
  .cta-row{display:flex;flex-wrap:wrap;gap:14px}
  .btn{font-family:var(--pixel);font-size:13px;letter-spacing:.5px;padding:15px 20px;border:3px solid #143;color:var(--grn);background:var(--bg-2);cursor:pointer;display:inline-flex;align-items:center;gap:10px;box-shadow:var(--chunk);transition:transform .08s,box-shadow .12s}
  .btn:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 rgba(7,19,27,.45)}
  .btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 rgba(7,19,27,.45)}
  .btn.primary{background:var(--amber);color:var(--ink);border-color:#6e4a12}
  .btn.cy{color:var(--cyan);border-color:#15405a}
  .btn .arr{font-family:var(--term);font-size:20px}
  @media(max-width:780px){.mascot{left:5%;bottom:74px;width:64px;height:82px}.stage .wrap{top:48px}.panel{padding:20px;margin:0 auto;text-align:center}.cta-row{justify-content:center}}

  .ticker{position:relative;z-index:2;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap;padding:11px 0;background:var(--bg-2)}
  .ticker .run{display:inline-block;animation:scroll 24s linear infinite;font-size:18px;color:var(--cyan);letter-spacing:1px}
  .ticker .run b{color:var(--amber);font-weight:normal;margin:0 4px}
  @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  .sec{padding:64px 0}
  .label{font-family:var(--pixel);font-size:12px;color:var(--cyan);letter-spacing:1.5px;margin-bottom:8px;text-shadow:var(--glow-cy)}
  .sec h2{font-family:var(--pixel);font-size:clamp(18px,3vw,26px);color:var(--grn);text-shadow:var(--glow);line-height:1.5;margin-bottom:30px}
  .note{font-size:17px;color:var(--muted);margin-top:-22px;margin-bottom:30px}

  .scores{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .score-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:18px}
  .score{background:var(--bg-3);border:3px solid #1d3a4a;box-shadow:var(--chunk);padding:30px 18px;text-align:center}
  .score .num{font-family:var(--pixel);font-size:clamp(22px,4vw,34px);color:var(--grn);text-shadow:var(--glow)}
  .score:nth-child(2) .num{color:var(--cyan);text-shadow:var(--glow-cy)}.score:nth-child(3) .num{color:var(--amber);text-shadow:var(--glow-amber)}.score:nth-child(4) .num{color:var(--magenta);text-shadow:0 0 8px rgba(255,93,143,.5)}
  .score .cap{font-size:18px;color:var(--text-dim);margin-top:14px;text-transform:uppercase;letter-spacing:1px}

  .levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px}
  .lvl{display:block;text-decoration:none;color:inherit;cursor:pointer;border:3px solid #1d3a4a;background:var(--bg-2);box-shadow:var(--chunk);padding:24px;position:relative;overflow:hidden;transition:border-color .15s,transform .12s,box-shadow .12s}
  .lvl:hover{border-color:var(--grn);transform:translate(-2px,-2px);box-shadow:7px 7px 0 rgba(7,19,27,.45)}
  .lvl .ic{position:absolute;top:20px;right:20px;width:32px;height:32px;image-rendering:pixelated}
  .lvl .ln{font-family:var(--pixel);font-size:11px;color:var(--amber);letter-spacing:1px}
  .lvl h3{font-family:var(--pixel);font-size:14px;color:var(--grn);line-height:1.5;margin:16px 0 12px;text-shadow:var(--glow);padding-right:40px}
  .lvl p{font-size:19px;color:var(--text-dim);line-height:1.45}
  .lvl .go{font-size:18px;color:var(--cyan);margin-top:16px;opacity:0;transform:translateX(-6px);transition:opacity .15s,transform .15s}
  .lvl:hover .go{opacity:1;transform:none}

  .powerups{display:flex;flex-wrap:wrap;gap:14px}
  .chip{border:3px solid #1d3a4a;box-shadow:var(--chunk);padding:13px 18px;font-family:var(--pixel);font-size:11px;color:var(--grn);letter-spacing:.5px;display:flex;align-items:center;gap:10px;background:var(--bg-2)}
  .chip .pu{color:var(--magenta)}

  .insert{text-align:center;background:var(--bg-3);border-top:1px solid var(--line)}
  .insert .coin-t{font-family:var(--pixel);font-size:clamp(16px,3.2vw,26px);color:var(--amber);text-shadow:var(--glow-amber);animation:blink 1.4s steps(1) infinite;margin-bottom:18px}
  .insert p{font-size:23px;color:var(--text);max-width:520px;margin:0 auto 30px}
  .insert .btn{margin:0 auto}

  footer{border-top:1px solid var(--line);background:var(--bg-2);padding:46px 0 60px}
  .foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px}
  .foot .brand{margin-bottom:14px}
  .foot .col{font-size:19px;color:var(--text-dim);line-height:1.6}
  .foot .col strong{color:var(--grn)}
  .foot .col a{color:var(--cyan)}
  .foot .fine{width:100%;border-top:1px solid var(--line);margin-top:30px;padding-top:22px;font-size:16px;color:var(--muted)}

  .pop{position:absolute;z-index:9;pointer-events:none}
  .pop .ring{position:absolute;left:-26px;top:-26px;width:52px;height:52px;border:4px solid #ffd23c;border-radius:50%;animation:ringx .6s ease-out forwards}
  @keyframes ringx{from{transform:scale(.25);opacity:1}to{transform:scale(1.5);opacity:0}}
  .pop .sp{position:absolute;left:-4px;top:-4px;width:8px;height:8px;background:#fff;box-shadow:0 0 9px #fff;animation:spfly .65s ease-out forwards}
  @keyframes spfly{from{transform:translate(0,0) scale(1);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(.3);opacity:0}}
  .pop .word{position:absolute;left:-30px;top:-44px;font-family:var(--pixel);font-size:13px;color:#ffd23c;text-shadow:2px 2px 0 #0c2438;animation:wordup .8s ease-out forwards;white-space:nowrap}
  @keyframes wordup{from{transform:translateY(0);opacity:1}to{transform:translateY(-36px);opacity:0}}
  :focus-visible{outline:2px solid var(--amber);outline-offset:3px}
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
  .reveal.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}.lvl .go{opacity:1;transform:none}#boot{display:none}.spark{display:none}}

/* ============ multi-page additions ============ */
.hud nav{display:flex;gap:18px;font-family:var(--term);font-size:19px}
.hud nav a{color:var(--text-dim);padding:4px 2px;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.hud nav a:hover{color:var(--grn)}
.hud nav a.active{color:var(--grn);border-color:var(--grn)}
.hud .menu{display:none;background:none;border:0;color:var(--grn);font-family:var(--pixel);font-size:14px;cursor:pointer}
@media(max-width:820px){
  .hud nav{position:absolute;top:62px;left:0;right:0;flex-direction:column;gap:0;background:var(--bg-2);border-bottom:1px solid var(--line);padding:6px 24px;display:none}
  .hud nav.open{display:flex}
  .hud nav a{padding:12px 0;border-bottom:1px solid var(--line)}
  .hud .menu{display:block}
  .status .sysline{display:none}
}

/* page header band (non-home pages) */
.phead{position:relative;overflow:hidden;background:linear-gradient(#5C94FC 0 70%,#6da0fc);border-bottom:4px solid #0c2438;padding:70px 0 64px}
.phead .ground{height:46px}
.phead .wrap{position:relative;z-index:2}
.phead .crumb{font-family:var(--pixel);font-size:11px;color:#0e3b2c;letter-spacing:1px;margin-bottom:14px}
.phead h1{font-family:var(--pixel);font-size:clamp(20px,4vw,34px);color:#fff;text-shadow:3px 3px 0 #0c2438;line-height:1.5}
.phead p{font-size:clamp(19px,2.2vw,23px);color:#0f3a2e;max-width:620px;margin-top:14px}

/* generic content */
.prose{max-width:760px}
.prose p{margin-bottom:18px;color:var(--text-dim);font-size:20px}
.prose strong{color:var(--text)}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px}

/* service detail blocks */
.svc{border:3px solid #1d3a4a;background:var(--bg-2);box-shadow:var(--chunk);padding:26px;display:flex;gap:20px;align-items:flex-start}
.svc .ic{width:46px;height:46px;flex:0 0 46px;image-rendering:pixelated}
.svc h3{font-family:var(--pixel);font-size:15px;color:var(--grn);text-shadow:var(--glow);margin-bottom:10px;line-height:1.5}
.svc p{color:var(--text-dim);font-size:19px}
.svc ul{margin:12px 0 0;padding-left:20px;color:var(--text-dim);font-size:18px}
.svc li{margin:4px 0}

/* contact form */
.formcard{border:3px solid #1d3a4a;background:var(--bg-2);box-shadow:var(--chunk);padding:30px}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--pixel);font-size:11px;color:var(--cyan);letter-spacing:1px;margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;background:var(--bg-3);border:2px solid #244658;color:var(--text);font-family:var(--term);font-size:20px;padding:12px 14px;outline:0}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--grn);box-shadow:var(--glow)}
.field textarea{min-height:120px;resize:vertical}
.hp{position:absolute;left:-9999px}
.contact-grid{display:grid;grid-template-columns:1.3fr .9fr;gap:26px}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}}
.infocard{border:3px solid #1d3a4a;background:var(--bg-2);box-shadow:var(--chunk);padding:26px}
.infocard h3{font-family:var(--pixel);font-size:13px;color:var(--grn);text-shadow:var(--glow);margin:18px 0 8px}
.infocard h3:first-child{margin-top:0}
.infocard a{color:var(--cyan)}
.infocard p{color:var(--text-dim);font-size:19px;line-height:1.6}

/* GAME PAGE fullscreen stage */
.gamewrap{padding:30px 0 10px}
.gamewrap .label{text-align:center}
.gamewrap h2{text-align:center}
.gamestage{height:clamp(420px,72vh,720px);border:4px solid #0c2438;box-shadow:var(--chunk)}
.gamestage .mascot{left:11%;width:104px;height:140px;bottom:90px}
.gamestage .item{width:64px;height:64px}
.gamenote{text-align:center;color:var(--muted);font-size:18px;margin-top:18px}

/* ============ Clean Quest game page ============ */
.cabinet{max-width:520px;margin:0 auto}
.cqhud{display:flex;justify-content:space-between;gap:10px;font-family:var(--pixel);font-size:12px;color:#fff;background:var(--bg-2);border:3px solid #0c2438;border-bottom:0;padding:13px 16px}
.cqhud .s{color:#5dffa0}.cqhud .l{color:#ffc24b}.cqhud .v{color:#5bd1ff}
#cq{width:100%;display:block;image-rendering:pixelated;background:#0a131c;border:3px solid #0c2438;box-shadow:var(--chunk)}
.cqpad{display:grid;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(3,58px);gap:6px;justify-content:center;margin:18px auto 0}
.cqpad button{font-family:var(--pixel);font-size:18px;border:3px solid #1d3a4a;background:var(--bg-2);color:var(--grn);box-shadow:var(--chunk);cursor:pointer;border-radius:8px}
.cqpad button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(7,19,27,.45)}
.cqpad .up{grid-column:2;grid-row:1}.cqpad .left{grid-column:1;grid-row:2}.cqpad .right{grid-column:3;grid-row:2}.cqpad .down{grid-column:2;grid-row:3}
.cqhint{text-align:center;color:var(--muted);font-size:18px;margin-top:16px}
.cqhint b{color:var(--cyan);font-weight:normal}
/* dpad shown on all sizes as a guaranteed control */

/* ============ Clean Quest win screen ============ */
.cabinet{position:relative}
.cqwin{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(8,16,24,.9);padding:18px;z-index:5}
.cqwin-card{text-align:center;max-width:340px}
.cqwin-title{font-family:var(--pixel);font-size:15px;color:var(--grn);line-height:1.7;text-shadow:var(--glow);margin-bottom:16px}
.cqwin p{color:var(--text);font-size:19px;margin:10px 0}
.cqwin-code{font-family:var(--pixel);font-size:20px;color:var(--amber);letter-spacing:3px;border:3px dashed var(--amber);padding:14px;margin:14px 0 20px}
.cqwin-again{display:block;margin:16px auto 0;background:none;border:2px solid #3a5d52;color:var(--text-dim);font-family:var(--pixel);font-size:10px;padding:9px 14px;cursor:pointer}
.cqwin-again:hover{color:var(--grn);border-color:var(--grn)}