/* Prime Invaders – Schriften liegen im Plugin (SIL Open Font License, siehe fonts/OFL-*.txt) */
@font-face{font-family:"PI Display";src:url("fonts/pi-bricolage-700.woff") format("woff");font-weight:700 900;font-style:normal;font-display:swap}
@font-face{font-family:"PI Body";src:url("fonts/pi-instrument-400.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"PI Body";src:url("fonts/pi-instrument-700.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"PI Pixel";src:url("fonts/pi-silkscreen-400.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
/* Alles ist unter #pi-game gekapselt, damit das WordPress-Theme nicht hineinfunkt und umgekehrt. */
#pi-game{
  --pi-h:min(720px,88vh);
  --pi-bg:#0d1230; --pi-panel:#141a3d; --pi-fg:#eef0ff; --pi-muted:#a6acd0; --pi-line:#2c3466;
  --pi-prime:#ff8a3d; --pi-prime-ink:#1c0e05; --pi-good:#7be08a; --pi-bad:#ff6b62;
  --pi-display:"PI Display","Arial Black",system-ui,sans-serif;
  --pi-body:"PI Body",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --pi-pixel:"PI Pixel","Courier New",monospace;
  box-sizing:border-box;position:relative;height:var(--pi-h);max-width:760px;margin:0 auto;padding:12px;
  display:flex;flex-direction:column;gap:10px;background:var(--pi-bg);color:var(--pi-fg);
  font-family:var(--pi-body);font-size:16px;line-height:1.4;text-align:left;border-radius:18px;overflow:hidden;
  -webkit-user-select:none;user-select:none;color-scheme:dark;-webkit-tap-highlight-color:transparent}
#pi-game *,#pi-game *::before,#pi-game *::after{box-sizing:border-box}
#pi-game [hidden]{display:none!important}
/* Vollbild: am Handy ganz ausfüllen, am PC eine angenehme Spielbreite mittig */
#pi-game.pi-full{position:fixed;inset:0;z-index:2147483000;width:100%;max-width:none;height:100vh;height:100dvh;margin:0;border-radius:0;
  padding-top:max(10px,env(safe-area-inset-top,0px));padding-bottom:max(10px,env(safe-area-inset-bottom,0px));
  padding-left:max(12px,env(safe-area-inset-left,0px),calc((100% - 640px)/2));padding-right:max(12px,env(safe-area-inset-right,0px),calc((100% - 640px)/2))}
#pi-game h1,#pi-game h2,#pi-game p,#pi-game ul,#pi-game ol,#pi-game li{margin:0;padding:0;border:0;background:none;text-transform:none;letter-spacing:normal;font-size:inherit;color:inherit;font-family:inherit;line-height:inherit}
#pi-game button{margin:0;padding:0;min-width:0;min-height:0;width:auto;height:auto;font:inherit;color:inherit;letter-spacing:normal;
  text-transform:none;text-decoration:none;text-shadow:none;box-shadow:none;background:none;border:0;border-radius:0;line-height:1.2;cursor:pointer;opacity:1;transform:none}
#pi-game button:focus-visible{outline:3px solid var(--pi-fg);outline-offset:2px}

/* Kopfzeile */
#pi-game .pi-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#pi-game .pi-brand{display:flex;flex-direction:column;gap:5px}
#pi-game .pi-logo{font-family:var(--pi-pixel);font-weight:400;line-height:1;display:flex;flex-direction:column;gap:5px;text-transform:uppercase}
#pi-game .pi-logo .l1{font-size:14px;letter-spacing:.42em;color:var(--pi-fg)}
#pi-game .pi-logo .l2{font-size:27px;letter-spacing:.04em;color:var(--pi-prime);text-shadow:2px 2px 0 #9b3b10,4px 4px 0 rgba(255,138,61,.22)}
#pi-game .pi-sub{font-size:10.5px;text-transform:uppercase;letter-spacing:.18em;color:var(--pi-muted)}
#pi-game .pi-stats{display:flex;gap:16px;flex:1;font-variant-numeric:tabular-nums;align-items:flex-end}
#pi-game .pi-stat{display:flex;flex-direction:column;align-items:flex-end}
#pi-game .pi-stat small{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--pi-muted)}
#pi-game .pi-stat b{font-family:var(--pi-display);font-weight:800;font-size:20px;color:var(--pi-fg)}
#pi-game #pi-time{min-width:4.2ch;text-align:right}
#pi-game #pi-music{margin-left:auto}
#pi-game .pi-icon{width:36px;height:36px;border-radius:10px;border:2px solid var(--pi-line);background:var(--pi-panel);color:var(--pi-fg);display:grid;place-items:center}
#pi-game .pi-icon:hover{background:var(--pi-panel);border-color:var(--pi-muted)}
#pi-game .pi-icon svg{width:20px;height:20px}
#pi-game .pi-stats .pi-icon+.pi-icon{margin-left:-8px}
#pi-game #pi-fs .shrink{display:none}
#pi-game.pi-full #pi-fs .shrink{display:block}
#pi-game.pi-full #pi-fs .grow{display:none}
#pi-game #pi-music[aria-pressed="true"] .off{display:none}
#pi-game #pi-lives{display:flex;gap:3px;padding-top:2px}
#pi-game #pi-lives svg,#pi-game .pi-hearts svg{width:24px;height:22px;display:block}
#pi-game .full{fill:#ff4a3d}
#pi-game .empty{fill:none;stroke:var(--pi-muted);stroke-width:1.8;opacity:.6}
#pi-game .lost{animation:pi-heart .6s ease-out}
@keyframes pi-heart{0%{scale:1.6}40%{scale:.7}100%{scale:1}}

