@import url('https://fonts.googleapis.com/css2?family=Boogaloo&family=Rajdhani:wght@300;400;500;600;700&family=Titan+One&family=Nunito:ital,wght@0,600;0,700;0,800;0,900;1,700&family=Sniglet:wght@400;800&family=Lilita+One&display=swap');


/* ============ tokeny ============ */
:root{
  --ink:#1d1646; --muted:#6a6493; --bg:#e9ecff; --panel:#ffffff; --panel-2:#f2f1fb; --line:rgba(29,22,70,.10);
  --violet:#6c47ff; --violet-dk:#4a28d9; --gold:#ffc53d; --gold-dk:#e09400; --gold-ink:#6b4200;
  --good:#1fc47d; --good-dk:#0e955b; --good-bg:#dcf8ea; --good-ink:#0b6b43;
  --bad:#ff4f6d; --bad-dk:#d92b4b; --bad-bg:#ffe4ea;
  --warn:#ff9f2e; --warn-bg:#fff0dc; --warn-ink:#8f4f00;
  --sky:#2fb4ff; --sky-dk:#0a86d1;
  --me:#6c47ff;
  --edge:rgba(29,22,70,.12);
  --r-xl:28px; --r-lg:22px; --r-md:18px; --r-sm:13px;
  --lift:0 4px 0 var(--edge), 0 14px 30px -18px rgba(29,22,70,.45);
  --lift-sm:0 3px 0 var(--edge);
  --display:'Titan One', 'Nunito', system-ui, sans-serif;
  --font:'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#f3f0ff; --muted:#a9a2d8; --bg:#0f0b2a; --panel:#1b1640; --panel-2:#251f55; --line:rgba(255,255,255,.08);
    --good-bg:#10362a; --good-ink:#7ff0bd; --bad-bg:#3a1424; --warn-bg:#3a2810; --warn-ink:#ffc98a;
    --good:#34d892; --bad:#ff6d86; --bad-dk:#ff8ea0; --gold-dk:#ffb21e;
    --edge:rgba(0,0,0,.45); color-scheme:dark;
  }
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--font); color:var(--ink); min-height:100vh; -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1200px 600px at 0% -10%, color-mix(in srgb, var(--me) 16%, transparent), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, color-mix(in srgb, var(--sky) 12%, transparent), transparent 60%),
    var(--bg);
  background-attachment:fixed;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
h1,h2,h3{margin:0; font-family:var(--display); font-weight:400; letter-spacing:.005em; line-height:1.15}
p{margin:0}
a{color:inherit}
button,input,select,textarea{font-family:inherit; color:inherit}
:focus-visible{outline:3px solid var(--violet); outline-offset:3px; border-radius:8px}
.muted{color:var(--muted)}
.lead{color:var(--muted); font-size:1.02rem; line-height:1.55; max-width:62ch; font-weight:600}

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

