:root {
  --bg: #22273a;
  --bg-panel: #2c3247;
  --bg-card: #363d56;
  --border: #4b5470;
  --text: #eef0f6;
  --text-dim: #a6acc0;
  --accent: #d8a13a;
  --accent-dim: #a9792a;
  --danger: #d86a4a;
  --ok: #5cb87a;
  --radius: 14px;
  --card-zoom: 1;
  --card-w: 15vmin;
  --bottom-bar-h: 6.5rem;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

#app {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

h1,
h2 {
  margin: 0 0 0.4em;
  font-weight: 600;
}

h1 {
  font-size: 1.5rem;
  color: var(--accent);
}

h2 {
  font-size: 1.05rem;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.3em;
}

p {
  margin: 0.3em 0;
}

button {
  font: inherit;
  cursor: pointer;
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 0.65em 1.2em;
  background: var(--bg-card);
  color: var(--text);
  touch-action: manipulation;
}

button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.primary-btn {
  background: var(--accent);
  border-color: var(--accent-dim);
  color: #1a1508;
  font-weight: 600;
}

.primary-btn:not(:disabled):active {
  background: var(--accent-dim);
}

.secondary-btn {
  background: transparent;
  color: var(--text-dim);
}

input[type="text"],
input[type="number"] {
  font: inherit;
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5em 0.7em;
}

.hint-text {
  color: var(--text-dim);
  font-size: 0.85rem;
}

.error-text {
  color: var(--danger);
  font-size: 0.85rem;
}

.hint-ok {
  color: var(--ok);
}
.hint-under,
.hint-over {
  color: var(--danger);
}

/* ---------- Setup screen ---------- */

.screen {
  padding: 1.2rem;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.setup-section {
  margin-bottom: 1.6rem;
}

.field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
  margin: 0.4em 0;
}

.checkbox-row {
  cursor: pointer;
}

.checkbox-row span {
  flex: 1;
}

.checkbox-row input[type="checkbox"] {
  flex-shrink: 0;
  width: 1.4em;
  height: 1.4em;
  accent-color: var(--accent);
  cursor: pointer;
}

.player-picker-item {
  cursor: pointer;
}

.player-picker-item.selected {
  border-color: var(--accent);
  background: var(--bg-card);
}

.player-picker-right {
  display: flex;
  align-items: center;
  gap: 1.5em;
}

.roster-remove-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 1.2rem;
  line-height: 1;
  padding: 0.2em 0.5em;
  margin-right: -0.6em;
}

.roster-remove-btn:active {
  color: var(--danger);
}

.roster-add-row {
  display: flex;
  gap: 0.5em;
  max-width: 420px;
  margin: 0.6em auto 0;
}

.roster-add-row input {
  flex: 1;
}

.role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 0.6em;
  margin-top: 0.6em;
}

