/* juicyblox — тёмная «сочная» тема приложения: неон, стекло, живые пятна. */
:root{
  --pink:#ff2f6d;--pink2:#ff7a3d;--lime:#9dff3c;--gold:#ffc53d;
  --ink:#fff3f8;--dim:#c9a7b8;--bg:#13050e;
  --glass:rgba(255,255,255,.09);--glass2:rgba(255,255,255,.05);
  --line:rgba(255,255,255,.16);--r:20px;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;color:var(--ink);background:var(--bg);overflow-x:hidden;
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-tap-highlight-color:transparent;
}
body::before{
  content:"";position:fixed;inset:-25%;z-index:-2;
  background:
    radial-gradient(38% 32% at 12% 18%,rgba(255,47,109,.55),transparent 62%),
    radial-gradient(34% 30% at 88% 12%,rgba(255,150,40,.42),transparent 62%),
    radial-gradient(42% 38% at 74% 86%,rgba(126,60,255,.45),transparent 62%),
    radial-gradient(30% 28% at 16% 88%,rgba(60,255,150,.28),transparent 62%);
  filter:blur(26px);animation:drift 24s ease-in-out infinite alternate;
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle at 50% 0,rgba(255,255,255,.07),transparent 58%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 46px);
  mix-blend-mode:screen;
}
@keyframes drift{
  from{transform:translate3d(-2%,-1%,0) scale(1.04)}
  to{transform:translate3d(3%,2%,0) scale(1.14)}
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes pop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}

/* ---------- верхняя панель ---------- */
#bar{
  position:sticky;top:0;z-index:5;display:flex;gap:8px;align-items:center;
  justify-content:space-between;padding:10px 14px;font-size:12.5px;
  background:linear-gradient(180deg,rgba(19,5,14,.94),rgba(19,5,14,.6));
  border-bottom:1px solid var(--line);backdrop-filter:blur(14px);
}
#bar span{display:flex;gap:6px;align-items:center;color:var(--dim);white-space:nowrap}
#bar b{color:#fff;font-size:14px}
#bar #whoami{opacity:.75;overflow:hidden;text-overflow:ellipsis;max-width:34vw}

/* ---------- каркас ---------- */
main{padding:14px 14px 48px;max-width:560px;margin:0 auto}
h2{font-size:13px;margin:20px 0 10px;color:var(--dim);text-transform:uppercase;
   letter-spacing:1.2px;font-weight:800}
p{margin:8px 0}

/* ---------- шапка ---------- */
.hero{
  position:relative;margin:6px 0 18px;padding:20px 18px 18px;overflow:hidden;
  border:1px solid var(--line);border-radius:26px;
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(255,47,109,.42),transparent 62%),
    radial-gradient(120% 90% at 100% 10%,rgba(255,150,40,.3),transparent 60%),
    linear-gradient(160deg,var(--glass),var(--glass2));
  box-shadow:0 26px 50px -26px rgba(255,47,109,.75);
}
.hero::after{
  content:"";position:absolute;right:-34px;bottom:-44px;width:172px;height:172px;
  border-radius:50%;filter:blur(6px);animation:float 6s ease-in-out infinite;
  background:radial-gradient(circle at 35% 35%,rgba(157,255,60,.5),transparent 62%);
}
.logo{font-size:34px;font-weight:900;line-height:1;letter-spacing:-.5px}
.logo b{display:inline-block;
  background:linear-gradient(100deg,var(--pink),var(--pink2),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.tag{margin-top:8px;font-size:14px;color:var(--dim);max-width:88%}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;position:relative;z-index:1}
.chip{padding:7px 12px;border-radius:999px;font-size:13px;font-weight:700;color:#fff;
  border:1px solid var(--line);background:rgba(0,0,0,.3)}
.chip.gold{border-color:rgba(255,197,61,.55);box-shadow:0 0 20px -6px rgba(255,197,61,.85)}
.chip.lime{color:var(--lime);border-color:rgba(157,255,60,.45)}

/* ---------- кнопки ---------- */
button{
  display:flex;align-items:center;justify-content:center;width:100%;margin:9px 0;padding:15px 18px;font:inherit;font-weight:800;
  color:#fff;border:0;border-radius:16px;position:relative;overflow:hidden;
  background:linear-gradient(120deg,var(--pink),var(--pink2));
  box-shadow:0 16px 30px -16px rgba(255,47,109,.95),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .12s ease,box-shadow .12s ease;
}
button::after{
  content:"";position:absolute;top:0;left:-40%;width:38%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-18deg);animation:shine 4.5s ease-in-out infinite;
}
@keyframes shine{0%,62%{left:-40%}88%,100%{left:120%}}
button:active{transform:translateY(1px) scale(.995)}
button.ghost{
  color:var(--ink);background:linear-gradient(160deg,var(--glass),var(--glass2));
  border:1px solid var(--line);box-shadow:none;font-weight:700;
}
button.ghost::after{display:none}
button.mini{padding:11px 14px;font-size:14px;border-radius:14px}
button:disabled{opacity:.62;filter:saturate(.5);box-shadow:none}
button:disabled::after{display:none}
button svg{width:19px;height:19px;flex:none;margin-right:9px}
a{color:var(--pink2)}

