:root {
  --ui-border: #0f0f0f;
  --ui-header: #666666;
  --ui-header-hi: #b3b3b3;
  --ui-header-lo: #4d4d4d;
  --ui-body: #f2feff;
  --ui-footer: #c1e4e4;
  --tile-body-hi: #dcdedf;
  --tile-body: #b7bbbe;
  --panel-ink: #141414;
  --text-light: #f5f5f5;
  --ore-color: #8a7a63;
  --metal-color: #4d6a72;
  --match-glow: #7ee787;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  font-family: 'Segoe UI', system-ui, sans-serif;
  color: var(--panel-ink);
}

body {
  background: #2a2a22 url('../assets/backgrounds/cracked-earth.jpg') center / cover no-repeat fixed;
}

#wrap {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 18px 12px 28px;
  gap: 18px;
}

/* ---- HUD - styled as the panel set's gray "header" bar, with the panel's
   thin teal accent along its bottom edge ---- */
#hud {
  width: 100%;
  max-width: 620px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 20px;
  border-radius: 18px;
  border: 4px solid var(--ui-border);
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--ui-header-hi) 0%, var(--ui-header) 22%, var(--ui-header) 80%, var(--ui-header-lo) 100%);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
#hud::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5px;
  background: var(--ui-footer);
}

.hud-title { min-width: 0; }
#hud h1 {
  margin: 0;
  font-size: 22px;
  color: var(--text-light);
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}
.hud-section {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ui-footer);
}

#hud-stats {
  display: flex;
  gap: 16px;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--text-light);
  font-size: 18px;
  font-weight: bold;
  line-height: 1.1;
}
.stat-label {
  font-size: 11px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(245, 245, 245, 0.7);
}
.stat-sep { font-weight: normal; color: rgba(245, 245, 245, 0.6); font-size: 13px; margin-left: 2px; }

.hud-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Small "panel" scale: pale body with the same thin teal lip along the
   bottom edge, inside a black border. */
#restart-btn, #play-again-btn, #menu-btn, #home-btn {
  border: 3px solid var(--ui-border);
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, var(--ui-body) 22%, var(--ui-body) 72%, var(--ui-footer) 72%, var(--ui-footer) 100%);
  color: var(--panel-ink);
  font-size: 15px;
  font-weight: bold;
  padding: 9px 18px;
  cursor: pointer;
  white-space: nowrap;
}
#restart-btn:hover, #play-again-btn:hover, #menu-btn:hover, #home-btn:hover { filter: brightness(1.05); }
#restart-btn:active, #play-again-btn:active, #menu-btn:active, #home-btn:active { transform: translateY(1px); }

/* Tiny "Home" pill in the HUD - same pale button family as Menu/New
   Game, just scaled down since it's a step out of the current game
   entirely, not something you tap every round. */
#home-btn {
  display: inline-block;
  text-decoration: none;
  border-width: 2px;
  font-size: 10px;
  padding: 4px 8px;
}

/* Small text link under Play Again on the win modal - a lighter-weight
   secondary action, not a duplicate button. */
.home-link {
  display: block;
  margin: 10px auto 0;
  width: fit-content;
  font-size: 12px;
  font-weight: 600;
  color: #3a4a4e;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.home-link:hover { color: var(--panel-ink); }

/* ---- Level select - choose 4/6/8 pairs; same pale "panel" button family
   as New Game, with an inset glow marking the active level ---- */
#level-select {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 560px;
}
.level-btn {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: 3px solid var(--ui-border);
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, var(--ui-body) 22%, var(--ui-body) 72%, var(--ui-footer) 72%, var(--ui-footer) 100%);
  color: var(--panel-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: bold;
  padding: 8px 6px;
  cursor: pointer;
}
.level-btn:hover { filter: brightness(1.05); }
.level-btn:active { transform: translateY(1px); }
.level-btn.active { box-shadow: 0 0 0 3px var(--match-glow) inset; }
.level-btn-sub {
  font-size: 11px;
  font-weight: 600;
  color: #43555a;
}

/* ---- Board ---- */
#board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 4 / 2;
}

.tile {
  perspective: 800px;
  cursor: pointer;
}
.tile.locked { cursor: default; }

.tile-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.45s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
}
.tile.flipped .tile-inner,
.tile.matched .tile-inner {
  transform: rotateY(180deg);
}

.tile-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 3px solid var(--ui-border);
  backface-visibility: hidden;
  overflow: hidden;
}

.tile-back {
  background: linear-gradient(160deg, var(--tile-body-hi), var(--tile-body) 55%, var(--tile-body));
}

.tile-front {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, var(--tile-body-hi), var(--tile-body) 55%, var(--tile-body));
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  text-align: center;
}
.tile-front img {
  max-width: 68%;
  max-height: 58%;
  object-fit: contain;
  pointer-events: none;
}
.tile-front .tile-placeholder {
  font-size: 30px;
}
.tile-front .tile-label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--panel-ink);
}
.tile-front.kind-ore .tile-placeholder { color: var(--ore-color); }
.tile-front.kind-metal .tile-placeholder { color: var(--metal-color); text-shadow: 0 1px 1px rgba(0,0,0,0.15); }

.tile-front .tile-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  max-width: none;
  max-height: none;
  display: none;
}
.tile.matched .badge-check { display: block; }
.tile.mismatch .badge-x { display: block; }

.tile-rock-break {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  pointer-events: none;
  z-index: 4;
}

.tile.matched .tile-front {
  box-shadow: 0 0 0 3px var(--match-glow) inset;
}
.tile.matched { cursor: default; }

