/* «Устат» → Игры для начальных классов: стили (поверх game.css) */
.kk-stage { --g1: #1d5fae; --g2: #3a8f5c; --g3: #f0a030; font-size: clamp(1.15rem, 1.6vw, 1.55rem); min-height: 560px; display: flex; flex-direction: column; overflow: hidden; }
.kk-hud { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin-bottom: 10px; }
.kk-prog { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kk-num { font-family: var(--font-display); font-weight: 700; background: rgba(255,255,255,.18); border-radius: 14px; padding: 2px 12px; }
.kk-dots { display: flex; gap: 5px; flex-wrap: wrap; }
.kk-dots i { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.25); display: block; }
.kk-dots i.d { background: #ffd23f; }
.kk-dots i.c { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.35); }
.kk-stars { font-weight: 800; background: rgba(0,0,0,.18); border-radius: 16px; padding: 4px 14px; font-size: 1.1em; }
.kk-stars b { font-family: var(--font-display); }
.kk-teams { display: flex; gap: 10px; }
.kk-team { display: flex; align-items: center; gap: 10px; border-radius: 16px; padding: 4px 14px; background: rgba(0,0,0,.18); border: 3px solid transparent; font-weight: 800; transition: transform .2s ease; }
.kk-team b { font-family: var(--font-display); font-size: 1.3em; }
.kk-team.t0 { border-color: #ffd23f; }
.kk-team.t1 { border-color: #ff6fb5; }
.kk-team.on { background: rgba(255,255,255,.28); transform: scale(1.06); }
.kk-turn { align-self: center; font-weight: 800; border-radius: 14px; padding: 2px 14px; background: rgba(0,0,0,.2); }
.kk-turn.t0 b { color: #ffd23f; }
.kk-turn.t1 b { color: #ff9fd0; }

.kk-body { flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.kk-prompt { text-align: center; font-weight: 800; font-size: 1.25em; line-height: 1.3; text-shadow: 0 2px 0 rgba(0,0,0,.15); }
.kk-prompt > svg { display: block; margin: 4px auto 0; max-width: 100%; height: auto; }
/* часы не выше ~трети экрана — чтобы на 1366×768 варианты ответа помещались без прокрутки */
.kk-prompt > svg.kk-clock { width: min(260px, 27vh); height: auto; }
.kk-note svg { display: inline-block; vertical-align: middle; }
.kk-prompt .kk-ask { display: block; font-size: .9em; margin-bottom: 6px; }
.kk-pic { font-size: clamp(4.5rem, 12vw, 9rem); line-height: 1.1; display: inline-block; filter: drop-shadow(0 6px 6px rgba(0,0,0,.25)); animation: kkIn .4s cubic-bezier(.2,1.6,.4,1) both; }
.kk-letter { font-family: var(--font-display); font-size: clamp(5rem, 14vw, 10rem); line-height: 1; display: inline-block; background: #fff; color: #2b2340; border-radius: 28px; padding: .05em .35em .12em; box-shadow: 0 8px 0 rgba(0,0,0,.18); text-shadow: none; animation: kkIn .4s cubic-bezier(.2,1.6,.4,1) both; }
.kk-word { font-family: var(--font-display); font-size: 1.6em; letter-spacing: .06em; display: block; margin-top: 6px; }
.kk-word u { text-decoration: none; display: inline-block; min-width: .8em; border-bottom: 5px solid #ffd23f; color: #ffd23f; }
.kk-expr { font-family: var(--font-display); font-size: clamp(2.6rem, 7vw, 5rem); line-height: 1.15; display: block; }
.kk-items { display: flex; flex-wrap: wrap; justify-content: center; gap: .1em .25em; font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.15; max-width: 900px; margin: 0 auto; }
.kk-items .grp { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .05em; background: rgba(255,255,255,.14); border-radius: 18px; padding: .05em .2em; }
.kk-items .op { font-family: var(--font-display); font-weight: 700; color: #fff; align-self: center; padding: 0 .1em; }

.kk-opts { --cols: 4; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 20px); max-width: 1000px; width: 100%; margin: 0 auto; }
.kk-opt {
  min-height: 92px; border: 0; border-radius: 24px; background: #fff; color: #2b2340; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 1.7em; line-height: 1.15; padding: 12px 10px;
  box-shadow: 0 7px 0 #c9c2e0, 0 12px 20px rgba(0,0,0,.2); transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; touch-action: manipulation; overflow-wrap: anywhere;
}
.kk-opt:hover:not(:disabled) { transform: translateY(-3px); }
.kk-opt:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 2px 0 #c9c2e0, 0 4px 8px rgba(0,0,0,.2); }
.kk-opt:focus-visible { outline: 5px solid #ffd23f; outline-offset: 3px; }
.kk-opt:disabled { cursor: default; }
.kk-opt.ok { background: #3ccf7a; color: #fff; box-shadow: 0 7px 0 #23995a, 0 0 0 6px rgba(255,255,255,.6); animation: kkBounce .6s ease; }
.kk-opt.no { background: #ffd9dd; color: #b0303e; opacity: .7; box-shadow: 0 4px 0 #e8a3ab; }
.kk-opt .s { font-family: var(--font); font-size: .55em; font-weight: 800; }
.kk-opt .p { font-size: 1.7em; line-height: 1.1; }
.kk-opts.txt .kk-opt { font-size: 1.25em; font-family: var(--font); font-weight: 800; }
.kk-opts.pics .kk-opt { font-size: 3.4em; min-height: 120px; }
.kk-opts.svg .kk-opt { min-height: 140px; }
.kk-opts.svg .kk-opt svg { width: 100%; max-width: 140px; height: auto; }
.kk-shake { animation: gkShake .45s ease; }

.kk-note { text-align: center; font-weight: 800; font-size: 1.2em; background: rgba(255,255,255,.18); border-radius: 18px; padding: 6px 16px; align-self: center; animation: kkIn .35s ease both; }
.kk-tools { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }

.kk-praise { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 40; pointer-events: none; display: flex; flex-direction: column; align-items: center; animation: kkPraise 1.2s ease both; }
.kk-praise .e { font-size: clamp(4rem, 10vw, 7rem); line-height: 1; filter: drop-shadow(0 6px 8px rgba(0,0,0,.3)); }
.kk-praise b { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.6rem); color: #fff; background: #3ccf7a; border-radius: 22px; padding: .1em .6em; box-shadow: 0 6px 0 #23995a, 0 14px 30px rgba(0,0,0,.3); white-space: nowrap; }
.kk-praise.try { animation-duration: .95s; }
.kk-praise.try b { background: #ff9f43; box-shadow: 0 6px 0 #c76a14, 0 14px 30px rgba(0,0,0,.3); font-size: clamp(1.4rem, 3.6vw, 2.4rem); }
.kk-praise.try .e { font-size: clamp(3rem, 7vw, 5rem); }

.kk-big { font-size: clamp(5rem, 12vw, 8rem); line-height: 1; animation: float 2.4s ease-in-out infinite; }
.kk-end-t { font-size: 1.3em; font-weight: 800; margin: 0; }

/* Деньги */
.kk-money { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; max-width: 900px; }
.kk-coin, .kk-bill { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; line-height: 1; color: #3a2a00; text-shadow: none; user-select: none; }
.kk-coin { width: 2.9em; height: 2.9em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c8, #f2c94c 55%, #c8952a); box-shadow: inset 0 0 0 4px rgba(150,100,10,.45), 0 4px 0 rgba(0,0,0,.2); font-size: .9em; }
.kk-coin.sil { background: radial-gradient(circle at 35% 30%, #ffffff, #cfd6de 55%, #8d98a6); color: #2b3442; box-shadow: inset 0 0 0 4px rgba(60,70,90,.35), 0 4px 0 rgba(0,0,0,.2); }
.kk-coin.cop { width: 2.4em; height: 2.4em; background: radial-gradient(circle at 35% 30%, #ffe2c4, #d98a4a 55%, #9c5320); color: #3a1800; font-size: .8em; }
.kk-coin b { font-size: 1.25em; }
.kk-coin small, .kk-bill small { font-family: var(--font); font-weight: 800; font-size: .48em; margin-top: 2px; }
.kk-bill { width: 5.4em; height: 2.8em; border-radius: 10px; background: var(--bc, #9fd18b); box-shadow: inset 0 0 0 4px rgba(255,255,255,.55), inset 0 0 0 7px rgba(0,0,0,.08), 0 4px 0 rgba(0,0,0,.2); color: #1c2a12; font-size: .9em; position: relative; }
.kk-bill b { font-size: 1.35em; }
.kk-bank { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.kk-bank button { border: 0; background: none; padding: 4px; cursor: pointer; border-radius: 14px; font-size: 1.15em; touch-action: manipulation; transition: transform .12s ease; }
.kk-bank button:hover { transform: translateY(-3px); }
.kk-bank button:active { transform: scale(.94); }
.kk-wallet { min-height: 3.4em; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; background: rgba(0,0,0,.18); border: 3px dashed rgba(255,255,255,.5); border-radius: 22px; padding: 10px; }
.kk-wallet button { border: 0; background: none; padding: 0; cursor: pointer; font-size: .85em; }
.kk-wallet .ph { opacity: .75; font-weight: 700; }
.kk-sum { text-align: center; font-weight: 800; font-size: 1.2em; }
.kk-sum b { font-family: var(--font-display); font-size: 1.3em; color: #ffd23f; }
.kk-price { display: inline-flex; align-items: center; gap: 12px; background: #fff; color: #2b2340; border-radius: 22px; padding: 6px 20px; box-shadow: 0 6px 0 rgba(0,0,0,.18); }
.kk-price .pic { font-size: 2.4em; }
.kk-price b { font-family: var(--font-display); font-size: 1.5em; }

/* Слоги */
.kk-slots { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.kk-slot { min-width: 2.6em; height: 1.9em; border-radius: 18px; border: 4px dashed rgba(255,255,255,.65); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 1.8em; padding: 0 .3em; }
.kk-slot.f { border-style: solid; border-color: #ffd23f; background: #fff; color: #2b2340; animation: kkIn .3s ease both; }
.kk-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.kk-tile { border: 0; cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 1.8em; min-width: 2.6em; padding: .25em .5em; border-radius: 20px; background: #ffd23f; color: #3a2600; box-shadow: 0 7px 0 #c99a12, 0 10px 18px rgba(0,0,0,.2); touch-action: manipulation; }
.kk-tile:disabled { visibility: hidden; }
.kk-tile:active { transform: translateY(4px); box-shadow: 0 3px 0 #c99a12; }

/* Жомок */
.kk-intro { flex: 1; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.kk-story { background: #fffaf0; color: #2b2340; border-radius: 26px; padding: clamp(16px, 2.6vw, 34px); max-width: 980px; width: 100%; box-shadow: 0 10px 0 rgba(0,0,0,.14), 0 20px 40px rgba(0,0,0,.2); }
.kk-story h2 { color: #2b2340; margin: 0 0 4px; font-size: 1.5em; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kk-story h2 .ico { font-size: 1.6em; }
.kk-story .src { color: #7a6b5d; font-size: .75em; font-weight: 700; margin: 0 0 12px; }
.kk-story p { margin: 0 0 .55em; font-size: 1.05em; line-height: 1.55; }
.kk-story .moral { font-weight: 800; background: #fdf1d3; border-radius: 14px; padding: 8px 14px; }
.modal .kk-story { box-shadow: none; padding: 0; font-size: 1.1rem; }

/* Табият: корзины */
.kk-opts.bins .kk-opt { font-size: 1.15em; font-family: var(--font); font-weight: 800; min-height: 130px; border: 4px dashed rgba(43,35,64,.25); }
.kk-opts.bins .kk-opt .p { font-size: 2.2em; }

@keyframes kkIn { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes kkBounce { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 70% { transform: scale(.96); } 100% { transform: scale(1); } }
@keyframes kkPraise { 0% { transform: translate(-50%, -50%) scale(.4); opacity: 0; } 18% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } 30% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { transform: translate(-50%, -62%) scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .kk-pic, .kk-letter, .kk-opt.ok, .kk-big { animation: none; } }

#game-wrap:fullscreen .kk-stage { font-size: clamp(1.4rem, 2.2vw, 2.3rem); }
#game-wrap:-webkit-full-screen .kk-stage { font-size: clamp(1.4rem, 2.2vw, 2.3rem); }

@media (max-width: 640px) {
  .kk-stage { font-size: 1rem; min-height: 480px; padding: 12px; }
  .kk-opts { --cols: 2 !important; }
  .kk-opt { min-height: 72px; font-size: 1.5em; }
  .kk-opts.pics .kk-opt { font-size: 2.6em; min-height: 96px; }
  .kk-opts.svg .kk-opt { min-height: 110px; }
  .kk-opts.svg .kk-opt svg { max-width: 100px; }
  .kk-opts.txt .kk-opt { font-size: 1.1em; }
  .kk-teams { width: 100%; justify-content: center; }
  .kk-team { padding: 2px 10px; font-size: .9em; }
  .kk-hud { justify-content: center; }
  .kk-clock { width: 200px; height: 200px; }
  .kk-praise b { white-space: normal; text-align: center; }
  .kk-bill { font-size: .75em; }
  .kk-coin { font-size: .8em; }
  .kk-slot, .kk-tile { font-size: 1.4em; }
}
.kk-opts.big .kk-opt { font-size: 2.8em; }