/* Волпень — веб-приложение. Токены и компоненты взяты из landing/index.html */
:root{
  --band:#1170cc; --band-2:#0b57ad; --band-edge:#06306f;
  --night:#140b33; --night-2:#0d0726; --plum:#2a1458; --violet:#4a2183;
  --cyan:#38d3ff; --pink:#d24dff;
  --gold:#e2c27a; --gold-2:#b8914a; --gold-3:#f6e2a8;
  --paper:#f6f0ea; --paper-2:#e6d3e2; --paper-ink:#2b1d2f;
  --text:#f1ecff; --muted:#bdb2df; --danger:#ff7a9a;
  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Manrope", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --paper-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .32 0 0 0 0 .26 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --corner:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0l2.6 7.4L20 10l-7.4 2.6L10 20l-2.6-7.4L0 10l7.4-2.6z' fill='%23e2c27a'/%3E%3C/svg%3E");
  --nav-h:72px;
}
*{box-sizing:border-box;}
html,body{margin:0; height:100%;}
body{font-family:var(--sans); color:var(--text); line-height:1.55; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
  background:radial-gradient(900px 600px at 20% 0%, rgba(74,33,131,.6), transparent 70%), var(--night-2);}
img{max-width:100%; display:block;}
a{color:var(--gold-3);}
button{font:inherit; color:inherit;}
h1,h2,h3{font-family:var(--serif); font-weight:700; line-height:1.1; margin:0; color:#fff;}
h2{font-size:30px;} h3{font-size:22px;}
p{margin:0 0 12px;}
[hidden]{display:none !important;}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px;}

/* ===== каркас: колонка телефона ===== */
.app{position:relative; isolation:isolate; max-width:480px; min-height:100dvh; margin:0 auto; display:flex; flex-direction:column;
  box-shadow:0 0 0 1px rgba(226,194,122,.18), 0 0 80px rgba(0,0,0,.6);}
/* фон из макета: орнамент закреплён на экране (iOS не умеет background-attachment:fixed, поэтому отдельный слой) */
.app::before{content:""; position:fixed; z-index:-1; top:0; bottom:0; left:0; right:0; width:100%; max-width:480px; margin:0 auto; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,11,51,.08) 0%, rgba(20,11,51,.42) 34%, rgba(16,8,42,.78) 70%, rgba(13,7,38,.9) 100%), url("assets/bg-ornament.webp") center top/cover, var(--night);}

