:root{
  --bg:#f4efe4;
  --panel:#fffaf1;
  --ink:#292017;
  --muted:#756657;
  --accent:#87592f;
  --accent2:#d69a48;
  --closed:#3e3128;
  --open:#fffdf7;
  --selected:#fff1bf;
  --done:#dff4e7;
  --good:#24734a;
  --bad:#b33f35;
  --shadow:0 14px 36px rgba(67,43,20,.14);
  --radius:22px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif;
  color:var(--ink);
  min-height:100vh;
  background:
    radial-gradient(circle at 0% 0%,rgba(214,154,72,.26),transparent 35%),
    linear-gradient(135deg,#f7f1e7,#eadbc4);
}
header,main,footer{width:min(1180px,94vw);margin:auto}
header{padding:28px 0 16px}
.eyebrow{margin:0 0 6px;color:var(--accent);font-weight:900;letter-spacing:.12em;text-transform:uppercase}
h1{margin:0;font-size:clamp(28px,6vw,52px)}
.lead{margin:8px 0 0;color:var(--muted);line-height:1.7}
.panel,.hud,.message,.legend,.board{
  background:rgba(255,250,241,.92);
  border:1px solid rgba(80,50,20,.12);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.panel{padding:18px;margin-bottom:16px}
.settingGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
label{font-weight:900;color:#4b3725}
select,input{
  display:block;width:100%;margin-top:7px;padding:11px 12px;
  border-radius:14px;border:1px solid rgba(80,50,20,.18);background:#fff;font-size:16px;
}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
button{
  border:0;border-radius:999px;background:var(--accent);color:#fff;
  padding:12px 18px;font-weight:900;cursor:pointer;
  box-shadow:0 6px 14px rgba(70,40,10,.16)
}
.ghost{background:#fff;color:var(--accent);border:1px solid rgba(135,89,47,.35);box-shadow:none}
details{margin-top:12px;color:var(--muted)}
code,pre{background:#fff;border:1px solid rgba(80,50,20,.12);border-radius:12px}
pre{padding:12px;overflow:auto}
.hud{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:12px;margin-bottom:14px}
.stat{background:#fff;border-radius:16px;padding:12px;text-align:center}
.stat span{display:block;color:var(--muted);font-size:12px;font-weight:900}
.stat strong{display:block;font-size:clamp(18px,4vw,28px);margin-top:4px}
.message{padding:14px 16px;font-weight:900;margin:0 0 12px}
.message.good{color:var(--good)}
.message.bad{color:var(--bad)}
.legend{display:flex;flex-wrap:wrap;gap:10px 16px;padding:12px 16px;margin-bottom:14px;color:var(--muted);font-weight:800}
.dot{display:inline-block;width:14px;height:14px;border-radius:4px;margin-right:6px;vertical-align:-2px}
.openDot{background:var(--open);border:1px solid #d8c6ad}
.closedDot{background:var(--closed)}
.selectedDot{background:var(--selected);border:1px solid var(--accent2)}
.doneDot{background:var(--done);border:1px solid var(--good)}
.board{
  padding:16px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
  gap:10px;
  margin-bottom:18px;
}
.card{
  min-height:88px;border-radius:18px;padding:10px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-weight:900;font-size:clamp(17px,4.8vw,25px);
  line-height:1.25;cursor:pointer;user-select:none;
  border:2px solid transparent;
  transition:.12s transform,.12s background,.12s border,.12s color;
  word-break:break-word;
  position:relative;
}
.card:active{transform:scale(.985)}
.card.open{
  background:var(--open);
  border-color:rgba(135,89,47,.20);
  color:var(--ink);
}
.card.closed{opacity:.92;
  background:var(--closed);
  color:#fff;
  font-size:30px;
}
.card.revealed{
  background:var(--selected);
  border-color:var(--accent2);
  color:var(--ink);
}
.card.done{
  background:var(--done)!important;
  border-color:rgba(36,115,74,.45)!important;
  color:var(--good)!important;
}
.card.wrongFlash{
  animation:shake .22s linear 2;
  border-color:var(--bad)!important;
}
.card::after{
  position:absolute;top:7px;right:8px;font-size:11px;opacity:.65;font-weight:900;
}
.card.open::after{content:"OPEN"}
.card.closed::after{content:"PAIR";font-size:9px}
.card.revealed::after{content:"SELECT"}
.card.done::after{content:"OK"}
.smallText{font-size:16px}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-3px)}
  75%{transform:translateX(3px)}
}
footer{text-align:center;color:var(--muted);font-size:13px;padding:10px 0 28px}
@media(max-width:820px){
  .settingGrid{grid-template-columns:1fr 1fr}
  .hud{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .settingGrid{grid-template-columns:1fr}
  .board{grid-template-columns:repeat(3,1fr);gap:8px;padding:10px}
  .card{min-height:74px;padding:7px}
}

.card.open{
  box-shadow: inset 0 0 0 2px rgba(135,89,47,.08);
}
.card.closed{
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.06);
}


/* 選択中カードを強調 */
.card.selected{
  border:4px solid #ffffff !important;
  box-shadow:
    0 0 0 4px rgba(255,255,255,.55),
    0 0 18px rgba(255,255,255,.95),
    0 10px 24px rgba(0,0,0,.18);
  z-index:2;
  transform:translateY(-2px) scale(1.02);
}


/* 選択中は種類に関係なく、選択解除・正誤判定まで光り続ける */
.card.selected{
  border:4px solid #ffffff !important;
  box-shadow:
    0 0 0 5px rgba(255,255,255,.75),
    0 0 26px rgba(255,255,255,1),
    0 0 34px rgba(255,210,120,.75),
    0 12px 26px rgba(0,0,0,.22) !important;
  z-index:5;
  transform:translateY(-3px) scale(1.03);
  animation:selectedGlow 1s ease-in-out infinite alternate;
}

@keyframes selectedGlow{
  from{
    box-shadow:
      0 0 0 4px rgba(255,255,255,.65),
      0 0 18px rgba(255,255,255,.9),
      0 0 24px rgba(255,210,120,.55),
      0 12px 26px rgba(0,0,0,.20);
  }
  to{
    box-shadow:
      0 0 0 6px rgba(255,255,255,.9),
      0 0 30px rgba(255,255,255,1),
      0 0 42px rgba(255,210,120,.85),
      0 12px 26px rgba(0,0,0,.24);
  }
}


/* 選択中は白ではなく黄色で強調 */
.card.selected{
  border:4px solid #ffd400 !important;
  background:#fff1a8 !important;
  color:#2b2100 !important;
  box-shadow:
    0 0 0 5px rgba(255,212,0,.55),
    0 0 24px rgba(255,212,0,.95),
    0 0 38px rgba(255,170,0,.75),
    0 12px 26px rgba(0,0,0,.22) !important;
  z-index:5;
  transform:translateY(-3px) scale(1.03);
  animation:selectedYellowGlow 1s ease-in-out infinite alternate;
}

@keyframes selectedYellowGlow{
  from{
    box-shadow:
      0 0 0 4px rgba(255,212,0,.45),
      0 0 16px rgba(255,212,0,.8),
      0 0 24px rgba(255,170,0,.55),
      0 12px 26px rgba(0,0,0,.20);
  }
  to{
    box-shadow:
      0 0 0 7px rgba(255,212,0,.75),
      0 0 30px rgba(255,212,0,1),
      0 0 46px rgba(255,170,0,.9),
      0 12px 26px rgba(0,0,0,.24);
  }
}