:root{
    --bg:#0b1220;
    --panel:#0f1b33;
    --panel-2:#132145;
    --text:#e6f0ff;
    --muted:#9fb0d1;
    --accent:#7cffd4;
    --accent-2:#48a7ff;
    --danger:#ff6b6b;
    --success:#23d18b;
    --glow: 0 0 16px rgba(124,255,212,.35), 0 0 48px rgba(72,167,255,.2);
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
    background: radial-gradient(1000px 700px at 20% -10%, #142142 0%, transparent 50%),
                radial-gradient(800px 600px at 110% -10%, #0f1f3f 0%, transparent 50%),
                linear-gradient(180deg, #0a1428 0%, #0b1220 100%);
    color:var(--text);
    overflow-x:hidden;
  }
  header{
    padding: 24px clamp(16px, 3vw, 32px) 12px;
  }
  .title{
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  }
  .badge{
    font-size:12px; letter-spacing:.2em; color:var(--accent);
    border:1px solid rgba(124,255,212,.35); padding:6px 10px; border-radius:999px;
    text-transform:uppercase; box-shadow:var(--glow);
  }
  h1{
    margin:0; font-size: clamp(26px, 3.4vw, 46px); font-weight:800; letter-spacing:.3px;
    text-shadow:0 4px 20px rgba(0,0,0,.5);
  }
  .subtitle{
    color:var(--muted); margin-top:6px; font-size:clamp(14px,1.5vw,18px)
  }

  /* Snow */
  .snow, .snow:before, .snow:after{
    position:fixed; top:-10px; left:0; right:0; bottom:0; pointer-events:none; content:""; z-index:0;
    background-image: radial-gradient(2px 2px at 20px 30px, #fff 50%, transparent 50%),
                      radial-gradient(3px 3px at 80px 120px, #fff 50%, transparent 50%),
                      radial-gradient(1.5px 1.5px at 150px 80px, #fff 50%, transparent 50%),
                      radial-gradient(2px 2px at 250px 10px, #fff 50%, transparent 50%),
                      radial-gradient(2px 2px at 320px 50px, #fff 50%, transparent 50%),
                      radial-gradient(2px 2px at 500px 100px, #fff 50%, transparent 50%);
    background-size: 600px 600px;
    animation: snow 18s linear infinite;
    opacity:.3;
  }
  .snow:before{ animation-duration: 28s; opacity:.25; }
  .snow:after{ animation-duration: 12s; opacity:.35; filter: blur(1px); }
  @keyframes snow{ to{ transform: translateY(600px) } }

  /* Controls */
  .toolbar{
    display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:16px 0 8px;
  }
  .btn{ cursor:pointer; border:1px solid rgba(124,255,212,.35); color:var(--text);
        background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
        padding:10px 14px; border-radius:12px; transition:.2s transform, .2s box-shadow, .2s border-color; 
        box-shadow: var(--glow);
  }
  .btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.25), var(--glow); }
  .btn:active{ transform: translateY(0); }
  .toggle{ display:flex; align-items:center; gap:8px; }
  .hint{ color:var(--muted); font-size:12px }

  /* Grid */
  .grid{
    position:relative; z-index:1; 
    display:grid; gap:14px; padding:12px clamp(16px, 3vw, 32px) 48px;
    grid-template-columns: repeat( auto-fit, minmax(160px, 1fr) );
  }
  .door{
    position:relative; aspect-ratio: 1 / 1; border-radius:18px; overflow:hidden; cursor:pointer;
    background:
      conic-gradient(from 180deg at 70% 30%, rgba(124,255,212,.07), rgba(72,167,255,.07)),
      linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
    border:1px solid rgba(124,255,212,.25);
    box-shadow: inset 0 0 0 1px rgba(124,255,212,.08), 0 10px 30px rgba(0,0,0,.25);
    transition: .25s transform, .25s box-shadow, .25s border-color;
  }
  .door:hover{ transform: translateY(-4px); border-color: rgba(124,255,212,.6); box-shadow: 0 18px 40px rgba(0,0,0,.35), var(--glow); }
  .door.locked{ filter: grayscale(.2) contrast(.9); opacity:.85 }
  .door-content{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    padding:14px; text-align:center; 
  }
  .num{ font-size: clamp(28px, 6vw, 46px); font-weight:900; letter-spacing:1px; text-shadow: 0 2px 12px rgba(72,167,255,.35); }
  .tag{
    position:absolute; top:10px; left:10px; font-size:11px; color:var(--muted);
    background: rgba(19,33,69,.7); border:1px solid rgba(124,255,212,.3); padding:4px 8px; border-radius:999px;
  }
  .status{
    position:absolute; bottom:8px; right:10px; font-size:11px; color:var(--accent);
    opacity:.9;
  }

  /* Modal */
  dialog{ 
    width:min(820px, 94vw); border:1px solid rgba(124,255,212,.4); border-radius:16px; 
    background: linear-gradient(180deg, #0a162e 0%, #0b1220 100%);
    color:var(--text); box-shadow: 0 30px 80px rgba(0,0,0,.5), var(--glow);
  }
  dialog::backdrop{ backdrop-filter: blur(8px) brightness(.7); background: rgba(4,10,20,.4); }
  .modal-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid rgba(124,255,212,.2) }
  .modal-title{ font-weight:800; font-size:20px }
  .modal-body{ padding:16px; line-height:1.6; }
  .modal-body pre{ background:#0a162e; border:1px dashed rgba(124,255,212,.35); padding:12px; border-radius:12px; overflow:auto }
  .modal-foot{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 16px; border-top:1px solid rgba(124,255,212,.2) }
  .kbd{ font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; background:#091327; border:1px solid rgba(124,255,212,.35); border-radius:6px; padding:2px 6px; font-size:12px; color:var(--accent) }

  /* Fake terminal */
  .terminal{
    border:1px solid rgba(72,167,255,.35); border-radius:12px; background: #0a162e; padding:12px; 
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:13px;
  }
  .terminal .prompt{ color:var(--success); }
  .terminal input{ width:100%; background:transparent; border:none; outline:none; color:var(--text); }
  .log{ max-height:160px; overflow:auto; white-space:pre-wrap; }

  .footer-note{ text-align:center; color:var(--muted); font-size:12px; padding:18px }

  /* Fun BSOD */
  .bsod{ position:fixed; inset:0; background:#0b24fb; color:#fff; display:none; flex-direction:column; align-items:center; justify-content:center; z-index:9999; text-align:center; padding:20px }
  .bsod.show{ display:flex }

  @media (max-width:520px){ .num{font-size:32px} }
  /* Canvas Snow */
  #snowCanvas{ position:fixed; inset:0; z-index:0; pointer-events:none; }

  /* Cookie/Datenschutz Banner */
  .cookie{
    position:fixed; left:50%; transform:translateX(-50%); bottom:16px; z-index:9999;
    width:min(720px,94vw); background:linear-gradient(180deg,#0a162e,#0b1220); color:var(--text);
    border:1px solid rgba(124,255,212,.4); border-radius:14px; padding:14px; box-shadow:var(--glow);
  }
  .cookie h3{ margin:0 0 6px 0; font-size:16px }
  .cookie p{ margin:0 0 10px 0; color:var(--muted); font-size:13px; line-height:1.5 }
  .cookie .row{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end }
  /* Hintergrund-Szene (Schneemann & große Flocke) */
  .scene{ position:fixed; inset:auto 0 0 0; pointer-events:none; z-index:0; }
  .scene svg{ width:100%; height:100%; display:block; }
  .hero-flake{ position:fixed; top:10vh; left:-15vh; width:16vh; height:16vh; pointer-events:none; z-index:0; opacity:.8; animation: hero-drift 22s linear infinite; }
  .hero-flake svg{ width:100%; height:100%; }
  @keyframes hero-drift{ 0%{ transform: translateX(0) rotate(0deg) } 100%{ transform: translateX(120vw) rotate(360deg) } }

  /* Tür-Icons statt Zahlen */
  .icon{ width:64%; aspect-ratio:1; display:flex; align-items:center; justify-content:center; filter: drop-shadow(0 6px 16px rgba(0,0,0,.35)); }
  .icon svg{ width:100%; height:auto; }
  .icon .spin{ animation: spin-slow 12s linear infinite; transform-origin:50% 50%; }
  .icon .float{ animation: float 3.6s ease-in-out infinite; }
  @keyframes spin-slow{ to{ transform: rotate(360deg) } }
  @keyframes float{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-6%) } }