* { box-sizing: border-box; }
html, body { margin: 0; font-family: Rubik, Arial, sans-serif; color: #e8ecff; background: #0a0f1f; }
body { background: radial-gradient(ellipse at 50% 30%, #13204a 0%, #0a0f1f 60%) fixed, #0a0f1f; }
.hidden { display: none !important; }
a { color: inherit; }

.top { text-align: center; padding: 28px 16px 6px; }
.top h1 { margin: 0; font-size: clamp(40px, 7vw, 68px); font-weight: 900; letter-spacing: -1px;
    background: linear-gradient(90deg, #3dfc8a, #3fd0ff, #a78bfa, #ff6ad5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.top p { margin: 8px auto 16px; max-width: 640px; font-size: 18px; line-height: 1.6; color: #b8c2ea; }
.tools input { width: min(440px, 92vw); padding: 12px 18px; border-radius: 999px; border: 2px solid #2a3570; background: #111a3a; color: #fff; font: 500 16px Rubik, Arial; outline: none; }
.tools input:focus { border-color: #3fd0ff; box-shadow: 0 0 0 4px rgba(63,208,255,.15); }
.newest { display: inline-block; margin-top: 14px; padding: 8px 16px; border-radius: 999px; background: rgba(255,226,61,.1); border: 1px solid rgba(255,226,61,.4);
    color: #ffe9a3; text-decoration: none; font-size: 15px; max-width: 92vw; }
.newest b { color: #0a0f1f; background: #ffe23d; border-radius: 8px; padding: 1px 8px; margin-left: 6px; }
.newest:hover { background: rgba(255,226,61,.18); }

main { max-width: 1240px; margin: 0 auto; padding: 0 12px 30px; }
.tree-wrap { position: relative; }
#tree { width: 100%; height: auto; display: block; overflow: visible; }

/* growing: every path draws itself from its start */
#tree path.grow { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.1s ease-out forwards; fill: none; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.blabel { opacity: 0; animation: fade .6s 1.4s forwards; }
.blabel text { font: 700 17px Rubik, Arial; }
.trunk-label { font: 900 15px Rubik, Arial; fill: #f3d9b1; letter-spacing: 2px; opacity: 0; animation: fade .6s .6s forwards; }
@keyframes fade { to { opacity: 1; } }

.leaf { cursor: pointer; opacity: 0; animation: pop .5s cubic-bezier(.3,1.6,.6,1) forwards; outline: none; }
.leaf .inner { transition: transform .2s; transform-box: fill-box; transform-origin: center; }
.leaf .disc { fill: color-mix(in srgb, var(--c) 22%, #0a0f1f); stroke: var(--c); stroke-width: 3; filter: url(#glow); }
.leaf .icon { font-size: 38px; }
.leaf .name { font: 700 15px Rubik, Arial; fill: #e8ecff; paint-order: stroke; stroke: #0a0f1f; stroke-width: 4px; }
.leaf:hover .inner, .leaf:focus .inner { transform: scale(1.18); }
.leaf.soon .disc { fill: #151b33; stroke: #56608f; stroke-dasharray: 6 5; filter: none; animation: breathe 2.4s ease-in-out infinite; }
.leaf.soon .icon { opacity: .45; filter: grayscale(.8); }
.leaf.soon .name { fill: #8f98c7; font-size: 13px; }
.leaf.idea .disc { fill: #2a2508; stroke: #ffe23d; stroke-dasharray: 4 4; filter: none; }
.leaf.idea .name { fill: #ffe9a3; font-size: 14px; }
.leaf.dim { opacity: .15 !important; animation: none; }
@keyframes pop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; } }
.leaf { transform-box: fill-box; }
@keyframes breathe { 50% { stroke: #9aa6e0; } }

.card { position: absolute; z-index: 5; width: 300px; background: #121a3d; border: 2px solid var(--c); border-radius: 18px; padding: 14px 16px;
    box-shadow: 0 0 30px color-mix(in srgb, var(--c) 30%, transparent), 0 16px 40px rgba(0,0,0,.5); text-align: right; }
.c-head { display: flex; gap: 10px; align-items: center; }
.c-icon { font-size: 34px; }
.c-head strong { display: block; font-size: 19px; }
.c-sub { display: block; font-size: 13px; color: var(--c); margin-top: 2px; }
.card p { margin: 10px 0 12px; font-size: 15px; line-height: 1.55; color: #cdd4f5; }
.play { display: inline-block; padding: 8px 18px; border-radius: 12px; background: var(--c); color: #0a0f1f; font-weight: 900; text-decoration: none; }
.soon-tag { display: inline-block; padding: 6px 12px; border-radius: 10px; background: #1d2550; color: #b8c2ea; font-size: 14px; }

.legend { text-align: center; color: #8f98c7; font-size: 14px; margin: 0; }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin: 0 4px 0 10px; vertical-align: -1px; }
.dot.live { background: #3fd0ff; box-shadow: 0 0 8px #3fd0ff; }
.dot.soon { border: 2px dashed #56608f; }

/* phone list */
.list { display: none; }
@media (max-width: 760px) {
    .tree-wrap { display: none; }
    .list { display: grid; gap: 12px; margin-top: 14px; }
    .legend { margin-top: 14px; }
}
.list details { background: #111a3a; border: 1px solid #22305f; border-inline-start: 5px solid var(--c); border-radius: 16px; overflow: hidden; }
.list summary { cursor: pointer; list-style: none; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.list summary::-webkit-details-marker { display: none; }
.list summary::after { content: '▾'; color: var(--c); transition: transform .2s; }
.list details[open] summary::after { transform: rotate(180deg); }
.b-name { font-weight: 900; font-size: 18px; color: var(--c); }
.b-count { font-size: 13px; color: #8f98c7; margin-inline-start: auto; }
.item { display: flex; gap: 12px; padding: 12px 16px; border-top: 1px solid #1d2a55; text-decoration: none; }
.item.soon { opacity: .55; }
.i-icon { font-size: 30px; }
.i-body strong { display: block; font-size: 16px; }
.i-body small { display: block; color: #8f98c7; margin: 2px 0 4px; }
.i-text { font-size: 14px; line-height: 1.5; color: #b8c2ea; }
.idea-item { justify-content: center; background: #2a2508; border: 1px dashed #ffe23d; border-radius: 16px; color: #ffe9a3; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { #tree path.grow, .leaf, .blabel, .trunk-label { animation-duration: .01s !important; animation-delay: 0s !important; } }
/* ---------- Our games ---------- */
#games-footer { padding: 36px 20px 28px; background: #1e1b33; border-top: 4px solid #ffc933; color: #e8edf7; text-align: center; }
#games-footer h2 { margin: 0 0 22px; color: #ffc933; font-size: 1.7rem; font-weight: 900; }
/* Our games: a row of round icons that float, wiggle on hover and show the details in a tooltip. */
#games-footer .games { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 22px; max-width: 900px; margin: 0 auto; padding-top: 6px; }
#games-footer .game { background: none; border: 0; padding: 0; box-shadow: none; transform: none; position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; width: 92px; color: inherit; text-decoration: none; outline: none; }
#games-footer .icon { position: relative; width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.4rem;
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.3), rgba(255,255,255,.06) 62%); border: 3px solid rgba(255,201,51,.35);
    box-shadow: 0 6px 16px rgba(0,0,0,.35); animation: gf-float 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); transition: transform .2s, box-shadow .2s, border-color .2s; }
#games-footer .name { font-size: .85rem; font-weight: 800; color: #e8edf7; line-height: 1.25; }
#games-footer .game:hover .icon, #games-footer .game:focus-visible .icon { animation: gf-wiggle .5s ease-in-out; transform: scale(1.18); border-color: #ffc933;
    box-shadow: 0 0 0 6px rgba(255,201,51,.18), 0 0 26px rgba(255,201,51,.7); }
#games-footer .game.here .icon { border-color: #ffc933; box-shadow: 0 0 0 4px rgba(255,201,51,.28), 0 6px 16px rgba(0,0,0,.35); }
#games-footer .game.here .icon::after { content: 'אתם כאן'; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); white-space: nowrap;
    background: #ffc933; color: #2a1a05; font-size: .62rem; font-weight: 900; padding: 1px 7px; border-radius: 8px; }
#games-footer .tip { position: absolute; bottom: calc(100% + 12px); left: 50%; width: 240px; transform: translate(-50%, 8px) scale(.96); opacity: 0; pointer-events: none;
    background: #fff; color: #2a2640; border-radius: 14px; padding: 12px 14px; font-size: .9rem; line-height: 1.5; text-align: right;
    box-shadow: 0 12px 30px rgba(0,0,0,.35); transition: opacity .18s, transform .18s; z-index: 5; }
#games-footer .tip::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -8px; border: 8px solid transparent; border-top-color: #fff; }
#games-footer .tip strong { display: block; font-size: 1rem; margin-bottom: 4px; color: #2a2640; }
#games-footer .tip em { display: block; font-style: normal; font-weight: 800; color: #d97b00; margin-top: 6px; }
#games-footer .game:hover .tip, #games-footer .game:focus-visible .tip { opacity: 1; transform: translate(-50%, 0) scale(1); }
@keyframes gf-float { 50% { transform: translateY(-5px); } }
@keyframes gf-wiggle { 0%, 100% { transform: scale(1.18) rotate(0); } 25% { transform: scale(1.18) rotate(-10deg); } 75% { transform: scale(1.18) rotate(10deg); } }
@media (hover: none) { #games-footer .tip { display: none; } }
@media (prefers-reduced-motion: reduce) { #games-footer .icon { animation: none; } }
#games-footer .game:hover { transform: none; background: none; }
#games-footer .about { margin: 26px 0 0; font-size: 0.9rem; color: #8f9cbb; }
#games-footer .about a { color: #ffc933; text-decoration: none; }