/* KIKIJAMA - StoneAge SurfPunk
   Pastell wie Knete, dazu Neon fuer den Punk-Teil. Die Ecken unten bleiben
   frei (Arcade-Doktrin), Zahlen stehen oben rechts. */

:root{
  /* Eigene Palette, siehe world.js: warme Vulkaninsel, kaltes Wasser,
     Punk-Akzente in Koralle, Safran und Veilchen. */
  --pastell:#f3e3cb;
  --tinte:#f4ece0;
  --dunkel:rgba(38,28,26,.93);
  --linie:rgba(255,240,220,.16);
  --neon:#19b8a6;
  --pink:#f2705d;
  --gold:#f5b942;
  --sand:#e9dcb6;
  --leise:#b9a48c;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#efdfc8;
  font-family:var(--mcg-sans),"Poppins",sans-serif;color:var(--tinte);
  -webkit-font-smoothing:antialiased;touch-action:none}
canvas#buehne{display:block;width:100vw;height:100vh;outline:none}

.mono{font-family:var(--mcg-mono),ui-monospace,monospace}

/* ---------------------------------------------------------------- Laden */
#laden{position:fixed;inset:0;z-index:200;background:linear-gradient(160deg,#3a2620,#171012);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
#laden .schrift{font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--neon)}
#laden .balken{width:min(300px,60vw);height:5px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
#laden .balken i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--neon),var(--pink));
  transition:width .2s}

/* ---------------------------------------------------------------- HUD */
/* Die Zahlen stehen auf hellem Pastell. Ohne dunkle Unterlage verschwinden
   sie im Wasser, deshalb eine leichte Glasplatte statt nur Schlagschatten. */
#hud{position:fixed;right:14px;top:12px;z-index:40;text-align:right;pointer-events:none;
  background:linear-gradient(180deg,rgba(38,26,22,.62),rgba(38,26,22,.42));
  border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:10px 14px 8px;
  backdrop-filter:blur(5px);text-shadow:0 2px 8px rgba(20,12,40,.75)}
#hud .zeile{margin-bottom:8px}
#hud .lab{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#fff;opacity:.75}
#hud .val{font-family:var(--mcg-mono),monospace;font-size:30px;font-weight:700;line-height:1;color:#fff}
#hud .val.klein{font-size:19px}
#hud .kette{color:var(--gold)}
#hud .tempo{color:var(--neon)}
#hud.aus{display:none}

/* Modusband, mittig oben, klein */
#band{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:40;
  background:var(--dunkel);border:1px solid var(--linie);border-radius:999px;
  padding:6px 16px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  display:flex;gap:14px;align-items:center;pointer-events:none;backdrop-filter:blur(6px)}
#band b{color:var(--neon);font-weight:700}
#band .pin{color:var(--leise);font-size:11px;letter-spacing:.06em;text-transform:none}

/* Werkzeugleiste, unten mittig (Ecken bleiben frei) */
#werkzeug{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:40;
  background:var(--dunkel);border:1px solid var(--linie);border-radius:14px;padding:8px 10px;
  display:none;gap:6px;align-items:center;backdrop-filter:blur(6px)}
#werkzeug.da{display:flex}
#werkzeug .w{padding:7px 11px;border-radius:9px;font-size:12px;letter-spacing:.06em;
  background:rgba(255,255,255,.06);cursor:pointer;white-space:nowrap;border:1px solid transparent}
#werkzeug .w.aktiv{background:var(--neon);color:#10202a;font-weight:700;border-color:#fff2}
#werkzeug .trenn{width:1px;height:22px;background:var(--linie);margin:0 4px}
#werkzeug .zahl{font-family:var(--mcg-mono),monospace;font-size:12px;color:var(--leise);padding:0 6px}

/* Trick- und Meldungstext */
#ruf{position:fixed;left:50%;top:26%;transform:translate(-50%,-50%) scale(1);z-index:45;
  font-size:clamp(26px,5vw,54px);font-weight:800;letter-spacing:.04em;color:#fff;
  text-shadow:0 0 24px rgba(25,184,166,.8),0 6px 0 rgba(242,112,93,.6);
  pointer-events:none;opacity:0;transition:opacity .18s}
#ruf.da{opacity:1;animation:rufrein .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes rufrein{from{transform:translate(-50%,-50%) scale(.6) rotate(-4deg)}
  to{transform:translate(-50%,-50%) scale(1) rotate(0)}}

/* ---------------------------------------------------------------- Orb */
#orb{position:fixed;left:70px;top:12px;width:46px;height:46px;border-radius:50%;z-index:60;
  background:radial-gradient(circle at 36% 32%,#6a4a22,#2a1c18 68%);
  border:2px solid var(--gold);color:var(--gold);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:21px;
  box-shadow:0 2px 18px rgba(245,185,66,.35);transition:transform .16s}
#orb:hover{transform:scale(1.08)}
#orb.wach{animation:orbpuls 1.6s ease-in-out infinite}
@keyframes orbpuls{0%,100%{box-shadow:0 2px 18px rgba(245,185,66,.35)}
  50%{box-shadow:0 2px 30px rgba(245,185,66,.75)}}

#orbmenu{position:fixed;left:70px;top:66px;z-index:62;display:none;min-width:270px;max-width:min(360px,92vw);
  max-height:76vh;overflow-y:auto;background:var(--dunkel);border:1px solid var(--gold);
  border-radius:14px;padding:8px;box-shadow:0 14px 50px rgba(10,6,20,.6);backdrop-filter:blur(10px)}
#orbmenu.da{display:block}
#orbmenu .kopf{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  padding:9px 12px 5px;opacity:.85}
#orbmenu button.p{display:flex;width:100%;align-items:center;gap:10px;text-align:left;background:none;
  border:1px solid transparent;color:var(--tinte);font-family:inherit;font-size:14px;padding:9px 12px;
  border-radius:9px;cursor:pointer}
