.edu-game-container{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  max-width: 960px; margin: 1rem auto;
  border: 1px solid #e5e7eb; border-radius: 16px; padding: 12px;
  background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}
.edu-hud{ display:flex; gap:8px; align-items:center; justify-content:space-between; margin-bottom:8px; flex-wrap: wrap; }
.edu-hud .left, .edu-hud .right{ display:flex; gap:8px; align-items:center; flex-wrap: wrap; }
.edu-badge{ background:#f3f4f6; border-radius:999px; padding:4px 10px; font-size:12px; }
.edu-btn{ padding:6px 10px; border-radius:10px; border:1px solid #d1d5db; background:#ffffff; cursor:pointer; color:#000; font-weight:600; }
.edu-btn:hover{ background:#f8fafc; color:#000 !important; }
.edu-modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.45); z-index: 9999; }
.edu-modal[open]{ display:flex; }
.edu-card{ background:#fff; border-radius:16px; padding:16px; min-width: 300px; max-width: 90vw; box-shadow:0 8px 24px rgba(0,0,0,.2); }
.edu-footer{ margin-top: 10px; font-size: 12px; color:#6b7280; }
/* Dropdown */
.edu-dd-wrap{ position:relative; }
.edu-dd-menu{
  position:absolute; top: calc(100% + 6px); right:0;
  background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:6px;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  display:none; z-index: 1000; min-width: 180px;
}
.edu-dd-menu[open]{ display:block; }
.edu-dd-item{ display:block; width:100%; text-align:left; background:#fff; border:0; padding:8px 10px; border-radius:8px; cursor:pointer; color:#000; }
.edu-dd-item:hover{ background:#f3f4f6; color:#000 !important; }
/* Memory Flip */
.edu-grid{ display:grid; gap:6px; }
.edu-mem-grid{ grid-template-columns: repeat(var(--cols), 1fr); }
.edu-card-tile{ position:relative; aspect-ratio:1/1; border-radius:12px; overflow:hidden; cursor:pointer; border:1px solid #e5e7eb; background:#111; transition: transform .2s; }
.edu-card-tile:active{ transform: scale(0.98); }
.edu-card-tile .face{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800;  }
.edu-card-tile .front{ background:#111; }
.edu-card-tile .back{ background:#2563eb; display:none; font-family: 'Segoe UI Symbol','Apple Color Emoji','Noto Color Emoji', system-ui, sans-serif; }
.edu-card-tile.flipped .front{ display:none; }
.edu-card-tile.flipped .back{ display:flex; }
.edu-card-tile.matched{ outline: 3px solid #22c55e; }
/* Maze Escape */
.edu-maze-wrap{ position:relative; }
.edu-maze-canvas{ width:100%; height:auto; border-radius:12px; display:block; background:#111; }
.edu-maze-dpad{ position:absolute; right:10px; bottom:10px; display:grid; grid-template-areas: ". up ." "left . right" ". down ."; gap:6px; }
.edu-maze-dpad button{ width:44px; height:44px; border-radius:10px; border:0; background: transparent; color:#fff; box-shadow:none; }
.edu-maze-dpad button:active{ transform: scale(0.96); }
/* Sliding Puzzle */
.edu-slide-wrap{ position:relative; user-select:none; touch-action: manipulation; }
.edu-slide-board{ position:relative; border-radius:12px; background:#0b1220; overflow:hidden; }
.edu-slide-tile{ position:absolute; border-radius:10px; border:1px solid #0d1b2a; background:#1f2a44; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; transition: transform .12s ease; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.edu-slide-tile[data-empty="1"]{ opacity:0; pointer-events:none; }

.edu-card-tile .face span{ display:inline-block; font-size: 1em; line-height: 1; transform: scale(1.12); }
.edu-badge-success{ background:#dcfce7; color:#065f46; }
.edu-badge-info{ background:#e0f2fe; color:#075985; }

/* Memory Flip faces visibility */
.edu-card-tile .front{ display:flex; }
.edu-card-tile .back{ display:none; }
.edu-card-tile.flipped .front, .edu-card-tile.matched .front{ display:none; }
.edu-card-tile.flipped .back, .edu-card-tile.matched .back{ display:flex; }

.edu-game-container .edu-card-tile .face{ font-size: var(--tile-font, 48px) !important; }

/* Sliding Puzzle choose dropdown: 4 columns + toggle */
.edu-dd-menu.sp-dd-4col{ display:none; }
.edu-dd-menu.sp-dd-4col.open{ display:grid; grid-template-columns:repeat(4,minmax(120px,1fr)); gap:6px; max-height:65vh; overflow:auto; padding:8px; }
.edu-dd-menu.sp-dd-4col .edu-dd-item{ width:100%; text-align:left; }