/* games-703 · Das gezeichnete Telefon als GETEILTE Schicht (#732).
   ---------------------------------------------------------------------------
   Esteban #732: «es hat kein 3D Handy was ich eigentlich noch cool finde was
   man wiederverwenden kann». Das Geraet lebte bisher nur in der Landing
   (play.css); hier steht es so, dass jede Seite es laden kann. Innen laeuft das
   ECHTE Spiel als iframe (390 x 844, per scale auf die Schirmflaeche gelegt),
   kein Bild und kein Nachbau.

   WICHTIG (offener Punkt): play.css traegt dieselben Regeln weiterhin. Verbatim
   uebernommen, damit die abgenommene Landing in dieser Session unberuehrt
   bleibt; die Zusammenlegung ist ein eigener Handgriff mit eigenem GO.

   Braucht: --pwn (Geraetebreite als Zahl) und --h (Farbton) auf einem Vorfahren,
   tokens.css und base.css. Die Landing glaettet die Kipp-Winkel je Frame ueber
   play.js; eine Seite ohne play.js setzt sie einmal fest (siehe .gp__phone). */

:root { --pwn: 208; }

/* Das Geraet im echten Verhaeltnis des iPhone 15 Pro: Gehaeuse 146.6 x 70.6 mm,
   also Breite 1, Hoehe 2.08, Gehaeuse-Ecke 0.16, Schirm-Inset 0.035 (Schirm
   damit 0.93 x 2.01 = 19.5 : 9). Keine Dynamic Island (Revision 4, Esteban:
   nur die Proportionen, nichts ueber der Spiel-Kopfzeile). Alles aus --pwn
   (Breite in px als Zahl) abgeleitet; das Spiel innen bleibt 390 x 844 und
   wird per scale(0.93 * pwn / 390) genau auf die Schirmflaeche gelegt
   (844 * 0.93 / 390 = 2.0128, gegen 2.01 Schirmhoehe: kein Beschnitt, der
   0.2 %-Rest verschwindet unter der Rundung). Kein Bitmap, Titan in der
   Farbe des Spiels. */
.phonebox {
  --pw: calc(var(--pwn) * 1px);
  --ph: calc(var(--pwn) * 2.08px);
  --s: calc(var(--pwn) * 0.93 / 390);
  position: relative;
  width: var(--pw); height: var(--ph);
  margin-inline: auto;
  /* 1000 px (vorher 1400, #724): naeher dran, damit der kraeftigere Winkel
     (bis 24 Grad um Y, 11 um X) als Tiefe lesbar ist und die 8 px Rueckwand
     an der Kante sichtbar wird. */
  perspective: 1000px;
}
.phone3d {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  /* keine CSS-Transition: play.js glaettet die Winkel selbst je Frame (Lerp), zwei
     Glaettungen hintereinander wuerden nachschwingen */
}
.phone {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  border-radius: calc(var(--pwn) * 0.16px);
  background: linear-gradient(155deg,
    oklch(86% 0.012 var(--h)) 0%, oklch(64% 0.018 var(--h)) 34%,
    oklch(80% 0.012 var(--h)) 62%, oklch(54% 0.02 var(--h)) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.6),
    inset 0 0 0 2px rgba(14,14,17,.18),
    0 26px 50px -18px rgba(14,14,17,.45),
    0 10px 20px -10px rgba(14,14,17,.28);
}
/* Die Rueckwand: 8 px hinter der Front, damit die gekippte Kante Dicke hat. */
.phone::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: oklch(46% 0.02 var(--h));
  transform: translateZ(-8px);
}
.phone__bezel {
  position: absolute; inset: calc(var(--pwn) * 0.016px);
  border-radius: calc(var(--pwn) * 0.146px);
  background: #0B0B0C;
}
/* translateZ(1px): der Schirm liegt VOR der Rahmen-Ebene. Ohne das gewinnt im
   preserve-3d-Kontext bei z = 0 der Container den Treffer-Test, und der
   Schleier (und das Spiel) bekommen keine Zeiger-Ereignisse (gemessen, Rev. 2). */
