/* ============================================================
   ALLEYZ – game.css  (v5 – nelineární, multiplayer, týmy)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;600;700;800;900&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:      #eef3e6;
  --header:  #578a34;
  --g1:      #a9d889;
  --g2:      #c5e66b;
  --yellow:  #d8be3c;
  --pink:    #e66da3;
  --text:    #1e3010;
  --text2:   #4a6a30;
  --text3:   #7a9a60;
  --white:   #ffffff;
  --card:    rgba(255,255,255,0.78);
  --r-sm:    14px; --r-md:20px; --r-lg:28px;
  --sh-g:    0 5px 20px rgba(87,138,52,0.15);
  --sh-p:    0 5px 18px rgba(230,109,163,0.30);
}

html { scroll-behavior: smooth; }
body { font-family:'Red Hat Display',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; -webkit-font-smoothing:antialiased; }
#app { max-width:480px; margin:0 auto; min-height:100vh; }

.screen { display:none; padding-bottom:100px; animation:screenIn .35s cubic-bezier(.2,0,.28,1); }
.screen.active { display:block; }
@keyframes screenIn { from{opacity:0;transform:translateY(14px) scale(.98)} to{opacity:1;transform:translateY(0) scale(1)} }

/* ── Top bar ── */
.topbar { background:var(--header); padding:14px 20px; display:flex; align-items:center; justify-content:space-between; border-radius:0 0 26px 26px; box-shadow:0 6px 24px rgba(87,138,52,.25); position:sticky; top:0; z-index:200; }
.topbar .logo { font-size:24px; font-weight:900; color:var(--white); letter-spacing:-.5px; }
.topbar .logo span { color:var(--g2); }
.timer-pill { background:rgba(255,255,255,.18); border:2px solid rgba(255,255,255,.3); border-radius:50px; padding:6px 16px; font-size:15px; font-weight:800; color:var(--white); }

/* ── Welcome ── */
.w-hero { background:var(--header); min-height:240px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding:0 28px 36px; position:relative; overflow:hidden; }
.w-hero::before { content:''; position:absolute; top:-70px; left:-70px; width:280px; height:280px; border-radius:50%; background:rgba(197,230,107,.1); }
.w-hero::after  { content:''; position:absolute; bottom:-80px; right:-50px; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,.07); }
.w-badge { width:86px; height:86px; border-radius:50%; background:linear-gradient(135deg,var(--g1),var(--g2)); box-shadow:0 8px 28px rgba(169,216,137,.55); display:flex; align-items:center; justify-content:center; margin-bottom:18px; position:relative; z-index:1; font-size:38px; color:var(--text); }
.w-title { font-size:30px; font-weight:900; color:var(--white); text-align:center; line-height:1.2; position:relative; z-index:1; }
.w-sub   { font-size:15px; color:rgba(255,255,255,.7); text-align:center; margin-top:6px; position:relative; z-index:1; }
.w-body  { padding:24px 18px; }
.section-label { font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--text3); margin-bottom:12px; }

