.game-page { padding-block: 46px 80px; }
.game-breadcrumb { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); text-decoration: none; font-size: 13px; margin-bottom: 24px; }
.game-breadcrumb:hover { color: var(--brand); }
.game-page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 28px; }
.game-page-header h1 { margin: 0 0 12px; font-size: clamp(36px, 6vw, 64px); letter-spacing: -.04em; }
.game-page-header p { max-width: 660px; color: var(--muted); line-height: 1.85; margin: 0; }
.game-best { flex: 0 0 auto; min-width: 150px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px 20px; }
.game-best span { display: block; color: var(--muted); font-size: 11px; margin-bottom: 6px; }
.game-best strong { font-size: 26px; color: var(--brand); font-variant-numeric: tabular-nums; }
.smart-game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
.smart-board-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(16px, 4vw, 28px); }
.smart-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 22px; }
.smart-toolbar .stat-box { min-width: 95px; padding: 10px 14px; border-radius: 13px; background: var(--surface-soft); }
.stat-box span { display: block; color: var(--muted); font-size: 10px; margin-bottom: 4px; }
.stat-box strong { font-size: 19px; font-variant-numeric: tabular-nums; }
.smart-toolbar .push { margin-inline-start: auto; }
.game-help { display: grid; gap: 18px; }
.help-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 22px; }
.help-card h2, .help-card h3 { margin: 0 0 10px; font-size: 17px; }
.help-card p, .help-card li { color: var(--muted); font-size: 13px; line-height: 1.85; }
.help-card ul { padding-inline-start: 20px; margin: 0; }
.game-status { min-height: 28px; margin: 16px 0 0; text-align: center; font-weight: 800; color: var(--brand); }
.difficulty-select { display: inline-flex; align-items: center; gap: 8px; }
.difficulty-select label { color: var(--muted); font-size: 12px; font-weight: 700; }
.difficulty-select select { border: 1px solid var(--line); background: var(--surface-soft); color: var(--text); border-radius: 11px; padding: 10px 12px; }