.role-tile {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 4px solid transparent;
  /* Square via the padding-top hack rather than `aspect-ratio` — see the
     matching note on .card-flip for why: more robust across browsers when
     the element's own width comes from a dynamic layout (here, a CSS grid
     track) instead of a fixed value. */
  height: 0;
  padding-top: 100%;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.role-tile.selected {
  border-color: var(--accent);
  opacity: 1;
  box-shadow: 0 0 0 2px var(--accent), 0 6px 18px rgba(216, 161, 58, 0.4);
}

.role-tile.selected::after {
  content: "✓";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--accent);
  color: #1a1508;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.role-tile img {
  /* Positioned against the tile's padding box (see the height:0 +
     padding-top:100% hack above) rather than sized as a normal-flow
     100%/100% child, since the tile's own content-box height is 0. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.duration-grid {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}

.duration-grid input {
  width: 4em;
  text-align: center;
}

/* Custom -/+ steppers sit right next to the field, so the browser's own
   spin buttons are redundant clutter. */
.duration-grid input[type="number"]::-webkit-outer-spin-button,
.duration-grid input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.duration-grid input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.stepper {
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.setup-actions {
  position: sticky;
  bottom: 0;
  padding-top: 1em;
  display: flex;
  justify-content: center;
  gap: 1.5em;
}

/* ---------- Reveal phase (plain clockwise player list) ---------- */

.reveal-list-screen {
  text-align: center;
}

.reveal-list {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  max-width: 420px;
  margin: 1.2em auto;
}

.reveal-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1em 1.2em;
  font-size: 1.1rem;
  background: var(--bg-panel);
}

.reveal-list-item:not(:disabled):active {
  background: var(--bg-card);
}

.reveal-list-item.viewed {
  opacity: 0.6;
}

.reveal-list-check {
  color: var(--ok);
  font-weight: 700;
}

/* ---------- Table screens (deal / night / discussion) ---------- */
/* The ring is centered on the whole page: .table-container fills the
   entire screen and the header/action bar float on top of it, so the
   concentric layout's 50%/50% origin is the true viewport center rather
   than the center of a header-shrunk sub-box. */

.table-screen {
  position: relative;
  height: 100vh;
  min-height: 100vh;
  /* On real mobile Safari, 100vh is sized against the LARGEST possible
     viewport (address bar collapsed), not the currently visible one —
     everything below the actually-visible area (commonly the status bar
     and bottom-most ring cards) ends up under the browser's toolbar,
     which combined with overflow:hidden below reads as "trimmed" content
     with no way to scroll to it. 100dvh tracks the real visible viewport
     and is layered on top for browsers that support it (all modern
     mobile browsers); the vh rules above remain as the fallback. */
  height: 100dvh;
  min-height: 100dvh;
  max-width: 100%;
  overflow: hidden;
}

.table-screen-header {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  right: 0.8rem;
  text-align: center;
  z-index: 5;
  pointer-events: none;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 12px rgba(18, 20, 28, 0.9);
}

.table-container {
  /* Stops above the bottom bar (whichever one is present) so ring cards,
     which can sit as low as ~88% down the ring, never render underneath
     it — the ring's "center" ends up centered in this reduced area, not
     the raw viewport, which is the more useful interpretation once a
     fixed-height bar is reserved at the bottom. */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--bottom-bar-h);
}

.table-surface {
  position: relative;
  width: 100%;
  height: 100%;
}

.center-group {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 0;
}

@media (orientation: landscape) {
  .center-group {
    flex-direction: row;
  }
}

.table-card {
  width: calc(var(--card-w) * var(--card-zoom));
  cursor: default;
}

.table-card.ring-card {
  position: absolute;
  transform: translate(-50%, -50%) rotate(var(--rotation));
}

.table-card.center-card {
  transform: rotate(var(--rotation));
  position: relative;
}

.table-card.selectable-target {
  cursor: pointer;
}

.table-card.selectable-target .card-flip {
  box-shadow: 0 0 0 3px var(--accent);
}

.table-card.selected .card-flip {
  box-shadow: 0 0 0 6px var(--ok);
}

.card-flip {
  position: relative;
  width: 100%;
  /* Square aspect ratio via the classic padding-top hack (percentage
     padding is always relative to the containing block's width) rather
     than the `aspect-ratio` property — some iOS Safari versions fail to
     apply `aspect-ratio` on an element whose own width comes from a
     calc()'d custom property, which collapses this box to 0 height and
     makes the absolutely-positioned card image underneath look trimmed
     down to a sliver. The padding hack has no such dependency. */
  height: 0;
  padding-top: 100%;
  border-radius: 10px;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
}

.card-flip.flipped {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.card-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  pointer-events: none;
}

.card-back.dimmed {
  filter: brightness(0.88) saturate(0.92);
}

.card-front {
  transform: rotateY(180deg);
}