.topbar{position:relative; z-index:5; background:linear-gradient(180deg,var(--band-2),var(--band)); text-align:center; padding:calc(6px + env(safe-area-inset-top)) 16px 2px;}
.topbar .arc{display:block; width:78%; max-width:330px; height:auto; margin:0 auto -6px; overflow:visible;}
.topbar .arc text{font-family:var(--serif); font-weight:600; font-size:56px; fill:#fff; letter-spacing:1px;}
.topbar .wm{height:40px; width:auto; margin:0 auto; filter:drop-shadow(0 3px 0 rgba(6,48,111,.5));}
.scallop{display:block; width:100%; height:34px; margin-top:-1px; position:relative; z-index:4;}
.app.is-login .topbar, .app.is-login .scallop.top{display:none;}

.screens{flex:1; position:relative; padding:4px 16px calc(var(--nav-h) + 24px);}
.app.is-login .screens{padding-top:0; padding-bottom:28px;}
.screen{animation:fade .35s ease;}
@keyframes fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

/* ===== нижнее меню ===== */
.tabbar{position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:480px; height:var(--nav-h); z-index:20;
  display:grid; grid-template-columns:repeat(4,1fr); padding:0 6px env(safe-area-inset-bottom);
  background:linear-gradient(180deg, rgba(23,12,58,.92), rgba(13,7,38,.98)); border-top:1px solid rgba(226,194,122,.35); backdrop-filter:blur(10px);}
.tabbar a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-decoration:none; color:var(--muted); font-size:11.5px; font-weight:700; letter-spacing:.02em;}
.tabbar svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.tabbar a.active{color:#fff;}
.tabbar a.active svg{stroke:var(--cyan); filter:drop-shadow(0 0 6px rgba(56,211,255,.9));}
.app.is-login .tabbar{display:none;}

/* ===== кнопки ===== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; text-decoration:none; font-weight:700; font-size:17px; padding:14px 26px; border-radius:14px; color:#fff; cursor:pointer;
  border:2px solid transparent;
  background:linear-gradient(180deg,#183584,#0c1b52) padding-box, linear-gradient(90deg,var(--cyan),var(--pink)) border-box;
  box-shadow:0 0 14px rgba(56,211,255,.45), 0 0 30px rgba(210,77,255,.3), inset 0 0 14px rgba(56,211,255,.22);
  text-shadow:0 0 10px rgba(56,211,255,.55); transition:transform .15s, box-shadow .2s, opacity .2s;}
.btn:active{transform:scale(.98);}
.btn:disabled{opacity:.45; cursor:not-allowed; box-shadow:none;}
.btn.gold{color:var(--gold-3); text-shadow:none; box-shadow:0 8px 22px rgba(0,0,0,.3);
  background:linear-gradient(180deg,rgba(42,22,86,.9),rgba(28,14,62,.9)) padding-box, linear-gradient(135deg,var(--gold-3),var(--gold-2) 50%,var(--gold-3)) border-box;}
.btn.block{width:100%;}
.btn.small{padding:9px 16px; font-size:14px; border-radius:11px;}
.btn.ghost{background:none; border:1px solid rgba(189,178,223,.35); box-shadow:none; text-shadow:none; color:var(--muted);}
.link-btn{background:none; border:0; padding:0; color:var(--gold-3); text-decoration:underline; cursor:pointer; font-size:14px;}
.link-btn:disabled{color:var(--muted); text-decoration:none; cursor:default;}
.btn-col{display:flex; flex-direction:column; gap:12px;}
.soon{font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; padding:3px 7px; border-radius:6px; background:rgba(226,194,122,.18); color:var(--gold-3); text-shadow:none;}

/* ===== золотая рамка ===== */
.frame{position:relative; border-radius:18px; border:1px solid rgba(226,194,122,.75); padding:26px 22px;
  background:linear-gradient(180deg,rgba(46,24,96,.94),rgba(24,12,58,.96));
  box-shadow:inset 0 0 0 6px rgba(20,11,51,.85), inset 0 0 0 7px rgba(226,194,122,.35), 0 20px 44px rgba(0,0,0,.4);}
.frame::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--corner) top 13px left 13px/11px no-repeat, var(--corner) top 13px right 13px/11px no-repeat, var(--corner) bottom 13px left 13px/11px no-repeat, var(--corner) bottom 13px right 13px/11px no-repeat;}
.orn{display:flex; align-items:center; justify-content:center; gap:10px; color:var(--gold); margin:10px auto 16px; font-size:13px;}
.orn::before,.orn::after{content:""; height:1px; width:60px; background:linear-gradient(90deg,transparent,var(--gold));}
.orn::after{background:linear-gradient(270deg,transparent,var(--gold));}
.eyebrow{font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--cyan); text-shadow:0 0 12px rgba(56,211,255,.5);}
.screen-head{text-align:center; margin:6px 0 18px;}
.muted{color:var(--muted);}
.small{font-size:13px;}

/* ===== бумажная карта ===== */
.paper-card{border-radius:16px; color:var(--paper-ink); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:12% 10%;
  /* бумага из макета: текстура с волокнами и сиреневый оттенок книзу */
  background:linear-gradient(180deg, rgba(246,240,234,0) 0%, rgba(240,230,230,.25) 55%, rgba(214,182,214,.75) 100%), url("assets/paper.webp") center/cover, var(--paper);
  box-shadow:0 24px 50px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.6), inset 0 -30px 60px rgba(150,90,150,.12);
  container-type:inline-size;}
