* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --main: #3646A1;
  --accessory: #C0842A;
  --highlight: #674D22;
  --text-light: #f5f1e6;
}

html, body { height: 100%; }

body {
  min-height: 100vh;
  background: var(--main);
  overflow: hidden;
  position: relative;
  font-family: 'Segoe UI', system-ui, sans-serif;
  color: var(--text-light);
}

#wizard-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.shape.star {
  width: 0;
  height: 0;
  border-right: 100px solid transparent;
  border-bottom: 70px solid var(--accessory);
  border-left: 100px solid transparent;
  position: absolute;
}
.shape.star:before {
  content: '';
  position: absolute;
  border-bottom: 80px solid var(--accessory);
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  top: -45px;
  left: -65px;
  transform: rotate(-35deg);
}
.shape.star:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-right: 100px solid transparent;
  border-bottom: 70px solid var(--accessory);
  border-left: 100px solid transparent;
  top: 3px;
  left: -105px;
  transform: rotate(-70deg);
}

.shape.moon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 15px 15px 0 0 var(--accessory);
  position: absolute;
}

.shape.invader {
  width: 1em;
  height: 1em;
  font-size: 16px;
  background: var(--accessory);
  box-shadow:
    0 0 0 1em var(--accessory),
    0 1em 0 1em var(--accessory),
    -2.5em 1.5em 0 .5em var(--accessory),
    2.5em 1.5em 0 .5em var(--accessory),
    -3em -3em 0 0 var(--accessory),
    3em -3em 0 0 var(--accessory),
    -2em -2em 0 0 var(--accessory),
    2em -2em 0 0 var(--accessory),
    -3em -1em 0 0 var(--accessory),
    -2em -1em 0 0 var(--accessory),
    2em -1em 0 0 var(--accessory),
    3em -1em 0 0 var(--accessory),
    -4em 0 0 0 var(--accessory),
    -3em 0 0 0 var(--accessory),
    3em 0 0 0 var(--accessory),
    4em 0 0 0 var(--accessory),
    -5em 1em 0 0 var(--accessory),
    -4em 1em 0 0 var(--accessory),
    4em 1em 0 0 var(--accessory),
    5em 1em 0 0 var(--accessory),
    -5em 2em 0 0 var(--accessory),
    5em 2em 0 0 var(--accessory),
    -5em 3em 0 0 var(--accessory),
    -3em 3em 0 0 var(--accessory),
    3em 3em 0 0 var(--accessory),
    5em 3em 0 0 var(--accessory),
    -2em 4em 0 0 var(--accessory),
    -1em 4em 0 0 var(--accessory),
    1em 4em 0 0 var(--accessory),
    2em 4em 0 0 var(--accessory);
  position: absolute;
}

.invader-hit {
  position: fixed;
  z-index: 3;
  width: 11em;
  height: 8em;
  font-size: 16px;
  transform-origin: 50% 43.75%;
  cursor: pointer;
  pointer-events: auto;
}

.brand {
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 2;
  font-family: 'Cinzel', serif;
  font-size: 18px;
  letter-spacing: 1px;
}

.hand {
  position: relative;
  z-index: 1;
  height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.card-slot {
  position: absolute;
  bottom: max(12vh, 140px);
  left: 50%;
  opacity: 0;
  animation: deal .6s cubic-bezier(.2,.8,.2,1) forwards;
  transform-origin: bottom center;
}

.card-slot:nth-child(1) { --tx: -234px; --ty: 40px; --rot: -16deg; animation-delay: 0s;   z-index: 4; }
.card-slot:nth-child(2) { --tx: -78px;  --ty: 5px;  --rot: -5deg;  animation-delay: .2s;  z-index: 3; }
.card-slot:nth-child(3) { --tx: 78px;   --ty: 5px;  --rot: 5deg;   animation-delay: .4s;  z-index: 2; }
.card-slot:nth-child(4) { --tx: 234px;  --ty: 40px; --rot: 16deg;  animation-delay: .6s;  z-index: 1; }

@keyframes deal {
  0%   { transform: translate(-50%, 60px) rotate(0deg) scale(.6); opacity: 0; }
  100% { transform: translate(calc(-50% + var(--tx)), var(--ty)) rotate(var(--rot)) scale(1); opacity: 1; }
}

.card-slot:hover, .card-slot:focus-within { z-index: 10; }

.hand-dots {
  display: none;
  position: fixed;
  left: 50%;
  bottom: 4vh;
  transform: translateX(-50%);
  z-index: 6;
  gap: 8px;
}

.hand-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(245, 241, 230, .35);
}

.hand-dot.active {
  background: var(--accessory);
}

.mtg-card {
  width: min(260px, calc((100vh - 115px) / 1.4));
  aspect-ratio: 5 / 7;
  background: var(--accessory);
  border-radius: 14px;
  padding: 10px;
  transition: transform .15s ease;
}

.card-slot:hover .mtg-card,
.card-slot:focus-within .mtg-card {
  transform: translateY(-24px);
}

.mtg-inner {
  background: var(--main);
  border-radius: 9px;
  height: 100%;
  padding: 12px;
  display: flex;
  flex-direction: column;
}

.mtg-title {
  background: rgba(0,0,0,.2);
  font-family: 'Cinzel', serif;
  font-weight: 500;
  font-size: 15px;
  text-align: center;
  padding: 8px 6px;
  border-radius: 6px;
  margin-bottom: 10px;
}

