/* ===========================================================
   michael-erne.ch — outer-space business card + Space Invaders
   =========================================================== */

:root {
  --card-w: 520px;
  --card-h: 336px;
  --card-d: 14px;
  --card-r: 12px;                 /* corner radius */
  --terracotta: #e8512a;          /* vivid ELCA orange (measured from scan) */
  --terracotta-dark: #b83d18;
  --hud-green: #5dff8f;
}

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

html, body {
  height: 100%;
  background: #000;
  overflow: hidden;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

/* ---- Layer 0: starfield ---------------------------------- */
#starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  background: #000;
  pointer-events: none;
}

/* ---- Layer 10: the 3D business card ---------------------- */
#card-scene {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1500px;
}

#card-float {
  position: relative;
  transform-style: preserve-3d;
  animation: idle-float 6s ease-in-out infinite;
}

@keyframes idle-float {
  0%, 100% { transform: translateY(-10px); }
  50%      { transform: translateY(10px); }
}

#card {
  position: relative;
  width: var(--card-w);
  height: var(--card-h);
  --tilt: 4deg;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt)) rotateY(0deg);
  transition: transform 1s cubic-bezier(.2, .75, .2, 1), opacity .6s ease;
  cursor: pointer;
}
#card.flipped { transform: rotateX(var(--tilt)) rotateY(180deg); }

/* game started: the card leans back on its horizontal axis */
#card.game-on { --tilt: 22deg; }

/* invaders released: the card spins off far into deep space */
#card.depart {
  pointer-events: none;
  animation: card-depart 2.6s cubic-bezier(.45, 0, .75, 1) forwards;
}
@keyframes card-depart {
  0%   { transform: rotateX(22deg) rotateY(0deg)   translateZ(0)       translateY(0);      opacity: 1; }
  12%  { transform: rotateX(22deg) rotateY(70deg)  translateZ(70px)    translateY(0);      opacity: 1; }
  100% { transform: rotateX(22deg) rotateY(940deg) translateZ(-2800px) translateY(-180px); opacity: 0; }
}

/* faces + thickness slabs share a centering technique */
.card-face, .card-edge {
  position: absolute;
  top: 50%;
  left: 50%;
}

.card-face {
  width: var(--card-w);
  height: var(--card-h);
  border-radius: var(--card-r);
  overflow: hidden;
  backface-visibility: hidden;
}
.card-face.front {
  transform: translate(-50%, -50%) translateZ(calc(var(--card-d) / 2));
  background: #fdfdfb;
}
.card-face.back {
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(calc(var(--card-d) / 2));
  background: var(--terracotta);
}

/* four rim slabs giving the card physical depth */
.card-edge { background: linear-gradient(#f4f1ec, #cfcabf); }
/* the depth dimension is +2px so each slab overlaps both faces — this
   kills the hairline seam that shimmered while the card tilts */
.edge-left, .edge-right { width: calc(var(--card-d) + 2px); height: calc(var(--card-h) - 2 * var(--card-r)); }
.edge-top, .edge-bottom { width: calc(var(--card-w) - 2 * var(--card-r)); height: calc(var(--card-d) + 2px); }
.edge-right  { transform: translate(-50%, -50%) rotateY( 90deg) translateZ(calc(var(--card-w) / 2)); }
.edge-left   { transform: translate(-50%, -50%) rotateY(-90deg) translateZ(calc(var(--card-w) / 2)); }
.edge-top    { transform: translate(-50%, -50%) rotateX( 90deg) translateZ(calc(var(--card-h) / 2)); }
.edge-bottom { transform: translate(-50%, -50%) rotateX(-90deg) translateZ(calc(var(--card-h) / 2)); }

/* grounding shadow */
#card-shadow {
  position: absolute;
  left: 50%;
  bottom: -60px;
  width: 80%;
  height: 50px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(0, 0, 0, .55), transparent 70%);
  filter: blur(6px);
  z-index: -1;
}
/* the grounding shadow fades out when the card flies away */
#card.depart ~ #card-shadow { opacity: 0; transition: opacity .8s ease; }

#card-hint {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .45);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: opacity .5s;
}
#card-hint.gone { opacity: 0; }

/* ---- card FRONT content (absolutely positioned, matches the
       real card: logo top-right, name mid-left, contact + address
       along the bottom) ---------------------------------------- */
