:root{ --bg:#070b10; --ink:#e5e7eb; --muted:#9ca3af; --indigo:#7c3aed; --cyan:#22d3ee; --lav:#a78bfa; --panel:#0c1218; }
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font:400 15px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif}
.wrap{min-height:100%;display:flex;flex-direction:column}
.spot{pointer-events:none;position:fixed;inset:0;background:radial-gradient(240px circle at var(--sx,50vw) var(--sy,50vh), rgba(59,130,246,.10), transparent 60%)}

/* Header over everything and clickable */
header{
  position:absolute; inset-inline:0; top:0; max-width:1120px; margin:0 auto; padding:16px 20px;
  display:flex; justify-content:space-between; align-items:center; z-index:11000;
}
.brand{color:#d1d5db;font-weight:600;letter-spacing:.02em;white-space:nowrap}
a{color:inherit}

.hero{position:relative;display:flex;flex:1;align-items:center;justify-content:center;overflow:hidden;text-align:center;padding:72px 20px 40px}
.badge{display:inline-flex;gap:8px;align-items:center;font-size:12px;color:#d1d5db;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);backdrop-filter:blur(6px);padding:6px 10px;border-radius:999px;margin-bottom:16px}
h1{font-size:32px;line-height:1.2;margin:0 0 8px}
@media (min-width:640px){h1{font-size:40px}}
@media (min-width:768px){h1{font-size:56px}}
.sub{max-width:680px;margin:0 auto 24px;color:#cbd5e1}
.btn{display:inline-flex;gap:8px;align-items:center;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.08);padding:10px 14px;border-radius:10px;color:white;text-decoration:none}
.btn:hover{background:rgba(255,255,255,.16)}
.only-desktop{display:inline}
.only-mobile{display:none}
@media (max-width:520px){ .only-desktop{display:none} .only-mobile{display:inline} }

footer{max-width:1120px;margin:0 auto;padding:0 24px 24px;color:#94a3b8;font-size:12px}
.bar{position:fixed;left:0;top:0;height:2px;width:100%;transform-origin:left;background:linear-gradient(90deg,#a5f3fc, #93c5fd, #c7d2fe);animation:load 1s ease-in-out}
@keyframes load{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.blob{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:.35;z-index:-1}

/* pulsing beacon */
.beacon{
  position:fixed; right:12px; top:50%; transform:translateY(-50%);
  z-index:9500; width:40px;height:40px;display:grid;place-items:center;
  background:transparent;border:0;outline:0;cursor:pointer; -webkit-tap-highlight-color:transparent
}
.dot{width:12px;height:12px;border-radius:999px;background:var(--cyan);box-shadow:0 0 18px 4px rgba(34,211,238,.35);animation:dotpulse 2.4s ease-in-out infinite}
.aura{position:absolute;left:35%;top:35%;width:24px;height:24px;border-radius:999px;border:1px solid rgba(34,211,238,.6);transform:translate(-50%,-50%);animation:beacon 1.4s ease-out infinite;pointer-events:none}
.ring{position:absolute;left:50%;top:50%;width:32px;height:32px;border-radius:999px;transform:translate(-50%,-50%);mask:radial-gradient(circle at center, transparent 60%, black 61%);-webkit-mask:radial-gradient(circle at center, transparent 60%, black 61%);background:conic-gradient(var(--cyan) 0deg, var(--lav) 0deg, transparent 0deg);transition:background .08s linear;pointer-events:none}
.hide{display:none}
@keyframes dotpulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.35);opacity:1}}
@keyframes beacon{0%{transform:translate(-6px,-6px) scale(.6);opacity:.8}80%,100%{transform:translate(-6px,-6px) scale(1.4);opacity:0}}

/* Panel (above header, below share modal) */
.panel{
  position:fixed; right:0; top:0; height:100%; width:min(92vw,360px);
  z-index:12000; background:var(--panel);
  border-left:1px solid rgba(255,255,255,.1); box-shadow:0 20px 60px rgba(0,0,0,.4);
  padding:18px 18px 24px; transform:translateX(100%);
  transition:transform .36s cubic-bezier(.22,1,.36,1);
  overflow-y:auto; overscroll-behavior:contain;
  pointer-events:none; visibility:hidden; opacity:0;
}
.panel.open{ transform:translateX(0); pointer-events:auto; visibility:visible; opacity:1; }
.row{display:flex;justify-content:space-between;align-items:center}
.card{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);border-radius:14px;padding:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.nowrap{white-space:nowrap}

/* helper text (game instructions) */
.help{font-size:12px;color:#9aa2af;margin:0 0 8px 0;line-height:1.4}
@media (max-width:520px){ .help .only-desktop{display:none} .help .only-mobile{display:inline} }
@media (min-width:521px){ .help .only-desktop{display:inline} .help .only-mobile{display:none} }

/* Share modal (highest) */
.modal{position:fixed;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.55);z-index:13000;padding:16px}
.modalCard{position:relative;width:min(620px,100%);border-radius:18px;padding:14px 14px 16px;background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.15);box-shadow:0 20px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(14px)}
.modalHeader{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 8px}
.modalBody{display:grid;gap:10px}
.shareBar{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center}

/* X close */
.closex{width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);backdrop-filter:blur(6px);display:grid;place-items:center;cursor:pointer;transition:background .2s,border-color .2s,transform .12s}
.closex:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22)}
.closex:active{transform:scale(.96)}
.closex svg{width:18px;height:18px;stroke:#e5e7eb;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Share buttons */
.sbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:100px;border-radius:12px;padding:10px 14px;font:600 12px/1 Inter, system-ui;color:#e5e7eb;text-decoration:none;background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.14);box-shadow:6px 6px 16px rgba(0,0,0,.35),-6px -6px 14px rgba(255,255,255,.02),inset 0 1px 0 rgba(255,255,255,.08);transition:transform .12s ease, box-shadow .2s ease, background .2s ease}
.sbtn:hover{transform:translateY(-1px); box-shadow:8px 10px 18px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.12)}
.sbtn.disabled{opacity:.5;pointer-events:none}

