/* AKSA Lojëra: shared look for the hub pages (home, idea form, parent page).
   Same tokens as the games, so everything reads as one family. */
:root{
  --bg:#E4F4EC; --dot:#CFEADB; --surface:#FFFFFF; --ink:#1D3A47; --ink-soft:#557280;
  --line:#C6DDD2; --lift:#1D3A47;
  --coral:#F45B48; --coral-deep:#C9402F; --coral-soft:#FFE1DB;
  --sun:#FFC83D; --sun-deep:#D9A215; --sun-soft:#FFF3C9;
  --leaf:#22A86B; --leaf-deep:#17804F; --leaf-soft:#D9F4E6;
  --sky:#3E8EF0; --sky-deep:#2A6DC2; --sky-soft:#DCEBFF;
  --grape:#8E5BE8; --grape-deep:#6B3FC2; --grape-soft:#EADFFF; --pink:#FF7EB6;
  --on-color:#FFFFFF; --bubble:#FFF3C9; --scrim:rgba(29,58,71,.45);
  --font-display:"Fredoka","Baloo 2","Arial Rounded MT Bold",ui-rounded,system-ui,sans-serif;
  --font-body:"Nunito",ui-rounded,system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#10252C; --dot:#163139; --surface:#183640; --ink:#EEF7F2; --ink-soft:#A3BEB5;
    --line:#2B4D57; --lift:#06161B;
    --coral:#F2604D; --coral-deep:#B53A2A; --coral-soft:#3E2622;
    --sun:#FFD15C; --sun-deep:#C9981C; --sun-soft:#3A3418;
    --leaf:#3CCB8A; --leaf-deep:#22915F; --leaf-soft:#1C4A3B;
    --sky:#6AAAF5; --sky-deep:#3C7CC8; --sky-soft:#1C3550;
    --grape:#A87DF2; --grape-deep:#7A52C8; --grape-soft:#2E2448; --pink:#FF8DC0;
    --bubble:#3A3418; --scrim:rgba(3,12,15,.65);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#10252C; --dot:#163139; --surface:#183640; --ink:#EEF7F2; --ink-soft:#A3BEB5;
  --line:#2B4D57; --lift:#06161B;
  --coral:#F2604D; --coral-deep:#B53A2A; --coral-soft:#3E2622;
  --sun:#FFD15C; --sun-deep:#C9981C; --sun-soft:#3A3418;
  --leaf:#3CCB8A; --leaf-deep:#22915F; --leaf-soft:#1C4A3B;
  --sky:#6AAAF5; --sky-deep:#3C7CC8; --sky-soft:#1C3550;
  --grape:#A87DF2; --grape-deep:#7A52C8; --grape-soft:#2E2448; --pink:#FF8DC0;
  --bubble:#3A3418; --scrim:rgba(3,12,15,.65);
  color-scheme:dark;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh;
  background-color:var(--bg);
  background-image:radial-gradient(var(--dot) 2.5px, transparent 3px);
  background-size:28px 28px;
  color:var(--ink); font-family:var(--font-body); font-weight:700; font-size:17px;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-top:max(16px, env(safe-area-inset-top, 0px));
  padding-bottom:max(40px, env(safe-area-inset-bottom, 0px));
  overflow-x:hidden;
}
button,input,textarea{font:inherit;color:inherit}
a{color:inherit}
.wrap{max-width:980px;margin:0 auto;position:relative}

/* ---------- Big AKSA name ---------- */
.name{
  margin:0; display:flex; justify-content:center; gap:.04em;
  font-family:var(--font-display); font-weight:700; line-height:1; letter-spacing:.02em;
  font-size:clamp(64px, 19vw, 128px);
}
.name span{
  display:inline-block; color:var(--c);
  -webkit-text-stroke:.055em var(--lift); paint-order:stroke fill;
  text-shadow:0 .07em 0 var(--lift);
  transform:rotate(var(--r));
  animation:drop .7s cubic-bezier(.3,1.6,.5,1) both; animation-delay:var(--d);
}
.name span:nth-child(1){--c:var(--coral);--r:-6deg;--d:.05s}
.name span:nth-child(2){--c:var(--leaf);--r:4deg;--d:.15s}
.name span:nth-child(3){--c:var(--sun);--r:-3deg;--d:.25s}
.name span:nth-child(4){--c:var(--sky);--r:6deg;--d:.35s}
.name.hop span{animation:hop .6s ease both;animation-delay:calc(var(--d) * .6)}
@keyframes drop{from{transform:translateY(-40px) rotate(var(--r))}to{transform:translateY(0) rotate(var(--r))}}
@keyframes hop{0%,100%{transform:translateY(0) rotate(var(--r))}40%{transform:translateY(-22%) rotate(calc(var(--r) * -1))}}

.sub{
  margin:6px 0 0; text-align:center;
  font-family:var(--font-display); font-weight:600; font-size:clamp(22px, 6vw, 32px);
}

/* ---------- Buttons (toy-like, press down) ---------- */
.btn{
  --b:var(--surface); --t:var(--ink); --s:var(--lift);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:52px; padding:10px 22px; border-radius:18px;
  background:var(--b); color:var(--t);
  border:3px solid var(--lift); box-shadow:0 5px 0 var(--s);
  font-family:var(--font-display); font-weight:600; font-size:19px; text-decoration:none;
  cursor:pointer; transition:transform .12s, box-shadow .12s; -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--s)}
.btn:focus-visible,.chip:focus-visible,.card:focus-visible{outline:4px solid var(--sky);outline-offset:3px}
.btn.coral{--b:var(--coral);--t:var(--on-color)}
.btn.leaf{--b:var(--leaf);--t:var(--on-color)}
.btn.sky{--b:var(--sky);--t:var(--on-color)}
.btn.sun{--b:var(--sun);--t:#1D3A47}
.btn.grape{--b:var(--grape);--t:var(--on-color)}
.btn.small{min-height:44px;padding:6px 14px;font-size:16px;border-radius:14px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

.chip{
  min-height:48px; padding:8px 16px; border-radius:999px; cursor:pointer;
  background:var(--surface); border:3px solid var(--lift); box-shadow:0 4px 0 var(--lift);
  font-family:var(--font-display); font-weight:600; font-size:17px;
  transition:transform .12s, box-shadow .12s, background .15s; -webkit-tap-highlight-color:transparent;
}
.chip:active{transform:translateY(3px);box-shadow:0 1px 0 var(--lift)}
.chip[aria-pressed="true"]{background:var(--sun);color:#1D3A47}

/* Little speech bubble used for friendly messages */
.bubble{
  position:relative; margin:0 auto; max-width:520px; text-align:center;
  background:var(--bubble); border:3px solid var(--lift); border-radius:22px;
  padding:12px 18px; font-size:18px; box-shadow:0 5px 0 var(--lift);
}

.topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:52px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition:none !important}
}