/* Puzzle Hub — warm "toy shelf" look: soft lit background, chunky 3D cards, glossy previews. */
:root { --bg: #f6f1e7; --ink: #1e1b16; --muted: #6b6459; --accent: #2f6fd8; --edge: #cbbca0; }
* { box-sizing: border-box; }
html, body { touch-action: manipulation; }
body {
  margin: 0; min-height: 100dvh; color: var(--ink);
  background: radial-gradient(120% 70% at 50% -10%, #fffdf7 0%, #f6f1e7 55%, #e9dfcc 100%) fixed;
  font: 20px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: 22px 16px calc(28px + env(safe-area-inset-bottom));
}
main { max-width: 480px; margin: 0 auto; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
h1 { font-size: 38px; margin: 0; letter-spacing: -.5px; text-shadow: 0 2px 0 #fff; }
.lang {
  font: inherit; font-size: 18px; font-weight: 800; min-height: 50px; padding: 0 20px; border: 0; border-radius: 16px; color: var(--accent); cursor: pointer;
  background: linear-gradient(#ffffff, #f1eadc); box-shadow: 0 4px 0 var(--edge), 0 8px 14px rgba(70,50,20,.15), inset 0 1px 0 #fff;
}
.lang:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge), inset 0 1px 0 #fff; }
.sub { color: var(--muted); margin: 6px 0 22px; font-weight: 600; }

/* game cards */
.game {
  display: block; text-decoration: none; color: inherit; border-radius: 28px; overflow: hidden; margin-bottom: 22px;
  background: linear-gradient(#ffffff, #f7f1e5); border: 2px solid #fff;
  box-shadow: 0 8px 0 var(--edge), 0 18px 28px rgba(70,50,20,.22);
  transition: transform .12s, box-shadow .12s;
}
.game:active { transform: translateY(5px); box-shadow: 0 3px 0 var(--edge), 0 8px 14px rgba(70,50,20,.2); }
.preview { position: relative; height: 170px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.preview::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 40%, rgba(0,0,0,.08)); pointer-events: none; }
.preview.p1 { background: radial-gradient(90% 90% at 50% 20%, #7fb0ff, #2f6fd8 70%, #1d4c9c); }
.preview.p2 { background: radial-gradient(90% 90% at 50% 20%, #34508a, #1b2a4a 70%, #101a30); }
.preview.p3 { background: radial-gradient(90% 90% at 50% 20%, #7fd8b4, #1f9e8e 70%, #146b60); }
.badge { position: absolute; top: 14px; inset-inline-start: 14px; z-index: 1; padding: 6px 14px; border-radius: 12px; font-size: 16px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; color: #146b60; background: linear-gradient(#ffffff, #eef7f3); box-shadow: 0 3px 0 #b9d6cc, 0 6px 10px rgba(0,0,0,.25); }
.meta { display: flex; align-items: center; gap: 14px; padding: 16px 18px 18px; }
.meta > span:first-child { flex: 1; min-width: 0; }
.game b { font-size: 26px; display: block; line-height: 1.15; }
.game small { font-size: 17px; color: var(--muted); font-weight: 600; display: block; margin-top: 3px; }
.play {
  flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 52px; padding: 0 22px; border-radius: 18px; font-weight: 900; font-size: 20px; color: #fff;
  background: linear-gradient(#59d36b, #2e9a3f); box-shadow: 0 5px 0 #1f7030, 0 8px 12px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.5); text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.play::after { content: '\203A'; font-size: 26px; line-height: 1; }
[dir="rtl"] .play::after { content: '\2039'; }
.soon { margin-top: 10px; color: #9a9184; font-size: 17px; text-align: center; font-weight: 600; }

/* preview 1: a mini board with glossy 3D cubes and a floating piece */
.mini-board { display: grid; grid-template-columns: repeat(5, 30px); gap: 4px; padding: 8px; border-radius: 12px; background: linear-gradient(#e2cfa9, #cbb287); box-shadow: 0 6px 0 #a58a5c, 0 12px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.5); transform: rotate(-4deg); }
.mini-board i { display: block; width: 30px; height: 30px; border-radius: 6px; background: #f2ebdc; box-shadow: inset 0 2px 3px rgba(0,0,0,.18); }
.mini-board i.f1, .mini-board i.f2, .mini-board i.f3, .mini-board i.f4 { box-shadow: inset 0 3px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(0,0,0,.28), 0 2px 3px rgba(0,0,0,.35); background-image: linear-gradient(160deg, rgba(255,255,255,.35), rgba(255,255,255,0) 55%); }
.mini-board i.f1 { background-color: #2f6fd8; } .mini-board i.f2 { background-color: #ef8a1f; } .mini-board i.f3 { background-color: #3aa64a; } .mini-board i.f4 { background-color: #e0457b; }
.mini-piece { position: absolute; right: 26px; top: 22px; display: grid; grid-template-columns: repeat(2, 30px); gap: 4px; transform: rotate(8deg); filter: drop-shadow(0 12px 10px rgba(0,0,0,.4)); animation: hover 2.4s ease-in-out infinite; }
[dir="rtl"] .mini-piece { right: auto; left: 26px; }
.mini-piece i { display: block; width: 30px; height: 30px; border-radius: 6px; background: #f2c014 linear-gradient(160deg, rgba(255,255,255,.45), rgba(255,255,255,0) 55%); box-shadow: inset 0 3px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(0,0,0,.28); }
.mini-piece i:nth-child(3) { visibility: hidden; }

/* preview 2: white-rimmed glass tubes with glossy marbles on navy */
.vials { display: flex; align-items: flex-end; gap: 16px; transform: translateY(6px); }
.v { position: relative; display: flex; flex-direction: column-reverse; align-items: center; gap: 3px; width: 38px; height: 116px; padding: 4px 0 5px; border: 3px solid rgba(255,255,255,.92); border-top: 0; border-radius: 0 0 19px 19px;
  background: linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.2) 28%, rgba(255,255,255,.06) 55%, rgba(255,255,255,.02)); box-shadow: inset 0 -10px 14px rgba(0,0,0,.3), 0 10px 14px rgba(0,0,0,.45); }
.v::before { content: ''; position: absolute; top: -4px; left: -8px; right: -8px; height: 9px; border-radius: 5px; background: linear-gradient(#fff, #d5dcec); box-shadow: 0 3px 4px rgba(0,0,0,.45); }
.v { gap: 0; padding: 4px 3px 3px; }
.v b { display: block; width: 100%; height: 24px; flex: none; background-image: linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,0) 38%, rgba(0,0,0,.2)); }
.v b:first-child { border-radius: 0 0 14px 14px; }
.v b:last-child { border-radius: 3px 3px 0 0; box-shadow: inset 0 3px 0 rgba(255,255,255,.35); }
.v .b1 { background-color: #2f5cff; } .v .b2 { background-color: #3ad13a; } .v .b3 { background-color: #ff3b8d; }
@keyframes hover { 0%,100% { transform: rotate(8deg) translateY(0); } 50% { transform: rotate(8deg) translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .mini-piece { animation: none; } }