/* AROMA MATCH visual direction — aligned to final AROMA LABO */
:root{
  --sat-ink:#17151c;
  --sat-paper:#f4f0e8;
  --sat-lime:#d5ef83;
  --sat-lilac:#c5acf3;
  --sat-deep:#252032;
  --sat-muted:#9f99a6;
  --sat-heavy:"Arial Black","Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Noto Sans CJK JP",sans-serif;
  --labo-cream:#f3efe3;
  --labo-sheet:#fffaf0;
  --labo-sheet-2:#f7f2e8;
  --labo-line:rgba(23,21,28,.24);
  --labo-green:#4f715e;
  --labo-orange:#e66f47;
  --labo-lilac-soft:#eee5fa;

  --bg:var(--labo-cream);
  --paper:var(--labo-sheet);
  --ink:var(--sat-ink);
  --muted:#69636b;
  --line:var(--labo-line);
  --green:var(--labo-green);
  --orange:var(--labo-orange);
  --yellow:var(--sat-lime);
  --soft:#e9e2da;
  --cream:var(--labo-sheet-2);
  --shadow:3px 4px 0 rgba(23,21,28,.11);
  --radius:10px;
  --max:1080px;
}

html{background:var(--labo-cream)}
body{
  overflow-x:hidden;
  background:var(--labo-cream)!important;
  color:var(--sat-ink)!important;
}
.wrap{width:min(var(--max),calc(100% - 36px))}