.mtg-art {
  background: var(--highlight);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 7px;
  flex: 0 0 70px;
  margin-bottom: 10px;
}

.mtg-art--who { background-image: url('images/mtg-art/who-i-am.webp'); background-position: center 42%; }
.mtg-art--skills { background-image: url('images/mtg-art/skills.webp'); background-position: center 36%; }
.mtg-art--experience { background-image: url('images/mtg-art/experience.webp'); background-position: center 33%; }
.mtg-art--findme { background-image: url('images/mtg-art/find-me.webp'); background-position: center 46%; }

.mtg-text {
  background: rgba(255,255,255,.08);
  border-radius: 7px;
  padding: 10px;
  font-size: 13px;
  line-height: 1.6;
  flex: 1;
  overflow: hidden;
}

.mtg-text p { margin-bottom: 6px; }
.mtg-text a { color: var(--text-light); }

.mtg-text strong {
  display: block;
  color: var(--accessory);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-bottom: 2px;
}

.mtg-text--dense {
  font-size: 12px;
  line-height: 1.4;
}

.mtg-text--dense p { margin-bottom: 8px; }
.mtg-text--dense p:last-child { margin-bottom: 0; }

.game-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-overlay[hidden] { display: none; }

.game-panel {
  background: var(--main);
  border: 3px solid var(--accessory);
  border-radius: 12px;
  padding: 16px 20px 20px;
  width: 460px;
  max-width: 92vw;
  max-height: 92vh;
  overflow-y: auto;
}

.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.game-header h2 {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  font-weight: 500;
}

.game-close {
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
}

.game-hud {
  font-size: 13px;
  color: var(--text-light);
  margin-bottom: 8px;
}

.game-area {
  position: relative;
  width: 100%;
  height: min(320px, 45vh);
  background: rgba(0,0,0,.25);
  border-radius: 8px;
  overflow: hidden;
}

.swarm {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translate(-50%, 0);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px 26px;
}

.mini-invader {
  width: 1em;
  height: 1em;
  font-size: 3px;
  background: var(--accessory);
  box-shadow:
    0 0 0 1em var(--accessory),
    0 1em 0 1em var(--accessory),
    -2.5em 1.5em 0 .5em var(--accessory),
    2.5em 1.5em 0 .5em var(--accessory),
    -3em -3em 0 0 var(--accessory),
    3em -3em 0 0 var(--accessory),
    -2em -2em 0 0 var(--accessory),
    2em -2em 0 0 var(--accessory),
    -3em -1em 0 0 var(--accessory),
    -2em -1em 0 0 var(--accessory),
    2em -1em 0 0 var(--accessory),
    3em -1em 0 0 var(--accessory),
    -4em 0 0 0 var(--accessory),
    -3em 0 0 0 var(--accessory),
    3em 0 0 0 var(--accessory),
    4em 0 0 0 var(--accessory),
    -5em 1em 0 0 var(--accessory),
    -4em 1em 0 0 var(--accessory),
    4em 1em 0 0 var(--accessory),
    5em 1em 0 0 var(--accessory),
    -5em 2em 0 0 var(--accessory),
    5em 2em 0 0 var(--accessory),
    -5em 3em 0 0 var(--accessory),
    -3em 3em 0 0 var(--accessory),
    3em 3em 0 0 var(--accessory),
    5em 3em 0 0 var(--accessory),
    -2em 4em 0 0 var(--accessory),
    -1em 4em 0 0 var(--accessory),
    1em 4em 0 0 var(--accessory),
    2em 4em 0 0 var(--accessory);
}

.mini-invader.hit { visibility: hidden; }

.player-ship {
  position: absolute;
  bottom: 14px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 20px solid var(--highlight);
}

.bullet {
  position: absolute;
  width: 3px;
  height: 12px;
  background: var(--text-light);
}

.game-result {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 20px;
}

.game-result[hidden] { display: none; }

.game-result-actions { display: flex; gap: 10px; }

.game-result button, .ctrl-btn {
  background: var(--accessory);
  border: none;
  color: var(--main);
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
}

.game-controls {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
}

.ctrl-btn { min-width: 60px; padding: 10px 16px; font-size: 16px; user-select: none; }

.game-hint {
  text-align: center;
  font-size: 11px;
  color: var(--text-light);
  opacity: .7;
  margin-top: 8px;
}

body.game-active { overflow: hidden; }

@media (min-width: 701px) and (max-width: 1050px) {
  .mtg-card { width: min(175px, calc((100vh - 115px) / 1.4)); }

  .card-slot:nth-child(1) { --tx: -153px; --ty: 26px; }
  .card-slot:nth-child(2) { --tx: -51px;  --ty: 4px; }
  .card-slot:nth-child(3) { --tx: 51px;   --ty: 4px; }
  .card-slot:nth-child(4) { --tx: 153px;  --ty: 26px; }
}

@media (max-width: 700px) {
  .card-slot {
    top: 50%;
    bottom: auto;
    opacity: 1;
    animation: none;
    transform-origin: center;
    width: min(94vw, 420px, calc(85vh * 5 / 7));
    transform: translate(calc(-50% + var(--slide-offset, 0px)), -50%);
    transition: transform .3s ease;
  }

  .mtg-card { width: 100%; }

  .card-slot:hover .mtg-card,
  .card-slot:focus-within .mtg-card {
    transform: none;
  }

  .hand-dots { display: flex; }
}