/* ───────────────────────────────────────────────────────────────
   Moroccan Mafia
   Lacquer and brass by day, cold blue by night. The plaque frame
   is lifted from the role-card art so the UI and the cards read
   as one object.
   ─────────────────────────────────────────────────────────────── */

:root {
  --lacquer:    #100C07;   /* warm black of the card plaques      */
  --lacquer-up: #1A130C;   /* raised plaque face                  */
  --night:      #060A12;   /* the cold blue the city turns at night */
  --brass:      #C9A227;
  --brass-lit:  #F0D98A;
  --brass-dim:  rgba(201,162,39,.30);
  --henna:      #8C2F1B;
  --blood:      #C1121F;
  --blood-lit:  #E23B3B;
  --plaster:    #E8DCC3;
  --ash:        #8C8578;
  --tarnish:    #4A463F;

  --ar: 'Amiri', 'Noto Naskh Arabic', 'Geeza Pro', serif;
  --display: 'Bodoni Moda', 'Didot', Georgia, serif;
  --ui: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --rule: 1px solid var(--brass-dim);
  --gut: clamp(16px, 4vw, 32px);
}

* { box-sizing: border-box; }

/* An author `display` beats the UA sheet's [hidden] rule, so state it once
   here rather than chasing it per component. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--lacquer);
  color: var(--plaster);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background-color 1.8s ease;
  overflow-x: hidden;
}

body.night { background: var(--night); }

/* The lamplight goes out: a vignette closes in from the edges while
   the page itself cools. The centre stays legible on purpose. */
.veil {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.8s ease;
  background:
    radial-gradient(ellipse 120% 80% at 50% 38%,
      rgba(6,10,18,0) 0%, rgba(5,8,16,.55) 58%,
      rgba(3,5,11,.90) 82%, rgba(2,3,7,.98) 100%);
}
body.night .veil { opacity: 1; }

/* paper tooth, so the flat blacks are not plastic */
.grain {
  position: fixed;
  inset: 0;
  z-index: 41;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brass-lit); outline-offset: 2px; }

/* ── buttons ───────────────────────────────────────────────── */