.paper-card .label{font-family:var(--sans); font-size:max(10px,5cqw); font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:#8a6a8e; margin-bottom:7cqw;}
.paper-card .label::before,.paper-card .label::after{content:"✦"; margin:0 .6em; color:var(--gold-2);}
.paper-card q{font-family:var(--serif); font-weight:600; font-size:11.5cqw; line-height:1.17; quotes:none;}

/* ===== вход ===== */
.login-hero{text-align:center; margin:0 -16px 8px; background:linear-gradient(180deg,var(--band-2),var(--band)); padding:calc(18px + env(safe-area-inset-top)) 16px 0;}
.login-hero .arc{width:100%; max-width:400px; height:auto; display:block; margin:0 auto -4px; overflow:visible;}
.login-hero .arc text{font-family:var(--serif); font-weight:600; font-size:56px; fill:#fff; letter-spacing:1px;}
.login-hero .big-wm{width:72%; max-width:300px; margin:0 auto; filter:drop-shadow(0 4px 0 rgba(6,48,111,.55));}
.login-scallop{display:block; width:calc(100% + 32px); margin:-1px -16px 6px; height:40px;}
.login .neon-emblem{width:120px; height:120px; margin:0 auto 6px; border-radius:50%; -webkit-mask-image:radial-gradient(circle,#000 52%,transparent 71%); mask-image:radial-gradient(circle,#000 52%,transparent 71%);}
.field{display:block; margin-bottom:16px; text-align:left;}
.field span{display:block; font-size:13px; font-weight:700; color:var(--muted); margin-bottom:6px; letter-spacing:.02em;}
.input{width:100%; font:inherit; font-size:17px; color:#fff; padding:13px 14px; border-radius:12px; border:1px solid rgba(189,178,223,.35); background:rgba(8,4,24,.55); outline:none; transition:border-color .2s, box-shadow .2s;}
.input:focus{border-color:var(--cyan); box-shadow:0 0 0 3px rgba(56,211,255,.18);}
.input.code{letter-spacing:.6em; text-align:center; font-size:26px; font-weight:700; padding-left:.6em;}
.check{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--muted); margin:4px 0 20px; text-align:left;}
.check input{width:18px; height:18px; margin-top:2px; accent-color:var(--cyan); flex:none;}
.check + .check{margin-top:-10px;}
.error{color:var(--danger); font-size:14px; min-height:20px; margin:-6px 0 10px; text-align:left;}
.hint-box{font-size:13px; color:var(--gold-3); background:rgba(226,194,122,.1); border:1px dashed rgba(226,194,122,.45); border-radius:10px; padding:8px 12px; margin-bottom:16px;}
.disclaimer{font-size:12px; color:var(--muted); opacity:.8; text-align:center; margin-top:18px; line-height:1.45;}

/* ===== игра ===== */
.attempts{display:flex; align-items:center; justify-content:center; gap:10px; margin:2px auto 8px; font-size:14px; color:var(--muted);}
.dots{display:flex; gap:6px;}
.dots i{width:12px; height:12px; border-radius:50%; border:1.5px solid var(--gold); display:block;}
.dots i.on{background:radial-gradient(circle at 40% 35%, var(--gold-3), var(--gold-2)); box-shadow:0 0 8px rgba(226,194,122,.6);}
.dots i.extra{border-color:var(--cyan);} .dots i.extra.on{background:radial-gradient(circle at 40% 35%, #b9f0ff, var(--cyan)); box-shadow:0 0 8px rgba(56,211,255,.7);}

.stage{position:relative; height:360px; transition:height .4s ease; margin:4px auto 0; display:grid; place-items:center; user-select:none; -webkit-user-select:none; touch-action:manipulation;}
.deck{position:relative; width:180px; aspect-ratio:3/4;}
.deck .back{position:absolute; inset:0; border-radius:12px; overflow:hidden; box-shadow:0 14px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(226,194,122,.55); transition:transform .5s cubic-bezier(.3,.7,.2,1), opacity .35s ease;}
.deck .back img{width:100%; height:100%; object-fit:cover;}
/* до старта четыре стихии лежат сеткой 2×2, как в макете; при тасовке съезжаются в веер */
.deck .back[data-el="fire"]{transform:translate(-57px,-75px) scale(.58);}
.deck .back[data-el="earth"]{transform:translate(57px,-75px) scale(.58);}
.deck .back[data-el="air"]{transform:translate(-57px,75px) scale(.58);}
.deck .back[data-el="water"]{transform:translate(57px,75px) scale(.58);}
.stage[data-state="idle"]{height:296px;}
.stage[data-state="idle"] .deck{cursor:pointer;}
/* тасовка: карты раскладываются веером и меняются местами (позиции задаёт app.js) */
.deck.live .back{transition:none;}
.stage[data-state="shuffling"]{cursor:pointer;}
.stage[data-state="shuffling"] .deck{filter:drop-shadow(0 0 14px rgba(56,211,255,.35));}
@keyframes pulse{0%,100%{filter:drop-shadow(0 0 6px rgba(56,211,255,.4));} 50%{filter:drop-shadow(0 0 22px rgba(56,211,255,.9)) drop-shadow(0 0 30px rgba(210,77,255,.5));}}
.stage[data-state="picked"] .deck, .stage[data-state="result"] .deck, .stage[data-state="limit"] .deck{display:none;}

.ring{position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:64px; height:64px; display:none;}
.stage[data-state="shuffling"] .ring{display:block;}
.ring svg{width:100%; height:100%; transform:rotate(-90deg);}
.ring circle{fill:none; stroke-width:4;}
.ring .track{stroke:rgba(189,178,223,.2);}
.ring .bar{stroke:url(#ringGrad); stroke-linecap:round; stroke-dasharray:176; stroke-dashoffset:176; filter:drop-shadow(0 0 4px rgba(56,211,255,.8));}
.ring b{position:absolute; inset:0; display:grid; place-items:center; font-size:20px; font-weight:800;}
.stage[data-state="shuffling"] .deck, .stage[data-state="picking"] .deck{margin-bottom:60px;}

.status{text-align:center; min-height:52px; margin:10px 0 14px;}
.status h3{font-size:24px;}
.status p{color:var(--muted); font-size:14.5px; margin:4px 0 0;}

/* выпавшая карта */
.result-card{width:252px; max-width:calc(100vw - 56px); aspect-ratio:3/4; perspective:1200px; display:none; border-radius:14px;}
.stage[data-state="picked"] .result-card, .stage[data-state="result"] .result-card{display:block;}
/* карта рубашкой вверх ждёт касания */
.stage[data-state="picked"] .result-card{cursor:pointer; animation:pulse 1.6s ease-in-out infinite;}
@keyframes deal{from{transform:translateY(-40px) scale(.7); opacity:0;} to{transform:none; opacity:1;}}
.result-card .paper-card{padding:10% 9%;}
.paper-card .detail{display:block; font-family:var(--sans); font-size:max(12px,5.4cqw); line-height:1.38; font-weight:500; color:#5b4560; margin-top:3.5cqw;}
.paper-card .detail::before{content:"✦"; display:block; color:var(--gold-2); font-size:max(10px,4.4cqw); margin-bottom:2.5cqw;}
.paper-card .detail:empty{display:none;}
.paper-card.has-detail q{font-size:10.6cqw;}
.paper-card.has-detail .label{margin-bottom:5cqw;}
.result-card .inner{position:relative; display:block; width:100%; height:100%; transform-style:preserve-3d; transition:transform .8s cubic-bezier(.3,.7,.2,1);}
.result-card.is-flipped .inner{transform:rotateY(180deg);}
.result-card .face{position:absolute; inset:0; border-radius:14px; overflow:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden;}
.result-card .front{box-shadow:0 18px 36px rgba(0,0,0,.5), 0 0 0 1px rgba(226,194,122,.6), 0 0 34px rgba(226,194,122,.35);}
.result-card .front img{width:100%; height:100%; object-fit:cover;}
.result-card .back{transform:rotateY(180deg);}

.actions{display:flex; flex-direction:column; gap:12px; margin-top:6px;}
.actions .row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}

/* лимит */
.limit{display:none; width:100%;}
.stage[data-state="limit"]{height:auto; min-height:300px;}
.stage[data-state="limit"] .limit{display:block;}
.limit .frame{text-align:center;}
.limit .clock{font-family:var(--serif); font-size:44px; font-weight:700; color:var(--gold-3); margin:6px 0 2px; font-variant-numeric:tabular-nums;}

/* debug */
.debug{margin-top:20px; padding:10px 12px; border:1px dashed rgba(56,211,255,.5); border-radius:10px; font-size:12.5px; color:var(--muted); display:flex; flex-wrap:wrap; gap:8px; align-items:center;}

/* ===== списки: дневник, оплаты ===== */
.list{display:flex; flex-direction:column; gap:12px;}
.entry{display:grid; grid-template-columns:54px 1fr auto; gap:14px; align-items:start; padding:12px; border-radius:14px; background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03)); border:1px solid rgba(170,140,255,.22);}
.entry img{width:54px; aspect-ratio:3/4; object-fit:cover; border-radius:6px; box-shadow:0 0 0 1px rgba(226,194,122,.5);}
.entry .meta{font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--gold);}
.entry .meta span{color:var(--muted); font-weight:600; letter-spacing:.02em; text-transform:none; margin-left:6px;}
.entry q{display:block; quotes:none; font-family:var(--serif); font-size:18px; font-weight:600; line-height:1.2; color:#fff; margin-top:3px;}
.entry .del{width:32px; height:32px; border-radius:50%; border:1px solid rgba(189,178,223,.3); background:none; color:var(--muted); cursor:pointer; font-size:18px; line-height:1;}
.entry .del:hover{color:var(--danger); border-color:var(--danger);}
.entry.demo{opacity:.62;}
.badge{display:inline-block; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; padding:2px 7px; border-radius:6px; background:rgba(189,178,223,.16); color:var(--muted); vertical-align:middle;}
.section-title{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:26px 0 12px;}
.section-title h3{font-size:21px;}
.empty{text-align:center; color:var(--muted); padding:26px 16px; border:1px dashed rgba(189,178,223,.3); border-radius:14px;}
.empty .btn{margin-top:14px;}

.balance{text-align:center;}
.balance .sum{font-family:var(--serif); font-size:52px; font-weight:700; line-height:1; margin:6px 0;}
.balance .sum small{font-size:26px; color:var(--muted);}
.kv{display:grid; grid-template-columns:1fr auto; gap:8px 12px; margin:18px 0 20px; text-align:left; font-size:14.5px;}
.kv dt{color:var(--muted);} .kv dd{margin:0; font-weight:700; text-align:right;}
.pay{display:grid; grid-template-columns:1fr auto; gap:2px 12px; padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(170,140,255,.18);}
.pay b{font-weight:700; font-size:15px;} .pay .amt{font-weight:800; color:var(--gold-3); text-align:right;}
.pay .when{font-size:12.5px; color:var(--muted);} .pay .st{font-size:12.5px; text-align:right; color:#7fe3b0;}
.pay.demo{opacity:.6;} .pay.demo .st{color:var(--muted);}

/* профиль */
.profile-head{text-align:center;}
.avatar{width:84px; height:84px; margin:0 auto 12px; border-radius:50%; display:grid; place-items:center; font-family:var(--serif); font-size:40px; font-weight:700; color:var(--gold-3);
  background:radial-gradient(circle at 50% 35%, #3a2280, #170b3a); border:2px solid var(--gold); box-shadow:0 0 0 5px rgba(226,194,122,.14), 0 0 22px rgba(226,194,122,.25);}
.setting{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid rgba(226,194,122,.18);}
.setting:last-child{border-bottom:0;}
.switch{position:relative; width:50px; height:28px; flex:none;}
.switch input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; z-index:1;}
.switch span{position:absolute; inset:0; border-radius:99px; background:rgba(189,178,223,.25); transition:background .2s;}
.switch span::after{content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; transition:transform .2s;}
.switch input:checked + span{background:linear-gradient(90deg,var(--cyan),var(--pink));}
.switch input:checked + span::after{transform:translateX(22px);}
.links{display:flex; flex-direction:column; gap:10px; margin-top:6px; font-size:15px;}

/* тост и модалка */
.toast{position:fixed; left:50%; bottom:calc(var(--nav-h) + 18px); transform:translateX(-50%) translateY(20px); opacity:0; pointer-events:none; z-index:40;
  background:rgba(13,7,38,.95); border:1px solid rgba(56,211,255,.5); color:#fff; padding:10px 18px; border-radius:12px; font-size:14px; box-shadow:0 0 18px rgba(56,211,255,.3); transition:opacity .25s, transform .25s; max-width:90vw; text-align:center;}
.toast.show{opacity:1; transform:translateX(-50%);}
dialog{border:0; padding:0; background:none; color:var(--text); width:min(92vw,400px);}
dialog::backdrop{background:rgba(5,2,15,.7); backdrop-filter:blur(3px);}
dialog .frame{text-align:center;}
dialog .price{font-family:var(--serif); font-size:40px; font-weight:700; color:var(--gold-3); margin:4px 0 8px;}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
}

/* ровные цифры вместо старинных у Cormorant */
.balance .sum, .limit .clock, dialog .price, .medal, .ring b{font-variant-numeric:lining-nums tabular-nums;}

/* ===== PWA: установка ===== */
.install-banner{display:grid; grid-template-columns:44px 1fr auto 28px; gap:10px; align-items:center; margin:2px 0 12px; padding:10px 10px 10px 12px; border-radius:14px;
  background:linear-gradient(180deg,rgba(46,24,96,.95),rgba(24,12,58,.95)); border:1px solid rgba(226,194,122,.6); box-shadow:0 10px 26px rgba(0,0,0,.35);}
.install-banner img{width:44px; height:44px; border-radius:11px;}
.install-banner b{display:block; font-size:14.5px;} .install-banner span{display:block; font-size:12px; color:var(--muted); line-height:1.3;}
.install-banner .btn.small{padding:8px 12px; font-size:13px;}
.install-banner .x{width:28px; height:28px; border:0; background:none; color:var(--muted); font-size:20px; cursor:pointer;}
.install-card .ok{color:#7fe3b0; font-weight:700;}
.ios-steps{margin:14px 0 0; padding-left:22px; color:var(--muted); font-size:14.5px;}
.ios-steps li{margin:6px 0;}
.ios-steps svg{width:18px; height:18px; vertical-align:-3px; fill:none; stroke:var(--cyan); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}

/* ===== подарочная попытка, серия, приглашение, итоги недели ===== */
.dots i.bonus{border-color:var(--pink);} .dots i.bonus.on{background:radial-gradient(circle at 40% 35%, #f3c2ff, var(--pink)); box-shadow:0 0 8px rgba(210,77,255,.7);}
.streak{text-align:center; font-size:13.5px; color:var(--gold-3); margin:-2px auto 4px;}
.streak b{font-family:var(--serif); font-size:18px;}
.streak.risk{color:var(--cyan);}
.invite .input{font-size:14.5px; color:var(--gold-3); text-overflow:ellipsis;}
.week{text-align:center; margin-bottom:6px;}
.week-range{font-family:var(--serif); font-size:28px; font-weight:700; color:#fff; margin:4px 0 14px;}
.week-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:16px;}
.week-tiles div{border-radius:12px; padding:10px 4px 8px; background:rgba(46,24,96,.7); border:1px solid rgba(226,194,122,.45);}
.week-tiles b{display:block; font-family:var(--serif); font-size:34px; line-height:1; color:var(--gold-3);}
.week-tiles span{font-size:11.5px; color:var(--muted); line-height:1.25; display:block; margin-top:4px;}
.week-bars{display:grid; grid-template-columns:auto 1fr auto; gap:8px 10px; align-items:center; text-align:left; margin-bottom:14px; font-size:14px;}
.week-bars .nm{font-family:var(--serif); font-size:17px; font-weight:700;}
.week-bars .tr{height:12px; border-radius:6px; background:rgba(189,178,223,.15); overflow:hidden;}
.week-bars .tr i{display:block; height:100%; border-radius:6px; min-width:12px;}
.week-bars .tr i.zero{min-width:0;}
.week-bars .n{font-weight:800; color:var(--gold-3); min-width:1.2em; text-align:right;}

/* ===== заметки к картам ===== */
.entry > div{min-width:0;}
.entry .detail{margin:6px 0 0; font-size:13.5px; line-height:1.4; color:var(--muted);}
.entry .note{display:block; width:100%; margin-top:10px; padding:8px 10px; border:0; border-left:2px solid var(--cyan); border-radius:4px 10px 10px 4px;
  background:rgba(56,211,255,.08); color:var(--text); font-size:14px; line-height:1.4; text-align:left; white-space:pre-wrap; overflow-wrap:anywhere;}
button.note{cursor:pointer;}
.entry .note span{display:block; font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan); margin-bottom:2px; white-space:normal;}
.entry .note-add{margin-top:8px; padding:4px 0; border:0; background:none; color:var(--cyan); font-size:13.5px; font-weight:700; cursor:pointer;}
.note-link{display:block; margin:2px auto 0; padding:6px; font-size:15px; font-weight:700; text-decoration:none; color:var(--cyan);}
.note-quote{font-family:var(--serif); font-size:21px; font-weight:600; line-height:1.2; color:#fff; margin:10px 0 18px;}
.input.note-input{display:block; resize:vertical; min-height:120px; font-size:16px; line-height:1.45;}
.note-count{text-align:right; font-size:12px; color:var(--muted); margin:-10px 0 16px; font-variant-numeric:tabular-nums;}
.note-count.full{color:var(--danger);}

/* ===== онбординг ===== */
body.no-scroll{overflow:hidden;}
body.no-scroll .toast{bottom:auto; top:calc(56px + env(safe-area-inset-top)); transform:translateX(-50%) translateY(-20px);}
body.no-scroll .toast.show{transform:translateX(-50%);}
.onboard{position:fixed; top:0; bottom:0; left:0; right:0; margin:0 auto; width:100%; max-width:480px; z-index:30; display:flex; flex-direction:column;
  padding:calc(16px + env(safe-area-inset-top)) 20px calc(22px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(20,11,51,.5), rgba(13,7,38,.97) 72%), url("assets/ornament-blur.jpg") center top/cover, var(--night-2);
  animation:ob-in .35s ease;}
@keyframes ob-in{from{opacity:0;} to{opacity:1;}}
.ob-skip{position:absolute; top:calc(12px + env(safe-area-inset-top)); right:12px; z-index:2; padding:8px 10px; border:0; background:none; color:var(--muted); font-size:14px; font-weight:700; cursor:pointer;}
.ob-viewport{flex:1; min-height:0; display:flex; overflow:hidden; touch-action:pan-y;}
.ob-track{display:flex; width:100%; transition:transform .45s cubic-bezier(.3,.7,.2,1);}
.ob-slide{flex:0 0 100%; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:36px 4px 4px; overflow-y:auto;}
.ob-slide h2{font-size:34px; margin-top:8px;}
.ob-slide .orn{margin:10px auto 14px;}
.ob-slide p{color:var(--muted); font-size:16px; max-width:350px; margin:0 auto;}
.ob-art{height:230px; width:100%; display:grid; place-items:center; margin-bottom:22px; flex:none;}
.ob-dots{display:flex; justify-content:center; gap:10px; margin:16px 0 18px;}
.ob-dots button{width:9px; height:9px; padding:0; border:0; border-radius:5px; background:rgba(189,178,223,.35); cursor:pointer; transition:width .3s, background .3s;}
.ob-dots button.on{width:26px; background:linear-gradient(90deg,var(--cyan),var(--pink)); box-shadow:0 0 8px rgba(56,211,255,.6);}

/* слайд 1: веер карт */
.ob-fan{position:relative; width:124px; aspect-ratio:3/4; margin-top:24px;}
.ob-fan img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:10px; transform-origin:50% 120%;
  box-shadow:0 12px 26px rgba(0,0,0,.5), 0 0 0 1px rgba(226,194,122,.55); transition:transform .7s cubic-bezier(.3,.7,.2,1) .15s;}
.ob-slide.active .ob-fan{animation:pulse 1.8s ease-in-out .9s infinite;}
.ob-slide.active .ob-fan img:nth-child(1){transform:rotate(-24deg);}
.ob-slide.active .ob-fan img:nth-child(2){transform:rotate(-8deg);}
.ob-slide.active .ob-fan img:nth-child(3){transform:rotate(8deg);}
.ob-slide.active .ob-fan img:nth-child(4){transform:rotate(24deg);}
/* слайд 2: стихии */
.ob-elements{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; width:100%; max-width:360px;}
.ob-elements figure{margin:0;}
.ob-slide.active .ob-elements figure{animation:deal .6s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--k) * .09s);}
.ob-elements img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:8px; box-shadow:0 0 0 1px rgba(226,194,122,.55), 0 10px 20px rgba(0,0,0,.45);}
.ob-elements figcaption{font-family:var(--serif); font-size:18px; font-weight:700; color:#fff; margin-top:8px; line-height:1.1;}
.ob-elements small{display:block; font-family:var(--sans); font-size:11.5px; font-weight:600; color:var(--muted); margin-top:2px;}
/* слайд 3: карта с заметкой */
.ob-note{position:relative; width:150px; margin-right:44px;}
.ob-note .paper-card{aspect-ratio:3/4; padding:14% 10%;}
.ob-note .sticker{position:absolute; right:-58px; bottom:-16px; width:136px; padding:9px 11px; border-radius:10px; text-align:left; font-size:13px; line-height:1.3; font-weight:600; color:#fff; transform:rotate(-5deg);
  background:linear-gradient(180deg,rgba(46,24,96,.97),rgba(24,12,58,.97)); border:1px solid var(--cyan); box-shadow:0 0 14px rgba(56,211,255,.45), 0 10px 22px rgba(0,0,0,.45);}
.ob-note .sticker span{display:block; font-size:9.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan); margin-bottom:2px;}
@media (max-height:680px){
  .ob-art{height:170px; margin-bottom:12px;}
  .ob-fan{width:96px; margin-top:16px;} .ob-elements{max-width:280px;} .ob-note{width:116px;}
  .ob-slide h2{font-size:28px;} .ob-slide p{font-size:15px;}
}

/* ===== v6: элементы из макета дизайнера ===== */
.img-btn{display:block; padding:0; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .15s ease, filter .2s ease;}
.img-btn img{width:100%; height:auto;}
.img-btn:active{transform:scale(.95);}
.img-btn:hover{filter:brightness(1.12) drop-shadow(0 0 10px rgba(56,211,255,.45));}

/* шапка игры: «Поделиться» — эмблема — настройки */
.hero-row{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:6px; margin:-30px -4px 0; position:relative; z-index:6;}
.hero-emblem{width:108px; height:auto; filter:drop-shadow(0 6px 18px rgba(20,11,51,.6));}
.hero-share{justify-self:start; width:min(108px, 100%);}
.hero-gear{justify-self:end; width:52px; margin-right:14px;}

/* кнопка пятой стихии */
.love-btn{width:min(230px, 70%); margin:20px auto 0;}

/* экран пятой стихии */
.back-link{display:inline-block; margin:2px 0 14px; color:var(--muted); font-size:14px; font-weight:700; text-decoration:none;}
.paper-form{border-radius:16px; padding:22px 18px 16px; color:var(--paper-ink);
  background:linear-gradient(180deg, rgba(246,240,234,0) 40%, rgba(214,182,214,.7) 100%), url("assets/paper.webp") center/cover, var(--paper);
  box-shadow:0 24px 50px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.6);}
.pf-title{font-family:var(--sans); font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#8a6a8e; text-align:center;}
.pf-lead{font-family:var(--serif); font-size:20px; font-weight:600; line-height:1.2; text-align:center; margin:8px 0 18px;}
.pf-row{display:grid; grid-template-columns:minmax(0,44%) 1fr; align-items:center; gap:10px; margin-bottom:12px;}
.pf-row span{font-family:var(--serif); font-size:21px; font-weight:600; line-height:1.1;}
.pf-row input, .pf-row select{width:100%; min-width:0; height:40px; font:inherit; font-size:16px; color:var(--paper-ink); padding:0 10px; border-radius:8px;
  border:1px solid rgba(138,106,142,.35); background:#fff; box-shadow:inset 0 1px 3px rgba(43,29,47,.12); -webkit-appearance:none; appearance:none;}
.pf-row select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238a6a8e' stroke-width='1.8'/%3E%3C/svg%3E") right 10px center/12px no-repeat; padding-right:28px;}
.pf-row input:focus, .pf-row select:focus{outline:none; border-color:var(--pink); box-shadow:0 0 0 3px rgba(210,77,255,.2);}
.paper-form .error{color:#c2185b; text-align:center; margin:2px 0 6px;}
.pf-ok{width:140px; margin:4px auto 0;}
.love-banner{width:calc(100% + 32px); max-width:none; margin:22px -16px 0; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);}
.love-done{text-align:center;}
.love-done h2{margin-top:6px; text-wrap:balance;}
.love-done .btn-col{align-items:center; margin-top:14px;}
.love-card{position:relative; width:170px; margin:0 auto 18px; border-radius:12px; overflow:hidden; box-shadow:0 0 0 1px rgba(226,194,122,.6), 0 0 30px rgba(255,80,120,.45), 0 18px 36px rgba(0,0,0,.5);}
.love-card img{width:100%; aspect-ratio:3/4; object-fit:cover; filter:saturate(.85) brightness(.8);}
.love-card .lock{position:absolute; left:50%; bottom:14px; transform:translateX(-50%); padding:5px 12px; border-radius:99px; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background:linear-gradient(90deg,#ff4f7b,var(--pink)); box-shadow:0 0 14px rgba(255,79,123,.6);}
@media (max-width:360px){ .pf-row{grid-template-columns:1fr; gap:4px;} .hero-emblem{width:92px;} }
/* невысокие экраны (iPhone SE и т. п.): сетка и шапка компактнее, чтобы кнопка тасовки была видна без прокрутки */
@media (max-height:760px){
  .topbar .arc{width:62%;}
  .hero-emblem{width:90px;}
  .hero-row{margin-top:-26px;}
  .stage[data-state="idle"]{height:250px;}
  .deck .back[data-el="fire"]{transform:translate(-49px,-64px) scale(.5);}
  .deck .back[data-el="earth"]{transform:translate(49px,-64px) scale(.5);}
  .deck .back[data-el="air"]{transform:translate(-49px,64px) scale(.5);}
  .deck .back[data-el="water"]{transform:translate(49px,64px) scale(.5);}
}
@media (max-height:680px){
  .stage[data-state="idle"]{height:234px;}
  .deck .back[data-el="fire"]{transform:translate(-46px,-60px) scale(.47);}
  .deck .back[data-el="earth"]{transform:translate(46px,-60px) scale(.47);}
  .deck .back[data-el="air"]{transform:translate(-46px,60px) scale(.47);}
  .deck .back[data-el="water"]{transform:translate(46px,60px) scale(.47);}
}

/* ===== оплата: тарифы подписки, суммы пополнения, статусы в истории ===== */
.plans{display:flex; flex-direction:column; gap:10px;}
.plan{display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 12px; width:100%; padding:14px 16px; border-radius:14px; cursor:pointer;
  font:inherit; color:var(--text); text-align:left; background:rgba(255,255,255,.05); border:1px solid rgba(226,194,122,.45); transition:border-color .2s, background .2s;}
.plan:hover, .plan:focus-visible{border-color:var(--gold-3); background:rgba(226,194,122,.1); outline:none;}
.plan b{font-size:17px;} .plan .pr{font-family:var(--serif); font-size:24px; font-weight:700; color:var(--gold-3); font-variant-numeric:lining-nums tabular-nums;}
.plan small{grid-column:1 / -1; font-size:12.5px; color:var(--muted);}
.plan.best{border-color:var(--gold-3); box-shadow:0 0 18px rgba(226,194,122,.25);}
.chips{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:6px 0 16px;}
.chips button{font:inherit; font-weight:700; font-size:14px; color:var(--text); padding:8px 14px; border-radius:99px; cursor:pointer;
  background:rgba(255,255,255,.05); border:1px solid rgba(170,140,255,.35);}
.chips button.on{border-color:var(--gold-3); color:var(--gold-3); background:rgba(226,194,122,.12);}
.pay-check{text-align:center; margin-bottom:16px; border-color:rgba(56,211,255,.5);}
.pay-check.ok{border-color:rgba(127,227,176,.6);} .pay-check.bad{border-color:rgba(255,120,140,.6);}
.pay .amt.minus{color:var(--text);}
.pay .st.wait{color:var(--gold-3);} .pay .st.bad{color:var(--muted);}
.pay .test{font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-left:6px;}