:root{
  --sm-accent:#c8f57d;
  --sm-accent-soft:rgba(200,245,125,.13);
  --sm-gold:#f0c96b;
  --sm-purple:#b99aff;
  --sm-blue:#83c9ff;
  --sm-danger:#ff9d88;
  --sm-card-shadow:0 18px 42px rgba(0,0,0,.25);
}

body{
  min-height:100vh;
  background:
    radial-gradient(circle at 12% 2%,rgba(159,212,168,.14),transparent 30rem),
    radial-gradient(circle at 90% 16%,rgba(223,189,98,.1),transparent 27rem),
    linear-gradient(180deg,#0b1b11 0%,#07130c 52%,#040b07 100%);
}

.match-shell{position:relative}
.match-shell::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.2;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(to bottom,#000,transparent 84%);
}

.match-hero{
  position:relative;
  overflow:hidden;
  margin-bottom:16px;
  padding:clamp(24px,4vw,44px);
  border:1px solid rgba(159,212,168,.18);
  border-radius:26px;
  background:
    radial-gradient(circle at 92% 10%,rgba(200,245,125,.13),transparent 16rem),
    radial-gradient(circle at 72% 110%,rgba(185,154,255,.12),transparent 20rem),
    linear-gradient(145deg,rgba(18,45,28,.98),rgba(7,20,12,.98));
  box-shadow:0 24px 64px rgba(0,0,0,.24);
}
.match-hero::after{
  content:"SM";
  position:absolute;
  right:clamp(18px,5vw,54px);
  bottom:-.18em;
  color:rgba(240,201,107,.08);
  font-size:clamp(6rem,18vw,13rem);
  font-weight:1000;
  line-height:.8;
  letter-spacing:-.1em;
  pointer-events:none;
}
.match-hero>*{position:relative;z-index:1}
.match-hero h1{text-wrap:balance;text-shadow:0 12px 30px rgba(0,0,0,.22)}

.control-panel,
.score-strip div,
.learn-panel,
.complete-panel{
  backdrop-filter:blur(12px) saturate(1.05);
}

.control-panel{
  border-color:rgba(159,212,168,.22);
  background:linear-gradient(180deg,rgba(20,45,30,.92),rgba(10,25,16,.94));
  box-shadow:0 16px 40px rgba(0,0,0,.16);
}
.deck-button,.primary-control{min-height:48px;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,background .15s ease}
.deck-button:hover:not(:disabled),.primary-control:hover:not(:disabled){transform:translateY(-1px)}
.deck-button[aria-pressed=true]{box-shadow:0 8px 22px rgba(223,189,98,.15),inset 0 1px rgba(255,255,255,.25)}
.primary-control{background:linear-gradient(135deg,#bfe6c5,#9fd4a8);box-shadow:0 8px 22px rgba(80,150,95,.14)}

.round-status-chip{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  min-height:34px;
  margin-top:10px;
  padding:.42rem .68rem;
  border:1px solid rgba(159,212,168,.2);
  border-radius:999px;
  background:rgba(7,19,12,.68);
  color:#dbe7dc;
  font-size:.76rem;
  font-weight:850;
  letter-spacing:.035em;
}
.round-status-chip::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--sm-accent);
  box-shadow:0 0 14px rgba(200,245,125,.38);
}

.score-strip{grid-template-columns:repeat(5,minmax(0,1fr))}
.score-strip div{position:relative;overflow:hidden;min-width:0;background:linear-gradient(180deg,rgba(18,42,27,.91),rgba(9,24,15,.91));transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}
.score-strip div::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,rgba(200,245,125,.18),transparent)}
.score-strip strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.score-strip .streak-stat strong{color:var(--sm-accent)}
.score-strip .streak-stat[data-hot=true]{border-color:rgba(200,245,125,.48);box-shadow:0 0 24px rgba(200,245,125,.09)}

.deck-copy{
  position:relative;
  margin:4px 0 14px;
  padding:14px 16px 14px 18px;
  border-left:3px solid var(--sm-gold);
  border-radius:0 14px 14px 0;
  background:linear-gradient(90deg,rgba(223,189,98,.07),transparent 72%);
}
.deck-copy h2{font-size:clamp(1.45rem,3vw,1.85rem)}

