
:root{
  --purple:#7c4bc9;
  --gold:#d4a93a;
  --cream:#fffaf1;
  --pink:#f8e8ff;
  --text:#3b2d4a;
  --green:#88b36b;
  --card:#ffffff;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:linear-gradient(to bottom,#f5efff,#fffaf1);
  color:var(--text);
}
.wrap{max-width:1120px;margin:0 auto;padding:24px}
.hero{text-align:center;padding:24px 20px 10px}
h1,h2,h3{margin:0 0 12px}
h1{font-size:2.5rem;color:var(--purple)}
h2{font-size:1.8rem;color:var(--purple)}
p{line-height:1.6}
.top-note,.section,.game-card,.panel{
  background:var(--card);
  border-radius:22px;
  box-shadow:0 10px 25px rgba(0,0,0,.06);
  border:1px solid #f0e6ff;
}
.top-note{padding:14px 18px;margin:18px auto 28px;max-width:850px}
.section{padding:24px;margin:0 0 28px}
.small{font-size:.96rem;color:#6d5a82}
.btn,.btn-link{
  display:inline-block;
  background:var(--gold);
  color:#fff;
  border:none;
  border-radius:14px;
  padding:12px 16px;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  box-shadow:0 8px 18px rgba(124,75,201,.12);
}
.btn.secondary,.btn-link.secondary{background:var(--purple)}
.btn.ghost{background:#fff;color:var(--purple);border:1px solid #e2d0ff}
.link-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:14px 0 28px}
.back-link{display:inline-block;margin-bottom:12px;text-decoration:none;color:var(--purple);font-weight:700}
.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:16px}
.game-card{padding:20px}
.game-card p{min-height:72px}
.panel-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:start}
.hero-image{
  display:block;width:100%;max-width:240px;height:auto;margin:0 auto 14px;
  border-radius:20px;border:1px solid #ead9ff;background:#fff;
}
footer{text-align:center;padding:10px 20px 40px;color:#6d5a82}
.checklist{display:grid;gap:10px;margin-top:12px}
.checklist-item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-radius:14px;background:#fbf8ff;border:1px solid #eee3ff;font-weight:700;
}
.checklist-item.found{background:#eef8e8;border-color:#cfe8bf;color:#335927}
.checklist-icon{font-size:1.25rem;width:24px;text-align:center}
.memory-grid{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:14px}
.memory-card{
  position:relative;aspect-ratio:1/1;border:none;padding:0;background:transparent;cursor:pointer;
}
.memory-card-inner{
  position:absolute;inset:0;border-radius:18px;transform-style:preserve-3d;
  transition:transform .45s ease;box-shadow:0 8px 20px rgba(0,0,0,.08);
}
.memory-card.is-flipped .memory-card-inner,
.memory-card.is-matched .memory-card-inner{transform:rotateY(180deg)}
.memory-face{
  position:absolute;inset:0;border-radius:18px;overflow:hidden;backface-visibility:hidden;
  display:flex;align-items:center;justify-content:center;border:2px solid #ead9ff;
}
.memory-front{
  background:linear-gradient(135deg,#f8e8ff,#fffaf1);
  color:var(--purple);font-size:2.4rem;font-weight:900;
}
.memory-back{background:#fff;transform:rotateY(180deg)}
.memory-back img{width:100%;height:100%;object-fit:cover}
.memory-back span{
  position:absolute;left:8px;right:8px;bottom:8px;padding:6px 8px;border-radius:999px;
  background:rgba(124,75,201,.88);color:#fff;font-size:.82rem;font-weight:700;text-align:center;
}
.status-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:16px 0}
.badge{background:#fbf8ff;border:1px solid #eee3ff;padding:10px 12px;border-radius:999px;font-weight:700}
.find-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
.find-scene{
  position:relative;border-radius:24px;overflow:hidden;border:3px solid #ead9ff;background:#f4eefb;
}
.find-scene img{display:block;width:100%;height:auto}
.hidden-item{
  position:absolute;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:999px;
  background:transparent;
  cursor:pointer;
  font-size:1.4rem;
  line-height:1;
  opacity:.42;
  filter:drop-shadow(0 2px 2px rgba(255,255,255,.9));
  transform:translate(-50%,-50%) rotate(-8deg);
}
.hidden-item:hover,.hidden-item:focus{opacity:.82;outline:2px solid rgba(124,75,201,.2);outline-offset:2px}
.hidden-item.found{
  opacity:1;
  background:#fff;
  box-shadow:0 5px 14px rgba(0,0,0,.12);
}
.maze-wrap{display:grid;gap:14px;justify-content:start}
.maze{display:grid;grid-template-columns:repeat(8,44px);gap:5px;margin-top:8px}
.cell{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.35rem;background:#f7f0ff;border:1px solid #ead9ff}
.wall{background:#8d74a8}
.start{background:#dff4d2}
.goal{background:#fff0be}
.player{background:#ffd8ef}
.controls{display:grid;grid-template-columns:repeat(3,70px);gap:8px;justify-content:center;margin-top:8px}
.controls .spacer{visibility:hidden}
.coloring-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:16px}
.sheet{background:#fffaf7;border:2px dashed #e2c98d;border-radius:18px;padding:16px}
.sheet img{width:100%;height:260px;object-fit:contain;border-radius:12px;background:#fff;border:1px solid #f0e6ff}
.sheet h3{font-size:1.05rem}
.sheet-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.center{text-align:center}
@media (max-width:860px){
  .panel-grid,.find-layout{grid-template-columns:1fr}
}
@media (max-width:700px){
  h1{font-size:2rem}
  .memory-grid{grid-template-columns:repeat(3,minmax(95px,1fr))}
  .maze{grid-template-columns:repeat(8,36px)}
  .cell{width:36px;height:36px;font-size:1rem}
}
@media (max-width:480px){
  .memory-grid{grid-template-columns:repeat(2,minmax(120px,1fr))}
}


.site-header .wrap,
.site-footer .wrap {padding:0}
.site-header .nav-links a,
.site-footer .footer-links a {text-decoration:none}
