/* ҮҮСМЭЛ ФАЙЛ — эх нь Abico Webs/Kagomecrush/style.css */
/* KagomeCrush — босоо (утас/таблет) дэлгэцэд зориулсан загвар.
   Өнгө: Kagome-ийн улаан (#e60012), шинэ ногоон, дулаан цайвар. */
:root{
  --red:#e60012; --red-dk:#b3000e; --green:#3aa655; --green-dk:#2a7f40;
  --ink:#2b2b2b; --mut:#6b6b6b; --cream:#fff8ec; --line:rgba(43,43,43,.12);
  --cell:44px; --gap:4px;
  --shadow:0 10px 30px rgba(43,43,43,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
/* display заасан элементэд hidden атрибут ажиллахгүй тул хүчээр */
[hidden]{display:none!important}
html,body{height:100%}
body{
  font-family:'Nunito',system-ui,sans-serif;color:var(--ink);background:#e8f5d8;
  min-height:100dvh;overflow:hidden;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  user-select:none;-webkit-user-select:none;
}
.bg{position:fixed;inset:0;background:url(img/crush/bg.jpg) center/cover no-repeat;z-index:0}
.bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 30%,rgba(255,255,255,.18))}
.app{position:relative;z-index:1;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px 12px calc(14px + env(safe-area-inset-bottom,0))}

.screen{display:none;width:100%;max-width:440px;flex-direction:column;align-items:center;text-align:center}
.screen.is-on{display:flex}

/* ---------- Гарчиг ---------- */
.logo{width:150px;height:auto;filter:drop-shadow(0 2px 0 #fff)}
.title{font-weight:900;font-size:44px;line-height:1;margin-top:10px;letter-spacing:-.02em;color:var(--ink);text-shadow:0 3px 0 #fff}
.title span{color:var(--red)}
.lede{margin-top:12px;font-size:17px;font-weight:600;line-height:1.4;color:#3f3f3f}
.demo{display:flex;gap:6px;margin-top:14px}
.demo img{width:64px;height:64px;animation:bob 1.6s ease-in-out infinite}
.demo img:nth-child(2){animation-delay:.2s}.demo img:nth-child(3){animation-delay:.4s}
@keyframes bob{50%{transform:translateY(-6px)}}
.rules{margin-top:14px;display:flex;flex-direction:column;gap:8px;width:100%}
.rules div{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.82);border-radius:14px;padding:8px 12px;text-align:left;font-size:14px;line-height:1.3;box-shadow:var(--shadow)}
.rules img{width:44px;height:44px;flex:0 0 auto}

.btn{
  font:inherit;font-weight:900;font-size:17px;color:#fff;background:var(--red);border:0;border-radius:999px;
  padding:14px 28px;cursor:pointer;box-shadow:0 5px 0 var(--red-dk),0 12px 24px rgba(230,0,18,.25);
  transition:transform .08s,box-shadow .08s;
}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--red-dk)}
.btn--big{margin-top:18px;font-size:21px;padding:16px 44px}
.btn--ghost{margin-top:10px;background:#fff;color:var(--ink);box-shadow:0 5px 0 rgba(43,43,43,.18)}
.btn--ghost:active{box-shadow:0 2px 0 rgba(43,43,43,.18)}
.btn[disabled]{opacity:.55;pointer-events:none}

/* ---------- Тоглоом ---------- */
.screen--game{justify-content:flex-start}
.hud{display:flex;align-items:center;gap:12px;width:100%;background:rgba(255,255,255,.9);border-radius:18px;padding:8px 14px;box-shadow:var(--shadow)}
.hud__logo{width:84px;height:auto}
.hud__score,.hud__time{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;line-height:1}
.hud__time{margin-left:14px;min-width:56px}
.hud__lbl{font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--mut)}
.hud b{font-size:28px;font-weight:900;font-variant-numeric:tabular-nums}
.hud__time b{color:var(--green-dk)}
.hud__time.is-low b{color:var(--red);animation:pulse .5s steps(2) infinite}
@keyframes pulse{50%{opacity:.35}}
.timebar{width:100%;height:8px;background:rgba(255,255,255,.7);border-radius:99px;margin-top:8px;overflow:hidden}
.timebar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--green),#8bd36a);border-radius:99px;transition:width .25s linear}
.timebar i.is-low{background:linear-gradient(90deg,var(--red),#ff7a5c)}

.boardwrap{position:relative;margin-top:12px}
/* touch-action:none — үгүй бол утсан дээр хуруу чирэхийг браузер гүйлгэлт гэж
   авч pointercancel илгээдэг тул swipe хэзээ ч бүртгэгдэхгүй (2026-09-03). */
.board{
  position:relative;touch-action:none;display:grid;grid-template-columns:repeat(8,var(--cell));grid-template-rows:repeat(8,var(--cell));gap:var(--gap);
  padding:8px;background:rgba(255,255,255,.55);border-radius:20px;box-shadow:var(--shadow),inset 0 0 0 2px rgba(255,255,255,.8);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.cellbg{background:rgba(255,255,255,.55);border-radius:10px}
.piece{
  position:absolute;touch-action:none;width:var(--cell);height:var(--cell);left:0;top:0;
  transition:transform .18s cubic-bezier(.2,.8,.3,1.2),opacity .16s;will-change:transform;
  display:grid;place-items:center;cursor:pointer;
}
.piece img{width:96%;height:96%;pointer-events:none;-webkit-user-drag:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.12))}
.piece.is-sel img{transform:scale(1.12);filter:drop-shadow(0 0 6px rgba(230,0,18,.75)) drop-shadow(0 2px 2px rgba(0,0,0,.2))}
.piece.is-pop{opacity:0;transform:scale(.2)!important}
.piece.is-fall{transition-duration:.28s;transition-timing-function:cubic-bezier(.3,.7,.4,1.15)}
.piece.is-nudge{animation:nudge .22s}
@keyframes nudge{30%{transform:var(--tx) translateX(-4px)}70%{transform:var(--tx) translateX(4px)}}
.piece.is-special::after{content:"";position:absolute;inset:6%;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 14px 4px rgba(255,214,0,.8);animation:glow 1s ease-in-out infinite;pointer-events:none}
@keyframes glow{50%{opacity:.35}}
.piece.is-born{animation:born .35s cubic-bezier(.2,.8,.3,1.3)}
@keyframes born{0%{transform:var(--tx) scale(0) rotate(-30deg)}}

.combo{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font-weight:900;font-size:34px;color:#fff;
  text-shadow:0 3px 0 var(--red-dk),0 6px 18px rgba(0,0,0,.25);pointer-events:none;animation:combo .8s forwards;white-space:nowrap}
@keyframes combo{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}100%{opacity:0;transform:translate(-50%,-90%) scale(1)}}
.fly{position:absolute;font-weight:900;color:var(--red);font-size:16px;pointer-events:none;animation:fly .7s forwards;text-shadow:0 1px 0 #fff}
@keyframes fly{to{transform:translateY(-38px);opacity:0}}
.countdown{position:absolute;inset:0;display:grid;place-items:center;font-size:110px;font-weight:900;color:#fff;
  text-shadow:0 4px 0 var(--red-dk),0 10px 30px rgba(0,0,0,.3);border-radius:20px;background:rgba(255,255,255,.25);pointer-events:none}
.hint{margin-top:10px;font-size:13px;font-weight:600;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35)}