/* Spielfeld */
#pi-game .pi-field{position:relative;flex:1;min-height:0;border-radius:14px;overflow:hidden;touch-action:manipulation;background:#0a1440}
#pi-game .pi-scene{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;max-width:none}
#pi-game .num{position:absolute;width:64px;height:64px;margin-left:-32px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--pi-display);font-weight:800;font-size:21px;line-height:1;
  font-variant-numeric:tabular-nums;will-change:transform;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.75),0 0 1px rgba(0,0,0,.9);
  background:
    radial-gradient(circle at 30% 26%,rgba(255,255,255,.95) 0 5%,rgba(255,255,255,.35) 11%,transparent 22%),
    radial-gradient(circle at 70% 78%,rgba(255,255,255,.45) 0 3%,transparent 10%),
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.10) 0 52%,rgba(150,215,255,.30) 72%,rgba(255,170,230,.40) 86%,rgba(255,240,170,.45) 94%,rgba(255,255,255,.55) 100%);
  border:1.5px solid rgba(255,255,255,.7);
  box-shadow:inset -5px -7px 12px rgba(120,170,255,.28),inset 4px 5px 9px rgba(255,255,255,.3),0 3px 10px rgba(0,0,0,.18);
  -webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);
  animation:pi-wobble var(--wob,3s) ease-in-out var(--wd,0s) infinite alternate}
#pi-game .num:focus-visible{outline:3px solid var(--pi-prime);outline-offset:2px}
#pi-game .num.landed{pointer-events:none;opacity:.8;z-index:0;
  transition:transform .35s cubic-bezier(.3,1.5,.5,1),left .3s ease-out,opacity .4s;
  animation:pi-land .4s ease-out,pi-wobble 4.5s ease-in-out .4s infinite alternate}
#pi-game .num.gone{opacity:0;transition:opacity .45s}
#pi-game .num.hit{background:radial-gradient(circle,rgba(255,170,90,.15) 40%,rgba(255,140,60,.7) 100%);border-color:var(--pi-prime);
  transition:transform .25s,opacity .25s;opacity:0}
#pi-game .num.wrong{pointer-events:none;background:radial-gradient(circle,rgba(255,90,80,.35) 30%,rgba(210,30,30,.85) 100%);border-color:#ff6b62;
  animation:pi-shake .4s ease-in-out,pi-fade .2s ease-in .35s forwards}
#pi-game .num.missed{border:4px solid #e5332a;z-index:2;pointer-events:none;
  background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.9) 0 5%,transparent 18%),radial-gradient(circle,rgba(255,80,70,.25) 45%,rgba(230,40,30,.6) 100%);
  box-shadow:0 0 0 6px rgba(229,51,42,.3);
  animation:pi-wobble 3s ease-in-out infinite alternate,pi-shake .45s ease-in-out .7s}
@keyframes pi-land{0%{scale:1.15 .8}60%{scale:.94 1.06}100%{scale:1 1}}
@keyframes pi-wobble{
  0%{border-radius:53% 47% 51% 49%/47% 53% 48% 52%;scale:1 1}
  50%{border-radius:46% 54% 55% 45%/54% 46% 52% 48%;scale:1.04 .96}
  100%{border-radius:50% 50% 45% 55%/50% 45% 55% 50%;scale:.97 1.03}}
