:root {
  --bg: #0d0614;
  --panel: rgba(16, 6, 26, 0.88);
  --ink: #f3e6c8;
  --muted: #a99bbd;
  --gold: #e8c26a;
  --gold-soft: #fff2c0;
  --red: #d8463c;
  --blue: #4f7bff;
  --bad: #ff8a80;
  --cw: 110px;              /* Card width, set by JavaScript to fit the window */
  --ch: calc(var(--cw) * 1.4);
  --gap: 3px;
  --title: "Cinzel", "Palatino Linotype", Georgia, serif;
  --body: "EB Garamond", "Palatino Linotype", Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html { overflow-x: hidden; }   /* Stops phones from zooming out when something is too wide */
html, body { overflow-x: clip; overscroll-behavior-x: none; }   /* No sideways scrolling or rubber-banding */
/* Fast taps on cards must not trigger double-tap zoom (pinch zoom still works) */
.board, .card, .hero, .menu button, .start, .btn { touch-action: manipulation; }
body {
  background: var(--bg) url("../assets/backgrounds/wooden-texture.png") center / cover fixed;
  color: var(--ink);
  font-family: var(--body);
  overflow: hidden;
  user-select: none;
}

/* ---------- Top menu ---------- */
.menu {
  position: fixed; top: 8px; right: 12px; z-index: 20;
  display: flex; gap: 6px;
}
.menu button, .btn {
  font-family: var(--title); font-weight: 600; letter-spacing: .06em;
  color: var(--ink); background: rgba(16, 6, 26, .75);
  border: 1px solid rgba(232, 194, 106, .45); border-radius: 4px;
  padding: 6px 12px; cursor: pointer; font-size: 13px;
}
.menu button:hover, .btn:hover { color: var(--gold-soft); border-color: var(--gold); }

/* ---------- Table ---------- */
.table {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
}
.board {
  display: grid;
  grid-template-columns: repeat(var(--cols, 9), var(--cw));
  grid-auto-rows: var(--ch);
  gap: var(--gap);
  padding: calc(var(--cw) * .12);
  background: rgba(0, 0, 0, .25);
  border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .55);
}