.match-board{gap:clamp(8px,1.3vw,14px)}
.match-card{
  min-height:clamp(118px,14vw,166px);
  border-color:rgba(126,165,138,.34);
  border-radius:19px;
  background:
    radial-gradient(circle at 22% 18%,rgba(200,245,125,.09),transparent 37%),
    linear-gradient(145deg,#173a24,#091b10 74%);
  box-shadow:var(--sm-card-shadow),inset 0 1px rgba(255,255,255,.035);
  transform-style:preserve-3d;
}
.match-card::before{
  content:"";
  position:absolute;
  inset:7px;
  z-index:0;
  border:1px solid rgba(240,201,107,.11);
  border-radius:14px;
  background:
    linear-gradient(45deg,transparent 47%,rgba(240,201,107,.035) 48% 52%,transparent 53%),
    linear-gradient(-45deg,transparent 47%,rgba(200,245,125,.025) 48% 52%,transparent 53%);
  background-size:22px 22px;
  pointer-events:none;
}
.match-card .card-inner{z-index:1}
.match-card .card-front{
  display:flex;
  flex-direction:column;
  gap:.28rem;
  color:var(--sm-gold);
  font-size:1rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.match-card .card-front::before{
  content:"✦";
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border:1px solid rgba(240,201,107,.28);
  border-radius:18px;
  background:radial-gradient(circle,rgba(240,201,107,.13),rgba(240,201,107,.025));
  color:var(--sm-gold);
  font-size:1.85rem;
  box-shadow:0 10px 24px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.06);
}
.match-card .card-front::after{content:"MATCH";font-size:.6rem;font-weight:950;letter-spacing:.16em;color:#9caea0}
.match-card .card-back{
  padding:clamp(12px,2vw,18px);
  background:
    radial-gradient(circle at 88% 8%,rgba(200,245,125,.14),transparent 45%),
    linear-gradient(145deg,#28553a,#123120 78%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}
.match-card.revealed[data-kind=term] .card-back,.match-card.matched[data-kind=term] .card-back{background:radial-gradient(circle at 88% 8%,rgba(240,201,107,.15),transparent 44%),linear-gradient(145deg,#3e4727,#243219)}
.match-card.revealed[data-kind=clue] .card-back,.match-card.matched[data-kind=clue] .card-back{background:radial-gradient(circle at 88% 8%,rgba(131,201,255,.15),transparent 44%),linear-gradient(145deg,#244a49,#173032)}
.match-card.revealed[data-kind=term] .card-back::before,.match-card.matched[data-kind=term] .card-back::before{content:"TERM"}
.match-card.revealed[data-kind=clue] .card-back::before,.match-card.matched[data-kind=clue] .card-back::before{content:"CLUE"}
.match-card .card-back::before{
  position:absolute;
  left:10px;
  top:9px;
  color:rgba(255,255,255,.58);
  font-size:.52rem;
  font-weight:950;
  letter-spacing:.14em;
}
.match-card:hover:not(:disabled){transform:translateY(-4px);border-color:rgba(200,245,125,.38);box-shadow:0 23px 48px rgba(0,0,0,.3),0 0 0 1px rgba(200,245,125,.06)}
.match-card.matched{border-color:rgba(240,201,107,.72);box-shadow:0 0 0 2px rgba(240,201,107,.18),0 18px 40px rgba(0,0,0,.25),0 0 28px rgba(240,201,107,.1)}
.match-card.matched .card-back{filter:saturate(1.08)}
.match-card.mismatch{border-color:var(--sm-danger);box-shadow:0 0 0 2px rgba(255,157,136,.17),0 18px 38px rgba(0,0,0,.24)}

html[data-deck=terpenes]{--sm-accent:#d8f17a}
html[data-deck=plant-problems]{--sm-accent:#ffb087}
html[data-deck=breeding]{--sm-accent:#c1a6ff}
html[data-deck=tools]{--sm-accent:#83d7ff}
html[data-deck=terpenes] .deck-copy{border-left-color:#d8f17a}
html[data-deck=plant-problems] .deck-copy{border-left-color:#ffb087}
html[data-deck=breeding] .deck-copy{border-left-color:#c1a6ff}
html[data-deck=tools] .deck-copy{border-left-color:#83d7ff}

.learn-panel{
  min-height:96px;
  border-color:rgba(159,212,168,.2);
  background:linear-gradient(145deg,rgba(18,42,27,.94),rgba(10,24,16,.94));
  box-shadow:0 14px 36px rgba(0,0,0,.14);
}
.complete-panel{
  overflow:hidden;
  border-color:rgba(240,201,107,.58);
  background:radial-gradient(circle at 100% 0%,rgba(240,201,107,.12),transparent 34%),linear-gradient(145deg,#18311f,#0b1d12);
  box-shadow:0 22px 56px rgba(0,0,0,.24),0 0 28px rgba(240,201,107,.07);
}

@media(max-width:820px){
  .score-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .score-strip .best-stat{grid-column:span 2}
}
@media(max-width:560px){
  .match-hero{padding:24px 18px;border-radius:20px}
  .match-hero::after{font-size:7rem;right:10px}
  .score-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .score-strip .best-stat{grid-column:span 2}
  .match-card{min-height:116px;border-radius:15px}
  .match-card .card-front::before{width:44px;height:44px;border-radius:14px;font-size:1.55rem}
}
@media(max-width:390px){
  .match-board{gap:6px}
  .match-card{min-height:105px}
  .match-card .card-back{font-size:.72rem}
}
@media(hover:none){
  .match-card:hover:not(:disabled),.deck-button:hover:not(:disabled),.primary-control:hover:not(:disabled){transform:none}
}
@media(prefers-reduced-motion:reduce){
  .deck-button,.primary-control,.score-strip div,.match-card{transition:none!important}
}

@media(forced-colors:active){
  .match-card,.deck-button,.primary-control,.control-panel,.learn-panel,.complete-panel,.score-strip div{
    border:1px solid ButtonText;
  }
  .match-card:focus-visible,.deck-button:focus-visible,.primary-control:focus-visible{
    outline:3px solid Highlight;
    outline-offset:3px;
  }
  .match-card.matched{
    border-color:Highlight;
  }
  .match-card.mismatch{
    border-color:Mark;
  }
}