.btn {
  border: 1px solid var(--brass);
  background: transparent;
  color: var(--brass-lit);
  padding: .7rem 1.35rem;
  border-radius: 2px;
  font-weight: 500;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s;
}
.btn:hover:not(:disabled) { background: rgba(201,162,39,.12); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.btn-gold {
  background: linear-gradient(175deg, var(--brass-lit), var(--brass));
  color: #1A130C;
  border-color: var(--brass-lit);
  font-weight: 600;
}
.btn-gold:hover:not(:disabled) { filter: brightness(1.08); background: linear-gradient(175deg, var(--brass-lit), var(--brass)); }

.btn-blood {
  background: linear-gradient(175deg, var(--blood-lit), var(--blood));
  border-color: var(--blood-lit);
  color: #1A0405;
  font-weight: 600;
}
.btn-ghost { border-color: var(--tarnish); color: var(--ash); }
.btn-ghost:hover:not(:disabled) { border-color: var(--brass-dim); color: var(--plaster); background: transparent; }
.btn-small { padding: .5rem .9rem; font-size: .9rem; }

/* ── entry screen ──────────────────────────────────────────── */

.gate {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: var(--gut);
}
.gate[hidden] { display: none; }

.gate-card {
  width: 100%;
  max-width: 460px;
  background: linear-gradient(165deg, var(--lacquer-up), #0B0805);
  border: 1px solid var(--brass-dim);
  border-radius: 2px;
  padding: clamp(24px, 6vw, 44px);
  position: relative;
}
.gate-card::before {   /* the inset second rule, straight off the cards */
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(201,162,39,.16);
  pointer-events: none;
}

.wordmark { margin: 0 0 1.1rem; text-align: center; }
.wordmark .ar {
  display: block;
  font-family: var(--ar);
  font-weight: 700;
  direction: rtl;
  font-size: clamp(2.4rem, 11vw, 3.4rem);
  line-height: 1.25;
  background: linear-gradient(178deg, var(--brass-lit) 8%, var(--brass) 52%, #8A6E18 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wordmark .en {
  display: block;
  font-family: var(--display);
  font-size: clamp(.95rem, 3.4vw, 1.15rem);
  color: var(--ash);
  margin-top: .3rem;
}

.lede {
  margin: 0 0 1.8rem;
  color: var(--ash);
  font-size: .93rem;
  line-height: 1.65;
  max-width: 44ch;
  text-align: center;
  margin-inline: auto;
}

.gate-form { display: grid; gap: 1rem; }
.field { display: grid; gap: .35rem; }
.field > span { font-size: .78rem; color: var(--ash); }
.field input {
  background: rgba(0,0,0,.45);
  border: 1px solid var(--tarnish);
  border-radius: 2px;
  padding: .72rem .85rem;
  color: var(--plaster);
  transition: border-color .18s;
}
.field input:focus { border-color: var(--brass); outline: none; }
#codeInput { text-transform: uppercase; letter-spacing: .32em; font-family: var(--display); }

.gate-actions { display: grid; gap: .6rem; margin-top: .4rem; }

/* ── game frame ────────────────────────────────────────────── */

.game {
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(12px, 3vw, 22px) var(--gut) 3rem;
  transition: filter 1.8s ease;
}
.game[hidden] { display: none; }
body.night .game { filter: brightness(.86) saturate(.72); }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding-bottom: .8rem;
  border-bottom: var(--rule);
}

.code-chip, .you-chip {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.you-chip { cursor: pointer; }
.you-chip .mask { font-family: var(--ui); font-size: .8rem; color: var(--tarnish); letter-spacing: .2em; }
.chip-label { font-size: .7rem; color: var(--ash); }
.code-chip b {
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: .22em;
  color: var(--brass-lit);
}
.you-chip b { font-family: var(--ar); font-size: 1.1rem; color: var(--brass); }
.you-chip.dead b { color: var(--tarnish); text-decoration: line-through; }

.clock {
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  color: var(--plaster);
  opacity: .8;
}
.clock.urgent { color: var(--blood-lit); opacity: 1; }

/* ── the bloody chapter title ──────────────────────────────── */

.phase-head { text-align: center; padding: clamp(1.4rem, 5vw, 2.4rem) 0 1.1rem; }

.phase-ar {
  margin: 0;
  direction: rtl;
  font-family: var(--ar);
  font-weight: 700;
  font-size: clamp(2.1rem, 9vw, 3.6rem);
  line-height: 1.2;
  background: linear-gradient(176deg, #E2384A 0%, var(--blood) 45%, #720A12 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(193,18,31,.38)) drop-shadow(0 1px 0 rgba(0,0,0,.8));
}
.phase-en {
  margin: .45rem 0 0;
  font-family: var(--display);
  font-size: clamp(.85rem, 3vw, 1rem);
  color: var(--ash);
}
.phase-head::after {   /* chapter mark: a hairline broken by a lozenge */
  content: "";
  display: block;
  width: min(220px, 60%);
  height: 8px;
  margin: 1.1rem auto 0;
  background:
    linear-gradient(var(--brass-dim), var(--brass-dim)) left center / calc(50% - 9px) 1px no-repeat,
    linear-gradient(var(--brass-dim), var(--brass-dim)) right center / calc(50% - 9px) 1px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M4 0 8 4 4 8 0 4Z' fill='%23C9A227'/%3E%3C/svg%3E") center / 8px 8px no-repeat;
}

/* ── stage: whatever this player has to do right now ───────── */

.stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; justify-items: center; }

.panel {
  width: 100%;
  background: linear-gradient(165deg, var(--lacquer-up), #0B0805);
  border: 1px solid var(--brass-dim);
  border-radius: 2px;
  padding: clamp(16px, 4vw, 26px);
  position: relative;
  text-align: center;
}
.panel::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(201,162,39,.13);
  pointer-events: none;
}
/* at night the only warm thing left on screen is your own move */
body.night .panel.lit {
  box-shadow: 0 0 0 1px rgba(201,162,39,.35), 0 0 60px -12px rgba(201,162,39,.38);
  border-color: rgba(201,162,39,.5);
}

.panel h3 {
  margin: 0 0 .4rem;
  font-family: var(--ar);
  direction: rtl;
  font-size: clamp(1.3rem, 5vw, 1.7rem);
  font-weight: 700;
  color: var(--brass-lit);
}
.panel .sub { margin: 0; color: var(--ash); font-size: .9rem; }
.panel .sub + .sub { margin-top: .3rem; }
.panel-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.1rem; }

.big-ar {
  font-family: var(--ar);
  direction: rtl;
  font-size: clamp(1.5rem, 6vw, 2.1rem);
  font-weight: 700;
  color: var(--plaster);
  margin: .2rem 0;
}
.dead-note { color: var(--blood-lit); }
.saved-note { color: var(--brass-lit); }

/* role card */
.cardwrap { width: 100%; max-width: 520px; margin: 0 auto; }
.card-img {
  width: 100%;
  display: block;
  border: 1px solid var(--brass);
  border-radius: 2px;
}
.card-fallback {
  aspect-ratio: 1.88 / 1;
  display: grid;
  place-content: center;
  gap: .5rem;
  background:
    radial-gradient(circle at 30% 20%, rgba(201,162,39,.10), transparent 60%),
    linear-gradient(160deg, #191209, #0A0705);
  border: 1px solid var(--brass);
  border-radius: 2px;
  position: relative;
}
.card-fallback::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(201,162,39,.35);
}
.card-fallback svg { width: clamp(64px, 18vw, 96px); height: auto; justify-self: center; }
.card-fallback .nm {
  font-family: var(--ar);
  direction: rtl;
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  font-weight: 700;
  color: var(--brass-lit);
  text-align: center;
}

.sheikh-log { margin-top: 1rem; display: grid; gap: .4rem; text-align: left; }
.sheikh-log li {
  list-style: none;
  font-size: .88rem;
  border-left: 2px solid var(--brass-dim);
  padding-left: .6rem;
  color: var(--plaster);
}
.sheikh-log .yes { color: var(--blood-lit); font-weight: 600; }
.sheikh-log .no  { color: var(--ash); }

/* ── roster: small brass plaques ───────────────────────────── */

.roster-wrap { margin-top: 1.6rem; }
.roster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
}
@media (min-width: 560px) { .roster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 820px) { .roster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.tile {
  position: relative;
  aspect-ratio: 2.3 / 1;
  background: linear-gradient(160deg, #1A130C, #0B0805);
  border: 1px solid rgba(201,162,39,.45);
  border-radius: 2px;
  padding: .55rem .6rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: left;
  overflow: hidden;
  transition: border-color .18s, background-color .18s, transform .12s;
}
.tile::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(201,162,39,.15);
  pointer-events: none;
}
button.tile { cursor: pointer; }
button.tile:hover { border-color: var(--brass-lit); }
button.tile:active { transform: scale(.985); }

.tile .nm {
  font-family: var(--display);
  font-size: clamp(.95rem, 3.6vw, 1.15rem);
  font-weight: 700;
  color: var(--brass-lit);
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tile .meta { font-size: .7rem; color: var(--ash); min-height: 1.05em; }

.tile .mark {              /* top-right status glyph */
  position: absolute;
  top: .45rem;
  right: .55rem;
  font-size: .8rem;
  color: var(--brass);
  line-height: 1;
}
.tile .tally {
  position: absolute;
  top: .3rem;
  right: .45rem;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--blood-lit);
  line-height: 1;
}
.tile .host-dot { color: var(--brass-lit); }
.tile .off { color: var(--tarnish); }

.tile.dead {
  border-color: var(--tarnish);
  background: linear-gradient(160deg, #121110, #080807);
}
.tile.dead::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom right, transparent calc(50% - .5px), rgba(193,18,31,.5) 50%, transparent calc(50% + .5px)),
    linear-gradient(to bottom left,  transparent calc(50% - .5px), rgba(193,18,31,.5) 50%, transparent calc(50% + .5px));
}
.tile.dead .nm { color: var(--tarnish); }
.tile.dead .meta { color: var(--tarnish); }

.tile.you { border-color: var(--brass-lit); }
.tile.you .nm::after { content: " (you)"; font-size: .7em; color: var(--ash); font-weight: 400; }

.tile.picked { background: linear-gradient(160deg, #2A1D0C, #140D06); border-color: var(--brass-lit); }
.tile.picked.kill, .tile.picked.vote { border-color: var(--blood-lit); background: linear-gradient(160deg, #2A0E10, #140507); }
.tile.picked.investigate { border-color: var(--henna); background: linear-gradient(160deg, #2A1510, #140806); }
.tile.defender { border-color: var(--brass-lit); box-shadow: 0 0 0 1px var(--brass), 0 0 34px -10px rgba(201,162,39,.7); }

.skip-tile {
  grid-column: 1 / -1;
  aspect-ratio: auto;
  padding: .75rem;
  justify-content: center;
  text-align: center;
  border-style: dashed;
  border-color: var(--tarnish);
}
.skip-tile .nm { color: var(--ash); font-family: var(--ui); font-weight: 500; }
.skip-tile.picked { border-style: solid; border-color: var(--brass-lit); }

/* ── log + chat ────────────────────────────────────────────── */

.lower { margin-top: 1.8rem; border-top: var(--rule); padding-top: 1rem; }

.feed {
  max-height: 190px;
  overflow-y: auto;
  display: grid;
  gap: .42rem;
  font-size: .88rem;
  padding-right: .3rem;
}
.feed .line { color: var(--ash); }
.feed .line .who { color: var(--brass-lit); font-weight: 600; }
.feed .line.death { color: var(--blood-lit); }
.feed .line.win   { color: var(--brass-lit); font-weight: 600; }
.feed .line.ghost { color: #6C7C93; font-style: italic; }
.feed .line.mine .who { color: var(--brass-lit); }

.chatbar { display: flex; gap: .5rem; margin-top: .9rem; }
.chatbar input {
  flex: 1;
  min-width: 0;
  background: rgba(0,0,0,.45);
  border: 1px solid var(--tarnish);
  border-radius: 2px;
  padding: .6rem .8rem;
}
.chatbar input:focus { border-color: var(--brass); outline: none; }
.chatbar[hidden] { display: none; }

/* ── the full-bleed night / round card ─────────────────────── */

.banner {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #000;
  display: grid;
  place-items: center;
  animation: bannerIn .7s ease both;
}
.banner[hidden] { display: none; }
.banner.out { animation: bannerOut .9s ease both; }
/* The banner art is wide; a phone is tall. Show all of it, and fill the
   letterbox with a blurred copy of itself rather than cropping the title off. */
.banner-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.15);
  filter: blur(34px) brightness(.4) saturate(.8);
}
.banner-fg {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

@keyframes bannerIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes bannerOut { to { opacity: 0; } }

.banner-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: .3rem;
  text-align: center;
  background: rgba(3,5,10,.62);
  backdrop-filter: blur(2px);
}
.banner-text[hidden] { display: none; }
.banner-text .ar {
  font-family: var(--ar);
  direction: rtl;
  font-weight: 700;
  font-size: clamp(2.6rem, 13vw, 5.5rem);
  background: linear-gradient(176deg, #E2384A, var(--blood) 50%, #6B0910);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 26px rgba(193,18,31,.5));
}
.banner-text .en {
  font-family: var(--display);
  font-size: clamp(.9rem, 3.5vw, 1.2rem);
  color: rgba(232,220,195,.6);
}

/* ── toast ─────────────────────────────────────────────────── */

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 70;
  background: #1A0406;
  border: 1px solid var(--blood);
  color: #F3D9DB;
  padding: .65rem 1.1rem;
  border-radius: 2px;
  font-size: .9rem;
  max-width: calc(100vw - 32px);
  text-align: center;
}
.toast[hidden] { display: none; }

/* ── endgame ───────────────────────────────────────────────── */

.reveal-list { display: grid; gap: .35rem; margin: 1rem 0 0; padding: 0; text-align: left; }
.reveal-list li {
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px dotted var(--tarnish);
  padding: .3rem 0;
  font-size: .92rem;
}
.reveal-list .r { font-family: var(--ar); direction: rtl; color: var(--brass-lit); }
.reveal-list .r.mafia { color: var(--blood-lit); }

.outcome-ar {
  font-family: var(--ar);
  direction: rtl;
  font-size: clamp(2rem, 9vw, 3.2rem);
  font-weight: 700;
  margin: 0;
}
.outcome-ar.town  { color: var(--brass-lit); }
.outcome-ar.mafia { color: var(--blood-lit); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}