.phone__screen {
  position: absolute; inset: calc(var(--pwn) * 0.035px);
  border-radius: calc(var(--pwn) * 0.125px); overflow: hidden;
  background: var(--paper);
  transform: translateZ(1px);
}
.phone__screen iframe {
  position: absolute; left: 0; top: 0;
  width: 390px; height: 844px; border: 0; display: block; background: var(--paper);
  transform: scale(var(--s)); transform-origin: 0 0;
}
.phone__home {
  position: absolute; left: 50%; bottom: calc(var(--pwn) * 0.02px);
  width: calc(var(--pwn) * 0.36px); height: calc(var(--pwn) * 0.013px);
  margin-left: calc(var(--pwn) * -0.18px);
  border-radius: var(--r-full); background: var(--ink); opacity: .85;
}
/* Vier Tasten, Lage und Laenge in Anteilen der Gehaeusebreite (Action 0.11,
   Lauter/Leiser 0.24, Power 0.38 lang). */
.phone__btn {
  position: absolute; width: calc(var(--pwn) * 0.014px); border-radius: 2px;
  background: oklch(58% 0.02 var(--h));
  box-shadow: inset 1px 0 0 rgba(255,255,255,.35), inset -1px 0 0 rgba(0,0,0,.25);
}
.phone__btn--act { left: calc(var(--pwn) * -0.012px); top: calc(var(--pwn) * 0.36px); height: calc(var(--pwn) * 0.11px); }
.phone__btn--up  { left: calc(var(--pwn) * -0.012px); top: calc(var(--pwn) * 0.53px); height: calc(var(--pwn) * 0.24px); }
.phone__btn--dn  { left: calc(var(--pwn) * -0.012px); top: calc(var(--pwn) * 0.82px); height: calc(var(--pwn) * 0.24px); }
.phone__btn--pwr { right: calc(var(--pwn) * -0.012px); top: calc(var(--pwn) * 0.62px); height: calc(var(--pwn) * 0.38px); }
/* Der Boden: eine weiche, versetzte Ellipse unter dem Geraet. */
.phone__floor {
  position: absolute; left: 10%; right: 10%; bottom: -22px; height: 30px;
  border-radius: 50%; background: rgba(14,14,17,.32);
  filter: blur(12px); transform: translateZ(-60px);
}
/* Ein Schleier, bis man das Telefon einmal antippt. Grund: die Spiele setzen
   overscroll-behavior: none und touch-action: none auf der Karte; ohne Schleier
   bliebe die Seite beim Scrollen ueber dem Telefon haengen. Nach dem Tipp ist
   alles im Geraet bedienbar. */
.phone__veil {
  position: absolute; inset: 0; z-index: 3; cursor: pointer;
  appearance: none; border: 0; padding: 0; background: transparent;
  border-radius: inherit;
}
.phone__veil span {
  position: absolute; left: 50%; top: 58%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--r-full);
  background: var(--ink); color: var(--paper);
  font-size: var(--t-xs); font-weight: 600; white-space: nowrap;
  box-shadow: 0 6px 16px -6px rgba(14,14,17,.5);
  transition: transform var(--d-fast) var(--ease), opacity var(--d-fast) var(--ease);
}
.phone__veil:hover span { transform: translateX(-50%) scale(1.04); }
.phone__veil:focus-visible { outline: 2px solid var(--accent); outline-offset: -6px; }
.phonebox.is-live .phone__veil { display: none; }

