/* grape-match.css — Grape Match memory game styles
   Adapted to site palette: --bg:#FAF7F2  --card:#FFFDF9  --text:#2C1810  --edge:#E8DFD2
   ══════════════════════════════════════════════════════ */

/* ── Layout ───────────────────────────────────────── */
.gm-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 1.25rem 2rem;
}

.gm-hdr {
  text-align: center;
  padding: 2rem 0 .5rem;
}

.gm-hdr-badge {
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #9A9A9A;
}

.gm-hdr h2 {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-top: .2rem;
  color: #2C1810;
}

.gm-hdr h2 span {
  color: #722F37;
}

.gm-hdr-sub {
  font-size: .8rem;
  color: #6B6B6B;
  margin-top: .2rem;
  line-height: 1.45;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Difficulty Tabs ──────────────────────────────── */
.gm-tabs {
  display: flex;
  gap: .2rem;
  margin: 1.1rem auto 0;
  max-width: 460px;
  background: #EDE8DC;
  border-radius: 8px;
  padding: 3px;
}

.gm-tab {
  flex: 1;
  background: none;
  border: none;
  padding: .55rem .4rem;
  font-family: inherit;
  font-size: .72rem;
  font-weight: 500;
  color: #9A9A9A;
  cursor: pointer;
  border-radius: 6px;
  transition: all .2s;
  text-align: center;
}

.gm-tab:hover {
  color: #6B6B6B;
}

.gm-tab.on {
  background: #FFFDF9;
  color: #2C1810;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.gm-tab small {
  display: block;
  font-size: .5rem;
  font-weight: 400;
  color: #9A9A9A;
  margin-top: .08rem;
}

.gm-tab.on small {
  color: #6B6B6B;
}

/* ── Game Bar ─────────────────────────────────────── */
.gm-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 0 .6rem;
  flex-wrap: wrap;
  gap: .5rem;
}

.gm-title {
  font-size: .92rem;
  font-weight: 600;
  color: #2C1810;
}

.gm-subtitle {
  font-size: .68rem;
  color: #9A9A9A;
  margin-top: .05rem;
}

.gm-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.gm-stats {
  display: flex;
  gap: 1rem;
}

.gm-stat {
  text-align: center;
}

.gm-stat-num {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
  color: #2C1810;
}

.gm-stat-label {
  font-size: .48rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9A9A9A;
  margin-top: .08rem;
}

.gm-new-round {
  background: #FFFDF9;
  border: 1px solid #E8DFD2;
  border-radius: 6px;
  padding: .35rem .75rem;
  font-family: inherit;
  font-size: .62rem;
  font-weight: 500;
  color: #6B6B6B;
  cursor: pointer;
  transition: all .2s;
}

.gm-new-round:hover {
  border-color: #2C1810;
  color: #2C1810;
}

/* ── Card Grid ────────────────────────────────────── */
.gm-grid {
  display: grid;
  gap: .55rem;
  grid-template-columns: repeat(2, 1fr);
}

/* ── Cards ────────────────────────────────────────── */
.gm-card {
  border-radius: 10px;
  cursor: pointer;
  transition: all .25s ease;
  user-select: none;
  min-height: 90px;
  display: flex;
  align-items: center;
  padding: .65rem;
  gap: .5rem;
  position: relative;
}

/* Grape cards — white wine default */
.gm-card.gm-grape {
  background: #FFFCF5;
  border: 1.5px solid #EDE8D8;
}

/* Grape cards — red wine */
.gm-card.gm-grape.gm-red {
  background: #FFF8F6;
  border-color: #F0DCD6;
}

/* Tasting note cards */
.gm-card.gm-fact {
  background: #FFFDF9;
  border: 1.5px solid #E8DFD2;
}

/* Hover lift */
.gm-card:hover:not(.gm-dead):not(.gm-sel) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.07);
}