/* ---------- Дуусав / Шилдэгүүд ---------- */
.card{width:100%;background:rgba(255,255,255,.94);border-radius:24px;padding:22px 20px;box-shadow:var(--shadow)}
.eyebrow{font-size:12px;font-weight:900;letter-spacing:.14em;color:var(--mut)}
.final{margin-top:6px;display:flex;flex-direction:column;align-items:center;line-height:1}
.final b{font-size:64px;font-weight:900;color:var(--red);font-variant-numeric:tabular-nums}
.rank{margin-top:6px;font-weight:800;color:var(--green-dk)}
.form{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.form__lede{font-size:14px;color:#444;line-height:1.35}
.form label{display:flex;flex-direction:column;align-items:stretch;text-align:left;gap:4px;font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--mut)}
.form input{font:inherit;font-weight:700;font-size:17px;padding:12px 14px;border:2px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);outline:0}
.form input:focus{border-color:var(--red)}
.form .btn--big{margin-top:6px;font-size:18px;padding:14px 20px}
.form__err{font-size:13px;font-weight:700;color:var(--red)}
.saved{margin-top:14px;font-weight:900;color:var(--green-dk);font-size:17px}
.actions{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.actions .btn--ghost{margin-top:0}
.h2{font-size:26px;font-weight:900}
.top{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:6px;text-align:left}
.top li{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;background:var(--cream);font-weight:800}
.top li:nth-child(1){background:#fff3c4}.top li:nth-child(2){background:#f1f1f1}.top li:nth-child(3){background:#fbe5d0}
.top .n{width:26px;text-align:center;color:var(--mut)}
.top .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top .pts{color:var(--red);font-variant-numeric:tabular-nums}
.top li.is-me{outline:2px solid var(--green)}
.top__empty{justify-content:center;color:var(--mut);font-weight:600!important}
.screen--board .btn{margin-top:14px}

.sfx{position:fixed;right:12px;top:12px;z-index:5;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.85);font-size:18px;cursor:pointer;box-shadow:var(--shadow)}
.sfx.off{opacity:.55}

/* Дэлгэцийн хэмжээнд самбарыг багтаана */
@media (max-width:400px){:root{--cell:40px;--gap:3px}}
@media (max-width:360px){:root{--cell:36px;--gap:3px}}
@media (min-width:600px) and (min-height:900px){:root{--cell:56px;--gap:5px}.screen{max-width:520px}}
@media (min-width:900px) and (min-height:1100px){:root{--cell:72px;--gap:6px}.screen{max-width:680px}.hud b{font-size:36px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01s!important}}