/* ---- Die Stimme: ein Gesicht und ein Satz (aus der Landing, #726) ------- */
.voice { grid-row: 3; }
/* Der Spielname ueber dem Wortspiel «roughly.is», dann nur der Knopf. */
.g__name { margin: 0; font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 700; letter-spacing: var(--tight); line-height: .98; }
.g__domain { margin-top: var(--s1); font-size: var(--t-xs); font-weight: 500; color: var(--ink-3); }
.g__play {
  display: inline-flex; align-items: center; text-decoration: none;
  margin-top: var(--s5); min-height: 60px; padding-inline: 30px;
  font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.015em;
}
.g__play::after { content: " \203A"; margin-left: 6px; }

/* Das Geraet im echten Verhaeltnis des iPhone 15 Pro: Gehaeuse 146.6 x 70.6 mm,
   also Breite 1, Hoehe 2.08, Gehaeuse-Ecke 0.16, Schirm-Inset 0.035 (Schirm
   damit 0.93 x 2.01 = 19.5 : 9). Keine Dynamic Island (Revision 4, Esteban:
   nur die Proportionen, nichts ueber der Spiel-Kopfzeile). Alles aus --pwn
   (Breite in px als Zahl) abgeleitet; das Spiel innen bleibt 390 x 844 und
   wird per scale(0.93 * pwn / 390) genau auf die Schirmflaeche gelegt
   (844 * 0.93 / 390 = 2.0128, gegen 2.01 Schirmhoehe: kein Beschnitt, der
   0.2 %-Rest verschwindet unter der Rundung). Kein Bitmap, Titan in der
   Farbe des Spiels. */
.phonebox {
  --pw: calc(var(--pwn) * 1px);
  --ph: calc(var(--pwn) * 2.08px);
  --s: calc(var(--pwn) * 0.93 / 390);
  position: relative;
  width: var(--pw); height: var(--ph);
  margin-inline: auto;
  /* 1000 px (vorher 1400, #724): naeher dran, damit der kraeftigere Winkel
     (bis 24 Grad um Y, 11 um X) als Tiefe lesbar ist und die 8 px Rueckwand
     an der Kante sichtbar wird. */
  perspective: 1000px;
}
.phone3d {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  /* keine CSS-Transition: play.js glaettet die Winkel selbst je Frame (Lerp), zwei
     Glaettungen hintereinander wuerden nachschwingen */
}
.phone {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  border-radius: calc(var(--pwn) * 0.16px);
  background: linear-gradient(155deg,
    oklch(86% 0.012 var(--h)) 0%, oklch(64% 0.018 var(--h)) 34%,
    oklch(80% 0.012 var(--h)) 62%, oklch(54% 0.02 var(--h)) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.6),
    inset 0 0 0 2px rgba(14,14,17,.18),
    0 26px 50px -18px rgba(14,14,17,.45),
    0 10px 20px -10px rgba(14,14,17,.28);
}
/* Die Rueckwand: 8 px hinter der Front, damit die gekippte Kante Dicke hat. */
.phone::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: oklch(46% 0.02 var(--h));
  transform: translateZ(-8px);
}
.phone__bezel {
  position: absolute; inset: calc(var(--pwn) * 0.016px);
  border-radius: calc(var(--pwn) * 0.146px);
  background: #0B0B0C;
}
/* translateZ(1px): der Schirm liegt VOR der Rahmen-Ebene. Ohne das gewinnt im
   preserve-3d-Kontext bei z = 0 der Container den Treffer-Test, und der
   Schleier (und das Spiel) bekommen keine Zeiger-Ereignisse (gemessen, Rev. 2). */
.phone__screen {
  position: absolute; inset: calc(var(--pwn) * 0.035px);
  border-radius: calc(var(--pwn) * 0.125px); overflow: hidden;
  background: var(--paper);
  transform: translateZ(1px);
}
.phone__screen iframe {
  position: absolute; left: 0; top: 0;
  width: 390px; height: 844px; border: 0; display: block; background: var(--paper);
  transform: scale(var(--s)); transform-origin: 0 0;
}
.phone__home {
  position: absolute; left: 50%; bottom: calc(var(--pwn) * 0.02px);
  width: calc(var(--pwn) * 0.36px); height: calc(var(--pwn) * 0.013px);
  margin-left: calc(var(--pwn) * -0.18px);
  border-radius: var(--r-full); background: var(--ink); opacity: .85;
}
/* Vier Tasten, Lage und Laenge in Anteilen der Gehaeusebreite (Action 0.11,
   Lauter/Leiser 0.24, Power 0.38 lang). */
