/* ==========================================================================
   Mahjong — custom styles
   Palette: felt green, ivory tiles, gold accents, dark red-brown buttons
   ========================================================================== */

:root {
  --aspect-ratio: 1.618/1;

  --felt-light: #1e7a4e;
  --felt-dark: #0b4a2e;
  --felt-edge: #073522;

  --tile-face-1: #fdfdf7;
  --tile-face-2: #ece8d8;
  --tile-text: #253530;

  --gold: #e8b64c;
  --gold-soft: #f3d48a;

  /* selection: full-face green wash, distinct from the gold hint pulse */
  --sel-green: #1f9257;
  --sel-fill: rgba(31, 146, 87, .42);
  --sel-glow: rgba(46, 178, 108, .65);
  --btn-brown: #7a3b2e;
  --btn-brown-dark: #5d2b21;
  --cream: #f5ecd7;

  --topbar-h: 64px;
  --controls-h: 96px;

  /* collection bar (bar mode) — shrunk in landscape, where the six slots
     stack vertically and have to share the screen height with the board */
  --slot-w: 52px;
  --slot-h: 74px;
  --slot-gap: 8px;
  --mini-w: 46px;
  --mini-h: 66px;
}

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--felt-dark);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* `touch-action` is NOT an inherited property, so it has to sit on the elements
   that are actually touched — on `body` alone it does nothing. `manipulation`
   switches off double-tap-zoom and with it the delay the browser would
   otherwise wait before reporting a tap. */
.tile,
.mini-tile,
.ctrl-btn,
.icon-btn,
.menu-btn,
.modal-btn,
.diff-toggle button {
  touch-action: manipulation;
}

.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 90% at 50% 38%, var(--felt-light) 0%, var(--felt-dark) 70%, var(--felt-edge) 100%);
  color: var(--cream);
}

/* ==========================================================================
   Hauptmenü
   ========================================================================== */

#menu-screen {
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}

.menu-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 8px 24px 32px;
  width: min(520px, 92vw);
}

/* logo, title and subtitle as one block — in landscape this whole group
   floats into the top-left corner as background, see the landscape section */
.menu-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.menu-tile-logo {
  width: 86px;
  height: 139px; /* golden ratio 1:1.618 */
  border-radius: 14px;
  background: linear-gradient(155deg, var(--tile-face-1) 0%, var(--tile-face-2) 100%);
  border: 1px solid rgba(0, 0, 0, .15);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, .45),
    inset 2px 2px 0 rgba(255, 255, 255, .8),
    inset -2px -2px 0 rgba(0, 0, 0, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-5deg);
  margin-bottom: 6px;
}

.menu-tile-logo svg {
  width: 56px;
  height: 56px;
  stroke-width: 2.2;
  color: #b52c72;
}

.menu-title {
  font-family: Georgia, serif;
  font-size: clamp(44px, 8vw, 64px);
  font-weight: bold;
  letter-spacing: 2px;
  margin: 0;
  color: var(--cream);
  text-shadow: 0 3px 10px rgba(0, 0, 0, .5);
}

.menu-subtitle {
  font-size: 19px;
  opacity: .85;
  margin: 0 0 18px;
}

