/* Pure-for-fun arcade games */
body.codex-test-mode:after{
  content:"CODEX TEST · 1000 STARTMÜNZEN";
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:90;
  background:#17334d;
  color:#fff;
  border:2px solid #ffd45c;
  border-radius:99px;
  padding:8px 12px;
  font:800 .62rem var(--font-body);
  letter-spacing:.08em;
  box-shadow:0 5px 15px rgba(23,51,77,.2);
  pointer-events:none;
}

.drive-game{
  margin:-35px;
  border-radius:28px;
  overflow:hidden;
  background:#d9eff7;
  padding:18px;
  min-height:520px;
}
.drive-hud,
.memory-hud,
.penalty-hud{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  background:#17334d;
  color:#fff;
  border-radius:12px;
  padding:9px 14px;
  font-size:.78rem;
  font-weight:800;
  margin-bottom:12px;
  font-family:var(--font-body);
}
.drive-road{
  --road-speed:.75s;
  height:405px;
  position:relative;
  overflow:hidden;
  border-radius:18px;
  background:linear-gradient(90deg,#38434b 0 32%,#4c5860 32% 34%,#38434b 34% 65%,#4c5860 65% 67%,#38434b 67%);
  border:6px solid #bfc8ca;
  box-shadow:inset 0 0 30px rgba(0,0,0,.3);
}
.drive-road:before,
.drive-road:after{
  content:"";
  position:absolute;
  top:-80px;
  bottom:-80px;
  width:4px;
  background:repeating-linear-gradient(to bottom,#fff 0 30px,transparent 30px 62px);
  opacity:.72;
  animation:roadFlow var(--road-speed) linear infinite;
}
.drive-road:before{left:33.3%}
.drive-road:after{left:66.6%}
.drive-road.speed-up{box-shadow:inset 0 0 30px rgba(0,0,0,.3),0 0 0 5px rgba(255,212,92,.6)}
@keyframes roadFlow{to{transform:translateY(62px)}}
.player-bus{
  position:absolute;
  bottom:16px;
  width:92px;
  height:115px;
  background:#df3435;
  border:4px solid #a91f28;
  border-radius:12px 12px 7px 7px;
  z-index:5;
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:9px 8px 13px;
  transition:left .18s ease,transform .18s ease;
  transform:translateX(-50%);
  box-shadow:0 7px 0 rgba(0,0,0,.2);
}
.player-bus.lane-0{left:16.6%}
.player-bus.lane-1{left:50%}
.player-bus.lane-2{left:83.3%}
.bus-window-row{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;height:30px}
.bus-window-row i{background:#bde5f1;border:2px solid #fff;border-radius:2px}
.player-bus strong{position:absolute;bottom:4px;right:9px;color:#fff;font-size:.56rem}
.wheel{position:absolute;bottom:-10px;width:18px;height:18px;border-radius:50%;background:#202b32;border:4px solid #73818a}
.wheel.w1{left:9px}
.wheel.w2{right:9px}
.player-bus.crash{animation:busCrash .34s ease}
@keyframes busCrash{25%{transform:translateX(-50%) rotate(-8deg)}75%{transform:translateX(-50%) rotate(8deg)}}
.road-item{
  position:absolute;
  left:calc(var(--lane)*33.333% + 16.666%);
  transform:translateX(-50%);
  z-index:4;
  font-size:2.5rem;
  filter:drop-shadow(0 4px 2px rgba(0,0,0,.25));
}
.road-item.coin{color:#ffd45c;font-size:2.8rem;text-shadow:0 0 0 #ac7600}
.road-item.collected{animation:popCoin .25s ease forwards}
.road-item.hit{opacity:.25}
@keyframes popCoin{to{transform:translateX(-50%) scale(1.8);opacity:0}}
.drive-tip{font-size:.74rem;color:#66798a;margin:10px 0 6px}
.drive-controls{display:flex;justify-content:center;gap:18px}
.drive-controls button{
  width:72px;
  height:48px;
  border:0;
  border-radius:13px;
  background:#17334d;
  color:#fff;
  font-size:1.5rem;
  font-weight:900;
  box-shadow:0 5px 0 #0b2033;
  cursor:pointer;
}
.drive-controls button:active{transform:translateY(4px);box-shadow:0 1px 0 #0b2033}

.penalty-game{
  margin:-35px;
  border-radius:28px;
  min-height:490px;
  padding:24px;
  background:linear-gradient(#dff4ff 0 39%,#67bc74 39%);
}
.penalty-game h2{font:800 clamp(2rem,5vw,3.1rem) var(--font-display);margin:14px 0}
.penalty-goal{
  height:300px;
  max-width:600px;
  margin:15px auto 0;
  position:relative;
  border:10px solid #fff;
  border-bottom-width:15px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4px;
  padding:8px;
  box-shadow:0 6px 0 rgba(23,51,77,.18);
}
.penalty-net{
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(23,51,77,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(23,51,77,.13) 1px,transparent 1px);
  background-size:25px 25px;
}
.shoot-zone{position:relative;z-index:2;border:2px dashed rgba(255,255,255,.65);background:rgba(255,255,255,.08);color:#17334d;font:800 .65rem var(--font-body);cursor:pointer}
.shoot-zone:hover{background:rgba(255,255,255,.28)}
.keeper{position:absolute;z-index:4;left:50%;bottom:22px;transform:translateX(-50%);font-size:4.5rem;transition:.5s ease}
.keeper.dive-0{left:15%;transform:translateX(-50%) rotate(-70deg)}
.keeper.dive-1{bottom:80px}
.keeper.dive-2{left:85%;transform:translateX(-50%) rotate(70deg)}
.penalty-ball{position:absolute;z-index:5;left:50%;bottom:-70px;transform:translateX(-50%);font-size:3.2rem;transition:.65s cubic-bezier(.2,.8,.3,1)}
.penalty-ball.kick-0{left:16%;bottom:150px;transform:translateX(-50%) scale(.45) rotate(540deg)}
.penalty-ball.kick-1{bottom:200px;transform:translateX(-50%) scale(.45) rotate(540deg)}
.penalty-ball.kick-2{left:84%;bottom:150px;transform:translateX(-50%) scale(.45) rotate(540deg)}
.penalty-message{font:800 1.1rem var(--font-display);min-height:28px;margin-top:58px;color:#17334d}

.memory-game{
  margin:-35px;
  min-height:520px;
  border-radius:28px;
  padding:24px;
  background:linear-gradient(180deg,#dff4ff 0%,#fff4d4 100%);
}
.memory-game h2{font:800 clamp(2rem,5vw,2.8rem) var(--font-display);margin:4px 0 18px;color:#17334d}
.memory-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  max-width:620px;
  margin:auto;
}
.memory-grid.medium{max-width:720px}
.memory-grid.wide{grid-template-columns:repeat(6,1fr);max-width:900px}
.memory-card{
  aspect-ratio:1;
  border:0;
  border-radius:16px;
  background:transparent;
  color:#17334d;
  cursor:pointer;
  position:relative;
  transform-style:preserve-3d;
  transition:transform .32s,filter .2s;
  box-shadow:none;
}
.memory-card .memory-back,
.memory-card .memory-front{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  backface-visibility:hidden;
  border-radius:16px;
  overflow:hidden;
}
.memory-back{
  background:linear-gradient(145deg,#17334d,#2767d8);
  color:#fff;
  border:3px solid rgba(255,255,255,.85);
  box-shadow:0 6px 0 #0b2033;
}
.memory-back:before{
  content:"";
  position:absolute;
  inset:12px;
  border:2px dashed rgba(255,255,255,.38);
  border-radius:12px;
}
.memory-back strong{font:900 clamp(1rem,4vw,1.75rem) var(--font-display);letter-spacing:.06em}
.memory-back small{font:800 .55rem var(--font-body);letter-spacing:.16em;text-transform:uppercase;margin-top:-25px;opacity:.8}
.memory-front{
  transform:rotateY(180deg);
  background:#fff;
  border:2px solid #80d8ee;
  box-shadow:0 6px 0 #80d8ee;
  padding:8px;
}
.memory-front em{
  align-self:end;
  font:900 clamp(.46rem,1.5vw,.68rem) var(--font-body);
  font-style:normal;
  line-height:1.05;
  color:#17334d;
  text-align:center;
}
.memory-card.open,
.memory-card.matched{transform:rotateY(180deg)}
.memory-card.matched .memory-front{background:#dff8ed;border-color:#76d5ae;box-shadow:0 6px 0 #76d5ae}
.memory-card:disabled{cursor:default}
.memory-level-badge{
  display:inline-grid;
  place-items:center;
  width:72px;
  height:72px;
  border-radius:22px;
  background:#17334d;
  color:#fff;
  font:900 1.35rem var(--font-display);
  letter-spacing:.06em;
  box-shadow:0 7px 0 #ffd45c;
}

.landmark{
  position:relative;
  align-self:center;
  width:76%;
  height:64%;
  margin:auto;
  border-radius:13px;
  background:linear-gradient(#bfefff 0 54%,#cfeeb9 54%);
  overflow:hidden;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.75);
}
.landmark:after{content:"";position:absolute;left:0;right:0;bottom:0;height:13%;background:#7fb16d}
.landmark i,
.landmark b,
.landmark small{position:absolute;display:block}
.landmark-big-ben i{left:42%;bottom:10%;width:20%;height:70%;background:#d9b16c;border:2px solid #9b6d34}
.landmark-big-ben i:before{content:"";position:absolute;left:18%;right:18%;top:-15%;height:16%;background:#17334d;clip-path:polygon(50% 0,100% 100%,0 100%)}
.landmark-big-ben b{left:45%;top:27%;width:14%;height:14%;border-radius:50%;background:#fff;border:2px solid #17334d}
.landmark-tower-bridge i{left:18%;bottom:12%;width:18%;height:56%;background:#d9c296;border:2px solid #9b7c50;box-shadow:44px 0 0 #d9c296,44px 0 0 2px #9b7c50}
.landmark-tower-bridge b{left:22%;right:22%;bottom:28%;height:12%;background:#2767d8;border:2px solid #17334d}
.landmark-tower-bridge small{left:25%;right:25%;bottom:44%;border-top:3px solid #17334d;transform:skewY(-10deg)}
.landmark-london-eye i{left:24%;top:12%;width:52%;height:52%;border-radius:50%;border:5px solid #17334d;background:radial-gradient(circle,#fff 0 8%,transparent 9%)}
.landmark-london-eye b{left:48%;top:17%;width:4%;height:52%;background:#17334d;transform:rotate(35deg)}
.landmark-london-eye small{left:34%;right:34%;bottom:15%;height:4px;background:#17334d}
.landmark-buckingham i{left:14%;right:14%;bottom:13%;height:43%;background:#f0d9a8;border:2px solid #b89458}
.landmark-buckingham i:before{content:"";position:absolute;left:8%;right:8%;top:-18%;height:20%;background:#c45b52;clip-path:polygon(50% 0,100% 100%,0 100%)}
.landmark-buckingham b{left:45%;bottom:13%;width:10%;height:24%;background:#17334d;border-radius:9px 9px 0 0}
.landmark-phone-box i{left:35%;bottom:12%;width:30%;height:66%;background:#cf2d32;border:3px solid #8b151b;border-radius:8px 8px 3px 3px}
.landmark-phone-box i:before{content:"";position:absolute;left:10%;right:10%;top:18%;height:48%;background:repeating-linear-gradient(90deg,#bfefff 0 9px,#fff 9px 12px);border:2px solid #fff}
.landmark-phone-box b{left:38%;right:38%;top:18%;height:10%;background:#fff;border-radius:8px}
.landmark-black-cab i{left:18%;right:18%;bottom:20%;height:28%;background:#202b32;border-radius:26px 26px 10px 10px}
.landmark-black-cab i:before{content:"";position:absolute;left:22%;right:22%;top:-30%;height:36%;background:#202b32;border-radius:18px 18px 0 0}
.landmark-black-cab b{left:25%;bottom:13%;width:13%;height:13%;border-radius:50%;background:#111;box-shadow:40px 0 0 #111}
.landmark-red-bus i{left:20%;right:20%;bottom:13%;height:55%;background:#df3435;border:3px solid #a91f28;border-radius:9px}
.landmark-red-bus i:before{content:"";position:absolute;left:8%;right:8%;top:11%;height:45%;background:repeating-linear-gradient(90deg,#bde5f1 0 12px,#fff 12px 16px)}
.landmark-red-bus b{left:27%;bottom:9%;width:13%;height:13%;border-radius:50%;background:#202b32;box-shadow:34px 0 0 #202b32}
.landmark-underground i{left:21%;top:22%;width:58%;height:58%;border-radius:50%;border:12px solid #df3435;background:transparent}
.landmark-underground b{left:15%;right:15%;top:45%;height:18%;background:#2767d8;border-radius:4px}
.landmark-st-pauls i{left:23%;right:23%;bottom:15%;height:34%;background:#d9c296;border:2px solid #a77d45}
.landmark-st-pauls i:before{content:"";position:absolute;left:26%;right:26%;top:-58%;height:58%;background:#d9c296;border:2px solid #a77d45;border-bottom:0;border-radius:50% 50% 0 0}
.landmark-st-pauls b{left:47%;top:18%;width:6%;height:24%;background:#17334d}
.landmark-trafalgar i{left:47%;bottom:14%;width:6%;height:58%;background:#d9c296;border:2px solid #9b7c50}
.landmark-trafalgar b{left:39%;bottom:12%;width:22%;height:8%;background:#9b7c50}
.landmark-trafalgar small{left:44%;top:12%;width:12%;height:12%;border-radius:50%;background:#17334d}
.landmark-tower i{left:17%;bottom:13%;width:20%;height:46%;background:#cdb58a;border:2px solid #87683d;box-shadow:46px 0 0 #cdb58a,46px 0 0 2px #87683d}
.landmark-tower i:before{content:"";position:absolute;left:-7px;top:-12px;width:32px;height:13px;background:repeating-linear-gradient(90deg,#87683d 0 7px,transparent 7px 12px)}
.landmark-tower b{left:34%;right:34%;bottom:13%;height:30%;background:#cdb58a;border:2px solid #87683d}
.landmark-westminster i{left:10%;right:28%;bottom:15%;height:35%;background:#d9b16c;border:2px solid #9b6d34}
.landmark-westminster b{right:15%;bottom:15%;width:17%;height:68%;background:#d9b16c;border:2px solid #9b6d34}
.landmark-westminster small{right:18%;top:24%;width:10%;height:10%;border-radius:50%;background:#fff;border:2px solid #17334d}

@media(max-width:760px){
  .memory-grid.wide{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:600px){
  .drive-game,
  .penalty-game,
  .memory-game{margin:-35px -20px}
  .drive-road{height:360px}
  .player-bus{width:73px;height:95px}
  .road-item{font-size:2rem}
  .memory-grid,
  .memory-grid.medium,
  .memory-grid.wide{grid-template-columns:repeat(3,1fr)}
  .memory-front{padding:5px}
  .landmark{width:82%;height:58%}
  .penalty-goal{height:290px}
  .shoot-zone{font-size:.55rem}
  .keeper{font-size:3.6rem}
}