/* devil.css · Torchroom · XV, The Devil · "Velvet after midnight"
   Extends arcana.css: overrides its --arc-* tokens on [data-brand="the-devil"], adds the --brand-*
   extras arcana-brand.css reads, then the signature: a followspot that swings across black velvet,
   a small Monoton neon sign that buzzes and stutters, and brass-and-neon buttons. Fonts are SIL OFL. */
/* fonts:begin DM Serif Display, Josefin Sans, Monoton */
@font-face { font-family:"DM Serif Display"; font-style:italic; font-weight:400; font-display:swap; src:url("../../fonts/brands/dm-serif-display-italic-400.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"DM Serif Display"; font-style:normal; font-weight:400; font-display:swap; src:url("../../fonts/brands/dm-serif-display-normal-400.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Josefin Sans"; font-style:normal; font-weight:300 700; font-display:swap; src:url("../../fonts/brands/josefin-sans-normal-300-700.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Monoton"; font-style:normal; font-weight:400; font-display:swap; src:url("../../fonts/brands/monoton-normal-400.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* fonts:end */

[data-brand="the-devil"] {
  --arc-paper: #0c0709;
  --arc-surface: #150a0e;
  --arc-wash: #1e0e14;
  --arc-ink: #f4e7d1;
  --arc-muted: #bfae9c;
  --arc-line: #3a1e26;
  --arc-accent: #ff3eb5;
  --arc-on-accent: #0c0709;
  --arc-focus: #ffd9f0;
  --arc-display: "DM Serif Display", "Bodoni 72", Didot, Georgia, serif;
  --arc-body: "Josefin Sans", "Avenir Next", Futura, "Segoe UI", sans-serif;
  --arc-radius: 4px;
  --brand-mono: "Josefin Sans", "Avenir Next", Futura, "Segoe UI", sans-serif;
  --brand-accent-2: #cfa85e;
  --brand-display-weight: 400;
  --brand-track: -.01em;
  --brand-title-lh: .95;
  --brand-button-radius: 999px;
  --brand-enter: dvl-spot;
  --brand-ease: cubic-bezier(.22, .7, .2, 1);
  --brand-texture: repeating-linear-gradient(90deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 5px), radial-gradient(90% 60% at 50% -10%, rgba(78, 13, 24, .55), transparent 70%);
  --brand-bezel: #150a0e;
  --brand-bezel-edge: #8f6f36;
  --brand-bezel-ink: #cfa85e;
  --brand-glow: rgba(255, 62, 181, .55);
  --brand-wallpaper:
    radial-gradient(28% 55% at 50% 38%, rgba(255, 217, 240, .3), transparent 72%),
    radial-gradient(60% 18% at 50% 100%, rgba(255, 62, 181, .35), transparent 70%),
    repeating-linear-gradient(90deg, #1e0e14 0, #4e0d18 22px, #1e0e14 44px),
    #0c0709;
}

/* Signature: the followspot, the neon sign, velvet buttons with a neon heart. */
[data-brand="the-devil"] .abr-head { overflow: clip; }
[data-brand="the-devil"] .abr-head > .abr-shell { position: relative; z-index: 1; }
[data-brand="the-devil"] .abr-head::before {
  content: ""; position: absolute; z-index: 0; inset-block: 0; inset-inline-start: 0; inline-size: 55%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 217, 240, .13), rgba(207, 168, 94, .05) 60%, transparent);
  animation: dvl-sweep 16s ease-in-out infinite alternate;
}
[data-brand="the-devil"] .abr-head::after {
  content: "Open late"; content: "Open late" / ""; position: absolute; z-index: 2;
  inset-block-start: clamp(1.75rem, 4.5vw, 3.5rem); inset-inline-end: max(1.25rem, calc((100% - 76rem) / 2));
  font: 400 clamp(.95rem, .7rem + .8vw, 1.35rem)/1 "Monoton", var(--arc-display); letter-spacing: .06em;
  color: #ffd9f0; text-shadow: 0 0 2px #fff, 0 0 8px #ff3eb5, 0 0 20px #ff3eb5, 0 0 42px rgba(255, 62, 181, .6);
  animation: dvl-flicker 8s linear infinite;
}
[data-brand="the-devil"] .abr-title__word { text-shadow: 0 0 .6em rgba(255, 62, 181, .22); }
[data-brand="the-devil"] .abr-tagline { font-style: italic; }
[data-brand="the-devil"] .abr-card__num { box-shadow: 0 0 10px rgba(255, 62, 181, .6), inset 0 0 8px rgba(255, 62, 181, .4); }
[data-brand="the-devil"] .abr-button { text-transform: uppercase; letter-spacing: .16em; font-size: .82rem; padding-block-start: .95rem; box-shadow: 0 0 18px rgba(255, 62, 181, .4); }
[data-brand="the-devil"] .abr-button[data-kind="ghost"] { border-color: var(--brand-accent-2); color: var(--brand-accent-2); box-shadow: none; }
[data-brand="the-devil"] .abr-tier { border-color: #5a4424; background: linear-gradient(180deg, rgba(207, 168, 94, .07), transparent 40%), var(--arc-paper); }
[data-brand="the-devil"] .abr-tier[data-kind="custom"] { border-color: var(--arc-accent); box-shadow: 0 0 24px -6px var(--brand-glow), inset 0 0 22px -12px var(--brand-glow); }
[data-brand="the-devil"].abr-tile .abr-tile__word { font-style: italic; }
@media (hover: hover) {
  [data-brand="the-devil"] .abr-button:hover { box-shadow: 0 0 34px rgba(255, 62, 181, .75); }
  [data-brand="the-devil"].abr-tile:hover { animation: dvl-buzz .9s steps(1) both; }
}
@media (max-width: 36em) { [data-brand="the-devil"] .abr-head::after { display: none; } }

@keyframes dvl-spot { from { opacity: 0; transform: scale(1.03); filter: brightness(.15) saturate(0); } to { opacity: 1; transform: none; filter: none; } }
@keyframes dvl-sweep { from { transform: translateX(-25%); } to { transform: translateX(105%); } }
@keyframes dvl-flicker { 0%, 17%, 21%, 24%, 61%, 64%, 100% { opacity: 1; } 19%, 22.5%, 62.5% { opacity: .3; text-shadow: none; } }
@keyframes dvl-buzz { 0%, 30%, 55% { box-shadow: 0 0 0 1px var(--arc-accent), 0 0 30px -4px var(--brand-glow); } 15%, 45% { box-shadow: 0 0 0 1px var(--arc-line); } 100% { box-shadow: 0 0 0 1px var(--arc-accent), 0 24px 50px -20px var(--brand-glow); } }