.menu-btn {
  width: 100%;
  padding: 18px 22px;
  border-radius: 18px;
  border: 2px solid rgba(0, 0, 0, .25);
  background: linear-gradient(165deg, #8a4536 0%, var(--btn-brown-dark) 100%);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: transform .12s ease;
}

.menu-btn:hover, .menu-btn:focus {
  color: #fff;
  transform: translateY(-2px);
  background: linear-gradient(165deg, #96503f 0%, var(--btn-brown) 100%);
}

.menu-btn:active { transform: translateY(1px) scale(.99); }

.menu-btn-continue {
  background: linear-gradient(165deg, #c79a3e 0%, #96712a 100%);
  color: #2c2413;
}

.menu-btn-continue:hover, .menu-btn-continue:focus {
  background: linear-gradient(165deg, #d5a848 0%, #a67d30 100%);
  color: #2c2413;
}

.menu-btn-title {
  font-size: 24px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}

.menu-btn-title svg { width: 26px; height: 26px; color: var(--gold-soft); }
.menu-btn-continue .menu-btn-title svg { color: #4d3a12; }

.menu-btn-desc { font-size: 16px; opacity: .82; }

/* difficulty triple toggle */
.diff-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.diff-label {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  opacity: .7;
}

.diff-toggle {
  display: flex;
  padding: 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .32);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .4);
}

.diff-toggle button {
  border: none;
  background: transparent;
  color: var(--cream);
  font-size: 18px;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: 999px;
  transition: background .15s ease, color .15s ease;
}

.diff-toggle button.active {
  background: linear-gradient(165deg, #c79a3e 0%, #96712a 100%);
  color: #2c2413;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

/* ==========================================================================
   Top-Bar
   ========================================================================== */

/* 3 equal columns → Punkte sits exactly at screen center, Level/Paare mirror
   each other; the back button floats on top and doesn't shift the stats */
#topbar {
  height: var(--topbar-h);
  flex: 0 0 auto;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  background: rgba(0, 0, 0, .28);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: center;
}

.stat-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: .75;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--gold-soft);
  line-height: 1.1;
  /* equal-width digits plus a reserved four-digit box, so a counting score
     neither jitters nor pushes the surrounding layout around */
  font-variant-numeric: tabular-nums;
  min-width: 4ch;
  text-align: center;
}

.icon-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .12);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
}

#btn-back {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.icon-btn:active { background: rgba(255, 255, 255, .25); }
.icon-btn svg { width: 26px; height: 26px; }

/* ==========================================================================
   Sammel-Leiste (Bar-Modus)
   ========================================================================== */

#bar-strip {
  flex: 0 0 auto;
  padding: 8px 12px;
  display: flex;
  justify-content: center;
}

.bar-slots {
  display: flex;
  gap: var(--slot-gap);
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(0, 0, 0, .30);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .4);
}

.bar-slot {
  width: var(--slot-w);
  height: var(--slot-h);
  border-radius: 8px;
  border: 2px dashed rgba(245, 236, 215, .35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bar-slot.filled { border-style: solid; border-color: transparent; }

/* tutorial instruction banner */
#tut-banner {
  flex: 0 0 auto;
  margin: 10px 16px 0;
  padding: 14px 20px;
  border-radius: 14px;
  background: rgba(0, 0, 0, .28);
  font-size: 20px;
  line-height: 1.45;
  text-align: center;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, .3);
}

/* ==========================================================================
   Board & Tiles
   ========================================================================== */

#board-area {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#board {
  position: relative;
  transform-origin: center center;
}

.tile {
  position: absolute;
  border-radius: 11px;
  background: linear-gradient(155deg, var(--tile-face-1) 0%, var(--tile-face-2) 100%);
  border: 1px solid rgba(0, 0, 0, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* symbol artwork, centred by the tile's own flex box.
   svg.tile-face  — a Lucide icon (see js/tiles.js)
   span.tile-face-img — a custom image file, `contain` keeps its proportions */
.tile-face {
  width: 70%;
  height: 70%;
  pointer-events: none;
}

.tile-face-img {
  width: 78%;
  height: 78%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* free tiles: bright, layered 3D bevel (outer shadow grows per layer) */
.tile.free {
  box-shadow:
    0 3px 6px rgba(0, 0, 0, .35),
    inset 2px 2px 0 rgba(255, 255, 255, .8),
    inset -2px -2px 0 rgba(0, 0, 0, .12);
}

.tile.free.layer-1 { box-shadow: 0 5px 9px rgba(0, 0, 0, .38), inset 2px 2px 0 rgba(255, 255, 255, .8), inset -2px -2px 0 rgba(0, 0, 0, .12); }
.tile.free.layer-2 { box-shadow: 0 7px 12px rgba(0, 0, 0, .42), inset 2px 2px 0 rgba(255, 255, 255, .8), inset -2px -2px 0 rgba(0, 0, 0, .12); }

.tile.blocked {
  filter: grayscale(.55) brightness(.72);
  cursor: default;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, .3),
    inset 1px 1px 0 rgba(255, 255, 255, .4);
}

.tile.blocked.layer-1 { box-shadow: 0 4px 7px rgba(0, 0, 0, .33), inset 1px 1px 0 rgba(255, 255, 255, .4); }
.tile.blocked.layer-2 { box-shadow: 0 6px 10px rgba(0, 0, 0, .36), inset 1px 1px 0 rgba(255, 255, 255, .4); }

/* selected tile: the whole face is washed in translucent green, which reads
   from much further away than a rim highlight alone. The tint sits under the
   symbol (see .tile > * below) so the symbol itself stays crisp. */
.tile.sel {
  outline: 4px solid var(--sel-green);
  outline-offset: -2px;
  box-shadow:
    0 0 20px 5px var(--sel-glow),
    inset 2px 2px 0 rgba(255, 255, 255, .55);
}

.tile.sel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--sel-fill);
}