.tile.mismatch .tile-inner {
  animation: shake 0.4s;
}
@keyframes shake {
  0%, 100% { translate: 0 0; }
  25% { translate: -6px 0; }
  75% { translate: 6px 0; }
}

/* ---- Win modal - full panel treatment: gray header, pale body, thin
   teal footer lip along the very bottom edge ---- */
#modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 5, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}
#modal-overlay.hidden { display: none; }

#win-modal {
  position: relative;
  width: min(90vw, 420px);
  background: var(--ui-body);
  border: 5px solid var(--ui-border);
  border-radius: 22px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.modal-header {
  position: relative;
  width: 100%;
  aspect-ratio: 701 / 158;
  background: url('../assets/ui/ribbon-narrow.png') center / contain no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
}
#win-modal h2 {
  margin: 0;
  padding: 0 16%;
  padding-bottom: 8%;
  font-size: clamp(13px, 4.2vw, 21px);
  color: var(--text-light);
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
  text-align: center;
  white-space: nowrap;
}

.modal-body {
  padding: 20px 24px 26px;
}
#win-modal .win-fact {
  font-size: 13px;
  color: #43555a;
  margin: 14px 0 18px;
}
#win-modal #play-again-btn { font-size: 16px; padding: 11px 26px; }

#win-modal::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: var(--ui-footer);
}

/* ---- Fact popup - shown right after a match, one per pair. Same panel
   language as the win modal (gray header, pale body, teal footer lip) but
   with the plain header bar rather than the ribbon, so the ribbon stays a
   win-only flourish. ---- */
#fact-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 5, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 21;
}
#fact-overlay.hidden { display: none; }

#fact-modal {
  position: relative;
  width: min(90vw, 380px);
  background: var(--ui-body);
  border: 5px solid var(--ui-border);
  border-radius: 22px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.fact-header {
  background: linear-gradient(180deg, var(--ui-header-hi) 0%, var(--ui-header) 25%, var(--ui-header) 85%, var(--ui-header-lo) 100%);
  border-bottom: 4px solid var(--ui-border);
  padding: 14px 20px;
}
#fact-name {
  margin: 0;
  font-size: 22px;
  color: var(--text-light);
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
}
#fact-pair-label {
  margin: 4px 0 0;
  font-size: 12px;
  color: rgba(245, 245, 245, 0.75);
}

#fact-text {
  font-size: 14px;
  line-height: 1.45;
  margin: 4px 0 18px;
  color: var(--panel-ink);
}
#fact-modal #fact-continue-btn { font-size: 15px; padding: 10px 24px; }

#fact-modal::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: var(--ui-footer);
}

/* ---- Match burst - celebratory rays that pop in behind the fact card
   after every match. The art is the shared Snack Quests burst in
   /assets/bursts (radial_burst_tight.svg), used as a mask so it can be
   tinted in the storefront yellow fading out to aqua. The mask is stacked
   three times because the rays fade out toward their tips; stacking keeps
   the part that shows around the card bright. It only sits behind the
   card, so the fact text keeps its solid pale panel. ---- */
#fact-overlay { overflow: hidden; }
#fact-overlay::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(190vmin, 960px);
  aspect-ratio: 1 / 1;
  translate: -50% -50%;
  pointer-events: none;
  background: radial-gradient(circle closest-side, #fffbd0 0%, #f3ea5a 35%, #e3db49 55%, #93ccd3 85%);
  -webkit-mask-image: url('../../../assets/bursts/svg/radial_burst_tight.svg'), url('../../../assets/bursts/svg/radial_burst_tight.svg'), url('../../../assets/bursts/svg/radial_burst_tight.svg');
  mask-image: url('../../../assets/bursts/svg/radial_burst_tight.svg'), url('../../../assets/bursts/svg/radial_burst_tight.svg'), url('../../../assets/bursts/svg/radial_burst_tight.svg');
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: fact-burst-in 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.15) both, fact-burst-spin 48s linear infinite;
}
#fact-modal { z-index: 1; }
@keyframes fact-burst-in {
  from { scale: 0.35; opacity: 0; }
  to { scale: 1; opacity: 1; }
}
@keyframes fact-burst-spin {
  to { rotate: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  #fact-overlay::before { animation: none; }
}

/* ---- Main menu - shown at the start and whenever "Menu" is tapped, to
   pick a level. Same panel language as the fact popup. ---- */
#menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 5, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 22;
}
#menu-overlay.hidden { display: none; }

#menu-modal {
  position: relative;
  width: min(90vw, 380px);
  background: var(--ui-body);
  border: 5px solid var(--ui-border);
  border-radius: 22px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
#menu-modal #menu-section {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.75);
}
#menu-prompt {
  font-size: 14px;
  color: var(--panel-ink);
  margin: 4px 0 16px;
}
#menu-modal::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: var(--ui-footer);
}

@media (max-width: 480px) {
  #hud {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .hud-title {
    flex: 1 1 100%;
    text-align: center;
  }
  #hud h1 { font-size: 19px; white-space: normal; }
  .stat { font-size: 15px; }
  #board { gap: 8px; }
  .tile-face { border-radius: 10px; }
  .level-btn { font-size: 12px; padding: 7px 4px; }
  .level-btn-sub { font-size: 10px; }
  #hud-stats { flex: 1 1 100%; justify-content: center; }
  .hud-actions { flex: 1 1 100%; justify-content: center; }
  #restart-btn, #menu-btn { font-size: 13px; padding: 7px 12px; }
}