/* Persona 5 command-menu portfolio.
   Palette per Sutoh (CEDEC 2017): red, black, white; cyan only marks selection. Flat fills, no gradients on UI. */
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  --red: #e5191c;
  --red-d: #8a0a00;
  --red-s: #b80f08;
  --ink: #0f0f0f;
  --paper: #fdfdfd;
  --cyan: #00e5ff;
  --yellow: #ffe600;
  --body: "Arsenal", "Optima", system-ui, sans-serif;
  --tag: "Oswald", "Arial Narrow", sans-serif;
  --pop: cubic-bezier(.175, .885, .32, 1.275);
  --snap: cubic-bezier(.645, .045, .355, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--ink); color: var(--paper); overflow: hidden; }
body { font-family: var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { user-select: none; -webkit-user-drag: none; }
::selection { background: var(--red); color: var(--paper); }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

/* ---------- ransom letters ----------
   Matches the P5R command menu: heavy wide faces only, letters packed tight,
   ONE merged black outline per word (back layer), white fills on top (front layer). */
.rz { position: relative; display: inline-grid; white-space: nowrap; line-height: 1; vertical-align: middle; }
.rz .l { grid-area: 1 / 1; display: flex; align-items: baseline; }
.rz .ch { display: inline-block; line-height: .9; margin-right: -.06em; color: var(--paper); }
.rz .l.bg .ch { color: var(--ink); -webkit-text-stroke: .2em var(--ink); }
.rz .sp { display: inline-block; width: .26em; }
.rz .ch.bx, .rz .ch.bw { padding: .02em .07em .05em; margin: 0 .03em; }
.rz .l.bg .ch.bx, .rz .l.bg .ch.bw { background: var(--ink); box-shadow: 0 0 0 .09em var(--ink); }
.rz .l.fg .ch.bx { background: var(--ink); color: var(--paper); }
.rz .l.fg .ch.bw { background: var(--paper); color: var(--ink); }
.rz .l.fg .ch.rd { color: var(--red); }
/* flat variant: black letters straight on a white plate, no outline layer */
.rz.flat .l.bg { visibility: hidden; }
.rz.flat .l.fg .ch { color: var(--ink); }
.rz.flat .l.fg .ch.bx { color: var(--paper); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- screens ---------- */
#stage { position: fixed; inset: 0; }
.screen { position: absolute; inset: 0; overflow: hidden; }
.screen[hidden] { display: none; }

/* ---------- loader: TAKE YOUR TIME ---------- */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--ink); display: grid; place-items: center; perspective: 800px; }
.loader-spin { font-size: clamp(34px, 6vw, 80px); animation: spinY 1.2s steps(16) infinite; }
@keyframes spinY { to { transform: rotateY(360deg); } }
.loader.out { animation: loaderOut .32s var(--snap) forwards; }
@keyframes loaderOut { to { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); } }
.loader { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.loader[hidden] { display: none; }

/* ---------- wipes ---------- */
.wipe { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.wipe > * { position: absolute; inset: 0; visibility: hidden; }
/* rotational wipe (Palaces): red sweeps clockwise, black follows */
.wipe-rot { background: var(--red); -webkit-mask: conic-gradient(from -90deg at 38% 50%, #000 var(--a), transparent 0); mask: conic-gradient(from -90deg at 38% 50%, #000 var(--a), transparent 0); }
.wipe-rot::after { content: ""; position: absolute; inset: 0; background: var(--ink); -webkit-mask: inherit; mask: inherit; transform: scale(.94); transform-origin: 38% 50%; }
.wipe.rot-in .wipe-rot { visibility: visible; animation: rotIn .34s var(--snap) forwards; }
.wipe.rot-out .wipe-rot { visibility: visible; --a: 360deg; -webkit-mask: conic-gradient(from -90deg at 38% 50%, transparent var(--a), #000 0); mask: conic-gradient(from -90deg at 38% 50%, transparent var(--a), #000 0); animation: rotIn .34s var(--snap) forwards; }
@keyframes rotIn { from { --a: 0deg; } to { --a: 360deg; } }
/* stripe wipe (Stats, back) */
.wipe-bars i { position: absolute; left: -40%; width: 180%; height: 16%; transform: translateX(110%) skewY(-8deg); }
.wipe-bars i:nth-child(odd) { background: var(--ink); }
.wipe-bars i:nth-child(even) { background: var(--red); }
.wipe-bars i:nth-child(4) { background: var(--paper); }
.wipe-bars i:nth-child(1) { top: -6%; } .wipe-bars i:nth-child(2) { top: 9%; } .wipe-bars i:nth-child(3) { top: 24%; }
.wipe-bars i:nth-child(4) { top: 39%; } .wipe-bars i:nth-child(5) { top: 54%; } .wipe-bars i:nth-child(6) { top: 69%; } .wipe-bars i:nth-child(7) { top: 84%; height: 24%; }
.wipe.bars-in .wipe-bars, .wipe.bars-out .wipe-bars { visibility: visible; }
.wipe.bars-in .wipe-bars i { animation: barIn .3s var(--snap) forwards; }
.wipe.bars-out .wipe-bars i { transform: translateX(0) skewY(-8deg); animation: barOut .3s var(--snap) forwards; }
.wipe-bars i:nth-child(2) { animation-delay: 30ms !important; } .wipe-bars i:nth-child(3) { animation-delay: 60ms !important; }
.wipe-bars i:nth-child(4) { animation-delay: 90ms !important; } .wipe-bars i:nth-child(5) { animation-delay: 120ms !important; }
.wipe-bars i:nth-child(6) { animation-delay: 150ms !important; } .wipe-bars i:nth-child(7) { animation-delay: 180ms !important; }
@keyframes barIn { to { transform: translateX(0) skewY(-8deg); } }
@keyframes barOut { to { transform: translateX(-110%) skewY(-8deg); } }
.wipe.rev .wipe-bars i { transform: translateX(-110%) skewY(8deg); }
.wipe.rev.bars-in .wipe-bars i { animation-name: barInR; }
.wipe.rev.bars-out .wipe-bars i { transform: translateX(0) skewY(8deg); animation-name: barOutR; }
@keyframes barInR { to { transform: translateX(0) skewY(8deg); } }
@keyframes barOutR { to { transform: translateX(110%) skewY(8deg); } }
/* calling-card splash: TAKE YOUR HEART */
.wipe-card { background: var(--red); overflow: hidden; }
.wipe-card::before { content: ""; position: absolute; inset: -50%; background: repeating-conic-gradient(from 0deg at 50% 50%, var(--ink) 0 6deg, transparent 6deg 15deg); opacity: .9; }
.wipe-word { position: absolute; left: 50%; bottom: 42%; font-size: clamp(44px, 10vw, 150px); transform: translateX(-50%) rotate(-8deg) scale(0); }
.wipe.card-in .wipe-card { visibility: visible; animation: cardBg .22s var(--snap) both; }
.wipe.card-in .wipe-word { animation: slam .32s .32s var(--pop) forwards; }
.wipe.card-out .wipe-card { visibility: visible; animation: cardOut .28s var(--snap) forwards; }
.wipe.card-out .wipe-word { transform: translateX(-50%) rotate(-8deg) scale(1); }
@keyframes cardBg { from { clip-path: polygon(0 100%, 0 100%, 0 100%); } to { clip-path: polygon(0 -100%, 200% 100%, 0 100%); } }
@keyframes slam { from { transform: translateX(-50%) rotate(-20deg) scale(2.4); } to { transform: translateX(-50%) rotate(-8deg) scale(1); } }
@keyframes cardOut { to { transform: translateY(-105%) skewY(-6deg); } }

/* ---------- dialogue box (P5R) ---------- */
.dlg { position: relative; filter: drop-shadow(0 0 0 transparent); }
.dlg-body {
  position: relative; background: var(--ink); color: var(--paper);
  padding: 22px 34px 26px 38px; font-weight: 700; font-size: clamp(16px, 1.45vw, 22px); line-height: 1.5; letter-spacing: .01em; font-stretch: 115%; transform-origin: left;
  clip-path: polygon(2% 6%, 100% 0, 97% 100%, 0 92%);
}
.dlg-body::before { /* white cut-paper rim */
  content: ""; position: absolute; inset: 0; z-index: -1;
}
.dlg { padding: 6px; }
.dlg::before { content: ""; position: absolute; inset: 0; background: var(--paper); clip-path: polygon(1.4% 4%, 100% -2%, 98% 104%, -1% 96%); }
.dlg-body b { color: var(--red); }
.dlg-name {
  position: absolute; z-index: 2; left: 4%; top: -26px; background: var(--paper); color: var(--ink);
  font-family: var(--tag); font-weight: 700; font-size: 20px; letter-spacing: .02em; padding: 4px 18px 6px 14px;
  clip-path: polygon(0 10%, 100% 0, 94% 100%, 4% 92%); transform: rotate(-6deg);
}
.dlg-next {
  position: absolute; right: 22px; bottom: 14px; width: 22px; height: 18px; background: var(--red);
  clip-path: polygon(0 0, 100% 50%, 0 100%, 30% 50%); animation: nudge .5s steps(2) infinite;
}
@keyframes nudge { 50% { transform: translateX(5px); } }

/* =========================================================
   MENU : MAIN
   ========================================================= */
.m-scene {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(102deg, rgba(0,0,0,.10) 0 2px, transparent 2px 9px),
    radial-gradient(70% 90% at 22% 45%, var(--red-s), var(--red-d) 75%, #4a0400);
}
.m-scene::after { /* blurred "location" shapes, like the live scene behind the menu */
  content: ""; position: absolute; inset: 0; opacity: .35;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(0,0,0,.6) 8% 9%, transparent 9% 21%, rgba(0,0,0,.5) 21% 22.5%, transparent 22.5%),
    linear-gradient(180deg, transparent 0 62%, rgba(0,0,0,.45) 62% 63%, transparent 63%);
  filter: blur(6px);
}

/* infinite star zoom panel */
.m-stars {
  position: absolute; top: 0; right: 0; width: 46%; height: 100%; overflow: hidden; background: var(--paper);
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 4% 100%, 9% 78%, 0 60%, 10% 40%, 3% 22%);
}
.m-stars::before { content: ""; position: absolute; inset: 0; z-index: 2; background: repeating-conic-gradient(from 0deg at 62% 58%, rgba(15,15,15,.08) 0 3deg, transparent 3deg 9deg); }
.m-stars svg { position: absolute; left: 62%; top: 58%; width: 120px; height: 120px; margin: -60px 0 0 -60px; will-change: transform; }
.m-stars::after { /* black inner rim like the reference */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  box-shadow: inset 14px 0 0 var(--ink);
}

/* live date HUD (top-left) */
.m-date { position: absolute; z-index: 8; left: 2.2%; top: 3%; transform: rotate(-10deg); transform-origin: left top; font-family: Anton; }
.m-date .d-md { display: block; font-size: clamp(44px, 6.4vw, 96px); line-height: .9; color: var(--paper); text-shadow: 5px 5px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink); letter-spacing: -.02em; }
.m-date .d-wd { display: inline-block; margin: -4px 0 0 18%; background: var(--ink); color: var(--paper); font-size: clamp(16px, 1.8vw, 26px); padding: 2px 12px 4px; transform: rotate(4deg); text-transform: uppercase; }
.m-date .d-row { display: flex; align-items: center; gap: 8px; margin: 6px 0 0 -2%; }
.m-date .d-ck { font-family: Anton; font-size: clamp(20px, 2vw, 30px); color: var(--paper); background: var(--ink); padding: 0 10px 2px; transform: rotate(4deg); letter-spacing: .02em; }
.m-date .d-tm { display: block; font-family: "Archivo Black"; font-size: clamp(13px, 1.3vw, 19px); color: var(--ink); background: var(--paper); width: max-content; padding: 2px 10px; transform: rotate(-6deg); }

/* right-hand label stack */
.m-tags { position: absolute; z-index: 6; right: 3%; top: 4%; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none; }
.t-quote { font-size: clamp(14px, 1.6vw, 22px); transform: rotate(-8deg) translateX(-34%); position: relative; z-index: 2; margin-bottom: 4px; }
.t-like { font-size: clamp(24px, 3vw, 44px); background: var(--paper); border: 4px solid var(--ink); padding: 2px 16px 6px; transform: rotate(4deg); }
.t-plate { margin-top: 18px; background: var(--paper); color: var(--ink); border: 4px solid var(--ink); font-family: var(--tag); font-weight: 700; font-size: clamp(14px, 1.5vw, 22px); padding: 4px 18px; transform: rotate(-3deg); }
.t-main { background: var(--ink); border: 4px solid var(--paper); outline: 4px solid var(--ink); padding: 8px 18px 6px; text-align: center; font-size: clamp(22px, 2.8vw, 42px); transform: rotate(-2deg); }
.t-main small { display: block; font-family: "Archivo Black"; font-size: .32em; letter-spacing: .14em; margin-top: 6px; }
.t-num { font-size: clamp(70px, 10vw, 160px); margin: 6px 12% 0 0; transform: rotate(6deg); }

/* the red blade + cyan echo */
.m-blade, .m-cur { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.m-blade { z-index: 3; }
.b-rd, .c-rd { fill: var(--red); }
.b-cy, .c-cy { fill: var(--cyan); }
.b-rd { filter: drop-shadow(0 0 0 var(--ink)); }

/* hero (you) */
.m-hero { position: absolute; z-index: 4; bottom: 0; left: 50%; height: 92%; aspect-ratio: 720 / 756; transform: translateX(-46%); pointer-events: none; }
.m-hero img { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.h-fig { filter: drop-shadow(6px 0 0 var(--paper)) drop-shadow(-6px 0 0 var(--paper)) drop-shadow(0 -6px 0 var(--paper)) drop-shadow(0 0 0 var(--ink)) drop-shadow(12px 10px 0 var(--ink)); }


/* command list */
.m-list { position: absolute; z-index: 7; left: 11%; top: 25%; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.m-list a { position: relative; display: block; font-size: clamp(34px, 4.1vw, 66px); transform: rotate(var(--rot, -3deg)); transition: transform .16s var(--pop); }
.m-list a:nth-of-type(1) { --rot: -4deg; margin-right: 12%; }
.m-list a:nth-of-type(2) { --rot: 2deg; margin-right: 0; font-size: clamp(30px, 3.6vw, 58px); }
.m-list a:nth-of-type(3) { --rot: -3deg; margin-right: 20%; }
.m-list a:nth-of-type(4) { --rot: 3deg; margin-right: 6%; font-size: clamp(30px, 3.5vw, 56px); }
.m-list a:nth-of-type(5) { --rot: -2deg; margin-right: 2%; font-size: clamp(28px, 3.3vw, 52px); }
.m-list a .rz { animation: wob 1.8s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.45s); }
.m-list a.on { transform: rotate(calc(var(--rot) - 4deg)) scale(1.18); }
.m-list a.on .rz { animation: none; }
.m-list a:focus-visible { outline: none; }
.m-cur { z-index: -1; }
@keyframes wob { 0%, 100% { rotate: -1.2deg; } 50% { rotate: 1.6deg; translate: 0 -2px; } }

/* bottom lockup */
.m-command { position: absolute; z-index: 6; left: 37%; bottom: 3%; transform: rotate(-6deg); transform-origin: left bottom; transition: opacity .15s; }
.rz.xl { font-size: clamp(64px, 9vw, 150px); }
.m-hint { display: block; width: max-content; margin: 4px 0 0 30%; background: var(--paper); color: var(--ink); font-family: var(--tag); font-weight: 700; font-size: clamp(13px, 1.2vw, 18px); padding: 2px 12px; transform: rotate(4deg); }
.m-hint.swap { animation: hint .18s steps(2); }
@keyframes hint { from { opacity: 0; translate: -10px 0; } }
.m-money { position: absolute; z-index: 6; left: 2.4%; bottom: 5%; display: grid; grid-template-columns: auto auto; align-items: center; gap: 0 6px; font-size: clamp(30px, 3.6vw, 56px); transform: rotate(-6deg); }
.m-money b { font-family: Anton; font-weight: 400; font-size: 1.05em; color: var(--yellow); text-shadow: 3px 3px 0 var(--ink), -2px -2px 0 var(--ink); }
.m-money small { grid-column: 1 / -1; justify-self: start; font-family: var(--tag); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; background: var(--ink); color: var(--paper); padding: 2px 10px; margin: 4px 0 0 18%; transform: rotate(3deg); white-space: nowrap; }
.m-keys { position: absolute; z-index: 6; right: 2.4%; bottom: 3%; display: flex; gap: 16px; font-family: var(--tag); font-weight: 700; font-size: 15px; color: var(--paper); text-shadow: 2px 2px 0 var(--ink); }
.m-keys kbd { font-family: inherit; display: inline-block; background: var(--paper); color: var(--ink); border-radius: 12px; min-width: 26px; padding: 2px 7px; margin-right: 6px; text-shadow: none; text-align: center; }

/* intro dialogue */
#intro { position: absolute; z-index: 9; left: 50%; bottom: 4%; width: min(860px, 92vw); transform: translateX(-50%) rotate(-1deg); cursor: pointer; }
#intro.gone { animation: dlgOut .2s var(--snap) forwards; pointer-events: none; }
@keyframes dlgOut { to { transform: translateX(-50%) rotate(-1deg) scaleY(0); opacity: 0; } }
.menu.talking .m-command, .menu.talking .m-money { opacity: 0; }
#introP { min-height: 3em; }
#introP b { color: var(--red); }
#introP em { font-style: normal; color: var(--yellow); }
.dlg-count { position: absolute; right: 54px; bottom: 12px; font-family: var(--tag); font-weight: 700; font-size: 13px; color: #8a8a8a; letter-spacing: .1em; }

/* menu open choreography */
.menu.enter .m-stars { animation: panelIn .36s var(--snap) both; }
.menu.enter .m-hero { animation: heroIn .5s .06s var(--pop) both; }
.menu.enter .m-list a { animation: itemIn .3s var(--pop) both; animation-delay: calc(.16s + var(--i) * 50ms); }
.menu.enter .m-tags > * { animation: tagIn .28s var(--pop) both; }
.menu.enter .m-tags > :nth-child(2) { animation-delay: .1s; } .menu.enter .m-tags > :nth-child(3) { animation-delay: .16s; }
.menu.enter .m-tags > :nth-child(4) { animation-delay: .2s; } .menu.enter .m-tags > :nth-child(5) { animation-delay: .26s; }
.menu.enter .m-date { animation: tagIn .3s .2s var(--pop) both; }
.menu.enter .m-command { animation: cmdIn .34s .3s var(--pop) both; }
@keyframes panelIn { from { transform: translateX(100%); } }
@keyframes heroIn { from { transform: translateX(-46%) translateY(40%) rotate(6deg); } }
@keyframes itemIn { from { opacity: 0; transform: translateX(-60px) rotate(-20deg) scale(.4); } }
@keyframes tagIn { from { opacity: 0; transform: translateY(-40px) rotate(-30deg) scale(.5); } }
@keyframes cmdIn { from { opacity: 0; transform: rotate(-20deg) scale(2); } }

/* sound toggle */
.snd { position: fixed; z-index: 95; right: 14px; top: 12px; background: var(--ink); color: var(--paper); border: 2px solid var(--paper);
  font-family: var(--tag); font-weight: 700; font-size: 13px; letter-spacing: .12em; padding: 4px 12px 5px; transform: rotate(3deg); transition: transform .14s var(--pop); }
.snd[aria-pressed="true"] { background: var(--red); }
.snd:hover { transform: rotate(-3deg) scale(1.1); }
body:has(#menu:not([hidden])) .snd { top: auto; bottom: 64px; }

/* =========================================================
   SHARED SUB-SCREEN HEAD
   ========================================================= */
.s-head { position: absolute; z-index: 8; left: 2.5%; top: 3%; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.back {
  display: inline-flex; align-items: center; gap: 8px; background: var(--paper); color: var(--ink);
  font-family: var(--tag); font-weight: 700; font-size: 16px; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 16px 7px 12px; clip-path: polygon(0 8%, 100% 0, 95% 100%, 3% 92%); transition: transform .14s var(--pop);
}
.back span { color: var(--red); }
.back:hover { transform: scale(1.08) rotate(-3deg); }
.s-title { font-weight: 400; font-size: clamp(50px, 6.2vw, 100px); transform: rotate(-6deg); transform-origin: left; margin-top: 6px; }
.s-sub { background: var(--ink); color: var(--paper); font-family: var(--tag); font-weight: 700; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; padding: 3px 12px; transform: rotate(-3deg); margin-left: 14%; border: 2px solid var(--paper); }
.screen.enter .s-title { animation: cmdIn .34s .05s var(--pop) both; }

/* star texture (pinterest 115/156), drawn in CSS */
.startex { background-color: var(--ink); background-image: url(stars.svg); background-size: 240px 240px; }

/* =========================================================
   PALACES
   ========================================================= */
.palaces { background: var(--ink); }
.p-bg { position: absolute; inset: 0; background:
  linear-gradient(118deg, var(--red) 0 38%, transparent 38%),
  linear-gradient(118deg, transparent 0 39.5%, var(--paper) 39.5% 40.5%, transparent 40.5%); }
.p-bg::after { content: ""; position: absolute; right: -10%; top: -10%; width: 70%; height: 130%; opacity: .07; background: url(stars.svg) 0 0 / 260px 260px; transform: rotate(-8deg); }
.p-list { position: absolute; z-index: 5; left: 2.5%; top: 29%; bottom: 3%; list-style: none; display: flex; flex-direction: column; gap: 4px; width: min(38%, 500px); overflow-y: auto; overflow-x: visible; padding: 4px 34px 10px 4px; scrollbar-width: none; }
.p-list::-webkit-scrollbar { display: none; }
.p-list li:nth-child(odd) { transform: rotate(-2deg); }
.p-list li:nth-child(even) { transform: rotate(1.5deg); margin-left: 18px; }
.p-list button {
  position: relative; display: flex; align-items: baseline; gap: 14px; width: 100%; text-align: left;
  background: var(--paper); color: var(--ink); padding: 6px 16px 7px 14px;
  font-family: var(--tag); font-weight: 700; font-size: clamp(16px, 1.65vw, 25px); text-transform: uppercase; letter-spacing: .02em;
  clip-path: polygon(0 6%, 100% 0, 97% 100%, 2% 94%);
  transition: transform .14s var(--pop), background .06s, color .06s;
}
.p-list button i { font-style: normal; font-family: Anton; color: var(--red); font-size: .9em; }
.p-list button b { margin-left: auto; font-family: var(--tag); font-size: .52em; letter-spacing: .14em; color: #777; align-self: center; }
.p-list li { position: relative; }
.p-list li::before { content: ""; position: absolute; inset: 0; background: var(--cyan); transform: translate(10px, 6px); clip-path: polygon(0 6%, 100% 0, 97% 100%, 2% 94%); opacity: 0; transition: opacity .06s; }
.p-list li.on::before { opacity: 1; }
.p-list li.on button { background: var(--ink); color: var(--paper); transform: translateX(22px) scale(1.06); }
.p-list li.on button i { color: var(--red); }
.p-list li.on button b { color: var(--yellow); }
.p-card { position: absolute; z-index: 5; right: 3%; top: 9%; width: min(54%, 780px); }
.p-card.swap { animation: cardSwap .2s var(--snap); }
@keyframes cardSwap { from { opacity: 0; transform: translateX(60px) skewX(-8deg); } }
.pc-stamp {
  position: absolute; right: 2%; top: -6px; z-index: 3; border: 5px solid var(--red); color: var(--red); background: rgba(253,253,253,.92);
  font-family: Anton; font-size: 28px; letter-spacing: .06em; text-transform: uppercase; padding: 0 14px; transform: rotate(10deg);
}
.p-card.swap .pc-stamp { animation: stampIn .3s .1s var(--pop) both; }
@keyframes stampIn { from { transform: rotate(-30deg) scale(2.6); opacity: 0; } }
.pc-kind { display: inline-block; background: var(--paper); color: var(--ink); font-family: var(--tag); font-weight: 700; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; padding: 3px 12px; transform: rotate(-3deg); }
.pc-name { font-family: Anton; font-weight: 400; text-transform: uppercase; font-size: clamp(46px, 5.6vw, 92px); line-height: .95; margin: 10px 0 14px; transform: rotate(-4deg); transform-origin: left;
  color: var(--paper); text-shadow: 5px 5px 0 var(--red), 9px 9px 0 var(--ink); }
.pc-loot { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 30px; min-height: 10px; }
.pc-loot span { display: inline-flex; align-items: baseline; gap: 8px; background: var(--yellow); color: var(--ink); padding: 2px 14px 4px; font-family: Anton; font-size: clamp(20px, 1.9vw, 30px); transform: rotate(-3deg); clip-path: polygon(0 8%, 100% 0, 97% 100%, 2% 92%); }
.pc-loot span small { font-family: var(--tag); font-weight: 700; font-size: .5em; letter-spacing: .1em; text-transform: uppercase; }
.pc-loot span:nth-child(even) { transform: rotate(2deg); background: var(--paper); }
.pc-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }
.pc-chips li { background: var(--ink); color: var(--paper); border: 2px solid var(--paper); font-family: var(--tag); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 10px; transform: rotate(-2deg); }
.pc-chips li:nth-child(even) { transform: rotate(2deg); }
.pc-go {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; background: var(--red); color: var(--paper);
  font-family: Anton; font-size: 30px; text-transform: uppercase; padding: 4px 26px 8px 20px;
  clip-path: polygon(0 10%, 100% 0, 95% 100%, 3% 90%); transition: transform .14s var(--pop);
}
.pc-go:hover, .pc-go:focus-visible { transform: rotate(-4deg) scale(1.08); background: var(--paper); color: var(--red); }
.pc-go[hidden] { display: none; }
.pc-acts { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* evidence tags: every claim points at something you can open */
.proof { display: inline-block; background: var(--yellow); color: var(--ink); font-family: var(--tag); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding: 3px 9px 4px; transform: rotate(-3deg); white-space: nowrap; text-decoration: none; transition: transform .14s var(--pop); }
.proof:hover, .proof:focus-visible { transform: rotate(0) scale(1.08); background: var(--paper); outline: 2px solid var(--ink); }
.proof[hidden] { display: none; }
.t-back .proof { align-self: flex-start; font-size: 10px; margin-top: auto; max-width: 100%; white-space: normal; }
.t-back .proof + .lvl { margin-top: 0; }
.rs-list .proof { margin-left: auto; font-size: 11px; }

/* =========================================================
   CONFIDANTS (tarot deck)
   ========================================================= */
.confidants { background: var(--ink); }
.cf-bg { position: absolute; inset: 0; background: url(stars.svg) 0 0 / 240px 240px; }
.cf-bg::before { content: ""; position: absolute; inset: 0; background: rgba(15,15,15,.88); }
.cf-bg::after { content: ""; position: absolute; inset: 0; background: var(--red); clip-path: polygon(0 88%, 100% 52%, 100% 100%, 0 100%); }
.cf-deck { position: absolute; z-index: 5; left: 3%; right: 3%; top: 29%; bottom: 2%; display: grid; grid-template-columns: repeat(5, min(14vw, calc((67svh - 40px) / 2 / 1.68))); justify-content: center; align-content: center; gap: 18px 22px; perspective: 1400px; }
.tarot { position: relative; aspect-ratio: 5 / 8.4; cursor: pointer; transform: rotate(var(--tr, 0deg)) translateY(var(--ty, 0)); transition: transform .2s var(--pop); -webkit-tap-highlight-color: transparent; }
.tarot:nth-child(odd) { --tr: -3deg; --ty: -10px; }
.tarot:nth-child(even) { --tr: 3deg; --ty: 14px; }
.tarot:hover, .tarot:focus-visible { transform: rotate(0deg) translateY(-18px) scale(1.06); z-index: 3; outline: none; }
.t-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .5s var(--pop); }
.tarot.flip .t-in { transform: rotateY(180deg); }
.t-face, .t-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 4px solid var(--paper); outline: 4px solid var(--ink); box-shadow: 10px 10px 0 rgba(0,0,0,.6); overflow: hidden; }
.t-face { background: var(--red); display: flex; flex-direction: column; align-items: center; padding: 12px 8px; }
.t-face::before { content: ""; position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 50% 46%, rgba(15,15,15,.55) 0 7deg, transparent 7deg 16deg); }
.tc-num { position: relative; font-family: "Tinos"; font-weight: 700; font-size: clamp(18px, 1.6vw, 26px); color: var(--paper); text-shadow: 2px 2px 0 var(--ink); letter-spacing: .1em; }
.t-sym { position: relative; margin: auto 0; width: 58%; aspect-ratio: 1; display: grid; place-items: center; background: var(--paper); border: 4px solid var(--ink); border-radius: 50%; font-family: Anton; font-size: clamp(26px, 2.6vw, 44px); color: var(--ink); transform: rotate(-8deg); box-shadow: 6px 6px 0 var(--ink); }
.t-sym.has-logo { overflow: hidden; padding: 12%; }
.t-sym.has-logo.round { padding: 0; background: var(--red); }
.t-sym.has-logo.dark { background: #000; }
.t-sym.has-logo.round img { transform: rotate(8deg) scale(1.02); }
.t-sym.has-logo img { width: 100%; height: 100%; object-fit: contain; transform: rotate(8deg); }
.t-arc { position: relative; background: var(--ink); color: var(--paper); font-family: var(--tag); font-weight: 700; font-size: clamp(10px, .82vw, 13px); letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; transform: rotate(-3deg); white-space: nowrap; }
.t-who { position: relative; margin-top: 8px; font-size: clamp(12px, 1vw, 17px); text-align: center; line-height: 1.05; white-space: normal; }
.t-who .rz { white-space: normal; }
.t-rank { position: relative; display: flex; gap: 3px; margin-top: 8px; }
.t-rank i { width: 10px; height: 10px; background: rgba(253,253,253,.3); clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.t-rank i.on { background: var(--yellow); }
.t-back { transform: rotateY(180deg); background: var(--paper); color: var(--ink); padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.t-back h3 { font-family: Anton; font-weight: 400; font-size: clamp(18px, 1.6vw, 26px); line-height: 1; text-transform: uppercase; }
.t-back .big { font-family: Anton; font-size: clamp(26px, 2.5vw, 42px); color: var(--red); line-height: 1; }
.t-back p { font-family: var(--body); font-weight: 700; font-size: clamp(12px, 1vw, 15px); line-height: 1.35; }
.t-back .lvl { margin-top: auto; background: var(--ink); color: var(--paper); font-family: var(--tag); font-weight: 700; font-size: 12px; letter-spacing: .14em; padding: 3px 8px; text-transform: uppercase; align-self: flex-start; transform: rotate(-3deg); }
.tarot.fool .t-face { background: var(--ink); }
.tarot.fool .t-face::before { background: repeating-conic-gradient(from 0deg at 50% 46%, rgba(229,25,28,.5) 0 7deg, transparent 7deg 16deg); }
.tarot.fool .t-sym { background: var(--red); color: var(--paper); }
.confidants.enter .tarot { animation: dealIn .42s var(--pop) both; animation-delay: calc(var(--k) * 70ms); }
@keyframes dealIn { from { opacity: 0; transform: translate(-40vw, 30vh) rotate(-60deg) scale(.5); } }
.tarot.rankup::after { content: "RANK UP!"; position: absolute; left: 50%; top: -14%; z-index: 5; font-family: Anton; font-size: clamp(20px, 2vw, 32px); color: var(--yellow); text-shadow: 3px 3px 0 var(--ink), -2px -2px 0 var(--ink); transform: translateX(-50%) rotate(-8deg); animation: rankUp .9s var(--pop) forwards; pointer-events: none; }
@keyframes rankUp { 0% { transform: translateX(-50%) rotate(-8deg) scale(0); } 30% { transform: translateX(-50%) rotate(-8deg) scale(1.3); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-30px) rotate(-8deg) scale(1); } }

/* =========================================================
   STATS / RESULTS
   ========================================================= */
.stats { background: var(--red); }
.st-bg { position: absolute; inset: 0; background:
  linear-gradient(64deg, transparent 0 52%, var(--ink) 52% 100%),
  repeating-linear-gradient(64deg, rgba(0,0,0,.08) 0 2px, transparent 2px 10px); }
.rs-list { position: absolute; z-index: 6; right: 3%; top: 4%; list-style: none; display: flex; flex-direction: column; gap: 6px; width: min(44vw, 640px); }
.rs-list li { display: flex; align-items: center; gap: 14px; background: var(--paper); color: var(--ink); padding: 4px 18px 5px 10px; clip-path: polygon(0 10%, 100% 0, 98% 100%, 1% 90%); transform: rotate(var(--r, -1.5deg)) translateX(var(--x, 0)); }
.rs-list li:nth-child(even) { --r: 1.2deg; --x: -26px; background: var(--ink); color: var(--paper); outline: 2px solid var(--paper); }
.rs-list b { font-family: Anton; font-weight: 400; font-size: clamp(26px, 2.6vw, 42px); color: var(--red); min-width: 3.6em; text-align: right; font-variant-numeric: tabular-nums; }
.rs-list li:nth-child(even) b { color: var(--yellow); }
.rs-list span { font-family: var(--tag); font-weight: 700; font-size: clamp(13px, 1.15vw, 18px); text-transform: uppercase; letter-spacing: .05em; line-height: 1.15; }
.stats.enter .rs-list li { animation: stripIn .3s var(--pop) both; animation-delay: calc(var(--k) * 80ms); }
@keyframes stripIn { from { opacity: 0; transform: translateX(120px) rotate(-8deg); } }
.st-radar { position: absolute; z-index: 4; left: 2%; top: 31%; width: min(40vw, 580px); aspect-ratio: 480 / 300; }
.st-radar svg { width: 100%; height: 100%; overflow: visible; }
.r-ring { fill: none; stroke: rgba(253,253,253,.3); stroke-width: 1.5; }
.r-axis { stroke: rgba(253,253,253,.4); stroke-width: 1.5; }
.r-shape { fill: var(--ink); stroke: var(--paper); stroke-width: 4; stroke-linejoin: round; }
.r-shape-cy { fill: var(--cyan); opacity: .9; }
.r-lbl { font-family: Anton; font-size: 19px; fill: var(--paper); text-transform: uppercase; paint-order: stroke; stroke: var(--ink); stroke-width: 5px; }
.r-rank { font-family: "Archivo Black"; font-size: 12px; fill: var(--yellow); paint-order: stroke; stroke: var(--ink); stroke-width: 4px; letter-spacing: .06em; }
.st-list { position: absolute; z-index: 5; left: 46%; top: 60%; list-style: none; display: flex; flex-direction: column; gap: 6px; width: min(15vw, 220px); }
.st-list button { width: 100%; display: flex; justify-content: space-between; align-items: baseline; background: var(--paper); color: var(--ink); padding: 5px 14px; font-family: var(--tag); font-weight: 700; font-size: 17px; text-transform: uppercase; clip-path: polygon(0 8%, 100% 0, 96% 100%, 3% 92%); transition: transform .14s var(--pop); }
.st-list button em { font-style: normal; font-family: Anton; color: var(--red); }
.st-list li:nth-child(even) button { transform: rotate(2deg); }
.st-list li:nth-child(odd) button { transform: rotate(-2deg); }
.st-list li.on button { background: var(--ink); color: var(--paper); transform: translateX(16px) scale(1.08) rotate(-3deg); outline: 3px solid var(--cyan); outline-offset: -3px; }
.st-dlg { position: absolute; z-index: 6; right: 3%; bottom: 5%; width: min(40vw, 600px); }

/* =========================================================
   CALLING CARD (phone chat)
   ========================================================= */
.calling { background: var(--ink); perspective: 1200px; }
.cc-bg { position: absolute; inset: -20%; background: repeating-linear-gradient(135deg, var(--red) 0 46px, var(--ink) 46px 92px); opacity: .9; }
.cc-card {
  position: absolute; z-index: 3; left: 27%; top: 52%; width: min(560px, 44vw);
  background: repeating-linear-gradient(135deg, var(--ink) 0 14px, var(--red) 14px 28px); padding: 16px;
  transform: translate(-50%, -50%) rotate(-6deg); box-shadow: 18px 18px 0 var(--paper);
}
.cc-inner { position: relative; background: var(--red); padding: 70px 20px 26px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.cc-emblem { position: absolute; left: 16px; top: 12px; width: 60px; transform: rotate(-12deg); }
.cc-line { font-size: clamp(20px, 2.5vw, 36px); }
.cc-line:nth-child(even) { transform: rotate(2deg); } .cc-line:nth-child(odd) { transform: rotate(-2deg); }
.cc-sign { align-self: flex-end; font-size: 32px; margin-top: 12px; transform: rotate(-6deg); }
.calling.enter .cc-card { animation: ccIn .55s var(--pop) both; }
@keyframes ccIn { from { transform: translate(-50%, -50%) rotateY(88deg) rotate(-24deg) scale(.6); } }

.phone { position: absolute; z-index: 5; right: 6%; top: 50%; width: min(430px, 92vw); height: min(86svh, 780px); transform: translateY(-50%) rotate(3deg);
  background: var(--red); border: 10px solid var(--ink); border-radius: 34px; box-shadow: 0 0 0 4px var(--paper), 20px 20px 0 rgba(0,0,0,.55); display: flex; flex-direction: column; overflow: hidden; }
.calling.enter .phone { animation: phoneIn .5s .12s var(--pop) both; }
@keyframes phoneIn { from { transform: translateY(40%) rotate(14deg); opacity: 0; } }
.ph-top { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px; background: var(--ink); color: var(--paper); }
.ph-im { font-family: Anton; font-size: 34px; background: var(--paper); color: var(--ink); padding: 0 10px; transform: rotate(-8deg); line-height: 1.1; }
.ph-who { display: flex; flex-direction: column; line-height: 1.1; }
.ph-who b { font-family: Anton; font-weight: 400; font-size: 24px; letter-spacing: .02em; }
.ph-who small { font-family: var(--tag); font-weight: 500; font-size: 12px; letter-spacing: .1em; color: var(--cyan); text-transform: uppercase; }
.ph-sig { margin-left: auto; font-size: 11px; letter-spacing: -2px; }
.ph-back { display: none; }
.ph-thread { position: relative; flex: 1; list-style: none; overflow-y: auto; padding: 18px 14px 18px; display: flex; flex-direction: column; gap: 14px; scrollbar-width: none; }
.ph-thread::-webkit-scrollbar { display: none; }
.ph-thread::before { content: ""; position: absolute; left: 34px; top: 0; bottom: 0; width: 8px; background: var(--ink); }
.msg { position: relative; display: flex; align-items: flex-start; gap: 10px; animation: msgIn .26s var(--pop) both; }
@keyframes msgIn { from { opacity: 0; transform: translateX(-30px) scale(.8); } }
.msg .av { position: relative; z-index: 1; flex: 0 0 44px; height: 44px; background: var(--ink); border: 3px solid var(--paper); display: grid; place-items: center; transform: rotate(-6deg); }
.msg .av svg { width: 30px; }
.msg .bub { position: relative; background: var(--paper); color: var(--ink); font-family: var(--body); font-weight: 700; font-size: 15px; line-height: 1.38; padding: 10px 14px 11px; max-width: 80%; clip-path: polygon(3% 0, 100% 4%, 97% 100%, 0 94%); }
.msg .bub b { color: var(--red); }
.msg.me { flex-direction: row-reverse; }
.msg.me .bub { background: var(--ink); color: var(--paper); clip-path: polygon(0 4%, 97% 0, 100% 94%, 3% 100%); }
.msg.me .av { background: var(--cyan); }
.msg.typing .bub { font-family: Anton; letter-spacing: .3em; }
.ph-choices { padding: 12px 12px 16px; background: var(--ink); display: flex; flex-direction: column; gap: 8px; }
.ph-choices button, .ph-choices a {
  display: block; text-align: left; background: var(--paper); color: var(--ink); padding: 7px 14px 8px;
  font-family: var(--tag); font-weight: 700; font-size: 16px; letter-spacing: .02em;
  clip-path: polygon(0 8%, 100% 0, 97% 100%, 1% 92%); transition: transform .14s var(--pop), background .06s;
}
.ph-choices button:nth-child(even), .ph-choices a:nth-child(even) { transform: rotate(1deg); }
.ph-choices button:nth-child(odd), .ph-choices a:nth-child(odd) { transform: rotate(-1deg); }
.ph-choices button:hover, .ph-choices button:focus-visible, .ph-choices a:hover, .ph-choices a:focus-visible { background: var(--red); color: var(--paper); transform: translateX(8px) scale(1.03); outline: none; }
.ph-choices a.cta { background: var(--red); color: var(--paper); font-family: Anton; font-size: 22px; text-transform: uppercase; }
.ph-choices a.cta:hover { background: var(--paper); color: var(--red); }

/* evidence photo */
.ev { position: fixed; inset: 0; z-index: 110; background: rgba(10,10,10,.82); display: grid; place-items: center; padding: 16px; cursor: zoom-out; animation: evIn .22s var(--pop) both; }
.ev[hidden] { display: none; }
.ev-full { display: block; cursor: zoom-in; }
@keyframes evIn { from { opacity: 0; } }
.ev-card { position: relative; margin: 0; background: var(--paper); padding: 12px 12px 14px; transform: rotate(-3deg); box-shadow: 14px 14px 0 var(--red); max-width: min(460px, 92vw); animation: evCard .3s var(--pop) both; }
@keyframes evCard { from { transform: rotate(-14deg) scale(.6); opacity: 0; } }
.ev-card img { display: block; width: 100%; max-height: 66svh; object-fit: cover; }
.ev-card.doc { max-width: min(640px, 94vw); }
.ev-card.doc img { object-fit: contain; border: 1px solid #ddd; max-height: 74svh; width: 100%; height: auto; }
@media (max-width: 600px) { .ev-card { transform: rotate(-1.5deg); max-width: calc(100vw - 40px); } .ev-tag { left: -6px; } }
.ev-card figcaption { color: var(--ink); font-family: var(--tag); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 16px; margin-top: 10px; }
.ev-card figcaption b { background: var(--ink); color: var(--paper); padding: 1px 7px; margin-right: 6px; }
.ev-card figcaption small { display: block; margin-top: 6px; font-family: var(--body); text-transform: none; letter-spacing: 0; font-size: 14px; line-height: 1.35; }
.ev-tag { position: absolute; left: -14px; top: -16px; background: var(--red); color: var(--paper); font-family: Anton; font-size: 22px; text-transform: uppercase; padding: 2px 12px; transform: rotate(-8deg); border: 3px solid var(--paper); }
.ev-x { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); font-family: var(--tag); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper); opacity: .7; }

/* click sparks */
.spark { position: fixed; z-index: 120; width: 18px; height: 6px; pointer-events: none; clip-path: polygon(0 50%, 100% 0, 80% 100%); }

/* =========================================================
   PHONE
   ========================================================= */
@media (max-width: 1100px) and (min-width: 821px) {
  .cf-deck { grid-template-columns: repeat(4, 1fr); top: 24%; align-content: center; }
  .tarot { max-height: 34svh; justify-self: center; height: 100%; }
}
@media (max-width: 820px), (max-aspect-ratio: 1/1) {
  .m-stars { width: 60%; height: 50%; clip-path: polygon(18% 0, 100% 0, 100% 100%, 40% 94%, 22% 72%, 30% 50%, 6% 28%); }
  .m-stars svg { left: 66%; top: 40%; }
  .m-tags { right: 3%; top: 2%; gap: 4px; }
  .t-quote, .t-num, .t-plate { display: none; }
  .t-like { font-size: 18px; border-width: 3px; }
  .t-main { font-size: 18px; border-width: 3px; outline-width: 3px; padding: 5px 10px 4px; }
  .m-date { left: 4%; top: 2.5%; }
  .m-date .d-md { font-size: 46px; }
  .m-hero { height: 58%; left: auto; right: -22%; transform: none; }
  @keyframes heroIn { from { transform: translateY(40%) rotate(6deg); } }
  .m-list { left: 4%; top: 18%; align-items: flex-start; gap: 0; }
  .m-list a, .m-list a:nth-of-type(n) { margin-right: 0; font-size: clamp(26px, 7.8vw, 42px); }
  .m-list a:nth-of-type(even) { margin-left: 16px; }
  .m-command { left: 4%; bottom: 3.5%; }
  .rz.xl { font-size: clamp(48px, 15vw, 90px); }
  .m-money { display: none; }
  .m-keys { display: none; }
  .snd { top: 18px; right: 12px; }
  body:has(#menu:not([hidden])) .snd { top: 118px; bottom: auto; }
  .s-sub { font-size: 12px; letter-spacing: .1em; margin-left: 4%; }
  #intro { bottom: 2.5%; }
  .dlg-body { padding: 18px 22px 24px 24px; font-size: 15px; }

  .palaces, .stats, .calling, .confidants { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .s-head { position: relative; left: 0; top: 0; padding: 18px 16px 0; }
  .p-list { position: relative; left: 0; top: 0; bottom: auto; width: auto; margin: 26px 16px 0 12px; overflow: visible; padding-right: 30px; }
  .p-card { position: relative; right: auto; top: 0; width: auto; margin: 46px 16px 60px; }
  .p-bg, .stats .st-bg, .cf-bg { position: fixed; }
  .cf-deck { position: relative; left: 0; right: 0; top: 0; bottom: auto; grid-template-columns: 1fr 1fr; gap: 22px 16px; padding: 30px 16px 60px; }
  .rs-list { position: relative; right: auto; top: 0; width: auto; margin: 22px 16px 0 22px; }
  .st-radar { position: relative; left: 0; top: 0; width: min(70vw, 360px); margin: 10px auto 0; }
  .st-list { position: relative; left: 0; top: 0; width: auto; margin: 10px 16px 0; display: grid; grid-template-columns: 1fr 1fr; }
  .st-dlg { position: relative; right: auto; bottom: auto; width: auto; margin: 40px 16px 60px; }
  .cc-card { position: relative; left: 0; top: 0; width: auto; margin: 24px 22px 0; transform: rotate(-4deg); }
  @keyframes ccIn { from { transform: rotateY(88deg) rotate(-24deg) scale(.6); } }
  .cc-inner { padding: 60px 14px 22px; }
  .phone { position: relative; right: auto; top: 0; transform: rotate(1.5deg); margin: 40px auto 70px; height: 600px; }
  @keyframes phoneIn { from { transform: translateY(20%) rotate(10deg); opacity: 0; } }
}

/* on a real phone the screen IS the phone: full-screen chat, like texting me */
@media (max-width: 600px) {
  .calling { overflow: hidden; }
  .calling .s-head, .calling .cc-card, .calling .cc-bg { display: none; }
  .calling .phone { position: fixed; inset: 0; width: 100%; height: 100%; margin: 0; transform: none; border: 0; border-radius: 0; box-shadow: none; }
  @keyframes phoneIn { from { transform: translateY(6%); opacity: 0; } }
  .ph-top { padding: calc(10px + env(safe-area-inset-top)) 14px 10px; }
  .ph-back { display: block; font-size: 22px; padding: 4px 6px 4px 0; color: var(--paper); }
  .ph-sig { display: none; }
  .rs-list li { flex-wrap: wrap; row-gap: 0; }
  .rs-list li span { flex: 1; }
  .rs-list .proof { margin: -2px 0 4px auto; font-size: 10px; }
  .ph-choices { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .ph-choices button, .ph-choices a { font-size: 17px; padding: 10px 14px 11px; }
  .msg .bub { font-size: 16px; }
  body:has(#calling:not([hidden])) .snd { top: calc(14px + env(safe-area-inset-top)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .m-stars svg { display: none; }
}