.card-label {
  text-align: center;
  font-size: 0.7rem;
  color: var(--text-dim);
  margin-top: 0.2em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.secondary-role-badge {
  /* The doppelganger's own card is the full-size base underneath; the
     copied role is a smaller card stacked on top of it, pinned to its
     top-left corner. No counter-rotation — like the base card, this
     represents an actual card, so it shares the parent's orientation
     rather than staying upright against it. */
  position: absolute;
  top: 0;
  left: 0;
  width: 75%;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--accent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

.secondary-role-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.viewed-counter {
  color: var(--text-dim);
  font-size: 0.85rem;
}

/* ---------- Modal / overlay ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 9, 14, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 50;
}

.modal-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem;
  max-width: 420px;
  width: 100%;
  text-align: center;
}

.modal-role-image {
  width: 55%;
  max-width: 220px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
  margin: 0.8em auto;
  display: block;
  border: 1px solid var(--border);
}

.modal-actions {
  display: flex;
  justify-content: center;
  gap: 0.6em;
  margin-top: 1em;
}

.danger-btn {
  background: var(--danger);
  border-color: var(--danger);
  color: #2a0f08;
  font-weight: 600;
}

/* Fixed to the viewport (not the screen's own scroll/stacking context) so
   it stays put in the corner across every in-progress-run screen — always
   re-appended after each render (see main.js), since every screen replaces
   its own root content wholesale on every render. */
.cancel-run-btn {
  position: fixed;
  top: 0.8rem;
  right: 0.8rem;
  /* Above every other overlay in the app (role-reveal modal at 50,
     big-reveal backdrop at 40) — cancelling the run needs to stay reachable
     no matter what's currently being shown on screen. */
  z-index: 60;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--danger);
  border-color: var(--danger);
  color: #2a0f08;
  font-weight: 700;
  line-height: 1;
}


/* ---------- Bottom status bar (night phase + discussion phase) ---------- */
/* Everything textual/interactive during these phases lives down here, never
   overlapping the table, so cards are never hidden behind UI. */

.status-bar {
  position: absolute;
  bottom: 0.8rem;
  left: 0.8rem;
  right: 0.8rem;
  z-index: 5;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  flex-wrap: wrap;
}

.status-role-name {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.status-bar-right {
  display: flex;
  align-items: center;
  gap: 0.6em;
  flex: 1;
  min-width: 160px;
  justify-content: flex-end;
}

.status-bar-right .progress-bar-track {
  flex: 1;
  max-width: 320px;
}

.progress-bar-track {
  width: 100%;
  height: 8px;
  background: var(--bg-card);
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.05s linear;
}

/* ---------- Big centered reveal overlay ---------- */
/* Used whenever a role card is seen/stolen/copied — shown large and
   centered so it reads clearly from across the table, rather than as a
   small in-place flip. */

.big-reveal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 9, 14, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
  cursor: pointer;
}

.big-reveal-backdrop.no-dismiss {
  cursor: default;
}

.big-reveal-images {
  display: flex;
  flex-direction: column;
  gap: 2vmin;
  align-items: center;
}

/* Mirrors .center-group's own orientation-responsive stacking axis, so a
   multi-card reveal (the Seer's 2 center cards) lines up the same way the
   real center cards do — top-to-bottom in portrait, left-to-right in
   landscape — and the wrapper's rotation (see night-phase.js) still turns
   the whole group to face the active player on top of that. */
@media (orientation: landscape) {
  .big-reveal-images {
    flex-direction: row;
  }
}

.big-reveal-image {
  width: 42vmin;
  height: 42vmin;
  max-width: 90vw;
  object-fit: cover;
  border-radius: 18px;
  border: 3px solid var(--accent);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

.big-reveal-name {
  padding: 0.5em 1em;
  font-size: 3rem;
  font-weight: 700;
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  border: 3px solid var(--accent);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  text-align: center;
  max-width: 90vw;
}

/* ---------- Zoom control ---------- */

.zoom-btn {
  width: 2.6em;
  padding: 0.5em;
  font-size: 1.1rem;
  line-height: 1;
}

.fatal-error {
  padding: 2rem;
  color: var(--danger);
}

/* ---------- Tablet layout ---------- */

@media (min-width: 700px) {
  :root {
    --card-w: 13vmin;
  }
}