/* keep the symbol above the tint */
.tile > * { position: relative; z-index: 1; }

.tile.hinting {
  outline: 4px solid var(--gold-soft);
  outline-offset: -2px;
}

.tile.bad {
  outline: 4px solid #d64541;
  outline-offset: -2px;
  animation: bad-blink .55s linear;
}

@keyframes bad-blink {
  0%, 40%, 80% { box-shadow: 0 0 16px 5px rgba(214, 69, 65, .8); }
  20%, 60%, 100% { box-shadow: 0 0 4px 1px rgba(214, 69, 65, .3); }
}

/* flying clone used for board→bar animation */
.tile.flying {
  position: fixed;
  margin: 0;
  z-index: 3000;
  pointer-events: none;
}

.bar-slot .mini-tile {
  position: relative;
  width: var(--mini-w);
  height: var(--mini-h);
  border-radius: 7px;
  background: linear-gradient(155deg, var(--tile-face-1) 0%, var(--tile-face-2) 100%);
  border: 1px solid rgba(0, 0, 0, .15);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .4), inset 1px 1px 0 rgba(255, 255, 255, .7);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   Untere Kontrollleiste
   ========================================================================== */

/* space-evenly → gaps between buttons equal the distance to both edges */
#controls {
  height: var(--controls-h);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  background: rgba(0, 0, 0, .28);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, .25);
}

.ctrl-btn {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, .3);
  background: linear-gradient(165deg, #8a4536 0%, var(--btn-brown-dark) 100%);
  color: var(--gold-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 12px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: transform .1s ease;
}

.ctrl-btn:active { transform: scale(.93); }
.ctrl-btn svg { width: 30px; height: 30px; }

.ctrl-btn:disabled {
  filter: grayscale(.6) brightness(.65);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}

.badge-count {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 13px;
  background: var(--gold);
  color: #3a2c10;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
}

.badge-inf svg { width: 16px; height: 16px; }

/* ==========================================================================
   Toast
   ========================================================================== */

#toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--controls-h) + 26px);
  transform: translateX(-50%);
  max-width: min(480px, 88vw);
  padding: 14px 22px;
  border-radius: 14px;
  background: rgba(15, 25, 20, .92);
  color: var(--cream);
  font-size: 18px;
  text-align: center;
  z-index: 2500;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
  pointer-events: none;
}

/* ==========================================================================
   Modals
   ========================================================================== */

.game-modal {
  border-radius: 22px;
  border: 2px solid rgba(232, 182, 76, .5);
  background:
    radial-gradient(130% 110% at 50% 20%, #17593a 0%, #0c3d26 100%);
  color: var(--cream);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .6);
}

.game-modal .modal-body {
  padding: 30px 28px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.modal-headline {
  font-family: Georgia, serif;
  font-size: 34px;
  font-weight: bold;
  margin: 0;
  color: var(--gold-soft);
  text-align: center;
}

.modal-text {
  font-size: 19px;
  margin: 0;
  text-align: center;
  opacity: .9;
}

.end-stats { display: flex; gap: 34px; margin: 4px 0; }
.end-stat { display: flex; flex-direction: column; align-items: center; }
.end-stat .stat-value { font-size: 32px; }

.modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
}

