:root { --ink:#25334a; --muted:#77849a; --coral:#f47c68; --coral-dark:#df6253; --yellow:#ffd66b; --shadow:0 20px 50px rgba(74,65,55,.12); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); font-family:"Nunito","Noto Sans Armenian",sans-serif; background:#f8f1e6; background-image:radial-gradient(#eadfce 1px,transparent 1px),linear-gradient(135deg,#fffaf0 0%,#f6eee2 100%); background-size:22px 22px,auto; }
button,a { font:inherit; } button { cursor:pointer; }
.game-shell { width:min(100% - 32px,1060px); min-height:100vh; margin:0 auto; padding:32px 0 40px; }
.topbar,.intro-row,.actions { display:flex; align-items:center; justify-content:space-between; }
.topbar { margin-bottom:44px; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); font-size:22px; font-weight:900; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; color:#fff; background:var(--coral); font-family:"Noto Sans Armenian",sans-serif; transform:rotate(-7deg); }
.level-counter { display:flex; align-items:baseline; gap:12px; color:var(--coral-dark); }.level-label { color:var(--muted); font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.level-counter strong { font-size:18px; }.slash { color:#c9cbd1; font-weight:500; }
.intro-row { align-items:end; margin-bottom:28px; }.eyebrow { margin:0 0 9px; color:var(--coral); font-size:13px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; } h1 { margin:0; font-family:"Noto Sans Armenian","Nunito",sans-serif; font-size:clamp(34px,6vw,58px); line-height:1; letter-spacing:0; }.instruction { margin:14px 0 0; color:var(--muted); font-size:16px; font-weight:700; }.score { display:flex; align-items:center; gap:8px; padding:10px 15px; border:1px solid #f0dfb9; border-radius:14px; color:#c58a1c; background:#fff8df; font-size:18px; font-weight:900; }.score-star { color:var(--yellow); font-size:23px; text-shadow:0 1px 0 #d59e2f; }
.play-area { display:grid; grid-template-columns:220px 1fr; gap:22px 34px; align-items:center; padding:34px; border:1px solid rgba(231,222,208,.8); border-radius:28px; background:rgba(255,255,255,.76); box-shadow:var(--shadow); }.sticker-card { position:relative; display:grid; place-items:center; min-height:220px; overflow:hidden; border-radius:20px; background:#ccefe9; box-shadow:inset 0 -10px 0 rgba(33,128,119,.1); }.sticker-card::after { position:absolute; right:-25px; bottom:-36px; width:125px; height:125px; border-radius:50%; background:rgba(255,255,255,.28); content:""; }.window-dots { position:absolute; top:13px; left:14px; display:flex; gap:5px; }.window-dots i { width:7px; height:7px; border-radius:50%; background:rgba(33,128,119,.35); }.cat-sticker { position:relative; z-index:1; padding-top:13px; font-size:108px; line-height:1; filter:drop-shadow(0 8px 0 rgba(48,120,113,.12)); }
.answer-zone,.letter-zone { width:100%; }.zone-label { margin:0 0 13px; color:var(--muted); font-size:12px; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }.answer-slots,.letter-bank { display:flex; flex-wrap:wrap; gap:10px; min-height:70px; }.answer-zone { align-self:end; }.answer-slots { padding-bottom:23px; border-bottom:2px dashed #d8dce5; }.letter-zone { align-self:start; }.letter-bank { min-height:68px; }.tile { display:grid; place-items:center; width:62px; height:62px; border:0; border-radius:15px; color:var(--ink); background:#fff; box-shadow:0 5px 0 #dfe2e8,0 8px 16px rgba(49,55,68,.08); font-family:"Noto Sans Armenian","Nunito",sans-serif; font-size:24px; font-weight:800; user-select:none; touch-action:none; transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease; }.tile:hover { transform:translateY(-4px); box-shadow:0 8px 0 #dfe2e8,0 13px 18px rgba(49,55,68,.12); }.tile:focus-visible { outline:3px solid var(--coral); outline-offset:3px; }.tile.dragging { z-index:10; opacity:.82; transform:scale(1.08) rotate(3deg); }.slot { border:2px dashed #d9dce3; border-radius:15px; background:#fafbfc; box-shadow:inset 0 2px 5px rgba(50,50,50,.03); }.slot.is-filled { border-style:solid; border-color:#f6c5bb; background:#fff4f1; }.slot.is-over { border-color:var(--coral); background:#fff0ec; }.slot .tile { width:100%; height:100%; box-shadow:none; background:transparent; }.slot .tile:hover { transform:none; }.letter-bank .tile.is-placed { opacity:.3; pointer-events:none; transform:scale(.92); box-shadow:0 3px 0 #e7e8eb; }
.message { min-height:25px; margin:19px 0 17px; color:var(--muted); font-size:14px; font-weight:800; text-align:center; }.message.success { color:#339477; }.message.error { color:var(--coral-dark); }.actions { justify-content:center; gap:12px; }.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:0 19px; border:0; border-radius:13px; font-size:14px; font-weight:900; text-decoration:none; transition:transform .18s ease,background .18s ease; }.button:hover { transform:translateY(-2px); }.button-secondary { color:var(--ink); background:#fff; box-shadow:0 3px 0 #e4e5e8; }.button-ghost { color:var(--muted); background:transparent; }.button-primary { color:#fff; background:var(--coral); box-shadow:0 4px 0 #d85f51; }.button-primary:hover { background:var(--coral-dark); }.button:disabled { cursor:default; opacity:.45; transform:none; }
@media (max-width:650px) { .game-shell { width:min(100% - 22px,520px); padding-top:22px; }.topbar { margin-bottom:34px; }.play-area { grid-template-columns:1fr; gap:25px; padding:20px 16px 25px; border-radius:22px; }.sticker-card { min-height:170px; }.cat-sticker { font-size:82px; }.intro-row { align-items:center; }.instruction { max-width:240px; font-size:14px; }.score { padding:8px 11px; }.actions { flex-wrap:wrap; }.button-primary { order:-1; width:100%; }.button-secondary,.button-ghost { flex:1; } }