@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@600;800&family=Cairo:wght@400;600;800&display=swap');

:root{
  --cream:#FFF7EA; --paper:#FFFFFF; --ink:#17264A; --ink2:#3A4A72;
  --line:rgba(23,38,74,.12);
  --saffron:#FFB703; --brass:#D98200;
  --mint:#00A98F;    --turq:#12C2C2;
  --coral:#F4573F;   --grape:#7C5CD6;
  --sky:#2CA6E0;     --lime:#8CC63F;
  --sand:#FFF7EA;
  --screen:#0E1B2E;
  --r:22px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--cream);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M32 6 38.5 19 51 13 45 25.5 58 32 45 38.5 51 51 38.5 45 32 58 25.5 45 13 51 19 38.5 6 32 19 25.5 13 13 25.5 19Z' fill='none' stroke='%23F4573F' stroke-width='1.1' opacity='.13'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 12% -6%, rgba(255,183,3,.34), transparent 52%),
    radial-gradient(ellipse at 92% 4%, rgba(18,194,194,.26), transparent 48%),
    radial-gradient(ellipse at 50% 108%, rgba(124,92,214,.16), transparent 54%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:'Cairo',system-ui,sans-serif;
  -webkit-text-size-adjust:100%;
  min-height:100vh;
  overflow-x:hidden;
}
h1,h2,h3,.display{font-family:'Baloo Bhaijaan 2',cursive;font-weight:800;line-height:1.18;margin:0}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--grape);outline-offset:3px}

.wrap{max-width:980px;margin:0 auto;padding:0 18px 70px}

.bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 16px;position:sticky;top:0;z-index:20;
  background:rgba(255,247,234,.9);backdrop-filter:blur(12px);border-bottom:2px solid rgba(23,38,74,.07)}
.bar .home{font-family:'Baloo Bhaijaan 2';font-size:23px;color:var(--coral)}
.bar .spacer{flex:1}
.chip{border:2px solid var(--line);background:var(--paper);color:var(--ink);
  border-radius:999px;padding:6px 13px;font-size:14px;font-weight:700;cursor:pointer;
  white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 2px 0 rgba(23,38,74,.10);transition:transform .12s}
.chip:hover{border-color:var(--turq);color:var(--mint)}
.chip:active{transform:translateY(2px);box-shadow:none}
.chip.on{background:var(--saffron);border-color:var(--brass);color:#3A2600}

.hero{padding:34px 0 20px;text-align:center}
.hero .name{
  font-size:clamp(66px,19vw,152px);line-height:.95;letter-spacing:.01em;
  color:var(--saffron);
  text-shadow:0 5px 0 var(--brass), 0 7px 0 rgba(23,38,74,.16), 0 18px 34px rgba(217,130,0,.3);
}
.hero .sub{font-size:17px;color:var(--ink2);margin-top:16px;font-weight:600;max-width:44ch;
  margin-inline:auto;line-height:1.65}
.hero .count{display:inline-block;margin-top:18px;background:var(--mint);color:#fff;
  border-radius:999px;padding:9px 22px;font-size:15px;font-weight:800;
  box-shadow:0 4px 0 #007F6C}

.cat{margin:38px 0 15px;display:flex;align-items:center;gap:11px}
.cat h2{font-size:29px;color:var(--ink)}
.cat span{font-size:13px;font-weight:800;color:#fff;background:var(--grape);
  border-radius:999px;padding:3px 11px}

.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(152px,1fr))}
.card{position:relative;border-radius:var(--r);padding:15px 15px 14px;display:block;color:#fff;
  border:0;box-shadow:0 6px 0 rgba(0,0,0,.16), 0 14px 26px -14px rgba(23,38,74,.5);
  transition:transform .16s ease, box-shadow .16s ease;
  animation:pop .42s cubic-bezier(.34,1.56,.64,1) backwards}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
.card:hover,.card:focus-visible{transform:translateY(-4px) rotate(-1deg);
  box-shadow:0 10px 0 rgba(0,0,0,.16), 0 22px 34px -14px rgba(23,38,74,.55)}
