@font-face{font-family:"Archivo";src:url(fonts/archivo-900.woff2) format("woff2");font-weight:900;font-display:swap}

/* Spieleportal wie um 2004: Verdana, Glanz-Tabs, orange Kästen, himmelblauer Grund */
:root{
  --sky:#0a3f8c;
  --sky-2:#1a6fd6;
  --panel:#eef6ff;
  --edge:#7fb2ea;
  --navy:#0a2f6b;
  --orange-1:#ff8a00;
  --orange-2:#c24e00;
  --yellow:#ffd21f;
  --green-1:#35a300;
  --green-2:#1f7400;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--sky);scroll-behavior:smooth;scroll-padding-top:10px;scrollbar-color:var(--orange-2) var(--sky);-webkit-text-size-adjust:100%}
body{margin:0;padding:clamp(0px,1.4vw,18px) clamp(0px,1.4vw,18px) 24px;color:var(--navy);font:13px/1.5 Verdana,Geneva,Tahoma,sans-serif;background:var(--sky) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M16 8l2 6h6l-5 4 2 6-5-4-5 4 2-6-5-4h6zM48 40l2 6h6l-5 4 2 6-5-4-5 4 2-6-5-4h6z' fill='%231a5cb8'/%3E%3C/svg%3E")}
::selection{background:var(--yellow);color:var(--navy)}
h1,h2,p,ul{margin:0;padding:0}
ul{list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:#0a4fc4}
a:hover{color:#c24e00}
a:focus-visible{outline:3px solid var(--yellow);outline-offset:2px;box-shadow:0 0 0 5px var(--navy);border-radius:4px}
.skip{position:absolute;left:12px;top:-60px;z-index:9;padding:10px 14px;border-radius:8px;background:var(--yellow);color:var(--navy);font-weight:700}
.skip:focus{top:8px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.page{max-width:1000px;margin:0 auto;border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(0,20,60,.5);overflow:hidden}

/* Kopf mit Werbebanner */
.masthead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;padding:12px 16px;background:linear-gradient(#2a86ea,#0d4fa8)}
.logo{font:italic 900 clamp(38px,5vw,52px)/1 "Archivo",Verdana,sans-serif;letter-spacing:-.03em;text-decoration:none;color:#fff;text-shadow:0 3px 0 var(--navy),0 4px 6px rgba(0,0,0,.4)}
.logo:hover{color:#fff}
.logo b{color:var(--yellow);font-weight:900;text-shadow:0 3px 0 #a33f00,0 4px 6px rgba(0,0,0,.4)}
.banner{display:flex;align-items:center;gap:10px;width:468px;max-width:100%;min-height:60px;padding:3px 12px 3px 4px;border-radius:6px;background:#b9f3a2;color:#20211e;box-shadow:0 0 0 2px #fff,0 0 0 4px #e0007a;text-decoration:none;font-size:13px;line-height:1.3;animation:flash 1.2s steps(2) infinite}
.banner:hover{color:#20211e;background:#d5f9c6}
.banner img{flex:none;width:54px;height:54px;transition:transform .3s}
.banner:hover img{transform:rotate(-24deg) scale(1.15)}
.banner b{display:block;font-size:15px;font-weight:700}
@keyframes flash{50%{box-shadow:0 0 0 2px #e0007a,0 0 0 4px #fff}}

/* Glanz-Tabs */
.tabs{display:flex;flex-wrap:wrap;gap:3px;padding:6px 8px 0;background:var(--navy)}
.tabs a{display:inline-flex;align-items:center;min-height:32px;padding:3px 13px;border-radius:9px 9px 0 0;background:linear-gradient(#e57800 0,#c24e00 50%,#a84200 51%,#b94c00 100%);box-shadow:inset 0 1px 0 #ffb35c;color:#fff;font-weight:700;text-decoration:none}
.tabs a:hover{background:linear-gradient(#d36d00 0,#a84200 50%,#8f3700 51%,#a04200 100%);color:#fff}
.tabs a[aria-current]{background:#fff;box-shadow:none;color:#a84200}

.ticker{overflow:hidden;padding:4px 0;background:var(--yellow);color:var(--navy);font-weight:700;white-space:nowrap}
.ticker span{display:inline-block;padding-left:8px;animation:ticker 42s linear infinite}
@keyframes ticker{to{transform:translateX(-50%)}}

/* Spalten */
.columns{display:grid;grid-template-columns:190px minmax(0,1fr);gap:10px;padding:10px;background:#dcebfb}
.side{display:flex;flex-direction:column;gap:10px}
.mainbar{display:flex;flex-direction:column;gap:10px;min-width:0}

/* Kästen */
.box{border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px var(--edge);overflow:hidden;scroll-margin-top:10px}
.box>h2{padding:5px 11px;font:700 14px/1.4 Verdana,Geneva,Tahoma,sans-serif;color:#fff}
.box.blue>h2{background:linear-gradient(#2a7ad8,#124f9f)}
.box.orange>h2,.game>h2{background:linear-gradient(#e57800 0,#c24e00 50%,#a84200 51%,#b94c00 100%)}
.box.blue ul{padding:4px 0}
.box.blue li a{display:flex;align-items:center;justify-content:space-between;min-height:30px;padding:2px 11px;font-weight:700;text-decoration:none}
.box.blue li a:hover{background:var(--panel);text-decoration:underline}
.box.blue li span{font-weight:400;color:#35507d}
.box.yellow{background:#fff6c8;box-shadow:inset 0 0 0 1px #e3b800}
.box.yellow>h2{background:none;color:#7a3400;padding-bottom:0}
.box.yellow p{padding:0 11px 9px}
.about p{padding:7px 11px 0}
.about p:last-child{padding-bottom:9px}
.about a{display:inline-block;min-height:24px;line-height:24px}

/* Kacheln */
.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;padding:9px}
.tiles a,.soon{display:block;height:100%;padding:6px;border-radius:9px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--edge);text-decoration:none;text-align:center;color:var(--navy);transition:transform .15s,background .15s}
.tiles a:hover{transform:translateY(-3px);background:#fff6c8;color:var(--navy)}
.tiles img{width:100%;border-radius:6px}
.tiles b{display:block;margin-top:5px;color:#0a4fc4;font-size:14px;overflow-wrap:anywhere}
.tiles span{display:block;font-size:12px;line-height:1.35}
.soon b{color:var(--navy)}
.tiles img{box-shadow:0 3px 6px rgba(0,20,60,.45)}

/* Spiel-Kasten */
.game>h2{font:italic 900 26px/1.15 "Archivo",Verdana,sans-serif;letter-spacing:-.01em;padding:7px 12px;text-shadow:0 2px 0 #7a3000}
.game-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:16px;padding:16px 12px 12px;align-items:start}
/* Die Hülle: öffnen, umdrehen, die CD ein Stück rausziehen */
.game{overflow:visible}
.game>h2{border-radius:10px 10px 0 0}
.jewel{--t:24px;position:relative;z-index:2;margin:10px 14% 10px 14%;perspective:1400px}
.case{--r:0deg;--tilt:19deg;--tx:3deg;--sx:0%;position:relative;display:block;aspect-ratio:640/573;transform-style:preserve-3d;transform-origin:50% 50% calc(var(--t)/-2);transform:translateX(var(--sx)) rotateY(calc(var(--tilt) + var(--r))) rotateX(var(--tx));transition:transform .75s cubic-bezier(.16,1,.3,1);pointer-events:none}
.tray,.back,.front,.lid-in{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;user-select:none;-webkit-user-select:none}
.tray{transform:translateZ(calc(var(--t)*-1 + 1px));box-shadow:10px 16px 22px rgba(0,20,60,.45)}
.back{transform:translateZ(calc(var(--t)*-1)) rotateY(180deg);box-shadow:-10px 16px 22px rgba(0,20,60,.45);pointer-events:auto;cursor:pointer;touch-action:pan-y}
.spine{position:absolute;left:0;top:0;width:var(--t);height:100%;transform-origin:left center;transform:translateZ(calc(var(--t)*-1)) rotateY(-90deg)}
.spine-r{left:100%;transform:rotateY(90deg)}
.rim{position:absolute;left:0;top:0;width:100%;height:var(--t);background:#30343a;transform-origin:center top;transform:rotateX(-90deg)}
.rim-b{top:100%}
.lid{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:left center;transition:transform .8s cubic-bezier(.3,1.25,.5,1)}
.front,.lid-in{pointer-events:auto;cursor:pointer}
.front{touch-action:pan-y}
.lid-in{transform:rotateY(180deg)}
.disc{pointer-events:auto;position:absolute;left:52.5%;top:50%;width:87.9%;aspect-ratio:1;margin:-43.95% 0 0 -43.95%;transform:translate3d(var(--x,0),var(--y,0),calc(var(--t)*-1 + 4px));transition:transform .55s cubic-bezier(.2,1.5,.4,1),filter .2s;user-select:none;-webkit-user-select:none}
.disc-face{display:block;width:100%;height:100%;clip-path:circle(48%);background:#14161e}
.disc img{display:block;width:100%;height:100%;animation:spin 1.9s linear infinite paused}
@keyframes spin{to{transform:rotate(360deg)}}
.jewel:not(.open):hover .case{--tilt:11deg;--tx:2deg}
.jewel:not(.open):not(.flipped):not(.turning):hover .lid{transform:rotateY(-13deg)}
.jewel.turning .case{transition:none}
.jewel.open .case{--tilt:0deg;--tx:0deg;--sx:20%}
.jewel.open .lid{transform:rotateY(-106deg)}
.spine-r,.rim{transition:visibility 0s .35s}
.jewel.open .spine-r,.jewel.open .rim{visibility:hidden;transition:none}
.jewel.open .disc{cursor:grab;touch-action:none}
.jewel.open .disc img{animation-play-state:running}
.jewel.held{z-index:6}
.jewel.held .disc{cursor:grabbing;transition:filter .2s;filter:drop-shadow(0 12px 12px rgba(0,20,60,.5))}
.jewel.held .disc img{animation-play-state:paused}
.jewel.open .burst,.jewel.flipped .burst,.jewel.turning .burst{opacity:0}
.case-ctl{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:6px}
.case-ctl[hidden]{display:none}
.case-ctl button{min-height:36px;padding:3px 12px;border:0;border-radius:7px;background:linear-gradient(#fff,#cfdcec);box-shadow:inset 0 0 0 1px var(--edge),0 2px 0 #7f9cc2;color:var(--navy);font:700 12px/1.2 Verdana,Geneva,Tahoma,sans-serif;cursor:pointer}
.case-ctl button:hover{background:linear-gradient(#fff6c8,#ffe26b)}
.case-ctl button:active{transform:translateY(2px);box-shadow:inset 0 0 0 1px var(--edge)}
.case-ctl button:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.burst{position:absolute;z-index:3;right:-40px;top:6px;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:88px;height:88px;background:var(--yellow);color:#a11300;font:700 11px/1.1 Verdana,Geneva,Tahoma,sans-serif;text-align:center;transition:opacity .2s;transform:rotate(-12deg);clip-path:polygon(50% 0,61% 13%,75% 6%,79% 21%,94% 21%,91% 36%,100% 50%,91% 64%,94% 79%,79% 79%,75% 94%,61% 87%,50% 100%,39% 87%,25% 94%,21% 79%,6% 79%,9% 64%,0 50%,9% 36%,6% 21%,21% 21%,25% 6%,39% 13%)}
.burst b{font:italic 900 24px/1 "Archivo",Verdana,sans-serif}
.pitch{font-size:16px;line-height:1.45;font-weight:700}
.facts{width:100%;margin-top:10px;border-collapse:separate;border-spacing:0 2px}
.facts th,.facts td{padding:4px 9px;background:var(--panel);text-align:left;vertical-align:top}
.facts th{width:88px;border-radius:6px 0 0 6px;font-weight:700}
.facts td{border-radius:0 6px 6px 0}
.buttons{display:flex;flex-wrap:wrap;align-items:center;gap:9px 12px;margin-top:13px}
.play,.buy{display:inline-flex;align-items:center;min-height:44px;padding:4px 20px;border-radius:999px;color:#fff;font-weight:700;text-decoration:none;transition:transform .1s}
.play{background:linear-gradient(var(--green-1) 0,var(--green-2) 100%);box-shadow:inset 0 1px 0 #7fe04a,0 3px 0 #124d00;font-size:16px}
.buy{background:linear-gradient(#e57800,#b94c00);box-shadow:inset 0 1px 0 #ffb35c,0 3px 0 #7a3000}
.play:hover,.buy:hover{color:#fff;transform:translateY(1px)}
.play:active,.buy:active{transform:translateY(3px);box-shadow:none}
.strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:0 12px 12px}
.strip li{height:190px;overflow:hidden;border-radius:9px;box-shadow:0 0 0 1px var(--edge);background:#14161e}
.strip img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}

.pagefoot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 18px;padding:9px 12px;background:var(--navy);color:#fff}
.pagefoot a{display:inline-block;min-height:24px;line-height:24px;color:var(--yellow)}
.pagefoot a:hover{color:#fff}
.pagefoot p{min-height:24px;line-height:24px}

@media (max-width:820px){
  body{font-size:15px}
  .masthead{justify-content:center;text-align:center}
  .banner{text-align:left}
  .tabs a{min-height:44px;padding:3px 12px}
  .columns{grid-template-columns:minmax(0,1fr)}
  .side{order:2}
  .box.blue li a{min-height:44px}
  .game-body{grid-template-columns:minmax(0,1fr)}
  .jewel{margin:14px 12% 8px 14%}
  .jewel.open .case{--sx:21%}
  .case-ctl button{min-height:44px;font-size:14px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:6px}
  .tiles a,.soon{padding:4px}
  .tiles b{font-size:14px}
  .tiles span{font-size:12px;overflow-wrap:anywhere}
  .facts th{width:82px}
  .strip li{height:clamp(130px,44vw,240px)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .banner,.ticker span{animation:none}
  .tiles a,.play,.buy,.banner img,.case,.lid,.disc,.spine-r,.rim{transition:none}
  .disc img{animation:none}
}