/* ---------- поля ввода ---------- */
input{
  width:100%;padding:15px;font:16px/1.4 ui-monospace,SFMono-Regular,monospace;color:#fff;
  border:1px solid var(--line);border-radius:16px;background:rgba(0,0,0,.34);
}
input::placeholder{color:#8e6f80}
input:focus{outline:0;border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,47,109,.25)}

/* ---------- панели и сообщения ---------- */
.card{
  padding:14px;margin:11px 0;border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(160deg,var(--glass),var(--glass2));
  box-shadow:0 20px 40px -26px rgba(0,0,0,.9);
}
.msg{margin:11px 0;padding:12px 14px;border-radius:14px;font-size:14px;
  border:1px solid var(--line);background:rgba(0,0,0,.3)}
.ok{background:rgba(60,255,150,.14);border-color:rgba(60,255,150,.4);color:#c6ffdd}
.bad{background:rgba(255,47,109,.16);border-color:rgba(255,47,109,.45);color:#ffd0dd}
.warn{background:rgba(255,197,61,.14);border-color:rgba(255,197,61,.42);color:#ffe8b8}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.stat{padding:12px;border-radius:16px;border:1px solid var(--line);
  background:linear-gradient(160deg,var(--glass),var(--glass2))}
.stat i{display:block;font-style:normal;font-size:12px;color:var(--dim)}
.stat b{font-size:21px;line-height:1.25}

/* ---------- альбом ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.slot{
  aspect-ratio:1;display:flex;flex-direction:column;gap:3px;align-items:center;
  justify-content:center;padding:4px;border-radius:16px;text-align:center;overflow:hidden;
  font-size:10.5px;color:#9c7c8d;border:1px dashed rgba(255,255,255,.2);
  background:rgba(0,0,0,.28);
}
.slot img{width:78%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55))}
.slot.have{
  color:#fff;border:1px solid rgba(255,47,109,.6);
  background:radial-gradient(circle at 50% 20%,rgba(255,47,109,.32),rgba(0,0,0,.3));
  box-shadow:0 14px 30px -18px rgba(255,47,109,.95);
}
.slot.dupe{border-color:rgba(255,197,61,.65) !important;
  background:radial-gradient(circle at 50% 20%,rgba(255,197,61,.3),rgba(0,0,0,.3)) !important}
.slot span{line-height:1.15}

/* ---------- экран раунда ---------- */
#hud2{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:10px 0;font-size:14px}
#hud2 b{font-size:18px}
#hud2 .t{color:var(--gold)}
#frame{
  width:100%;height:74vh;border:0;border-radius:22px;background:#0d0409;
  box-shadow:0 30px 60px -30px rgba(255,47,109,.9),0 0 0 1px var(--line);
}

/* ---------- итог раунда ---------- */
#result{
  position:fixed;inset:0;z-index:9;padding:26px;display:flex;flex-direction:column;
  justify-content:center;text-align:center;background:rgba(10,3,8,.94);
  backdrop-filter:blur(10px);
}
#result .big{font-size:40px;font-weight:900;margin:8px 0;
  background:linear-gradient(100deg,var(--pink),var(--pink2),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.pop{animation:pop .18s ease-out}

/* ---------- рейтинг и призы ---------- */
.rt{width:100%;border-collapse:separate;border-spacing:0 6px;font-size:14px}
.rt td{padding:9px 8px;vertical-align:middle;background:rgba(255,255,255,.055)}
.rt td:first-child{border-radius:12px 0 0 12px;width:30px;text-align:center;font-weight:800}
.rt td:last-child{border-radius:0 12px 12px 0}
.rt tr.me td{background:rgba(255,47,109,.22);color:#fff;font-weight:700}
.rt tr:nth-child(1) td:first-child{color:var(--gold)}
.rt tr:nth-child(2) td:first-child{color:#dfe3ec}
.rt tr:nth-child(3) td:first-child{color:#e3a273}
.bar{height:7px;border-radius:4px;background:rgba(255,255,255,.14);min-width:26px}
.bar i{display:block;height:7px;border-radius:4px;
  background:linear-gradient(90deg,var(--pink),var(--pink2))}
.tile{display:flex;gap:11px;align-items:center;margin:9px 0;padding:12px;
  border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(160deg,var(--glass),var(--glass2))}
.tile .emoji{font-size:26px}
.ruleslink{display:block;margin:18px 0 4px;text-align:center;font-size:14px;
  color:var(--dim);text-decoration:none;border-bottom:1px dotted rgba(255,255,255,.25)}
.hide{display:none!important}

@media (max-width:360px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

.hero .art{position:absolute;right:6px;top:10px;width:106px;height:106px;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.5));z-index:0;
  animation:float 7s ease-in-out infinite}
.hero .logo,.hero .tag{position:relative;z-index:1}
.hero .tag{max-width:72%}

/* ---------- окно сканера ---------- */
#scan{position:fixed;inset:0;z-index:20;background:rgba(8,2,7,.92);
  backdrop-filter:blur(8px);display:flex;align-items:center;
  justify-content:center;padding:18px}
.scanbox{width:100%;max-width:420px;text-align:center}
.scanwrap{position:relative;border-radius:20px;overflow:hidden;
  box-shadow:0 0 0 2px var(--pink),0 24px 50px -26px rgba(255,47,109,.9)}
#scanvid{width:100%;display:block;background:#000}
.scanline{position:absolute;left:8%;right:8%;height:2px;top:6%;
  background:linear-gradient(90deg,transparent,var(--lime),transparent);
  animation:scanmove 2.2s ease-in-out infinite}
@keyframes scanmove{from{top:6%}to{top:94%}}
#scanHint{margin-top:14px}
/* ---------- фон и шапка из игры ---------- */
body{
  background-image:
    linear-gradient(rgba(19,5,14,.74),rgba(19,5,14,.88)),
    url("play-assets/bg_page.webp");
  background-size:cover;background-position:center;background-attachment:fixed;
}
.hero{
  background-image:
    linear-gradient(rgba(20,6,15,.28),rgba(20,6,15,.82)),
    url("play-assets/splash.webp");
  background-size:cover;background-position:center 30%;
}
.hero .logo,.hero .tag,.hero .chips{position:relative;z-index:2}
.hero .logo,.hero .tag{text-shadow:0 3px 16px rgba(0,0,0,.8)}
.hero .art{display:none}

/* читаемость мелких подписей на пёстром фоне игры */
:root{--dim:#e6c9d8}
.hero .tag{color:#f0d6e2;text-shadow:0 2px 12px rgba(0,0,0,.9)}
.ruleslink,.rl{color:#ffd9e6 !important;text-shadow:0 2px 10px rgba(0,0,0,.9)}
#bar span,#bar b{text-shadow:0 1px 8px rgba(0,0,0,.85)}

/* ===== светлая «игрушечная» тема (Roblox/Minecraft) ===== */
:root{
  --pink:#ff3d7f;--pink2:#ff9a3d;--lime:#5fbf1f;--gold:#ffb703;
  --ink:#2b2140;--dim:#6f6486;--bg:#cdeaff;
  --glass:rgba(255,255,255,.95);--glass2:rgba(255,255,255,.82);
  --line:rgba(43,33,64,.14);--r:22px;
}
body{
  color:var(--ink);
  background-color:#cdeaff;
  background-image:
    linear-gradient(rgba(255,255,255,.30),rgba(255,255,255,.66)),
    url("play-assets/bg_page.webp");
  background-size:cover;background-position:center;background-attachment:fixed;
}
body::before{
  content:"";position:fixed;inset:-10%;z-index:-2;filter:blur(14px);
  background:
    radial-gradient(30% 24% at 10% 12%,rgba(255,214,102,.8),transparent 60%),
    radial-gradient(26% 22% at 88% 8%,rgba(126,224,255,.75),transparent 60%),
    radial-gradient(34% 28% at 76% 88%,rgba(140,235,120,.65),transparent 62%),
    radial-gradient(26% 22% at 14% 86%,rgba(255,160,200,.6),transparent 62%);
  animation:drift 26s ease-in-out infinite alternate;
}
body::after{
  background:
    repeating-linear-gradient(90deg,rgba(43,33,64,.05) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(0deg,rgba(43,33,64,.05) 0 1px,transparent 1px 46px);
  mix-blend-mode:multiply;
}
#bar{background:rgba(255,255,255,.93);border-bottom:2px solid rgba(43,33,64,.12);backdrop-filter:blur(10px)}
#bar span{color:#6f6486;text-shadow:none}
#bar b{color:#2b2140;text-shadow:none}
h2{color:#5f5478}
.hero{
  border:3px solid #2b2140;border-radius:26px;
  background-image:
    linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.58)),
    url("play-assets/splash.webp");
  background-size:cover;background-position:center 30%;
  box-shadow:0 8px 0 0 rgba(43,33,64,.18),0 26px 40px -26px rgba(43,33,64,.55);
}
.hero .logo,.hero .tag{text-shadow:0 2px 12px rgba(255,255,255,.95)}
.hero .tag{color:#3b2f52}
.hero::after{background:radial-gradient(circle at 35% 35%,rgba(95,191,31,.5),transparent 62%)}
.tag{color:#5f5478}

/* ===== светлые карточки, кнопки и поля ===== */
button{
  color:#fff;border-radius:18px;
  background:linear-gradient(180deg,#ff5f9e,#f5326f);
  box-shadow:0 6px 0 0 #b81b4d,0 14px 22px -14px rgba(43,33,64,.5);
  text-shadow:0 1px 0 rgba(0,0,0,.18);
}
button::after{display:none}
button:active{transform:translateY(4px);box-shadow:0 2px 0 0 #b81b4d}
button.ghost{color:#2b2140;background:#fff;border:3px solid #2b2140;
  box-shadow:0 5px 0 0 rgba(43,33,64,.85)}
button.ghost:active{transform:translateY(3px);box-shadow:0 2px 0 0 rgba(43,33,64,.85)}
button:disabled{opacity:.55;filter:none;box-shadow:0 6px 0 0 rgba(43,33,64,.22)}
input{color:#2b2140;background:#fff;border:3px solid rgba(43,33,64,.2)}
input::placeholder{color:#9b93ad}
input:focus{border-color:#ff3d7f;box-shadow:0 0 0 3px rgba(255,61,127,.2)}
.card{background:#fff;border:3px solid #2b2140;border-radius:22px;
  box-shadow:0 7px 0 0 rgba(43,33,64,.16),0 20px 34px -24px rgba(43,33,64,.5)}
.msg{background:#fff;border:3px solid rgba(43,33,64,.16);color:#2b2140}
.ok{background:#eaffda;border-color:#5fbf1f;color:#2f6b12}
.bad{background:#ffe6ee;border-color:#ff3d7f;color:#b81b4d}
.warn{background:#fff5d6;border-color:#ffb703;color:#8a6100}
.stat{background:#fff;border:3px solid rgba(43,33,64,.14)}
.stat i{color:#6f6486}
.stat b{color:#2b2140}
.slot{background:rgba(255,255,255,.92);border:3px dashed rgba(43,33,64,.22);color:#6f6486}
.slot img{filter:drop-shadow(0 4px 6px rgba(43,33,64,.28))}
.slot.have{color:#2b2140;border:3px solid #5fbf1f;
  background:radial-gradient(circle at 50% 20%,#f3ffe8,#fff);
  box-shadow:0 6px 0 0 rgba(95,191,31,.35)}
.slot.dupe{border-color:#ffb703 !important;
  background:radial-gradient(circle at 50% 20%,#fff7dd,#fff) !important}
#frame{background:#bfe4ff;
  box-shadow:0 9px 0 0 rgba(43,33,64,.2),0 30px 50px -30px rgba(43,33,64,.5),0 0 0 3px #2b2140}
.chip{color:#2b2140;background:#fff;border:2px solid rgba(43,33,64,.16)}
.chip.gold{border-color:#ffb703;box-shadow:0 5px 0 -1px rgba(255,183,3,.45)}
.chip.lime{color:#2f6b12;border-color:#5fbf1f}
.ruleslink,.rl{color:#b81b4d !important;text-shadow:none !important}

/* ===== небо, пиксельные облака и блочность (майнкрафт-настроение) ===== */
#clouds{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:url("game/assets/clouds.png") repeat;
  background-size:460px auto;
  animation:clouds 150s linear infinite;
  opacity:.92;image-rendering:pixelated;
}
@keyframes clouds{from{background-position:0 0}to{background-position:460px 0}}
body{
  background-image:
    linear-gradient(rgba(196,231,255,.40),rgba(228,247,255,.74)),
    url("play-assets/bg_page.webp");
}
:root{--r:10px}
.hero{border-radius:14px}
.card{border-radius:14px}
button{border-radius:12px}
button.mini{border-radius:10px}
.slot{border-radius:10px}
#frame{border-radius:12px}
.stat{border-radius:12px}
.msg{border-radius:10px}

/* ===== блоки-кнопки в стиле Minecraft/Roblox, меньше розового ===== */
body::before{
  background:
    radial-gradient(30% 24% at 10% 12%,rgba(255,255,255,.88),transparent 60%),
    radial-gradient(28% 22% at 86% 10%,rgba(152,214,255,.8),transparent 60%),
    radial-gradient(34% 28% at 76% 88%,rgba(142,222,120,.58),transparent 62%),
    radial-gradient(26% 22% at 14% 86%,rgba(196,236,255,.78),transparent 62%);
}
.hero{
  background-image:
    linear-gradient(rgba(226,244,255,.22),rgba(210,238,255,.62)),
    url("play-assets/splash.webp");
}
h2{color:#4a5b6b}
button{
  border-radius:6px;color:#fff;
  background:linear-gradient(180deg,#68ce29,#3f9a1c);
  border:3px solid #1b2a10;
  box-shadow:0 6px 0 0 #276b12,inset 0 3px 0 rgba(255,255,255,.38),inset 0 -4px 0 rgba(0,0,0,.16);
  text-transform:uppercase;letter-spacing:.5px;font-weight:900;
  text-shadow:0 2px 0 rgba(0,0,0,.35);
}
button:active{transform:translateY(4px);
  box-shadow:0 2px 0 0 #276b12,inset 0 3px 0 rgba(255,255,255,.3)}
button.ghost{
  color:#22303a;border:3px solid #24303a;text-shadow:none;letter-spacing:.4px;
  background:linear-gradient(180deg,#ffffff,#e4ebf1);
  box-shadow:0 6px 0 0 #b7c5d0,inset 0 3px 0 rgba(255,255,255,.95),inset 0 -4px 0 rgba(0,0,0,.07);
}
button.ghost:active{transform:translateY(4px);box-shadow:0 2px 0 0 #b7c5d0}
button.mini{border-radius:6px}
.card{border-radius:8px}
.stat{border-radius:8px}
.slot{border-radius:8px}
.chip{border-radius:6px;border-width:2px}
.msg{border-radius:8px}
#frame{border-radius:10px}
.hero{border-radius:10px}
input{border-radius:6px}

/* ===== финальная блочность: квадратные углы и ступенчатая заливка ===== */
button{
  border-radius:2px;
  background:repeating-linear-gradient(180deg,#6ed32d 0 5px,#5cba21 5px 10px);
  border:4px solid #182a0c;border-top-color:#2f5216;border-left-color:#2f5216;
  box-shadow:0 6px 0 0 #245f10,inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(0,0,0,.22);
}
button.ghost{
  background:repeating-linear-gradient(180deg,#ffffff 0 5px,#e9eff4 5px 10px);
  border:4px solid #1f2c36;border-top-color:#55656f;border-left-color:#55656f;
  box-shadow:0 6px 0 0 #aebcc7,inset 0 2px 0 rgba(255,255,255,.95),inset 0 -3px 0 rgba(0,0,0,.08);
}
button.mini{border-radius:2px;border-width:3px}
.card{border-radius:4px}
.stat{border-radius:4px}
.msg{border-radius:4px}
.slot{border-radius:4px}
.chip{border-radius:2px}
.hero{border-radius:6px}
#frame{border-radius:4px}
input{border-radius:2px}
#bar{border-bottom:3px solid #1f2c36}

/* ===== пиксельный шрифт и блочные плашки ===== */
@font-face{
  font-family:'JBpixel';
  src:url("game/assets/pixel.ttf") format("truetype");
  font-display:swap;
}
button,.logo,h2,.chip,.stat b,#bar b,#hud2 b{
  font-family:'JBpixel',system-ui,-apple-system,sans-serif;
  font-weight:500;
}
button{letter-spacing:.7px;font-size:1.06em}
h2{letter-spacing:1.4px;font-size:15px}
.chip{padding:6px 10px;font-size:14px;background:#fff;
  border:3px solid #1f2c36;box-shadow:0 3px 0 0 rgba(31,44,54,.35)}
.chip.gold{border-color:#1f2c36;box-shadow:0 3px 0 0 #ffb703}
.chip.lime{color:#1f6b12;border-color:#1f2c36;box-shadow:0 3px 0 0 #5fbf1f}
.msg{border-width:3px;border-color:#1f2c36}
.warn{background:#fff4cf;color:#6b4b00}
.bad{background:#ffe3ec;color:#8f1440}
.ok{background:#e7ffd8;color:#265c0d}
.logo{letter-spacing:.5px}

/* ===== плоская зелёная кнопка и плотные иконки ===== */
button{
  background:linear-gradient(180deg,#5fc92a 0 50%,#4fae1f 50% 100%);
  box-shadow:0 6px 0 0 #245f10,inset 0 3px 0 rgba(255,255,255,.5),inset 0 -4px 0 rgba(0,0,0,.18);
}
button svg{width:20px;height:20px;stroke-width:2.6}
button svg *{stroke-width:2.6}
button.ghost svg *{stroke-width:2.4}

/* ===== альбом: крупные плитки и цифра в углу ===== */
main{max-width:none;padding:12px 10px 42px}
.grid{grid-template-columns:repeat(3,1fr);gap:10px}
.slot{position:relative;padding:6px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.slot img{width:100%;height:100%;object-fit:contain}
.slot:not(.have) img{opacity:.45}
.slot .num{position:absolute;top:3px;right:4px;min-width:24px;padding:1px 5px;
  border:2px solid #2b2140;border-radius:8px;background:#fff;color:#2b2140;
  font-family:'JBpixel',system-ui,sans-serif;font-size:16px;line-height:1.3;text-align:center}
.slot.have .num{background:#5fbf1f;color:#fff;border-color:#1d2b12}
#frame{height:82vh}
@media (min-width:620px){.grid{grid-template-columns:repeat(4,1fr)}}

/* ===== облака: анимация только трансформом, иначе телефон не успевает играть музыку ===== */
#clouds{
  position:fixed;top:0;left:0;height:100vh;width:200vw;z-index:-1;pointer-events:none;
  background:url("game/assets/clouds.png") repeat;background-size:460px auto;opacity:.9;
  image-rendering:auto;will-change:transform;transform:translate3d(0,0,0);
  animation:clouds 150s linear infinite;
}
@keyframes clouds{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-460px,0,0)}
}

/* ===== цифра-счётчик в углу плитки: крупнее и однозначнее ===== */
.slot .num{
  top:4px;right:5px;min-width:30px;padding:2px 6px;font-size:20px;line-height:1.25;
  border:3px solid #2b2140;border-radius:9px;background:#fff;color:#2b2140;
  box-shadow:0 3px 0 0 rgba(43,33,64,.25);
}
.slot:not(.have) .num{background:#f2f5f8;color:#7a7191}
.slot.have .num{background:#5fbf1f;color:#fff;border-color:#1d2b12}