.modal-btn {
  width: 100%;
  padding: 14px;
  font-size: 20px;
  font-weight: 600;
  border-radius: 14px;
  border: 2px solid rgba(0, 0, 0, .25);
  background: rgba(255, 255, 255, .12);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.modal-btn:hover, .modal-btn:focus { background: rgba(255, 255, 255, .22); color: #fff; }
.modal-btn svg { width: 22px; height: 22px; }

.modal-btn-primary {
  background: linear-gradient(165deg, #c79a3e 0%, #96712a 100%);
  color: #2c2413;
}

.modal-btn-primary:hover, .modal-btn-primary:focus {
  background: linear-gradient(165deg, #d5a848 0%, #a67d30 100%);
  color: #2c2413;
}

/* ==========================================================================
   Konfetti (Sieg)
   ========================================================================== */

.confetti {
  position: fixed;
  top: -20px;
  width: 12px;
  height: 20px;
  border-radius: 3px;
  z-index: 2200;
  pointer-events: none;
}

/* ==========================================================================
   Responsive Feintuning
   ========================================================================== */

@media (max-height: 700px) {
  :root { --topbar-h: 54px; --controls-h: 78px; }
  .ctrl-btn { width: 58px; height: 58px; }
  .stat-value { font-size: 20px; }
}

/* Landscape: header and controls become floating panels at the left and right
   edge so the board gets the full screen height (the scarce axis here) */
@media (orientation: landscape) {
  /* Main menu: height is scarce here, and logo + title + subtitle pushed the
     buttons off screen. The whole brand block floats into the top-left corner
     as background decoration; the buttons keep the centre and simply sit on
     top of it when the screen is short. */
  #menu-screen { overflow: hidden; }

  .menu-brand {
    position: absolute;
    top: 22px;
    left: 34px;
    align-items: flex-start;
    gap: 10px;
    opacity: .5;
    z-index: 0;
    pointer-events: none;
  }

  .menu-tile-logo {
    width: 60px;
    height: 97px;
    margin-bottom: 0;
  }
  .menu-tile-logo svg { width: 38px; height: 38px; }

  .menu-title { font-size: clamp(32px, 4vw, 44px); }
  .menu-subtitle { font-size: 16px; margin: 0; }

  .menu-inner {
    position: relative;
    z-index: 1;
    gap: 12px;
    padding: 18px 24px;
  }

  .menu-btn { padding: 13px 22px; }
  .menu-btn-title { font-size: 21px; }
  .menu-btn-desc { font-size: 14.5px; }
  .diff-wrap { margin-top: 6px; }
  .diff-toggle button { padding: 8px 22px; font-size: 17px; }

  /* fixed width: with `auto` the panel grows and shrinks as the score counts
     up, which reads as the whole header jumping around. 176px holds a
     five-digit score, far above anything reachable in a game. */
  #topbar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    width: 176px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    padding: 12px 18px 14px;
    border-radius: 0 0 18px 0;
  }

  /* back button rejoins the flow as the first item, keeping its corner spot */
  #btn-back {
    position: static;
    transform: none;
    margin-bottom: 3px;
  }

  /* fixed label column, value anchored left: as the score counts up the
     leading digit stays put and only new digits appear to its right, instead
     of the whole number sliding sideways */
  .stat {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
  }

  .stat-label {
    font-size: 12px;
    width: 58px;
    flex: 0 0 auto;
  }

  /* left-anchored here: digits grow to the right from a fixed edge */
  .stat-value {
    font-size: 22px;
    text-align: left;
  }

  #controls {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: auto;
    height: auto;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    padding: 20px 16px;
    border-radius: 18px 0 0 18px;
  }

  /* keep board, bar and tutorial text clear of both floating panels */
  #board-area {
    padding-left: 186px;
    padding-right: 108px;
  }

  /* collection bar moves to the left edge and stacks its six slots vertically,
     so it costs no board height at all. Slots shrink to fit below the header
     panel even on a short landscape screen. */
  :root {
    --slot-w: 48px;
    --slot-h: 68px;
    --slot-gap: 6px;
    --mini-w: 42px;
    --mini-h: 60px;
  }

  #bar-strip {
    position: absolute;
    left: 0;
    top: 184px;                 /* clear of the header panel above */
    bottom: 10px;
    z-index: 5;
    padding: 0 14px;
    align-items: center;        /* centre the strip in the leftover height */
    justify-content: flex-start;
  }

  .bar-slots { flex-direction: column; }

  #tut-banner {
    margin-left: 194px;
    margin-right: 124px;
    font-size: 18px;
    padding: 10px 18px;
  }

  #toast { bottom: 26px; }
}