/* ---------- Cards with a 3D flip ---------- */
.card { perspective: 900px; cursor: pointer; }
.card.taken { visibility: hidden; }
.card .inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .2s cubic-bezier(.3, .7, .3, 1);
}
.card.open .inner { transform: rotateY(180deg); }
.card:not(.open):hover .inner { transform: translateY(-3px); }
.face {
  position: absolute; inset: 0; backface-visibility: hidden;
  border-radius: 4px; overflow: hidden;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .45);
}
.face img { width: 100%; height: 100%; object-fit: contain; display: block; }
.back img { object-fit: cover; }
.front { transform: rotateY(180deg); background: #2a1640; }
.placeholder {
  width: 100%; height: 100%; display: grid; place-items: center; text-align: center;
  font-family: var(--title); font-size: calc(var(--cw) * .12); padding: 6px;
  background: linear-gradient(160deg, #3b2160, #1d0d30); color: var(--gold);
}
.back .placeholder { background: linear-gradient(160deg, #c9b0ea, #8e6cc2); color: #2a1640; }
.card.shake .inner { animation: shake .5s; }
@keyframes shake {
  0%, 100% { transform: rotateY(180deg) translateX(0); }
  25% { transform: rotateY(180deg) translateX(-6px); }
  75% { transform: rotateY(180deg) translateX(6px); }
}

/* ---------- Bottom panel ---------- */
.panel {
  width: 100%;
  margin-top: calc(var(--cw) * .12);
  display: grid;
  grid-template-columns: auto 1fr minmax(0, 1.4fr) 1fr auto;
  align-items: center; gap: calc(var(--cw) * .2);
  padding: calc(var(--cw) * .14) calc(var(--cw) * .2);
  background: var(--panel);
  border-top: 2px solid rgba(184, 154, 216, .6);
  border-radius: 6px;
  font-size: calc(var(--cw) * .13);
}
.hero { text-align: center; cursor: pointer; }
.hero .name {
  font-family: var(--title); font-weight: 800; letter-spacing: .08em;
  font-size: calc(var(--cw) * .17); margin-bottom: 4px;
}
.hero .portrait {
  width: calc(var(--cw) * 1.65); height: calc(var(--cw) * 1.1);
  border: 4px solid var(--c); border-radius: 4px; overflow: hidden;
  transition: box-shadow .3s, border-color .3s, transform .3s;
  background: #1a0b2a;
}
.hero .portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero.active .portrait {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(232, 194, 106, .3), 0 0 24px rgba(232, 194, 106, .55);
}
.hero:hover .portrait { transform: translateY(-2px); }
.stats { line-height: 1.45; }
.stats.right { text-align: right; }
.stats .pairs { font-family: var(--title); font-weight: 600; font-size: 1.3em; }
.stats .low { color: var(--bad); }
.center { text-align: center; min-height: calc(var(--cw) * 1.2); display: flex;
          flex-direction: column; justify-content: center; align-items: center; gap: 6px; }
.turn { font-family: var(--title); font-weight: 800; font-size: 1.45em; letter-spacing: .05em; }
.log { display: flex; align-items: center; gap: 10px; min-height: calc(var(--cw) * .7);
       color: var(--muted); text-align: left; max-width: 100%; }
.log img, .log .thumb { width: calc(var(--cw) * .5); height: calc(var(--cw) * .6);
                        object-fit: cover; border-radius: 3px; flex: none; }
.log b { color: var(--ink); }
.log .power { color: var(--gold); }
.log .bad { color: var(--bad); }
.log.flash { animation: flash .6s; }
@keyframes flash { from { background: rgba(232, 194, 106, .18); } to { background: transparent; } }

/* ---------- Intro ---------- */
.intro {
  position: fixed; inset: 0; z-index: 30;
  background: #000 url("../assets/backgrounds/introimage.jpg") center / cover;
  overflow: hidden;
}
.intro::after {        /* Darkens the middle so the text is always readable */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 38% 70% at 50% 50%, rgba(10, 3, 18, .78), rgba(10, 3, 18, .15));
}
.intro-content {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 0 24px; text-align: center;
  text-shadow: 2px 2px 3px #000, 0 0 14px rgba(0, 0, 0, .9);
}
.intro .title {
  margin: 0; font-family: var(--title); font-weight: 800; letter-spacing: .06em;
  font-size: clamp(30px, 6vw, 64px); color: var(--ink);
}
.intro .tagline { margin: 0 0 10px; font-size: clamp(17px, 2.4vw, 22px); line-height: 1.5; }
.start {
  font-family: var(--title); font-weight: 800; font-size: clamp(22px, 3vw, 32px); letter-spacing: .12em;
  color: var(--gold); background: rgba(16, 6, 26, .6);
  border: 2px solid var(--gold); border-radius: 6px; padding: 12px 48px; cursor: pointer;
  text-shadow: 2px 2px 0 #000;
  transition: color .2s, background .2s, transform .2s, box-shadow .2s;
}
.start:hover {
  color: var(--gold-soft); background: rgba(232, 194, 106, .15);
  transform: translateY(-2px); box-shadow: 0 0 24px rgba(232, 194, 106, .45);
}

/* ---------- Modals ---------- */
.modal {
  position: fixed; inset: 0; z-index: 40; display: none;
  background: rgba(5, 2, 10, .72); align-items: center; justify-content: center;
}
.modal.show { display: flex; }
.sheet {
  width: min(760px, 92vw); max-height: 86vh; overflow: auto;
  background: #170a26; border: 1px solid rgba(232, 194, 106, .4); border-radius: 8px;
  padding: 26px 30px; box-shadow: 0 20px 60px rgba(0, 0, 0, .7);
}
.sheet h2 { font-family: var(--title); color: var(--gold); margin: 0 0 14px; letter-spacing: .06em; }
.sheet pre { white-space: pre-wrap; font-family: var(--body); font-size: 17px; line-height: 1.5; margin: 0; }
.sheet .actions { margin-top: 18px; text-align: right; }
.gallery { display: flex; flex-wrap: wrap; gap: 8px; }
.gallery img, .gallery .thumb { width: 82px; height: 98px; object-fit: cover; border-radius: 4px; }
.result { font-size: 19px; line-height: 1.6; }
.result .winner { font-family: var(--title); font-size: 30px; color: var(--gold); margin-bottom: 10px; }

/* ---------- Phone held upright (body.phone is set by fitToWindow in ui.js) ---------- */
body.phone .menu { top: 6px; right: 6px; gap: 4px; }
body.phone .menu button { padding: 5px 8px; font-size: 11px; }
body.phone { height: auto; min-height: 100%; overflow-x: clip; overflow-y: visible; touch-action: pan-y pinch-zoom; }
body.phone .table { position: relative; left: auto; top: auto; transform: none;
                    width: min-content; margin: 44px auto 12px; }
body.phone .board { padding: 4px; }
body.phone .panel {
  margin-top: 8px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "hero0  stats1"
    "stats0 stats1"
    "center center";
  gap: 6px 10px;
  padding: 10px;
  font-size: 13px;
}
body.phone #hero0 { grid-area: hero0; }
body.phone #stats0 { grid-area: stats0; }
body.phone #stats1 { grid-area: stats1; }
body.phone .center { grid-area: center; min-height: 0; }
body.phone .hero .name { font-size: 14px; margin-bottom: 2px; }
body.phone .hero .portrait { width: 110px; height: 74px; margin: 0 auto; border-width: 3px; }
body.phone .stats, body.phone .stats.right { text-align: center; line-height: 1.3; }
body.phone .turn { font-size: 16px; }
body.phone .log { min-height: 0; font-size: 12px; gap: 8px; }
body.phone .log img, body.phone .log .thumb { width: 36px; height: 50px; }
body.phone .placeholder { font-size: 9px; }
body.phone .sheet { padding: 18px; }
body.phone .sheet pre { font-size: 15px; }
body.phone .gallery img, body.phone .gallery .thumb { width: 62px; height: 87px; }

/* ---------- Solo mode: one hero, the right side shows the clock ---------- */
#hero1 { display: none; }
.clock {
  font-family: var(--title); font-weight: 800; font-size: 2em; letter-spacing: .04em;
  color: var(--gold); font-variant-numeric: tabular-nums;
}
.result .record {
  margin-top: 12px; font-family: var(--title); font-weight: 800; font-size: 24px;
  color: var(--gold-soft); animation: glow 1.2s ease-in-out infinite alternate;
}
.result .muted { color: var(--muted); }
@keyframes glow { from { text-shadow: 0 0 4px rgba(232, 194, 106, .3); } to { text-shadow: 0 0 18px rgba(232, 194, 106, .9); } }
body.phone #stats1 { align-self: center; }
body.phone .clock { font-size: 26px; }

/* The table is always exactly as wide as the board: long texts wrap instead of widening it */
.table { width: min-content; }
.log, .log > div { min-width: 0; overflow-wrap: anywhere; }