/* Kvizić-Kružić — tri vizualne teme: kids (8-12), castle (13-16), future (17+) */

/* =============== 8-12 · VESELI SVIJET =============== */
body[data-theme="kids"] {
  --sky: #a9e4ff;
  --font-logo: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --font-head: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text: #3a2b5c; --text-soft: #6f5f92;
  --panel: rgba(255, 255, 255, .9); --panel-border: rgba(124, 92, 255, .16);
  --panel-shadow: 0 14px 30px -14px rgba(60, 40, 120, .4);
  --card-bg: #fff; --radius: 28px; --btn-radius: 18px; --cell-radius: 20px;
  --accent: #ff8a3d; --accent-dark: #e0651a; --accent-2: #7c5cff; --btn-text: #fff;
  --cell: #f3efff; --cell-hover: #fff; --board-bg: rgba(255, 255, 255, .9);
  --cell-shadow: inset 0 -5px 0 rgba(124, 92, 255, .13);
  --token-radius: 50%; --token-clip: none;
  --ok: #22b866; --bad: #ff5a6e; --modal-bg: rgba(60, 40, 120, .38);
  --input-bg: #fff; --seg-bg: #f1ecff; --ghost-bg: rgba(255, 255, 255, .75); --ghost-bg-hover: #fff;
  --answer-bg: #f7f4ff; --answer-shadow: rgba(124, 92, 255, .2);
  --toast-bg: #3a2b5c; --toast-text: #fff;
}
body[data-theme="kids"] .logo-title {
  text-shadow: 0 4px 0 #fff, 4px 0 0 #fff, -4px 0 0 #fff, 0 -4px 0 #fff, 3px 3px 0 #fff, -3px 3px 0 #fff, 3px -3px 0 #fff, -3px -3px 0 #fff, 0 7px 0 rgba(60, 40, 120, .14);
}
body[data-theme="kids"] .logo-title .ltr:nth-child(6n+1) { color: #ff5d8f; }
body[data-theme="kids"] .logo-title .ltr:nth-child(6n+2) { color: #ff8a3d; }
body[data-theme="kids"] .logo-title .ltr:nth-child(6n+3) { color: #f5b700; }
body[data-theme="kids"] .logo-title .ltr:nth-child(6n+4) { color: #2fbf71; }
body[data-theme="kids"] .logo-title .ltr:nth-child(6n+5) { color: #2fa8ff; }
body[data-theme="kids"] .logo-title .ltr:nth-child(6n) { color: #7c5cff; }
body[data-theme="kids"] .logo-title .dash { color: #ff5d8f; }
body[data-theme="kids"] .mini-logo { color: #7c5cff; text-shadow: 0 2px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff, 0 -2px 0 #fff; }

/* =============== 13-16 · KRALJEVSTVO ZNANJA =============== */
body[data-theme="castle"] {
  --sky: #b9e2f7;
  --font-logo: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
  --font-head: 'Cinzel', Georgia, serif;
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text: #4a2e14; --text-soft: #7d5c3c;
  --panel: rgba(255, 248, 230, .94); --panel-border: #dcbc7f;
  --panel-shadow: 0 14px 30px -14px rgba(90, 50, 10, .5);
  --card-bg: #fff8e8; --radius: 16px; --btn-radius: 12px; --cell-radius: 10px;
  --accent: #d6455a; --accent-dark: #9e2b3e; --accent-2: #2f7de0; --btn-text: #fff;
  --cell: #f8ead0; --cell-hover: #fff8e6; --board-bg: linear-gradient(160deg, #d8b072, #b98a4c);
  --cell-shadow: inset 0 -5px 0 rgba(120, 80, 30, .2), inset 0 0 0 2px rgba(120, 80, 30, .12);
  --token-radius: 6px;
  --token-clip: polygon(0 0, 100% 0, 100% 46%, 97% 62%, 90% 76%, 78% 88%, 50% 100%, 22% 88%, 10% 76%, 3% 62%, 0 46%);
  --ok: #2f9e48; --bad: #d64545; --modal-bg: rgba(60, 35, 10, .42);
  --input-bg: #fffdf6; --seg-bg: #f2e1bc; --ghost-bg: rgba(255, 248, 230, .85); --ghost-bg-hover: #fff8e6;
  --answer-bg: #fff6e0; --answer-shadow: rgba(150, 100, 40, .28);
  --toast-bg: #4a2e14; --toast-text: #fff3d6;
}
body[data-theme="castle"] .logo-title .ltr,
body[data-theme="castle"] .logo-title .dash,
body[data-theme="castle"] .mini-logo {
  background: linear-gradient(180deg, #fff5c2 0%, #ffd04d 45%, #e8961c 70%, #ffcf5a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #8a4f12) drop-shadow(0 8px 10px rgba(90, 50, 10, .35));
}
body[data-theme="castle"] .logo-title { font-size: clamp(2.2rem, 8vw, 5rem); }
body[data-theme="castle"] .logo-sub { color: #fff; text-shadow: 0 2px 6px rgba(90, 50, 10, .6); }
body[data-theme="castle"] .section-title { color: #4a2e14; }
body[data-theme="castle"] .panel,
body[data-theme="castle"] .player-card,
body[data-theme="castle"] .q-card,
body[data-theme="castle"] .result-card,
body[data-theme="castle"] .small-card {
  background-image: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .55), transparent 60%);
}
body[data-theme="castle"] .panel { box-shadow: var(--panel-shadow), inset 0 0 0 2px var(--panel-border), inset 0 0 0 6px rgba(255, 248, 230, .9), inset 0 0 0 7px rgba(220, 188, 127, .6); }
body[data-theme="castle"] .player-tag { border-radius: 2px; clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%, 8% 50%); padding: 4px 26px; box-shadow: none; font-size: 1.05rem; }
body[data-theme="castle"] .btn { letter-spacing: .03em; }
body[data-theme="castle"] .token, body[data-theme="castle"] .avatar-big, body[data-theme="castle"] .pc-avatar, body[data-theme="castle"] .ra-avatar { box-shadow: inset 0 0 0 5px rgba(255, 230, 150, .7); }

/* =============== 17+ · NEONSKA BUDUĆNOST =============== */
body[data-theme="future"] {
  --sky: #3b1585;
  --font-logo: 'Exo 2', system-ui, sans-serif;
  --font-head: 'Exo 2', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text: #f6efff; --text-soft: #cdbaf7;
  --panel: rgba(30, 12, 74, .66); --panel-border: rgba(46, 242, 255, .38);
  --panel-shadow: 0 0 26px -6px rgba(255, 62, 200, .5), 0 18px 40px -18px rgba(0, 0, 0, .6);
  --card-bg: rgba(32, 13, 80, .94); --radius: 20px; --btn-radius: 14px; --cell-radius: 14px;
  --accent: #ff3ec8; --accent-dark: #a8187e; --accent-2: #2ef2ff; --btn-text: #fff;
  --cell: rgba(255, 255, 255, .07); --cell-hover: rgba(46, 242, 255, .16); --board-bg: rgba(22, 8, 60, .62);
  --cell-shadow: inset 0 0 0 1.5px rgba(46, 242, 255, .35);
  --token-radius: 0;
  --token-clip: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
  --ok: #18c98d; --bad: #ff4d6d; --modal-bg: rgba(10, 2, 32, .58);
  --input-bg: rgba(255, 255, 255, .08); --seg-bg: rgba(255, 255, 255, .1); --ghost-bg: rgba(255, 255, 255, .08); --ghost-bg-hover: rgba(255, 255, 255, .16);
  --answer-bg: rgba(255, 255, 255, .07); --answer-shadow: rgba(0, 0, 0, .35);
  --toast-bg: #2ef2ff; --toast-text: #1a0b4a;
}
body[data-theme="future"] .logo-title { font-style: italic; font-weight: 900; }
body[data-theme="future"] .logo-title .ltr, body[data-theme="future"] .mini-logo {
  color: #fff;
  text-shadow: 0 0 4px #fff, 0 0 12px #ff3ec8, 0 0 28px #ff3ec8, 0 0 52px rgba(255, 62, 200, .7);
}
body[data-theme="future"] .logo-title .ltr:nth-child(n+8) { text-shadow: 0 0 4px #fff, 0 0 12px #2ef2ff, 0 0 28px #2ef2ff, 0 0 52px rgba(46, 242, 255, .7); }
body[data-theme="future"] .logo-title .dash { color: #ffd34d; text-shadow: 0 0 12px #ffd34d; }
body[data-theme="future"] .logo-title .ltr { animation: letterIn .7s cubic-bezier(.3, 1.6, .5, 1) both, neonFlicker 6s linear infinite; animation-delay: calc(var(--i) * 45ms), calc(var(--i) * .37s); }
body[data-theme="future"] .panel,
body[data-theme="future"] .player-card,
body[data-theme="future"] .turn-banner,
body[data-theme="future"] .board { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
body[data-theme="future"] .btn-primary { box-shadow: 0 5px 0 var(--accent-dark), 0 0 24px rgba(255, 62, 200, .6); }
body[data-theme="future"] .player-card.active { box-shadow: 0 0 30px -4px var(--pc), inset 0 0 0 2px var(--pc); }
body[data-theme="future"] .cell:not(.taken):hover { box-shadow: inset 0 0 0 2px var(--turn), 0 0 18px -4px var(--turn); }
body[data-theme="future"] .token { box-shadow: none; filter: drop-shadow(0 0 8px var(--pc)); }
body[data-theme="future"] .cell.win .token { filter: drop-shadow(0 0 16px var(--pc)) brightness(1.15); }
body[data-theme="future"] .player-tag { box-shadow: 0 0 16px var(--pc); }
body[data-theme="future"] .switch span::after { box-shadow: 0 0 8px #2ef2ff; }
body[data-theme="future"] .name-input { color: #fff; }

@keyframes neonFlicker { 0%, 92%, 96%, 100% { opacity: 1; } 94% { opacity: .55; } }

/* =============== Kartice za odabir dobi (uvijek u svojoj temi) =============== */
.ac-kids {
  --ac-panel: #fff; --ac-text: #3a2b5c; --ac-border: #ffd34d; --ac-accent: #ff8a3d; --ac-chip: #fff1c2;
  --ac-font: 'Fredoka', 'Nunito', sans-serif;
  --ac-art: radial-gradient(70% 55% at 22% 100%, #7bd970 98%, transparent 100%), radial-gradient(80% 50% at 85% 100%, #56c65e 98%, transparent 100%),
            radial-gradient(circle at 85% 22%, #ffe066 0 13%, rgba(255, 224, 102, .35) 14% 20%, transparent 21%), linear-gradient(#7fd3ff, #d9f5ff);
}
.ac-castle {
  --ac-panel: #fff8e8; --ac-text: #4a2e14; --ac-border: #dcbc7f; --ac-accent: #d6455a; --ac-chip: #f2e1bc;
  --ac-font: 'Cinzel', Georgia, serif;
  --ac-art: radial-gradient(80% 55% at 20% 100%, #74c96b 98%, transparent 100%), radial-gradient(70% 60% at 90% 100%, #8fd39a 98%, transparent 100%),
            radial-gradient(circle at 16% 24%, #fff3b0 0 11%, transparent 12%), linear-gradient(#8ccdf5, #fde8c8);
}
.ac-future {
  --ac-panel: #24104f; --ac-text: #f6efff; --ac-border: #ff3ec8; --ac-accent: #2ef2ff; --ac-chip: rgba(46, 242, 255, .18);
  --ac-font: 'Exo 2', sans-serif;
  --ac-art: repeating-linear-gradient(90deg, rgba(46, 242, 255, .35) 0 2px, transparent 2px 28px) bottom / 100% 34% no-repeat,
            radial-gradient(circle at 50% 66%, #ffe45e 0 16%, #ff7ab8 24%, transparent 25%), linear-gradient(#1a0b4a, #8a2bb8 62%, #ff7aa8 66%, #2a0c5e 66%);
}
.ac-castle .ac-label { font-family: 'Cinzel Decorative', 'Cinzel', serif; }
.ac-future .ac-label { font-style: italic; text-shadow: 0 0 14px rgba(46, 242, 255, .8); }
.ac-future { box-shadow: 0 0 28px -6px rgba(255, 62, 200, .7), inset 0 0 0 3px var(--ac-border); }

/* =============== SCENA: VESELI SVIJET =============== */
.scene-kids { background: linear-gradient(180deg, #6fcbff 0%, #a9e4ff 45%, #e3f7ff 78%); }
.scene-kids .sun { position: absolute; top: 5%; right: 7%; width: clamp(100px, 14vw, 190px); aspect-ratio: 1; }
.scene-kids .sun-rays {
  position: absolute; inset: -40%; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 236, 140, .6) 0 9deg, transparent 9deg 22.5deg);
  -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 70%); mask-image: radial-gradient(circle, #000 25%, transparent 70%);
  animation: spin 50s linear infinite;
}
.scene-kids .sun-core { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #fff8c4, #ffd84d 55%, #ffb81f); box-shadow: 0 0 60px 14px rgba(255, 214, 80, .55); }
.scene-kids .rainbow {
  position: absolute; left: -12%; bottom: 14%; width: min(70vw, 900px); aspect-ratio: 2 / 1;
  background: radial-gradient(circle farthest-side at 50% 100%, transparent 54%, #b28cff 54% 58%, #5ab4ff 58% 62%, #62d26f 62% 66%, #ffd34d 66% 70%, #ff9f43 70% 74%, #ff6b8b 74% 78%, transparent 78%);
  opacity: .5;
}
.cloud { position: absolute; left: 0; width: calc(190px * var(--s)); animation: drift var(--d) linear infinite; will-change: transform; }
.cloud svg { width: 100%; height: auto; filter: drop-shadow(0 8px 0 rgba(120, 170, 220, .25)); }
.balloon { position: absolute; bottom: -120px; width: 46px; height: 58px; animation: floatUp 30s linear infinite; }
.balloon span { position: absolute; inset: 0; border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .7) 0 12%, transparent 26%), #ff6b8b; }
.balloon::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 60px; background: rgba(90, 70, 130, .45); }
.balloon.b1 { left: 9%; }
.balloon.b2 { left: 84%; width: 40px; height: 50px; animation-duration: 36s; animation-delay: -16s; }
.balloon.b2 span { background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .7) 0 12%, transparent 26%), #ffc93d; }
.scene-kids .hills { position: absolute; left: 0; bottom: 0; width: 100%; height: 34vh; }
.flowers { position: absolute; left: 0; right: 0; bottom: 0; height: 18vh; }
.flower { position: absolute; transform-origin: 50% 100%; animation: sway 3.6s ease-in-out infinite; }

/* =============== SCENA: KRALJEVSTVO =============== */
.scene-castle { background: linear-gradient(180deg, #78c4f2 0%, #b6e0f6 45%, #fde6c4 80%); }
.scene-castle .sun { position: absolute; top: 7%; left: 8%; width: clamp(80px, 10vw, 140px); aspect-ratio: 1; }
.scene-castle .sun-core { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 40% 38%, #fffbe0, #ffe27a 60%, #ffc94d); box-shadow: 0 0 70px 24px rgba(255, 226, 122, .55); }
.birds { position: absolute; inset: 0; }
.bird { position: absolute; top: 16%; left: 0; width: 24px; height: 10px; animation: flyAcross 34s linear infinite; }
.bird::before, .bird::after { content: ""; position: absolute; top: 0; width: 13px; height: 9px; border-top: 2.5px solid #5a4a7a; border-radius: 60% 60% 0 0; animation: flap .6s ease-in-out infinite alternate; }
.bird::before { left: 0; transform-origin: 100% 0; }
.bird::after { right: 0; transform-origin: 0 0; }
.bird:nth-child(2) { top: 21%; animation-delay: -1.4s; transform: scale(.8); }
.bird:nth-child(3) { top: 12%; animation-delay: -18s; }
.far-hills { position: absolute; left: 0; bottom: 0; width: 100%; height: 50vh; }
.castle { position: absolute; right: 5vw; bottom: 19vh; width: clamp(230px, 30vw, 460px); height: auto; overflow: visible; }
.flag path { transform-box: fill-box; transform-origin: 0 50%; animation: flagWave 1.4s ease-in-out infinite alternate; }
.flag.f2 path { animation-delay: -.5s; }
.flag.f3 path { animation-delay: -.9s; }
.near-hills { position: absolute; left: 0; bottom: 0; width: 100%; height: 30vh; }
.tree { position: absolute; transform-origin: 50% 100%; animation: sway 6s ease-in-out infinite; }

/* =============== SCENA: NEONSKA BUDUĆNOST =============== */
.scene-future { background: linear-gradient(180deg, #170846 0%, #3b1585 32%, #8a2bb8 55%, #ff5fa2 68%, #ffa96b 74%); }
.stars { position: absolute; inset: 0; }
.stars i { position: absolute; width: var(--sz); height: var(--sz); border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; animation: twinkle 3.5s ease-in-out infinite; }
.retro-sun, .retro-sun-glow { position: absolute; left: 50%; bottom: 34vh; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, 50%); }
.retro-sun-glow { width: min(90vw, 760px); background: radial-gradient(circle, rgba(255, 140, 200, .55), rgba(255, 90, 180, .15) 45%, transparent 66%); }
.retro-sun {
  width: min(48vw, 420px);
  background: linear-gradient(180deg, #fff27a 8%, #ffb25a 30%, #ff5fa2 48%, #ff3ec8 60%);
  -webkit-mask-image: linear-gradient(180deg, #000 0 28%, transparent 28% 30.5%, #000 30.5% 36%, transparent 36% 39%, #000 39% 43.5%, transparent 43.5% 47.5%, #000 47.5%);
  mask-image: linear-gradient(180deg, #000 0 28%, transparent 28% 30.5%, #000 30.5% 36%, transparent 36% 39%, #000 39% 43.5%, transparent 43.5% 47.5%, #000 47.5%);
}
.planet { position: absolute; top: 9%; left: 8%; width: clamp(50px, 7vw, 90px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #a5f7ff, #2ec7ff 45%, #6a3cff); box-shadow: 0 0 30px rgba(46, 242, 255, .5); animation: bob 7s ease-in-out infinite; }
.planet::after { content: ""; position: absolute; left: -32%; right: -32%; top: 42%; height: 18%; border-radius: 50%; border: 3px solid rgba(255, 210, 120, .85); transform: rotate(-18deg); border-top-color: transparent; }
.city { position: absolute; left: 0; width: 100%; bottom: 34vh; }
.city-far { height: 30vh; }
.city-near { height: 22vh; }
.hover-car { position: absolute; width: 34px; height: 7px; border-radius: 99px; background: #2ef2ff; box-shadow: 0 0 14px #2ef2ff, -26px 0 22px -6px rgba(46, 242, 255, .7); top: 46vh; left: 0; animation: carRight 13s linear infinite; }
.hover-car.c2 { top: 40vh; background: #ff7bd8; box-shadow: 0 0 14px #ff7bd8, 26px 0 22px -6px rgba(255, 123, 216, .7); animation: carLeft 17s linear infinite; animation-delay: -6s; }
.grid-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 34vh; overflow: hidden; perspective: 260px; perspective-origin: 50% 0; background: linear-gradient(#2c0d63, #14053a); box-shadow: 0 -2px 0 #ff7ad9, 0 -6px 30px rgba(255, 90, 200, .7); }
.grid-plane { position: absolute; left: -60%; right: -60%; top: 0; height: 260%; transform-origin: 50% 0; transform: rotateX(68deg); }
.grid-lines {
  position: absolute; left: 0; right: 0; top: -90px; bottom: 0;
  background-image: linear-gradient(rgba(255, 62, 200, .9) 2px, transparent 2px), linear-gradient(90deg, rgba(46, 242, 255, .75) 2px, transparent 2px);
  background-size: 90px 90px; animation: gridMove 1.8s linear infinite; will-change: transform;
}
.grid-floor::after { content: ""; position: absolute; inset: 0; background: linear-gradient(#2c0d63 0%, rgba(44, 13, 99, 0) 45%); }

/* =============== Animacije scena =============== */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drift { from { transform: translateX(-30vw); } to { transform: translateX(110vw); } }
@keyframes floatUp {
  0% { transform: translate(0, 0) rotate(-4deg); }
  25% { transform: translate(18px, -35vh) rotate(4deg); }
  50% { transform: translate(-10px, -70vh) rotate(-3deg); }
  75% { transform: translate(14px, -105vh) rotate(3deg); }
  100% { transform: translate(0, -140vh) rotate(-2deg); }
}
@keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes flyAcross { from { transform: translateX(-10vw); } to { transform: translateX(110vw); } }
@keyframes flap { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes flagWave { from { transform: scaleX(1) skewY(0deg); } to { transform: scaleX(.82) skewY(7deg); } }
@keyframes twinkle { 0%, 100% { opacity: .9; transform: scale(1); } 50% { opacity: .25; transform: scale(.6); } }
@keyframes gridMove { from { transform: translateY(0); } to { transform: translateY(90px); } }
@keyframes carRight { from { transform: translateX(-10vw); } to { transform: translateX(110vw); } }
@keyframes carLeft { from { transform: translateX(110vw); } to { transform: translateX(-10vw); } }

@media (max-width: 760px) {
  .castle { right: 50%; transform: translateX(50%); bottom: 21vh; width: 62vw; opacity: .9; }
  .scene-kids .rainbow { width: 120vw; left: -30%; }
}