@font-face{font-family:'BalatroRU';src:url(assets/fonts/m6x11cyrillic.ttf) format('truetype');font-display:swap}
@font-face{font-family:'Balatro';src:url(assets/fonts/m6x11plus.ttf) format('truetype');font-display:swap}
/* ============ Шрифт (лежит рядом, подключается без интернета) ============ */
@font-face{font-family:'Pixelify';src:url(assets/fonts/pixelify-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-weight:400 700;font-display:swap}
@font-face{font-family:'Pixelify';src:url(assets/fonts/pixelify-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-weight:400 700;font-display:swap}

:root{
  --u:7px;
  --blue:#009dff; --red:#fe5f55; --orange:#ff9a00; --gold:#eac058;
  --ink:#1e2b2d; --panel:#374244;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
html,body{margin:0;height:100%;overflow:hidden;background:#07120f;color:#fff;font-family:'BalatroRU','Balatro','Pixelify','Trebuchet MS',Verdana,sans-serif;-webkit-font-smoothing:none;font-smooth:never;text-rendering:optimizeSpeed;font-weight:400;touch-action:manipulation;overscroll-behavior:none}
button{font-family:inherit;color:inherit}
.off{display:none!important}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0}
section{position:fixed;inset:0}

/* ============ Общие элементы ============ */
.panel{background:var(--panel);border:calc(var(--u)*.5) solid var(--ink);border-radius:calc(var(--u)*1);box-shadow:0 calc(var(--u)*.7) 0 var(--ink);padding:calc(var(--u)*1.2)}
.lbl{font-size:calc(var(--u)*2.5);color:#b9cbc8;line-height:1.1}
.box{display:inline-block;min-width:calc(var(--u)*11);text-align:center;font-size:calc(var(--u)*5.4);font-weight:400;padding:calc(var(--u)*.5) calc(var(--u)*1);border-radius:calc(var(--u)*1);border:calc(var(--u)*.35) solid var(--ink);text-shadow:0 calc(var(--u)*.4) 0 rgba(0,0,0,.45)}
.box.blue{background:var(--blue)} .box.red{background:var(--red)} .box.sm{font-size:calc(var(--u)*3.4);min-width:calc(var(--u)*8)}
.blue-t{color:#58b4ff} .red-t{color:#ff7b70}

.btn{--c:#5d6e70;--cd:#34403f;background:var(--c);color:#fff;border:calc(var(--u)*.45) solid var(--ink);border-radius:calc(var(--u)*.9);box-shadow:0 calc(var(--u)*.7) 0 var(--cd);text-shadow:0 calc(var(--u)*.4) 0 rgba(0,0,0,.45);cursor:pointer;transition:transform .08s,box-shadow .08s,filter .2s;font-weight:400;padding:0 calc(var(--u)*2);line-height:1}
.btn.blue{--c:#009dff;--cd:#0b5a94} .btn.red{--c:#fe5f55;--cd:#a23a33} .btn.orange{--c:#ff9a00;--cd:#a15f00}
.btn:hover:not(:disabled){transform:translateY(calc(var(--u)*-.25));filter:brightness(1.08)}
.btn:active:not(:disabled){transform:translateY(calc(var(--u)*.5));box-shadow:0 calc(var(--u)*.15) 0 var(--cd)}
.btn:disabled{filter:grayscale(1) brightness(.55);cursor:default}
.btn.big{height:calc(var(--u)*9.5);min-width:calc(var(--u)*30);font-size:calc(var(--u)*4)}
.btn.mini{height:calc(var(--u)*6);font-size:calc(var(--u)*2.8);padding:0 calc(var(--u)*1.6)}
.btn.mini.orange:not(.on){--c:#8a5a1a;--cd:#4b300a}
#btnSound svg{width:calc(var(--u)*3.6);height:calc(var(--u)*3.6);display:block}
.blind-head{line-height:1.05}

/* ============ Экран игры ============ */
#game{z-index:10;overflow:hidden}
#game.shake{animation:shake .45s}
#side{position:absolute;left:0;top:0;bottom:0;width:calc(var(--u)*38);padding:calc(var(--u)*1.6);display:flex;flex-direction:column;gap:calc(var(--u)*1.4);z-index:6;background:linear-gradient(90deg,rgba(0,0,0,.4),rgba(0,0,0,.22));border-right:calc(var(--u)*.4) solid rgba(0,0,0,.35)}
#blind{padding:0;overflow:hidden}
.blind-head{background:#ff9a00;color:#fff;text-shadow:0 calc(var(--u)*.35) 0 rgba(0,0,0,.35);font-size:calc(var(--u)*3.4);font-weight:400;text-align:center;padding:calc(var(--u)*.9);border-bottom:calc(var(--u)*.45) solid var(--ink)}
.blind-body{display:flex;align-items:center;gap:calc(var(--u)*1.4);padding:calc(var(--u)*1.2);background:rgba(0,0,0,.25)}
.blind-token{flex:none;width:calc(var(--u)*9);height:calc(var(--u)*9);display:flex;align-items:center;justify-content:center;animation:bob 2.4s ease-in-out infinite;filter:drop-shadow(0 calc(var(--u)*.5) 0 rgba(0,0,0,.45))}
.blind-token svg{width:100%;height:100%}
.blind-info{display:flex;flex-direction:column;gap:calc(var(--u)*.3);min-width:0}
#target{font-size:calc(var(--u)*6);color:var(--red);line-height:1;text-shadow:0 calc(var(--u)*.4) 0 rgba(0,0,0,.4)}
.reward{font-size:calc(var(--u)*2.3);color:var(--gold);line-height:1.1}
#score{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*1)}
#roundScore{font-size:calc(var(--u)*6.4);line-height:1;text-shadow:0 calc(var(--u)*.4) 0 rgba(0,0,0,.4)}
#score.flash{animation:flash .25s infinite alternate}
#eval{text-align:center;display:flex;flex-direction:column;gap:calc(var(--u)*1)}
#handName{font-size:calc(var(--u)*3.6);font-weight:400;min-height:calc(var(--u)*4.2);line-height:1.1}
.calc{display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*.8)}
.calc .x{font-size:calc(var(--u)*4.4);color:var(--red)}
.calc .box{flex:1;min-width:0}
.box.hot{box-shadow:0 0 0 calc(var(--u)*.5) #fff,0 0 calc(var(--u)*3) currentColor;animation:hotp .35s infinite alternate}
#stats{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*1.2)}
.stat{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*.4);padding:calc(var(--u)*.9)}
.stat b{font-size:calc(var(--u)*6);line-height:1}
#tools{display:flex;gap:calc(var(--u)*1.2);margin-top:auto}
#tools #btnHands{flex:1}

/* портрет: шапка сверху сеткой */
html.portrait #side{inset:0 0 auto 0;width:auto;bottom:auto;display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*1.1);padding:calc(var(--u)*1.3);border-right:0;border-bottom:calc(var(--u)*.4) solid rgba(0,0,0,.35);background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.25))}
html.portrait #eval{grid-column:1/3;flex-direction:row;align-items:center;justify-content:space-between;padding:calc(var(--u)*.8) calc(var(--u)*1.4)}
html.portrait #handName{flex:1;text-align:left;font-size:calc(var(--u)*3.5)}
html.portrait .calc{flex:none;width:52%}
html.portrait .box{font-size:calc(var(--u)*5)}
html.portrait .blind-head{font-size:calc(var(--u)*3);padding:calc(var(--u)*.6)}
html.portrait .blind-token{width:calc(var(--u)*7);height:calc(var(--u)*7);font-size:calc(var(--u)*4)}
html.portrait #target{font-size:calc(var(--u)*5.2)}
html.portrait .blind-body{padding:calc(var(--u)*.8)}
html.portrait .lbl{font-size:calc(var(--u)*2.7)}
html.portrait .reward{font-size:calc(var(--u)*2.3)}
html.portrait #roundScore{font-size:calc(var(--u)*6)}
html.portrait #tools{margin-top:0;align-items:center}
html.portrait .stat{padding:calc(var(--u)*.6)}
html.portrait .stat b{font-size:calc(var(--u)*5)}
html.portrait #tools .btn{height:calc(var(--u)*7)}

#table{position:absolute;inset:0;z-index:5;pointer-events:none}
#controls{position:absolute;z-index:7;display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*2)}
#sort{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*.6)}
.sortbtns{display:flex;flex-direction:column;gap:calc(var(--u)*.7)}
.sortbtns .btn{height:calc(var(--u)*4.6);font-size:calc(var(--u)*2.5);padding:0 calc(var(--u)*1.4)}
html.portrait .btn.big{min-width:calc(var(--u)*23);padding:0 calc(var(--u)*1);font-size:calc(var(--u)*3.6);height:calc(var(--u)*9)}
html.portrait #controls{gap:calc(var(--u)*1.2)}
html.portrait #sort .lbl{display:none}

#deckpile{position:absolute;z-index:3;--bw:calc(var(--cw)*var(--ds))}
#deckpile .back{position:absolute;inset:0}
#deckpile .back:nth-child(1){transform:translate(calc(var(--u)*.7),calc(var(--u)*.9));filter:brightness(.75)}
#deckpile .back:nth-child(2){transform:translate(calc(var(--u)*.35),calc(var(--u)*.45));filter:brightness(.88)}
#deckpile.empty .back{opacity:.25}
#deckCount{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:calc(var(--u)*1.4);white-space:nowrap;font-size:calc(var(--u)*2.6);color:#cfe0dd;text-shadow:0 calc(var(--u)*.3) 0 rgba(0,0,0,.6)}

.popup{position:absolute;transform:translate(-50%,-50%);font-size:calc(var(--u)*5);font-weight:400;z-index:500;pointer-events:none;white-space:nowrap;animation:floatUp 1s ease-out forwards;text-shadow:0 calc(var(--u)*.4) 0 var(--ink),0 0 calc(var(--u)*1) var(--ink),calc(var(--u)*.3) 0 0 var(--ink),calc(var(--u)*-.3) 0 0 var(--ink)}
.popup.blue{color:#7fcbff}
.popup.big{font-size:calc(var(--u)*10);color:#fff;animation:bigPop 1.1s ease-out forwards;text-shadow:0 calc(var(--u)*.7) 0 #c0392b,0 0 calc(var(--u)*2) #000}

#banner{position:absolute;left:0;right:0;top:30%;text-align:center;z-index:400;pointer-events:none;opacity:0}
#banner.show{animation:bannerIn .6s cubic-bezier(.3,1.5,.5,1) forwards}
#banner .b1{display:inline-block;font-size:calc(var(--u)*9);font-weight:400;color:var(--gold);background:rgba(10,22,20,.88);border:calc(var(--u)*.6) solid var(--ink);border-radius:calc(var(--u)*2);padding:calc(var(--u)*1.4) calc(var(--u)*4);text-shadow:0 calc(var(--u)*.6) 0 #b45309;box-shadow:0 calc(var(--u)*.8) 0 rgba(0,0,0,.5);max-width:94vw}
#banner .b2{margin-top:calc(var(--u)*2);font-size:calc(var(--u)*5);text-shadow:0 calc(var(--u)*.4) 0 #000}

/* ============ Карты ============ */
.card{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);perspective:900px;transition-property:transform;transition-duration:.4s;transition-timing-function:cubic-bezier(.3,1.35,.5,1);cursor:pointer;pointer-events:auto;will-change:transform;touch-action:manipulation}
.sway{width:100%;height:100%;animation:sway 5s ease-in-out infinite;animation-delay:var(--sd)}
.tilt{width:100%;height:100%;transform:scale(var(--sc,1)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .15s;transform-style:preserve-3d}
@media (hover:hover){.card:hover .tilt{--sc:1.06}}
.card.nope .tilt{animation:nope .3s}
.flip{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .4s}
.card.down .flip{transform:rotateY(180deg)}
.face,.flip>.back{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:calc(var(--cw)*.07);box-shadow:0 calc(var(--cw)*.04) 0 rgba(0,0,0,.4);overflow:hidden}
.face{background:#fbf7ea;border:calc(var(--cw)*.025) solid #d9d2bd;color:var(--suit)}
.card.dim .face::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.5)}
.flip>.back{transform:rotateY(180deg)}
.suit{display:block;image-rendering:pixelated}

.idx{position:absolute;left:5%;top:3%;display:flex;flex-direction:column;align-items:center;line-height:.95;color:var(--suit);width:calc(var(--cw)*.26)}
.idx b{font-size:calc(var(--cw)*.3);letter-spacing:-.06em;font-weight:400}
.idx .suit{width:calc(var(--cw)*.2);height:calc(var(--cw)*.2);margin-top:calc(var(--cw)*.01)}
.idx.br{left:auto;right:5%;top:auto;bottom:3%;transform:rotate(180deg)}
.pips{position:absolute;left:36%;right:36%;top:14%;bottom:14%}
.pip{position:absolute;width:calc(var(--cw)*.17);height:calc(var(--cw)*.17);transform:translate(-50%,-50%)}
.pip.inv{transform:translate(-50%,-50%) rotate(180deg)}
.ace{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ace .suit{width:calc(var(--cw)*.5);height:calc(var(--cw)*.5)}
.royal{position:absolute;left:25%;right:25%;top:14%;bottom:14%;border:calc(var(--cw)*.025) solid var(--suit);display:flex;flex-direction:column;background:#f3ecd2}
.royal .fig{flex:1;min-height:0;width:100%}
.royal .fig.inv{transform:rotate(180deg);border-top:calc(var(--cw)*.02) solid var(--suit)}
.art{position:absolute;inset:0;background-size:cover;background-position:center;border-radius:inherit}
.mode-frame .art{inset:12% 20%;border:calc(var(--cw)*.015) solid var(--suit);border-radius:calc(var(--cw)*.04)}
.mode-overlay .idx{background:rgba(255,255,255,.82);border-radius:calc(var(--cw)*.05);padding:calc(var(--cw)*.02) 0}
.mode-full{background:#000}

.back{--b:var(--bw,var(--cw));background:var(--backtile);background-size:calc(var(--b)*.16);image-rendering:pixelated;border:calc(var(--b)*.05) solid #fbf7ea;border-radius:calc(var(--b)*.07);display:flex;align-items:center;justify-content:center}
.back span{font-size:calc(var(--b)*.3);color:#fff;background:#c2285a;border:calc(var(--b)*.03) solid #fbf7ea;padding:calc(var(--b)*.04) calc(var(--b)*.08);text-shadow:0 calc(var(--b)*.02) 0 rgba(0,0,0,.5)}
.back.custom{background-size:cover;background-position:center;border:calc(var(--b)*.03) solid #1b2625}

/* ============ Модалка ============ */
#modal{z-index:900;background:rgba(0,0,0,.62);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}
#modal.on{opacity:1}
#modalBox{width:min(90vw,calc(var(--u)*70));text-align:center;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*2);padding:calc(var(--u)*3);font-size:calc(var(--u)*3.2);animation:bannerIn .35s cubic-bezier(.3,1.5,.5,1) both;max-height:92vh;overflow:auto}
#modalBox h2{margin:0;font-size:calc(var(--u)*5.5);color:var(--gold);text-shadow:0 calc(var(--u)*.4) 0 rgba(0,0,0,.5)}
#modalBox p{margin:0;line-height:1.35}
#modalBox .small{font-size:calc(var(--u)*2.5);color:#b9cbc8}
.hands{border-collapse:separate;border-spacing:calc(var(--u)*.8) calc(var(--u)*.7)}
.hands .hn{text-align:left;font-size:calc(var(--u)*3.2)}
.hands .x{color:var(--red);font-size:calc(var(--u)*3)}
#modalBox .btn.big{padding:0 calc(var(--u)*4)}

/* ============ «Нажми, чтобы открыть» ============ */
#tapStart{z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5vmin;cursor:pointer;transition:opacity .5s,transform .5s;--cw:min(32vmin,190px)}
#tapStart.gone{opacity:0;transform:scale(1.2);pointer-events:none}
.tapcard{position:relative;width:var(--cw);aspect-ratio:5/7;animation:tapbob 2.4s ease-in-out infinite;filter:drop-shadow(0 12px 0 rgba(0,0,0,.35))}
.tapcard .back{position:absolute;inset:0}
.taptext{font-size:clamp(16px,4.6vmin,34px);font-weight:400;text-align:center;padding:0 5vw;text-shadow:0 3px 0 rgba(0,0,0,.5);animation:blink 1.4s ease-in-out infinite}

/* ============ Заставка ============ */
#intro{z-index:50}
#introFan{position:fixed;inset:0;pointer-events:none}
.fancard{position:absolute;left:0;top:0;transition:none}
#title{position:absolute;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:calc(var(--tw)*.2);transition:transform .5s ease-in}
.row{display:flex;align-items:center;justify-content:center;gap:calc(var(--tw)*.12);min-height:calc(var(--tw)*1.3)}
#t3tiles{display:flex;gap:calc(var(--tw)*.12)}
.tile{width:var(--tw);height:calc(var(--tw)*1.3);background:#fbf7ea;border:calc(var(--tw)*.06) solid #1e2b2d;border-radius:calc(var(--tw)*.1);display:flex;align-items:center;justify-content:center;font-size:calc(var(--tw)*.95);box-shadow:0 calc(var(--tw)*.12) 0 #1e2b2d;opacity:0}
.tile.c0{color:#f0456e}.tile.c1{color:#3a3f6b}.tile.c2{color:#f2703a}.tile.c3{color:#235955}
.tile.in{animation:tileDrop .85s cubic-bezier(.3,1.4,.5,1) both}
.gap{display:block;width:calc(var(--tw)*.45)}
#seal{position:relative;width:calc(var(--tw)*2);height:calc(var(--tw)*2);margin-left:calc(var(--tw)*.3);background:#1e2b2d;clip-path:polygon(30% 0,70% 0,70% 6%,86% 6%,86% 14%,94% 14%,94% 30%,100% 30%,100% 70%,94% 70%,94% 86%,86% 86%,86% 94%,70% 94%,70% 100%,30% 100%,30% 94%,14% 94%,14% 86%,6% 86%,6% 70%,0 70%,0 30%,6% 30%,6% 14%,14% 14%,14% 6%,30% 6%);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#6b2d00;line-height:.9;transform:scale(0)}
#seal::before{content:'';position:absolute;inset:7%;background:#eac058;clip-path:polygon(30% 0,70% 0,70% 6%,86% 6%,86% 14%,94% 14%,94% 30%,100% 30%,100% 70%,94% 70%,94% 86%,86% 86%,86% 94%,70% 94%,70% 100%,30% 100%,30% 94%,14% 94%,14% 86%,6% 86%,6% 70%,0 70%,0 30%,6% 30%,6% 14%,14% 14%,14% 6%,30% 6%);z-index:-1}
#seal b,#seal small{position:relative}
#seal b{font-size:calc(var(--tw)*.95)} #seal small{font-size:calc(var(--tw)*.36)}
#seal.in{animation:sealIn .9s cubic-bezier(.3,1.6,.5,1) forwards}
#btnStart{position:absolute;left:0;right:0;margin:0 auto;width:fit-content;--u:calc(var(--tw)*.14);height:calc(var(--tw)*1.1);min-width:calc(var(--tw)*4.2);font-size:calc(var(--tw)*.5);opacity:0;transform:scale(0);pointer-events:none;transition:transform .5s ease-in,opacity .5s}
#btnStart.in{animation:btnIn .6s cubic-bezier(.3,1.6,.5,1) forwards,pulse 1.3s ease-in-out .7s infinite;pointer-events:auto}
#intro.leave #title{transform:translateY(-130vh)}
#intro.leave #introFan{transform:translateY(130vh);transition:transform .5s ease-in}
#intro.leave #btnStart{animation:none;opacity:0;transform:scale(0)}

/* ============ Обучение ============ */
#tut{z-index:600;pointer-events:none}
#tutBlock{position:absolute;inset:0;pointer-events:auto;display:none}
#spot{position:absolute;border-radius:calc(var(--u)*2);box-shadow:0 0 0 200vmax rgba(4,12,10,.7);border:calc(var(--u)*.5) solid var(--gold);transition:left .45s cubic-bezier(.3,1.2,.5,1),top .45s cubic-bezier(.3,1.2,.5,1),width .45s cubic-bezier(.3,1.2,.5,1),height .45s cubic-bezier(.3,1.2,.5,1),opacity .3s;pointer-events:none}
#spot.none{border-color:transparent}
#tut.quiet #spot{opacity:0}
#tutGroup{position:absolute;display:flex;align-items:center;gap:calc(var(--u)*2.8);pointer-events:none;transition:opacity .3s,transform .3s}
#tutGroup.hide{opacity:0;transform:scale(.9)}
#tutorCard{flex:none;animation:tutorBob 2.6s ease-in-out infinite;filter:drop-shadow(0 calc(var(--u)*.8) 0 rgba(0,0,0,.4))}
#tutorCard .tface,#tutorCard .timg{width:100%;height:100%}
#tutorCard .tface{background:#fbf7ea;border:calc(var(--cw)*.03) solid #d9d2bd;border-radius:calc(var(--cw)*.07);padding:calc(var(--cw)*.08);display:flex}
#tutorCard .tface svg{width:100%;height:100%}
#tutorCard .timg{background-size:cover;background-position:center;border-radius:calc(var(--cw)*.09);border:calc(var(--cw)*.03) solid #1b2625}
#bubble{pointer-events:auto;flex:1;position:relative;background:#fffbe8;color:#1b2625;border:calc(var(--u)*.5) solid var(--ink);border-radius:calc(var(--u)*2);padding:calc(var(--u)*1.8) calc(var(--u)*2.2);box-shadow:0 calc(var(--u)*.7) 0 rgba(0,0,0,.4);font-size:calc(var(--u)*3.1);line-height:1.28}
#bubble::before{content:'';position:absolute;left:calc(var(--u)*-1.9);top:50%;width:calc(var(--u)*3);height:calc(var(--u)*3);background:#fffbe8;border-left:calc(var(--u)*.5) solid var(--ink);border-bottom:calc(var(--u)*.5) solid var(--ink);transform:translateY(-50%) rotate(45deg)}
#bubble.in{animation:bubbleIn .35s cubic-bezier(.3,1.6,.5,1)}
#bubbleName{font-size:.8em;color:#d6336c;font-weight:400;margin-bottom:.25em}
#bubbleText{min-height:2.6em}
#bubbleNext{margin-top:.5em;font-size:.78em;color:#6b7b78;text-align:right;animation:blink 1.2s ease-in-out infinite}
#bubble.last #bubbleNext{color:#fff;background:#1e90e8;border-radius:.6em;padding:.35em .8em;display:inline-block;float:right;animation:pulse 1s ease-in-out infinite}
#btnSkip{position:absolute;right:calc(var(--u)*2);bottom:calc(var(--u)*1.6);pointer-events:auto;opacity:.85}
html.portrait #btnSkip{right:auto;left:calc(var(--u)*2)}

/* ============ Финал ============ */
#end{z-index:50;--eu:7px}
#balloons{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.balloon{position:absolute;bottom:-25vh;width:calc(var(--eu)*7*var(--s));height:calc(var(--eu)*8.6*var(--s));background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.65),transparent 28%),var(--c);border-radius:50% 50% 47% 47%;animation:balloonUp linear infinite;opacity:.92}
.balloon::after{content:'';position:absolute;left:50%;top:100%;width:2px;height:calc(var(--eu)*9);background:rgba(255,255,255,.5)}
.endscroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;display:flex}
.endinner{margin:auto;padding:calc(var(--eu)*2.4) calc(var(--eu)*2) calc(var(--eu)*3);width:min(100%,calc(var(--eu)*86));display:flex;flex-direction:column;align-items:center;gap:calc(var(--eu)*2.2)}
#endSeal{position:relative;width:calc(var(--eu)*15);height:calc(var(--eu)*15);flex:none;background:#1e2b2d;clip-path:polygon(30% 0,70% 0,70% 6%,86% 6%,86% 14%,94% 14%,94% 30%,100% 30%,100% 70%,94% 70%,94% 86%,86% 86%,86% 94%,70% 94%,70% 100%,30% 100%,30% 94%,14% 94%,14% 86%,6% 86%,6% 70%,0 70%,0 30%,6% 30%,6% 14%,14% 14%,14% 6%,30% 6%);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#6b2d00;line-height:.9;transform:scale(0)}
#endSeal::before{content:'';position:absolute;inset:7%;background:#eac058;clip-path:polygon(30% 0,70% 0,70% 6%,86% 6%,86% 14%,94% 14%,94% 30%,100% 30%,100% 70%,94% 70%,94% 86%,86% 86%,86% 94%,70% 94%,70% 100%,30% 100%,30% 94%,14% 94%,14% 86%,6% 86%,6% 70%,0 70%,0 30%,6% 30%,6% 14%,14% 14%,14% 6%,30% 6%);z-index:-1}
#endSeal b{font-size:calc(var(--eu)*7.5)} #endSeal small{font-size:calc(var(--eu)*2.6)}
#endSeal.in{animation:sealIn 1s cubic-bezier(.3,1.6,.5,1) forwards,bob 2.6s ease-in-out 1s infinite}
#endTitle{font-size:calc(var(--eu)*5.6);font-weight:400;text-align:center;line-height:1.15;opacity:0}
#endTitle.in{opacity:1;animation:titleIn .7s cubic-bezier(.3,1.5,.5,1)}
#endTitle .w{display:inline-block;white-space:nowrap}
#endTitle i{display:inline-block;font-style:normal;animation:wave 1.7s ease-in-out infinite;animation-delay:calc(var(--i)*70ms);text-shadow:0 calc(var(--eu)*.5) 0 rgba(0,0,0,.45)}
#endTitle i:nth-child(4n+1){color:#ff7b70}#endTitle i:nth-child(4n+2){color:#ffd23f}#endTitle i:nth-child(4n+3){color:#7fcbff}#endTitle i:nth-child(4n){color:#7ee6a1}
#endPanel{width:100%;padding:calc(var(--eu)*2.4);font-size:calc(var(--eu)*3.2);line-height:1.38;opacity:0;transform:translateY(30px) scale(.96);transition:opacity .5s,transform .5s;cursor:pointer;--u:var(--eu)}
#endPanel.in{opacity:1;transform:none}
#endText p{margin:0 0 .7em}
#endText .h{opacity:0}
#endSign{text-align:right;color:var(--gold);font-weight:400}
#endFan{position:relative;flex:none;margin:0 auto}
#btnAgain{--u:var(--eu);margin-top:calc(var(--eu)*1)}

/* ============ Занавес ============ */
#wipe{position:fixed;inset:0;z-index:2000;pointer-events:none;background:conic-gradient(from 0deg at 50% 50%,#0a1f1a,#17463a,#0a1f1a,#3a1650,#0a1f1a,#5a3a10,#0a1f1a);clip-path:circle(0% at 50% 50%)}
#wipe.in{pointer-events:auto;clip-path:circle(80% at 50% 50%);transition:clip-path .6s cubic-bezier(.6,0,.4,1)}
#wipe.out{clip-path:circle(0% at 50% 50%);transition:clip-path .65s cubic-bezier(.6,0,.4,1)}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1500}

/* ============ Анимации ============ */
@keyframes sway{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(calc(var(--cw)*-.018)) rotate(.6deg)}}
@keyframes nope{0%,100%{transform:translateX(0)}25%{transform:translateX(-6%)}75%{transform:translateX(6%)}}
@keyframes shake{0%,100%{transform:translate(0,0)}15%{transform:translate(var(--sk),calc(var(--sk)*-.6))}30%{transform:translate(calc(var(--sk)*-1),calc(var(--sk)*.5))}45%{transform:translate(calc(var(--sk)*.7),calc(var(--sk)*.7))}60%{transform:translate(calc(var(--sk)*-.6),calc(var(--sk)*-.4))}80%{transform:translate(calc(var(--sk)*.3),0)}}
@keyframes floatUp{0%{opacity:0;transform:translate(-50%,-30%) scale(.5)}15%{opacity:1;transform:translate(-50%,-60%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-160%) scale(1)}}
@keyframes bigPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}35%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-120%) scale(1)}}
@keyframes bannerIn{0%{opacity:0;transform:scale(.3) rotate(-4deg)}100%{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.3) rotate(-3deg)}100%{transform:scale(1)}}
.pop{animation:pop .3s}
@keyframes flash{from{filter:brightness(1)}to{filter:brightness(1.5)}}
@keyframes hotp{from{transform:scale(1)}to{transform:scale(1.12)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(calc(var(--u,7px)*-.8)) rotate(3deg)}}
@keyframes tapbob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-14px) rotate(4deg)}}
@keyframes tutorBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(calc(var(--u)*-1.2)) rotate(3deg)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes bubbleIn{0%{transform:scale(.7);opacity:0}100%{transform:none;opacity:1}}
@keyframes tileDrop{0%{opacity:1;transform:translateY(-120vh) rotate(calc(var(--r)*5))}60%{opacity:1}100%{opacity:1;transform:translateY(0) rotate(var(--r))}}
@keyframes sealIn{0%{transform:scale(3) rotate(-40deg);opacity:0}60%{opacity:1}100%{transform:scale(1) rotate(-8deg);opacity:1}}
@keyframes btnIn{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes titleIn{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes wave{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(var(--eu)*-.9))}}
@keyframes balloonUp{0%{transform:translate(0,0) rotate(-4deg)}25%{transform:translate(2vw,-35vh) rotate(4deg)}50%{transform:translate(-2vw,-70vh) rotate(-4deg)}75%{transform:translate(2vw,-105vh) rotate(4deg)}100%{transform:translate(0,-145vh) rotate(-4deg)}}
@media (prefers-reduced-motion:reduce){.sway,.blind-token,#tutorCard{animation:none}}

/* атлас спрайтов (пиксель-арт, без сглаживания) */
.px{position:absolute;inset:0;image-rendering:pixelated;background-repeat:no-repeat}
.face.mode-atlas{background:none;border:0;box-shadow:none;overflow:visible}
.flip>.back.atlas{background:none;border:0;overflow:visible}
.card.atl .face,.card.atl .flip>.back{box-shadow:none}
.card.atl{filter:drop-shadow(0 calc(var(--cw)*.04) 0 rgba(0,0,0,.4))}

/* ============ Проход «как в Balatro»: пиксельные углы, вложенные тёмные плашки ============ */
:root{--p:calc(var(--u)*.5);--ink:#1e2b2d;--inner:#1e2b2d}
.panel,.btn,.box,#bubble,.tile{border:0;border-radius:0}
.panel{background:#374244;box-shadow:0 calc(var(--p)*-1) 0 0 var(--ink),0 var(--p) 0 0 var(--ink),calc(var(--p)*-1) 0 0 0 var(--ink),var(--p) 0 0 0 var(--ink),0 calc(var(--p)*2.6) 0 0 var(--ink)}
.btn{box-shadow:0 calc(var(--p)*-1) 0 0 var(--ink),0 var(--p) 0 0 var(--ink),calc(var(--p)*-1) 0 0 0 var(--ink),var(--p) 0 0 0 var(--ink),0 calc(var(--p)*2.6) 0 0 var(--ink),inset 0 calc(var(--u)*-.8) 0 var(--cd);padding-bottom:calc(var(--u)*.8)}
.btn:active:not(:disabled){transform:translateY(calc(var(--u)*.6));box-shadow:0 calc(var(--p)*-1) 0 0 var(--ink),0 var(--p) 0 0 var(--ink),calc(var(--p)*-1) 0 0 0 var(--ink),var(--p) 0 0 0 var(--ink),inset 0 calc(var(--u)*-.2) 0 var(--cd)}
.btn:hover:not(:disabled){transform:none;filter:brightness(1.12)}
.box{box-shadow:0 calc(var(--p)*-1) 0 0 var(--ink),0 var(--p) 0 0 var(--ink),calc(var(--p)*-1) 0 0 0 var(--ink),var(--p) 0 0 0 var(--ink)}
.box.hot{box-shadow:0 0 0 calc(var(--u)*.7) #fff}
#blind{padding:0}
.blind-head{border-bottom:0;box-shadow:0 calc(var(--p)*-1) 0 0 var(--ink) inset;padding-top:calc(var(--u)*1.1)}
.blind-body{background:var(--inner);margin:calc(var(--u)*.9);padding:calc(var(--u)*1) calc(var(--u)*1.2)}
#handName{background:var(--inner);padding:calc(var(--u)*.7) calc(var(--u)*1)}
#score{padding:calc(var(--u)*1)}
#score .lbl{flex:none}
#roundScore{flex:1;background:var(--inner);text-align:right;padding:calc(var(--u)*.6) calc(var(--u)*1.2)}
.stat{padding:calc(var(--u)*.8)}
.stat b{background:var(--inner);width:100%;text-align:center;padding:calc(var(--u)*.4) 0}
.stat .lbl{color:#fff}
#bubble{box-shadow:0 calc(var(--p)*-1) 0 0 var(--ink),0 var(--p) 0 0 var(--ink),calc(var(--p)*-1) 0 0 0 var(--ink),var(--p) 0 0 0 var(--ink),0 calc(var(--p)*2.6) 0 0 var(--ink)}
#bubble::before{display:none}
#modalBox{padding:calc(var(--u)*3)}
.hands .hn{background:var(--inner);padding:calc(var(--u)*.6) calc(var(--u)*1.4);min-width:calc(var(--u)*24)}
html.portrait #handName{background:var(--inner)}

#deckpile .back{position:absolute;inset:0}
#deckpile .back:nth-child(1){transform:translate(calc(var(--u)*.7),calc(var(--u)*.9));filter:brightness(.75)}
#deckpile .back:nth-child(2){transform:translate(calc(var(--u)*.35),calc(var(--u)*.45));filter:brightness(.88)}
.tapcard .back,#deckpile .back{transform-style:flat}
.tapcard .back.atlas,#deckpile .back.atlas{background:none;border:0}

/* ============ Шейдеры ============ */
#bgl{position:fixed;inset:0;width:100%;height:100%;z-index:0;image-rendering:pixelated;display:none}
.cfx{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;border-radius:inherit;pointer-events:none}
.card.dissolving .px{visibility:hidden}
.box{position:relative;z-index:0;isolation:isolate}
.flame{position:absolute;left:0;bottom:0;width:100%;height:230%;z-index:-1;image-rendering:pixelated;pointer-events:none}
.popup.red{color:#ff9a90}
.card.ed-foil:not(.fxon) .face{box-shadow:inset 0 0 0 calc(var(--cw)*.04) #7fcbff}
.card.ed-holo:not(.fxon) .face{box-shadow:inset 0 0 0 calc(var(--cw)*.04) #ff7ad9}
.card.ed-polychrome:not(.fxon) .face{box-shadow:inset 0 0 0 calc(var(--cw)*.04) #ffd23f}
#endTitle i{text-shadow:0 calc(var(--eu)*.5) 0 #1e2b2d,calc(var(--eu)*.3) 0 0 #1e2b2d,calc(var(--eu)*-.3) 0 0 #1e2b2d,0 calc(var(--eu)*-.3) 0 #1e2b2d}

#tutorCard{}
#bubbleText .h{opacity:0}
.cap{position:absolute;transform:translateX(-50%);text-align:center;font-size:calc(var(--eu)*3.4);color:#fff;text-shadow:0 calc(var(--eu)*.4) 0 #1e2b2d,calc(var(--eu)*.25) 0 0 #1e2b2d,calc(var(--eu)*-.25) 0 0 #1e2b2d;opacity:0;transition:opacity .5s .6s;white-space:nowrap}
.cap.on{opacity:1}

#btnTutor{min-width:calc(var(--u)*6);padding:0 calc(var(--u)*1.4)}

/* пиксельные шарики */
.balloon{background:none!important;border-radius:0!important;color:var(--c);height:auto!important;aspect-ratio:11/16;opacity:1;filter:drop-shadow(0 calc(var(--eu)*.4) 0 rgba(0,0,0,.25))}
.balloon::after{display:none}
.balloon svg{width:100%;height:100%;display:block}
/* учитель-джокер из атласа */
#tutorCard .tface.atl{background:none;border:0;padding:0;position:relative}

/* ПК / широкий экран: поздравление в две колонки */
@media (min-aspect-ratio:23/20){
  .endinner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-areas:"seal panel" "title panel" "fan panel" "btn panel";column-gap:calc(var(--eu)*4);row-gap:calc(var(--eu)*1.6);align-items:center;width:min(96%,calc(var(--eu)*140))}
  #endSeal{grid-area:seal;justify-self:center}
  #endTitle{grid-area:title;font-size:calc(var(--eu)*4.6)}
  #endPanel{grid-area:panel;font-size:calc(var(--eu)*2.7)}
  #endFan{grid-area:fan;justify-self:center}
  #btnAgain{grid-area:btn;justify-self:center}
}