*{box-sizing:border-box;margin:0}
html,body{height:100%;overflow:hidden;background:#cfd6e0;font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;color:#1d2433;user-select:none;-webkit-user-select:none}
#c{display:block;width:100%;height:100%;touch-action:none;transform-origin:50% 50%;transition:transform .9s cubic-bezier(.22,.8,.2,1)}
#score{position:fixed;left:16px;bottom:16px;background:#fff;border-radius:12px;padding:10px 16px;box-shadow:0 2px 10px #0002;font-weight:700;font-size:15px}
#score b{font-size:26px;display:block;line-height:1.1}
#board{position:fixed;right:16px;top:16px;background:#ffffffee;border-radius:12px;padding:10px 14px;box-shadow:0 2px 10px #0002;font-size:14px;min-width:170px}
#board div{display:flex;align-items:center;gap:8px;padding:2px 0}
#board i{width:10px;height:10px;border-radius:3px;flex:none}
#board span{flex:1}
#mm{display:block;position:fixed;left:16px;top:16px;width:150px;height:150px;border-radius:12px;border:3px solid #fff;box-shadow:0 2px 10px #0002;background:#f7f8fa;pointer-events:none}
/* игра на фоне меню: наклонённая карта в 3D, при старте плавно выравнивается */
body.menu #c{transform:perspective(1500px) rotateX(54deg) rotateZ(-32deg) translateY(-6%)}
#c3{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
#fade{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity .9s;background:radial-gradient(ellipse 85% 80% at 50% 50%,transparent 58%,#cfd6e0 100%)}
body.menu #fade{opacity:1}
#score,#board,#mm{transition:opacity .4s}
body.menu #score,body.menu #board,body.menu #mm{opacity:0;pointer-events:none}
#menu{position:fixed;inset:0;transition:opacity .35s,visibility .35s}
#menu.hide{opacity:0;visibility:hidden;pointer-events:none}
.off{display:none!important}
.chip{background:#fff;border-radius:18px;box-shadow:0 6px 24px #1d243322;height:56px;display:flex;align-items:center;gap:10px;padding:0 14px;font-weight:800;font-size:17px;color:#1d2433}
.side{width:190px}
.top{position:absolute;left:20px;right:20px;top:20px;display:flex;justify-content:space-between;align-items:center}
.logo{font-size:26px;font-weight:900;letter-spacing:-.5px;text-shadow:0 2px 0 #fff9}
.nickchip canvas{width:36px;height:36px;flex:none;border-radius:10px;background:#eef1f6}
#nick{font:inherit;font-weight:800;font-size:17px;border:0;outline:0;background:transparent;color:#1d2433;width:100%;min-width:0;user-select:text;-webkit-user-select:text}
#nick::placeholder{color:#9aa4b5}
.coinchip{justify-content:center;font-size:20px}
.lside{position:absolute;left:20px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px}
.lbtn{justify-content:center;cursor:pointer;border:0;font-family:inherit}
.lbtn:active{transform:scale(.97);box-shadow:0 3px 12px #1d243322}
.coin{width:24px;height:24px;display:inline-block;flex:none;vertical-align:middle}
.coin.s{width:16px;height:16px}
.center{position:absolute;left:50%;top:84%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:18px;transition:transform .35s}
#menu.hide .center{transform:translate(-50%,-50%) scale(.94)}
.stagewrap{position:relative;height:0}
#buy{width:100%;padding:11px;font-size:16px}
#buy.buy{background:#27ae60;box-shadow:0 4px 0 #1b7a43}
#buy:disabled{background:#c5ccd8;box-shadow:0 4px 0 #a2abbb;cursor:default}
.big{width:min(300px,70vw);font-size:24px;padding:18px}
.res{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:14px;text-align:center;white-space:nowrap}
.res b{display:block;font-size:26px;font-weight:900;margin-bottom:6px;text-shadow:0 2px 0 #fff9}
#rb{display:flex;gap:6px;justify-content:center}
#rb span{background:#fff;border-radius:999px;padding:5px 12px;font-weight:700;font-size:13px;display:flex;align-items:center;gap:4px;box-shadow:0 3px 12px #1d243322}
.modal{position:absolute;inset:0;background:#1d243366;display:flex;align-items:center;justify-content:center;padding:16px}
.mcard{background:#fff;border-radius:24px;padding:24px;width:100%;max-width:380px;max-height:100%;overflow:auto;display:flex;flex-direction:column;gap:16px;box-shadow:0 12px 50px #0004}
.mcard h2{font-size:24px;font-weight:900}
.mcard>*{flex-shrink:0} /* в низком окне карточка скроллится, а не сжимает вкладки под превью */
#sktabs{position:relative;z-index:1}
@media(max-height:720px){.pv2{width:150px;height:150px}}
.mhead{display:flex;justify-content:space-between;align-items:center}
.bal2{display:flex;align-items:center;gap:8px;background:#fff3cc;border-radius:999px;padding:6px 14px 6px 8px;font-weight:800;font-size:18px}
.pv2{width:200px;height:200px;flex:none;align-self:center;position:relative;background:#eef1f6;border-radius:22px}
#prev2{position:absolute;inset:0;width:100%;height:100%}
#skname2{text-align:center;font-weight:900;font-size:20px;margin-top:-6px}
#skins{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tile{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px 5px;border-radius:14px;background:#f1f4f8;color:#566074;font-size:11px;font-weight:800;box-shadow:none;border:3px solid transparent}
.tile:active{transform:none;box-shadow:none}
.tile.sel{border-color:#1d2433;background:#fff}
.tile canvas{width:52px;height:52px;display:block}
.tile span{display:flex;align-items:center;gap:3px;height:14px}
.ghost{background:#eef1f6;color:#1d2433;box-shadow:0 4px 0 #cfd6e0}
.ghost:active{box-shadow:0 1px 0 #cfd6e0}
.row{display:flex;flex-direction:column;gap:8px;font-weight:800;font-size:14px;color:#566074}
.seg{display:flex;background:#eef1f6;border-radius:12px;padding:4px;gap:4px}
.seg button{flex:1;padding:9px 4px;font-size:14px;border-radius:9px;background:transparent;color:#566074;box-shadow:none}
.seg button.on{background:#fff;color:#1d2433;box-shadow:0 2px 8px #1d243322}
.seg button:active{transform:none}
.sw{flex-direction:row;justify-content:space-between;align-items:center}
.sw input{width:22px;height:22px;accent-color:#2f7df6}
.help{font-size:13px;line-height:1.5;color:#6b7589;background:#f3f5f9;border-radius:14px;padding:12px 14px;font-weight:600}
.danger{background:#fff;color:#d33;box-shadow:none;border:2px solid #f3c4c4;font-size:14px;padding:10px}
.danger:active{transform:none}
button{font:inherit;font-weight:800;font-size:18px;border:0;border-radius:14px;padding:14px 36px;background:#2f7df6;color:#fff;cursor:pointer;box-shadow:0 4px 0 #1c57b5}
button:active{transform:translateY(3px);box-shadow:0 1px 0 #1c57b5}
button:focus-visible{outline:3px solid #1d2433;outline-offset:3px}
/* вход и регистрация */
#auth{position:fixed;inset:0;z-index:50;background:#cfd6e0e6;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:16px}
#auth .atitle{text-align:center;font-size:28px;letter-spacing:-.5px}
#aform{display:flex;flex-direction:column;gap:12px}
.fld{font:inherit;font-weight:700;font-size:16px;width:100%;border:2px solid #e2e6ee;border-radius:14px;padding:13px 14px;outline:0;background:#f7f8fa;color:#1d2433;user-select:text;-webkit-user-select:text}
.fld:focus{border-color:#2f7df6;background:#fff}
.fld::placeholder{color:#9aa4b5}
.ahint{font-size:12px;line-height:1.4;color:#6b7589;font-weight:600}
#aerr{color:#d33;font-size:13px;font-weight:700;min-height:18px}
#asub{width:100%}
#asub:disabled{background:#c5ccd8;box-shadow:0 4px 0 #a2abbb;cursor:default}
.mode{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;padding:16px 12px;font-size:22px}
.mode span{font-size:13px;font-weight:700;opacity:.85}
.mode.alt{background:#27ae60;box-shadow:0 4px 0 #1b7a43}
.mode.alt:active{box-shadow:0 1px 0 #1b7a43}
.mode:disabled{background:#c5ccd8;box-shadow:0 4px 0 #a2abbb;cursor:default}
#lobby{position:fixed;inset:0;z-index:40;background:#cfd6e0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
.lcount{font-size:clamp(28px,6vw,52px);font-weight:900;letter-spacing:-.5px}
.lcount b{font-size:1.5em;display:block;line-height:1.05}
.ltime{position:absolute;left:0;right:0;bottom:11%;font-size:clamp(16px,3vw,22px);font-weight:800;color:#566074}
.ltime b{color:#1d2433;font-variant-numeric:tabular-nums}
.lcancel{position:absolute;bottom:4%;background:transparent;color:#6b7589;box-shadow:none;font-size:15px;padding:8px 18px}
.lcancel:active{transform:none;box-shadow:none}
#count{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;font-size:min(28vw,220px);font-weight:900;color:#1d2433;text-shadow:0 4px 0 #fff9;pointer-events:none}
#ob{display:flex;flex-direction:column;gap:8px}
#ob span{display:flex;justify-content:space-between;align-items:center;gap:6px;background:#f3f5f9;border-radius:12px;padding:10px 14px;font-weight:700;font-size:15px;color:#566074}
#ob b{color:#1d2433;font-size:17px}
@media(max-width:700px){.center{top:79%}.side{width:150px}.chip{height:48px;font-size:15px}.lside{top:auto;bottom:20px;right:20px;transform:none;flex-direction:row;justify-content:center}.logo{display:none}.coinchip{font-size:17px}}
@media(max-width:600px){#mm{width:110px;height:110px}#board{min-width:130px;font-size:12px;padding:8px 10px}}
.idrow{background:#f3f5f9;border-radius:14px;padding:12px 14px;cursor:pointer;gap:4px;user-select:none}
.idrow .idval{display:flex;align-items:center;gap:10px;color:#1d2433;font-size:20px;font-weight:900}
.idrow small{font-size:12px;font-weight:600;color:#8a93a6}
.mybadge{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:800;color:#566074}
.mybadge.off{display:none}
svg.bd{width:14px;height:14px;vertical-align:-2px;margin-left:4px;flex:none}
.mybadge svg.bd{margin-left:0}