.card:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.16)}
.card .ico{font-size:32px;line-height:1;filter:drop-shadow(0 3px 4px rgba(0,0,0,.22))}
.card .tt{font-family:'Baloo Bhaijaan 2';font-size:20px;margin-top:8px;color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .st{font-size:12.5px;margin-top:5px;line-height:1.5;color:rgba(255,255,255,.86);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .best{font-size:12px;margin-top:9px;font-weight:800;color:#fff;
  background:rgba(0,0,0,.2);border-radius:999px;padding:2px 9px;display:inline-block}
.card .badge{position:absolute;top:13px;inset-inline-end:13px;font-size:10.5px;font-weight:800;
  letter-spacing:.06em;color:#fff;background:rgba(0,0,0,.28);border-radius:7px;padding:3px 7px}
.c0{background:linear-gradient(160deg,#FFC733,#F09000)}
.c1{background:linear-gradient(160deg,#22D3C6,#009E93)}
.c2{background:linear-gradient(160deg,#FF7A63,#E23B22)}
.c3{background:linear-gradient(160deg,#9A7DE8,#6845C4)}
.c4{background:linear-gradient(160deg,#4FC0F0,#1585C4)}
.c5{background:linear-gradient(160deg,#A6D95A,#6EA522)}

.stage{padding:22px 0 44px;text-align:center}
.stage h1{font-size:clamp(36px,10vw,54px);color:var(--coral);
  text-shadow:0 4px 0 rgba(23,38,74,.12)}
.story{max-width:52ch;margin:14px auto 0;font-size:15.5px;line-height:1.8;color:var(--ink2)}
.hud{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin:22px 0 16px}
.pill{background:var(--paper);border:2px solid var(--line);border-radius:999px;
  padding:7px 16px;font-size:14px;font-weight:700;color:var(--ink2);
  box-shadow:0 3px 0 rgba(23,38,74,.08)}
.pill b{color:var(--coral);font-size:15px}

.board{display:inline-block;background:var(--screen);border:7px solid var(--paper);
  border-radius:26px;padding:14px;max-width:100%;color:#EFE6D6;
  box-shadow:0 8px 0 rgba(23,38,74,.14), 0 22px 40px -18px rgba(23,38,74,.55),
             inset 0 0 0 2px rgba(255,255,255,.06)}
canvas{display:block;max-width:100%;height:auto;border-radius:12px;touch-action:none}

.btn{background:var(--saffron);color:#3A2600;border:0;border-radius:999px;
  padding:14px 30px;font-size:16.5px;font-weight:800;cursor:pointer;font-family:'Baloo Bhaijaan 2';
  box-shadow:0 5px 0 var(--brass);transition:transform .1s}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--brass)}
.btn.alt{background:var(--paper);color:var(--ink);box-shadow:0 5px 0 rgba(23,38,74,.16)}
.btn.alt:active{box-shadow:0 1px 0 rgba(23,38,74,.16)}
.msg{margin-top:18px;font-size:18px;font-weight:800;min-height:28px;color:var(--mint);
  font-family:'Baloo Bhaijaan 2'}
.msg.bad{color:var(--coral)}

.dpad{display:grid;grid-template-columns:repeat(3,64px);gap:9px;justify-content:center;margin-top:20px}
.dpad button{background:var(--paper);border:0;color:var(--ink);
  border-radius:16px;height:58px;font-size:22px;font-weight:800;cursor:pointer;
  box-shadow:0 5px 0 rgba(23,38,74,.18)}
.dpad button:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(23,38,74,.18)}
.dpad .sp{visibility:hidden}

[dir="rtl"] body,[dir="rtl"]{text-align:right}
[dir="rtl"] .hero,[dir="rtl"] .stage{text-align:center}

.foot{text-align:center;padding:34px 18px 60px;font-size:14px;color:var(--ink2);line-height:1.9;font-weight:600}

@media (prefers-reduced-motion:reduce){
  .card{animation:none}
  *{transition:none!important}
}
@media (max-width:440px){
  .bar{padding:10px 12px;gap:6px}
  .bar .home{font-size:20px}
  .chip{padding:6px 10px;font-size:13px;max-width:94px}
  .cat h2{font-size:25px}
  .grid{gap:11px;grid-template-columns:repeat(auto-fill,minmax(144px,1fr))}
}

/* generated cover art */
.card .shot{margin:-15px -15px 11px;border-radius:22px 22px 0 0;overflow:hidden;aspect-ratio:4/3;
  background:linear-gradient(100deg,rgba(255,255,255,.10),rgba(255,255,255,.24),rgba(255,255,255,.10));
  background-size:220% 100%;animation:shimmer 1.5s linear infinite}
@keyframes shimmer{to{background-position:-220% 0}}
.card .shot.ready{animation:none;background:rgba(0,0,0,.10)}
.card .shot img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .45s ease}
.card .shot img.in{opacity:1}
.card .badge{top:11px}
.hero-art{width:min(100%,440px);aspect-ratio:4/3;object-fit:cover;border-radius:22px;
  border:6px solid var(--paper);box-shadow:0 8px 0 rgba(23,38,74,.12), 0 20px 34px -16px rgba(23,38,74,.5);
  margin-bottom:16px}

/* a hairline of light along the top of every card, the way good packaging catches the light */
.card::after{content:'';position:absolute;inset:0;border-radius:var(--r);pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.10)}