@keyframes pi-shake{0%,100%{translate:0 0}20%{translate:-7px 0}40%{translate:7px 0}60%{translate:-5px 0}80%{translate:5px 0}}
@keyframes pi-fade{to{opacity:0}}
#pi-game .burst{position:absolute;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;pointer-events:none;
  border:3px solid var(--pi-prime);animation:pi-ring .45s ease-out forwards}
#pi-game .burst i{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:var(--pi-prime);
  animation:pi-spark .45s ease-out forwards}
@keyframes pi-ring{from{transform:scale(.6);opacity:1}to{transform:scale(1.9);opacity:0}}
@keyframes pi-spark{to{translate:var(--dx) var(--dy);opacity:0;scale:.3}}
#pi-game .pop{position:absolute;transform:translateX(-50%);font-weight:700;font-size:15px;pointer-events:none;color:var(--pi-good);
  white-space:nowrap;animation:pi-rise 1.4s ease-out forwards;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.6)}
@keyframes pi-rise{from{opacity:1;translate:0 0}to{opacity:0;translate:0 -46px}}

/* Overlay: Anleitung, Stufenwahl, Ergebnis */
#pi-game .pi-overlay{position:absolute;inset:0;z-index:10;display:flex;overflow-y:auto;padding:16px;
  background:rgba(9,12,34,.8);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
#pi-game .pi-panel{margin:auto;max-width:440px;width:100%;display:flex;flex-direction:column;gap:14px}
#pi-game .pi-panel h2{font-family:var(--pi-display);font-weight:800;font-size:28px;line-height:1.08;color:var(--pi-fg);text-wrap:balance}
#pi-game .pi-panel p{line-height:1.5;color:var(--pi-muted)}
#pi-game .pi-panel strong{color:var(--pi-fg);font-weight:700}
#pi-game .pi-eyebrow{font-family:var(--pi-pixel);font-size:10px;letter-spacing:.12em;color:var(--pi-prime);text-transform:uppercase}
#pi-game .pi-steps{list-style:none;display:flex;flex-direction:column;gap:10px;counter-reset:pi;font-size:15px}
#pi-game .pi-steps li{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;color:var(--pi-muted);line-height:1.45}
#pi-game .pi-steps li::before{counter-increment:pi;content:counter(pi);width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  font-family:var(--pi-pixel);font-size:11px;color:var(--pi-prime-ink);background:var(--pi-prime)}
#pi-game .pi-steps .pi-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px;align-items:center}
#pi-game .mini{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:var(--pi-display);font-weight:800;font-size:15px;
  color:#fff;border:1.5px solid rgba(255,255,255,.55);background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.8) 0 6%,transparent 20%),radial-gradient(circle,rgba(255,255,255,.06) 50%,rgba(150,215,255,.3) 80%,rgba(255,170,230,.4) 100%)}
#pi-game .mini.p{border-color:var(--pi-prime);box-shadow:0 0 0 3px rgba(255,138,61,.35)}
#pi-game .mini.x{opacity:.55}
#pi-game .pi-tag{font-size:12px;color:var(--pi-muted)}
#pi-game .pi-hearts{display:flex;gap:3px}
#pi-game .pi-tip{border:1px dashed var(--pi-line);border-radius:12px;padding:10px 12px;font-size:14px;color:var(--pi-muted);line-height:1.45}
#pi-game .levels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#pi-game .levels button{padding:12px 6px;border-radius:10px;border:2px solid var(--pi-line);background:var(--pi-panel);color:var(--pi-fg);
  display:flex;flex-direction:column;gap:3px;align-items:center;text-align:center}