.code-card { background:var(--white); border-radius:var(--r-lg); padding:20px; box-shadow:var(--sh-g); margin-bottom:20px; }
.code-card-label { font-size:13px; font-weight:700; color:var(--text2); margin-bottom:10px; }
.code-row { display:flex; gap:10px; }
.code-input { flex:1; background:var(--bg); border:2.5px solid rgba(87,138,52,.18); border-radius:var(--r-sm); padding:13px 18px; font-size:17px; font-weight:800; font-family:'Red Hat Display',sans-serif; color:var(--text); outline:none; letter-spacing:2px; text-transform:uppercase; transition:border-color .2s,box-shadow .2s; }
.code-input:focus { border-color:var(--header); box-shadow:0 0 0 4px rgba(87,138,52,.1); }
.code-input.shake { animation:shake .35s ease; }
@keyframes shake { 0%{transform:translateX(0)} 20%{transform:translateX(-7px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} 100%{transform:translateX(0)} }
.error-msg { color:var(--pink); font-size:13px; font-weight:700; margin-top:8px; display:none; }
.error-msg.visible { display:block; }

.info-card { display:flex; align-items:center; gap:14px; background:var(--white); border-radius:16px; padding:14px 16px; box-shadow:0 2px 10px rgba(87,138,52,.08); margin-bottom:10px; }
.info-icon { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.info-card-title { font-size:14px; font-weight:800; color:var(--text); }
.info-card-sub   { font-size:12px; color:var(--text3); margin-top:2px; }

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; border-radius:var(--r-md); padding:14px 24px; font-size:16px; font-weight:800; font-family:'Red Hat Display',sans-serif; cursor:pointer; transition:transform .2s,box-shadow .2s,background .2s; width:100%; }
.btn:active { transform:scale(.97); }
.btn-green  { background:linear-gradient(135deg,var(--g1),var(--g2)); color:var(--text); box-shadow:0 5px 18px rgba(169,216,137,.45); }
.btn-green:hover  { transform:translateY(-2px); box-shadow:0 8px 24px rgba(169,216,137,.55); }
.btn-header { background:var(--header); color:var(--white); box-shadow:0 5px 18px rgba(87,138,52,.3); }
.btn-header:hover { transform:translateY(-2px); background:#4a7a2a; }
.btn-outline { background:var(--white); color:var(--text2); border:2.5px solid rgba(87,138,52,.2); box-shadow:var(--sh-g); }
.btn-outline:hover { background:#f0fbe8; border-color:var(--g1); }
.btn-sm { padding:10px 18px; font-size:14px; width:auto; }
.btn.loading     { opacity:.7; pointer-events:none; }
.btn.success     { background:linear-gradient(135deg,#78c840,#a0d860); color:var(--text); }
.btn.error-state { background:linear-gradient(135deg,var(--pink),#f090b8); animation:btnPop .3s; }
@keyframes btnPop { 0%{transform:scale(1)} 50%{transform:scale(1.06)} 100%{transform:scale(1)} }

/* ── Multiplayer banner ── */
.mp-banner {
  background:linear-gradient(135deg,rgba(87,138,52,.12),rgba(197,230,107,.08));
  border:2px solid rgba(87,138,52,.2); border-radius:16px;
  padding:12px 16px; margin:14px 14px 0;
  display:flex; align-items:center; gap:12px;
}
.mp-banner-dot { width:10px; height:10px; border-radius:50%; background:var(--g1); box-shadow:0 0 0 3px rgba(169,216,137,.3); animation:mpPulse 2s ease infinite; flex-shrink:0; }
@keyframes mpPulse { 0%,100%{box-shadow:0 0 0 3px rgba(169,216,137,.3)} 50%{box-shadow:0 0 0 6px rgba(169,216,137,.1)} }
.mp-banner-text { font-size:13px; font-weight:700; color:var(--text2); }
.mp-banner-team { font-size:12px; color:var(--text3); margin-top:2px; }

/* Spectator mode overlay */
.spectator-overlay {
  position:fixed; bottom:80px; left:50%; transform:translateX(-50%);
  background:rgba(28,46,40,.9); color:white;
  border-radius:50px; padding:10px 20px;
  font-size:13px; font-weight:700; z-index:250;
  display:flex; align-items:center; gap:8px;
  backdrop-filter:blur(8px);
}

/* Team scoreboard strip */
.team-strip {
  display:flex; gap:8px; padding:10px 14px 0;
  overflow-x:auto; scrollbar-width:none;
}
.team-strip::-webkit-scrollbar { display:none; }
.team-chip {
  background:var(--white); border:2px solid rgba(87,138,52,.15);
  border-radius:50px; padding:6px 14px;
  font-size:12px; font-weight:800; color:var(--text2);
  white-space:nowrap; flex-shrink:0; transition:all .2s;
}
.team-chip.active { background:linear-gradient(135deg,var(--g1),var(--g2)); border-color:var(--g1); color:var(--text); }
.team-chip .chip-time { font-size:11px; color:var(--text3); margin-left:4px; }

/* ── Puzzle nav ── */
.puzzle-nav { display:flex; align-items:center; justify-content:space-between; padding:16px 20px 0; }
.nav-arrow { width:42px; height:42px; border-radius:50%; background:var(--white); border:none; box-shadow:0 3px 12px rgba(87,138,52,.18); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--header); font-size:16px; transition:all .2s; }
.nav-arrow:hover { background:var(--g1); transform:scale(1.08); }
.nav-arrow:disabled { opacity:.3; cursor:default; transform:none; }
.step-dots { display:flex; gap:7px; align-items:center; }
.sdot { width:9px; height:9px; border-radius:50%; background:rgba(87,138,52,.2); cursor:pointer; transition:all .28s; }
.sdot.active { width:26px; border-radius:5px; background:var(--header); }
.sdot.done   { background:var(--g1); }
.sdot.wrong  { background:var(--pink); }
.sdot.locked { background:rgba(87,138,52,.1); cursor:default; }

/* ── Nonlinear puzzle grid ── */
.puzzle-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:12px; padding:14px 14px 0;
}
.grid-card {
  background:var(--white); border-radius:18px;
  border:2.5px solid rgba(87,138,52,.12);
  padding:16px 14px; cursor:pointer;
  transition:all .22s; position:relative;
  box-shadow:0 3px 12px rgba(87,138,52,.08);
}
.grid-card:hover { border-color:var(--g1); transform:translateY(-2px); box-shadow:0 6px 18px rgba(87,138,52,.14); }
.grid-card.done  { border-color:var(--g1); background:linear-gradient(135deg,rgba(169,216,137,.12),rgba(197,230,107,.06)); }
.grid-card.locked { opacity:.45; cursor:default; filter:grayscale(.4); }
.grid-card.locked:hover { transform:none; border-color:rgba(87,138,52,.12); box-shadow:0 3px 12px rgba(87,138,52,.08); }
.grid-card.active-card { border-color:var(--header); border-width:3px; box-shadow:0 6px 20px rgba(87,138,52,.2); }
.grid-card-num  { font-size:11px; font-weight:800; color:var(--text3); text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; }
.grid-card-q    { font-size:13px; font-weight:700; color:var(--text); line-height:1.35; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.grid-card-type { font-size:10px; font-weight:700; color:var(--text3); margin-top:6px; }
.grid-done-badge {
  position:absolute; top:10px; right:10px;
  width:22px; height:22px; border-radius:50%;
  background:linear-gradient(135deg,#78c840,#a0d860);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; color:white;
}
.grid-lock-icon { position:absolute; top:10px; right:10px; font-size:14px; color:var(--text3); opacity:.5; }

/* ── Puzzle card ── */
.puzzle-card { margin:14px 14px 0; animation:screenIn .32s cubic-bezier(.2,0,.28,1); }
.p-head { background:var(--header); border-radius:var(--r-lg) var(--r-lg) 0 0; padding:20px 22px 18px; position:relative; overflow:hidden; }
.p-head::after { content:''; position:absolute; bottom:-40px; right:-30px; width:130px; height:130px; border-radius:50%; background:rgba(255,255,255,.07); }
.p-head.coral-head { background:linear-gradient(135deg,#c07030,#a05020); }
.p-head.teal-head  { background:linear-gradient(135deg,#2a7a60,#1a5a48); }
.p-head.berry-head { background:linear-gradient(135deg,#7a3480,#5a2060); }
.p-head.gps-head   { background:linear-gradient(135deg,#1a5a8a,#0d3d6a); }
.p-label { font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.65); margin-bottom:6px; }
.p-title { font-size:18px; font-weight:800; color:var(--white); line-height:1.35; position:relative; z-index:1; }
.p-back-btn { background:rgba(255,255,255,.15); border:none; border-radius:50px; padding:5px 12px; font-size:12px; font-weight:700; font-family:'Red Hat Display',sans-serif; color:white; cursor:pointer; margin-bottom:8px; display:inline-flex; align-items:center; gap:5px; transition:background .15s; }
.p-back-btn:hover { background:rgba(255,255,255,.25); }

.time-strip { background:rgba(216,190,60,.13); border-left:4px solid var(--yellow); padding:10px 20px; }
.ts-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.ts-label { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:1.2px; color:#9a8010; }
.ts-val { font-size:17px; font-weight:900; color:#b89a20; }
.ts-val.urgent { color:var(--pink); }
.ts-track { height:6px; background:rgba(216,190,60,.18); border-radius:6px; }
.ts-fill  { height:6px; background:linear-gradient(90deg,var(--yellow),#e6d060); border-radius:6px; transition:width 1s linear; }

.p-body { background:var(--card); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:2px solid rgba(255,255,255,.88); border-top:none; border-radius:0 0 var(--r-lg) var(--r-lg); padding:20px 20px 22px; box-shadow:0 8px 32px rgba(87,138,52,.1); }
.q-text { font-size:15px; line-height:1.7; color:var(--text); margin-bottom:18px; font-weight:500; }
.info-box { background:rgba(87,138,52,.07); border:2px solid rgba(87,138,52,.18); border-left:4px solid var(--header); border-radius:var(--r-sm); padding:13px 16px; font-size:14px; line-height:1.6; color:var(--text); margin-bottom:18px; font-weight:600; }

/* ── Media ── */
.media-image { width:100%; max-height:200px; object-fit:cover; border-radius:16px; display:block; margin-bottom:16px; }
.media-video-thumb { height:170px; background:linear-gradient(140deg,#d4ebb8,#e8f5d0); border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:11px; cursor:pointer; margin-bottom:16px; transition:opacity .2s; }
.media-video-thumb:hover { opacity:.85; }
.play-ring { width:62px; height:62px; border-radius:50%; background:linear-gradient(135deg,var(--g1),var(--g2)); box-shadow:0 6px 20px rgba(169,216,137,.45); display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--text); transition:transform .2s; }
.media-video-thumb:hover .play-ring { transform:scale(1.1); }
.video-label { font-size:13px; font-weight:700; color:var(--text2); }
.audio-player { background:linear-gradient(135deg,#f0f9e8,#e8f4dc); border:2px solid rgba(169,216,137,.4); border-radius:18px; padding:14px 16px; margin-bottom:16px; display:flex; align-items:center; gap:13px; box-shadow:0 4px 16px rgba(169,216,137,.2); }
.audio-play-btn { width:46px; height:46px; min-width:46px; border-radius:50%; background:linear-gradient(135deg,var(--g1),var(--g2)); box-shadow:0 4px 14px rgba(169,216,137,.4); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--text); transition:transform .15s,box-shadow .15s; }
.audio-play-btn:hover { transform:scale(1.06); }
.audio-info  { flex:1; }
.audio-title { font-size:11px; font-weight:800; color:var(--text2); margin-bottom:7px; text-transform:uppercase; letter-spacing:1px; }
.audio-progress { height:5px; background:rgba(87,138,52,.12); border-radius:5px; cursor:pointer; }
.audio-fill     { height:5px; background:linear-gradient(90deg,var(--header),var(--g1)); border-radius:5px; transition:width .3s; }
.audio-times    { display:flex; justify-content:space-between; font-size:11px; font-weight:700; color:var(--text3); margin-top:4px; }

/* ── GPS ── */
.gps-map-wrap { border-radius:16px; overflow:hidden; margin-bottom:16px; box-shadow:0 4px 16px rgba(0,0,0,.12); }
#gps-map { width:100%; height:260px; }
.gps-status { display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.9); backdrop-filter:blur(8px); border:2px solid rgba(87,138,52,.2); border-radius:16px; padding:14px 16px; margin-bottom:16px; }
.gps-status-icon { width:44px; height:44px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:20px; }
.gps-status-icon.searching { background:rgba(216,190,60,.15); animation:pulse 1.5s ease infinite; }
.gps-status-icon.far    { background:rgba(230,109,163,.12); }
.gps-status-icon.close  { background:rgba(120,200,64,.15); }
.gps-status-icon.arrived{ background:rgba(120,200,64,.2); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
.gps-status-info  { flex:1; }
.gps-status-title { font-size:14px; font-weight:800; color:var(--text); }
.gps-status-dist  { font-size:13px; font-weight:600; color:var(--text3); margin-top:2px; }
.gps-progress-wrap  { margin-bottom:14px; }
.gps-progress-label { display:flex; justify-content:space-between; font-size:12px; font-weight:700; color:var(--text3); margin-bottom:6px; }
.gps-progress-track { height:8px; background:rgba(87,138,52,.12); border-radius:8px; overflow:hidden; }
.gps-progress-fill  { height:8px; background:linear-gradient(90deg,var(--pink),var(--yellow),var(--g1)); border-radius:8px; transition:width .8s ease; }
.gps-confirm-btn { width:100%; background:linear-gradient(135deg,var(--g1),var(--g2)); border:none; border-radius:16px; padding:15px; font-size:16px; font-weight:800; font-family:'Red Hat Display',sans-serif; color:var(--text); cursor:pointer; box-shadow:0 5px 18px rgba(169,216,137,.45); transition:all .2s; display:flex; align-items:center; justify-content:center; gap:8px; }
.gps-confirm-btn:hover { transform:translateY(-2px); }
.gps-confirm-btn:disabled { opacity:.4; cursor:default; transform:none; }

/* ── Answer types ── */
.answer-row { display:flex; gap:9px; margin-bottom:4px; }
.answer-input { flex:1; background:var(--white); border:2.5px solid rgba(87,138,52,.18); border-radius:var(--r-sm); padding:13px 18px; font-size:16px; font-family:'Red Hat Display',sans-serif; color:var(--text); outline:none; transition:border-color .2s,box-shadow .2s; box-shadow:0 2px 8px rgba(87,138,52,.06); }
.answer-input:focus { border-color:var(--header); box-shadow:0 0 0 5px rgba(87,138,52,.1); }
.answer-input.shake { animation:shake .35s ease; }
.choices { display:flex; flex-direction:column; gap:9px; }
.choice { background:var(--white); border:2.5px solid rgba(87,138,52,.14); border-radius:var(--r-sm); padding:13px 16px; font-size:15px; font-weight:600; color:var(--text); cursor:pointer; display:flex; align-items:center; gap:13px; transition:all .2s; box-shadow:0 2px 8px rgba(87,138,52,.05); }
.choice:hover { border-color:var(--g1); background:#f7fdf0; transform:translateX(4px); }
.radio-ring { width:22px; height:22px; min-width:22px; border-radius:50%; border:2.5px solid rgba(87,138,52,.25); transition:all .2s; display:flex; align-items:center; justify-content:center; }
.choice.correct .radio-ring, .choice.selected .radio-ring { background:linear-gradient(135deg,var(--g1),var(--g2)); border-color:var(--g1); }
.choice.correct .radio-ring::after, .choice.selected .radio-ring::after { content:''; width:8px; height:8px; background:white; border-radius:50%; }
.choice.correct { border-color:#78c840; background:#f0fbe8; }
.choice.wrong   { border-color:var(--pink); background:#fff0f7; }
.choice.wrong .radio-ring { background:linear-gradient(135deg,var(--pink),#f090b8); border-color:var(--pink); }
.choice.locked  { pointer-events:none; }
.dnd-chips { display:flex; flex-wrap:wrap; gap:9px; min-height:40px; margin-bottom:14px; padding:10px 12px; background:rgba(255,255,255,.6); border-radius:16px; border:2px solid rgba(255,255,255,.9); }
.chip { background:linear-gradient(135deg,var(--yellow),#e8cc50); color:#5a3e00; border-radius:50px; padding:8px 16px; font-size:13px; font-weight:800; cursor:grab; user-select:none; border:2px solid rgba(255,255,255,.5); box-shadow:0 3px 10px rgba(216,190,60,.3); transition:transform .15s,opacity .15s; }
.chip:hover   { transform:scale(1.07); }
.chip.dragging{ opacity:.35; transform:scale(.9); }
.chip.gone    { display:none; }
.dnd-targets { display:flex; flex-direction:column; gap:9px; }
.dnd-target { border:2.5px dashed rgba(87,138,52,.28); border-radius:var(--r-sm); padding:11px 14px; min-height:50px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; transition:all .2s; background:rgba(255,255,255,.4); }
.dnd-target.over    { border-color:var(--header); border-style:solid; background:rgba(169,216,137,.12); }
.dnd-target.correct { border-color:#78c840; border-style:solid; background:rgba(120,200,64,.08); }
.target-label { font-size:11px; font-weight:800; color:var(--text2); text-transform:uppercase; letter-spacing:.8px; white-space:nowrap; }
.placed-chip { background:linear-gradient(135deg,rgba(87,138,52,.15),rgba(169,216,137,.25)); border:2px solid rgba(87,138,52,.2); color:var(--text); border-radius:50px; padding:5px 13px; font-size:12px; font-weight:800; cursor:pointer; transition:all .15s; }
.placed-chip:hover { background:rgba(230,109,163,.15); border-color:var(--pink); }

/* ── Hints & skip ── */
.hints-wrap { margin-top:16px; border-top:2px dashed rgba(87,138,52,.12); padding-top:16px; }
.hint-btn { width:100%; background:linear-gradient(135deg,rgba(216,190,60,.1),rgba(216,190,60,.05)); border:2px solid rgba(216,190,60,.35); border-radius:var(--r-sm); padding:12px 16px; font-size:14px; font-weight:700; font-family:'Red Hat Display',sans-serif; color:#8a7010; cursor:pointer; text-align:left; display:flex; align-items:center; gap:9px; transition:all .2s; margin-bottom:9px; }
.hint-btn:hover { background:rgba(216,190,60,.18); transform:translateY(-1px); }
.hint-icon { width:22px; height:22px; min-width:22px; border-radius:50%; background:linear-gradient(135deg,var(--yellow),#e8d060); display:flex; align-items:center; justify-content:center; font-size:11px; color:#5a3e00; }
.hint-penalty { margin-left:auto; font-size:11px; opacity:.55; font-weight:600; }
.hint-box { background:linear-gradient(135deg,rgba(216,190,60,.08),rgba(255,255,255,.5)); border:2px solid rgba(216,190,60,.28); border-radius:var(--r-sm); padding:13px 16px; font-size:14px; line-height:1.6; color:#5a4400; margin-bottom:9px; animation:screenIn .25s ease; }
.skip-btn { width:100%; background:transparent; border:2.5px solid rgba(230,109,163,.25); border-radius:var(--r-sm); padding:12px 16px; font-size:13px; font-weight:700; font-family:'Red Hat Display',sans-serif; color:rgba(230,109,163,.8); cursor:pointer; margin-top:9px; display:flex; align-items:center; justify-content:center; gap:7px; transition:all .2s; }
.skip-btn:hover { border-color:var(--pink); color:var(--pink); background:rgba(230,109,163,.05); }

/* ── Feedback ── */
.feedback { border-radius:var(--r-sm); padding:11px 15px; font-size:14px; font-weight:700; margin-top:10px; display:none; align-items:center; gap:9px; animation:screenIn .22s ease; }
.feedback.ok  { background:rgba(120,200,64,.12); color:#2a6010; display:flex; border:2px solid rgba(120,200,64,.3); }
.feedback.err { background:rgba(230,109,163,.1);  color:#8a1050; display:flex; border:2px solid rgba(230,109,163,.25); }

/* ── Bottom bar ── */
.bottom-bar { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:480px; background:rgba(238,243,230,.94); backdrop-filter:blur(18px); border-top:2px solid rgba(255,255,255,.72); padding:10px 16px 20px; display:flex; gap:8px; z-index:300; }

/* ── Results ── */
.r-hero { background:var(--header); padding:32px 24px 40px; border-radius:0 0 36px 36px; text-align:center; box-shadow:0 8px 32px rgba(87,138,52,.25); position:relative; overflow:hidden; }
.r-hero::before { content:''; position:absolute; top:-70px; right:-70px; width:240px; height:240px; border-radius:50%; background:rgba(197,230,107,.1); }
.r-hero::after  { content:''; position:absolute; bottom:-50px; left:-40px; width:180px; height:180px; border-radius:50%; background:rgba(255,255,255,.06); }
.trophy { width:92px; height:92px; border-radius:50%; margin:0 auto 16px; background:linear-gradient(135deg,var(--yellow),#e8d060); box-shadow:0 8px 28px rgba(216,190,60,.45); display:flex; align-items:center; justify-content:center; position:relative; z-index:1; font-size:42px; color:#5a3e00; animation:trophyPop .6s cubic-bezier(.2,0,.2,1.4); }
@keyframes trophyPop { 0%{transform:scale(0) rotate(-15deg)} 70%{transform:scale(1.12) rotate(3deg)} 100%{transform:scale(1) rotate(0)} }
.r-game-name  { font-size:13px; font-weight:700; color:rgba(255,255,255,.65); text-transform:uppercase; letter-spacing:2px; margin-bottom:6px; position:relative; z-index:1; }
.r-team-name  { font-size:22px; font-weight:900; color:var(--white); margin-bottom:18px; position:relative; z-index:1; }
.r-time-big   { font-size:56px; font-weight:900; color:var(--white); line-height:1; position:relative; z-index:1; }
.r-time-label { font-size:13px; color:rgba(255,255,255,.6); font-weight:600; margin-top:4px; position:relative; z-index:1; }
.r-stats { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; padding:20px 16px 0; }
.stat-card { background:var(--white); border-radius:18px; padding:14px 12px; text-align:center; box-shadow:0 3px 14px rgba(87,138,52,.08); }
.stat-val        { font-size:22px; font-weight:900; color:var(--text); }
.stat-val.green  { color:var(--header); }
.stat-val.yellow { color:#b89a20; }
.stat-val.pink   { color:var(--pink); }
.stat-lbl { font-size:11px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:1px; margin-top:4px; }
.r-body { padding:16px 16px 110px; }
.section-label-lg { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:2px; color:var(--text3); margin:20px 0 10px; }

.leaderboard-card { background:var(--white); border-radius:22px; overflow:hidden; box-shadow:0 4px 18px rgba(87,138,52,.08); margin-bottom:16px; }
.lb-head { background:linear-gradient(135deg,var(--g1),var(--g2)); padding:13px 18px; display:flex; align-items:center; gap:8px; font-size:14px; font-weight:800; color:var(--text); }
.lb-row { display:flex; align-items:center; gap:12px; padding:11px 18px; border-top:2px solid rgba(87,138,52,.06); transition:background .15s; }
.lb-row.me { background:linear-gradient(135deg,rgba(169,216,137,.12),rgba(197,230,107,.06)); border-left:4px solid var(--g1); }
.lb-rank { width:28px; height:28px; border-radius:50%; background:var(--bg); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:var(--text2); flex-shrink:0; }
.lb-rank.gold   { background:linear-gradient(135deg,var(--yellow),#e8d060); color:#5a3e00; box-shadow:0 3px 10px rgba(216,190,60,.35); }
.lb-rank.silver { background:linear-gradient(135deg,#d0d8d0,#b8c4b8); color:#3a4a3a; }
.lb-rank.bronze { background:linear-gradient(135deg,#d4a870,#c09060); color:#5a3010; }
.lb-avatar { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:var(--white); flex-shrink:0; }
.lb-info   { flex:1; }
.lb-team   { font-size:14px; font-weight:700; color:var(--text); }
.lb-detail { font-size:11px; font-weight:600; color:var(--text3); margin-top:1px; }
.lb-time   { font-size:15px; font-weight:900; color:var(--header); white-space:nowrap; }
.lb-me-badge { background:rgba(87,138,52,.15); color:var(--header); border-radius:50px; padding:2px 8px; font-size:10px; font-weight:800; margin-left:6px; }
.lb-loading { padding:24px; text-align:center; color:var(--text3); font-size:14px; font-weight:600; }

.breakdown { background:var(--white); border-radius:22px; overflow:hidden; box-shadow:0 4px 18px rgba(87,138,52,.08); margin-bottom:16px; }
.bd-head   { padding:13px 18px; background:linear-gradient(135deg,rgba(216,190,60,.15),rgba(216,190,60,.05)); border-bottom:2px solid rgba(216,190,60,.15); font-size:14px; font-weight:800; color:var(--text); }
.bd-row    { display:flex; align-items:center; gap:12px; padding:12px 18px; border-top:2px solid rgba(87,138,52,.05); }
.bd-icon   { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.bd-name   { flex:1; font-size:14px; font-weight:600; color:var(--text); }
.bd-tag    { font-size:11px; font-weight:700; padding:3px 10px; border-radius:50px; }
.bd-tag.ok   { background:rgba(120,200,64,.15); color:#2a6010; }
.bd-tag.hint { background:rgba(216,190,60,.15); color:#7a6000; }
.bd-tag.skip { background:rgba(230,109,163,.15); color:#8a1050; }
.bd-pen    { font-size:14px; font-weight:800; color:var(--text3); white-space:nowrap; }
.share-row { display:flex; gap:8px; margin-bottom:16px; }
.share-btn { flex:1; background:var(--white); border:none; border-radius:16px; padding:13px; font-size:13px; font-weight:700; font-family:'Red Hat Display',sans-serif; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px; box-shadow:0 3px 12px rgba(87,138,52,.08); color:var(--text2); transition:all .2s; }
.share-btn:hover { transform:translateY(-2px); }
.share-icon { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; }

/* ── Inventář ── */
#inv-btn { position:relative; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.18); border:2px solid rgba(255,255,255,.3); display:none; align-items:center; justify-content:center; cursor:pointer; font-size:16px; color:white; transition:background .18s; }
#inv-btn:hover { background:rgba(255,255,255,.28); }
#inv-badge { position:absolute; top:-5px; right:-5px; width:18px; height:18px; border-radius:50%; background:var(--yellow); color:#5a3e00; font-size:10px; font-weight:900; display:none; align-items:center; justify-content:center; border:2px solid var(--header); }
#inv-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:399; opacity:0; pointer-events:none; transition:opacity .3s; }
#inv-overlay.active { opacity:1; pointer-events:all; }
#inv-panel { position:fixed; bottom:0; left:50%; transform:translateX(-50%) translateY(100%); width:100%; max-width:480px; background:var(--white); border-radius:20px 20px 0 0; box-shadow:0 -8px 32px rgba(0,0,0,.15); z-index:400; transition:transform .3s cubic-bezier(.2,0,.28,1); max-height:75vh; overflow-y:auto; }
#inv-panel.open { transform:translateX(-50%) translateY(0); }
#inv-panel-header { padding:14px 18px; border-bottom:2px solid rgba(87,138,52,.08); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:white; border-radius:20px 20px 0 0; }
#inv-panel-title { font-size:15px; font-weight:800; color:var(--text); display:flex; align-items:center; gap:8px; }
#inv-close-btn { width:30px; height:30px; border-radius:50%; border:none; background:var(--bg); cursor:pointer; font-size:14px; color:var(--text2); display:flex; align-items:center; justify-content:center; }

/* ── Share link panel ── */
.share-link-card { background:linear-gradient(135deg,rgba(87,138,52,.08),rgba(197,230,107,.05)); border:2px solid rgba(87,138,52,.2); border-radius:16px; padding:14px 16px; margin:14px 14px 0; }
.share-link-label { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:1.5px; color:var(--text2); margin-bottom:8px; }
.share-link-code  { font-size:28px; font-weight:900; color:var(--header); letter-spacing:4px; text-align:center; margin-bottom:6px; }
.share-link-sub   { font-size:12px; color:var(--text3); font-weight:600; text-align:center; }

/* ── Spinner ── */
.spinner-wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:50vh; gap:16px; color:var(--text2); font-weight:700; }
.spinner { width:44px; height:44px; border:4px solid rgba(87,138,52,.15); border-top-color:var(--header); border-radius:50%; animation:spin .8s linear infinite; margin:0 auto; }
@keyframes spin { to{transform:rotate(360deg)} }
.mt-12 { margin-top:12px; }
.hidden { display:none !important; }
@keyframes toastPop { from{opacity:0;transform:translateX(-50%) translateY(-8px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }

/* ── Jazykový přepínač ── */
.lang-switcher {
  position:absolute; top:16px; right:16px;
  display:flex; gap:6px; z-index:10;
}
.lang-btn {
  width:36px; height:36px; border-radius:50%;
  border:2px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.15);
  font-size:18px; cursor:pointer; display:flex;
  align-items:center; justify-content:center;
  transition:all .2s; line-height:1;
}
.lang-btn:hover { background:rgba(255,255,255,.28); transform:scale(1.08); }
.lang-btn.active { border-color:var(--g2); background:rgba(255,255,255,.3); box-shadow:0 0 0 3px rgba(197,230,107,.3); }

/* ── Inventář badge animace ── */
@keyframes badgePop {
  0%{transform:scale(1)} 30%{transform:scale(1.5)} 60%{transform:scale(.9)} 100%{transform:scale(1)}
}
#inv-badge.new-item { animation:badgePop .5s cubic-bezier(.2,0,.2,1.4); }
@keyframes invBtnPulse {
  0%,100%{box-shadow:0 0 0 0 rgba(197,230,107,.5)}
  50%{box-shadow:0 0 0 8px rgba(197,230,107,0)}
}
#inv-btn.has-items { animation:invBtnPulse 1.8s ease infinite; }


/* ============================================================
   JIGSAW PUZZLE
   ============================================================ */
.jigsaw-board {
  position: relative;
  width: 100%;
  background: var(--white);
  border: 2px solid rgba(87,138,52,.12);
  border-radius: var(--r-lg);
  overflow: hidden;
  touch-action: none;
  user-select: none;
  margin-bottom: 10px;
  box-shadow: 0 2px 10px rgba(87,138,52,.08);
  /* výška se nastaví dynamicky přes JS */
}

.jigsaw-piece {
  position: absolute;
  display: block;
  cursor: grab;
  transition: filter .12s;
}
.jigsaw-piece:active { cursor: grabbing; }

/* ── Review / hodnocení ── */
.review-card { background:var(--white); border-radius:22px; padding:22px 20px 20px; box-shadow:0 4px 18px rgba(87,138,52,.09); margin-bottom:16px; }
.review-card-title { font-size:16px; font-weight:800; color:var(--text); margin-bottom:16px; text-align:center; }
.star-row { display:flex; justify-content:center; gap:6px; margin-bottom:18px; }
.star-btn { background:none; border:none; font-size:38px; cursor:pointer; color:#d0ddc8; line-height:1; padding:2px 4px; transition:color .15s, transform .12s; -webkit-tap-highlight-color:transparent; }
.star-btn.active { color:var(--yellow); }
.star-btn:hover  { color:var(--yellow); transform:scale(1.15); }
.review-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.review-chip { background:var(--bg); border:2px solid rgba(87,138,52,.18); border-radius:50px; padding:7px 14px; font-size:13px; font-weight:700; font-family:'Red Hat Display',sans-serif; color:var(--text2); cursor:pointer; transition:all .15s; -webkit-tap-highlight-color:transparent; }
.review-chip.active { background:rgba(87,138,52,.12); border-color:var(--header); color:var(--header); }
.review-text { width:100%; border:2px solid rgba(87,138,52,.18); border-radius:14px; padding:12px 14px; font-size:14px; font-weight:500; font-family:'Red Hat Display',sans-serif; color:var(--text); background:var(--bg); resize:none; outline:none; transition:border-color .15s; margin-bottom:14px; }
.review-text:focus { border-color:var(--header); }
.review-submit-btn { width:100%; opacity:.45; pointer-events:none; transition:opacity .2s; }
.review-submit-btn.ready { opacity:1; pointer-events:auto; }
.review-thanks { text-align:center; padding:24px 16px; display:none; }
.review-thanks-icon { font-size:36px; margin-bottom:10px; }
.review-thanks-title { font-size:17px; font-weight:800; color:var(--text); margin-bottom:5px; }
.review-thanks-sub { font-size:14px; color:var(--text2); line-height:1.5; }