/* Storybook look: painted backgrounds, a title font, and painted panels and buttons.
   This file loads after style.css and changes only the look, not the layout. */

@font-face {
  font-family: 'Creepster';
  src: url('/fonts/creepster.woff2') format('woff2');
  font-display: swap;
}

:root {
  --ink: #1c1230;
  --panel-top: #51407f;
  --panel-bottom: #35275a;
  --panel-edge: #7a66b3;
  --gold: #ffb347;
  --gold-deep: #ef7a12;
  --slime: #8dff5c;
}

/* Backgrounds. The player page gets a dark layer on top, so the card stays easy to read. */
body { background: #0b0618; }
/* The painting is on a fixed layer behind the page. "background-attachment: fixed" on the body
   does not work on phones: there the picture scrolls and repeats. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(14, 8, 30, 0.8), rgba(14, 8, 30, 0.92)),
    url('/themes/halloween/bg/night.jpg') center / cover no-repeat;
}
body.host::before { content: none; }
/* The body must be as tall as the screen. If it is not, the painting repeats below it. */
body.host { min-height: 100vh; background: #0b0618 center / cover no-repeat; }
/* Each rule sets the full background. A rule with only the picture lets an older rule
   set the size and the repeat, and then the painting repeats on a large screen. */
body.host[data-theme="night"] { background: #0b0618 url('/themes/halloween/bg/night.jpg') center / cover no-repeat; }
body.host[data-theme="blood"] { background: #0b0618 url('/themes/halloween/bg/blood.jpg') center / cover no-repeat; }
body.host[data-theme="fog"] { background: #0b0618 url('/themes/halloween/bg/fog.jpg') center / cover no-repeat; }
body.host[data-theme="storm"] { background: #0b0618 url('/themes/halloween/bg/storm.jpg') center / cover no-repeat; }

/* Logo */
h1 { margin: 0; }
.logo {
  display: block;
  width: min(560px, 80vw);
  height: auto;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.6));
}
.wrap .logo { width: min(280px, 70%); margin: 0 auto 10px; }
.start { background: rgba(11, 6, 24, 0.35); }

/* Titles */
.lobby h2,
.settings h2,
.winner,
.flat .label {
  font-family: 'Creepster', system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
  -webkit-text-stroke: 1px var(--ink);
  text-shadow: 0 3px 0 var(--ink), 0 0 18px rgba(0, 0, 0, 0.85);
}
.lobby h2,
.settings h2,
.flat .label { color: var(--gold); }
.lobby h2 { font-size: 2.8rem; }
.flat .label { font-size: 3.6rem; }
.winner { color: var(--slime); font-size: 4.6rem; }

/* Panels */
.hud,
.last,
.banner,
.chip {
  background: linear-gradient(rgba(81, 64, 127, 0.95), rgba(53, 39, 90, 0.95));
  border: 3px solid var(--ink);
  box-shadow: inset 0 0 0 2px var(--panel-edge), 0 6px 0 rgba(0, 0, 0, 0.35);
}
.chip { border-width: 2px; box-shadow: inset 0 0 0 1px var(--panel-edge), 0 3px 0 rgba(0, 0, 0, 0.35); }
.banner.win { background: var(--slime); color: var(--ink); }

/* The join code sits on an orange plate, like a ticket. */
.code {
  display: inline-block;
  margin: 6px 0;
  padding: 0 12px 0 20px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: linear-gradient(var(--gold), var(--gold-deep));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 4px 0 var(--ink);
  font-family: 'Creepster', system-ui, sans-serif;
  font-size: 3.6rem;
  font-weight: 400;
  /* Dark letters on the light plate: people must read this code from far away. */
  color: var(--ink);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.35);
}

/* Big buttons */
button {
  font-family: 'Creepster', system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2a1740;
  border: 3px solid var(--ink);
  background: linear-gradient(var(--gold), var(--gold-deep));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 4px 0 var(--ink);
}
button:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 1px 0 var(--ink);
}
.bingo { font-size: 2rem; }

/* Small buttons stay in the plain font, so small text is easy to read. */
.hud .small,
.hud.tr .small,
.topline .small,
.settings .small {
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  border: 2px solid var(--ink);
  background: linear-gradient(#5d4a92, #40306c);
  box-shadow: inset 0 0 0 1px var(--panel-edge), 0 3px 0 var(--ink);
}

/* Card squares and avatar buttons */
.cell,
.avatar {
  font-family: system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  border: 2px solid var(--ink);
  background: linear-gradient(#3f3168, #2a1f4a);
  box-shadow: inset 0 0 0 1px #6b57a6;
}
.cell.marked {
  border-color: var(--ink);
  background: linear-gradient(var(--gold), var(--gold-deep));
  box-shadow: inset 0 0 0 2px #ffe2a8, 0 0 14px rgba(255, 122, 24, 0.8);
}
.cell:active:not(:disabled),
.avatar:active:not(:disabled) { box-shadow: inset 0 0 0 1px #6b57a6; }
.avatar[aria-checked="true"] {
  background: linear-gradient(var(--gold), var(--gold-deep));
  box-shadow: inset 0 0 0 2px #ffe2a8, 0 0 12px rgba(255, 122, 24, 0.8);
}

/* Form fields */
input,
select {
  border: 3px solid var(--ink);
  background: #1d1438;
  box-shadow: inset 0 0 0 1px var(--panel-edge);
}
.join label { font-weight: 700; text-shadow: 0 2px 0 var(--ink); }

/* Game mode: the goal line on the player page and the mode line on the host page */
.goal { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-weight: 700; text-shadow: 0 2px 0 var(--ink); }
.pattern { display: grid; grid-template-columns: repeat(5, 7px); gap: 2px; flex: none; }
.pattern i { width: 7px; height: 7px; border-radius: 2px; background: #3f3168; box-shadow: 0 0 0 1px var(--ink); }
.pattern i.on { background: var(--gold); }
.mode-label { font-size: 1rem; color: var(--gold); max-width: 240px; }
.bingo.ready { animation: ready 0.9s ease-in-out infinite; }
@keyframes ready {
  0%, 100% { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 4px 0 var(--ink), 0 0 0 rgba(141, 255, 92, 0); }
  50% { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 4px 0 var(--ink), 0 0 28px rgba(141, 255, 92, 0.95); }
}