canvas{image-rendering:pixelated;display:block}
.gamewrap{
  border:1px solid rgba(255,255,255,.1);background:#0b1016;border-radius:12px;padding:8px;display:grid;place-items:center;
  /* very important for touch controls: prevent page scroll stealing gestures */
  touch-action:none;
}

/* Word cycling (robust, no overlap) */
.cyclewrap{position:relative;display:inline-grid;align-items:baseline;vertical-align:baseline;overflow:hidden}
.cyclesizer{visibility:hidden;white-space:nowrap;grid-area:1/1}
.cycleword{grid-area:1/1;position:relative;white-space:nowrap;will-change:transform,opacity,filter;display:inline-block}
.grad{background:linear-gradient(90deg, #a5f3fc, #93c5fd, #c7d2fe);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.enter{transform:translateY(110%) scale(.985);opacity:0;filter:blur(2px)}
.enterActive{transform:translateY(0) scale(1);opacity:1;filter:blur(0);transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .7s,filter .7s}
.exit{transform:translateY(0);opacity:1;filter:blur(0)}
.exitActive{transform:translateY(-60%);opacity:0;filter:blur(2px);transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .7s,filter .7s}
.shine{animation:shimmer 1.1s ease forwards}
@keyframes shimmer{from{background-position:0% 50%}to{background-position:200% 50%}}
.modal.hide{display:none}

/* --- Reset confirm modal (scoped) --- */
.uc-hidden{display:none}
.uc-modal{position:fixed;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.55);z-index:12500;padding:16px}
.uc-modal__card{width:min(620px,100%);border-radius:16px;padding:14px 14px 16px;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.15);box-shadow:0 20px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(14px);color:#e5e7eb;font:600 14px/1.4 Inter, system-ui}
.uc-modal__header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 2px 8px}
.uc-modal__header h4{margin:0;font-weight:700;font-size:14px;letter-spacing:.02em;white-space:nowrap}
.uc-modal__body{display:grid;gap:12px}
.uc-modal__body p{margin:0;color:#cbd5e1;font-weight:500}
.uc-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.uc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:120px;border-radius:12px;padding:10px 14px;font:600 12px/1 Inter, system-ui;color:#e5e7eb;background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.14);box-shadow:6px 6px 16px rgba(0,0,0,.35),-6px -6px 14px rgba(255,255,255,.02),inset 0 1px 0 rgba(255,255,255,.08);cursor:pointer;transition:transform .12s ease, box-shadow .2s ease}
.uc-btn:hover{transform:translateY(-1px); box-shadow:8px 10px 18px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.12)}
.uc-btn--danger{background:linear-gradient(180deg, rgba(239,68,68,.18), rgba(239,68,68,.12));border-color:rgba(239,68,68,.35)}
.uc-x{width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);backdrop-filter:blur(6px);display:grid;place-items:center;color:#e5e7eb;cursor:pointer}
.uc-x:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22)}
    
