/* Знайка — мини-игры */
.game-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: -30px 0 18px; position: relative; z-index: 2; }
.gt { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; padding: 16px; border: 0; border-radius: 22px; background: #fff; cursor: pointer; box-shadow: 0 8px 22px rgba(15,42,120,.1); font-family: var(--font); color: var(--navy); transition: transform .2s, box-shadow .2s; }
.gt span { grid-row: span 2; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; font-size: 30px; background: var(--tint); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.gt b { font-size: 18px; font-weight: 900; }
.gt small { font-weight: 600; color: var(--muted); }
.gt:hover { transform: translateY(-3px); }
.gt.on { background: linear-gradient(135deg, #2f6ff0, #8a5cf6); color: #fff; box-shadow: 0 14px 30px rgba(91,90,240,.35); }
.gt.on small { color: rgba(255,255,255,.85); }
.gt.on span { background: rgba(255,255,255,.2); transform: rotate(-8deg) scale(1.08); }
.game-stage { position: relative; min-height: 420px; margin-bottom: 50px; overflow: hidden; }
.g-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.g-opts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.g-opts select { width: auto; padding: 8px 12px; border-radius: 999px; }
.g-score { display: flex; gap: 16px; align-items: center; font-weight: 700; flex-wrap: wrap; }
.g-score b { font-size: 20px; color: var(--blue); }

.mem-grid { display: grid; gap: 10px; perspective: 900px; max-width: 760px; margin: 0 auto; }
.mem-grid.l1 { grid-template-columns: repeat(4, 1fr); max-width: 520px; }
.mem-grid.l2 { grid-template-columns: repeat(4, 1fr); max-width: 560px; }
.mem-grid.l3 { grid-template-columns: repeat(5, 1fr); }
.mem { position: relative; aspect-ratio: 1; border: 0; padding: 0; background: none; cursor: pointer; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.3,1.3,.5,1); animation: popA .4s cubic-bezier(.3,1.6,.5,1) backwards; animation-delay: calc(var(--i) * 30ms); }
.mem span { position: absolute; inset: 0; border-radius: 18px; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.mem .back { background: linear-gradient(135deg, #5a8bff, #a066ff); color: #fff; font-size: 34px; font-weight: 900; box-shadow: 0 6px 0 #4a3ccf; }
.mem .front { background: #fff; font-size: clamp(30px, 6vw, 48px); transform: rotateY(180deg); box-shadow: inset 0 0 0 3px var(--line); }
.mem.open, .mem.done { transform: rotateY(180deg); }
.mem.done .front { box-shadow: inset 0 0 0 4px #19b35c; background: #effcf4; animation: bumpA .5s ease; }
.g-win { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; background: rgba(255,255,255,.92); backdrop-filter: blur(4px); animation: rise .4s ease both; }
.g-win.static { position: static; min-height: 380px; background: none; }
.g-win span { font-size: 90px; }
.g-win h3 { font-size: 28px; font-weight: 900; }
.blitz-start { text-align: center; display: grid; justify-items: center; gap: 12px; padding: 20px 0; }
.big-e { font-size: 90px; }
.blitz-start h3 { font-size: 30px; font-weight: 900; }
.blitz-start p { max-width: 520px; color: var(--ink); font-weight: 600; }
.blitz { display: grid; gap: 22px; justify-items: center; }
.blitz .g-score { width: 100%; justify-content: space-between; }
.blitz-time { flex: 1; height: 14px; border-radius: 10px; background: #e8eef9; overflow: hidden; min-width: 120px; }
.blitz-time i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff5d5d, #ffb800, #19b35c); border-radius: 10px; }
.blitz-q { font-size: clamp(44px, 8vw, 72px); font-weight: 900; }
.blitz-opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: min(640px, 100%); }
.blitz-opts .m-opt { min-height: 74px; border: 0; border-radius: 20px; font: 900 30px var(--font); color: var(--navy); background: #fff; cursor: pointer; box-shadow: inset 0 0 0 3px var(--tint), 0 7px 0 #d5def0; }
.blitz-opts .m-opt:active { transform: translateY(5px); box-shadow: inset 0 0 0 3px var(--blue), 0 2px 0 #d5def0; }
.blitz-opts .m-opt.wrong { background: #ffe1e1; color: var(--bad); }
.paint { display: grid; grid-template-columns: 70px 1fr; gap: 16px; }
.palette { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.pc { aspect-ratio: 1; border-radius: 50%; border: 3px solid #fff; background: var(--c); cursor: pointer; box-shadow: 0 0 0 2px var(--line); transition: transform .15s; }
.pc.on { transform: scale(1.2); box-shadow: 0 0 0 3px var(--navy); }
.canvas-wrap { border-radius: 20px; overflow: hidden; box-shadow: inset 0 0 0 3px var(--line); background: #fff; }
.paint-svg { display: block; width: 100%; height: auto; cursor: crosshair; }
.paint-svg *:hover { opacity: .85; }
.m-fx { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.m-conf { position: fixed; width: 10px; height: 14px; border-radius: 3px; }
@media (max-width: 700px) {
  .game-tabs { grid-template-columns: 1fr; gap: 8px; }
  .gt { padding: 10px; }
  .mem-grid.l3 { grid-template-columns: repeat(4, 1fr); }
  .blitz-opts { grid-template-columns: 1fr 1fr; }
  .paint { grid-template-columns: 1fr; }
  .palette { grid-template-columns: repeat(7, 1fr); }
}