#orbmenu button.p:hover{background:rgba(255,255,255,.07)}
#orbmenu button.p.fokus{background:rgba(245,185,66,.18);border-color:var(--gold)}
#orbmenu button.p .re{margin-left:auto;font-family:var(--mcg-mono),monospace;font-size:12px;color:var(--neon)}
#orbmenu button.p .re.aus{color:var(--leise)}
/* Der Fader: eine Leiste unter dem Menuepunkt. Mit der Maus ziehbar, mit
   links und rechts in Schritten, und die Zahl steht daneben in Prozent. */
#orbmenu .fader{display:block;width:100%;height:9px;margin:2px 0 8px;border-radius:6px;
  background:rgba(255,255,255,.10);border:1px solid var(--linie);position:relative;cursor:pointer}
#orbmenu .fader i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;
  background:linear-gradient(90deg,var(--neon),var(--gold));transition:width .08s}
#orbmenu .fader b{position:absolute;top:-3px;width:5px;height:15px;border-radius:3px;
  background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.5);transform:translateX(-2px)}
#orbmenu .fader.fokus{border-color:var(--gold);box-shadow:0 0 0 2px rgba(245,185,66,.25)}
#orbmenu .reg{padding:2px 12px 10px}
#orbmenu hr{border:0;border-top:1px solid var(--linie);margin:6px 8px}

/* ---------------------------------------------------------------- Schirme */
.schirm{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
  padding:24px;background:radial-gradient(circle at 50% 30%,rgba(44,28,24,.72),rgba(16,10,10,.94))}
.schirm.da{display:flex}
.karte{width:min(680px,94vw);background:var(--dunkel);border:1px solid var(--linie);border-radius:20px;
  padding:26px 26px 22px;box-shadow:0 26px 80px rgba(0,0,0,.55);backdrop-filter:blur(12px)}
.karte h1{margin:0;font-size:clamp(30px,6.4vw,58px);line-height:.94;letter-spacing:-.02em;font-weight:800}
.karte h1 .a{color:var(--neon)}
.karte h1 .b{color:var(--pink)}
.karte .unter{margin:6px 0 18px;font-size:13.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.karte p{margin:0 0 14px;font-size:14.5px;line-height:1.6;color:#d8d0ee}
.punkte{display:flex;flex-direction:column;gap:7px;margin-top:6px}
.punkt{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid transparent;font-size:15px;color:var(--tinte)}
.punkt .ico{font-size:20px}
.punkt .txt b{display:block;font-size:15.5px}
.punkt .txt span{font-size:12.5px;color:var(--leise)}
.punkt.fokus{background:rgba(25,184,166,.18);border-color:var(--neon)}
.punkt:hover{background:rgba(255,255,255,.09)}
.fuss{margin-top:16px;font-size:11.5px;color:var(--leise);line-height:1.7}
.fuss kbd{font-family:var(--mcg-mono),monospace;background:rgba(255,255,255,.08);border-radius:5px;
  padding:1px 6px;font-size:11px}

/* Endstand */
#ende .zahlen{display:flex;flex-wrap:wrap;gap:18px;margin:14px 0 6px}
#ende .z{flex:1 1 120px}
#ende .z .l{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--leise)}
#ende .z .v{font-family:var(--mcg-mono),monospace;font-size:26px;font-weight:700;color:#fff}
#ende .z .v.neon{color:var(--neon)}

/* Feier */
#feier{position:fixed;inset:0;z-index:150;display:none;align-items:center;justify-content:center;
  pointer-events:none}
#feier.da{display:flex}
#feier .pokal{font-size:clamp(90px,22vw,220px);animation:pokalrein 1.1s cubic-bezier(.2,1.7,.35,1)}
#feier .text{position:absolute;top:64%;left:50%;transform:translateX(-50%);text-align:center;
  font-size:clamp(20px,4.6vw,40px);font-weight:800;color:#fff;letter-spacing:.02em;
  text-shadow:0 0 30px rgba(245,185,66,.9)}
@keyframes pokalrein{0%{transform:scale(0) rotate(-40deg);opacity:0}
  60%{transform:scale(1.25) rotate(8deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
#feier .konfetti{position:absolute;width:12px;height:12px;border-radius:2px}

/* Hinweis auf den Zeigerfang: unaufdringlich, mittig unten ueber der Leiste,
   verschwindet in dem Moment, in dem die Maus gefangen ist. */
#maushinweis{position:fixed;left:50%;bottom:70px;transform:translateX(-50%);z-index:38;
  background:var(--dunkel);border:1px solid var(--linie);border-radius:999px;
  padding:7px 16px;font-size:12.5px;color:var(--tinte);opacity:0;transition:opacity .25s;
  pointer-events:none;backdrop-filter:blur(6px);white-space:nowrap}
#maushinweis.da{opacity:.92}
#maushinweis b{color:var(--neon);font-weight:700}

/* Fadenkreuz im Meisselmodus */
#kreuz{position:fixed;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;z-index:35;
  display:none;pointer-events:none}
#kreuz.da{display:block}
#kreuz:before,#kreuz:after{content:"";position:absolute;background:rgba(255,255,255,.85);
  box-shadow:0 0 6px rgba(0,0,0,.5)}
#kreuz:before{left:50%;top:0;width:2px;height:100%;margin-left:-1px}
#kreuz:after{top:50%;left:0;height:2px;width:100%;margin-top:-1px}

@media (max-width:640px){
  #hud .val{font-size:22px}
  #band{font-size:10.5px;padding:5px 11px;gap:9px}
  #werkzeug{bottom:10px}
  #werkzeug .w{padding:6px 8px;font-size:11px}
}