/*
 * Look C, Send a Little Mystery. Bright consumer play: electric blue, yellow, pink and mint,
 * chunky shapes and hard black outlines.
 */

html[data-skin="mystery"] {
  --ground: #FFFDF7;
  --surface: #F1F2FF;
  --surface-2: #FFFFFF;
  --ink: #111111;
  --muted: #4A4A55;
  --line: #111111;
  --accent: #1F3BFF;
  --on-accent: #FFFFFF;
  --deck: #1F3BFF;
  --deck-ink: #FFFFFF;
  --deck-muted: #C9D0FF;
  --deck-line: #4A60FF;
  --key: #FFD23F;
  --key-ink: #111111;
  --key-ring: #FF8FC7;
  --mark: #8E9BFF;
  --mark-hot: #FFD23F;
  --radius: 30px;
  --radius-sm: 16px;
  --font-ui: "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --backdrop: #8AE6BF;
}

html[data-skin="mystery"][data-theme="dark"] {
  --ground: #0E0F1A;
  --surface: #1A1C2E;
  --surface-2: #14162A;
  --ink: #FFFDF7;
  --muted: #B6B8CC;
  --line: #3A3D5C;
  --accent: #6C7FFF;
  --on-accent: #0A0B14;
  --deck: #1F3BFF;
  --backdrop: #07080F;
}

html[data-skin="mystery"] .brand { font-size: 22px; letter-spacing: -.04em; }
html[data-skin="mystery"] .brand-mark i { background: #FF8FC7; width: 8px; height: 8px; }
html[data-skin="mystery"] .brand-mark b { background: var(--accent); height: 8px; width: 18px; }

html[data-skin="mystery"] .field, html[data-skin="mystery"] .modes, html[data-skin="mystery"] .styles,
html[data-skin="mystery"] .chip, html[data-skin="mystery"] .act, html[data-skin="mystery"] .icon-btn,
html[data-skin="mystery"] .skin-btn { border-width: 2px; }
html[data-skin="mystery"] .mode, html[data-skin="mystery"] .seg, html[data-skin="mystery"] .chip, html[data-skin="mystery"] .act { font-family: var(--font-display); font-weight: 700; }
html[data-skin="mystery"] .act-main { box-shadow: 0 4px 0 #111111; border-color: #111111; margin-bottom: 4px; }
html[data-skin="mystery"] .act-main:active { transform: translateY(3px); box-shadow: 0 1px 0 #111111; }
html[data-skin="mystery"][data-theme="dark"] .act-main, html[data-skin="mystery"][data-theme="dark"] .chip[aria-pressed="true"] { border-color: #FFFDF7; }
html[data-skin="mystery"][data-theme="dark"] .act-main { box-shadow: 0 4px 0 #FFFDF7; }
html[data-skin="mystery"] .result-words[data-revealed="true"] { font-size: 20px; letter-spacing: -.02em; }

/* The deck is the blue hero card. The key is a big yellow button with a pink ring. */
html[data-skin="mystery"] .deck { border: 2px solid #111111; }
html[data-skin="mystery"] .tape i[data-received] { background: #FFFFFF; }
html[data-skin="mystery"] .tape i { height: 9px; border-radius: 5px; }
html[data-skin="mystery"] .tape i.dit { width: 9px; }
html[data-skin="mystery"] .tape i.dah { width: 25px; }
html[data-skin="mystery"] .key-ring { background: conic-gradient(#FF8FC7 calc(var(--p) * 360deg), #111111 0); }
html[data-skin="mystery"] .key-cap { box-shadow: inset 0 -12px 0 rgb(0 0 0 / .14), 0 8px 0 #111111; }
html[data-skin="mystery"] .key:active .key-cap, html[data-skin="mystery"] .key.is-down .key-cap { transform: translateY(5px); box-shadow: inset 0 -6px 0 rgb(0 0 0 / .14), 0 3px 0 #111111; }
html[data-skin="mystery"] .lamp { background: rgb(0 0 0 / .2); }
html[data-skin="mystery"] .lamp.is-on { background: #FF8FC7; box-shadow: 0 0 0 4px rgb(255 143 199 / .45); }
html[data-skin="mystery"] .key-label { font-family: var(--font-display); font-size: 14px; letter-spacing: .06em; opacity: 1; }
html[data-skin="mystery"] .deck-btn { background: #FFFFFF; color: #111111; border: 2px solid #111111; font-family: var(--font-display); font-weight: 700; }
html[data-skin="mystery"] .deck-mode[aria-pressed="true"] { background: #FF8FC7; }
html[data-skin="mystery"] .scope path.live { stroke: #FFFFFF; }

html[data-skin="mystery"] { --select: #1F3BFF; --select-ink: #FFFFFF; --select-ring: #FFD23F; }
html[data-skin="mystery"] .chip[aria-pressed="true"] { background: #FFD23F; color: #111111; border-color: #111111; box-shadow: 0 3px 0 #111111; }