/* Dino English — praistorijska džungla, "nalepnica" stil: debele tamne konture, tvrde senke. */
@font-face { font-family: 'Andika'; src: url('fonts/Andika-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Andika'; src: url('fonts/Andika-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --ink: #23302a;
  --jungle: #1f5a3f;
  --jungle-2: #2b7a52;
  --fern: #7cc243;
  --sun: #ffcf3d;
  --lava: #ff7a2f;
  --sky: #48c5e0;
  --sand: #fde7a9;
  --paper: #fff8e6;
  --bad: #e5484d;
  --good: #2fb35a;
  --edge: 6px solid var(--ink);
  --pop: 0 10px 0 var(--ink);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #13392a; overflow: hidden; }
body { font-family: 'Andika', system-ui, sans-serif; color: var(--ink); -webkit-user-select: none; user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
button:focus-visible { outline: 6px solid var(--sky); outline-offset: 4px; }
img { -webkit-user-drag: none; }

#viewport { position: fixed; inset: 0; }
#stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: center; overflow: hidden; overflow: clip;
  background: radial-gradient(1200px 700px at 70% 10%, #3c9a63 0%, transparent 60%), linear-gradient(#2b7a52, #1f5a3f 70%, #174632); }
.screen { position: absolute; inset: 0; overflow: clip; }

/* lišće u uglovima — stalni ram džungle */
#stage::before, #stage::after { content: ''; position: absolute; width: 520px; height: 520px; pointer-events: none; z-index: 0; opacity: .5;
  background: radial-gradient(closest-side, #5fae4e 70%, transparent 71%) 0 0/180px 120px,
              radial-gradient(closest-side, #7cc243 70%, transparent 71%) 90px 60px/180px 120px; filter: blur(.5px); }
#stage::before { left: -260px; top: -260px; transform: rotate(-20deg); }
#stage::after { right: -260px; bottom: -260px; transform: rotate(20deg); }
.screen > * { position: relative; z-index: 1; }

.title { font-size: 120px; font-weight: 700; margin: 0; color: var(--sun); letter-spacing: -1px;
  -webkit-text-stroke: 8px var(--ink); paint-order: stroke fill; text-shadow: 0 10px 0 var(--ink); line-height: 1; }
.title.small { font-size: 84px; }
.sub { font-size: 44px; color: var(--paper); margin: 18px 0 30px; font-weight: 700; }
.sub.bad { color: #ffb3b3; }

.btn { background: var(--paper); border: var(--edge); border-radius: 28px; box-shadow: var(--pop); padding: 18px 44px; font-size: 44px; font-weight: 700;
  transition: transform .08s, box-shadow .08s; }
.btn:active, .btn.pressed { transform: translateY(8px); box-shadow: 0 2px 0 var(--ink); }
.btn.big { font-size: 52px; padding: 22px 56px; }
.btn.go { background: var(--sun); }
.btn-back, .r-back { position: absolute; left: 40px; top: 30px; width: 110px; height: 110px; border-radius: 50%; background: var(--paper); border: var(--edge);
  box-shadow: 0 8px 0 var(--ink); font-size: 80px; line-height: 90px; font-weight: 700; }
.btn-back:active, .r-back:active { transform: translateY(6px); box-shadow: 0 2px 0 var(--ink); }

.toast { position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%); background: var(--paper); border: var(--edge); border-radius: 24px;
  padding: 18px 40px; font-size: 44px; max-width: 1500px; text-align: center; pointer-events: none; font-weight: 700; box-shadow: var(--pop); z-index: 50; }

/* ---------------------------------------------------- prijava */
.login { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.login-hero { position: absolute; right: 80px; bottom: 30px; opacity: .95; transform: scaleX(-1); }
.players { display: flex; gap: 40px; flex-wrap: wrap; justify-content: center; max-width: 1600px; }
.player-card { width: 260px; height: 300px; background: var(--paper); border: var(--edge); border-radius: 40px; box-shadow: var(--pop);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; animation: rise .5s both; animation-delay: calc(var(--d, 0) * 70ms); }
.player-card:active { transform: translateY(8px); box-shadow: 0 2px 0 var(--ink); }
.player-card.new { background: var(--fern); }
.pc-name { font-size: 40px; font-weight: 700; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-plus { font-size: 150px; line-height: 150px; font-weight: 700; color: var(--paper); -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; }
.name-input { font: inherit; font-size: 64px; font-weight: 700; width: 760px; text-align: center; padding: 18px; border: var(--edge); border-radius: 28px;
  background: var(--paper); box-shadow: inset 0 6px 0 rgba(0,0,0,.08); margin-bottom: 40px; color: var(--ink); }
.pin-dots { display: flex; gap: 26px; margin-bottom: 36px; }
.pin-dots span { width: 54px; height: 54px; border-radius: 50%; border: var(--edge); background: rgba(255,255,255,.25); }
.pin-dots span.on { background: var(--sun); }
.pinpad { display: grid; grid-template-columns: repeat(3, 170px); gap: 22px; }
.pk { height: 130px; background: var(--paper); border: var(--edge); border-radius: 30px; box-shadow: 0 8px 0 var(--ink); font-size: 64px; font-weight: 700; }
.pk:active { transform: translateY(6px); box-shadow: 0 2px 0 var(--ink); }
.pk.ghost { font-size: 30px; background: transparent; color: var(--paper); border-color: rgba(255,255,255,.4); box-shadow: none; }

/* ---------------------------------------------------- gornja traka */
.topbar { position: absolute; left: 0; right: 0; top: 0; height: 130px; display: flex; align-items: center; gap: 22px; padding: 0 40px;
  background: rgba(15, 46, 32, .55); border-bottom: 6px solid var(--ink); z-index: 5; }
.tb-player { font-size: 48px; font-weight: 700; color: var(--paper); margin-right: auto; }
.tb-food { display: flex; align-items: center; gap: 12px; background: var(--paper); border: var(--edge); border-radius: 50px; padding: 6px 28px 6px 12px; font-size: 48px; font-weight: 700; box-shadow: 0 6px 0 var(--ink); }
.tb-food .ico { width: 70px; height: 70px; }
.tb-btn { background: var(--paper); border: var(--edge); border-radius: 22px; height: 86px; min-width: 110px; padding: 0 22px; font-size: 38px; font-weight: 700; box-shadow: 0 6px 0 var(--ink); }
.tb-btn.wide { margin-right: 10px; background: var(--sun); }
.tb-btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); }

/* ---------------------------------------------------- meni */
.home { position: absolute; top: 130px; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 520px 1fr; gap: 40px; padding: 40px 50px 40px 50px; }
.home-side { display: flex; flex-direction: column; gap: 30px; }
.park-btn { flex: 1; background: linear-gradient(#bfe9ff 0 55%, #8fd16a 55%); border: var(--edge); border-radius: 44px; box-shadow: var(--pop);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 20px; position: relative; overflow: hidden; }
.park-btn:active { transform: translateY(8px); box-shadow: 0 2px 0 var(--ink); }
.pb-art { flex: 1; display: flex; align-items: flex-end; }
.pb-name { font-size: 64px; font-weight: 700; color: var(--paper); -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; }
.pb-meta { font-size: 32px; font-weight: 700; }
.egg-meter { background: var(--paper); border: var(--edge); border-radius: 30px; padding: 16px 24px; font-size: 32px; font-weight: 700; }
.egg-meter .bar, .pd-bar { height: 30px; border: 5px solid var(--ink); border-radius: 20px; background: #e9dcc0; overflow: hidden; margin-top: 10px; }
.egg-meter .bar i, .pd-bar i { display: block; height: 100%; background: repeating-linear-gradient(45deg, var(--sun) 0 18px, #ffb72b 18px 36px); transition: width .6s; }
.dict-btn { display: flex; align-items: center; justify-content: center; gap: 22px; background: var(--sky); border: var(--edge); border-radius: 34px; box-shadow: var(--pop);
  height: 140px; font-size: 56px; font-weight: 700; }
.dict-btn .ico { width: 90px; height: 90px; }
.dict-btn:active { transform: translateY(8px); box-shadow: 0 2px 0 var(--ink); }
.games { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 1fr; gap: 30px; }
.game-card { position: relative; background: var(--c); border: var(--edge); border-radius: 40px; box-shadow: var(--pop);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; animation: rise .45s both; animation-delay: calc(var(--d) * 45ms); overflow: hidden; }
.game-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.35), transparent 55%); }
.game-card:active { transform: translateY(8px); box-shadow: 0 2px 0 var(--ink); }
.gc-ico { position: relative; width: 130px; height: 130px; background: var(--paper); border: var(--edge); border-radius: 50%; display: grid; place-items: center; }
.gc-img { width: 86px; height: 86px; }
.gc-name { position: relative; font-size: 34px; font-weight: 700; color: #fff; -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; text-align: center; line-height: 1.05; padding: 0 10px; }
.game-card.locked { filter: grayscale(.9) brightness(.85); }
.gc-lock { position: absolute; top: 14px; right: 14px; }
.gc-lockimg { width: 60px; height: 60px; }

/* ---------------------------------------------------- park */
.park { position: absolute; inset: 130px 0 0 0; overflow: hidden; }
.park-sky { position: absolute; inset: 0 0 62% 0; background: linear-gradient(#8fdcff, #d8f4ff); }
.park-ground { position: absolute; inset: 38% 0 0 0; background: radial-gradient(ellipse at 50% 0, #9bd66b, #6fb648 70%); border-top: 6px solid var(--ink); }
.volcano { position: absolute; left: 1300px; top: 20px; width: 320px; height: 320px; opacity: .9; }
.palm { position: absolute; width: 240px; height: 240px; }
.palm.p1 { left: 40px; top: 80px; } .palm.p2 { right: 40px; top: 100px; transform: scaleX(-1); }
.park-grid { position: absolute; inset: 20px 30px 70px; display: flex; flex-wrap: wrap; justify-content: center; align-content: safe flex-end; align-items: flex-end; gap: 10px 26px; overflow-y: auto; }
.pdino { position: relative; width: var(--w); display: flex; flex-direction: column; align-items: center; transform-origin: bottom center; }
.pd-art { display: flex; align-items: flex-end; justify-content: center; min-height: 120px; }
.pdino .dino-svg { display: block; filter: drop-shadow(0 4px 0 rgba(0,0,0,.08)); }
.pd-name { font-size: 30px; font-weight: 700; background: var(--paper); border: 4px solid var(--ink); border-radius: 18px; padding: 2px 16px; margin-top: 4px; text-align: center; line-height: 1.1; }
.pd-name small { display: block; font-size: 20px; color: #5b6b62; }
.pdino.adult .pd-name { background: var(--sun); }
.pdino .pd-bar { display: block; width: 70%; margin: 6px auto 0; height: 20px; }
.pdino.munch .dino-svg { animation: munch .5s; }
.pdino.wobble .pd-art { animation: wobble .6s; }
.pdino.is-egg .egg-svg { animation: eggidle 3s ease-in-out infinite; }
.food-fly { position: absolute; left: 50%; top: -60px; animation: foodfly .8s forwards; }
.food-fly img { width: 90px; height: 90px; }
.park-empty { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 44px; font-weight: 700; background: var(--paper); border: var(--edge); border-radius: 40px; padding: 30px 60px; box-shadow: var(--pop); max-width: 1000px; }
.park-hint { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-size: 36px; font-weight: 700; color: var(--ink); }

.celebrate { position: absolute; inset: 0; z-index: 40; background: rgba(15,46,32,.8); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }
.cel-rays { pointer-events: none; position: absolute; width: 1400px; height: 1400px; left: 50%; top: 45%; margin: -700px 0 0 -700px;
  background: repeating-conic-gradient(rgba(255,207,61,.35) 0 10deg, transparent 10deg 20deg); animation: spin 18s linear infinite; border-radius: 50%;
  mask: radial-gradient(closest-side, #000 40%, transparent); -webkit-mask: radial-gradient(closest-side, #000 40%, transparent); }
.cel-art { position: relative; animation: bounceIn .7s both; }
.cel-title { position: relative; font-size: 90px; font-weight: 700; color: var(--sun); -webkit-text-stroke: 8px var(--ink); paint-order: stroke fill; }
.celebrate .btn { position: relative; z-index: 2; }
.cel-sub { position: relative; font-size: 44px; font-weight: 700; color: var(--paper); text-align: center; }
.cel-sub small { display: block; font-size: 38px; color: var(--sun); font-style: italic; }

/* ---------------------------------------------------- rečnik */
.dict { position: absolute; inset: 130px 0 0 0; display: flex; flex-direction: column; padding: 30px 50px; gap: 26px; }
.dict-tabs { display: flex; gap: 16px; flex-wrap: wrap; }
.dtab { background: var(--paper); border: 5px solid var(--ink); border-radius: 22px; padding: 10px 26px; font-size: 32px; font-weight: 700; box-shadow: 0 6px 0 var(--ink); }
.dtab.on { background: var(--sun); }
.dict-grid { flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; align-content: start; overflow: auto; padding-bottom: 20px; }
.dcard { background: var(--paper); border: var(--edge); border-radius: 30px; box-shadow: 0 8px 0 var(--ink); padding: 18px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dcard .vis { width: 140px; height: 140px; }
.dcard b { font-size: 40px; }
.dcard small { font-size: 28px; opacity: 0; transition: opacity .2s; }
.dcard.on { background: var(--sun); }
.dcard.on small { opacity: 1; }

/* ---------------------------------------------------- sličice reči */
.vis { width: 100%; height: 100%; object-fit: contain; display: block; }
.vis-num { display: grid; place-items: center; font-size: 120px; font-weight: 700; color: var(--lava); -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; line-height: 1; }
.vis-text { display: grid; place-items: center; font-size: 40px; font-weight: 700; text-align: center; line-height: 1.05; }

/* ---------------------------------------------------- runda */
.round { position: absolute; inset: 0; }
.r-top { position: absolute; left: 0; right: 0; top: 0; height: 150px; z-index: 10; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.r-top > * { pointer-events: auto; }
.r-back { top: 20px; }
.r-dots { display: flex; gap: 9px; background: rgba(15,46,32,.55); border: 4px solid var(--ink); border-radius: 30px; padding: 9px 16px; }
.r-dots i { width: 26px; height: 26px; border-radius: 50%; border: 4px solid var(--ink); background: rgba(255,255,255,.3); transition: background .3s, transform .3s; }
.r-dots i.ok { background: var(--sun); transform: scale(1.12); }
.r-dots i.meh { background: #ffe9a8; }
.r-replay { position: absolute; right: 40px; top: 20px; width: 120px; height: 120px; border-radius: 50%; background: var(--sun); border: var(--edge); box-shadow: 0 8px 0 var(--ink); display: grid; place-items: center; }
.r-replay img { width: 70px; height: 70px; }
.r-replay:active { transform: translateY(6px); box-shadow: 0 2px 0 var(--ink); }
.r-area { position: absolute; inset: 0; overflow: clip; }

/* uvod u igru */
.r-intro { position: absolute; inset: 0; z-index: 5; background: rgba(15,46,32,.82); display: grid; place-items: center; cursor: pointer; animation: fadeIn .25s; }
.ri-box { background: var(--paper); border: var(--edge); border-radius: 50px; box-shadow: var(--pop); padding: 50px 80px; max-width: 1400px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; animation: bounceIn .45s; }
.ri-ico { width: 170px; height: 170px; }
.ri-title { font-size: 80px; font-weight: 700; color: var(--lava); -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; line-height: 1; }
.ri-text { font-size: 56px; font-weight: 700; line-height: 1.2; }
.ri-en { font-size: 46px; font-weight: 700; color: #2b7a52; font-style: italic; }
.toast small { display: block; font-size: 34px; color: #2b7a52; font-style: italic; margin-top: 4px; }
.ri-q { font-size: 40px; font-weight: 700; margin-top: 10px; }
.ri-choices { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; max-width: 1200px; }
.ri-ch { min-width: 120px; background: var(--sun); border: var(--edge); border-radius: 26px; box-shadow: 0 8px 0 var(--ink); padding: 10px 18px; display: flex; flex-direction: column; align-items: center; }
.ri-ch b { font-size: 52px; line-height: 1; }
.ri-ch small { font-size: 26px; margin-top: 4px; white-space: nowrap; }
.ri-ch:active { transform: translateY(6px); box-shadow: 0 2px 0 var(--ink); }
.ri-go { margin-top: 16px; font-size: 44px; font-weight: 700; background: var(--sun); border: var(--edge); border-radius: 30px; padding: 14px 44px; box-shadow: 0 8px 0 var(--ink); animation: pulse 1.6s infinite; }
@keyframes fadeIn { from { opacity: 0; } }

/* pokretne mete */
.mv-field { position: absolute; inset: 150px 0 0 0; }
.mv { position: absolute; left: 0; top: 0; width: 220px; height: 220px; will-change: transform; transition: opacity .4s; }
.mv .mv-vis { position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; transform: translate(-50%, -50%); pointer-events: none; }
.mv .mv-vis .vis-num { font-size: 96px; }
.mv .mv-vis .vis-text { font-size: 30px; }
.mv svg { width: 100%; height: 100%; display: block; }
.mv.fade { opacity: .25; pointer-events: none; }
.space-bg { position: absolute; inset: 0; background: radial-gradient(900px 600px at 20% 20%, #3d2d8a, transparent 70%), radial-gradient(700px 500px at 85% 30%, #6a2d7a, transparent 70%), #12123a; }
.space-bg i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #fff; animation: twinkle var(--tw) ease-in-out infinite alternate; }
.ship { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%) rotate(-45deg); }
.ship img { width: 170px; height: 170px; }
.shield { position: absolute; left: 0; right: 0; bottom: 210px; height: 16px; background: linear-gradient(90deg, transparent, rgba(80,200,255,.6), transparent); border-radius: 50%; }
.shield.flash { animation: shield .6s; }
.laser { position: absolute; height: 12px; background: linear-gradient(90deg, #fff, #ff4fd8, #ffcf3d); border-radius: 6px; transform-origin: 0 50%; box-shadow: 0 0 24px #ff4fd8; }
.mv.asteroid.explode { animation: explode .5s forwards; pointer-events: none; }
.sky-bg { position: absolute; inset: 0; background: linear-gradient(#6ccff0, #c9f0ff); overflow: hidden; }
.cloud { position: absolute; width: 360px; height: 120px; background: #fff; border-radius: 80px; opacity: .9; animation: drift 60s linear infinite; }
.cloud::before, .cloud::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 160px; height: 160px; left: 50px; top: -70px; } .cloud::after { width: 130px; height: 130px; left: 170px; top: -50px; }
.cloud.c1 { top: 220px; left: -400px; } .cloud.c2 { top: 520px; left: -900px; animation-duration: 80s; } .cloud.c3 { top: 820px; left: -200px; animation-duration: 70s; }
.mv.balloon { height: 330px; }
.mv.balloon .mv-vis { top: 34%; }
.mv.balloon.popped { animation: pop .3s forwards; pointer-events: none; }
.pond-bg { position: absolute; inset: 0; background: linear-gradient(#5fd0e8 0, #1b8fb0 40%, #0d5f80); overflow: hidden; }
.weed { position: absolute; bottom: -20px; width: 60px; height: 360px; background: #2e8b57; border: 5px solid var(--ink); border-radius: 40px 40px 0 0; transform-origin: bottom; animation: sway 4s ease-in-out infinite alternate; }
.weed.w1 { left: 120px; } .weed.w2 { left: 980px; height: 280px; animation-delay: -1s; } .weed.w3 { right: 140px; height: 420px; animation-delay: -2s; }
.bub { position: absolute; bottom: -40px; width: 30px; height: 30px; border: 4px solid rgba(255,255,255,.7); border-radius: 50%; animation: bubble 7s linear infinite; }
.bub.b1 { left: 300px; } .bub.b2 { left: 1300px; animation-delay: -3s; } .bub.b3 { left: 800px; animation-delay: -5s; }
.mv.fishy { width: 300px; height: 200px; }
.mv.fishy .mv-vis { left: 43%; }
.mv.fishy.flip svg { transform: scaleX(-1); }
.mv.fishy.flip .mv-vis { left: 57%; }
.mv.fishy.caught { animation: caught .9s forwards; pointer-events: none; }

/* trka */
.race { position: absolute; inset: 150px 40px 30px; display: flex; flex-direction: column; gap: 30px; }
.track { position: relative; height: 470px; background: #5a5f66; border: var(--edge); border-radius: 30px; overflow: hidden; display: flex; flex-direction: column; }
.lane { position: relative; flex: 1; border-bottom: 6px dashed rgba(255,255,255,.6); }
.lane:last-of-type { border-bottom: 0; }
.car { position: absolute; top: 50%; width: 150px; height: 150px; transform: translateY(-50%) scaleX(-1); transition: left .7s cubic-bezier(.3,1.4,.6,1); left: 10px; }
.car.boost { filter: drop-shadow(-30px 0 0 rgba(255,207,61,.8)); }
.lane-tag { position: absolute; left: 20px; top: 8px; font-size: 28px; font-weight: 700; color: #fff; }
.finish { position: absolute; right: 70px; top: 0; bottom: 0; width: 50px; background: repeating-conic-gradient(#fff 0 25%, #222 0 50%) 0 0/50px 50px; border-left: 5px solid var(--ink); border-right: 5px solid var(--ink); }
.race-cards { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; padding: 0 40px; }
.rcard, .plate, .dopt { background: var(--paper); border: var(--edge); border-radius: 36px; box-shadow: var(--pop); padding: 28px; display: grid; place-items: center; }
.rcard .vis { width: 220px; height: 220px; }
.rcard:active, .plate:active, .dopt:active { transform: translateY(8px); box-shadow: 0 2px 0 var(--ink); }
.right { background: #c8f7c5 !important; border-color: var(--good) !important; }

/* memorija */
.memo { position: absolute; inset: 160px 0 30px; display: grid; gap: 22px; justify-content: center; align-content: center; }
.mcard { position: relative; perspective: 1000px; }
.mback, .mface { position: absolute; inset: 0; border: var(--edge); border-radius: 34px; box-shadow: var(--pop); display: grid; place-items: center; backface-visibility: hidden; transition: transform .4s; }
.mback { background: repeating-linear-gradient(45deg, var(--fern) 0 26px, #6ab038 26px 52px); }
.mface { background: var(--paper); transform: rotateY(180deg); padding: 30px; }
.mface { padding: 10%; }
.mface .vis { width: calc(var(--cw) * .66); height: calc(var(--cw) * .66); }
.mface .vis-num { font-size: calc(var(--cw) * .45); }
.mface .vis-text { font-size: calc(var(--cw) * .16); }
.mback, .mface { border-radius: 26px; }
.mcard.open .mback, .mcard.done .mback { transform: rotateY(180deg); }
.mcard.open .mface, .mcard.done .mface { transform: rotateY(360deg); }
.mcard.done .mface { background: #c8f7c5; border-color: var(--good); }

/* detektiv (skrivena slika) */
.spy { position: absolute; inset: 0; background: linear-gradient(#ffe7b8 0 52%, #c98f52 52% 100%); overflow: hidden; }
.spy::before { content: ''; position: absolute; left: 0; right: 0; top: 52%; height: 10px; background: #8b5a2b; }
.spy-rug { position: absolute; left: 50%; top: 70%; width: 1200px; height: 300px; transform: translate(-50%, -50%); border-radius: 50%; background: repeating-radial-gradient(circle, #e9486a 0 30px, #ffcf3d 30px 60px, #48c5e0 60px 90px); opacity: .55; border: 6px solid var(--ink); }
.spy-shelf { position: absolute; left: 120px; right: 120px; top: 30%; height: 18px; background: #8b5a2b; border: 5px solid var(--ink); border-radius: 8px; }
.spy-it { position: absolute; transform: rotate(var(--r)); filter: drop-shadow(0 6px 0 rgba(0,0,0,.18)); transition: transform .15s; }
.spy-it:hover { transform: rotate(var(--r)) scale(1.06); }
.spy-it .vis-num { font-size: 100px; }
.spy-it .vis-text { font-size: 30px; background: var(--paper); border: 4px solid var(--ink); border-radius: 14px; padding: 6px; }
.spy-it.found { animation: found .9s forwards; pointer-events: none; }
.spy-it.hint { animation: spyhint 1s 2; }
@keyframes found { 30% { scale: 1.5; } to { scale: 0; opacity: 0; translate: 0 -200px; } }
@keyframes spyhint { 50% { scale: 1.35; filter: drop-shadow(0 0 30px #ffcf3d) drop-shadow(0 0 30px #ffcf3d); } }

/* yes / no */
.yn { position: absolute; inset: 150px 0 0; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.yn-card { width: 470px; height: 470px; background: var(--paper); border: var(--edge); border-radius: 50px; box-shadow: var(--pop); padding: 50px; }
.yn-card.pop { animation: bounceIn .45s; }
.yn-card .vis-num { font-size: 260px; } .yn-card .vis-text { font-size: 80px; }
.yn-q { font-size: 64px; font-weight: 700; color: var(--paper); min-height: 80px; }
.yn-btns { display: flex; gap: 120px; }
.ynb { width: 360px; height: 200px; border: var(--edge); border-radius: 46px; box-shadow: var(--pop); font-size: 64px; font-weight: 700; color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill;
  display: flex; align-items: center; justify-content: center; gap: 20px; }
.ynb span { font-size: 100px; }
.ynb.yes { background: var(--good); } .ynb.no { background: var(--bad); }
.ynb:active { transform: translateY(8px); box-shadow: 0 2px 0 var(--ink); }
.ynb.right { background: var(--sun) !important; }

/* rečenica i slova */
.sent { position: absolute; inset: 150px 60px 40px; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.sent-pic { width: 330px; height: 330px; background: var(--paper); border: var(--edge); border-radius: 44px; box-shadow: var(--pop); padding: 36px; }
.sent-pic .vis-num { font-size: 190px; }
.sent-line { display: flex; gap: 20px; align-items: flex-end; min-height: 120px; }
.slot { min-width: 150px; height: 110px; border-bottom: 8px solid var(--paper); font-size: 70px; font-weight: 700; color: var(--paper); text-align: center; padding: 0 12px; }
.slot.filled { border-bottom-color: var(--sun); animation: bounceIn .3s; }
.letters-line .slot { min-width: 110px; font-size: 90px; }
.punct { font-size: 80px; font-weight: 700; color: var(--paper); }
.sent-line.done .slot { color: var(--sun); }
.sent-blocks { display: flex; gap: 26px; flex-wrap: wrap; justify-content: center; }
.blk { background: hsl(var(--h), 75%, 72%); border: var(--edge); border-radius: 22px; box-shadow: 0 10px 0 var(--ink); font-size: 58px; font-weight: 700; padding: 18px 34px; min-width: 120px; }
.blk.letter { font-size: 80px; min-width: 130px; }
.blk:active { transform: translateY(8px); box-shadow: 0 2px 0 var(--ink); }
.blk.used { visibility: hidden; }
.blk.hint { animation: pulse 0.9s infinite; }

/* bojanka */
.colour { position: absolute; inset: 150px 60px 30px; display: grid; grid-template-rows: 1fr auto auto; gap: 24px; }
.col-objs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; }
.cobj { background: var(--paper); border: var(--edge); border-radius: 40px; box-shadow: var(--pop); padding: 24px; }
.cobj .fillable { fill: #fff; transition: fill .4s; }
.cobj.painted { animation: bounceIn .4s; }
.col-pal { display: flex; justify-content: center; gap: 22px; }
.swatch { width: 110px; height: 110px; border-radius: 50%; background: var(--col); border: var(--edge); box-shadow: 0 8px 0 var(--ink); transition: transform .15s; }
.swatch.on { transform: translateY(-14px) scale(1.12); outline: 8px solid var(--paper); }
.col-q, .det-q, .mon-q { text-align: center; font-size: 58px; font-weight: 700; color: var(--paper); }

/* detektiv */
.det { position: absolute; inset: 160px 60px 40px; display: flex; flex-direction: column; gap: 40px; }
.det-opts { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; }
.dopt { padding: 20px; }
.det-scene { width: 100%; height: 100%; }

/* čudovište */
.mon { position: absolute; inset: 150px 0 10px; display: flex; flex-direction: column; align-items: center; }
.monster { height: 790px; }
.mpart { cursor: pointer; transform-box: fill-box; transform-origin: center; }
.mpart:hover { filter: brightness(1.08); }
.mpart.wiggle { animation: wiggle .6s; }
.mpart.nope { animation: shakeSvg .4s; }

/* kafić */
.cafe { position: absolute; inset: 150px 0 0; }
.cafe-dino { position: absolute; left: 0; bottom: 40px; transform-origin: bottom left; }
.cafe-dino.nom { animation: munch .6s; }
.cafe-dino.no { animation: headshake .5s; }
.bubble { position: absolute; left: 640px; top: 60px; background: var(--paper); border: var(--edge); border-radius: 50px; padding: 30px 50px; font-size: 60px; font-weight: 700; box-shadow: var(--pop); max-width: 1100px; }
.bubble::before { content: ''; position: absolute; left: 60px; bottom: -46px; border: 24px solid transparent; border-top: 30px solid var(--ink); }
.cafe-table { position: absolute; right: 70px; bottom: 60px; width: 1080px; height: 420px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; padding: 40px 30px 30px;
  background: #c98f52; border: var(--edge); border-radius: 30px; box-shadow: var(--pop); align-items: center; }
.plate { border-radius: 50%; aspect-ratio: 1; padding: 34px; }
.plate.fly { animation: toDino .6s forwards; }

/* kraj runde */
.round-end { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; }
.re-stars { display: flex; gap: 14px; }
.re-star { width: 80px; height: 80px; animation: bounceIn .4s both; }
.re-star.off { filter: grayscale(1) opacity(.35); }
.re-food { display: flex; align-items: center; gap: 16px; font-size: 80px; font-weight: 700; color: var(--paper); -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; }
.re-food img { width: 110px; height: 110px; }
.re-egg { display: flex; align-items: center; gap: 20px; font-size: 52px; font-weight: 700; color: var(--sun); -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; animation: bounceIn .6s .3s both; }
.re-btns { display: flex; gap: 30px; margin-top: 10px; }

/* ---------------------------------------------------- animacije */
.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { translate: -16px 0; } 40%, 80% { translate: 16px 0; } }
@keyframes shakeSvg { 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } }
@keyframes rise { from { opacity: 0; transform: translateY(40px); } }
@keyframes bounceIn { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes pulse { 50% { transform: scale(1.12); box-shadow: 0 10px 0 var(--ink), 0 0 0 14px rgba(255,207,61,.7); } }
@keyframes wiggle { 25% { transform: scale(1.15) rotate(-6deg); } 50% { transform: scale(1.2) rotate(6deg); } 75% { transform: scale(1.1) rotate(-3deg); } }
@keyframes munch { 30% { transform: scale(1.06, .94); } 60% { transform: scale(.97, 1.04); } }
@keyframes headshake { 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
@keyframes wobble { 25% { transform: rotate(-10deg); } 50% { transform: rotate(8deg); } 75% { transform: rotate(-4deg); } }
@keyframes eggidle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-5deg); } 92% { transform: rotate(4deg); } }
@keyframes wander { from { translate: -60px 0; } to { translate: 60px 0; } }
@keyframes foodfly { from { transform: translate(-50%, -80px) scale(1.2); opacity: 1; } to { transform: translate(-50%, 120px) scale(.4); opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes twinkle { to { opacity: .2; } }
@keyframes shield { 50% { background: linear-gradient(90deg, transparent, rgba(255,80,80,.9), transparent); height: 40px; } }
@keyframes explode { to { scale: 1.8; opacity: 0; filter: brightness(2); } }
@keyframes pop { to { scale: 1.6; opacity: 0; } }
@keyframes caught { to { translate: 0 -700px; rotate: 30deg; opacity: 0; } }
@keyframes drift { to { translate: 2600px 0; } }
@keyframes sway { to { transform: rotate(8deg); } }
@keyframes bubble { to { transform: translateY(-1100px); } }
@keyframes toDino { to { transform: translate(-900px, -150px) scale(.3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }