/* ============================================================
   Montessori hry – sdílené styly pro herní moduly
   Statický CSS soubor, nahrávaný pouze na herní stránce.
   ============================================================ */

:root {
  --color-text-primary: #2A1B0F;
  --color-text-secondary: #6B5840;
  --color-background-primary: #FFFFFF;
  --color-background-secondary: #FBEFD8;
  --color-border-tertiary: rgba(106, 88, 64, 0.18);
  --color-border-secondary: rgba(106, 88, 64, 0.32);
  --border-radius-md: 10px;
  --border-radius-lg: 16px;
  --font-sans: 'Nunito', 'Quicksand', system-ui, sans-serif;
}

/* Hub kontejner */
.hub { font-family: var(--font-sans); min-height: 480px; padding: 0.75rem; position: relative; background: radial-gradient(ellipse at top right, #FBF6F0 0%, #FAFBFC 45%, #FFFFFF 100%); border-radius: 24px; }
.hub::before { content:''; position:absolute; top:50px; right:-50px; width:200px; height:200px; border-radius:50%; background: radial-gradient(circle, #FAEEDA 0%, transparent 65%); pointer-events:none; opacity:0.55; z-index:0; }
.hub::after { content:''; position:absolute; bottom:-40px; left:-60px; width:240px; height:240px; border-radius:50%; background: radial-gradient(circle, #E1F5EE 0%, transparent 65%); pointer-events:none; opacity:0.6; z-index:0; }
.hub > .nav, .hub > #main { position:relative; z-index:1; }

.nav { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; border-bottom: 0.5px solid var(--color-border-tertiary); }
.nav-brand { font-size:15px; font-weight:500; color: var(--color-text-primary); }
.nav-brand span { font-weight:400; color: var(--color-text-secondary); }
.back-btn { font-size:13px; color: var(--color-text-secondary); cursor:pointer; padding:5px 10px; border-radius: var(--border-radius-md); border: 0.5px solid var(--color-border-tertiary); background: transparent; }
.back-btn:hover { background: var(--color-background-secondary); }

/* COUNTING */
.cng { padding:1.25rem 1rem; display:flex; flex-direction:column; align-items:center; gap:1.25rem; }
.pg { display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap; }
.pdot { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:500; transition:all 0.3s; user-select:none; }
.nc { border-radius: var(--border-radius-lg); padding:1.25rem 2.5rem; text-align:center; border:2px solid; }
.nb { font-size:80px; font-weight:500; line-height:1; }
.cr { display:flex; gap:8px; justify-content:center; margin-top:12px; flex-wrap:wrap; }
.cd { width:16px; height:16px; border-radius:50%; border:1.5px solid; transition:background 0.2s; }
.bw { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:340px; padding:1.25rem; background: var(--color-background-secondary); border-radius: var(--border-radius-lg); border: 0.5px solid var(--color-border-tertiary); }
.bd { width:54px; height:54px; border-radius:50%; cursor:pointer; border:2px solid; position:relative; overflow:hidden; transition:transform 0.15s, background 0.2s, border-color 0.2s; display:flex; align-items:center; justify-content:center; }
.bd::after { content:''; position:absolute; top:10%; left:18%; width:32%; height:22%; background: rgba(255,255,255,0.5); border-radius:50%; pointer-events:none; }
.bd:hover { transform:scale(1.08); }
.bd.sel { transform:scale(1.12); }
.bi { width:22px; height:22px; border-radius:50%; transition:background 0.2s; }
.cel-b { border-radius: var(--border-radius-lg); border: 0.5px solid; padding:0.75rem 1.5rem; font-size:15px; font-weight:500; text-align:center; }

/* COLOR */
.clg { padding:1.25rem 1rem; display:flex; flex-direction:column; align-items:center; gap:1.25rem; }
.rp { display:flex; gap:10px; align-items:center; }
.rdot { width:10px; height:10px; border-radius:50%; background: var(--color-border-tertiary); transition:all 0.3s; }
.rdot.active { background:#378ADD; transform:scale(1.4); }
.rdot.done-r { background:#639922; }
.tray { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; padding:1.25rem; background: var(--color-background-secondary); border-radius: var(--border-radius-lg); border: 0.5px solid var(--color-border-tertiary); min-height:90px; max-width:340px; width:100%; align-items:center; }
.cobj { width:54px; height:54px; border-radius:50%; cursor:pointer; border:3px solid transparent; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; position:relative; overflow:hidden; flex-shrink:0; }
.cobj::after { content:''; position:absolute; top:10%; left:18%; width:32%; height:22%; background: rgba(255,255,255,0.5); border-radius:50%; pointer-events:none; }
.cobj:hover { transform:scale(1.09); }
.cobj.cpicked { border-color:#fff; box-shadow:0 0 0 3px rgba(0,0,0,0.25); transform:scale(1.18); }
.bins { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; max-width:380px; }
.bin { display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; padding:10px 12px; border-radius: var(--border-radius-lg); border:2px solid; min-width:68px; transition: transform 0.15s, box-shadow 0.15s; }
.bin:hover { transform:translateY(-2px); }
.bin.atgt { box-shadow:0 0 0 3px rgba(0,0,0,0.12); transform:translateY(-3px); }
.bc { width:36px; height:36px; border-radius:50%; position:relative; overflow:hidden; flex-shrink:0; }
.bc::after { content:''; position:absolute; top:10%; left:18%; width:32%; height:22%; background: rgba(255,255,255,0.5); border-radius:50%; pointer-events:none; }

/* LETTERS */
.ltg { padding:1.25rem 1rem; display:flex; flex-direction:column; align-items:center; gap:1.25rem; }
.lt-grid { display:grid; gap:10px; justify-content:center; }
.lt-card { width:60px; height:78px; perspective:600px; cursor:pointer; }
.lt-card-inner { position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform 0.4s; }
.lt-card.flipped .lt-card-inner, .lt-card.matched .lt-card-inner { transform:rotateY(180deg); }
.lt-face { position:absolute; inset:0; border-radius: var(--border-radius-md); display:flex; align-items:center; justify-content:center; backface-visibility:hidden; -webkit-backface-visibility:hidden; border:0.5px solid; user-select:none; }
.lt-back { background:#FAEEDA; border-color:#EF9F27; background-image: radial-gradient(circle,#EF9F27 1.2px,transparent 1.4px); background-size:11px 11px; background-position:5px 5px; }
.lt-front { background: var(--color-background-primary); border-color:#EF9F27; transform:rotateY(180deg); font-family: var(--font-sans); font-size:36px; font-weight:500; color:#412402; }
.lt-card.matched .lt-front { background:#EAF3DE; border-color:#97C459; color:#173404; }

/* RODS */
.rdg { padding:1.25rem 1rem; display:flex; flex-direction:column; align-items:center; gap:1rem; }
.rd-board { background: var(--color-background-secondary); border:0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); padding:14px; }
.rd-arrow { font-size:11px; color: var(--color-text-secondary); text-align:center; padding:4px; font-weight:500; letter-spacing:0.04em; text-transform:uppercase; }
.rd-slot { position:relative; height:40px; margin:6px 0; border-radius: var(--border-radius-md); background: var(--color-background-primary); border:0.5px dashed var(--color-border-tertiary); display:flex; align-items:center; padding:3px; cursor:grab; touch-action:none; }
.rd-slot.empty { cursor:default; }
.rd-rod { height:32px; border-radius:3px; display:flex; border:0.5px solid #4A1B0C; overflow:hidden; pointer-events:none; transition: opacity 0.15s, box-shadow 0.15s; }
.rd-rod.dragging { box-shadow:0 6px 16px rgba(0,0,0,0.18); }
.rd-rod.rd-correct { box-shadow:0 0 0 1.5px #639922; }
.rd-seg { height:100%; }

/* SHAPES */
.shg { padding:1.25rem 1rem; display:flex; flex-direction:column; align-items:center; gap:1.25rem; }
.sh-targets { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; padding:1rem; background: var(--color-background-secondary); border-radius: var(--border-radius-lg); border:0.5px solid var(--color-border-tertiary); }
.sh-target { width:74px; height:74px; border-radius: var(--border-radius-md); display:flex; align-items:center; justify-content:center; background: var(--color-background-primary); border:0.5px dashed var(--color-border-tertiary); transition:background 0.2s, border-color 0.15s; }
.sh-target.sh-tgt-filled { background:#EEEDFE; border-color:transparent; border-style:solid; }
.sh-tray { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; padding:1rem; min-height:80px; max-width:340px; width:100%; }
.sh-shape { width:64px; height:64px; cursor:grab; touch-action:none; transition: opacity 0.15s, transform 0.15s; user-select:none; }
.sh-shape:hover { transform:scale(1.05); }
.sh-shape.dragging { cursor:grabbing; }

/* PUZZLE */
.pzg { padding:1rem; display:flex; flex-direction:column; align-items:center; gap:1rem; }
.pz-row { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; align-items:flex-start; }
.pz-board { position:relative; background: var(--color-background-secondary); border:0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-md); padding:6px; }
.pz-slot { position:absolute; border:0.5px dashed var(--color-border-tertiary); background: var(--color-background-primary); transition:background 0.15s, border-color 0.15s; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pz-slot.pz-slot-filled { border-color:transparent; background:transparent; }
.pz-tray { position:relative; background: var(--color-background-secondary); border:0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-md); padding:6px; }
.pz-piece { position:absolute; cursor:grab; touch-action:none; transition: opacity 0.15s, box-shadow 0.15s; border-radius:2px; overflow:hidden; background:#fff; border:0.5px solid var(--color-border-tertiary); user-select:none; }
.pz-piece:hover { box-shadow:0 2px 6px rgba(0,0,0,0.1); }
.pz-piece.dragging { cursor:grabbing; box-shadow:0 6px 16px rgba(0,0,0,0.2); }
.pz-piece > *, .sh-shape > * { pointer-events:none; }

/* NEW GAMES generic */
.nx { padding:1.25rem 1rem; display:flex; flex-direction:column; align-items:center; gap:1.25rem; }
.nx-tray { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding:0.85rem; background: var(--color-background-secondary); border-radius: var(--border-radius-lg); border:0.5px solid var(--color-border-tertiary); max-width:380px; width:100%; min-height:80px; align-items:center; }
.nx-bin-row { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; max-width:420px; }
.nx-bin { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:10px 12px; border-radius: var(--border-radius-lg); border:2px solid; min-width:88px; min-height:90px; cursor:pointer; transition:transform 0.15s; background:#fff; }
.nx-bin:hover { transform:translateY(-2px); }
.nx-bin.atgt { box-shadow:0 0 0 3px rgba(0,0,0,0.12); transform:translateY(-3px); }
.nx-bin-lbl { font-size:12px; font-weight:500; text-align:center; }
.nx-bin-cnt { font-size:11px; color: var(--color-text-secondary); }
.nx-card { cursor:grab; touch-action:none; border-radius: var(--border-radius-md); background:#fff; border:0.5px solid var(--color-border-tertiary); padding:6px; display:flex; align-items:center; justify-content:center; user-select:none; transition: transform 0.15s, box-shadow 0.15s; }
.nx-card:hover { transform:scale(1.04); box-shadow:0 2px 6px rgba(0,0,0,0.08); }
.nx-card.dragging { cursor:grabbing; box-shadow:0 6px 16px rgba(0,0,0,0.18); }
.nx-card > * { pointer-events:none; }
.nx-prompt { font-size:14px; color: var(--color-text-secondary); text-align:center; max-width:360px; line-height:1.5; }
.nx-finbox { display:flex; flex-direction:column; align-items:center; gap:1rem; text-align:center; padding:1rem; }
.nx-finbox-icon { width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.nx-finbox-title { font-size:22px; font-weight:500; color: var(--color-text-primary); }
.nx-finbox-sub { font-size:15px; color: var(--color-text-secondary); }
.nx-finbox-btn { padding:10px 28px; border-radius: var(--border-radius-md); font-size:15px; font-weight:500; cursor:pointer; background: var(--color-background-secondary); border:0.5px solid var(--color-border-secondary); color: var(--color-text-primary); }

/* SHADES */
.shd-slot { width:64px; height:80px; border:2px dashed lightgray; border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:grab; touch-action:none; }
.shd-tile { width:52px; height:52px; border-radius:8px; border:2px solid rgba(0,0,0,0.12); pointer-events:none; transition: box-shadow 0.15s; }
.shd-tile.dragging { box-shadow:0 6px 16px rgba(0,0,0,0.2); }
.shd-num { font-size:11px; color: var(--color-text-secondary); margin-top:4px; }
.shd-arrow { font-size:11px; color: var(--color-text-secondary); text-align:center; font-weight:500; letter-spacing:0.04em; text-transform:uppercase; padding:0 6px; }

/* SIZES */
.szs-row { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; justify-content:center; padding:0.85rem; background: var(--color-background-secondary); border-radius: var(--border-radius-lg); border:0.5px solid var(--color-border-tertiary); }
.szs-slot { width:96px; height:104px; border:2px dashed lightgray; border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; cursor:grab; touch-action:none; padding:6px; background:#fff; }
.szs-num { font-size:11px; color: var(--color-text-secondary); margin-top:4px; }
.szs-shape { pointer-events:none; transition: box-shadow 0.15s; }
.szs-shape.dragging { box-shadow:0 6px 16px rgba(0,0,0,0.2); border-radius:50%; }

/* COMPARE */
.cmp-row { display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:center; }
.cmp-grp { display:flex; gap:6px; flex-wrap:wrap; padding:14px; background:#E1F5EE; border:0.5px solid #5DCAA5; border-radius: var(--border-radius-lg); min-width:120px; min-height:120px; justify-content:center; align-items:center; }
.cmp-bd { width:18px; height:18px; border-radius:50%; background:#1D9E75; border:1px solid #04342C; }
.cmp-num { font-size:64px; font-weight:600; color:#04342C; padding:14px 24px; }
.cmp-ops { display:flex; gap:14px; justify-content:center; }
.cmp-op { width:64px; height:64px; font-size:32px; font-weight:600; border-radius: var(--border-radius-md); background:#fff; border:1.5px solid #5DCAA5; color:#04342C; cursor:pointer; display:flex; align-items:center; justify-content:center; transition: transform 0.15s, background 0.15s; }
.cmp-op:hover { transform:scale(1.06); }
.cmp-op.ok { background:#EAF3DE; border-color:#639922; color:#173404; }
.cmp-progress { display:flex; gap:4px; margin-top:6px; }
.cmp-pdot { width:18px; height:6px; border-radius:3px; background: var(--color-border-tertiary); }
.cmp-pdot.done { background:#1D9E75; }

/* MISSING */
.mss-row { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.mss-bub { width:50px; height:50px; border-radius:50%; background:#EAF3DE; border:1.5px solid #97C459; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:600; color:#173404; }
.mss-bub.q { background:#fff; border-style:dashed; color:#97C459; }
.mss-opts { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.mss-opt { min-width:54px; min-height:54px; border-radius: var(--border-radius-md); background:#fff; border:1.5px solid #97C459; color:#173404; font-size:24px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0 6px; }
.mss-opt:hover { transform:scale(1.05); }
.mss-opt.ok { background:#EAF3DE; }

/* ODDEVEN */
.oe-card { display:flex; flex-direction:column; align-items:center; gap:10px; padding:1rem 1.5rem; background:#EEEDFE; border:0.5px solid #AFA9EC; border-radius: var(--border-radius-lg); }
.oe-num { font-size:54px; font-weight:600; color:#26215C; line-height:1; }
.oe-vis { display:flex; gap:6px; flex-wrap:wrap; max-width:240px; justify-content:center; }
.oe-pair { display:flex; gap:3px; padding:3px; border-radius:6px; background:#fff; border:0.5px solid #AFA9EC; }
.oe-bd { width:14px; height:14px; border-radius:50%; background:#7F77DD; }
.oe-bd.solo { background:#D4537E; }

/* ADDITION */
.add-grp { display:flex; gap:5px; flex-wrap:wrap; padding:8px 10px; background:#FAEEDA; border:0.5px solid #EF9F27; border-radius: var(--border-radius-md); min-width:90px; min-height:48px; align-items:center; justify-content:center; }
.add-row { display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:center; }
.add-bd { width:18px; height:18px; border-radius:50%; background:#BA7517; border:1px solid #412402; }
.add-op { font-size:36px; font-weight:600; color:#412402; }
.add-opts { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.add-opt { min-width:54px; min-height:54px; border-radius: var(--border-radius-md); background:#fff; border:1.5px solid #EF9F27; color:#412402; font-size:24px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0 8px; }
.add-opt:hover { transform:scale(1.05); }
.add-opt.ok { background:#FAEEDA; }

/* FIRSTLETTER */
.fl-img { width:140px; height:140px; background:#fff; border:0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); display:flex; align-items:center; justify-content:center; padding:8px; }
.fl-letters { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.fl-letter { width:64px; height:64px; border-radius: var(--border-radius-md); background:#fff; border:1.5px solid #ED93B1; font-size:32px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; font-family: sans-serif; color:#4B1528; }
.fl-letter:hover { transform:scale(1.06); }
.fl-letter.ok { background:#FBEAF0; }

/* WORDMATCH */
.wm-row { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; padding:0.85rem; background: var(--color-background-secondary); border-radius: var(--border-radius-lg); border:0.5px solid var(--color-border-tertiary); }
.wm-img { width:88px; height:88px; background:#fff; border:0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); display:flex; align-items:center; justify-content:center; padding:6px; position:relative; }
.wm-img.atgt { box-shadow:0 0 0 3px rgba(29,158,117,0.4); }
.wm-img.f { border-color:#5DCAA5; border-width:1.5px; }
.wm-img-lbl { position:absolute; bottom:-22px; left:0; right:0; text-align:center; font-size:14px; font-weight:600; font-family: sans-serif; letter-spacing:0.06em; color:#04342C; }
.wm-words { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.wm-word { padding:8px 14px; background:#fff; border:1.5px solid #5DCAA5; border-radius: var(--border-radius-md); font-size:18px; font-weight:600; font-family: sans-serif; letter-spacing:0.06em; cursor:grab; touch-action:none; user-select:none; color:#04342C; transition: box-shadow 0.15s; }
.wm-word.dragging { cursor:grabbing; box-shadow:0 6px 16px rgba(0,0,0,0.18); }
.wm-word > * { pointer-events:none; }

/* ALPHABET */
.alp-slots { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; padding:0.85rem; background: var(--color-background-secondary); border-radius: var(--border-radius-lg); border:0.5px solid var(--color-border-tertiary); }
.alp-slot { width:54px; height:70px; border:2px dashed lightgray; border-radius: var(--border-radius-md); display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:grab; touch-action:none; background:#fff; }
.alp-letter { width:46px; height:46px; background:#fff; border:1.5px solid #F0997B; border-radius: var(--border-radius-md); display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:600; color:#4A1B0C; font-family: sans-serif; pointer-events:none; transition: box-shadow 0.15s; }
.alp-letter.dragging { box-shadow:0 6px 16px rgba(0,0,0,0.2); }
.alp-num { font-size:11px; color: var(--color-text-secondary); margin-top:3px; }
.alp-hint { display:flex; gap:4px; flex-wrap:wrap; justify-content:center; padding:8px; background: var(--color-background-secondary); border-radius: var(--border-radius-md); max-width:400px; }
.alp-hint span { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; background:#fff; border:0.5px solid var(--color-border-tertiary); border-radius:4px; font-size:12px; font-weight:500; color: var(--color-text-secondary); }
.alp-hint span.cur { background:#FAECE7; border-color:#F0997B; color:#4A1B0C; font-weight:600; }

/* RHYMES */
.rhy-target { display:flex; flex-direction:column; align-items:center; gap:8px; padding:1rem 1.5rem; background:#EEEDFE; border:0.5px solid #AFA9EC; border-radius: var(--border-radius-lg); }
.rhy-target .rhy-word { font-size:28px; font-weight:600; color:#26215C; font-family: sans-serif; letter-spacing:0.06em; }
.rhy-opts { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.rhy-opt { min-width:88px; min-height:64px; padding:14px 18px; border-radius: var(--border-radius-md); background:#fff; border:1.5px solid #AFA9EC; color:#26215C; font-size:18px; font-weight:600; font-family: sans-serif; cursor:pointer; display:flex; align-items:center; justify-content:center; letter-spacing:0.06em; }
.rhy-opt:hover { transform:scale(1.05); }
.rhy-opt.ok { background:#EEEDFE; }

/* WEATHER */
.wea-row { display:flex; gap:22px; flex-wrap:wrap; justify-content:center; align-items:flex-start; }
.wea-fig { width:200px; height:300px; background: var(--color-background-secondary); border:0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.wea-cloth { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:380px; }
.wea-item { width:80px; min-height:80px; border-radius: var(--border-radius-md); background:#fff; border:1.5px solid #85B7EB; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:8px 4px; transition: transform 0.15s, background 0.15s; }
.wea-item:hover { transform:scale(1.06); }
.wea-item.sel { background:#E6F1FB; box-shadow:0 0 0 2px #378ADD; }
.wea-item-emo { font-size:34px; line-height:1; }
.wea-item-lbl { font-size:11px; line-height:1.1; color: var(--color-text-secondary); text-align:center; }
.wea-help { display:block; margin-top:5px; font-size:13px; font-weight:400; line-height:1.45; color: var(--color-text-secondary); }
.wea-go { padding:11px 24px; border-radius: var(--border-radius-md); font-size:15px; font-weight:500; background:#378ADD; color:#fff; border:none; cursor:pointer; }
.wea-go:hover { opacity:0.9; }
.wea-go:disabled { opacity:0.4; cursor:not-allowed; }

/* SEQUENCE */
.sq-slots { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; padding:0.85rem; background: var(--color-background-secondary); border-radius: var(--border-radius-lg); border:0.5px solid var(--color-border-tertiary); }
.sq-slot { width:88px; height:96px; border:2px dashed lightgray; border-radius: var(--border-radius-md); background:#fff; display:flex; align-items:center; justify-content:center; flex-direction:column; cursor:grab; touch-action:none; position:relative; }
.sq-slot.f { border-style:solid; border-color:#F0997B; }
.sq-num { position:absolute; top:-10px; left:-6px; width:22px; height:22px; background:#D85A30; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; }
.sq-step { width:64px; height:64px; background:#fff; border:0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-md); padding:4px; display:flex; align-items:center; justify-content:center; user-select:none; pointer-events:none; transition: box-shadow 0.15s; }
.sq-step.dragging { box-shadow:0 6px 16px rgba(0,0,0,0.18); }

/* TABLESETTING */
.ts-table { position:relative; width:340px; height:200px; background: radial-gradient(ellipse at center, #FBEAF0 0%, #F8DCE6 100%); border:3px solid #ED93B1; border-radius:120px; margin:0 auto; }
.ts-zone { position:absolute; border:2px dashed #D4537E; border-radius:8px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,0.5); }
.ts-zone.f { border-color:transparent; background:transparent; }
.ts-pool { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding:1rem; background: var(--color-background-secondary); border-radius: var(--border-radius-lg); border:0.5px solid var(--color-border-tertiary); max-width:380px; }
.ts-item { cursor:grab; touch-action:none; padding:6px; background:#fff; border:1px solid #ED93B1; border-radius: var(--border-radius-md); user-select:none; transition: box-shadow 0.15s; }
.ts-item:hover { box-shadow:0 2px 6px rgba(0,0,0,0.1); }
.ts-item.dragging { cursor:grabbing; box-shadow:0 6px 16px rgba(0,0,0,0.18); }
.ts-item > * { pointer-events:none; }

@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)} }
@keyframes bouncePop { 0%,100%{transform:scale(1)} 40%{transform:scale(1.07) rotate(-1deg)} 70%{transform:scale(1.07) rotate(1deg)} }
@keyframes popIn { 0%{transform:scale(0.6);opacity:0} 70%{transform:scale(1.12)} 100%{transform:scale(1);opacity:1} }
@keyframes fadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.is-shaking { animation: shake 0.45s ease; }
.is-bouncing { animation: bouncePop 0.7s ease infinite; }
.pop { animation: popIn 0.3s ease both; }
.fadeup { animation: fadeUp 0.35s ease both; }

/* ============================================================
   Skupina A — Kreativní tvorba (Mandala, Painting, Mosaic, Dotting, Cutting)
   ============================================================ */

/* Společný rámec pro kreativní hry */
.mdl, .pnt, .msc, .dot, .cut { padding:1rem; display:flex; flex-direction:column; align-items:center; gap:0.75rem; }

.cre-wrap { display:flex; flex-direction:column; align-items:center; gap:0.75rem; width:100%; }
.cre-canvas-wrap { display:flex; align-items:center; justify-content:center; padding:8px; background: var(--color-background-secondary); border-radius: var(--border-radius-lg); border: 0.5px solid var(--color-border-tertiary); }
.cre-canvas { touch-action:none; background:#FBF5E6; border-radius: 8px; display:block; cursor: crosshair; user-select:none; }

.cre-controls { display:flex; flex-direction:column; align-items:center; gap:0.6rem; width:100%; max-width:380px; }
.cre-row { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; align-items:center; }
.cre-sizes { gap:10px; }

.cre-swatch { width:32px; height:32px; min-width:32px; min-height:32px; border-radius:50%; border:2px solid rgba(58,42,24,0.15); cursor:pointer; padding:0; transition: transform 0.15s, box-shadow 0.15s; }
.cre-swatch:hover { transform: scale(1.08); }
.cre-swatch.sel { transform: scale(1.18); box-shadow: 0 0 0 2.5px #FBF5E6, 0 0 0 4.5px #3a2a18; }

.cre-size { width:40px; height:40px; min-width:40px; min-height:40px; border:2px solid rgba(58,42,24,0.18); background:#fff; border-radius: var(--border-radius-md); cursor:pointer; display:flex; align-items:center; justify-content:center; transition: transform 0.15s; padding:0; }
.cre-size:hover { transform: scale(1.06); }
.cre-size.sel { border-color: #3a2a18; background: #FAEEDA; }
.cre-size span { display:block; }

.cre-btn { min-height:40px; padding:8px 14px; border-radius: var(--border-radius-md); border: 1.5px solid var(--color-border-secondary); background:#fff; color: var(--color-text-primary); font-size:13px; font-weight:500; cursor:pointer; transition: background 0.15s, transform 0.15s; }
.cre-btn:hover { background: var(--color-background-secondary); transform: translateY(-1px); }
.cre-btn-primary { background:#3a2a18; border-color:#3a2a18; color:#FBF5E6; }
.cre-btn-primary:hover { background:#5a3f24; color:#FBF5E6; }
.cre-btn-small { padding:6px 10px; font-size:12px; min-height:34px; }
.cre-btn-small.sel { background:#FAEEDA; border-color:#BA7517; color:#412402; }

.cre-hint { font-size:12px; color: var(--color-text-secondary); text-align:center; max-width:340px; line-height:1.5; padding:0 8px; }

/* Cutting kurzor */
.cut-cursor { position:absolute; width:24px; height:24px; pointer-events:none; font-size:24px; line-height:1; text-align:center; transition: transform 0.05s; user-select:none; left:-100px; top:-100px; }
.cut-cursor.is-shaking { animation: shake 0.45s ease; }

/* Progress lišta */
.cre-progress-row { gap:10px; width:100%; }
.cre-progress { flex:1; height:10px; background: var(--color-background-secondary); border-radius:5px; overflow:hidden; border: 0.5px solid var(--color-border-tertiary); min-width:160px; }
.cre-progress-bar { height:100%; background: linear-gradient(90deg, #97C459, #639922); transition: width 0.2s ease; border-radius:5px; }
.cre-progress-row span { font-size:12px; font-weight:600; color: var(--color-text-secondary); min-width:42px; text-align:right; }

/* Symetrie toggle pro mozaiku */
#msc-sym { display:inline-flex; align-items:center; gap:8px; }
#msc-sym .msc-sym-dot { display:inline-block; width:10px; height:10px; border-radius:50%; background:rgba(106,88,64,0.25); transition: background 0.2s; }
#msc-sym.sel { background:#EEEDFE; border-color:#7F77DD; color:#26215C; }
#msc-sym.sel .msc-sym-dot { background:#7F77DD; box-shadow:0 0 0 3px rgba(127,119,221,0.25); }

/* ============================================================
   Skupina B — Prostorové myšlení (Tangram, Symmetry, Origami, Maze, Patterns, NatureSym)
   ============================================================ */

/* Sdílené prvky pro skupinu B */
.tng, .sym, .ori, .mze, .pat, .nsm { padding:1rem; display:flex; flex-direction:column; align-items:center; gap:0.85rem; }

.b-bar { display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap; }
.b-dot { display:inline-flex; align-items:center; justify-content:center; min-width:14px; height:14px; padding:0 6px; border-radius:8px; background: rgba(106,88,64,0.18); font-size:10px; font-weight:600; color: var(--color-text-secondary); transition: all 0.2s; }
.b-dot-on { background:#D85A30; color:#fff; transform: scale(1.1); }
.b-tab { padding:6px 14px; min-height:36px; border-radius:10px; border:1.5px solid var(--color-border-secondary); background:#fff; cursor:pointer; font-size:13px; font-weight:500; color: var(--color-text-primary); transition: all 0.15s; }
.b-tab:hover { background: var(--color-background-secondary); }
.b-tab-on { background:#FAEEDA; border-color:#BA7517; color:#412402; }
.b-controls { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }

/* B1 TANGRAM */
.tng-wrap { display:flex; gap:20px; flex-wrap:wrap; justify-content:center; align-items:flex-start; }
.tng-col { display:flex; flex-direction:column; align-items:center; gap:8px; }
.tng-cap { font-size:13px; font-weight:600; color: var(--color-text-secondary); }
.tng-stage { background: var(--color-background-secondary); border-radius: var(--border-radius-lg); border: 0.5px solid var(--color-border-tertiary); padding:10px; display:flex; align-items:center; justify-content:center; }
#tng-silhouette { width: min(360px, 86vw); height: min(360px, 86vw); }
#tng-silhouette svg { width:100%; height:100%; }
#tng-tray-wrap { width: min(460px, 92vw); height: min(250px, 50vw); }
#tng-tray-wrap svg { width:100%; height:100%; }
.tng-piece { transition: opacity 0.15s; touch-action:none; }
.tng-piece.sel, .tng-sel { filter: drop-shadow(0 0 5px rgba(216,90,48,0.55)); }
.tng-guide { pointer-events: none; }
.tng-hint { animation: fadeUp 0.3s ease; }

/* B2 SYMMETRY */
.sym-board { background: var(--color-background-secondary); border-radius: var(--border-radius-lg); border: 0.5px solid var(--color-border-tertiary); padding:10px; display:flex; align-items:center; justify-content:center; }
#sym-svg { display:block; cursor:pointer; }
#sym-svg rect { transition: fill 0.15s; }
#sym-svg rect[data-c]:hover { stroke-width: 1.2 !important; }

/* B3 ORIGAMI */
.ori-stage { width:280px; height:280px; background: var(--color-background-secondary); border-radius: var(--border-radius-lg); border: 0.5px solid var(--color-border-tertiary); display:flex; align-items:center; justify-content:center; padding:14px; }
#ori-svg { width:100%; height:100%; max-width:240px; max-height:240px; }
.ori-fade { animation: popIn 0.4s ease both; }
.ori-wobble { animation: bouncePop 1.8s ease infinite; }
.ori-info { text-align:center; max-width:320px; }
.ori-step { font-size:13px; color: var(--color-text-secondary); margin-bottom:6px; }
.ori-text { font-size:15px; color: var(--color-text-primary); line-height:1.5; }
#ori-back:disabled, #ori-next:disabled { opacity:0.4; cursor:not-allowed; }

/* B4 MAZE */
.mze-stage { background: var(--color-background-secondary); border-radius: var(--border-radius-lg); border: 0.5px solid var(--color-border-tertiary); padding:10px; }
.mze-stage svg { display:block; max-width:100%; }
.mze-pad { display:flex; flex-direction:column; align-items:center; gap:6px; }
.mze-pad-row { display:flex; gap:6px; }
.mze-btn { min-width:48px; min-height:48px; padding:0; border-radius:12px; border:1.5px solid var(--color-border-secondary); background:#fff; cursor:pointer; font-size:18px; font-weight:600; color: var(--color-text-primary); transition: all 0.15s; }
.mze-btn:hover { background: var(--color-background-secondary); transform: scale(1.05); }
.mze-btn:active { transform: scale(0.95); }

/* B5 PATTERNS */
.pat-seq { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; padding:14px; background: var(--color-background-secondary); border-radius: var(--border-radius-lg); border: 0.5px solid var(--color-border-tertiary); }
.pat-slot { min-width:48px; min-height:48px; display:inline-flex; align-items:center; justify-content:center; background:#fff; border-radius:10px; border: 1px solid var(--color-border-tertiary); font-size:20px; font-weight:600; color: var(--color-text-secondary); transition: all 0.2s; }
.pat-slot.pat-empty { border-style:dashed; background:#FAEEDA; color:#BA7517; }
.pat-slot.pat-filled { animation: popIn 0.3s ease; }
.pat-opts { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; padding-top:6px; }
.pat-opt { min-width:56px; min-height:56px; padding:6px; background:#fff; border:1.5px solid var(--color-border-secondary); border-radius:12px; cursor:pointer; transition: all 0.15s; display:flex; align-items:center; justify-content:center; }
.pat-opt:hover { transform: scale(1.07); border-color:#7F77DD; box-shadow:0 4px 12px rgba(127,119,221,0.18); }

/* B6 NATURE SYMMETRY */
.nsm-main { background: var(--color-background-secondary); border-radius: var(--border-radius-lg); border: 0.5px solid var(--color-border-tertiary); padding:14px; }
.nsm-target { width:100%; max-width:360px; height:auto; display:block; }
.nsm-target.nsm-success { animation: bouncePop 0.7s ease; }
.nsm-opts { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.nsm-opt { background:#fff; border:2px solid var(--color-border-secondary); border-radius:12px; padding:6px; cursor:pointer; transition: all 0.15s; width:120px; height:80px; display:flex; align-items:center; justify-content:center; }
.nsm-opt:hover { border-color:#1D9E75; transform: scale(1.04); box-shadow:0 4px 12px rgba(29,158,117,0.18); }
.nsm-opt svg { width:100%; height:100%; }

/* ===== SKUPINA C — Kosmická výchova ===== */

/* sdílený drag-ghost */
.nx-drag-ghost {
  position: fixed; z-index: 9999; pointer-events: none; opacity: 0.85;
  border-radius: 14px; box-shadow: 0 8px 24px rgba(42,27,15,0.22);
  transform: rotate(-3deg) scale(1.05);
}
.nx-drop-hover { box-shadow: 0 0 0 3px #639922 inset, 0 4px 12px rgba(99,153,34,0.22); }

/* společný layout */
.lcy, .prt, .fch, .mns, .wmp, .nsd {
  padding: 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.85rem;
}

/* C1 LIFECYCLE */
.lcy-flow {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; align-items: center;
  background: var(--color-background-secondary); padding: 14px; border-radius: var(--border-radius-lg);
  border: 0.5px solid var(--color-border-tertiary);
}
.lcy-slot {
  min-width: 76px; min-height: 88px; padding: 8px; border-radius: 14px;
  border: 2px dashed #639922; background: #FBF5E6;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.lcy-slot.lcy-filled { border-style: solid; background: #EAF3DE; }
.lcy-num { font-size: 22px; font-weight: 600; color: #639922; }
.lcy-arrow { font-size: 22px; color: #639922; font-weight: 600; }
.lcy-emoji { font-size: 30px; line-height: 1; }
.lcy-label { font-size: 12px; color: #173404; font-weight: 500; text-align: center; }
.lcy-tray { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.lcy-tile {
  min-width: 78px; min-height: 88px; padding: 8px; border-radius: 14px;
  background: #fff; border: 1.5px solid var(--color-border-secondary); cursor: grab;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.lcy-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(99,153,34,0.18); border-color: #639922; }

/* C2 PARTS */
.prt-stage {
  background: var(--color-background-secondary); padding: 12px; border-radius: var(--border-radius-lg);
  border: 0.5px solid var(--color-border-tertiary); width: 100%; max-width: 360px;
}
.prt-stage svg { width: 100%; height: auto; display: block; }
.prt-dot { cursor: default; transition: r 0.15s; }
.prt-tray { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.prt-tile {
  min-height: 40px; padding: 10px 16px; border-radius: 22px; background: #fff;
  border: 1.5px solid var(--color-border-secondary); color: var(--color-text-primary);
  font-size: 14px; font-weight: 500; cursor: grab; transition: all 0.15s;
}
.prt-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(99,153,34,0.18); border-color: #639922; }

/* C3 FOODCHAIN */
.fch-flow {
  display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; align-items: center;
  background: var(--color-background-secondary); padding: 14px; border-radius: var(--border-radius-lg);
  border: 0.5px solid var(--color-border-tertiary);
}
.fch-slot {
  min-width: 72px; min-height: 86px; padding: 8px; border-radius: 14px;
  border: 2px dashed #639922; background: #FBF5E6;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.fch-slot.fch-filled { border-style: solid; background: #EAF3DE; }
.fch-num { font-size: 22px; font-weight: 600; color: #639922; }
.fch-arrow { font-size: 22px; color: #639922; font-weight: 600; padding: 0 2px; }
.fch-emoji { font-size: 30px; line-height: 1; }
.fch-label { font-size: 12px; color: #173404; font-weight: 500; text-align: center; }
.fch-tray { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.fch-tile {
  min-width: 74px; min-height: 86px; padding: 8px; border-radius: 14px;
  background: #fff; border: 1.5px solid var(--color-border-secondary); cursor: grab;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.fch-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(99,153,34,0.18); border-color: #639922; }

/* C4 MINERALS */
.mns-bins {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 600px;
}
.mns-bin {
  flex: 1 1 160px; min-width: 160px; min-height: 110px; padding: 10px;
  border: 2px solid; border-radius: 14px; display: flex; flex-direction: column; gap: 6px;
}
.mns-bin-label { font-size: 14px; font-weight: 600; text-align: center; }
.mns-bin-items { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.mns-chip {
  font-size: 12px; padding: 4px 8px; border-radius: 10px; border: 1px solid;
  background: #fff; color: var(--color-text-primary);
}
.mns-tray { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.mns-tile {
  min-width: 86px; min-height: 84px; padding: 8px; border-radius: 14px;
  background: #fff; border: 1.5px solid var(--color-border-secondary); cursor: grab;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.mns-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(99,153,34,0.18); border-color: #639922; }
.mns-emoji { font-size: 28px; line-height: 1; }
.mns-name { font-size: 12px; color: var(--color-text-primary); font-weight: 500; text-align: center; }

/* C5 WORLDMAP */
.wmp-stage {
  background: var(--color-background-secondary); padding: 8px; border-radius: var(--border-radius-lg);
  border: 0.5px solid var(--color-border-tertiary); width: 100%; max-width: 640px;
}
.wmp-stage svg { width: 100%; height: auto; display: block; }
.wmp-cont { transition: transform 0.15s, filter 0.15s; transform-origin: center; transform-box: fill-box; }
.wmp-cont:hover { filter: brightness(1.08); }
.wmp-cont.wmp-success { filter: brightness(1.15) saturate(1.3); animation: bouncePop 0.7s ease; }
.wmp-name {
  font-size: 22px; font-weight: 600; color: #173404; padding: 6px 18px;
  background: #EAF3DE; border-radius: 22px; border: 1px solid #639922;
}
.b-dot.b-dot-done { background: #639922; }

/* C6 SOUNDS */
.nsd-play { padding: 6px 0; }
.nsd-opts { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.nsd-opt {
  min-width: 110px; min-height: 110px; padding: 10px; border-radius: 16px;
  background: #fff; border: 1.5px solid var(--color-border-secondary); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  transition: all 0.15s;
}
.nsd-opt:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(99,153,34,0.18); border-color: #639922; }
.nsd-opt.nsd-success { background: #EAF3DE; border-color: #639922; animation: bouncePop 0.7s ease; }
.nsd-emoji { font-size: 40px; line-height: 1; }
.nsd-name { font-size: 14px; color: var(--color-text-primary); font-weight: 500; text-align: center; }

/* ===== SKUPINA D — Příprava na psaní ===== */
.lns, .ltr, .pwr {
  padding: 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.85rem;
}
.trace-title {
  font-size: 22px; font-weight: 600; color: #412402;
  padding: 6px 18px; background: #FAEEDA; border-radius: 22px; border: 1px solid #BA7517;
}
.trace-stage {
  background: var(--color-background-secondary); padding: 8px; border-radius: var(--border-radius-lg);
  border: 0.5px solid var(--color-border-tertiary);
}
.trace-canvas {
  display: block; touch-action: none; cursor: crosshair;
  border-radius: 10px; background: #FBF5E6;
  box-shadow: inset 0 1px 4px rgba(42,27,15,0.06);
  transition: box-shadow 0.3s;
}
.trace-canvas.trace-success {
  box-shadow: 0 0 0 3px #639922, 0 6px 18px rgba(99,153,34,0.22);
  animation: bouncePop 0.7s ease;
}

/* ===== SKUPINA E — Pokročilá matematika ===== */
.mul, .div2, .clk, .frc, .nsq {
  padding: 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.85rem;
}

/* společná tlačítka odpovědí */
.mul-opt, .div-opt, .clk-opt, .frc-opt, .nsq-opt {
  min-width: 70px; min-height: 56px; padding: 10px 18px; font-size: 22px; font-weight: 600;
  background: #fff; color: #042C53; border: 2px solid #C9E1F7; border-radius: 14px;
  cursor: pointer; transition: all 0.15s;
}
.mul-opt:hover, .div-opt:hover, .clk-opt:hover, .frc-opt:hover, .nsq-opt:hover {
  transform: translateY(-2px); border-color: #378ADD;
  box-shadow: 0 6px 14px rgba(55,138,221,0.22);
}
.mul-success, .div-success, .clk-success, .frc-success, .nsq-success {
  background: #E6F1FB !important; border-color: #185FA5 !important; animation: bouncePop 0.7s ease;
}

/* E1 MULTIPLY */
.mul-prompt { font-size: 26px; font-weight: 600; color: #042C53; }
.mul-num { color: #378ADD; }
.mul-q { color: #BA7517; }
.mul-stage {
  background: var(--color-background-secondary); padding: 14px; border-radius: var(--border-radius-lg);
  border: 0.5px solid var(--color-border-tertiary);
}
.mul-stage svg { display: block; }
.mul-opts { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* E2 DIVIDE */
.div-prompt { font-size: 26px; font-weight: 600; color: #042C53; }
.div-num { color: #378ADD; }
.div-q { color: #BA7517; }
.div-baskets {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; padding: 14px;
  background: var(--color-background-secondary); border-radius: var(--border-radius-lg);
  border: 0.5px solid var(--color-border-tertiary);
}
.div-basket {
  padding: 8px 10px; background: #FFF8EE; border: 1.5px dashed #378ADD; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.div-opts { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* E3 CLOCK */
.clk-stage {
  background: var(--color-background-secondary); padding: 12px; border-radius: var(--border-radius-lg);
  border: 0.5px solid var(--color-border-tertiary);
}
.clk-stage svg { width: 220px; height: 220px; display: block; }
.clk-opts { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* E4 FRACTIONS */
.frc-stage {
  background: var(--color-background-secondary); padding: 14px; border-radius: var(--border-radius-lg);
  border: 0.5px solid var(--color-border-tertiary); width: 100%; max-width: 360px;
  display: flex; align-items: center; justify-content: center;
}
.frc-stage svg { display: block; }
.frc-opts { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* E5 NUMSEQ */
.nsq-row {
  display: flex; gap: 6px; align-items: center; padding: 14px;
  background: var(--color-background-secondary); border-radius: var(--border-radius-lg);
  border: 0.5px solid var(--color-border-tertiary);
}
.nsq-cell {
  min-width: 52px; min-height: 52px; padding: 8px 12px; font-size: 22px; font-weight: 600;
  background: #fff; color: #042C53; border: 1.5px solid #C9E1F7; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.nsq-cell.nsq-q {
  background: #FAEEDA; border-style: dashed; border-color: #BA7517; color: #BA7517;
}
.nsq-sep { font-size: 22px; font-weight: 600; color: #6B5840; }
.nsq-opts { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ===== SKUPINA F — Mindfulness ===== */
.brt, .sln, .slm {
  padding: 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.85rem;
}

/* F1 BREATHING */
.brt-stage {
  position: relative; width: 280px; height: 280px;
  display: flex; align-items: center; justify-content: center;
  background: #E1F5EE; border-radius: 50%; border: 1px solid #1D9E75;
}
.brt-circle {
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4CB3A3, #1D9E75 70%, #0F6E56);
  transform: scale(0.4); transition: none;
  box-shadow: 0 6px 24px rgba(29,158,117,0.3), inset 0 -8px 16px rgba(15,110,86,0.25);
}
.brt-phase {
  position: absolute; font-size: 24px; font-weight: 600; color: #FFF8EE;
  text-shadow: 0 1px 3px rgba(4,52,44,0.6); pointer-events: none;
  letter-spacing: 0.02em;
}
.brt-info { font-size: 15px; color: #04342C; }
.brt-count strong, .brt-count #brt-num { font-weight: 600; color: #0F6E56; }

/* F2 SILENCE */
.sln-stage {
  background: var(--color-background-secondary); padding: 12px; border-radius: var(--border-radius-lg);
  border: 0.5px solid var(--color-border-tertiary);
  transition: box-shadow 0.4s, transform 0.4s;
}
.sln-stage svg { width: 240px; height: 240px; display: block; }
.sln-done .sln-stage {
  box-shadow: 0 0 0 4px #1D9E75, 0 8px 22px rgba(29,158,117,0.3);
  transform: scale(1.04);
}
#sln-arc { transition: stroke-dashoffset 0.2s linear; }

/* F3 SLOWMOVE */
.slm-stage {
  background: var(--color-background-secondary); padding: 10px; border-radius: var(--border-radius-lg);
  border: 0.5px solid var(--color-border-tertiary); width: 100%; max-width: 420px;
}
.slm-stage svg { width: 100%; height: auto; display: block; border-radius: 8px; }
#slm-dot {
  filter: drop-shadow(0 2px 4px rgba(29,158,117,0.4));
  transition: cx 0.04s linear, cy 0.04s linear;
}

/* ===== SKUPINA G — Jazyk a čtení ===== */
.syl, .ant, .bwd {
  padding: 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.85rem;
}

/* G1 SYLLABLES */
.syl-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 20px 30px; background: var(--color-background-secondary); border-radius: var(--border-radius-lg);
  border: 0.5px solid var(--color-border-tertiary); min-width: 200px;
}
.syl-emoji { font-size: 64px; line-height: 1; }
.syl-word { font-size: 32px; font-weight: 700; color: #4B1528; letter-spacing: 0.05em; }
.syl-opts { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.syl-opt {
  min-width: 70px; min-height: 70px; font-size: 32px; font-weight: 700;
  background: #fff; color: #4B1528; border: 2px solid #F6CFDD; border-radius: 14px;
  cursor: pointer; transition: all 0.15s;
}
.syl-opt:hover { transform: translateY(-2px); border-color: #D4537E; box-shadow: 0 6px 14px rgba(212,83,126,0.22); }
.syl-success, .ant-success {
  background: #FBEAF0 !important; border-color: #993556 !important; animation: bouncePop 0.7s ease;
}

/* G2 ANTONYMS */
.ant-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 20px 30px; background: var(--color-background-secondary); border-radius: var(--border-radius-lg);
  border: 0.5px solid var(--color-border-tertiary); min-width: 200px;
}
.ant-emoji { font-size: 56px; line-height: 1; }
.ant-word { font-size: 26px; font-weight: 600; color: #4B1528; }
.ant-opts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ant-opt {
  min-height: 50px; padding: 12px 20px; font-size: 18px; font-weight: 500;
  background: #fff; color: #4B1528; border: 2px solid #F6CFDD; border-radius: 22px;
  cursor: pointer; transition: all 0.15s;
}
.ant-opt:hover { transform: translateY(-2px); border-color: #D4537E; box-shadow: 0 6px 14px rgba(212,83,126,0.22); }

/* G3 BUILDWORD */
.bwd-pic {
  padding: 14px 24px; background: var(--color-background-secondary); border-radius: var(--border-radius-lg);
  border: 0.5px solid var(--color-border-tertiary);
}
.bwd-emoji { font-size: 64px; line-height: 1; }
.bwd-slots { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.bwd-slot {
  width: 54px; height: 64px; border-radius: 12px;
  background: #FBF5E6; border: 2px dashed #D4537E;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 700; color: #4B1528;
  transition: all 0.2s; cursor: default;
}
.bwd-slot.bwd-filled {
  background: #FBEAF0; border-style: solid; cursor: pointer;
  animation: popIn 0.3s ease;
}
.bwd-slot.bwd-success {
  background: #FBEAF0; border-color: #993556;
}
.bwd-tray { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.bwd-tile {
  min-width: 50px; min-height: 50px; font-size: 24px; font-weight: 700;
  background: #fff; color: #4B1528; border: 2px solid #F6CFDD; border-radius: 12px;
  cursor: pointer; transition: all 0.15s;
}
.bwd-tile:hover { transform: translateY(-2px); border-color: #D4537E; box-shadow: 0 6px 14px rgba(212,83,126,0.22); }