/* Same building, game room. */
.topbar{
  background:rgba(23,21,28,.96)!important;
  color:var(--sat-paper)!important;
  border-bottom:1px solid rgba(244,240,232,.18)!important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.topbar-inner{height:72px!important}
.brand{gap:14px!important;color:var(--sat-paper)!important;min-width:0;font-size:inherit!important;letter-spacing:normal!important}
.sat-mark{
  width:auto!important;
  height:auto!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  color:var(--sat-paper)!important;
  font:900 30px/.86 var(--sat-heavy)!important;
  letter-spacing:-.11em!important;
}
.brand-context{display:grid;gap:3px;min-width:0}
.brand-context strong{font:800 10px/1.2 var(--sans);letter-spacing:.08em}
.brand-context small{font:700 8px/1.3 var(--mono);letter-spacing:.12em;color:var(--sat-muted)}
.back{color:var(--sat-paper)!important;font:700 10px/1.4 var(--mono)!important;letter-spacing:.1em!important;border-bottom:1px solid transparent}
.back:hover{color:var(--sat-lime)!important;border-color:var(--sat-lime)}

.match-shell{padding:26px 0 max(64px,env(safe-area-inset-bottom))!important}

/* Continue the dark-purple threshold from AROMA LABO, then return to paper for play. */
.match-hero{
  position:relative;
  overflow:hidden;
  align-items:center!important;
  padding:42px 40px 38px!important;
  margin:0 0 22px!important;
  border:1px solid rgba(244,240,232,.12)!important;
  border-radius:0!important;
  background:
    linear-gradient(rgba(244,240,232,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(244,240,232,.035) 1px,transparent 1px),
    radial-gradient(circle at 82% 30%,rgba(197,172,243,.15),transparent 30%),
    var(--sat-deep)!important;
  background-size:32px 32px,32px 32px,auto,auto!important;
  color:var(--sat-paper)!important;
  box-shadow:0 18px 42px rgba(37,32,50,.12);
}
.match-hero::after{
  content:"02";
  position:absolute;
  right:22px;
  bottom:-.28em;
  font:900 clamp(110px,18vw,220px)/1 var(--sat-heavy);
  letter-spacing:-.08em;
  color:transparent;
  -webkit-text-stroke:1px rgba(197,172,243,.12);
  pointer-events:none;
}
.match-hero-copy{position:relative;z-index:1;min-width:0}
.match-meta{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:12px}
.match-meta .eyebrow{margin:0!important;color:var(--sat-lilac)!important;font:700 9px/1.5 var(--mono)!important;letter-spacing:.15em!important}
.match-room{font:700 8px/1.5 var(--mono);letter-spacing:.13em;color:var(--sat-muted);white-space:nowrap}
.match-hero h1{
  margin:0!important;
  color:var(--sat-paper)!important;
  font:900 clamp(62px,9vw,110px)/.82 var(--sat-heavy)!important;
  letter-spacing:-.075em!important;
}
.match-hero h1 span{display:block;color:var(--sat-lilac)!important}
.match-hero p{margin:18px 0 0!important;color:#ddd7e3!important;font-size:16px!important;font-weight:700!important;letter-spacing:-.02em!important}
.match-route{margin-top:14px;font:700 8px/1.5 var(--mono);letter-spacing:.14em;color:var(--sat-lime)}

/* Level selection is a lab control, not a chunky game badge. */
.mode-card{
  position:relative;
  z-index:2;
  min-width:300px!important;
  padding:16px!important;
  border:1px solid rgba(244,240,232,.25)!important;
  border-radius:10px!important;
  background:rgba(23,21,28,.34)!important;
  box-shadow:none!important;
  color:var(--sat-paper)!important;
}
.mode-card-head small{color:#b9b0c0!important}
.mode-card-head span{color:var(--sat-lime)!important}
.mode-card>span{color:#b9b0c0!important}
.mode-switch button{
  min-height:62px!important;
  border:1px solid rgba(244,240,232,.35)!important;
  border-radius:8px!important;
  background:rgba(244,240,232,.06)!important;
  color:var(--sat-paper)!important;
  box-shadow:none!important;
}
.mode-switch button>span,.mode-switch button>small{color:#aaa1b1!important}
.mode-switch button>strong{color:var(--sat-paper)!important;font-family:var(--sat-heavy)!important}
.mode-switch button:hover{background:rgba(197,172,243,.13)!important}
.mode-switch button.active{
  background:var(--sat-lilac)!important;
  color:var(--sat-ink)!important;
  border-color:var(--sat-lilac)!important;
  transform:none!important;
  box-shadow:none!important;
}
.mode-switch button.active>span,.mode-switch button.active>strong,.mode-switch button.active>small{color:var(--sat-ink)!important}
.mode-switch button:active{transform:translateY(1px)!important}
.mode-switch button:focus-visible{outline:3px solid var(--sat-lime)!important;outline-offset:3px!important}

/* Taxonomy = bright lab index. */
.match-taxonomy{
  margin:0 0 14px!important;
  border:1px solid var(--labo-line)!important;
  border-radius:0!important;
  background:var(--labo-sheet)!important;
}
.taxonomy-head{border-bottom:1px solid var(--labo-line)!important;padding:8px 11px!important}
.taxonomy-head small{color:var(--labo-green)!important}
.taxonomy-head span{color:#77717d!important}
.taxonomy-tab{border-right:1px solid rgba(23,21,28,.18)!important;background:transparent!important;min-height:58px!important}
.taxonomy-tab strong{font-family:var(--mono)!important}
.taxonomy-tab small{color:#77717d!important}
.taxonomy-tab:hover{background:rgba(197,172,243,.18)!important}
.taxonomy-tab:active{background:rgba(213,239,131,.45)!important}
.taxonomy-tab.active{background:var(--sat-ink)!important;color:var(--sat-paper)!important}
.taxonomy-tab.active small{color:#bbb4bf!important}
.taxonomy-tab[data-drink-filter="cross"].active{background:var(--sat-lilac)!important;color:var(--sat-ink)!important}
.taxonomy-tab[data-drink-filter="cross"].active small{color:#62596a!important}
.taxonomy-tab:focus-visible{outline:3px solid #76588d!important;outline-offset:-3px!important}

.howto{
  margin:0 0 14px!important;
  padding:11px 13px!important;
  border:1px solid rgba(23,21,28,.28)!important;
  background:var(--sat-lime)!important;
  color:var(--sat-ink)!important;
}

/* Main board = paper specimen table. */
.game-panel{
  border:1px solid rgba(23,21,28,.38)!important;
  border-radius:12px!important;
  background:var(--labo-sheet)!important;
  box-shadow:4px 5px 0 rgba(23,21,28,.10)!important;
}
.score-strip{border-bottom:1px solid rgba(23,21,28,.22)!important;min-height:60px!important}
.score-strip>div{border-right:1px solid rgba(23,21,28,.18)!important;padding:10px 14px!important}
.score-strip small{color:#77717d!important}
.score-strip strong{color:var(--sat-ink)!important}
.score-strip button{
  border-left:1px solid rgba(23,21,28,.22)!important;
  background:var(--sat-ink)!important;
  color:var(--sat-paper)!important;
}
.score-strip button:hover{background:var(--sat-deep)!important;color:var(--sat-lilac)!important}
.score-strip button:active{background:var(--sat-lilac)!important;color:var(--sat-ink)!important}
.column-heads{color:#77717d!important}
.match-board{background:var(--labo-sheet)!important}
.connection-path{stroke:var(--labo-green)!important;stroke-width:2.2!important;filter:none!important}

.match-card{
  border:1px solid rgba(23,21,28,.34)!important;
  border-radius:9px!important;
  background:var(--labo-sheet-2)!important;
  box-shadow:2px 3px 0 rgba(23,21,28,.10)!important;
  transition:transform .12s,background .12s,border-color .12s,box-shadow .12s,opacity .2s!important;
}
.match-card:hover{border-color:rgba(92,72,108,.52)!important}
.match-card:focus-visible{outline:3px solid #76588d!important;outline-offset:2px!important}
.match-card.selected{
  background:var(--labo-lilac-soft)!important;
  border-color:#8d73a4!important;
  transform:translateY(1px)!important;
  box-shadow:1px 2px 0 rgba(23,21,28,.10)!important;
}
.match-card.matched{
  background:rgba(213,239,131,.52)!important;
  border-color:#82934c!important;
  box-shadow:1px 2px 0 rgba(86,101,47,.14)!important;
  color:var(--sat-ink)!important;
}
.match-card.matched::after{color:#617032!important}
.match-card.wrong{background:#f8ddd3!important;border-color:#c16c50!important}
.compound-card small{color:var(--labo-green)!important}
.compound-card strong{font-weight:850!important;color:var(--sat-ink)!important}
.compound-card span{color:#77717d!important}
.aroma-thumb img{
  border:1px solid rgba(23,21,28,.24)!important;
  border-radius:7px!important;
  background:transparent!important;
}
.aroma-copy strong{color:var(--sat-ink)!important}
.aroma-copy small{color:#77717d!important}
.game-note{border-top:1px solid rgba(23,21,28,.2)!important;color:#6d676f!important;background:#f7f2e8!important}

/* Structure flash keeps the specimen-sheet language. */
.structure-flash{background:rgba(37,32,50,0)!important}
.structure-card{
  width:min(290px,76vw)!important;
  background:var(--labo-sheet)!important;
  border:1px solid rgba(23,21,28,.42)!important;
  border-radius:11px!important;
  box-shadow:4px 5px 0 rgba(23,21,28,.12),0 18px 38px rgba(37,32,50,.16)!important;
}
.structure-card small{color:#725b85!important}
.structure-card img{mix-blend-mode:multiply!important}
.structure-card strong{color:var(--sat-ink)!important}

.expert-note{margin-top:30px!important;border-top:1px solid rgba(23,21,28,.28)!important;padding-top:18px!important}
.expert-note small{color:#725b85!important}
.expert-note strong{color:var(--sat-ink)!important}
.expert-note p{color:#6d676f!important}

/* Results stay in the game room but use the same paper sheet. */
.result-layer{background:rgba(23,21,28,.78)!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.result-card{
  border:1px solid rgba(23,21,28,.48)!important;
  border-radius:12px!important;
  background:var(--labo-sheet)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.28)!important;
}
.result-kicker{color:#725b85!important}
.result-mode{color:#77717d!important}
.result-score{background:var(--sat-lime)!important;border:1px solid rgba(23,21,28,.34)!important}
.result-card dl div{border-color:rgba(23,21,28,.25)!important}
.result-card dt,.result-card p{color:#77717d!important}
.result-card button{
  background:var(--sat-deep)!important;
  color:var(--sat-paper)!important;
  border:1px solid var(--sat-deep)!important;
  box-shadow:none!important;
}
.result-card button:hover{color:var(--sat-lilac)!important}
.result-card a{background:var(--labo-lilac-soft)!important;border:1px solid rgba(23,21,28,.28)!important}

@media(max-width:760px){
  .wrap{width:min(100% - 24px,var(--max))}
  .topbar-inner{height:60px!important}
  .sat-mark{font-size:25px!important}
  .brand-context strong{font-size:8.5px!important}
  .brand-context small{font-size:7px!important}
  .back{font-size:8px!important}
  .match-shell{padding-top:16px!important}
  .match-hero{
    grid-template-columns:1fr!important;
    gap:22px!important;
    padding:28px 22px 24px!important;
  }
  .match-meta{align-items:flex-start}
  .match-room{font-size:7px!important;text-align:right}
  .match-hero h1{font-size:clamp(58px,18vw,82px)!important}
  .match-hero p{font-size:15px!important;margin-top:14px!important}
  .mode-card{width:100%!important;min-width:0!important;padding:12px!important;grid-template-columns:1fr!important;gap:8px!important}
  .mode-card>span{text-align:left!important}
  .mode-switch button{min-height:58px!important}
  .taxonomy-scroll{grid-template-columns:repeat(6,minmax(92px,1fr))!important}
  .howto{font-size:11px!important}
  .game-panel{border-radius:10px!important;box-shadow:3px 4px 0 rgba(23,21,28,.10)!important}
  .score-strip button{border-left:0!important;border-top:1px solid rgba(23,21,28,.22)!important}
  .match-card{border-radius:8px!important;box-shadow:1.5px 2px 0 rgba(23,21,28,.10)!important}
  .aroma-thumb img{border-radius:6px!important}
}

@media(max-width:430px){
  .wrap{width:min(100% - 20px,var(--max))}
  .topbar-inner{gap:10px}
  .brand{gap:10px!important}
  .sat-mark{font-size:23px!important}
  .brand-context strong{font-size:7.5px!important;letter-spacing:.06em!important}
  .brand-context small{font-size:6.5px!important}
  .back{font-size:7.5px!important;letter-spacing:.07em!important}
  .match-hero{padding:24px 18px 21px!important;margin-bottom:14px!important}
  .match-meta{gap:10px;margin-bottom:9px}
  .match-meta .eyebrow{font-size:7.5px!important}
  .match-room{font-size:6.5px!important}
  .match-hero h1{font-size:clamp(54px,17.5vw,72px)!important}
  .match-route{font-size:7px!important}
  .mode-card-head small,.mode-card-head span{font-size:7px!important}
  .mode-switch{gap:7px!important}
  .mode-switch button>strong{font-size:17px!important}
  .match-taxonomy{margin-bottom:12px!important}
  .taxonomy-scroll{grid-template-columns:repeat(6,90px)!important}
  .taxonomy-tab{min-height:52px!important}
  .howto{padding:10px 11px!important}
  .score-strip>div{padding:9px 8px!important}
  .column-heads{padding-top:10px!important}
  .game-note{font-size:9px!important}
  .expert-note{margin-top:24px!important}
}

@media(prefers-reduced-motion:reduce){
  .match-card,.mode-switch button,.structure-card{transition:none!important}
}