.card-face.front { color: #1a1a1a; }

.cf-logo-img {
  position: absolute;
  top: 8%; right: 6.5%;
  width: 248px; height: auto;
}
.cf-identity {
  position: absolute;
  left: 8%; top: 34%;
}
.cf-name   { font-size: 14px; font-weight: 700; letter-spacing: .25px; }
.cf-degree { font-size: 14px; color: #3a3a3a; line-height: 1.3; margin-top: 0; }
.cf-role   { font-size: 14px; color: #3a3a3a; }

.cf-contact {
  position: absolute;
  left: 8%; bottom: 11%;
  list-style: none;
  font-size: 14px; line-height: 1.3;
}
.cf-contact li { color: #1a1a1a; }
.cf-clabel { display: inline-block; width: 35px; font-weight: 700; }

.cf-address {
  position: absolute;
  left: 59%; bottom: 11%;
  font-size: 14px; line-height: 1.3;
  color: #1a1a1a;
}

/* ---- card BACK content ----------------------------------- */
.cb-cities {
  position: absolute;
  left: 0; right: 0;
  bottom: 8.5%;
  text-align: center;
  white-space: nowrap;
  color: #fff;
  font-size: 13px;
  letter-spacing: .8px;
}
.cb-center {
  position: absolute;
  left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
#qr {
  width: 104px; height: 104px;
  display: flex; align-items: center; justify-content: center;
}
#qr canvas, #qr img, #qr svg { width: 104px; height: 104px; display: block; }
.cb-url { color: #fff; font-size: 12px; letter-spacing: .5px; }

/* ---- Layer 20: game canvas ------------------------------- */
#game {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: block;
  pointer-events: none;   /* keyboard-only — clicks pass to the card */
}

/* ---- Layer 30: score HUD --------------------------------- */
#hud {
  position: fixed;
  top: 20px; right: 24px;
  z-index: 30;
  text-align: right;
  font-family: "Courier New", monospace;
  color: var(--hud-green);
  text-shadow: 0 0 8px rgba(93, 255, 143, .8);
  pointer-events: none;
  user-select: none;
}
.hud-row { font-size: 22px; font-weight: 700; line-height: 1.2; }
.hud-label { font-size: 12px; margin-right: 8px; opacity: .8; letter-spacing: 2px; }

/* ---- lives (bottom-left) --------------------------------- */
#lives {
  position: fixed;
  left: 22px; bottom: 18px;
  z-index: 30;
  display: flex;
  gap: 8px;
  pointer-events: none;
}
#lives[hidden] { display: none; }
#lives .life {
  font-size: 34px;
  line-height: 1;
  color: #ff4d6d;
  text-shadow: 0 0 10px rgba(255, 77, 109, .85);
}

/* ---- level announcement banner --------------------------- */
#announce {
  position: fixed;
  top: 15%; left: 50%;
  transform: translateX(-50%);
  z-index: 35;
  text-align: center;
  font-family: "Courier New", monospace;
  color: var(--hud-green);
  text-shadow: 0 0 14px rgba(93, 255, 143, .85);
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease;
}
#announce.show { opacity: 1; }
#announce .a-title { font-size: 38px; font-weight: 700; letter-spacing: 5px; }
#announce .a-sub { font-size: 17px; margin-top: 10px; letter-spacing: 1px; }

/* ---- mobile touch control bar ---------------------------- */
#touchbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 36;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: rgba(6, 10, 16, .82);
  border-top: 1px solid rgba(93, 255, 143, .25);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
#touchbar[hidden] { display: none; }
.tb-group { display: flex; gap: 16px; }
.tb-btn {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
.tb-btn.pressed { background: rgba(93, 255, 143, .3); border-color: #5dff8f; }
.tb-fire { border-color: rgba(255, 200, 90, .65); }
.tb-mega { border-color: rgba(255, 61, 240, .65); }
.tb-mega:disabled { opacity: .3; }

/* lift the lives HUD above the control bar on touch devices */
.touch #lives { bottom: 110px; }

/* ---- Layer 40: win / lose overlay ------------------------ */
#overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .72);
  pointer-events: auto;
}
#overlay[hidden] { display: none; }

.overlay-panel {
  text-align: center;
  font-family: "Courier New", monospace;
  color: #fff;
  padding: 40px 56px;
  border: 2px solid var(--hud-green);
  border-radius: 10px;
  background: rgba(8, 14, 10, .9);
  box-shadow: 0 0 30px rgba(93, 255, 143, .35);
}
#overlay-title { font-size: 44px; letter-spacing: 4px; color: var(--hud-green); }
#overlay-title.lose { color: #ff5d5d; text-shadow: 0 0 12px rgba(255, 93, 93, .7); }
.overlay-score { margin: 16px 0 24px; font-size: 20px; }
#play-again {
  font-family: "Courier New", monospace;
  font-size: 18px; font-weight: 700;
  letter-spacing: 2px;
  padding: 12px 28px;
  color: #06120a;
  background: var(--hud-green);
  border: none; border-radius: 6px;
  cursor: pointer;
  transition: transform .12s;
}
#play-again:hover { transform: scale(1.06); }

/* ---- responsive ------------------------------------------ */
@media (max-width: 620px) {
  :root { --card-w: 340px; --card-h: 220px; --card-d: 10px; }
  .cf-name { font-size: 16px; }
  .cf-degree, .cf-role, .cf-contact, .cf-address { font-size: 8px; }
  .cf-logo-img { width: 162px; }
  .cb-cities { font-size: 7.5px; letter-spacing: .3px; }
  .cb-url { font-size: 7px; }
  #qr, #qr canvas, #qr img, #qr svg { width: 60px; height: 60px; }
  #overlay-title { font-size: 30px; }
}