/* Ensure hidden state overrides default display */
.uc-modal.uc-hidden, .uc-modal[aria-hidden="true"]{display:none!important}

footer {
  font-size: 14px;
  color: #94a3b8;
  text-align: center;
  padding: 16px;
  line-height: 1.4;
  max-width: 100%;
  word-wrap: break-word;
  white-space: normal;
}

footer a {
  color: inherit;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

/* Donate-Modal: lange Überschrift darf umbrechen */
#donateModal .uc-modal__header h4{
  white-space: normal;
  line-height: 1.3;
  word-break: break-word;
}

/* Mobile: kleiner Text + engeres Layout */
@media (max-width: 480px) {
  footer {
    font-size: 12px;
    padding: 12px;
  }
}

/* --- Header: responsive fix --- */
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 16px;
}

/* Brand darf schrumpfen & mit Ellipsis enden */
.brand{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Contact-Link bleibt vollständig sichtbar */
header > a[href^="mailto:"]{
  flex:0 0 auto;
  white-space:nowrap;
}

/* Breakpoints: Schrift & Innenabstände fein justieren */
@media (max-width:640px){
  header{ padding:12px 14px; gap:8px; }
  .brand{ font-size:13px; }
  header > a[href^="mailto:"]{ font-size:13px; }
}

@media (max-width:420px){
  header{ padding:10px 12px; gap:6px; }
  .brand{ font-size:12px; letter-spacing:.01em; }
  header > a[href^="mailto:"]{ font-size:12px; }
}

/* Beacon: auf Mobile unten rechts platzieren */
@media (max-width:520px){
  .beacon{
    top:auto;
    transform:none;
    bottom:calc(64px + env(safe-area-inset-bottom));
    right:calc(32px + env(safe-area-inset-right));
    width:44px; height:44px;
  }

  /* Sichtbarkeit erhöhen: größere Aura/Ring + stärkerer Glow */
  .dot{
    box-shadow: 0 0 24px 6px rgba(34,211,238,.35); /* vorher 18/4 */
  }
  .aura{
    position:absolute;
    left:20%; top:20%;
    transform:translate(-50%, -50%);
    width:40px;   /* vorher 24px */
    height:40px;
    border-width:2px;
  }
  .ring{
    position:absolute;
    left:50%; top:50%;
    transform:translate(-50%, -50%);
    width:64px;   /* vorher 32px */
    height:64px;
    /* Innenloch leicht kleiner, damit der Ring sichtbar bleibt */
    mask:radial-gradient(circle at center, transparent 55%, black 56%);
    -webkit-mask:radial-gradient(circle at center, transparent 55%, black 56%);
  }
}