/* ═══ imsorryjeremy — playa love tour ═══ */
* { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; overflow:hidden; background:#0b0714; font-family:'Trebuchet MS','Segoe UI',Verdana,sans-serif; color:#fff; }
#app { position:fixed; inset:0; }
#gl { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }
.hidden { display:none !important; }
.screen { position:absolute; inset:0; z-index:20; display:flex; align-items:center; justify-content:center; flex-direction:column; }

/* ── start screen ── */
#start-screen { background:radial-gradient(ellipse at 50% 120%, #3d1f5c 0%, #150a28 55%, #070310 100%); cursor:pointer; }
.stars { position:absolute; inset:0; background-image:
  radial-gradient(1px 1px at 12% 18%, #fff8, transparent),
  radial-gradient(1px 1px at 34% 8%,  #fffa, transparent),
  radial-gradient(2px 2px at 52% 22%, #ffe9b0cc, transparent),
  radial-gradient(1px 1px at 68% 12%, #fff7, transparent),
  radial-gradient(2px 2px at 81% 25%, #fff9, transparent),
  radial-gradient(1px 1px at 91% 7%,  #fff8, transparent),
  radial-gradient(1px 1px at 25% 33%, #ffd9ec88, transparent),
  radial-gradient(1px 1px at 44% 40%, #fff6, transparent),
  radial-gradient(2px 2px at 7% 44%,  #fff7, transparent),
  radial-gradient(1px 1px at 58% 38%, #fff8, transparent);
  animation: twinkle 4s ease-in-out infinite alternate; }
@keyframes twinkle { from{opacity:.55} to{opacity:1} }
.start-inner { text-align:center; z-index:2; padding:20px; }
.pretitle { letter-spacing:.35em; text-transform:uppercase; font-size:12px; color:#ffb0d9; opacity:.9; }
.title { font-size:clamp(44px,9vw,104px); font-weight:900; line-height:1; margin:14px 0 6px;
  color:#fff; text-shadow:0 0 24px #ff4fa3aa, 0 4px 0 #7a1f52, 0 8px 28px #000; }
.title span { color:#ff4fa3; }
.tagline { font-size:clamp(14px,2.4vw,20px); color:#ffd9ec; opacity:.9; margin-bottom:34px; }
.press-start { font-size:clamp(18px,3vw,26px); font-weight:700; color:#7dffb0; text-shadow:0 0 18px #27ff9c88; margin-bottom:26px; }
.blink { animation:blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity:.15; } }
.controls-hint { font-size:13px; line-height:1.8; color:#cbb8e8; opacity:.85; }
.gold { color:#ffd76a; font-weight:700; }
.ghost-btn { margin-top:22px; background:none; border:1px solid #ffffff33; color:#cbb8e8; padding:10px 18px; border-radius:999px; font-size:13px; cursor:pointer; transition:.2s; }
.ghost-btn:hover { border-color:#ff4fa3; color:#ffd9ec; }
.start-footer { position:absolute; bottom:18px; width:100%; text-align:center; font-size:11px; letter-spacing:.12em; color:#ffffff55; z-index:2; }

/* ── loading ── */
#loading { background:#0b0714; }
.load-text { font-size:20px; color:#ffb0d9; animation:blink 1.4s steps(2) infinite; }

/* ── HUD ── */
#hud { position:absolute; inset:0; z-index:15; pointer-events:none; }
.mission { position:absolute; left:18px; bottom:16px; max-width:min(520px,70vw);
  background:linear-gradient(90deg,#000a 60%,transparent); padding:10px 16px; border-left:4px solid #7dffb0;
  font-size:clamp(13px,1.8vw,17px); font-weight:600; color:#eafff2; text-shadow:0 2px 4px #000; }
.hearts { position:absolute; top:14px; left:16px; font-size:24px; letter-spacing:6px; filter:drop-shadow(0 2px 6px #000); }
.hearts .off { opacity:.22; filter:grayscale(1); }
.clock { position:absolute; top:14px; right:16px; background:#0008; padding:8px 14px; border-radius:999px; font-size:13px; color:#ffe9b0; border:1px solid #ffffff22; }
.compass { position:absolute; top:60px; right:16px; width:44px; height:44px; border-radius:50%; background:#0008; border:1px solid #ffffff22;
  display:flex; align-items:center; justify-content:center; font-weight:900; color:#ff4fa3; }
.turtle-bubble { position:absolute; left:50%; bottom:110px; transform:translateX(-50%); max-width:min(460px,80vw);
  background:#fffdf7; color:#23402e; padding:14px 18px; border-radius:18px 18px 18px 4px; font-size:15px; font-weight:600;
  box-shadow:0 10px 30px #000a; border:2px solid #7dffb0; }
.turtle-bubble::before { content:'🐢'; position:absolute; left:-14px; bottom:-12px; font-size:28px; filter:drop-shadow(0 2px 4px #000); }

/* ── chapter card ── */
#chapter { background:radial-gradient(ellipse at center, #00000088 0%, #000000e8 100%); z-index:25; }
.chapter-card { max-width:min(620px,92vw); background:linear-gradient(160deg,#1c1030,#0d0618); border:1px solid #ff4fa355;
  border-radius:22px; padding:clamp(24px,5vw,48px); box-shadow:0 30px 80px #000d, 0 0 60px #ff4fa322 inset; text-align:center;
  animation:cardIn .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes cardIn { from { transform:translateY(40px) scale(.94); opacity:0; } }
.chapter-kicker { letter-spacing:.3em; text-transform:uppercase; font-size:11px; color:#ffd76a; margin-bottom:10px; }
.chapter-card h2 { font-size:clamp(28px,5vw,44px); font-weight:900; color:#fff; text-shadow:0 0 20px #ff4fa366; margin-bottom:16px; }
.chapter-body { font-size:clamp(15px,2.2vw,18px); line-height:1.75; color:#e8ddf5; margin-bottom:26px; }
.chapter-body em { color:#ffb0d9; font-style:normal; font-weight:700; }
.big-btn { background:linear-gradient(135deg,#ff4fa3,#b04fff); color:#fff; border:none; padding:14px 30px; border-radius:999px;
  font-size:16px; font-weight:800; cursor:pointer; box-shadow:0 8px 24px #ff4fa355; transition:.15s; }
.big-btn:hover { transform:translateY(-2px) scale(1.03); box-shadow:0 12px 30px #ff4fa377; }

/* ── passed stamp (GTA nod) ── */
.passed { position:absolute; top:38%; left:50%; transform:translate(-50%,-50%) rotate(-4deg); z-index:30;
  font-size:clamp(30px,6vw,64px); font-weight:900; letter-spacing:.08em; color:#7dffb0;
  text-shadow:0 0 30px #27ff9c, 0 4px 0 #064d2c, 0 8px 24px #000; animation:stamp 1.8s ease forwards; pointer-events:none; }
@keyframes stamp { 0%{opacity:0; transform:translate(-50%,-50%) rotate(-4deg) scale(2.2);} 12%{opacity:1; transform:translate(-50%,-50%) rotate(-4deg) scale(1);} 75%{opacity:1;} 100%{opacity:0;} }

/* ── letter ── */
#letter { background:radial-gradient(ellipse at center, #1a0d2ecc 0%, #070310f2 100%); z-index:26; }
.letter-scroll { max-height:100%; overflow-y:auto; padding:5vh 16px; width:100%; display:flex; justify-content:center; }
.letter-paper { max-width:640px; background:linear-gradient(175deg,#fffdf7,#fff4e3); color:#2d2137; border-radius:6px;
  padding:clamp(28px,6vw,60px); box-shadow:0 40px 100px #000e; position:relative; }
.letter-paper:before { content:'💌'; position:absolute; top:-24px; left:50%; transform:translateX(-50%); font-size:42px; filter:drop-shadow(0 6px 12px #0008); }
.letter-kicker { letter-spacing:.3em; text-transform:uppercase; font-size:10px; color:#b04fff; text-align:center; margin-bottom:14px; }
.letter-paper h2 { font-size:clamp(26px,5vw,38px); color:#7a1f52; margin-bottom:18px; font-family:Georgia,serif; }
#letter-body, #letter-terri { font-family:Georgia,serif; font-size:16.5px; line-height:1.85; color:#3a2c48; }
#letter-body p, #letter-terri p { margin-bottom:14px; }
#letter-terri { margin-top:22px; padding:18px 20px; background:#f2fbe9; border-left:4px solid #57a05a; border-radius:8px; }
#letter-terri .from { font-weight:700; color:#2f6b33; font-family:'Trebuchet MS',sans-serif; font-size:13px; letter-spacing:.08em; margin-bottom:8px; }
.mem-title { margin:24px 0 12px; font-family:'Trebuchet MS',sans-serif; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:#b04fff; text-align:center; }
.mem-card { display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid #f0e2c8; border-radius:12px; padding:12px 14px; margin-bottom:10px; box-shadow:0 2px 8px #7a5a2a12; }
.mem-emoji { font-size:24px; line-height:1.2; }
.mem-name { font-family:'Trebuchet MS',sans-serif; font-weight:800; font-size:14px; color:#7a1f52; margin-bottom:3px; }
.mem-text { font-family:Georgia,serif; font-size:14px; line-height:1.6; color:#4a3a58; }
.signoff-line { margin-top:24px; text-align:center; font-family:Georgia,serif; font-style:italic; font-size:16px; color:#2f6b33; }
.letter-sign { margin-top:26px; font-family:Georgia,serif; font-size:17px; color:#7a1f52; line-height:1.7; }
.letter-sign .small { font-size:13px; color:#9c7fb3; }
.letter-cta { margin-top:30px; display:flex; gap:14px; flex-wrap:wrap; }

/* ── touch ── */
#touch-ui { position:absolute; inset:0; z-index:16; pointer-events:none; }
#stick { position:absolute; left:26px; bottom:70px; width:110px; height:110px; border-radius:50%; background:#ffffff14; border:1px solid #ffffff2a; pointer-events:auto; }
#stick-nub { position:absolute; left:50%; top:50%; width:46px; height:46px; border-radius:50%; background:#ff4fa3aa; transform:translate(-50%,-50%); }
#touch-act { position:absolute; right:26px; bottom:80px; width:70px; height:70px; border-radius:50%; background:#7dffb033; border:1px solid #7dffb0; color:#eafff2; font-size:26px; pointer-events:auto; }

/* ── oracle card overlay (Journey II) ── */
#oracle-card { z-index:27; background:radial-gradient(ellipse at center, #1a0d2e88 0%, #070310ee 100%); }
.ocard-frame { max-width:min(560px,92vw); max-height:88dvh; overflow-y:auto; background:linear-gradient(175deg,#fdf6e3,#f5e8c8); color:#3a2c18;
  border:3px solid #d4af37; outline:1px solid #d4af37; outline-offset:5px; border-radius:4px; padding:clamp(22px,5vw,42px);
  box-shadow:0 40px 100px #000e, 0 0 60px #b04fff33; text-align:center; animation:cardIn .5s cubic-bezier(.2,1.4,.4,1); }
.ocard-kicker { letter-spacing:.28em; text-transform:uppercase; font-size:11px; color:#8a6a1a; margin-bottom:14px; }
.ocard-realm { font-size:11px; letter-spacing:.25em; color:#8a6a1a; margin-bottom:8px; }
.ocard-name { font-family:Georgia,serif; font-size:clamp(24px,4.5vw,34px); font-weight:700; color:#4a2c7a; margin-bottom:12px; }
.ocard-keys { margin-bottom:16px; }
.ocard-keys span { display:inline-block; background:#efe0b8; border:1px solid #d4af37; border-radius:999px; padding:3px 12px; font-size:11.5px; margin:2px; color:#6a5010; }
.ocard-reading { font-family:Georgia,serif; font-size:15.5px; line-height:1.75; color:#3a2c18; text-align:left; margin-bottom:14px; }
.ocard-dare { font-family:Georgia,serif; font-size:14px; line-height:1.65; color:#6a3a10; background:#f8e8c8; border-left:3px solid #d4af37; padding:10px 14px; text-align:left; margin-bottom:12px; }
.ocard-where { font-size:12.5px; color:#5a4a20; margin-bottom:16px; }
.ocard-oracle-says { font-family:Georgia,serif; font-size:15.5px; line-height:1.8; color:#3a2c48; margin-bottom:18px; }
.ocard-oracle-says.small { font-size:13px; color:#8a7aa8; }
.ocard-backs { display:flex; gap:14px; justify-content:center; margin:18px 0 22px; }
.ocard-back { width:64px; height:96px; border-radius:8px; background:linear-gradient(160deg,#4a2a6a,#2a1040); border:2px solid #d4af37;
  display:flex; align-items:center; justify-content:center; font-size:30px; box-shadow:0 8px 20px #0006; animation:cardIn .6s cubic-bezier(.2,1.4,.4,1); }
.ocard-back:nth-child(2) { animation-delay:.1s } .ocard-back:nth-child(3) { animation-delay:.2s }
.ocard-credit { margin-top:16px; font-size:10.5px; letter-spacing:.08em; color:#8a7a58; }
.oracle-btn { background:linear-gradient(135deg,#b04fff,#4a2a6a) !important; box-shadow:0 8px 24px #b04fff55 !important; }
.oracle-tease { margin-top:14px; font-size:11.5px; color:#9c7fb3; text-align:center; }
.mute { position:absolute; bottom:16px; right:16px; z-index:17; width:44px; height:44px; border-radius:50%; background:#0009; border:1px solid #ffffff2a; color:#fff; font-size:18px; cursor:pointer; }

/* ── control panel ── */
.panel-btn { position:absolute; bottom:16px; right:70px; z-index:17; width:44px; height:44px; border-radius:50%; background:#0009; border:1px solid #ffffff2a; color:#fff; font-size:18px; cursor:pointer; }
.panel { position:absolute; inset:0; z-index:28; background:#070310cc; display:flex; align-items:center; justify-content:center; }
.panel-card { width:min(440px,92vw); max-height:88dvh; overflow-y:auto; background:linear-gradient(165deg,#1c1030,#0d0618); border:1px solid #ff4fa355; border-radius:18px; padding:20px 22px; box-shadow:0 24px 70px #000d; }
.panel-title { font-size:18px; font-weight:900; color:#ffb0d9; display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.panel-title button { background:none; border:none; color:#cbb8e8; font-size:18px; cursor:pointer; }
.panel-sub { font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#ffd76a; margin:12px 0 6px; }
.panel-row { display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px solid #ffffff10; font-size:13.5px; color:#e8ddf5; }
.panel-row b { color:#7dffb0; }
.panel-actions { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.panel-action { flex:1; min-width:110px; background:#00000040; border:1px solid #ffffff26; color:#eafff2; border-radius:10px; padding:10px 8px; font-size:13px; font-weight:700; cursor:pointer; }
.panel-action:hover { border-color:#ff4fa3; }
.panel-goal { margin-top:14px; text-align:center; font-size:12px; color:#cbb8e8; }
.panel-goal b { color:#ffd76a; }