.phone__btn {
  position: absolute; width: calc(var(--pwn) * 0.014px); border-radius: 2px;
  background: oklch(58% 0.02 var(--h));
  box-shadow: inset 1px 0 0 rgba(255,255,255,.35), inset -1px 0 0 rgba(0,0,0,.25);
}
.phone__btn--act { left: calc(var(--pwn) * -0.012px); top: calc(var(--pwn) * 0.36px); height: calc(var(--pwn) * 0.11px); }
.phone__btn--up  { left: calc(var(--pwn) * -0.012px); top: calc(var(--pwn) * 0.53px); height: calc(var(--pwn) * 0.24px); }
.phone__btn--dn  { left: calc(var(--pwn) * -0.012px); top: calc(var(--pwn) * 0.82px); height: calc(var(--pwn) * 0.24px); }
.phone__btn--pwr { right: calc(var(--pwn) * -0.012px); top: calc(var(--pwn) * 0.62px); height: calc(var(--pwn) * 0.38px); }
/* Der Boden: eine weiche, versetzte Ellipse unter dem Geraet. */
.phone__floor {
  position: absolute; left: 10%; right: 10%; bottom: -22px; height: 30px;
  border-radius: 50%; background: rgba(14,14,17,.32);
  filter: blur(12px); transform: translateZ(-60px);
}
/* Ein Schleier, bis man das Telefon einmal antippt. Grund: die Spiele setzen
   overscroll-behavior: none und touch-action: none auf der Karte; ohne Schleier
   bliebe die Seite beim Scrollen ueber dem Telefon haengen. Nach dem Tipp ist
   alles im Geraet bedienbar. */
.phone__veil {
  position: absolute; inset: 0; z-index: 3; cursor: pointer;
  appearance: none; border: 0; padding: 0; background: transparent;
  border-radius: inherit;
}
.phone__veil span {
  position: absolute; left: 50%; top: 58%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--r-full);
  background: var(--ink); color: var(--paper);
  font-size: var(--t-xs); font-weight: 600; white-space: nowrap;
  box-shadow: 0 6px 16px -6px rgba(14,14,17,.5);
  transition: transform var(--d-fast) var(--ease), opacity var(--d-fast) var(--ease);
}
.phone__veil:hover span { transform: translateX(-50%) scale(1.04); }
.phone__veil:focus-visible { outline: 2px solid var(--accent); outline-offset: -6px; }
.phonebox.is-live .phone__veil { display: none; }

/* ---- Die Stimmen: ein, zwei Gesichter und ein Satz, bei einigen Spielen -- */
/* Fotos aus img/voices/ (240 x 240 WebP, Quellen in QUELLEN.md), rund
   beschnitten, ueberlappend mit 2 px Papier-Ring. Platzhalter bis echte
   Spieler da sind (data-placeholder im DOM). */
.voice {
  margin: 0; max-width: 40ch;
  display: flex; align-items: flex-start; gap: var(--s3);
}
.voice__heads { display: flex; flex: 0 0 auto; padding-left: 8px; }
.hd {
  width: 44px; height: 44px; margin-left: -8px;
  border-radius: 50%; object-fit: cover;
  background: var(--paper-2);
  box-shadow: 0 0 0 2px var(--paper);
}
.voice__q { margin: 0; font-size: var(--t-md); font-weight: 400; letter-spacing: -0.005em; line-height: 1.4; color: var(--ink); text-wrap: pretty; }
.voice__by { margin: var(--s1) 0 0; font-size: var(--t-xs); font-weight: 500; color: var(--ink-3); }