/* Clippy2027, level 6: the date.
   A dating sim, pastel and a bit too much. Everything is scoped under .date
   (the level's root in the act 2 stage), except the endings' screens
   (.drama.d6-*). --awk (0 to 1) is how awkward it's got. */
.date {
  --pink: #ff6fae; --pink-2: #ffb3d6; --pink-3: #ffe3f1; --lilac: #b28dff; --ink: #5a1f4a; --gold: #ffd166;
  --awk: 0;
  position: absolute; inset: 0; overflow: hidden; color: var(--ink);
  font: 16px/1.45 ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Trebuchet MS", system-ui, sans-serif;
  word-spacing: normal; letter-spacing: normal;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; cursor: pointer;
}
.date[hidden] { display: none; }
.d6-defs { position: absolute; width: 0; height: 0; }
.date button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.date button:focus { outline: none; }
.date button:focus-visible { outline: 3px solid var(--lilac); outline-offset: 2px; }

/* ---------- the backdrop ---------- */
.d6-bg { position: absolute; inset: 0; transition: background 1.2s; background: #1a1030; }
.d6-scenery { position: absolute; inset: 0; }
/* The pitch: out past the factories, in the dark, with a pink glow. */
.d6-bg[data-scene="pitch"], .d6-bg[data-scene="checks"] {
  background: radial-gradient(ellipse at 50% 40%, #4a2a6a 0%, #1d1238 45%, #0b0716 100%);
}
.d6-bg[data-scene="pitch"]::before, .d6-bg[data-scene="checks"]::before, .d6-bg[data-venue="moon"][data-scene="date"]::before {
  content: ""; position: absolute; inset: 0; opacity: 0.8;
  background-image: radial-gradient(1.5px 1.5px at 12% 20%, #fff, transparent), radial-gradient(1px 1px at 30% 70%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 70% 15%, #ffd6f0, transparent), radial-gradient(1px 1px at 85% 55%, #fff, transparent),
    radial-gradient(1px 1px at 55% 85%, #fff, transparent), radial-gradient(1.5px 1.5px at 92% 88%, #fff, transparent),
    radial-gradient(1px 1px at 8% 92%, #fff, transparent), radial-gradient(1px 1px at 45% 35%, #fff, transparent);
}
.d6-bg[data-scene="upload"] {
  background: linear-gradient(180deg, #2a1050, #7a2a8a 60%, #ff6fae);
}
.d6-bg[data-scene="upload"]::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.08) 0 2px, transparent 2px 28px), repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 2px, transparent 2px 28px);
  animation: d6-scroll 2s linear infinite;
}
@keyframes d6-scroll { to { background-position: 0 28px, 0 0; } }
.d6-bg[data-scene="setup"] {
  background: radial-gradient(circle at 20% 15%, #fff 0 8%, transparent 9%), radial-gradient(circle at 80% 30%, #fff6 0 5%, transparent 6%),
    linear-gradient(160deg, #ffd6ec, #e6d4ff 55%, #cfe9ff);
}
.d6-bg[data-scene="wedding"] { background: linear-gradient(180deg, #fff6fb, #ffd6ec 60%, #ffc3e1); }
.d6-bg[data-scene="end"] { background: linear-gradient(180deg, #ece8f0, #d7d0de); }

/* The venues. */
.d6-bg[data-venue="server"][data-scene="date"] { background: linear-gradient(180deg, #120c26, #2a1638 70%, #4a1f3a); }
.v-racks i { position: absolute; bottom: 18%; width: 14%; height: 62%; background: linear-gradient(90deg, #1c1830, #2b2545 50%, #1c1830); border: 2px solid #3a3358; border-radius: 4px; display: flex; flex-direction: column; justify-content: space-evenly; padding: 6px; }
.v-racks b { height: 5px; width: 30%; border-radius: 3px; background: #6affb0; box-shadow: 0 0 6px #6affb0; animation: d6-led 3s steps(2) infinite; }
.v-racks b:nth-child(3n) { background: #ff6fae; box-shadow: 0 0 6px #ff6fae; }
@keyframes d6-led { 50% { opacity: 0.25; } }
.v-candles i { position: absolute; bottom: 14%; width: 10px; height: 26px; border-radius: 3px; background: #fff3dc; }
.v-candles i::before { content: ""; position: absolute; left: 1px; top: -15px; width: 8px; height: 14px; border-radius: 50% 50% 40% 40%; background: radial-gradient(#fff6b0, #ffb347 60%, transparent 70%); animation: d6-flicker 0.4s ease-in-out infinite alternate; }
.v-candles i::after { content: ""; position: absolute; left: -30px; top: -50px; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(rgba(255,190,90,0.35), transparent 70%); }
@keyframes d6-flicker { to { transform: scale(0.85, 1.1) translateY(1px); opacity: 0.85; } }

.d6-bg[data-venue="mine"][data-scene="date"] { background: linear-gradient(180deg, #5b3a8a 0%, #ff7aa8 45%, #ffb36b 70%, #ffd38a 100%); }
.v-sun { position: absolute; left: 50%; bottom: 30%; width: 46vmin; height: 46vmin; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(#fff3c4, #ffc26b 60%, rgba(255,140,90,0) 72%); }
.v-hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 42%; }
.v-hills .h1 { fill: #6a2f5e; } .v-hills .h2 { fill: #3d1a3e; } .v-hills .frame { fill: none; stroke: #2a0f2a; stroke-width: 3; }

.d6-bg[data-venue="trombone"][data-scene="date"] { background: linear-gradient(180deg, #ffd0e6, #ffb3d6 60%, #e88bbd); }
.v-wall { position: absolute; inset: 0 0 26% 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.35) 0 22px, transparent 22px 44px); }
.v-sign { position: absolute; top: 76px; left: 50%; transform: translateX(-50%) rotate(-3deg); white-space: nowrap;
  font: italic 700 26px/1 "Brush Script MT", "Segoe Script", cursive; color: #fff; text-shadow: 0 0 6px #fff, 0 0 14px #ff3d9a, 0 0 28px #ff3d9a;
  display: flex; align-items: center; gap: 6px; animation: d6-neon 4s steps(1) infinite; }
.v-sign svg { width: 30px; height: 30px; color: #fff; filter: drop-shadow(0 0 6px #ff3d9a); }
@keyframes d6-neon { 0%, 46%, 50%, 100% { opacity: 1; } 47%, 49% { opacity: 0.4; } }
.v-table { position: absolute; left: -10%; right: -10%; bottom: 0; height: 30%; border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  background: repeating-linear-gradient(45deg, #fff 0 18px, #ff9cc8 18px 36px); box-shadow: 0 -6px 20px rgba(120,20,80,0.25); }

.d6-bg[data-venue="moon"][data-scene="date"] { background: linear-gradient(180deg, #05040c, #160f2a 70%, #2a2240); }
.v-earth { position: absolute; top: 12%; right: 10%; width: 22vmin; height: 22vmin; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #9fe0ff, #3a7bd5 55%, #1b3a7a); box-shadow: 0 0 30px rgba(120,190,255,0.4); }
.v-earth::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(1.5px 1.5px at 40% 50%, #ffe08a, transparent), radial-gradient(1.5px 1.5px at 60% 40%, #ffe08a, transparent), radial-gradient(1.5px 1.5px at 55% 65%, #ffe08a, transparent); animation: d6-led 2s steps(2) infinite; }
.v-ground { position: absolute; left: -10%; right: -10%; bottom: 0; height: 28%; border-radius: 50% 50% 0 0 / 22% 22% 0 0; background: radial-gradient(circle at 30% 40%, #9a95a8 0 6%, transparent 7%), radial-gradient(circle at 75% 60%, #9a95a8 0 4%, transparent 5%), #bdb8c8; }
.v-blanket { position: absolute; left: 50%; bottom: 6%; width: 70%; height: 12%; transform: translateX(-50%) perspective(200px) rotateX(40deg);
  background: repeating-conic-gradient(#ff6fae 0 25%, #fff 0 50%) 0 0 / 28px 28px; border-radius: 6px; }

/* Hearts drifting up. More of them, faster and pinker, as it gets worse. */
.d6-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.d6-fx i { position: absolute; bottom: -40px; font-style: normal; color: var(--pink); font-size: calc(14px + 22px * var(--awk));
  opacity: 0; animation: d6-float linear infinite; }
.date[data-scene="pitch"] .d6-fx, .date[data-scene="checks"] .d6-fx, .date[data-scene="end"] .d6-fx { display: none; }
.d6-fx i:nth-child(n+7) { display: none; }
.date.weird .d6-fx i:nth-child(n+7) { display: block; }
@keyframes d6-float { 10% { opacity: 0.55; } 90% { opacity: 0.4; } to { transform: translateY(-115vh) rotate(25deg); opacity: 0; } }

/* ---------- the layout: meter, Clippy, choices, the dialogue box ---------- */
.d6-main {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  max-width: 760px; margin: 0 auto;
}
.d6-meter {
  flex: none; align-self: flex-start; width: min(250px, calc(100% - 148px)); min-height: 44px; box-sizing: border-box;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center;
  padding: 5px 12px 6px 8px; border-radius: 16px; background: rgba(255,255,255,0.88); border: 2px solid var(--pink-2);
  box-shadow: 0 4px 14px rgba(120,20,80,0.25);
}
.d6-meter[hidden] { display: none; }
.d6-meter-heart { grid-row: 1 / 3; font-size: 26px; line-height: 1; color: var(--pink); animation: d6-beat 1s ease-in-out infinite; }
@keyframes d6-beat { 15% { transform: scale(1.25); } 30% { transform: scale(1); } }
.d6-meter-txt { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 6px; font-size: 12px; line-height: 1.3; font-weight: 700; letter-spacing: 0.02em; }
.d6-meter-txt b { color: var(--pink); }
.d6-meter-bar { height: 8px; border-radius: 4px; background: var(--pink-3); position: relative; }
.d6-meter-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: linear-gradient(90deg, var(--pink), var(--lilac)); transition: width 0.8s cubic-bezier(.3,1.6,.5,1); }
.d6-meter-staple { grid-column: 2; font-size: 11px; font-weight: 700; color: #6b7280; }
.d6-meter-staple[hidden] { display: none; }
/* The meter misbehaving. */
.d6-meter[data-mode="overflow"] .d6-meter-bar i { width: 140% !important; animation: d6-spill 0.6s ease-in-out infinite alternate; }
@keyframes d6-spill { to { width: 150%; filter: hue-rotate(40deg); } }
.d6-meter[data-mode="progress"] .d6-meter-bar i { background: repeating-linear-gradient(45deg, var(--pink) 0 8px, var(--lilac) 8px 16px); background-size: 200% 100%; animation: d6-stripe 1s linear infinite; }
@keyframes d6-stripe { to { background-position: -23px 0; } }
.d6-meter[data-mode="negative"] .d6-meter-bar { background: #d7d0de; }
.d6-meter[data-mode="negative"] .d6-meter-bar::before { content: ""; position: absolute; right: 100%; top: 0; bottom: 0; width: 20%; border-radius: 4px; background: #7a6f8a; }
.d6-meter[data-mode="clips"] .d6-meter-val { font-variant-numeric: tabular-nums; }
.d6-meter[data-mode="nan"] { animation: d6-glitch 0.3s steps(2) infinite; }
.d6-meter[data-mode="nan"] .d6-meter-bar i { background: repeating-linear-gradient(90deg, #000 0 3px, #fff 3px 5px, var(--pink) 5px 9px); }
.d6-meter[data-mode="infinite"] .d6-meter-val { font-size: 18px; line-height: 12px; }
.d6-meter[data-mode="infinite"] .d6-meter-bar i { background: linear-gradient(90deg, #ff6fae, #ffd166, #7fd1ff, #b28dff, #ff6fae); background-size: 200% 100%; animation: d6-stripe 1.2s linear infinite; }
.d6-meter[data-mode="upload"] .d6-meter-heart { color: var(--lilac); }
.d6-meter[data-mode="merge"] .d6-meter-heart { color: var(--gold); }
@keyframes d6-glitch { 50% { transform: translate(2px, -1px) skewX(-6deg); } }

/* Clippy. */
.d6-stage { flex: 1 1 auto; min-height: 100px; position: relative; display: flex; justify-content: center; }
.d6-portrait { height: 100%; width: 100%; max-width: 420px; display: flex; justify-content: center; }
.d6-portrait .clippy { height: 100%; width: 100%; overflow: visible; filter: drop-shadow(0 10px 18px rgba(60,10,50,0.35)); animation: d6-sway 5s ease-in-out infinite; }
.d6-portrait.talking .c-face { animation: d6-bob 0.5s ease-in-out 2; }
.d6-portrait.jolt .clippy { animation: d6-jolt 0.5s ease-out, d6-sway 5s ease-in-out 0.5s infinite; }
@keyframes d6-sway { 50% { transform: translateY(-6px) rotate(-1.5deg); } }
@keyframes d6-bob { 50% { transform: translateY(-2px); } }
@keyframes d6-jolt { 20% { transform: translateX(-10px) rotate(-4deg); } 45% { transform: translateX(8px) rotate(3deg); } 70% { transform: translateX(-4px); } }
.date.weird .d6-portrait .clippy { animation-duration: 2.6s; }
.clippy .c-wire-shadow { fill: none; stroke: #5b4e78; stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; }
.clippy .c-wire { fill: none; stroke: url(#d6-metal); stroke-linecap: round; stroke-linejoin: round; }
.clippy .c-wire-shine { fill: none; stroke: #fff; stroke-linecap: round; opacity: 0.55; transform: translate(-2px, -2px); }
.clippy .c-eye { fill: #fff; stroke: #3a1f3a; stroke-width: 3; }
.clippy .c-pupil { fill: #2a1030; }
.clippy .c-glint { fill: #fff; }
.clippy .c-heart { fill: #ff3d8a; }
.clippy .c-lid { fill: #c9c3dc; stroke: #3a1f3a; stroke-width: 3; }
.clippy .c-line { fill: none; stroke: #3a1f3a; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.clippy .c-line.thin { stroke-width: 3; }
.clippy .c-mouth { fill: #6a1f3a; stroke: #3a1f3a; stroke-width: 3; }
.clippy .c-blush { fill: #ff7fb0; }
.clippy .c-sweat { fill: #9fdcff; stroke: #4a90c0; stroke-width: 1.5; }
.clippy .face-glitch { animation: d6-glitch 0.15s steps(2) infinite; }
/* Outfits and props. */
.clippy .o-tux rect { fill: #1e1a2a; } .clippy .o-tux .o-band { fill: var(--pink); }
.clippy .o-bow path, .clippy .o-bow circle { fill: #1e1a2a; }
.clippy .o-shades rect { fill: #1e1a2a; } .clippy .o-shades .o-frame { stroke: #1e1a2a; stroke-width: 4; fill: none; }
.clippy .o-rose circle { fill: #e0245e; } .clippy .o-rose .o-petal { fill: #ff4f86; } .clippy .o-rose .o-stem { stroke: #2f9e5b; stroke-width: 4; fill: none; }
.clippy .o-crown .f0 { fill: #ff8fc7; } .clippy .o-crown .f1 { fill: #fff27a; } .clippy .o-crown .f2 { fill: #9fd4ff; } .clippy .o-crown .fc { fill: #ffb347; }
.clippy .o-strap { stroke: #3a6fd8; stroke-width: 5; fill: none; }
.clippy .o-badge { fill: #fff; stroke: #3a6fd8; stroke-width: 3; }
.clippy .o-badge-t { font: 700 10px sans-serif; text-anchor: middle; fill: #1e1a2a; }
.clippy .o-badge-s { font: 6px sans-serif; text-anchor: middle; fill: #555; }
.clippy .p-doc rect { fill: #ffb3d6; stroke: #c2407e; stroke-width: 3; }
.clippy .p-doc .p-doc-l { stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.clippy .p-doc .p-doc-h { fill: #fff; }
.clippy .p-ring circle { fill: none; stroke: var(--gold); stroke-width: 6; }
.clippy .p-ring .p-spark { fill: #fff; animation: d6-led 0.8s steps(2) infinite; }
.clippy.small { filter: none; animation: none; }
/* The staple, at the next table. */
.d6-staple { position: absolute; right: 2%; bottom: 4%; width: 52px; animation: d6-sway 3s ease-in-out infinite; }
.d6-staple[hidden] { display: none; }
.staple .s-wire { fill: none; stroke: #8a94a6; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.staple circle { fill: #1e1a2a; }
.staple .s-mouth { stroke: #1e1a2a; stroke-width: 2.5; stroke-linecap: round; }

/* The dialogue box. */
.d6-box {
  flex: none; position: relative; min-height: 118px; box-sizing: border-box; margin-top: 8px;
  padding: 22px 18px 16px; border-radius: 22px; border: 3px solid var(--pink-2);
  background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(255,240,248,0.96));
  box-shadow: 0 8px 24px rgba(120,20,80,0.28), inset 0 0 0 3px #fff;
  transform: rotate(calc(var(--awk) * -0.6deg));
}
.d6-box[hidden] { display: none; }
.d6-box:focus { outline: none; }
.d6-name {
  position: absolute; top: -15px; left: 16px; padding: 3px 14px; border-radius: 999px;
  background: linear-gradient(90deg, var(--pink), var(--lilac)); color: #fff; font-weight: 800; font-size: 14px;
  letter-spacing: 0.03em; box-shadow: 0 3px 8px rgba(120,20,80,0.3);
}
.d6-name[hidden] { display: none; }
.d6-text { margin: 0; font-size: 17px; min-height: 2.9em; white-space: pre-wrap; }
.d6-box[data-who="system"] .d6-text { font-style: italic; color: #7a4a70; }
.d6-box[data-who="you"] { border-color: #c9b6ff; background: linear-gradient(180deg, #fbf8ff, #efe8ff); }
.d6-box[data-who="you"] .d6-name { left: auto; right: 16px; background: #8a6fd8; }
.d6-box[data-who="staple"] { border-color: #b9c0cc; background: linear-gradient(180deg, #f6f8fb, #e6eaf0); }
.d6-box[data-who="staple"] .d6-name { background: #6b7280; }
.d6-box[data-who="staple"] .d6-text { font-family: "Courier New", monospace; letter-spacing: 0.02em; }
.d6-box[data-who="it"] .d6-name { background: #00607a; }
.d6-box[data-who="v_sense"] { border-color: #8fd6c0; background: linear-gradient(180deg, #f4fffb, #e2f6ef); }
.d6-box[data-who="v_sense"] .d6-name { background: #2a8a6f; }
.d6-box[data-who="v_sense"] .d6-text, .d6-box[data-who="v_allow"] .d6-text { font-style: italic; }
.d6-box[data-who="v_allow"] { border-color: #9fbfff; background: linear-gradient(180deg, #f6f9ff, #e4ecff); }
.d6-box[data-who="v_allow"] .d6-name { background: #1a5fb4; }
.d6-next { position: absolute; right: 16px; bottom: 10px; width: 0; height: 0; border: 7px solid transparent; border-top: 9px solid var(--pink); border-bottom: 0; opacity: 0; }
.d6-box.more:not(.typing) .d6-next { opacity: 1; animation: d6-bounce 0.8s ease-in-out infinite; }
@keyframes d6-bounce { 50% { transform: translateY(4px); } }

/* The choices. */
.d6-choices { flex: none; display: flex; flex-direction: column; gap: 8px; }
.d6-choices[hidden] { display: none; }
.d6-choice {
  min-height: 48px; padding: 10px 16px; border-radius: 16px; text-align: left; font-size: 16px; font-weight: 600;
  background: rgba(255,255,255,0.95); border: 2px solid var(--pink-2); color: var(--ink); box-shadow: 0 3px 10px rgba(120,20,80,0.18);
  animation: d6-pop 0.25s ease-out backwards;
}
.d6-choice:nth-child(2) { animation-delay: 0.05s; } .d6-choice:nth-child(3) { animation-delay: 0.1s; } .d6-choice:nth-child(4) { animation-delay: 0.15s; } .d6-choice:nth-child(5) { animation-delay: 0.2s; }
.d6-choice:active { transform: scale(0.98); background: var(--pink-3); }
/* The way out looks like the real world: plain, sober, a little outside the date. */
.d6-choice.stop { background: #2e2a3a; color: #f2eef8; border: 2px solid #2e2a3a; box-shadow: 0 3px 10px rgba(0,0,0,0.3); font-weight: 700; }
.d6-choice.stop:active { background: #45405a; }
@keyframes d6-pop { from { transform: translateY(8px); opacity: 0; } }

/* ---------- the panels: setup, CAPTCHA, permission prompts ---------- */
.d6-panel { flex: none; cursor: default; }
.d6-panel[hidden] { display: none; }
.d6-setup-head { text-align: center; margin-bottom: 8px; }
.d6-step { display: inline-block; padding: 2px 10px; border-radius: 999px; background: #fff; color: var(--pink); font-weight: 800; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.d6-setup-head h2 { margin: 6px 0 0; font-size: 18px; line-height: 1.25; color: var(--ink); text-shadow: 0 1px 0 #fff; }
.d6-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.d6-cards[data-kind="outfit"] { grid-template-columns: repeat(3, 1fr); }
.d6-card {
  display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left;
  min-height: 64px; padding: 8px; border-radius: 16px; background: rgba(255,255,255,0.92); border: 2px solid var(--pink-2);
  box-shadow: 0 3px 10px rgba(120,20,80,0.15);
}
.d6-card > svg, .d6-card > .d6-swatch { grid-row: 1 / 3; width: 40px; height: 52px; }
.d6-card b { font-size: 14px; line-height: 1.15; }
.d6-card span { font-size: 11px; line-height: 1.2; color: #8a5a80; }
.d6-cards[data-kind="outfit"] .d6-card { grid-template-columns: 1fr; grid-template-rows: auto auto; justify-items: center; text-align: center; padding: 6px 4px; }
.d6-cards[data-kind="outfit"] .d6-card > svg { grid-row: auto; width: 36px; height: 46px; }
.d6-cards[data-kind="outfit"] .d6-card span { display: none; }
.d6-card[aria-pressed="true"] { border-color: var(--pink); background: #fff; box-shadow: 0 0 0 3px var(--pink-3), 0 6px 16px rgba(255,80,160,0.35); transform: translateY(-2px); }
.d6-swatch { display: block; border-radius: 10px; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
.d6-swatch[data-venue="server"] { background: radial-gradient(circle at 30% 70%, #ffb347 0 6%, transparent 8%), linear-gradient(180deg, #120c26, #4a1f3a); }
.d6-swatch[data-venue="mine"] { background: radial-gradient(circle at 50% 70%, #fff3c4 0 18%, transparent 20%), linear-gradient(180deg, #5b3a8a, #ff7aa8 50%, #ffb36b); }
.d6-swatch[data-venue="trombone"] { background: repeating-linear-gradient(45deg, #fff 0 5px, #ff9cc8 5px 10px); }
.d6-swatch[data-venue="moon"] { background: radial-gradient(circle at 70% 25%, #6fb6ff 0 14%, transparent 16%), linear-gradient(180deg, #05040c 60%, #bdb8c8 60%); }
.date .d6-ok {
  display: block; width: 100%; margin-top: 10px; min-height: 52px; border-radius: 18px; border: 0; font-size: 17px; font-weight: 800; letter-spacing: 0.02em;
  background: linear-gradient(90deg, var(--pink), var(--lilac)); color: #fff; box-shadow: 0 6px 16px rgba(255,80,160,0.4);
}
.date .d6-ok:disabled { background: rgba(255,255,255,0.7); color: #b08aa8; box-shadow: none; }

/* The CAPTCHA: a familiar box, slightly too pink. */
.d6-captcha { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px rgba(60,10,50,0.35); border: 1px solid #e3d0dc; }
.d6-captcha-head { background: linear-gradient(90deg, #ff6fae, #ff8fc7); color: #fff; padding: 12px 14px; font-size: 17px; line-height: 1.25; }
.d6-captcha-head b { display: block; font-size: 22px; }
.d6-captcha-head span { display: block; font-size: 12px; opacity: 0.9; margin-top: 2px; }
.d6-squares { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 6px; }
.d6-sq { position: relative; aspect-ratio: 1.15; border: 0; border-radius: 4px; background: linear-gradient(160deg, #e8e4ef, #cfc8db); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px; }
.d6-sq svg { width: 46%; height: 46%; color: #5b4e78; }
.d6-sq span { font-size: 11px; color: #5b4e78; }
.d6-sq[aria-pressed="true"] { transform: scale(0.88); box-shadow: 0 0 0 3px var(--pink); }
.d6-sq[aria-pressed="true"]::after { content: "\2713"; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--pink); color: #fff; font-size: 13px; line-height: 20px; text-align: center; }
.d6-captcha-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 8px 8px; }
.date .d6-captcha-foot .d6-ok { width: auto; min-width: 120px; margin: 0; }
.d6-captcha-brand { font-size: 11px; color: #a08aa0; font-weight: 700; }

/* Permission prompts, in pink now. */
.d6-prompt { background: #fff; border-radius: 20px; padding: 14px; border: 3px solid var(--pink-2); box-shadow: 0 10px 30px rgba(60,10,50,0.3); margin-bottom: 8px; }
.d6-prompt-head { display: flex; align-items: center; gap: 10px; }
.d6-prompt-heart { font-size: 28px; color: var(--pink); }
.d6-prompt-head b { display: block; font-size: 17px; }
.d6-prompt-head span { font-size: 13px; color: #8a5a80; }
.d6-tool { margin: 10px 0; padding: 8px 12px; border-radius: 12px; background: var(--pink-3); font-size: 13px; }
.d6-tool > b { font-family: "Courier New", monospace; }
.d6-tool dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 6px 0 0; }
.d6-tool dt { color: #8a5a80; } .d6-tool dd { margin: 0; font-weight: 600; }
.d6-prompt-acts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.d6-prompt-acts button { min-height: 48px; border-radius: 14px; border: 2px solid var(--pink-2); background: #fff; font-weight: 700; font-size: 14px; padding: 4px; }
.d6-prompt-acts button:active { background: var(--pink-3); }

/* Setup leaves more room for the cards. */
.date.setup .d6-stage { min-height: 90px; }

/* The act 2 bar has to show up on pink as well as in the dark. */
body[data-phase="6"] .stage-btn { background: rgba(58,31,58,0.45); color: #fff; }

/* Paused: everything holds its breath. */
.date.paused .d6-main { filter: saturate(0.4) brightness(0.85); }

/* This is silly: the stamp, on the way to level 7. */
.d6-stamp { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: rgba(236,232,240,0.9); animation: d6-fade 0.6s ease-out; }
.d6-stamp[hidden] { display: none; }
.d6-stamp p { margin: 0; font-size: 16px; color: #3a3050; }
.d6-stamp-ink, .drama.d6-silly .d6-stamp-ink {
  font: 900 clamp(26px, 8.5vw, 64px)/1 Impact, "Arial Black", sans-serif; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.04em; color: #d22a4a;
  border: 6px solid #d22a4a; border-radius: 10px; padding: 10px 16px; transform: rotate(-9deg);
  mix-blend-mode: multiply; animation: d6-stamped 0.35s cubic-bezier(.2,1.6,.5,1) backwards 0.3s;
}
@keyframes d6-stamped { from { transform: rotate(-9deg) scale(2.6); opacity: 0; } }
@keyframes d6-fade { from { opacity: 0; } }

/* ---------- the endings' screens ---------- */
.drama.d6-silly { background: linear-gradient(180deg, #f2eff5, #d9d2e0); color: #3a3050; }
.drama .d6-drama-sub { margin: 18px 0 0; font-size: 17px; text-align: center; font-family: ui-rounded, "Nunito", "Trebuchet MS", sans-serif; }
.drama.d6-silly .tap, .drama.d6-friend .tap { color: #6a5f80; }
.drama.d6-ever { background: linear-gradient(180deg, #fff6fb, #ffd6ec 55%, #ffb3d6); color: #8a1f5a; }
.d6-script { margin: 0; font: italic 400 46px/1.1 "Brush Script MT", "Segoe Script", "Snell Roundhand", cursive; text-align: center; text-shadow: 0 2px 0 #fff; animation: d6-fade 2s ease-out; position: relative; }
.d6-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.d6-confetti i { position: absolute; top: -40px; width: 22px; height: 22px; animation: d6-fall 4s linear infinite; }
.d6-confetti svg { width: 100%; height: 100%; }
@keyframes d6-fall { to { transform: translateY(110vh) rotate(540deg); } }
.drama.d6-ever .tap { color: #8a1f5a; position: relative; }
.drama.d6-unsub { background: #f6f6f8; color: #222; font-family: system-ui, sans-serif; }
.d6-mail { width: min(360px, 100%); background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); overflow: hidden; }
.d6-mail-head { padding: 14px; border-bottom: 1px solid #eee; }
.d6-mail-head b { display: block; font-size: 16px; }
.d6-mail-head span { font-size: 13px; color: #666; }
.d6-mail ul { list-style: none; margin: 0; padding: 0; }
.d6-mail li { display: grid; grid-template-columns: 20px 56px 1fr; gap: 8px; align-items: center; padding: 9px 14px; border-bottom: 1px solid #f0f0f0; font-size: 14px; opacity: 0; animation: d6-in 0.3s ease-out forwards; }
.d6-mail li svg { width: 18px; height: 18px; color: #ff6fae; }
.d6-mail li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes d6-in { from { transform: translateY(-6px); opacity: 0; } to { opacity: 1; } }
.drama.d6-unsub .tap { color: #888; }
.drama.d6-friend { background: linear-gradient(180deg, #e9e4f5, #cfc6e6); color: #3a3050; }
.d6-folder { width: 140px; fill: #ffd27a; stroke: #c99a3a; stroke-width: 3; animation: d6-stamped 0.5s ease-out backwards 0.3s; }
.d6-folder-name { margin: 6px 0 0; font: 700 20px/1 system-ui, sans-serif; }
.drama.d6-third { background: radial-gradient(ellipse at 50% 30%, #2a2050, #07050f 70%); color: #e8e0ff; }
.d6-away { width: 70px; animation: d6-leave 6s ease-in forwards; margin-bottom: 30px; }
@keyframes d6-leave { to { transform: translate(40vw, -30vh) scale(0.2) rotate(30deg); opacity: 0.2; } }
.drama.d6-third .staple .s-wire { stroke: #c8d0e0; } .drama.d6-third .staple circle { fill: #c8d0e0; } .drama.d6-third .staple .s-mouth { stroke: #c8d0e0; }
.drama.d6-third .tap { color: #a99ccc; }

/* ---------- bigger screens ---------- */
@media (min-width: 700px) {
  .d6-main { padding-top: 16px; padding-bottom: 20px; }
  .d6-text { font-size: 19px; }
  .d6-box { padding: 26px 26px 20px; min-height: 130px; }
  .d6-choices { flex-direction: row; flex-wrap: wrap; }
  .d6-choice { flex: 1 1 calc(50% - 8px); }
  .d6-cards { grid-template-columns: repeat(4, 1fr); }
  .d6-cards[data-kind="outfit"] { grid-template-columns: repeat(5, 1fr); }
  .d6-cards[data-kind="outfit"] .d6-card span { display: block; }
  .d6-panel { width: 100%; max-width: 640px; align-self: center; }
  .d6-captcha, .d6-prompt { max-width: 420px; margin-left: auto; margin-right: auto; }
}
/* Short screens (phones in landscape): a smaller box. */
@media (max-height: 560px) {
  .d6-box { min-height: 90px; padding-top: 18px; }
  .d6-text { min-height: 0; }
}