/* Selected — gold border */
.gm-card.gm-sel {
  border-color: #C9A961;
  box-shadow: 0 0 0 2px #C9A961;
  transform: translateY(-1px);
}

/* Matched — elegant reveal */
.gm-card.gm-dead {
  background: linear-gradient(135deg, #2C1810 0%, #3D2420 50%, #4A2A30 100%);
  border-color: rgba(201,169,110,0.3);
  cursor: default;
  position: relative;
  overflow: hidden;
}
.gm-card.gm-dead.gm-grape.gm-red {
  background: linear-gradient(135deg, #3A1520 0%, #4D1E2A 50%, #5A2535 100%);
  border-color: rgba(114,47,55,0.35);
}
.gm-card.gm-dead.gm-fact {
  background: linear-gradient(135deg, #1E2A1E 0%, #253025 50%, #2D3A2D 100%);
  border-color: rgba(107,127,94,0.3);
}

.gm-card.gm-dead .gm-card-inner {
  transition: opacity .4s;
}
.gm-card.gm-dead .gm-type,
.gm-card.gm-dead .gm-struct,
.gm-card.gm-dead .gm-region {
  opacity: 0;
}
.gm-card.gm-dead .gm-name {
  color: rgba(245,239,230,0.8);
  font-size: .78rem;
}
.gm-card.gm-dead .gm-aroma {
  color: rgba(245,239,230,0.5);
  font-size: .72rem;
}
.gm-card.gm-dead .gm-glass {
  opacity: 0.15;
  transition: opacity .3s;
}

/* Matched checkmark */
.gm-card.gm-dead::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(201,169,110,0.2);
  border: 1.5px solid rgba(201,169,110,0.4);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23c9a96e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
}

/* Correct flash */
.gm-card.gm-yep {
  border-color: #4A8B4A;
  box-shadow: 0 0 0 2px #4A8B4A;
}

/* Wrong — shake */
.gm-card.gm-nah {
  border-color: #722F37;
  box-shadow: 0 0 0 2px #722F37;
  animation: gm-shake .3s;
}

@keyframes gm-shake {
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* ── Card Content ─────────────────────────────────── */
.gm-card-inner {
  flex: 1;
  min-width: 0;
  transition: opacity .3s;
}

.gm-glass {
  flex-shrink: 0;
  width: 22px;
  height: 30px;
}

.gm-type {
  font-size: .5rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #B06070;
  margin-bottom: .1rem;
}

.gm-card.gm-grape.gm-red .gm-type {
  color: #722F37;
}

.gm-name {
  font-size: .92rem;
  font-weight: 600;
  color: #2C1810;
  line-height: 1.2;
}

.gm-region {
  font-family: 'Cormorant Garamond', 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: .82rem;
  color: #6B6B6B;
  margin-top: .15rem;
  line-height: 1.25;
}

.gm-aroma {
  font-size: .84rem;
  font-weight: 400;
  color: #2C1810;
  line-height: 1.4;
}

.gm-struct {
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #9A9A9A;
  margin-top: .3rem;
  line-height: 1.45;
}

/* ── Best / Info ──────────────────────────────────── */
.gm-best {
  text-align: center;
  margin-top: .7rem;
  font-size: .62rem;
  color: #4A8B4A;
  font-weight: 500;
  min-height: 1em;
}

.gm-pinfo {
  text-align: center;
  font-size: .55rem;
  color: #9A9A9A;
  margin-top: .4rem;
}

/* ── Win Overlay ──────────────────────────────────── */
.gm-overlay-bg {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(18,14,16,.82);
  z-index: 100;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  padding: 1rem;
}

.gm-overlay-bg.on {
  display: flex;
}

.gm-overlay-box {
  background: #FFFDF9;
  border-radius: 14px;
  padding: 2rem 1.5rem;
  text-align: center;
  max-width: 400px;
  width: 100%;
  animation: gm-pop .3s ease;
  margin: auto;
}

@keyframes gm-pop {
  from {
    opacity: 0;
    transform: scale(.93) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.gm-win-icon {
  font-size: 1.8rem;
  margin-bottom: .4rem;
}

.gm-win-heading {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: .25rem;
  color: #2C1810;
}

.gm-win-row {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: .8rem 0;
  padding: .7rem 0;
  border-top: 1px solid #E8DFD2;
  border-bottom: 1px solid #E8DFD2;
}

.gm-win-val {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2C1810;
}

.gm-win-label {
  font-size: .48rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9A9A9A;
  margin-top: .08rem;
}

.gm-win-best {
  font-size: .7rem;
  color: #4A8B4A;
  margin-bottom: .6rem;
  font-weight: 500;
}

.gm-btn {
  display: inline-block;
  background: #2C1810;
  color: #FFFDF9;
  border: none;
  border-radius: 6px;
  padding: .55rem 1.5rem;
  font-family: inherit;
  font-size: .72rem;
  font-weight: 500;
  cursor: pointer;
  margin: .2rem;
}

.gm-btn:hover {
  background: #3D3D3D;
}

.gm-btn.gm-ghost {
  background: transparent;
  color: #6B6B6B;
  border: 1px solid #E8DFD2;
}

.gm-btn.gm-ghost:hover {
  border-color: #2C1810;
  color: #2C1810;
}

/* ── Study Area ───────────────────────────────────── */
.gm-study-area {
  display: none;
  margin-top: 1rem;
  text-align: left;
}

.gm-study-area.on {
  display: block;
}

.gm-study-label {
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9A9A9A;
  margin-bottom: .6rem;
  text-align: center;
}

.gm-study-pair {
  display: flex;
  gap: .5rem;
  align-items: stretch;
  margin-bottom: .5rem;
}

.gm-study-grape {
  flex: 1;
  background: #EDE8DC;
  border-radius: 8px;
  padding: .5rem .6rem;
}

.gm-study-grape .sg-name {
  font-size: .8rem;
  font-weight: 600;
  color: #2C1810;
}

.gm-study-grape .sg-reg {
  font-family: 'Cormorant Garamond', 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: .68rem;
  color: #6B6B6B;
  margin-top: .08rem;
}

.gm-study-fact {
  flex: 1;
  background: #FAF7F2;
  border-radius: 8px;
  padding: .5rem .6rem;
}

.gm-study-fact .sf-aroma {
  font-size: .75rem;
  color: #2C1810;
  line-height: 1.35;
}

.gm-study-fact .sf-struct {
  font-size: .52rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #9A9A9A;
  margin-top: .2rem;
}

.gm-study-arrow {
  display: flex;
  align-items: center;
  color: #9A9A9A;
  font-size: .7rem;
  flex-shrink: 0;
}

.gm-src {
  text-align: center;
  font-size: .5rem;
  color: #9A9A9A;
  margin: 1.5rem 0 2rem;
  line-height: 1.5;
}

/* ── Mode Toggle (Quiz / Explore) ────────────────── */
.gm-mode-toggle {
  display: flex;
  gap: .15rem;
  margin: 1rem auto 0;
  max-width: 220px;
  background: #EDE8DC;
  border-radius: 8px;
  padding: 3px;
}

.gm-mode-btn {
  flex: 1;
  background: none;
  border: none;
  padding: .5rem .6rem;
  font-family: inherit;
  font-size: .72rem;
  font-weight: 600;
  color: #9A9A9A;
  cursor: pointer;
  border-radius: 6px;
  transition: all .2s;
  text-align: center;
  letter-spacing: .03em;
}

.gm-mode-btn:hover {
  color: #6B6B6B;
}

.gm-mode-btn.on {
  background: #FFFDF9;
  color: #2C1810;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

/* ── Explore/Quiz visibility ─────────────────────── */
.gm-explore {
  display: none;
}

.gm-explore-mode .gm-bar,
.gm-explore-mode .gm-grid,
.gm-explore-mode .gm-best,
.gm-explore-mode .gm-pinfo,
.gm-explore-mode .gm-quiz-only {
  display: none !important;
}

.gm-explore-mode .gm-explore {
  display: block;
}

/* ── Explore Layout ──────────────────────────────── */
.gm-explore-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #2C1810;
  text-align: center;
  margin: 1.2rem 0 .6rem;
}

.gm-explore-empty {
  text-align: center;
  color: #9A9A9A;
  font-size: .8rem;
  padding: 2rem 0;
}

.gm-ex-section {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #E8DFD2;
}

.gm-ex-section:last-child {
  border-bottom: none;
}

.gm-ex-heading {
  font-size: .95rem;
  font-weight: 700;
  color: #2C1810;
  margin: 0 0 .2rem;
}

.gm-ex-subtitle {
  font-size: .72rem;
  color: #6B6B6B;
  line-height: 1.45;
  margin: 0 0 .9rem;
}

/* ── Category Cards ──────────────────────────────── */
.gm-ex-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .55rem;
}

.gm-ex-card {
  border-radius: 10px;
  padding: .7rem .75rem;
  min-height: 80px;
}

.gm-ex-card-white {
  background: #FFFCF5;
  border: 1.5px solid #EDE8D8;
}

.gm-ex-card-red {
  background: #FFF8F6;
  border: 1.5px solid #F0DCD6;
}

.gm-ex-card-type {
  font-size: .45rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9A9A9A;
  margin-bottom: .15rem;
}

.gm-ex-card-red .gm-ex-card-type {
  color: #722F37;
}

.gm-ex-card-name {
  font-size: .85rem;
  font-weight: 600;
  color: #2C1810;
  line-height: 1.2;
  margin-bottom: .3rem;
}

.gm-ex-card-aromas {
  font-size: .72rem;
  color: #4A3728;
  line-height: 1.4;
  margin-bottom: .25rem;
}

.gm-ex-card-struct {
  font-size: .52rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #9A9A9A;
  line-height: 1.4;
}

/* ── Spectrum Bars ───────────────────────────────── */
.gm-ex-bars {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.gm-ex-bar-label {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #2C1810;
  margin-bottom: .3rem;
}

.gm-ex-bar-track {
  height: 6px;
  background: #EDE8DC;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}

.gm-ex-bar-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #D4C060 0%, #C9A961 30%, #B06070 70%, #722F37 100%);
  border-radius: 3px;
  opacity: .5;
}

.gm-ex-bar-ends {
  display: flex;
  justify-content: space-between;
  font-size: .55rem;
  color: #6B6B6B;
  margin-top: .2rem;
}

.gm-ex-bar-note {
  font-size: .62rem;
  color: #9A9A9A;
  font-style: italic;
  margin-top: .15rem;
  line-height: 1.4;
}

/* ── Tips ────────────────────────────────────────── */
.gm-ex-tips {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.gm-ex-tip {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
}

.gm-ex-tip-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #EDE8DC;
  color: #2C1810;
  font-size: .62rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: .05rem;
}

.gm-ex-tip-body {
  flex: 1;
}

.gm-ex-tip-title {
  font-size: .78rem;
  font-weight: 600;
  color: #2C1810;
  line-height: 1.3;
}

.gm-ex-tip-text {
  font-size: .7rem;
  color: #6B6B6B;
  line-height: 1.45;
  margin-top: .1rem;
}

/* ── Regional Expressions ────────────────────────── */
.gm-ex-regions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.gm-ex-region-block {
  background: #FAF7F2;
  border-radius: 10px;
  padding: .8rem;
  border: 1px solid #E8DFD2;
}

.gm-ex-region-grape {
  font-size: .85rem;
  font-weight: 700;
  color: #722F37;
  margin-bottom: .5rem;
}

.gm-ex-region-vs {
  display: flex;
  gap: .4rem;
  align-items: stretch;
}

.gm-ex-region-item {
  flex: 1;
  background: #FFFDF9;
  border-radius: 8px;
  padding: .55rem .6rem;
}

.gm-ex-region-name {
  font-family: 'Cormorant Garamond', 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: .78rem;
  color: #2C1810;
  font-weight: 600;
  margin-bottom: .2rem;
}

.gm-ex-region-profile {
  font-size: .65rem;
  color: #6B6B6B;
  line-height: 1.45;
}

.gm-ex-region-arrow {
  display: flex;
  align-items: center;
  font-size: .6rem;
  font-weight: 600;
  color: #9A9A9A;
  letter-spacing: .08em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.gm-ex-region-takeaway {
  font-size: .68rem;
  color: #4A3728;
  margin-top: .55rem;
  padding-top: .45rem;
  border-top: 1px solid #E8DFD2;
  line-height: 1.45;
  font-style: italic;
}

/* ── Info List (Winemaking Markers, etc.) ────────── */
.gm-ex-info-list {
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

.gm-ex-info-item {
  background: #FAF7F2;
  border-radius: 10px;
  padding: .7rem .75rem;
  border: 1px solid #E8DFD2;
}

.gm-ex-info-marker {
  font-size: .72rem;
  font-weight: 700;
  color: #722F37;
  margin-bottom: .15rem;
}

.gm-ex-info-aromas {
  font-size: .75rem;
  color: #2C1810;
  line-height: 1.35;
  margin-bottom: .25rem;
}

.gm-ex-info-expl {
  font-size: .65rem;
  color: #6B6B6B;
  line-height: 1.45;
}

/* ── Structure as ID ─────────────────────────────── */
.gm-ex-struct-list {
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

.gm-ex-struct-item {
  background: #FFFDF9;
  border-radius: 10px;
  padding: .7rem .75rem;
  border: 1.5px solid #EDE8D8;
}

.gm-ex-struct-profile {
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #9A9A9A;
  line-height: 1.45;
  margin-bottom: .3rem;
}

.gm-ex-struct-answer {
  font-size: .88rem;
  font-weight: 700;
  color: #2C1810;
  margin-bottom: .15rem;
}

.gm-ex-struct-note {
  font-size: .65rem;
  color: #6B6B6B;
  line-height: 1.45;
}

/* ── Confusable Grapes ───────────────────────────── */
.gm-ex-confusable {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.gm-ex-confuse-pair {
  background: #FAF7F2;
  border-radius: 10px;
  padding: .75rem .8rem;
  border: 1px solid #E8DFD2;
}

.gm-ex-confuse-header {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .45rem;
  flex-wrap: wrap;
}

.gm-ex-confuse-name {
  font-size: .82rem;
  font-weight: 700;
  color: #2C1810;
}

.gm-ex-confuse-vs {
  font-size: .55rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #722F37;
  background: #F0DCD6;
  padding: .12rem .4rem;
  border-radius: 4px;
}

.gm-ex-confuse-shared {
  font-size: .68rem;
  color: #6B6B6B;
  line-height: 1.45;
  margin-bottom: .3rem;
}

.gm-ex-confuse-shared strong,
.gm-ex-confuse-diff strong {
  color: #4A3728;
  font-weight: 600;
}

.gm-ex-confuse-diff {
  font-size: .68rem;
  color: #6B6B6B;
  line-height: 1.45;
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 500px) {
  .gm-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .gm-controls {
    justify-content: space-between;
  }
  .gm-study-pair {
    flex-direction: column;
  }
  .gm-study-arrow {
    justify-content: center;
    transform: rotate(90deg);
  }
  .gm-ex-cards {
    grid-template-columns: 1fr;
  }
  .gm-ex-region-vs {
    flex-direction: column;
  }
  .gm-ex-region-arrow {
    justify-content: center;
    padding: .15rem 0;
  }
  .gm-ex-confuse-header {
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
  }
}