.board-2048 { direction: ltr; width: min(520px, 100%); aspect-ratio: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 10px; margin-inline: auto; background: color-mix(in srgb, var(--brand) 13%, var(--surface-soft)); border-radius: 22px; padding: 12px; touch-action: none; }
.tile-2048 { min-width:0; min-height:0; width:100%; height:100%; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--muted) 12%, var(--surface)); color: var(--text); font-size: clamp(21px, 5vw, 38px); font-weight: 800; transition: background .15s ease, transform .15s ease; }
.tile-2048[data-value="2"] { background: #ede9ff; color: #4c3e77; }
.tile-2048[data-value="4"] { background: #dcd4ff; color: #453674; }
.tile-2048[data-value="8"] { background: #c9ff71; color: #314900; }
.tile-2048[data-value="16"] { background: #86e6ee; color: #075a62; }
.tile-2048[data-value="32"] { background: #ff9cbc; color: #74233d; }
.tile-2048[data-value="64"] { background: #ff6d9b; color: #fff; }
.tile-2048[data-value="128"] { background: #8a6bff; color: #fff; font-size: clamp(18px, 4.3vw, 32px); }
.tile-2048[data-value="256"] { background: #6d4aff; color: #fff; font-size: clamp(18px, 4.3vw, 32px); }
.tile-2048[data-value="512"] { background: #4d2ed3; color: #fff; font-size: clamp(18px, 4.3vw, 32px); }
.tile-2048[data-value="1024"], .tile-2048[data-value="2048"] { background: linear-gradient(145deg, #ffb62e, #ff7c28); color: #fff; font-size: clamp(15px, 3.7vw, 28px); }
.keyboard-tip { text-align: center; color: var(--muted); font-size: 12px; margin: 15px 0 0; }

.sudoku-grid { direction: ltr; width: min(540px, 100%); aspect-ratio: 1; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); grid-template-rows: repeat(9, minmax(0, 1fr)); border: 3px solid var(--text); margin-inline: auto; background: var(--line); gap: 1px; }
.sudoku-cell { min-width: 0; border: 0; background: var(--surface); color: var(--brand); font-size: clamp(15px, 3.5vw, 26px); font-weight: 800; cursor: pointer; border-radius: 0; }
.sudoku-cell:nth-child(3n) { border-right: 2px solid var(--text); }
.sudoku-cell:nth-child(9n) { border-right: 0; }
.sudoku-cell:nth-child(n+19):nth-child(-n+27), .sudoku-cell:nth-child(n+46):nth-child(-n+54) { border-bottom: 2px solid var(--text); }
.sudoku-cell.is-fixed { color: var(--text); background: var(--surface-soft); }
.sudoku-cell.is-selected { background: var(--brand-soft); box-shadow: inset 0 0 0 3px var(--brand); }
.sudoku-cell.is-related { background: color-mix(in srgb, var(--brand-soft) 45%, var(--surface)); }
.sudoku-cell.is-error { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--surface)); }
.number-pad { direction: ltr; width: min(540px, 100%); display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin: 14px auto 0; }
.number-pad button { border: 1px solid var(--line); background: var(--surface-soft); color: var(--text); border-radius: 10px; padding: 11px 4px; font-weight: 800; cursor: pointer; }
.number-pad button:hover { border-color: var(--brand); color: var(--brand); }

.word-stage { min-height: 470px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-block: 20px; }
.word-category { display: inline-block; background: var(--brand-soft); color: var(--brand-deep); border-radius: 999px; padding: 7px 13px; font-size: 11px; font-weight: 800; }
.word-clue { color: var(--muted); text-align: center; line-height: 1.8; min-height: 30px; margin: 18px 0 8px; }
.word-answer { direction: rtl; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; min-height: 70px; margin: 12px 0 24px; }
.answer-slot { width: 48px; height: 56px; display: grid; place-items: center; border-bottom: 3px solid var(--brand); color: var(--text); font-size: 28px; font-weight: 800; }
.letter-bank { direction: rtl; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; max-width: 560px; }
.letter-tile { width: 58px; height: 58px; border: 0; border-radius: 16px; background: linear-gradient(145deg, var(--brand), #8f72ff); color: #fff; font-size: 26px; font-weight: 800; cursor: pointer; box-shadow: 0 9px 20px color-mix(in srgb, var(--brand) 20%, transparent); }
.letter-tile:disabled { opacity: .25; cursor: default; box-shadow: none; }
.word-actions { display: flex; justify-content: center; gap: 9px; flex-wrap: wrap; margin-top: 24px; }
.progress-line { width: 100%; height: 7px; border-radius: 999px; background: var(--surface-soft); overflow: hidden; margin-bottom: 22px; }
.progress-line span { display: block; height: 100%; background: var(--brand); transition: width .25s ease; }

.more-games { padding-block: 10px 80px; }
.more-games h2 { font-size: 25px; margin-bottom: 18px; }
.more-games-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.more-games-grid a { background: var(--surface); border: 1px solid var(--line); border-radius: 15px; padding: 17px; text-decoration: none; font-weight: 800; }
.more-games-grid a:hover { border-color: var(--brand); color: var(--brand); }

@media (max-width: 850px) {
  .smart-game-layout { grid-template-columns: 1fr; }
  .game-help { grid-template-columns: 1fr 1fr; }
  .game-page-header { align-items: flex-start; }
}
@media (max-width: 620px) {
  .game-page { padding-top: 28px; }
  .game-page-header { display: block; }
  .game-best { display: inline-block; margin-top: 18px; }
  .game-help { grid-template-columns: 1fr; }
  .smart-toolbar .push { margin-inline-start: 0; width: 100%; }
  .board-2048 { gap: 7px; padding: 8px; border-radius: 16px; }
  .tile-2048 { border-radius: 10px; }
  .number-pad { grid-template-columns: repeat(5, 1fr); }
  .letter-tile { width: 52px; height: 52px; }
  .answer-slot { width: 39px; height: 50px; font-size: 24px; }
  .more-games-grid { grid-template-columns: 1fr; }
}

/* ألعاب الآركيد الجديدة */
.arcade-canvas-wrap { width: min(520px, 100%); margin-inline: auto; position: relative; }
.arcade-canvas { display: block; width: 100%; height: auto; border-radius: 22px; background: var(--surface-soft); border: 1px solid var(--line); touch-action: none; user-select: none; }
.arcade-controls { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.arcade-control { min-width: 72px; min-height: 48px; border: 1px solid var(--line); background: var(--surface-soft); color: var(--text); border-radius: 14px; font-size: 22px; font-weight: 800; cursor: pointer; touch-action: manipulation; }
.arcade-control:active { transform: scale(.96); background: var(--brand-soft); }
.arcade-note { text-align: center; color: var(--muted); font-size: 12px; line-height: 1.8; margin: 13px 0 0; }

.arrow-board { direction: ltr; width: min(560px, 100%); display: grid; grid-template-columns: repeat(var(--arrow-size, 5), 1fr); gap: 8px; margin-inline: auto; }
.arrow-cell { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); color: var(--brand); display: grid; place-items: center; font-size: clamp(20px, 5vw, 34px); font-weight: 900; cursor: pointer; transition: transform .15s ease, opacity .2s ease, background .15s ease; }
.arrow-cell:hover { border-color: var(--brand); transform: translateY(-2px); }
.arrow-cell.is-free { background: var(--brand-soft); }
.arrow-cell.is-gone { opacity: 0; transform: scale(.55); pointer-events: none; }
.arrow-cell.is-wrong { animation: arrow-shake .22s linear 2; background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); }
@keyframes arrow-shake { 0%,100%{transform:translateX(0)} 35%{transform:translateX(-5px)} 70%{transform:translateX(5px)} }

.penalty-board { cursor: crosshair; }
.power-row { display: grid; grid-template-columns: auto minmax(120px, 1fr) auto; gap: 10px; align-items: center; width: min(520px, 100%); margin: 14px auto 0; }
.power-row label, .power-row span { color: var(--muted); font-size: 12px; font-weight: 800; }
.power-row input { width: 100%; accent-color: var(--brand); }

.battle-health { width: min(520px, 100%); margin: 12px auto 0; }
.health-track { height: 10px; border-radius: 999px; overflow: hidden; background: var(--surface-soft); }
.health-fill { display: block; height: 100%; width: 100%; background: var(--success); transition: width .18s ease; }
.health-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; color: var(--muted); font-size: 11px; }

@media (max-width: 620px) {
  .arrow-board { gap: 6px; }
  .arrow-cell { border-radius: 10px; }
  .arcade-control { min-width: 64px; }
}

/* الشطرنج والداما والمتاهة */
.game-select-label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 800; }
.game-select { min-width: 105px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); color: var(--text); padding: 8px 10px; font-weight: 800; }
.smart-toolbar button:disabled { opacity: .45; cursor: not-allowed; }

.chess-board, .checkers-board { direction: ltr; width: min(620px, 100%); aspect-ratio: 1 / 1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); margin-inline: auto; overflow: hidden; border: 3px solid color-mix(in srgb, var(--text) 78%, var(--surface)); border-radius: 16px; box-shadow: 0 16px 38px color-mix(in srgb, var(--text) 10%, transparent); }
.chess-cell, .checkers-cell { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.chess-cell.is-light { background: color-mix(in srgb, var(--brand-soft) 32%, #f5efe3); }
.chess-cell.is-dark { background: color-mix(in srgb, var(--brand) 30%, #665a73); }
.chess-cell.is-last { box-shadow: inset 0 0 0 999px rgba(200,255,90,.22); }
.chess-cell.is-selected, .checkers-cell.is-selected { box-shadow: inset 0 0 0 4px var(--brand); z-index: 1; }
.chess-cell.is-target::after, .checkers-cell.is-target::after { content: ""; position: absolute; width: 22%; aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--brand) 70%, transparent); }
.chess-cell.is-capture::after { content: ""; position: absolute; inset: 7%; border: 4px solid color-mix(in srgb, var(--danger) 80%, transparent); border-radius: 50%; }
.chess-cell.is-check { box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--danger) 38%, transparent); }
.chess-piece { position: relative; z-index: 2; font-family: "Times New Roman", serif; font-size: clamp(31px, 6vw, 58px); line-height: 1; user-select: none; filter: drop-shadow(0 2px 1px rgba(0,0,0,.16)); }
.chess-piece.is-white { color: #fffaf0; text-shadow: 0 1px 0 #222, 1px 0 0 #222, -1px 0 0 #222, 0 -1px 0 #222; }
.chess-piece.is-black { color: #211d26; text-shadow: 0 1px 0 rgba(255,255,255,.24); }

.checkers-cell.is-rest { background: color-mix(in srgb, var(--surface) 85%, #eadbc8); cursor: default; }
.checkers-cell.is-playable { background: color-mix(in srgb, var(--brand) 20%, #554b57); }
.checker-piece { position: relative; z-index: 2; width: 68%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; border: 3px solid rgba(255,255,255,.36); box-shadow: inset 0 -6px 0 rgba(0,0,0,.14), 0 5px 10px rgba(0,0,0,.18); font-size: clamp(13px, 2.5vw, 24px); }
.checker-piece.is-red { background: #d94d64; color: #fff4b0; }
.checker-piece.is-black { background: #282432; color: #fff4b0; }
.checker-piece.is-king::after { content: ""; position: absolute; inset: 14%; border: 2px solid currentColor; border-radius: 50%; }

.maze-wrap { width: min(660px, 100%); margin-inline: auto; }
.maze-canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 18px; border: 1px solid var(--line); background: var(--text); touch-action: none; }
.maze-controls { width: min(250px, 100%); margin: 15px auto 0; display: grid; justify-items: center; gap: 7px; direction: ltr; }
.maze-controls > div { display: grid; grid-template-columns: repeat(3, 64px); gap: 7px; }
.maze-controls button { width: 64px; height: 48px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); color: var(--text); font-size: 22px; font-weight: 800; cursor: pointer; }
.maze-controls button:active { transform: scale(.96); background: var(--brand-soft); }

@media (max-width: 620px) {
  .chess-board, .checkers-board { border-width: 2px; border-radius: 10px; }
  .chess-cell.is-selected, .checkers-cell.is-selected { box-shadow: inset 0 0 0 3px var(--brand); }
  .checker-piece { border-width: 2px; }
  .game-select-label { width: 100%; }
  .game-select { width: 100%; }
}

/* حارس المجرة */
.galaxy-canvas-wrap { width: min(450px, 100%); }
.galaxy-canvas { background: #050512; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 18px 40px rgba(5,5,20,.18); }

.checkers-cell.is-capture::after { width: 54%; background: transparent; border: 3px solid color-mix(in srgb, var(--danger) 80%, transparent); }

/* ألعاب التركيز الجديدة */
.logic-board-card { overflow: hidden; }
.mines-board { direction:ltr; width:min(560px,100%); aspect-ratio:1; display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); grid-template-rows:repeat(9,minmax(0,1fr)); gap:3px; margin-inline:auto; background:var(--surface-soft); padding:5px; border:1px solid var(--line); border-radius:16px; touch-action:manipulation; }
.mine-cell { min-width:0; min-height:0; border:1px solid var(--line); border-radius:7px; background:color-mix(in srgb,var(--brand-soft) 45%,var(--surface)); color:var(--text); font-weight:900; font-size:clamp(12px,3.4vw,22px); padding:0; cursor:pointer; }
.mine-cell.is-open { background:var(--surface); }
.mine-cell.is-mine { background:color-mix(in srgb,var(--danger) 18%,var(--surface)); }
.mine-cell.is-flagged { color:var(--danger); }
.logic-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; justify-content:center; }
.logic-actions .is-active { box-shadow:inset 0 0 0 2px var(--brand); background:var(--brand-soft); }

.hashi-board { position:relative; width:min(620px,100%); aspect-ratio:1; margin-inline:auto; border:1px solid var(--line); border-radius:18px; background:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:calc(100% / 6) calc(100% / 6); overflow:hidden; direction:ltr; }
.hashi-bridge { position:absolute; transform-origin:left center; height:8px; z-index:1; pointer-events:none; }
.hashi-bridge::before,.hashi-bridge::after { content:""; position:absolute; left:0; right:0; height:3px; border-radius:4px; background:var(--brand); top:2px; }
.hashi-bridge.is-double::before { top:0; }
.hashi-bridge.is-double::after { top:5px; }
.hashi-island { position:absolute; z-index:3; width:clamp(34px,9vw,52px); aspect-ratio:1; transform:translate(-50%,-50%); border:3px solid var(--brand); border-radius:50%; background:var(--surface); color:var(--text); display:grid; place-items:center; font-weight:900; font-size:clamp(15px,4vw,24px); cursor:pointer; padding:0; touch-action:manipulation; }
.hashi-island.is-selected { background:var(--brand); color:white; }
.hashi-island.is-complete { border-color:#25a765; }

.slither-board { --n:5; position:relative; direction:ltr; width:min(560px,100%); aspect-ratio:1; margin-inline:auto; background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; touch-action:manipulation; }
.slither-clue { position:absolute; z-index:1; width:calc(100% / var(--n)); height:calc(100% / var(--n)); display:grid; place-items:center; font-weight:900; color:var(--text); font-size:clamp(14px,4vw,24px); pointer-events:none; }
.slither-edge { position:absolute; z-index:3; border:0; padding:0; background:transparent; cursor:pointer; touch-action:manipulation; }
.slither-edge.horizontal { height:14px; transform:translateY(-50%); }
.slither-edge.vertical { width:14px; transform:translateX(-50%); }
.slither-edge::after { content:""; position:absolute; background:color-mix(in srgb,var(--muted) 30%,transparent); border-radius:5px; }
.slither-edge.horizontal::after { left:4px; right:4px; height:3px; top:50%; transform:translateY(-50%); }
.slither-edge.vertical::after { top:4px; bottom:4px; width:3px; left:50%; transform:translateX(-50%); }
.slither-edge.is-on::after { background:var(--brand); height:5px; }
.slither-edge.vertical.is-on::after { width:5px; height:auto; }
.slither-dot { position:absolute; z-index:4; width:8px; height:8px; border-radius:50%; background:var(--text); transform:translate(-50%,-50%); pointer-events:none; }

@media (max-width:620px) {
  .mines-board { gap:2px; padding:3px; border-radius:10px; }
  .mine-cell { border-radius:4px; }
  .hashi-board,.slither-board { border-radius:10px; }
}

/* لعبة التدافع والاستراتيجية */
.strategy-board-card { min-width: 0; }
.strategy-dashboard { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.strategy-canvas-wrap { width:100%; overflow:hidden; border-radius:18px; border:1px solid var(--line); background:#203a52; }
.strategy-canvas-wrap canvas { display:block; width:100%; height:auto; aspect-ratio:900/320; touch-action:manipulation; }
.strategy-controls { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.strategy-spawn { display:flex; align-items:center; gap:9px; }
.strategy-spawn span { font-size:11px; opacity:.78; }
.strategy-controls button:disabled { opacity:.45; cursor:not-allowed; }
@media (max-width:700px){
  .strategy-dashboard{grid-template-columns:repeat(2,minmax(0,1fr));}
  .strategy-controls{display:grid;grid-template-columns:1fr 1fr;}
  .strategy-controls .secondary-button{grid-column:1/-1;}
  .strategy-controls button{min-height:48px;justify-content:center;}
}

/* أربعة على التوالي */
.connect-four-card-page { min-width: 0; }
.connect-four-shell { width: min(690px, 100%); margin-inline: auto; direction: ltr; }
.connect-column-hints { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(3px, .8vw, 7px); padding: 0 clamp(8px, 1.8vw, 16px) 8px; }
.connect-column-hint { position: relative; min-width: 0; height: 24px; border: 0; background: transparent; cursor: pointer; padding: 0; }
.connect-column-hint::after { content: "▼"; position: absolute; inset: 0; display: grid; place-items: center; color: color-mix(in srgb, var(--brand) 58%, var(--muted)); font-size: 14px; opacity: .35; transition: opacity .15s ease, transform .15s ease; }
.connect-column-hint:hover::after, .connect-column-hint:focus-visible::after { opacity: 1; transform: translateY(2px); }
.connect-column-hint:disabled { cursor: not-allowed; }
.connect-column-hint:disabled::after { opacity: .08; }
.connect-four-board { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); gap: clamp(4px, .9vw, 8px); width: 100%; aspect-ratio: 7 / 6; padding: clamp(8px, 1.8vw, 16px); background: linear-gradient(155deg, color-mix(in srgb, var(--brand) 88%, #273e8d), color-mix(in srgb, var(--brand-deep) 88%, #16264e)); border: 1px solid color-mix(in srgb, var(--brand) 65%, var(--line)); border-radius: 22px; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 18px 38px rgba(29,31,72,.16); touch-action: manipulation; }
.connect-cell { position: relative; min-width: 0; min-height: 0; border: 0; border-radius: 50%; padding: 0; cursor: pointer; background: color-mix(in srgb, var(--surface) 94%, #fff); box-shadow: inset 0 4px 10px rgba(0,0,0,.16), 0 1px 0 rgba(255,255,255,.12); -webkit-tap-highlight-color: transparent; }
.connect-cell::after { content: ""; position: absolute; inset: 10%; border-radius: 50%; background: transparent; transition: transform .15s ease, box-shadow .15s ease; }
.connect-cell.is-player::after { background: linear-gradient(145deg, #9c7cff, #5a3bc9); box-shadow: inset 0 3px 4px rgba(255,255,255,.28), inset 0 -5px 8px rgba(37,23,98,.26), 0 4px 8px rgba(35,22,88,.22); }
.connect-cell.is-bot::after { background: linear-gradient(145deg, #ffd65c, #e99324); box-shadow: inset 0 3px 4px rgba(255,255,255,.3), inset 0 -5px 8px rgba(124,71,0,.22), 0 4px 8px rgba(97,58,0,.18); }
.connect-cell.is-last::before { content: ""; position: absolute; inset: 2%; border: 3px solid rgba(255,255,255,.82); border-radius: 50%; z-index: 2; pointer-events: none; }
.connect-cell.is-winning::after { animation: connectWin .7s ease-in-out infinite alternate; }
.connect-cell:disabled { cursor: default; }
.connect-player-dot { color: #7456df; }
.connect-bot-dot { color: #efa72e; }
@keyframes connectWin { from { transform: scale(.88); filter: brightness(1); } to { transform: scale(1.04); filter: brightness(1.18); } }
@media (max-width: 620px) {
  .connect-four-board { border-radius: 15px; gap: 4px; padding: 7px; }
  .connect-column-hints { gap: 4px; padding-inline: 7px; }
  .connect-cell.is-last::before { border-width: 2px; }
}

/* الثعبان */
.snake-card-page { min-width: 0; }
.snake-toolbar { align-items: end; }
.snake-stage { position: relative; width: min(650px, 100%); margin-inline: auto; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: var(--surface-soft); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 38px rgba(29,31,72,.10); touch-action: none; user-select: none; }
.snake-canvas { display: block; width: 100%; height: 100%; }
.snake-overlay { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 28px; text-align: center; background: color-mix(in srgb, var(--surface) 76%, transparent); backdrop-filter: blur(3px); color: var(--text); }
.snake-overlay[hidden] { display: none; }
.snake-overlay strong { font-size: clamp(26px, 5vw, 42px); }
.snake-overlay span { max-width: 420px; color: var(--muted); line-height: 1.8; }
.snake-controls { width: min(300px, 100%); margin: 16px auto 0; display: grid; justify-items: center; gap: 8px; direction: ltr; }
.snake-controls > div { display: grid; grid-template-columns: repeat(3, 72px); gap: 8px; }
.snake-controls button { width: 72px; height: 54px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); color: var(--text); font-size: 24px; font-weight: 900; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.snake-controls button:active { transform: scale(.96); background: var(--brand-soft); }
@media (min-width: 900px) { .snake-controls { opacity: .82; } }
@media (max-width: 620px) {
  .snake-stage { border-radius: 14px; }
  .snake-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .snake-toolbar .game-select-label { width: 100%; }
  .snake-toolbar .game-select { width: 100%; }
  .snake-controls > div { grid-template-columns: repeat(3, 64px); }
  .snake-controls button { width: 64px; height: 50px; }
}


/* Game Pack 1: Breakout / Simon / Whack-a-Mole */
.breakout-card-page,.simon-card-page,.whack-card-page{min-width:0}
.breakout-stage{position:relative;width:min(820px,100%);margin-inline:auto;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#161936;touch-action:none;user-select:none}
.breakout-stage canvas{display:block;width:100%;height:auto;aspect-ratio:760/500;touch-action:none}
.arcade-overlay{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:8px;padding:22px;text-align:center;background:rgba(15,18,42,.58);backdrop-filter:blur(2px);color:#fff;cursor:pointer}
.arcade-overlay[hidden]{display:none}.arcade-overlay strong{font-size:clamp(26px,5vw,42px)}.arcade-overlay span{max-width:430px;line-height:1.8;color:#e3e2f6}

.simon-stage{position:relative;width:min(590px,100%);aspect-ratio:1;margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px;border-radius:50%;background:color-mix(in srgb,var(--text) 18%,var(--surface));box-shadow:0 18px 42px rgba(20,18,50,.14);direction:ltr}
.simon-pad{border:0;cursor:pointer;touch-action:manipulation;transition:transform .09s ease,filter .12s ease,box-shadow .12s ease;display:grid;place-items:center;color:rgba(255,255,255,.9);font-size:22px;font-weight:900;-webkit-tap-highlight-color:transparent}
.simon-pad span{opacity:.48}.simon-pad:active{transform:scale(.98)}.simon-pad.is-lit{filter:brightness(1.75) saturate(1.1);box-shadow:inset 0 0 36px rgba(255,255,255,.72),0 0 28px rgba(255,255,255,.28);transform:scale(.985)}
.pad-0{background:#7654df;border-radius:100% 18px 18px 18px}.pad-1{background:#e6a12b;border-radius:18px 100% 18px 18px}.pad-2{background:#33a77a;border-radius:18px 18px 18px 100%}.pad-3{background:#3e83d7;border-radius:18px 18px 100% 18px}
.simon-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:31%;aspect-ratio:1;border-radius:50%;display:grid;place-content:center;text-align:center;background:var(--surface);border:8px solid color-mix(in srgb,var(--text) 15%,var(--surface));box-shadow:0 8px 24px rgba(0,0,0,.18);direction:rtl;pointer-events:none}.simon-center strong{font-size:clamp(20px,4vw,34px)}.simon-center small{color:var(--muted);margin-top:4px}

.whack-board{direction:ltr;width:min(650px,100%);margin-inline:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:16px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(160deg,color-mix(in srgb,var(--brand-soft) 32%,var(--surface)),var(--surface-soft))}
.whack-cell{position:relative;aspect-ratio:1;border:0;border-radius:22px;background:transparent;cursor:pointer;overflow:hidden;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.whack-hole{position:absolute;left:10%;right:10%;bottom:16%;height:30%;border-radius:50%;background:linear-gradient(#342e46,#171420);box-shadow:inset 0 8px 12px rgba(0,0,0,.45)}
.whack-target{position:absolute;left:22%;right:22%;bottom:-10%;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#ffcc56,#e9783d);color:#fff;font-size:clamp(22px,7vw,48px);font-weight:900;transform:translateY(90%);transition:transform .15s ease;box-shadow:inset 0 4px 0 rgba(255,255,255,.3),0 8px 18px rgba(67,31,20,.24)}
.whack-cell.is-active .whack-target{transform:translateY(0)}.whack-cell.is-hit .whack-target{transform:translateY(12%) scale(.88);filter:brightness(1.3)}

@media(max-width:620px){.breakout-stage{border-radius:13px}.simon-stage{gap:8px;padding:8px}.simon-center{border-width:5px;width:34%}.whack-board{gap:8px;padding:8px;border-radius:14px}.whack-cell{border-radius:13px}.whack-target{left:19%;right:19%}}


/* v13.3.8.10.4 — واجهة تحكم حسب نوع المؤشر */
.touch-controls-only { }
.direct-input-controls-hidden { display: none !important; }
.desktop-input-hint { display: inline; }
.touch-input-hint { display: none; }

@media (hover: hover) and (pointer: fine) {
  .touch-controls-only { display: none !important; }
}

@media (hover: none) and (pointer: coarse) {
  .desktop-input-hint { display: none; }
  .touch-input-hint { display: inline; }
  .arcade-control, .maze-controls button, .snake-controls button {
    min-height: 52px;
    -webkit-tap-highlight-color: transparent;
  }
}


/* Game Feel Core v13.3.8.10.5 — صوت ومؤثرات خفيفة بدون ملفات وسائط */
.game-feel-toggle {
  position: fixed;
  z-index: 1200;
  inset-inline-start: max(14px, env(safe-area-inset-left));
  bottom: max(14px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--text);
  box-shadow: 0 10px 30px rgba(0,0,0,.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  touch-action: manipulation;
}
.game-feel-toggle:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); }
.game-feel-toggle:active { transform: scale(.96); }
.game-feel-toggle[aria-pressed="true"] { opacity: .72; }

.game-feel-fx-layer { position: fixed; inset: 0; z-index: 1190; pointer-events: none; overflow: hidden; }
.game-feel-screen-flash { position: absolute; inset: 0; opacity: 0; animation: gameFeelFlash .58s ease-out both; }
.game-feel-screen-flash.is-win, .game-feel-screen-flash.is-success { background: radial-gradient(circle at center, rgba(71,214,144,.22), transparent 58%); }
.game-feel-screen-flash.is-loss { background: radial-gradient(circle at center, rgba(239,71,111,.20), transparent 60%); }
.game-feel-screen-flash.is-draw { background: radial-gradient(circle at center, rgba(245,183,71,.16), transparent 58%); }

.game-feel-particle { position: absolute; width: 8px; height: 8px; border-radius: 3px; transform: translate(-50%,-50%); animation: gameFeelParticle .78s cubic-bezier(.12,.68,.24,1) forwards; background: var(--brand); box-shadow: 0 0 9px currentColor; }
.game-feel-particle.is-win, .game-feel-particle.is-success { background: #47d690; color: #47d690; }
.game-feel-particle.is-loss { background: #ef476f; color: #ef476f; }
.game-feel-particle:nth-child(3n) { background: #f3ad3f; color: #f3ad3f; border-radius: 50%; }
.game-feel-particle:nth-child(4n) { background: #8b6cf4; color: #8b6cf4; }

.game-feel-pop { position: absolute; transform: translate(-50%,-50%); font-size: clamp(16px,3vw,24px); font-weight: 1000; text-shadow: 0 3px 12px rgba(0,0,0,.28); animation: gameFeelPop .72s ease-out forwards; white-space: nowrap; }
.game-feel-pop.is-score, .game-feel-pop.is-success { color: #47d690; }
.game-feel-pop.is-error { color: #ef476f; }

.game-feel-pulse { animation: gameFeelPulse .34s ease-out !important; }
.game-feel-shake { animation: gameFeelShake .36s ease-in-out !important; }

@keyframes gameFeelFlash { 0%{opacity:0} 18%{opacity:1} 100%{opacity:0} }
@keyframes gameFeelParticle { 0%{opacity:1; transform:translate(-50%,-50%) scale(.9) rotate(0)} 100%{opacity:0; transform:translate(calc(-50% + var(--fx-x)),calc(-50% + var(--fx-y))) scale(.35) rotate(var(--fx-r))} }
@keyframes gameFeelPop { 0%{opacity:0; transform:translate(-50%,-20%) scale(.78)} 18%{opacity:1; transform:translate(-50%,-55%) scale(1.08)} 100%{opacity:0; transform:translate(-50%,-145%) scale(.96)} }
@keyframes gameFeelPulse { 0%{transform:scale(1)} 45%{transform:scale(1.14)} 100%{transform:scale(1)} }
@keyframes gameFeelShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} }

@media (max-width: 620px) {
  .game-feel-toggle { min-height: 40px; padding: 8px 10px; }
  .game-feel-toggle span:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .game-feel-screen-flash, .game-feel-particle, .game-feel-pop, .game-feel-pulse, .game-feel-shake { animation: none !important; }
}

/* v13.3.8.10.8 — Snake Quality Prototype */
.snake-card-page .stat-box {
  position: relative;
  overflow: hidden;
}
.snake-card-page .stat-box::after {
  content: "";
  position: absolute;
  inset-inline: 12%;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand) 78%, #8ee4aa), transparent);
  opacity: .55;
}
.snake-stage {
  isolation: isolate;
  background: #121428;
  border-color: color-mix(in srgb, var(--brand) 24%, var(--line));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 20px 46px rgba(29,31,72,.15);
}
.snake-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 46px rgba(8,8,24,.12);
}
.snake-canvas { position: relative; z-index: 1; }
.snake-overlay {
  z-index: 4;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--brand) 15%, transparent), transparent 48%),
    color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.snake-overlay strong {
  letter-spacing: -.02em;
  text-shadow: 0 8px 26px color-mix(in srgb, var(--brand) 22%, transparent);
}
.snake-stage.is-new-best {
  animation: snakeBestGlow .9s ease-out;
}
.snake-controls button {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 18px rgba(20,18,50,.06);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.snake-controls button:active {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
}
@keyframes snakeBestGlow {
  0% { box-shadow: inset 0 0 0 1px rgba(142,228,170,.18), 0 0 0 rgba(142,228,170,0); }
  38% { box-shadow: inset 0 0 0 2px rgba(142,228,170,.72), 0 0 42px rgba(142,228,170,.28); }
  100% { box-shadow: inset 0 0 0 1px rgba(142,228,170,0), 0 0 0 rgba(142,228,170,0); }
}
@media (prefers-reduced-motion: reduce) {
  .snake-stage.is-new-best { animation: none; }
}