/* SPICE effect pages: a full-screen scene with the message card on top */
:root {
  --card-bg: rgba(255, 255, 255, .92);
  --card-text: #2b1d1a;
  --card-muted: #8a7a74;
  --chili: #e8412c;
  --font: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic UI", Meiryo, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { font-family: var(--font); -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
#scene, #fx { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#scene { touch-action: none; }
#fx { pointer-events: none; }

#brand {
  position: fixed; left: max(14px, env(safe-area-inset-left)); top: max(12px, env(safe-area-inset-top));
  font: 900 15px/1 var(--font); letter-spacing: .14em; color: #fff; text-decoration: none; opacity: .85;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .35); padding: 6px 2px;
}
#brand::before { content: "🌶 "; letter-spacing: 0; }
#snd {
  position: fixed; right: max(12px, env(safe-area-inset-right)); top: max(8px, env(safe-area-inset-top));
  width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .25); color: #fff;
  font-size: 18px; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* Before opening: who it is for, and what to do */
#top {
  position: fixed; left: 0; right: 0; top: calc(max(12px, env(safe-area-inset-top)) + 44px);
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 16px;
  pointer-events: none; transition: opacity .5s, transform .5s; text-align: center;
}
#top.gone { opacity: 0; transform: translateY(-12px); }
#top .to { margin: 0; font-size: clamp(20px, 5.6vw, 30px); font-weight: 900; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
#top .hint {
  margin: 0; font-size: clamp(13px, 3.6vw, 16px); font-weight: 700; color: #fff; padding: 6px 14px;
  border-radius: 999px; background: rgba(0, 0, 0, .3); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: bob 1.6s ease-in-out infinite;
}
#top .hint:empty { display: none; }
#top .extra { display: flex; gap: 8px; pointer-events: auto; }
#top .extra button {
  font: 700 14px var(--font); padding: 9px 16px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, .8);
  background: rgba(255, 255, 255, .15); color: #fff; cursor: pointer;
}
#top.gone .extra { pointer-events: none; }
@keyframes bob { 50% { transform: translateY(-4px); } }

/* After opening: the message */
#card {
  position: fixed; left: 50%; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 64px);
  width: min(calc(100% - 32px), 520px); max-height: 52%; overflow: auto;
  transform: translate(-50%, 24px) scale(.96); opacity: 0; transition: transform .6s cubic-bezier(.2, 1.4, .4, 1), opacity .4s;
  background: var(--card-bg); color: var(--card-text); border-radius: 22px; padding: 18px 20px 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  -webkit-user-select: text; user-select: text;
}
#card.show { transform: translate(-50%, 0) scale(1); opacity: 1; }
#card p { margin: 0; }
#card .to { font-weight: 900; font-size: 17px; }
#card .msg { font-size: clamp(17px, 4.6vw, 21px); line-height: 1.65; font-weight: 700; margin: 8px 0 10px; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1.65em; }
#card .from { text-align: right; font-weight: 700; font-size: 15px; }
#card .from:empty { display: none; }
#card .note { margin-top: 10px; font-size: 11px; color: var(--card-muted); }

#acts {
  position: fixed; left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom));
  display: flex; justify-content: center; gap: 8px; padding: 0 16px; flex-wrap: wrap;
  opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .4s;
}
#acts.show { opacity: 1; transform: none; }
#acts > * {
  font: 700 14px/1 var(--font); padding: 13px 16px; border-radius: 999px; text-decoration: none; cursor: pointer;
  border: 0; background: rgba(255, 255, 255, .9); color: var(--card-text); white-space: nowrap;
}
#acts .make { background: var(--chili); color: #fff; }
#acts [hidden] { display: none; }

/* Scenes with a pale background */
body.light #brand { color: #3a2412; text-shadow: none; }
body.light #snd { background: rgba(58, 36, 18, .1); }
body.light #top .to { color: #3a2412; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
body.light #top .extra button { border-color: #3a2412; color: #3a2412; background: rgba(255, 255, 255, .5); }
body.light #acts > *:not(.make) { box-shadow: 0 2px 10px rgba(58, 36, 18, .15); }

/* Maker preview and share-card capture */
body.preview #brand { display: none; }
body.og #brand, body.og #snd, body.og #top, body.og #card, body.og #acts { display: none; }

@media (prefers-reduced-motion: reduce) {
  #top .hint { animation: none; }
  #card, #acts, #top { transition: opacity .2s; }
}