/* ============ tlačítka ============ */
.btn{
  --b:var(--panel); --e:var(--edge); --t:var(--ink);
  appearance:none; border:0; background:var(--b); color:var(--t); cursor:pointer; text-decoration:none;
  font-family:var(--display); font-size:1.02rem; letter-spacing:.01em; line-height:1.1;
  padding:12px 20px 11px; border-radius:15px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.3), inset 0 0 0 2px var(--line), 0 4px 0 var(--e);
  transition:transform .08s ease, box-shadow .08s ease, filter .15s;
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(3px); box-shadow:inset 0 2px 0 rgba(255,255,255,.3), inset 0 0 0 2px var(--line), 0 1px 0 var(--e)}
.btn:disabled{opacity:.5; cursor:default; transform:none; filter:grayscale(.4)}
.btn.good{--b:var(--good); --e:var(--good-dk); --t:#fff; text-shadow:0 1px 0 rgba(0,0,0,.18)}
.btn.bad{--b:var(--bad); --e:var(--bad-dk); --t:#fff; text-shadow:0 1px 0 rgba(0,0,0,.18)}
.btn.violet{--b:var(--violet); --e:var(--violet-dk); --t:#fff; text-shadow:0 1px 0 rgba(0,0,0,.2)}
.btn.gold{--b:var(--gold); --e:var(--gold-dk); --t:var(--gold-ink)}
.btn.sky{--b:var(--sky); --e:var(--sky-dk); --t:#fff; text-shadow:0 1px 0 rgba(0,0,0,.2)}
.btn.good,.btn.bad,.btn.violet,.btn.gold,.btn.sky{box-shadow:inset 0 2px 0 rgba(255,255,255,.3), 0 4px 0 var(--e)}
.btn.good:active,.btn.bad:active,.btn.violet:active,.btn.gold:active,.btn.sky:active{box-shadow:inset 0 2px 0 rgba(255,255,255,.3), 0 1px 0 var(--e)}
.btn.ghost{--b:transparent; box-shadow:inset 0 0 0 2px var(--line)}
.btn.ghost:active{box-shadow:inset 0 0 0 2px var(--line)}
.btn.ghost.danger{color:var(--bad-dk); box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--bad) 50%, transparent)}
.btn.tiny{padding:8px 13px 7px; font-size:.86rem; border-radius:11px}
.btn.big{padding:16px 22px 15px; font-size:1.2rem; border-radius:18px}
.icon-btn{border:0; background:var(--panel-2); border-radius:12px; width:40px; height:40px; cursor:pointer; font-size:1rem; box-shadow:inset 0 0 0 2px var(--line); flex:none}
.icon-btn.sm{width:30px; height:30px; font-size:.75rem; border-radius:9px}
.icon-btn:disabled{opacity:.3}
.link{font-weight:800; color:var(--violet); text-decoration:none}
.link:hover{text-decoration:underline}

.input{width:100%; padding:12px 14px; border:2px solid var(--line); border-radius:13px; background:var(--panel); font-size:1rem; transition:border-color .15s}
.input:focus{border-color:var(--violet); outline:none}
textarea.input{resize:vertical; min-height:84px; line-height:1.45}
.input.color{padding:4px; height:48px; cursor:pointer}
.input[type=date]{color-scheme:inherit}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.field-label{font-weight:800; font-size:.9rem}
.hint{font-size:.8rem; color:var(--muted); font-weight:600}
.check{display:flex; align-items:center; gap:10px; font-weight:700; margin-bottom:14px}
.check input{width:22px; height:22px; accent-color:var(--violet); flex:none}
.form{display:flex; flex-direction:column}
.range{width:100%; accent-color:var(--violet)}
.range-row{display:flex; align-items:center; gap:14px; margin:10px 0}

/* ============ přihlášení ============ */
.login{min-height:100vh; display:grid; place-items:center; padding:24px}
.login-card{width:100%; max-width:460px; background:var(--panel); border-radius:32px; padding:38px 28px 30px; text-align:center; box-shadow:0 6px 0 var(--edge), 0 30px 60px -30px rgba(29,22,70,.5)}
.login-coin{width:84px; height:84px; margin:0 auto 12px; border-radius:50%; display:grid; place-items:center; font-size:2.4rem;
  background:radial-gradient(circle at 35% 30%, #fff5cf, var(--gold) 55%, var(--gold-dk)); box-shadow:0 5px 0 #b87500, 0 16px 30px -10px rgba(224,148,0,.6);
  animation:bob 3.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px) rotate(-4deg)}}
.login-card h1{font-size:2.1rem; margin-bottom:4px}
.login-card .lead{margin:0 auto 24px; text-align:center}
.who-tiles{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.person{display:flex; flex-direction:column; align-items:center; gap:8px; background:var(--panel-2); border:0; cursor:pointer; color:var(--ink);
  border-radius:20px; padding:16px 14px 12px; min-width:104px; box-shadow:inset 0 0 0 2px var(--line), 0 3px 0 var(--edge); transition:transform .15s ease, box-shadow .15s}
.person:hover{transform:translateY(-3px)}
.person > span:last-child{font-family:var(--display); font-size:1.1rem}
.person.on{background:color-mix(in srgb, var(--c) 18%, var(--panel)); box-shadow:inset 0 0 0 3px var(--c), 0 4px 0 color-mix(in srgb, var(--c) 60%, #000)}
.login-form{margin-top:22px; display:flex; flex-direction:column; gap:12px}
.login-form.shake{animation:shake .35s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.login-err{color:var(--bad-dk); font-weight:800; min-height:1.2em; font-size:.92rem}
.big-input{padding:15px 16px; font-size:1.15rem; border-radius:15px}

/* ============ layout ============ */
.app{display:flex; min-height:100vh}
.rail{width:232px; flex:none; background:var(--panel); box-shadow:1px 0 0 var(--line); display:flex; flex-direction:column; padding:22px 14px; gap:24px; position:sticky; top:0; height:100vh}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--display); font-size:1.25rem; padding:0 6px}
.brand-coin{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:1.05rem; flex:none;
  background:radial-gradient(circle at 35% 30%, #fff5cf, var(--gold) 55%, var(--gold-dk)); box-shadow:0 2px 0 #b87500}
.rail-nav{display:flex; flex-direction:column; gap:4px; flex:1}
.nav-link{display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:15px; text-decoration:none; font-weight:800; color:var(--muted); position:relative; transition:background .15s, color .15s}
.nav-link:hover{background:var(--panel-2)}
.nav-link.on{background:color-mix(in srgb, var(--me) 14%, var(--panel)); color:var(--ink)}
.nav-ico{font-size:1.25rem; width:26px; text-align:center}
.nav-link.on .nav-ico{animation:pop .3s ease}
@keyframes pop{50%{transform:scale(1.25) rotate(-6deg)}}
.badge{margin-left:auto; background:var(--bad); color:#fff; font-size:.72rem; font-weight:900; border-radius:99px; padding:2px 7px; min-width:20px; text-align:center; box-shadow:0 2px 0 var(--bad-dk)}
.user-chip{display:flex; align-items:center; gap:9px; border:0; background:var(--panel-2); border-radius:15px; padding:8px 12px; cursor:pointer; font-weight:800; text-align:left; box-shadow:inset 0 0 0 2px var(--line)}
.topbar{display:none}
.main{flex:1; min-width:0; display:flex; flex-direction:column}
#view{flex:1; padding:28px 32px 100px; max-width:1100px; width:100%; margin:0 auto}
#view:focus{outline:none}
.tabbar{display:none}

@media (max-width: 880px){
  .rail{display:none}
  .topbar{display:flex; align-items:center; justify-content:space-between; padding:10px 14px; padding-top:calc(10px + env(safe-area-inset-top,0px));
    background:color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    box-shadow:0 1px 0 var(--line); position:sticky; top:0; z-index:5}
  .topbar .brand{font-size:1.1rem}
  #view{padding:16px 14px 112px}
  .tabbar{display:flex; position:fixed; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom,0px));
    background:color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-radius:22px; padding:6px; z-index:10; box-shadow:0 4px 0 var(--edge), 0 18px 40px -16px rgba(29,22,70,.5), inset 0 0 0 1px var(--line)}
  .tabbar .nav-link{flex:1; flex-direction:column; gap:2px; padding:7px 2px 6px; font-size:.7rem; border-radius:16px; text-align:center}
  .tabbar .nav-ico{font-size:1.4rem}
  .tabbar .badge{position:absolute; top:3px; right:16%; margin:0}
}

.view-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.view-head h1{font-size:1.9rem}
.view-box{display:flex; flex-direction:column; gap:26px; animation:viewin .28s ease}
@keyframes viewin{from{opacity:0; transform:translateY(6px)}}
.block{display:flex; flex-direction:column; gap:12px}
.block-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.block h2{font-size:1.35rem}

.loading{display:grid; place-items:center; padding:90px 0}
.spinner{width:44px; height:44px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #fff5cf, var(--gold) 55%, var(--gold-dk)); animation:spinY .9s linear infinite}
@keyframes spinY{to{transform:rotateY(360deg)}}

.empty{display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:40px 20px; color:var(--muted); font-weight:600}
.empty-ico{font-size:2.8rem}
.empty b{color:var(--ink); font-family:var(--display); font-weight:400; font-size:1.25rem}
.empty p{max-width:40ch}
.empty > *:last-child{margin-top:10px}

/* ============ toast, burst, konfety ============ */
.toast{position:fixed; left:50%; bottom:calc(100px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%);
  background:var(--ink); color:var(--bg); padding:13px 20px; border-radius:16px; font-weight:800; z-index:600;
  box-shadow:0 10px 30px rgba(0,0,0,.3); animation:toastin .25s cubic-bezier(.2,1.4,.4,1); max-width:90vw; text-align:center}
@media (min-width: 881px){ .toast{bottom:28px} }
.toast.bad{background:var(--bad-dk); color:#fff}
@keyframes toastin{from{opacity:0; transform:translate(-50%,16px) scale(.9)}}
.burst{position:fixed; z-index:700; font-size:1.5rem; pointer-events:none; animation:burst .9s cubic-bezier(.1,.8,.3,1) forwards}
@keyframes burst{to{transform:translate(var(--dx),var(--dy)) scale(1.3) rotate(40deg); opacity:0}}
.confetti{position:fixed; inset:0; pointer-events:none; z-index:800}

/* ============ sheet ============ */
.sheet{border:none; padding:0; border-radius:28px 28px 0 0; width:100%; max-width:540px; margin:auto auto 0; background:var(--panel); color:var(--ink); box-shadow:0 -10px 50px rgba(0,0,0,.3); max-height:92vh}
.sheet[open]{animation:sheetin .3s cubic-bezier(.2,1.1,.4,1)}
@keyframes sheetin{from{transform:translateY(40px); opacity:0}}
.sheet::backdrop{background:rgba(15,11,42,.55); backdrop-filter:blur(3px)}
@media (min-width: 640px){ .sheet{border-radius:28px; margin:auto} }
.sheet-head{display:flex; align-items:center; gap:12px; padding:22px 22px 4px}
.sheet-icon{font-size:1.8rem; width:52px; height:52px; display:grid; place-items:center; border-radius:16px; background:var(--panel-2); flex:none}
.sheet-head h2{flex:1; font-size:1.4rem}
.sheet-body{padding:14px 22px; overflow-y:auto; max-height:62vh; line-height:1.5; font-weight:600}
.sheet-body > p + p{margin-top:8px}
.sheet-actions{display:flex; gap:10px; padding:14px 22px calc(22px + env(safe-area-inset-bottom,0px)); flex-wrap:wrap}
.sheet-actions .btn{flex:1; min-width:140px}
.sheet-pts{font-family:var(--display); font-size:2.7rem; margin-bottom:10px; display:flex; align-items:baseline; gap:8px}
.sheet-pts span{font-family:var(--font); font-size:1rem; font-weight:800; color:var(--muted)}
.sheet-pts small{font-family:var(--font); font-size:.85rem; font-weight:700; color:var(--muted)}
.sheet-pts.pos{color:var(--good)}
.sheet-pts.neg{color:var(--bad-dk)}
.boost-line{display:inline-flex; gap:6px; align-items:center; font-weight:800; font-size:.86rem; color:var(--gold-ink); background:color-mix(in srgb, var(--gold) 30%, var(--panel)); border-radius:99px; padding:5px 12px; margin-bottom:12px}
@media (prefers-color-scheme: dark){ .boost-line{color:var(--gold)} }

/* ============ mince ============ */
.coin{width:150px; height:150px; border-radius:50%; flex:none; display:grid; place-items:center; position:relative;
  background:radial-gradient(circle at 34% 28%, #fff7d6 0 8%, #ffe07a 22%, var(--gold) 50%, #e09400 100%);
  box-shadow:inset 0 0 0 7px rgba(255,255,255,.25), inset 0 -8px 0 rgba(160,90,0,.25), 0 7px 0 #b87500, 0 22px 40px -14px rgba(224,148,0,.7)}
.coin::after{content:''; position:absolute; inset:14px; border-radius:50%; border:3px dashed rgba(122,70,0,.28)}
.coin.flip{animation:coinflip .9s cubic-bezier(.2,1.2,.4,1)}
@keyframes coinflip{from{transform:rotateY(180deg) scale(.6)}to{transform:rotateY(0) scale(1)}}
.coin-face{display:flex; flex-direction:column; align-items:center; line-height:1; position:relative; z-index:1}
.coin-num{font-family:var(--display); font-weight:400; font-size:calc(150px * var(--k,.27)); color:#5a3600; text-shadow:0 2px 0 rgba(255,255,255,.45)}
.coin-unit{font-size:.78rem; font-weight:900; color:#7a4d00; margin-top:2px}
.coin.small{width:30px; height:30px; box-shadow:0 2px 0 #b87500}
.coin.small::after{display:none}
.coin.small .coin-num{font-size:.72rem}

/* ============ scéna (domů, dítě) ============ */
.stage{position:relative; overflow:hidden; border-radius:var(--r-xl); padding:26px 26px 22px; color:#fff;
  background:
    radial-gradient(600px 300px at 15% 0%, color-mix(in srgb, var(--me) 75%, transparent), transparent 70%),
    radial-gradient(500px 300px at 100% 100%, rgba(47,180,255,.35), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--me) 55%, #1d1646), #150f3a 75%);
  box-shadow:0 6px 0 #0c0826, 0 30px 50px -28px rgba(20,12,60,.8);
  display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:center}
.stage::before{content:''; position:absolute; inset:0; pointer-events:none; opacity:.6;
  background-image:radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 20%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 85% 60%, #fff, transparent), radial-gradient(1px 1px at 40% 80%, #fff, transparent),
    radial-gradient(1px 1px at 60% 50%, #fff, transparent), radial-gradient(1.5px 1.5px at 10% 75%, #fff, transparent),
    radial-gradient(1px 1px at 92% 12%, #fff, transparent), radial-gradient(1px 1px at 52% 8%, #fff, transparent);
  animation:twinkle 4s ease-in-out infinite alternate}
@keyframes twinkle{to{opacity:.2}}
.stage > *{position:relative}
.stage h1{font-size:2.1rem; text-shadow:0 2px 0 rgba(0,0,0,.25)}
.stage-text{display:flex; flex-direction:column; gap:10px; min-width:0}
.stage-title{font-family:var(--display); font-size:1.1rem; color:var(--gold)}
.stage-coin{display:flex; flex-direction:column; align-items:center; gap:8px}
.stage-sub{font-size:.78rem; color:rgba(255,255,255,.78); text-align:center; max-width:160px; font-weight:700}
.stage-bar{display:flex; flex-direction:column; gap:5px}
.stage-bar-row{display:flex; justify-content:space-between; gap:10px; font-size:.84rem; font-weight:800; color:rgba(255,255,255,.88)}
.stage .meter{background:rgba(255,255,255,.14); box-shadow:none}
.stage .meter span{background:linear-gradient(90deg, #ffe07a, var(--gold)); box-shadow:0 0 12px rgba(255,197,61,.6)}
.stage .season-meter span{background:linear-gradient(90deg, #7fe0ff, var(--sky)); box-shadow:0 0 10px rgba(47,180,255,.6)}
.stage-chips{display:flex; gap:8px; flex-wrap:wrap}
.stage-chip{display:inline-flex; gap:6px; align-items:center; font-weight:800; font-size:.84rem; padding:6px 12px; border-radius:99px; background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.stage-chip.hot{background:linear-gradient(90deg, rgba(255,120,40,.5), rgba(255,79,109,.35)); box-shadow:inset 0 0 0 1px rgba(255,160,90,.55)}
.stage-chip.gold{background:rgba(255,197,61,.2); box-shadow:inset 0 0 0 1px rgba(255,197,61,.5); color:#ffe39a}
.stage-actions{grid-column:1/-1; display:flex; gap:10px; flex-wrap:wrap; margin-top:4px}
.stage-actions .btn{flex:1 1 150px}
.stage-actions .btn.ghost{color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.28)}
@media (max-width: 720px){
  .stage{grid-template-columns:auto 1fr; padding:20px 18px 18px; gap:16px}
  .stage-coin{grid-column:1/-1; grid-row:2}
  .stage-coin .coin{width:124px; height:124px}
  .stage-coin .coin .coin-num{font-size:calc(124px * var(--k,.27))}
  .stage h1{font-size:1.6rem}
}

/* ============ avatar s prstencem ============ */
.ring{position:relative; width:112px; height:112px; flex:none; display:grid; place-items:center}
.ring svg{position:absolute; inset:0; transform:rotate(-90deg); overflow:visible}
.ring .ring-bg{stroke:rgba(255,255,255,.14)}
.ring .ring-fg{stroke:var(--gold); stroke-linecap:round; filter:drop-shadow(0 0 5px rgba(255,197,61,.7)); transition:stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1)}
.ring .avatar{width:80px; height:80px; font-size:2.6rem}
.ring-lvl{position:absolute; bottom:-8px; left:50%; transform:translateX(-50%); font-family:var(--display); font-size:.95rem; color:var(--gold-ink);
  background:var(--gold); border-radius:99px; padding:4px 11px 3px; box-shadow:0 3px 0 #b87500; white-space:nowrap}
@media (max-width: 720px){ .ring{width:92px; height:92px} .ring .avatar{width:64px; height:64px; font-size:2.1rem} }

/* ============ meter ============ */
.meter{height:12px; background:var(--panel-2); border-radius:99px; overflow:hidden; display:flex; box-shadow:inset 0 0 0 2px var(--line)}
.meter span{display:block; height:100%; background:var(--violet); border-radius:inherit; transition:width .9s cubic-bezier(.2,.8,.2,1)}
.season-meter{height:8px}

/* ============ dnešní dobrodružství ============ */
.adv-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px}
@media (max-width: 880px){ .adv-grid{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:84%; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -14px; padding:4px 14px 12px; scrollbar-width:none} .adv-grid > *{scroll-snap-align:center} }
.adv{--a:var(--violet); background:var(--panel); border-radius:var(--r-lg); padding:18px; display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden;
  box-shadow:var(--lift), inset 0 0 0 2px color-mix(in srgb, var(--a) 22%, transparent)}
.adv::after{content:''; position:absolute; right:-34px; top:-34px; width:120px; height:120px; border-radius:50%; background:color-mix(in srgb, var(--a) 12%, transparent)}
.adv > *{position:relative; z-index:1}
.adv-top{display:flex; align-items:center; gap:12px}
.adv-ico{width:50px; height:50px; border-radius:16px; display:grid; place-items:center; font-size:1.7rem; background:color-mix(in srgb, var(--a) 16%, var(--panel)); flex:none}
.adv h3{font-size:1.2rem}
.adv-sub{font-size:.8rem; font-weight:900; color:var(--a)}
.adv p{font-size:.96rem; line-height:1.45; font-weight:700; flex:1}
.adv .btn{margin-top:auto}
.adv.mission{--a:var(--violet)}
.adv.mission p{font-size:1.04rem}
.adv.daily{--a:var(--gold-dk)}
.adv.games{--a:var(--sky-dk)}
.adv-stamp{align-self:flex-start; font-weight:900; font-size:.82rem; color:var(--good-ink); background:var(--good-bg); padding:6px 12px; border-radius:99px; margin-top:auto}
.daily-list{display:flex; flex-direction:column; gap:6px; flex:1}
.daily-item{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; background:var(--panel-2); border:0; cursor:pointer; text-align:left; font-weight:800; font-size:.9rem; color:var(--ink)}
.daily-item:hover{box-shadow:inset 0 0 0 2px var(--gold)}
.daily-item b{margin-left:auto; color:var(--good); font-family:var(--display); font-weight:400; white-space:nowrap}

/* ============ rodinná výprava ============ */
.team{background:var(--panel); border-radius:var(--r-lg); padding:20px; box-shadow:var(--lift); display:flex; flex-direction:column; gap:14px}
.team-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.team-head h2{font-size:1.35rem; flex:1}
.team-sub{color:var(--muted); font-size:.92rem; line-height:1.45; font-weight:700}
.trail{position:relative; height:26px; border-radius:99px; background:var(--panel-2); box-shadow:inset 0 0 0 2px var(--line); display:flex; overflow:hidden}
.trail span{height:100%; transition:width 1.1s cubic-bezier(.2,.8,.2,1); background-image:repeating-linear-gradient(-45deg, rgba(255,255,255,.2) 0 8px, transparent 8px 16px)}
.trail-ends{display:flex; justify-content:space-between; font-size:.84rem; font-weight:800; color:var(--muted)}
.team-kids{display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); gap:10px}
.team-kid{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; background:color-mix(in srgb, var(--c) 10%, var(--panel)); box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--c) 30%, transparent)}
.team-kid b{font-family:var(--display); font-weight:400; font-size:1.25rem}
.team-kid small{display:block; font-weight:800; color:var(--muted); font-size:.75rem}
.team-kid .ok{margin-left:auto; font-size:1.2rem}
.team.won{box-shadow:var(--lift), inset 0 0 0 3px var(--good)}
.peace{display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:16px; background:linear-gradient(90deg, color-mix(in srgb, var(--sky) 15%, var(--panel)), var(--panel))}
.peace-num{font-family:var(--display); font-size:2.1rem; color:var(--sky-dk); line-height:1; min-width:1.4em; text-align:center}
@media (prefers-color-scheme: dark){ .peace-num{color:var(--sky)} }
.peace p{font-size:.9rem; font-weight:700; line-height:1.4}

/* ============ pochvala ============ */
.kudos{display:flex; align-items:center; gap:16px; padding:18px 20px; border-radius:var(--r-lg);
  background:linear-gradient(120deg, color-mix(in srgb, var(--gold) 28%, var(--panel)), var(--panel) 70%); box-shadow:var(--lift); flex-wrap:wrap}
.kudos-heart{font-size:2.4rem; animation:beat 1.6s ease-in-out infinite}
@keyframes beat{0%,60%,100%{transform:scale(1)}30%{transform:scale(1.15)}}
.kudos-text{flex:1; min-width:200px}
.kudos-text h3{font-size:1.25rem; margin-bottom:3px}
.kudos-text p{color:var(--muted); font-size:.92rem; line-height:1.45; font-weight:700}
.kudos-chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.kudos-idea{border:0; background:var(--panel-2); border-radius:99px; padding:7px 12px; font-weight:800; font-size:.84rem; cursor:pointer; box-shadow:inset 0 0 0 2px var(--line)}
.kudos-idea:hover{box-shadow:inset 0 0 0 2px var(--violet)}

/* ============ kachle aktivit ============ */
.tiles{display:grid; grid-template-columns:repeat(auto-fill, minmax(155px,1fr)); gap:14px}
.tile{--a:var(--good); display:flex; flex-direction:column; align-items:center; gap:6px; padding:18px 10px 14px; border:0; position:relative;
  border-radius:var(--r-md); background:var(--panel); cursor:pointer; text-align:center; color:var(--ink);
  box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--a) 22%, transparent), 0 4px 0 color-mix(in srgb, var(--a) 40%, var(--edge)); transition:transform .12s ease}
.tile:hover{transform:translateY(-3px)}
.tile:active{transform:translateY(2px)}
.tile-ico{font-size:2.1rem; width:58px; height:58px; display:grid; place-items:center; border-radius:18px; background:color-mix(in srgb, var(--a) 13%, var(--panel))}
.tile-title{font-weight:800; font-size:.92rem; line-height:1.25}
.tile-pts{font-family:var(--display); font-weight:400; font-size:1.25rem; color:var(--a)}
.tile.bad{--a:var(--bad)}
.tile.bad .tile-pts{color:var(--bad-dk)}
.tile.daily{--a:var(--gold-dk); background:linear-gradient(180deg, color-mix(in srgb, var(--gold) 20%, var(--panel)), var(--panel))}
.tile.daily .tile-pts{color:var(--good)}
.tile-flag{position:absolute; top:-9px; right:-6px; background:var(--gold); color:var(--gold-ink); font-family:var(--display); font-size:.8rem; padding:4px 9px 3px; border-radius:99px; box-shadow:0 3px 0 #b87500; transform:rotate(6deg)}
.tile-old{font-size:.78rem; font-weight:800; color:var(--muted); text-decoration:line-through; margin-top:-4px}

/* ============ odměny ============ */
.reward-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); gap:16px}
.reward{border-radius:var(--r-md); background:var(--panel); padding:16px; box-shadow:var(--lift-sm), inset 0 0 0 2px var(--line); display:flex; flex-direction:column; gap:10px; transition:transform .15s}
.reward.can{box-shadow:var(--lift), inset 0 0 0 2px color-mix(in srgb, var(--violet) 45%, transparent)}
.reward.can:hover{transform:translateY(-3px)}
.reward-top{display:flex; justify-content:space-between; align-items:flex-start}
.reward .tile-ico{background:color-mix(in srgb, var(--violet) 12%, var(--panel))}
.reward-cost{font-family:var(--display); font-weight:400; font-size:1.45rem; color:var(--violet)}
.reward-cost small{font-family:var(--font); font-size:.72rem; font-weight:800; color:var(--muted); margin-left:3px}
.reward h3{font-family:var(--font); font-weight:800; font-size:1rem; min-height:2.4em}
.reward .meter span{background:linear-gradient(90deg, var(--violet), #9f86ff)}
.missing{font-size:.84rem; color:var(--muted); font-weight:800}
.reward.locked{opacity:.65}
.lock-info{font-size:.8rem; color:var(--muted); font-weight:800; line-height:1.4}
.wallet{font-weight:800; background:var(--panel); border-radius:14px; padding:8px 14px; box-shadow:var(--lift-sm), inset 0 0 0 2px var(--line); display:flex; gap:6px; align-items:center}
.wallet b{font-family:var(--display); font-weight:400; font-size:1.25rem; color:var(--gold-dk)}

/* ============ společný cíl ============ */
.goal-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(270px,1fr)); gap:14px}
.goal{border-radius:var(--r-md); background:var(--panel); padding:18px; box-shadow:var(--lift); display:flex; flex-direction:column; gap:11px}
.goal.reached{background:linear-gradient(160deg, color-mix(in srgb, var(--gold) 24%, var(--panel)), var(--panel))}
.goal-head{display:flex; gap:12px; align-items:center}
.goal-title{font-family:var(--display); font-weight:400; font-size:1.2rem}
.goal-sub{font-size:.84rem; color:var(--muted); font-weight:700}
.goal-meter{height:16px}
.goal-meter span{display:block; height:100%; float:left; border-radius:0}
.legend{display:flex; gap:12px; flex-wrap:wrap; font-size:.8rem; color:var(--muted); font-weight:800}
.legend-item{display:flex; align-items:center; gap:5px}
.swatch{width:12px; height:12px; border-radius:4px; display:inline-block}
.swatch.mark-sw{background:transparent; border:2px solid var(--gold-dk); border-radius:50%}
.bar-up{fill:var(--good)} .bar-lost{fill:var(--bad)} .bar-spent{fill:var(--violet)} .bar-saved{fill:#b39ddb}
.swatch.bar-up{background:var(--good)} .swatch.bar-lost{background:var(--bad)} .swatch.bar-spent{background:var(--violet)} .swatch.bar-saved{background:#b39ddb}
.goal-note{font-size:.9rem; font-weight:800}
.goal-actions{display:flex; flex-direction:column; gap:8px; align-items:flex-start}
.goal-actions .btn.violet, .goal-actions .btn.good{align-self:stretch}

/* ============ ikona, avatar ============ */
.ico{width:44px; height:44px; border-radius:14px; display:grid; place-items:center; font-size:1.3rem; flex:none; background:var(--panel-2)}
.ico.big{width:54px; height:54px; font-size:1.6rem; border-radius:16px}
.ico.good{background:var(--good-bg)}
.ico.bad{background:var(--bad-bg)}
.ico.violet{background:color-mix(in srgb, var(--violet) 15%, var(--panel))}
.ico.sky{background:color-mix(in srgb, var(--sky) 18%, var(--panel))}
.ico.gold{background:color-mix(in srgb, var(--gold) 28%, var(--panel))}
.avatar{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-size:1.2rem; flex:none;
  background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c,var(--violet)) 22%, #fff), color-mix(in srgb, var(--c,var(--violet)) 55%, var(--panel)));
  box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--c,var(--violet)) 70%, transparent)}
.avatar.xs{width:22px; height:22px; font-size:.78rem}
.avatar.sm{width:30px; height:30px; font-size:1rem}
.avatar.lg{width:56px; height:56px; font-size:1.8rem}
.avatar.xl{width:64px; height:64px; font-size:2.1rem}
.avatar.f-bronze{box-shadow:0 0 0 3px #d08a4a, 0 0 0 6px color-mix(in srgb, #d08a4a 30%, transparent)}
.avatar.f-silver{box-shadow:0 0 0 3px #c3cbe0, 0 0 0 6px color-mix(in srgb, #c3cbe0 40%, transparent)}
.avatar.f-gold{box-shadow:0 0 0 3px var(--gold), 0 0 14px 2px rgba(255,197,61,.55)}
.avatar.f-diamond{box-shadow:0 0 0 3px #7fe0ff, 0 0 0 6px #c79bff, 0 0 18px 3px rgba(127,224,255,.6)}

/* ============ historie ============ */
.list{display:flex; flex-direction:column; gap:8px}
.entry{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:12px 14px; border-radius:var(--r-sm); background:var(--panel); box-shadow:0 2px 0 var(--edge), inset 0 0 0 1px var(--line)}
.entry.pending{background:linear-gradient(90deg, var(--warn-bg), var(--panel))}
.entry.rejected,.entry.cancelled{opacity:.6}
.entry-main{min-width:0}
.entry-title{font-weight:800; font-size:.96rem}
.entry-meta{display:flex; gap:8px; flex-wrap:wrap; font-size:.78rem; color:var(--muted); margin-top:2px; font-weight:700}
.who-tag{display:flex; align-items:center; gap:4px; font-weight:800; color:var(--ink)}
.note{font-style:italic}
.entry-side{display:flex; flex-direction:column; align-items:flex-end; gap:4px; max-width:110px}
.entry-side .pill{white-space:normal; text-align:right; line-height:1.25}
.entry-actions{grid-column:1/-1; display:flex; justify-content:flex-end; gap:8px; margin-top:2px}
.pts{font-family:var(--display); font-weight:400; font-size:1.2rem; white-space:nowrap}
.pts.big{font-size:1.5rem}
.pts.pos{color:var(--good)}
.pts.neg{color:var(--bad-dk)}
.pill{font-size:.72rem; font-weight:900; padding:4px 10px; border-radius:99px; background:var(--panel-2)}
.pill.warn{background:var(--warn-bg); color:var(--warn-ink)}
.pill.bad{background:var(--bad-bg); color:var(--bad-dk)}
.pill.good{background:var(--good-bg); color:var(--good-ink)}

/* ============ seg / chips ============ */
.seg{display:inline-flex; gap:4px; background:var(--panel); border-radius:16px; padding:5px; box-shadow:inset 0 0 0 2px var(--line); max-width:100%; overflow-x:auto; scrollbar-width:none; align-self:flex-start}
.seg.wrap{flex-wrap:wrap}
.seg-btn{border:none; background:transparent; padding:9px 14px; border-radius:12px; font-weight:800; cursor:pointer; white-space:nowrap; text-decoration:none; color:var(--muted); font-size:.9rem}
.seg-btn.on{background:var(--violet); color:#fff; box-shadow:0 3px 0 var(--violet-dk)}
.ov-controls{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.ov-content{display:flex; flex-direction:column; gap:18px}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{border:0; background:var(--panel); padding:8px 14px; border-radius:99px; font-weight:800; font-size:.86rem; cursor:pointer; box-shadow:inset 0 0 0 2px var(--line); display:inline-flex; align-items:center; gap:6px; color:var(--ink)}
.chip.on{background:var(--violet); color:#fff; box-shadow:0 3px 0 var(--violet-dk)}
.chip.lg{padding:10px 16px; font-size:.95rem}
.chip.lg.on{background:color-mix(in srgb, var(--c) 28%, var(--panel)); color:var(--ink); box-shadow:inset 0 0 0 3px var(--c)}
.daypick{display:flex; flex-direction:column; gap:10px}

/* ============ statistiky ============ */
.stat-row{display:flex; gap:10px; flex-wrap:wrap}
.stat{background:var(--panel); border-radius:16px; padding:11px 16px; display:flex; flex-direction:column; gap:2px; min-width:112px; box-shadow:var(--lift-sm), inset 0 0 0 1px var(--line)}
.stat span{font-size:.76rem; color:var(--muted); font-weight:800}
.stat b{font-family:var(--display); font-weight:400; font-size:1.4rem}
.stat.good b{color:var(--good)} .stat.bad b{color:var(--bad-dk)} .stat.violet b{color:var(--violet)} .stat.coin b{color:var(--gold-dk)}
.panel{background:var(--panel); border-radius:var(--r-lg); padding:20px; box-shadow:var(--lift)}
.panel h3{font-size:1.25rem; margin-bottom:10px}
.panel > .muted{line-height:1.5; margin-bottom:10px; font-weight:600}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:700px){.two-col{grid-template-columns:1fr}}
.chart{width:100%; height:auto; display:block; margin-top:6px}
.chart .grid{stroke:var(--muted); stroke-opacity:.18}
.chart .zero{stroke:var(--ink); stroke-opacity:.3}
.chart .tick{font-size:10px; fill:var(--muted); font-family:var(--font); font-weight:700}
.chart .mark{fill:var(--gold); stroke:var(--gold-dk); stroke-width:2}
.top{display:flex; flex-direction:column; gap:10px}
.top-row{display:grid; grid-template-columns:minmax(80px,1.3fr) 1fr auto; gap:10px; align-items:center; font-size:.87rem}
.top-label{display:flex; gap:6px; align-items:center; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.top-track{background:var(--panel-2); border-radius:99px; height:10px; overflow:hidden}
.top-fill{display:block; height:100%; border-radius:inherit}
.top-fill.good{background:var(--good)} .top-fill.bad{background:var(--bad)} .top-fill.violet{background:var(--violet)}
.top-val{display:flex; gap:6px; font-weight:800; color:var(--muted); white-space:nowrap}

/* ============ kalendář ============ */
.cal-nav{display:flex; align-items:center; justify-content:center; gap:16px}
.cal-nav h2{font-size:1.4rem; text-transform:capitalize; min-width:170px; text-align:center}
.cal-layout{display:grid; grid-template-columns:1fr 380px; gap:18px}
@media (max-width:820px){.cal-layout{grid-template-columns:1fr}}
.cal{background:var(--panel); border-radius:var(--r-lg); padding:14px; box-shadow:var(--lift)}
.cal-week{display:grid; grid-template-columns:repeat(7,1fr); font-size:.76rem; font-weight:900; color:var(--muted); text-align:center; margin-bottom:6px}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:5px}
.cal-cell{aspect-ratio:1; border:0; border-radius:12px; background:var(--panel-2); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; cursor:pointer; font-weight:800; font-size:.8rem; padding:2px; position:relative; color:var(--ink)}
.cal-cell.empty{background:transparent; cursor:default}
.cal-cell:disabled{opacity:.3; cursor:default}
.cal-cell .d{font-size:.88rem}
.cal-cell .n{font-size:.66rem; font-weight:900}
.cal-cell.up{background:var(--good-bg)} .cal-cell.up .n{color:var(--good-ink)}
.cal-cell.down{background:var(--bad-bg)} .cal-cell.down .n{color:var(--bad-dk)}
.cal-cell.today{box-shadow:inset 0 0 0 2px var(--violet)}
.cal-cell.sel{box-shadow:inset 0 0 0 3px var(--ink)}
.marks{display:flex; gap:3px; height:6px}
.marks i{width:6px; height:6px; border-radius:50%; display:block}
.m-spend{background:var(--violet)}
.m-pend{background:var(--warn)}
.cal-legend{display:flex; gap:16px; margin-top:10px; font-size:.76rem; color:var(--muted); font-weight:800; flex-wrap:wrap}
.cal-legend span{display:flex; align-items:center; gap:5px}

/* ============ žebříček ============ */
.lb-inner{display:flex; flex-direction:column; gap:16px}
.season-banner{display:flex; align-items:center; gap:14px; border-radius:var(--r-lg); padding:16px 20px; font-size:1.8rem; color:#fff; background:linear-gradient(120deg, #2a1d7a, var(--violet)); box-shadow:0 5px 0 #1a1150}
.season-banner b{font-family:var(--display); font-weight:400; font-size:1.35rem; display:block}
.season-banner .muted{color:rgba(255,255,255,.78); font-size:.85rem; font-weight:700}
.lb-list{display:flex; flex-direction:column; gap:10px}
.lb-row{display:flex; align-items:center; gap:12px; border-radius:var(--r-md); background:var(--panel); padding:12px 16px; box-shadow:var(--lift-sm), inset 0 0 0 1px var(--line)}
.lb-row.first{background:linear-gradient(90deg, color-mix(in srgb, var(--gold) 26%, var(--panel)), var(--panel)); box-shadow:var(--lift), inset 0 0 0 2px color-mix(in srgb, var(--gold) 60%, transparent)}
.lb-rank{font-size:1.5rem; font-family:var(--display); width:34px; text-align:center; flex:none}
.lb-main{flex:1; display:flex; flex-direction:column; min-width:0}
.lb-main b{font-family:var(--display); font-weight:400; font-size:1.2rem}
.lb-main span{font-size:.8rem; font-weight:700}
.lb-score{display:flex; flex-direction:column; align-items:flex-end; gap:2px; font-size:.85rem; font-weight:800}
.lb-score b{color:var(--violet); font-family:var(--display); font-weight:400; font-size:1.25rem}
.hof-season{display:flex; flex-direction:column; gap:12px}
.hof-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap}
.day-box{background:var(--panel); border-radius:var(--r-lg); padding:16px; box-shadow:var(--lift)}
.day-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; gap:10px}
.day-head h3{font-size:1.2rem; text-transform:capitalize}

/* ============ odznaky ============ */
.badge-summary{display:flex; align-items:center; gap:16px; padding:18px 20px; border-radius:var(--r-lg); background:var(--panel); box-shadow:var(--lift); flex-wrap:wrap}
.badge-summary .big-num{font-family:var(--display); font-size:2.7rem; color:var(--gold-dk); line-height:1}
.badge-summary .grow{flex:1; min-width:180px; display:flex; flex-direction:column; gap:6px; font-weight:800}
.badge-summary .meter span{background:linear-gradient(90deg, var(--gold), #ffe07a)}
.badge-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px}
.bdg{border:0; background:var(--panel); border-radius:var(--r-md); padding:16px 12px 14px; display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; box-shadow:var(--lift-sm), inset 0 0 0 1px var(--line); cursor:pointer; color:var(--ink)}
.bdg-medal{width:66px; height:66px; border-radius:50%; display:grid; place-items:center; font-size:2rem; background:radial-gradient(circle at 35% 30%, #fff5cf, var(--gold) 55%, var(--gold-dk)); box-shadow:0 4px 0 #b87500, inset 0 0 0 4px rgba(255,255,255,.3)}
.bdg-name{font-family:var(--display); font-size:1.02rem; line-height:1.15}
.bdg-desc{font-size:.76rem; color:var(--muted); font-weight:700; line-height:1.35}
.bdg .meter{width:100%; height:7px}
.bdg .meter span{background:var(--gold-dk)}
.bdg.locked .bdg-medal{background:var(--panel-2); box-shadow:inset 0 0 0 2px var(--line); filter:grayscale(1); opacity:.5}
.bdg.locked .bdg-name{color:var(--muted)}
.bdg.fresh{animation:fresh 1.2s ease 2}
@keyframes fresh{50%{transform:scale(1.06); box-shadow:0 0 0 4px var(--gold)}}

/* ============ oslavy ============ */
.celebrate{position:fixed; inset:0; z-index:750; display:grid; place-items:center; padding:24px; background:rgba(15,11,42,.72); backdrop-filter:blur(6px); animation:fadein .25s ease}
@keyframes fadein{from{opacity:0}}
.celebrate-card{width:100%; max-width:420px; text-align:center; padding:30px 24px 24px; border-radius:32px; color:#fff; position:relative; overflow:hidden;
  background:radial-gradient(400px 240px at 50% 0%, color-mix(in srgb, var(--me) 70%, transparent), transparent 70%), linear-gradient(170deg, #2a1d7a, #150f3a);
  box-shadow:0 8px 0 #0c0826, 0 40px 80px -20px rgba(0,0,0,.7); animation:celebin .55s cubic-bezier(.2,1.5,.4,1)}
@keyframes celebin{from{transform:scale(.6) rotate(-4deg); opacity:0}}
.celebrate-card::before{content:''; position:absolute; left:50%; top:90px; width:560px; height:560px; margin:-280px 0 0 -280px; pointer-events:none;
  background:repeating-conic-gradient(rgba(255,255,255,.07) 0 10deg, transparent 10deg 20deg); animation:rays 14s linear infinite}
@keyframes rays{to{transform:rotate(360deg)}}
.celebrate-card > *{position:relative}
.celebrate-big{font-size:5rem; line-height:1; margin:6px 0 10px; filter:drop-shadow(0 6px 0 rgba(0,0,0,.25)); animation:bob 2.4s ease-in-out infinite}
.celebrate-card h2{font-size:2.1rem; color:var(--gold); text-shadow:0 3px 0 rgba(0,0,0,.3)}
.celebrate-card p{margin:8px auto 18px; max-width:32ch; line-height:1.5; font-weight:700; color:rgba(255,255,255,.86)}
.celebrate-card .btn{min-width:180px}
.news-list{display:flex; flex-direction:column; gap:8px; margin:6px 0 18px; text-align:left; max-height:44vh; overflow-y:auto}
.news-item{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.09); animation:slidein .4s ease backwards; font-weight:800}
.news-item > div{min-width:0; flex:1}
.news-item small{display:block; color:rgba(255,255,255,.66); font-weight:700}
.news-item .pts.pos{color:#6bf0b0} .news-item .pts.neg{color:#ff9aab}
.news-total{font-family:var(--display); font-size:1.4rem; color:var(--gold); margin-bottom:14px}
@keyframes slidein{from{opacity:0; transform:translateX(-14px)}}

/* ============ herna ============ */
.arcade-head{display:flex; gap:16px; align-items:center; padding:22px; border-radius:var(--r-xl); color:#fff; flex-wrap:wrap;
  background:radial-gradient(500px 240px at 90% 0%, rgba(255,197,61,.35), transparent 70%), linear-gradient(140deg, #0a86d1, #3a2bb8); box-shadow:0 6px 0 #1f1a78}
.arcade-head h1{font-size:2.1rem}
.arcade-head p{color:rgba(255,255,255,.88); font-weight:700; line-height:1.45; max-width:52ch; margin-top:4px}
.arcade-head .grow{flex:1; min-width:220px}
.arcade-tokens{display:flex; flex-direction:column; gap:6px; align-items:center; background:rgba(0,0,0,.22); padding:12px 16px; border-radius:18px; font-weight:800; font-size:.8rem}
.arcade-tokens > div{display:flex; gap:6px}
.token{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:.9rem; background:radial-gradient(circle at 35% 30%, #fff5cf, var(--gold) 55%, var(--gold-dk)); box-shadow:0 2px 0 #b87500}
.token.used{filter:grayscale(1); opacity:.35}
.arcade-note{padding:13px 16px; border-radius:16px; background:var(--warn-bg); color:var(--warn-ink); font-weight:800; line-height:1.45}
.game-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:18px}
.gcard{--g:var(--sky); border:0; padding:0; text-align:left; cursor:pointer; color:var(--ink); border-radius:var(--r-lg); overflow:hidden; background:var(--panel);
  box-shadow:0 5px 0 color-mix(in srgb, var(--g) 55%, #000), 0 20px 30px -22px color-mix(in srgb, var(--g) 70%, #000); transition:transform .15s; display:flex; flex-direction:column}
.gcard:hover{transform:translateY(-4px) rotate(-.6deg)}
.gcard:active{transform:translateY(2px)}
.gcard-art{height:124px; display:grid; place-items:center; font-size:3.8rem; position:relative;
  background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.4), transparent 50%), linear-gradient(140deg, var(--g), color-mix(in srgb, var(--g) 55%, #1d1646))}
.gcard-art > span{filter:drop-shadow(0 5px 0 rgba(0,0,0,.2)); transition:transform .3s}
.gcard:hover .gcard-art > span{transform:scale(1.12) rotate(-8deg)}
.gcard-body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1}
.gcard-body h3{font-size:1.35rem}
.gcard-body p{font-size:.88rem; color:var(--muted); font-weight:700; line-height:1.4; flex:1}
.gcard-foot{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:4px}
.gcard-flag{position:absolute; top:10px; right:10px; font-family:var(--display); font-size:.84rem; background:#fff; color:var(--good-dk); padding:5px 10px 4px; border-radius:99px; box-shadow:0 2px 0 rgba(0,0,0,.2)}

.game{display:flex; flex-direction:column; gap:14px; max-width:620px; margin:0 auto; width:100%}
.game-top{display:flex; align-items:center; gap:10px}
.game-top h1{flex:1; font-size:1.7rem}
.hud{display:flex; gap:8px; flex-wrap:wrap}
.hud-item{background:var(--panel); border-radius:14px; padding:8px 14px; box-shadow:var(--lift-sm), inset 0 0 0 1px var(--line); display:flex; flex-direction:column; min-width:84px}
.hud-item span{font-size:.72rem; font-weight:800; color:var(--muted)}
.hud-item b{font-family:var(--display); font-weight:400; font-size:1.4rem}
.hud-item.warn b{color:var(--bad-dk)}
.game-board{background:var(--panel); border-radius:var(--r-xl); padding:16px; box-shadow:var(--lift); position:relative; min-height:280px}
.game-intro{display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:22px 10px}
.game-intro .big{font-size:4.4rem; animation:bob 2.6s ease-in-out infinite}
.game-intro p{max-width:44ch; line-height:1.55; font-weight:700; color:var(--muted)}
.game-intro .goal-line{color:var(--ink); background:var(--panel-2); padding:9px 14px; border-radius:12px}
.timebar{height:10px; border-radius:99px; background:var(--panel-2); overflow:hidden; margin-bottom:10px}
.timebar span{display:block; height:100%; background:linear-gradient(90deg, var(--bad), var(--gold), var(--good)); transition:width .25s linear}

.memo{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; perspective:900px}
.memo-card{aspect-ratio:1; border:0; padding:0; background:none; cursor:pointer; position:relative; transform-style:preserve-3d; transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.memo-card.open, .memo-card.done{transform:rotateY(180deg)}
.memo-card > span{position:absolute; inset:0; border-radius:16px; display:grid; place-items:center; backface-visibility:hidden; -webkit-backface-visibility:hidden}
.memo-back{background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.25), transparent 45%), linear-gradient(140deg, var(--violet), var(--violet-dk)); box-shadow:0 4px 0 #2d1690; color:rgba(255,255,255,.55); font-family:var(--display); font-size:1.7rem}
.memo-front{background:var(--panel-2); transform:rotateY(180deg); font-size:clamp(1.6rem, 7vw, 2.7rem); box-shadow:inset 0 0 0 2px var(--line), 0 4px 0 var(--edge)}
.memo-card.done .memo-front{background:var(--good-bg); box-shadow:inset 0 0 0 3px var(--good), 0 4px 0 var(--good-dk)}

.sort-item{display:flex; flex-direction:column; align-items:center; gap:4px; padding:16px 0 22px; min-height:150px; justify-content:center; position:relative}
.sort-item .emo{font-size:4.4rem; line-height:1; animation:dropin .35s cubic-bezier(.2,1.4,.4,1)}
.sort-item b{font-family:var(--display); font-weight:400; font-size:1.35rem}
@keyframes dropin{from{transform:translateY(-30px) scale(.6); opacity:0}}
.sort-item.wrong .emo{animation:shake .35s}
.bins{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.bin{--c:#999; border:0; cursor:pointer; border-radius:14px 14px 20px 20px; padding:14px 4px 12px; color:#fff; font-family:var(--display); font-size:1rem;
  background:linear-gradient(180deg, color-mix(in srgb, var(--c) 82%, #fff), var(--c)); box-shadow:0 5px 0 color-mix(in srgb, var(--c) 60%, #000); display:flex; flex-direction:column; align-items:center; gap:4px; text-shadow:0 1px 0 rgba(0,0,0,.3)}
.bin > span{font-size:1.6rem}
.bin:active{transform:translateY(3px); box-shadow:0 2px 0 color-mix(in srgb, var(--c) 60%, #000)}
.bin.hit{animation:pop .3s ease}
.bin.miss{animation:shake .3s ease}
.flyscore{position:absolute; left:50%; top:30%; font-family:var(--display); font-size:2.2rem; pointer-events:none; animation:fly .7s ease forwards; transform:translateX(-50%)}
.flyscore.pos{color:var(--good)} .flyscore.neg{color:var(--bad)}
@keyframes fly{to{transform:translate(-50%,-60px); opacity:0}}

.simon{display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:340px; margin:10px auto}
.pad{--c:#888; aspect-ratio:1; border:0; cursor:pointer; border-radius:30px; font-size:2.6rem;
  background:linear-gradient(160deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c)); box-shadow:0 6px 0 color-mix(in srgb, var(--c) 55%, #000); opacity:.5; transition:opacity .1s, transform .1s, filter .1s}
.pad.lit{opacity:1; transform:scale(1.05); filter:brightness(1.2) drop-shadow(0 0 18px var(--c))}
.pad:disabled{cursor:default}
.simon-msg{text-align:center; font-family:var(--display); font-size:1.35rem; min-height:1.6em}

.quiz-q{text-align:center; font-family:var(--display); font-size:clamp(2.4rem, 11vw, 3.8rem); padding:16px 0; animation:dropin .3s ease}
.quiz-a{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.quiz-a .btn{font-size:1.7rem; padding:18px 10px 17px}
.quiz-a .btn.right{--b:var(--good); --e:var(--good-dk); --t:#fff}
.quiz-a .btn.wrong{--b:var(--bad); --e:var(--bad-dk); --t:#fff; animation:shake .3s}
.combo{text-align:center; font-weight:900; color:var(--gold-dk); min-height:1.4em; margin-top:8px}

.result{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:22px 8px}
.result .big{font-size:4.8rem; animation:celebin .5s cubic-bezier(.2,1.5,.4,1)}
.result h2{font-size:2.1rem}
.result p{font-weight:700; color:var(--muted); line-height:1.5; max-width:40ch}
.result .reward-line{font-family:var(--display); font-size:1.35rem; color:var(--good-ink); background:var(--good-bg); padding:10px 18px; border-radius:16px}
.result .row{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:6px}

/* ============ rodič ============ */
.queue{display:flex; flex-direction:column; gap:12px}
.q-card{border-radius:var(--r-md); background:var(--panel); padding:14px 16px; box-shadow:var(--lift); display:flex; flex-direction:column; gap:10px}
.q-card.malus{background:linear-gradient(90deg, var(--bad-bg), var(--panel))}
.q-card.reward{background:linear-gradient(90deg, color-mix(in srgb, var(--violet) 12%, var(--panel)), var(--panel))}
.q-card.goal-q, .q-card.kudos-q{background:linear-gradient(90deg, color-mix(in srgb, var(--gold) 24%, var(--panel)), var(--panel))}
.q-card.mission-q{background:linear-gradient(90deg, color-mix(in srgb, var(--violet) 10%, var(--panel)), var(--panel))}
.q-head{display:flex; align-items:center; gap:10px}
.q-who{flex:1; display:flex; flex-direction:column}
.q-who b{font-family:var(--display); font-weight:400; font-size:1.15rem}
.q-who span{font-size:.8rem; color:var(--muted); font-weight:800}
.q-body{display:flex; gap:12px; align-items:flex-start}
.warn-line{font-size:.82rem; font-weight:800; color:var(--bad-dk); margin-top:3px}
.q-actions{display:flex; gap:10px}
.q-actions .btn{flex:1}
.kid-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:16px}
.kid-card{border-radius:var(--r-lg); background:var(--panel); padding:18px; box-shadow:var(--lift), inset 0 5px 0 var(--c); display:flex; flex-direction:column; gap:12px}
.kid-head{display:flex; align-items:center; gap:12px}
.kid-name{font-family:var(--display); font-weight:400; font-size:1.35rem; display:block}
.kid-bal{display:flex; align-items:baseline; gap:6px; font-weight:800}
.kid-bal b{font-family:var(--display); font-weight:400; font-size:2.4rem; color:var(--gold-dk)}
.kid-season{font-size:.84rem; font-weight:800; color:var(--sky-dk); margin-top:-4px}
@media (prefers-color-scheme: dark){ .kid-season{color:var(--sky)} }
.kid-facts{display:flex; flex-direction:column; gap:3px; font-size:.84rem; color:var(--muted); font-weight:700}
.kid-actions{display:flex; gap:8px}
.kid-actions .btn{flex:1}
.award-bar{position:sticky; bottom:14px; background:var(--panel); border-radius:18px; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  box-shadow:0 4px 0 var(--edge), 0 18px 40px -16px rgba(29,22,70,.5), inset 0 0 0 2px var(--line)}
@media (max-width:880px){ .award-bar{bottom:96px} }
.award-sum{font-weight:800; font-size:.94rem}
.mini-tiles{display:grid; grid-template-columns:repeat(auto-fill, minmax(165px,1fr)); gap:10px}
.mini{display:flex; align-items:center; gap:8px; padding:11px 12px; border:0; border-radius:14px; background:var(--panel); cursor:pointer; text-align:left; box-shadow:inset 0 0 0 2px var(--line); color:var(--ink)}
.mini b{margin-left:auto; font-family:var(--display); font-weight:400}
.mini.good b{color:var(--good)} .mini.bad b{color:var(--bad-dk)}
.mini.sel{background:color-mix(in srgb, var(--violet) 14%, var(--panel)); box-shadow:inset 0 0 0 3px var(--violet)}
.mini-title{font-weight:800; font-size:.88rem}
.custom-form{display:flex; flex-direction:column; gap:10px; max-width:420px}
.crow{display:flex; align-items:center; gap:10px; border-radius:var(--r-sm); background:var(--panel); padding:6px; box-shadow:0 2px 0 var(--edge), inset 0 0 0 1px var(--line)}
.crow.off{opacity:.55}
.crow-hit{flex:1; display:flex; align-items:center; gap:12px; background:none; border:none; padding:8px; cursor:pointer; text-align:left; border-radius:10px; color:var(--ink)}
.crow-hit:hover{background:var(--panel-2)}
.crow-main{display:flex; flex-direction:column; align-items:flex-start; gap:2px; flex:1; min-width:0}
.edit-hint{opacity:.4; font-size:.9rem}
.mover{display:flex; flex-direction:column; gap:2px}
.emoji-field{display:flex; flex-direction:column; gap:8px}
.emoji-input{width:84px; text-align:center; font-size:1.5rem}
.emoji-list{display:flex; flex-wrap:wrap; gap:5px; max-height:112px; overflow-y:auto; padding:8px; border-radius:13px; background:var(--panel-2)}
.emoji-pick{border:none; background:transparent; font-size:1.3rem; padding:4px; border-radius:8px; cursor:pointer}
.emoji-pick:hover{background:var(--panel)}
.user-card{display:flex; flex-direction:column; gap:6px}
.tier-rows{display:flex; flex-direction:column; gap:10px; margin-bottom:6px}
.tier-row{display:grid; grid-template-columns:1fr 1fr auto; gap:10px; align-items:end}
.tier-row .field{margin-bottom:0}
.tier-pct{display:flex; align-items:center; gap:8px}
.tier-pct input{flex:1}
.tier-pct span{font-weight:800; color:var(--muted)}
.tier-empty{margin-bottom:10px}
.row-actions{display:flex; gap:10px; flex-wrap:wrap}
.fun-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:0 16px}
.fun-group{grid-column:1/-1; font-family:var(--display); font-size:1.1rem; margin:14px 0 6px}
.fun-group:first-child{margin-top:0}
.fun-grid .check{grid-column:1/-1}
.row-title{display:flex; align-items:center; gap:8px; margin:0 0 6px}
@media (max-width:560px){
  .game-grid{grid-template-columns:1fr 1fr; gap:12px}
  .gcard-art{height:84px; font-size:2.8rem}
  .gcard-body{padding:10px 12px 12px}
  .gcard-body h3{font-size:1.12rem}
  .gcard-body p{font-size:.78rem}
  .gcard-foot .pill{font-size:.7rem}
}
.bdg-medal{position:relative}
.bdg-medal i{font-style:normal}
.bdg.locked .bdg-medal{filter:none; opacity:1}
.bdg.locked .bdg-medal i{filter:grayscale(1); opacity:.35}
.bdg-lock{position:absolute; right:-4px; bottom:-4px; font-style:normal; font-size:.95rem; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--panel); box-shadow:0 2px 0 var(--edge), inset 0 0 0 1px var(--line)}

/* ===== Herna: vzdělávací hry – připoj na konec stávajícího CSS ===== */

/* Kategorie v herně */
.game-cat { margin-top: 22px; }
.game-cat > h2 { font-size: 1.15rem; margin: 0 0 10px; }

/* Volba obtížnosti + varování */
.lvl-pick { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.lvl-pick .btn { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 150px; }
.lvl-pick small { font-size: .75rem; font-weight: 500; opacity: .85; }
.edu-warn { max-width: 34rem; margin: 0 auto 12px; padding: 10px 14px; border-radius: 12px; font-size: .9rem;
  background: rgba(255, 184, 0, .15); border: 1px solid rgba(255, 184, 0, .5); }

/* Kostra úlohy */
.edu { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.edu-task { margin: 0; font-weight: 600; font-size: 1.05rem; max-width: 32rem; }
.edu-q { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.edu-big { font-size: 72px; line-height: 1.1; }
.edu-word { font-size: 1.6rem; font-weight: 700; letter-spacing: .02em; }
.edu-say { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* Skryté až do odpovědi (slovo pod obrázkem apod.) */
.secret { visibility: hidden; }
.secret.shown { visibility: visible; }

/* Tlačítka s odpověďmi */
.edu-opts { display: grid; gap: 10px; width: 100%; max-width: 32rem; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.edu-opts.two { grid-template-columns: repeat(2, 1fr); }
.edu-opts.four { grid-template-columns: repeat(2, 1fr); }
.edu-opts.letters { grid-template-columns: repeat(4, 1fr); max-width: 24rem; }
.edu-opts.letters.two { grid-template-columns: repeat(2, 1fr); max-width: 16rem; }
.edu-opts.letters .edu-opt { font-size: 2rem; font-weight: 800; min-height: 72px; }
.edu-opts.druhy { grid-template-columns: repeat(2, 1fr); }
.edu-opts.druhy.three { grid-template-columns: 1fr; max-width: 20rem; }
.edu-opt { min-height: 56px; font-size: 1.15rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.edu-opt small { font-size: .72rem; font-weight: 500; opacity: .75; }
.edu-opts.pics .edu-opt { min-height: 110px; padding: 10px 6px; }
.pic-e { font-size: 52px; line-height: 1.1; }
.pic-w { font-size: .95rem; font-weight: 600; }
.edu-opt:disabled { opacity: 1; cursor: default; }
.edu-opt.right { background: #1fc47d; border-color: #1fc47d; color: #fff; }
.edu-opt.wrong { background: #ff4f6d; border-color: #ff4f6d; color: #fff; }

/* Zpětná vazba */
.edu-fb { min-height: 2.6em; display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 32rem; }
.edu-fb.ok b { color: #13a566; }
.edu-fb.no b { color: #e23b5a; }
.edu-fb span { font-size: 1rem; line-height: 1.45; }

/* Okénko v příkladu / slově */
.quiz-q.eq { display: flex; gap: .4em; align-items: center; justify-content: center; flex-wrap: wrap; }
.word-q { font-size: 2.2rem; letter-spacing: .04em; }
.gap { display: inline-grid; place-items: center; min-width: 1.6em; padding: 0 .25em; border-radius: 10px;
  border: 3px dashed var(--g, #8b5cf6); color: var(--g, #8b5cf6); font-weight: 800; }
.gap.ok { border-style: solid; border-color: #1fc47d; color: #13a566; }
.gap.no { border-style: solid; border-color: #ff4f6d; color: #e23b5a; }

/* Číselná klávesnice */
.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 17rem; }
.np-key { min-height: 56px; font-size: 1.4rem; font-weight: 700; }

/* Tleskačka */
.clap-box { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.clap { width: 132px; height: 132px; border-radius: 50%; font-size: 64px; line-height: 1; }
.clap.hit { animation: clap-pop .22s ease-out; }
.clap-n { font-size: 1.4rem; }
@keyframes clap-pop { 50% { transform: scale(.9); } }

/* Větostavba */
.sent { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 36rem; }
.sent-line, .sent-pool { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: 100%; min-height: 58px; padding: 10px; border-radius: 14px; }
.sent-line { border: 2px dashed var(--g, #8b5cf6); }
.sent-line.ok { border-style: solid; border-color: #1fc47d; }
.sent-line.no { border-style: solid; border-color: #ff4f6d; }
.sent-line.shake { animation: sent-shake .4s; }
.sent-ph { opacity: .55; align-self: center; }
.edu-tile { font-size: 1.15rem; padding: 8px 14px; }
.sent-msg { margin: 0; min-height: 1.3em; }
@keyframes sent-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* Hodiny */
.clock { width: min(220px, 60vw); }
.clock-svg { width: 100%; height: auto; display: block; }
.c-face { fill: rgba(127, 127, 127, .08); stroke: currentColor; stroke-width: 4; }
.c-tick { stroke: currentColor; stroke-width: 1.5; opacity: .5; }
.c-tick.big { stroke-width: 3; opacity: 1; }
.c-num { fill: currentColor; font-size: 17px; font-weight: 700; }
.c-hour { stroke: currentColor; stroke-width: 8; stroke-linecap: round; }
.c-min { stroke: var(--g, #c2410c); stroke-width: 5; stroke-linecap: round; }
.c-pin { fill: var(--g, #c2410c); }

/* Číselná osa */
.osa { width: 100%; max-width: 40rem; }
.osa-svg { width: 100%; height: auto; display: block; }
.o-line, .o-tick { stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.o-num { fill: currentColor; font-size: 20px; font-weight: 700; }
.o-arrow { fill: var(--g, #0e9f9d); }
.o-q { fill: var(--g, #0e9f9d); font-size: 22px; font-weight: 800; }

/* Pokladna */
.coins { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; max-width: 34rem; }
.edu-coin { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; font-weight: 800; font-size: 1.1rem;
  color: #333; background: radial-gradient(circle at 35% 30%, #fafafa, #b9bec4); border: 3px solid #9aa0a6; }
.coin.gold { background: radial-gradient(circle at 35% 30%, #fff2b0, #d4a106); border-color: #b08400; }
.coin.big { width: 64px; height: 64px; font-size: 1.25rem; }
.bill { display: inline-grid; place-items: center; min-width: 118px; height: 58px; padding: 0 12px; border-radius: 8px; font-weight: 800;
  color: #222; border: 2px solid rgba(0, 0, 0, .25); background: #cfe3c0; }
.bill.b200 { background: #f3c9a0; } .bill.b500 { background: #e8b4b4; } .bill.b1000 { background: #c9b6e4; } .bill.b2000 { background: #f1dd9a; }
.shop p { margin: 4px 0 8px; font-size: 1.1rem; }
.money-ans { font-size: 1.3rem; font-weight: 700; margin: 0 0 10px; display: flex; gap: .3em; align-items: center; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .clap.hit, .sent-line.shake { animation: none; }
}