#pi-game .levels button:hover{background:var(--pi-panel);border-color:var(--pi-muted)}
#pi-game .levels button b{font-family:var(--pi-display);font-weight:800;font-size:17px}
#pi-game .levels button small{color:var(--pi-muted);font-size:12px;font-variant-numeric:tabular-nums}
#pi-game .levels button[aria-pressed="true"]{border-color:var(--pi-prime);background:rgba(255,138,61,.16)}
#pi-game .go{font-family:var(--pi-display);font-weight:800;font-size:18px;padding:14px;border-radius:12px;background:var(--pi-prime);color:var(--pi-prime-ink);text-align:center}
#pi-game .go:hover{background:#ff9b57;color:var(--pi-prime-ink)}
#pi-game .pi-link{align-self:center;font-size:14px;color:var(--pi-muted);text-decoration:underline;text-underline-offset:3px}
#pi-game .pi-link:hover{background:none;color:var(--pi-fg)}
#pi-game .result ul{list-style:disc;padding-left:1.1em;color:var(--pi-muted);line-height:1.45;display:flex;flex-direction:column;gap:8px;font-variant-numeric:tabular-nums}
#pi-game .result li span{font-size:.92em}
@media (prefers-reduced-motion:reduce){#pi-game .num{animation:none}#pi-game .pop{animation-duration:.01s}#pi-game .num.hit{transition:none}}
@media (max-width:420px){#pi-game{padding:10px;border-radius:12px}#pi-game .pi-panel{gap:11px}#pi-game .pi-overlay{padding:12px}#pi-game .pi-stats{gap:12px}#pi-game .pi-panel h2{font-size:24px}}

/* Bestenliste */
#pi-game input{margin:0;font:inherit;letter-spacing:normal;text-transform:none;box-shadow:none;max-width:none;-webkit-user-select:text;user-select:text}
#pi-game .pi-board{border:1px solid var(--pi-line);border-radius:12px;padding:10px 12px;background:rgba(20,26,61,.7);display:flex;flex-direction:column;gap:6px}
#pi-game .pi-board-head{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--pi-pixel);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--pi-prime)}
#pi-game .pi-board-head span+span{color:var(--pi-muted)}
#pi-game .pi-board-list{list-style:none;display:flex;flex-direction:column;gap:2px;font-variant-numeric:tabular-nums}
#pi-game .pi-board-list li{display:grid;grid-template-columns:2.2em minmax(0,1fr) auto;gap:8px;align-items:baseline;padding:3px 6px;border-radius:7px;color:var(--pi-fg)}
#pi-game .pi-board-list .rk{color:var(--pi-muted)}
#pi-game .pi-board-list .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#pi-game .pi-board-list .sc{font-family:var(--pi-display);font-weight:800}
#pi-game .pi-board-list .m1 .rk,#pi-game .pi-board-list .m1 .sc{color:#ffd24a}
#pi-game .pi-board-list .m2 .rk,#pi-game .pi-board-list .m2 .sc{color:#d6dcef}
#pi-game .pi-board-list .m3 .rk,#pi-game .pi-board-list .m3 .sc{color:#f0a36a}
#pi-game .pi-board-list li.me{background:rgba(255,138,61,.22);outline:1px solid var(--pi-prime)}
#pi-game .pi-board-empty{font-size:14px;color:var(--pi-muted)}
#pi-game .pi-entry-form{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;border:2px solid var(--pi-prime);background:rgba(255,138,61,.1)}
#pi-game .pi-entry-form label{color:var(--pi-fg);line-height:1.45}
#pi-game .pi-entry-row{display:flex;gap:8px}
#pi-game #pi-name{flex:1;min-width:0;width:100%;height:auto;padding:11px 12px;border-radius:10px;border:2px solid var(--pi-line);background:var(--pi-bg);color:var(--pi-fg);font-size:17px;line-height:1.2;outline:none}
#pi-game #pi-name:focus{border-color:var(--pi-prime)}
#pi-game #pi-name::placeholder{color:var(--pi-muted);opacity:1}
#pi-game .pi-entry-btn{padding:0 16px;border-radius:10px;background:var(--pi-prime);color:var(--pi-prime-ink);font-family:var(--pi-display);font-weight:800;font-size:16px}
#pi-game .pi-entry-btn:hover{background:#ff9b57;color:var(--pi-prime-ink)}
#pi-game .pi-entry-btn:disabled{opacity:.6;cursor:default}
#pi-game .pi-entry-hint{font-size:12.5px}
#pi-game .pi-entry-err{color:var(--pi-bad)!important;font-weight:700;font-size:14px}
#pi-game .pi-entry-note{font-size:15px}
#pi-game .pi-entry-done{padding:10px 12px;border-radius:12px;background:rgba(123,224,138,.14);border:1px solid var(--pi-good);color:var(--pi-fg)!important}

/* Schmale Inhaltsspalten im Theme: Kopfzeile kompakter */
#pi-game{container-type:inline-size}
#pi-game .pi-stats{min-width:0}
@container (max-width:400px){
  #pi-game .pi-stats{gap:9px;flex-basis:100%}
  #pi-game .pi-stat b{font-size:17px}
  #pi-game .pi-stat small{font-size:10px}
  #pi-game #pi-lives svg{width:20px;height:18px}
  #pi-game .pi-icon{width:32px;height:32px}
  #pi-game .pi-logo .l2{font-size:24px}
}