/* A consistent gift-card finish across all scenes. */
#brand { font-size:12px; letter-spacing:.2em; padding:10px 12px; border:1px solid #ffffff30; border-radius:999px; background:#11111118; backdrop-filter:blur(12px); }
#brand::before { content:"✦ "; }
#snd { border:1px solid #ffffff30; background:#11111124; width:42px; height:42px; }
#top { gap:12px; top:calc(max(12px,env(safe-area-inset-top)) + 54px); }
#top .to { letter-spacing:.04em; font-size:clamp(20px,5.4vw,29px); }
#top .hint { font-size:clamp(12px,3.3vw,15px); padding:10px 18px; background:#16132080; border:1px solid #ffffff30; box-shadow:0 6px 24px #00000012; }
#card { background:linear-gradient(145deg,#fffef9f5,#f9f4eaf5); border:1px solid #ffffffd9; border-radius:18px; padding:24px 24px 20px; box-shadow:0 24px 70px #0004,0 2px 6px #0001; }
#card::before { content:"✦"; display:block; color:var(--chili); font:20px/1.2 Georgia,serif; margin-bottom:12px; }
#card .to { font-size:14px; color:#796452; letter-spacing:.06em; }
#card .msg { line-height:1.85; margin:12px 0 16px; }
#card .from { padding-top:12px; border-top:1px solid #d8caba; font-size:13px; color:#796452; }
#acts > * { box-shadow:0 4px 18px #0002; padding:14px 20px; font-size:13px; border:1px solid #ffffff45; }
#acts .make { background:#b93e2c; }
body.light #brand { background:#ffffff60; border-color:#ffffff80; }
body.light #top .hint { color:#403429; background:#fffdf0db; border-color:#fff; text-shadow:none; }
body.light #snd { border-color:#ffffff80; }
:focus-visible { outline:3px solid #ffbc57; outline-offset:4px; }
@media (max-height:600px) { #card { padding:16px 18px; } #card::before { display:none; } #card .msg { margin:8px 0; line-height:1.6; } }
.scene-finish { position:fixed; inset:0; pointer-events:none; background:radial-gradient(ellipse at 50% 38%,transparent 30%,#0905142b 100%); box-shadow:inset 0 0 100px #08031418; }
body.light .scene-finish { background:radial-gradient(ellipse at 50% 35%,#ffffff0d 20%,#59401a0d 100%); box-shadow:none; }
body.og .scene-finish { display:none; }

/* Words for what the canvas shows: read by screen readers and search engines, not drawn on screen */
.about { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The scene stays visible through the card and remains playable when it is hidden. */
#card { background:rgba(255,253,245,.68); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
#card .to, #card .from { color:#513e30; }
#card .note { color:#584b40; }
#card[hidden], #messageToggle[hidden] { display:none; }
#messageClose {
  position:absolute; top:10px; right:10px; width:40px; height:40px;
  border:1px solid #ffffff80; border-radius:50%; background:#ffffff70;
  color:#38291f; font:26px/1 var(--font); cursor:pointer;
}
#card .to { padding-right:38px; }
#messageToggle {
  position:fixed; z-index:2; left:50%; transform:translateX(-50%);
  bottom:calc(max(14px,env(safe-area-inset-bottom)) + 72px);
  max-width:calc(100% - 28px); min-height:44px; padding:11px 20px;
  border:1px solid rgba(255,255,255,.65); border-radius:999px;
  background:rgba(255,253,245,.88); color:#38291f;
  font:700 13px/1.5 var(--font); cursor:pointer; white-space:nowrap;
  box-shadow:0 4px 18px #0002; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
#messageToggle::before { content:'＋'; margin-right:7px; }
body.og #messageToggle { display:none; }
#acts[hidden] { display:none; }

/* After opening: "tap the screen to play a melody" */
.songtip {
  position: fixed; left: 50%; top: calc(max(12px, env(safe-area-inset-top)) + 52px); z-index: 5;
  transform: translate(-50%, -10px); opacity: 0; transition: opacity .5s, transform .5s; pointer-events: none;
  font: 700 clamp(13px, 3.6vw, 16px)/1.3 var(--font); color: #fff; padding: 7px 16px; border-radius: 999px; white-space: nowrap;
  background: rgba(0, 0, 0, .38); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.songtip.show { opacity: 1; transform: translate(-50%, 0); animation: tipbob 1.6s ease-in-out .5s infinite; }
@keyframes tipbob { 50% { transform: translate(-50%, -4px); } }
@media (prefers-reduced-motion: reduce) { .songtip.show { animation: none; } }