:root{color-scheme:dark;--table-center: #2f8a4e;--table-edge: #0f3d22;--panel: rgba(16, 22, 20, .84);--panel-solid: #161d1a;--soft: rgba(255, 255, 255, .07);--line: rgba(255, 255, 255, .13);--text: #f3f5f1;--muted: rgba(243, 245, 241, .62);--accent: #f5c451;--accent-ink: #2b1e00;--ok: #4cc26e;--danger: #ff9180;--inset-top: 52px;--inset-bottom: 76px;--safe-top: env(safe-area-inset-top, 0px);--safe-right: env(safe-area-inset-right, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:radial-gradient(circle at 50% 38%,var(--table-center),var(--table-edge) 75%);color:var(--text);overscroll-behavior:none;touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}svg{display:block}#game{position:fixed;inset:0;display:block;width:100%;height:100%}#loader{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:radial-gradient(circle at 50% 38%,#2f8a4e,#0f3d22 75%);font-size:16px;color:#fffc;transition:opacity .3s ease}#loader.hidden{opacity:0;pointer-events:none}.loader-card{width:34px;height:48px;border-radius:5px;background:repeating-radial-gradient(circle at 50% 50%,#1f6f86 0 3px,#2c8aa3 3px 4px);border:2px solid #f0faff;animation:turn 1.4s ease-in-out infinite}@keyframes turn{0%{transform:perspective(200px) rotateY(0)}to{transform:perspective(200px) rotateY(360deg)}}.hud-top{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;gap:8px;box-sizing:border-box;padding:calc(6px + var(--safe-top)) calc(8px + var(--safe-right)) 6px calc(8px + var(--safe-left));background:linear-gradient(to bottom,#00000061,#0000001f)}.pill-button{flex:none;display:flex;align-items:center;gap:2px;height:40px;padding:0 14px 0 8px;border:1px solid var(--line);border-radius:12px;background:#00000042;color:var(--text);font-size:15px;font-weight:600}.pill-button svg,.icon-button svg{width:20px;height:20px}.icon-button{flex:none;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--line);border-radius:12px;background:#00000042;color:var(--text)}.icon-button.is-off{color:var(--muted)}.icon-button.ghost{border-color:transparent;background:transparent}.pill-button:hover,.icon-button:hover{background:#ffffff1a}.pill-button:active,.icon-button:active{transform:scale(.95)}.hud-center{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center}.hud-stats{display:flex;gap:20px}.stat{display:flex;flex-direction:column;align-items:center;line-height:1.15;min-width:34px}.stat-label{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}.stat b{font-size:16px;font-variant-numeric:tabular-nums}.hud-label{max-width:100%;margin-top:1px;overflow:hidden;font-size:11px;color:var(--muted);white-space:nowrap;text-overflow:ellipsis}.hud-right{flex:none;display:flex;gap:6px}@media (max-width: 400px){.pill-button span{display:none}.pill-button{width:40px;padding:0;justify-content:center}.hud-stats{gap:14px}}@media (max-width: 330px){.hud-right [data-act=sound]{display:none}}.hud-bar{position:fixed;left:50%;bottom:calc(8px + var(--safe-bottom));z-index:10;display:flex;gap:2px;padding:5px;transform:translate(-50%);border:1px solid var(--line);border-radius:18px;background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 26px #00000059}.tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:78px;height:52px;padding:0;border:0;border-radius:13px;background:transparent;color:var(--text);font-size:11.5px;font-weight:600;transition:background .12s ease,transform .12s ease}.tool svg{width:22px;height:22px}.tool:hover{background:#ffffff14}.tool:active{transform:scale(.94)}.tool:disabled{opacity:.35;cursor:default}.tool-auto{display:none;background:var(--accent);color:var(--accent-ink)}.tool-auto:hover{background:#ffd36b}.hud-bar.has-auto .tool-auto{display:flex;animation:pop .3s ease}.tool.is-nudged{color:var(--accent)}.tool.is-nudged svg{animation:nudge 1.4s ease-in-out infinite}@keyframes nudge{0%,to{transform:none}20%{transform:translateY(-3px) rotate(-8deg)}40%{transform:translateY(0) rotate(8deg)}60%{transform:none}}@keyframes pop{0%{transform:scale(.6);opacity:0}}@media (max-width: 360px){.tool{width:68px}}body.rail .hud-top{padding-top:calc(4px + var(--safe-top));padding-bottom:4px}body.rail .pill-button,body.rail .icon-button{height:34px}body.rail .icon-button{width:34px}body.rail .hud-label{display:none}body.rail .hud-bar{left:auto;right:calc(6px + var(--safe-right));top:calc(50% + 18px);bottom:auto;flex-direction:column;padding:4px;transform:translateY(-50%)}body.rail .tool{width:64px;height:48px;font-size:10px}.screen{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:calc(12px + var(--safe-top)) calc(12px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(12px + var(--safe-left));background:#00000073;opacity:0;visibility:hidden;transition:opacity .18s ease,visibility 0s linear .18s}.screen.is-open{opacity:1;visibility:visible;transition:opacity .18s ease}.screen-card{display:flex;flex-direction:column;width:100%;max-width:420px;max-height:100%;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:var(--panel-solid);box-shadow:0 24px 64px #00000080;transform:translateY(14px) scale(.98);transition:transform .22s ease}.screen.is-open .screen-card{transform:none}.screen-card.wide{max-width:520px}.screen-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 12px 4px 20px}.screen-head h2{margin:0;font-size:20px}.screen-body{padding:8px 20px 20px;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}.menu-screen{background:linear-gradient(#0000004d,#00000080);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.menu-card{max-width:560px;border:0;background:transparent;box-shadow:none}.menu-card .screen-head{display:none}.menu-card .screen-body{padding:8px 6px 12px}.menu{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}.logo{width:150px;height:112px;overflow:visible;filter:drop-shadow(0 8px 14px rgba(0,0,0,.35))}.logo-cards rect{fill:#fff;stroke:#00000040;stroke-width:1}.logo-suit{fill:#c8102e}.logo-lace{fill:none;stroke:#ffffff59;stroke-width:2;stroke-dasharray:2 5;stroke-linecap:round}.logo-lace.inner{stroke-dasharray:1 7;stroke-width:3}.menu h1{margin:0;font-size:clamp(30px,9vw,42px);font-weight:800;letter-spacing:.01em;line-height:1.05;text-shadow:0 3px 14px rgba(0,0,0,.35)}.menu h1 .brand{display:block;margin-top:6px;color:var(--accent);font-size:.6em;font-weight:700;letter-spacing:.22em;text-transform:uppercase}.menu-sub{margin:0 0 8px;color:var(--muted);font-size:13px;letter-spacing:.16em;text-transform:uppercase}.continue{display:flex;align-items:center;gap:14px;width:100%;max-width:400px;box-sizing:border-box;padding:12px 18px 12px 12px;border:0;border-radius:16px;background:var(--accent);color:var(--accent-ink);text-align:left;box-shadow:0 10px 24px #0000004d;transition:transform .12s ease}.continue:active,.level:active,.primary-button:active,.secondary-button:active,.chip:active{transform:scale(.97)}.continue-icon{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:#0000001f}.continue-icon svg{width:20px;height:20px}.continue-text b{display:block;font-size:18px}.continue-text small{display:block;margin-top:2px;font-size:12.5px;opacity:.78}.menu-section{margin:10px 0 0;color:var(--muted);font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}.level{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 6px 12px;border:1px solid var(--line);border-radius:16px;background:#00000052;color:var(--text);transition:background .12s ease,transform .12s ease}.level:hover{background:#00000073}.level b{font-size:17px}.level-word{color:var(--accent);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}.level small{color:var(--muted);font-size:11.5px}.mini-fan{display:flex;align-items:flex-end;justify-content:center;height:38px;margin-bottom:4px;padding-left:12px}.mini-fan .mc{display:flex;flex-direction:column;align-items:center;justify-content:center;width:24px;height:34px;margin-left:-12px;border-radius:4px;background:#fbfbf7;box-shadow:0 2px 5px #00000059;font-style:normal;transform-origin:50% 100%}.mini-fan .mc b{font-size:11px;line-height:1}.mini-fan .mc svg{width:11px;height:11px;margin-top:1px}.mini-fan .mc.back{background:repeating-radial-gradient(circle at 50% 50%,#1f6f86 0 3px,#2c8aa3 3px 4px);border:2px solid #f0faff}.suits{display:flex;align-items:center;gap:2px;height:28px;margin-bottom:2px}.suits svg{width:21px;height:21px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}.daily{display:flex;flex-direction:column;gap:10px;width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:#00000052;text-align:left}.daily-head{display:flex;align-items:center;gap:12px}.daily-head svg{flex:none;width:26px;height:26px;color:var(--accent)}.daily-head b{display:block;font-size:15px}.daily-head small{color:var(--muted);font-size:12px}.daily-levels{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}@media (max-width: 400px){.level b{font-size:15px}.level-word{font-size:11px}.chip{font-size:12px}}.with-icon{display:flex;align-items:center;gap:8px}.with-icon svg{width:18px;height:18px;opacity:.85}.chip{display:flex;align-items:center;justify-content:center;gap:4px;height:38px;border:1px solid var(--line);border-radius:11px;background:var(--soft);color:var(--text);font-size:13px;font-weight:600}.chip svg{width:16px;height:16px;color:var(--ok)}.chip.is-done{border-color:#4cc26e8c;background:#4cc26e29}.menu-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-top:4px}.link-button{display:inline-flex;align-items:center;gap:6px;padding:9px 12px;border:0;border-radius:10px;background:transparent;color:var(--text);font-size:14px;font-weight:600}.link-button svg{width:18px;height:18px;opacity:.85}.link-button:hover{background:#ffffff14}.link-button.center{display:flex;margin:4px auto 0}.link-button.danger{color:var(--danger)}@media (max-height: 640px){.logo{width:110px;height:82px}.menu h1{font-size:32px}}@media (max-height: 520px){.logo{display:none}.menu{gap:8px}.menu h1{font-size:30px}.menu-sub{margin-bottom:0;font-size:11px}.continue{padding:8px 16px 8px 8px}.continue-icon{width:36px;height:36px}.menu-section{margin-top:2px}.level{padding:8px 6px;gap:2px}.suits{height:22px}}.primary-button,.secondary-button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 18px;border-radius:14px;font-size:16px;transition:transform .12s ease,background .12s ease}.primary-button{border:0;background:var(--accent);color:var(--accent-ink);font-weight:700}.primary-button:hover{background:#ffd36b}.secondary-button{border:1px solid var(--line);background:var(--soft);color:var(--text);font-weight:600}.secondary-button:hover{background:#ffffff1f}.primary-button svg,.secondary-button svg{width:20px;height:20px}.stack{display:flex;flex-direction:column;gap:10px;margin-top:14px}.note{margin:12px 0 0;color:var(--muted);font-size:13px;text-align:center}.lead{margin:4px 0 0;line-height:1.45;opacity:.88}.segmented{display:grid;grid-auto-columns:1fr;grid-auto-flow:column;gap:4px;padding:4px;border-radius:12px;background:var(--soft)}.segmented button{height:38px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-size:14px;font-weight:600}.segmented button[aria-checked=true]{background:#ffffff29;color:var(--text);box-shadow:0 1px 4px #00000040}.daily-links{display:flex;flex-wrap:wrap;gap:2px 6px;margin:-2px -8px -4px}.daily-links .link-button{padding:7px 8px;font-size:13px}.tour-date{display:flex;align-items:center;gap:8px;margin:0 0 10px;color:var(--muted);font-size:14px}.tour-date svg{width:18px;height:18px;color:var(--accent)}.tour-how{margin:0 0 12px;padding:10px 14px;border-radius:14px;background:var(--soft)}.tour-how summary{cursor:pointer;color:var(--accent);font-weight:600}.how{margin:8px 0 2px;padding-left:18px}.how li{margin:6px 0;font-size:14px;line-height:1.45;color:#f3f5f1e0}.tour-table{margin:12px 0 0;padding:0;list-style:none}.tour-table li{display:grid;grid-template-columns:34px 1fr auto 56px;align-items:center;gap:8px;padding:9px 10px;border-radius:10px}.tour-table li:nth-child(odd){background:#ffffff0a}.tour-table li.is-you{background:#f5c4512e;box-shadow:inset 0 0 0 1px #f5c45180}.tour-rank{color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}.tour-table li:nth-child(-n+3) .tour-rank{color:var(--accent);font-weight:700}.tour-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.tour-time{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}.tour-score{text-align:right;font-variant-numeric:tabular-nums}.tour-empty{margin:16px 0 4px;color:var(--muted);text-align:center;line-height:1.45}.tour-login{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--soft);font-size:14px}.win-screen{background:#0000001f}.win-card{max-width:380px;background:#161d1af0}.win{text-align:center}.win-trophy{display:grid;place-items:center;margin:2px auto 4px;width:76px;height:76px;border-radius:50%;background:radial-gradient(circle,rgba(245,196,81,.28),transparent 70%);color:var(--accent);animation:pop .45s ease}.win-trophy svg{width:48px;height:48px}.win-label{margin:0 0 14px;color:var(--muted);font-size:14px}.win-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.win-grid>div{display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 4px;border-radius:14px;background:var(--soft)}.win-grid span{color:var(--muted);font-size:12px}.win-grid b{font-size:22px;font-variant-numeric:tabular-nums}.record{padding:1px 7px;border-radius:6px;background:var(--accent);color:var(--accent-ink);font-size:10.5px;font-style:normal;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.win-bonus{margin:12px 0 0;color:var(--muted);font-size:14px}.win-streak{margin:12px 0 0;color:var(--accent);font-weight:600}.settings{display:flex;flex-direction:column}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;padding:13px 0;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--text);text-align:left}.setting-text b{display:flex;align-items:center;gap:8px;font-size:15px}.setting-text small,.setting-block small{display:block;margin-top:2px;color:var(--muted);font-size:12.5px;line-height:1.35}.switch{position:relative;flex:none;width:46px;height:28px;border-radius:14px;background:#fff3;transition:background .18s ease}.switch i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0000004d;transition:transform .18s ease}[aria-checked=true]>.switch{background:var(--ok)}[aria-checked=true]>.switch i{transform:translate(18px)}.setting-block{display:flex;flex-direction:column;gap:10px;padding:13px 0;border-bottom:1px solid var(--line)}.setting-block:last-child{border-bottom:0}.setting-block>b{font-size:15px}.swatches,.backs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.swatch{display:flex;align-items:flex-end;justify-content:center;height:56px;padding:0 0 6px;border:2px solid transparent;border-radius:12px;color:#fff;font-size:11.5px;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.6)}.back-choice{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0;border:2px solid transparent;border-radius:12px;background:var(--soft);color:var(--text);font-size:11.5px;font-weight:600}.swatch[aria-pressed=true],.back-choice[aria-pressed=true]{border-color:var(--accent)}.mini-suits{display:inline-flex;gap:1px;padding:2px 4px;border-radius:6px;background:#fff}.mini-suits svg{width:13px;height:13px}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 6px}.stat-cell{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;border-radius:14px;background:var(--soft);text-align:center}.stat-cell b{font-size:20px;font-variant-numeric:tabular-nums}.stat-cell span{color:var(--muted);font-size:11.5px;line-height:1.25}.rules h3{margin:18px 0 6px;color:var(--accent);font-size:16px}.rules h3:first-child{margin-top:2px}.rules p,.rules li{color:#f3f5f1e0;font-size:14.5px;line-height:1.5}.rules p{margin:0 0 8px}.rules ul{margin:0;padding-left:20px}.rules li{margin:4px 0}.toast{position:fixed;left:50%;top:calc(var(--inset-top) + 10px);z-index:40;max-width:calc(100% - 32px);box-sizing:border-box;padding:10px 16px;border-radius:12px;background:#0c0e0ee6;color:var(--text);font-size:14px;font-weight:600;text-align:center;box-shadow:0 8px 22px #00000059;opacity:0;pointer-events:none;transform:translate(-50%,-8px);transition:opacity .2s ease,transform .2s ease}.toast.is-visible{opacity:1;transform:translate(-50%)}.tips{position:fixed;left:50%;bottom:calc(var(--inset-bottom) + 10px);z-index:30;width:min(440px,calc(100% - 24px));box-sizing:border-box;padding:16px 18px 14px;border:1px solid var(--line);border-radius:18px;background:var(--panel-solid);box-shadow:0 14px 40px #00000073;opacity:0;pointer-events:none;transform:translate(-50%,16px);transition:opacity .25s ease,transform .25s ease}.tips.is-open{opacity:1;pointer-events:auto;transform:translate(-50%)}.tips-title{font-size:16px}.tips ol{margin:8px 0 12px;padding-left:20px}.tips li{margin:6px 0;font-size:14px;line-height:1.4}.tips-buttons{display:flex;align-items:center;gap:10px}.tips-buttons .primary-button{flex:1;min-height:44px}body.rail .tips{bottom:calc(12px + var(--safe-bottom));left:calc(50% - 38px)}@media (max-height: 560px){.screen-head{padding-top:10px}.screen-head h2{font-size:18px}.win-trophy{width:48px;height:48px;margin-bottom:0}.win-trophy svg{width:32px;height:32px}.win-label{margin-bottom:8px}.win-grid>div{padding:8px 4px}.win-grid b{font-size:18px}.win-streak{margin-top:8px}.stack{gap:8px;margin-top:10px}.primary-button,.secondary-button{min-height:44px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}}.levels.games{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.levels.games .game-tile{grid-column:span 2;min-width:0}.levels.games .game-tile:nth-child(4),.levels.games .game-tile:nth-child(5){grid-column:span 3}@media (max-width: 460px){.levels.games{grid-template-columns:repeat(2,minmax(0,1fr))}.levels.games .game-tile,.levels.games .game-tile:nth-child(4){grid-column:span 1}.levels.games .game-tile:nth-child(5){grid-column:span 2}}.game-tile b{overflow-wrap:anywhere}.daily-levels{align-items:center}.chip.daily-play{font-weight:700;padding-inline:18px}.daily-streak{font-size:13px;opacity:.8;white-space:nowrap}.rank-card{display:grid;gap:6px;margin-top:12px;padding:12px 14px;border-radius:14px;background:#ffffff12;border:1px solid rgba(255,255,255,.1);text-align:left}.rank-head{display:flex;align-items:center;gap:8px}.rank-head svg{width:20px;height:20px;color:#ffd666;flex:none}.rank-bar{height:6px;border-radius:3px;background:#ffffff1f;overflow:hidden}.rank-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ffd666,#ffb347)}.rank-card small{opacity:.75;font-size:13px}.segmented.game-tabs{display:flex;flex-wrap:wrap;gap:4px}.segmented.game-tabs button{flex:1 1 auto;min-width:0;padding-inline:8px;white-space:nowrap}.sheet-game{margin:0 0 10px;text-align:center;font-weight:700;font-size:17px;opacity:.9}.deal-number{display:grid;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}.deal-number label{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 10px}.deal-number label small{opacity:.7;font-size:13px}.deal-number-row{display:flex;gap:8px}.deal-number-row input{flex:1 1 auto;min-width:0;height:46px;padding:0 14px;border-radius:12px;border:1px solid rgba(255,255,255,.22);background:#00000040;color:inherit;font:inherit;font-size:18px;font-weight:700}.deal-number-row input:focus{outline:2px solid #ffd666;outline-offset:1px}.deal-number-row .secondary-button{flex:none;width:auto;padding-inline:18px}.deal-error{color:#ff9b8f;font-size:13px}.win-rank{display:flex;align-items:center;justify-content:center;gap:8px;margin:8px 0 0;font-weight:700;color:#ffd666}.win-rank svg{width:20px;height:20px}.win-bonus svg{width:16px;height:16px;margin-right:4px;vertical-align:-2px}.dead-banner{position:fixed;left:50%;bottom:calc(var(--inset-bottom, 90px) + 10px);z-index:5;display:grid;gap:10px;width:min(520px,calc(100vw - 24px));padding:14px 16px;border-radius:16px;background:#280e0ef0;border:1px solid rgba(255,140,120,.45);box-shadow:0 10px 30px #00000073;color:#fff;transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}.dead-banner.is-open{transform:translate(-50%);opacity:1;pointer-events:auto}.dead-text{display:grid;gap:4px}.dead-text b{font-size:16px}.dead-text span{font-size:14px;opacity:.85;line-height:1.35}.dead-actions{display:flex;flex-wrap:wrap;gap:8px}.dead-actions button{flex:1 1 140px;width:auto;min-height:42px}body.rail .dead-banner{bottom:12px;left:calc(50% - 50px)}