/* Tearbound front door. Supplied artwork keeps its original proportions. */
body{background:#070f1d}
.intro-active .game{visibility:hidden}
.tearbound-logo{display:block;aspect-ratio:2280/1380;background:url('Logo%20tearbound.png') center/136.6% auto no-repeat;image-rendering:pixelated}
#introSplash{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:#070f1d;opacity:1}
#introSplash .tearbound-logo{width:min(680px,78vw);opacity:0;transform:scale(.97)}
#introSplash.play .tearbound-logo{animation:tearbound-reveal 2.8s ease both}
#introSplash.play{animation:tearbound-away .55s ease 2.8s forwards}
@keyframes tearbound-reveal{0%{opacity:0;transform:scale(.97)}22%,72%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes tearbound-away{to{opacity:0}}
.main-screen{padding:0;background:radial-gradient(ellipse at 50% 36%,#173037 0,transparent 53%),#070f1d;backdrop-filter:none}
.main-screen:before{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,#7abfbf22 1px,transparent 1px);background-size:43px 43px;mask-image:linear-gradient(transparent,#0008,transparent)}
.card.tearbound-home{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:22px;width:100%;height:100%;max-height:100%;overflow:auto;background:none;border:0;border-radius:0;box-shadow:none;padding:72px 24px;scrollbar-gutter:stable both-edges}
.tearbound-home>.home-logo{margin-top:auto}
.tearbound-home>:is(#homeScreen,#settingsScreen,#profileDialog){margin-bottom:auto}
.game :is(.card,dialog,.friends-body){scrollbar-width:thin;scrollbar-color:#41665f transparent;overscroll-behavior:contain;touch-action:pan-y}
.game :is(.card,dialog,.friends-body)::-webkit-scrollbar{width:6px;height:6px}
.game :is(.card,dialog,.friends-body)::-webkit-scrollbar-track{background:transparent}
.game :is(.card,dialog,.friends-body)::-webkit-scrollbar-thumb{background:#41665f;border-radius:10px}
.game :is(.card,dialog,.friends-body)::-webkit-scrollbar-thumb:hover{background:#72a794}
.home-logo{width:clamp(150px,17vw,235px);flex-shrink:0;margin:0}
.tearbound-home .mode-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;width:min(820px,90vw);flex-shrink:0}
.tearbound-home .mode-button{position:relative;display:block;min-width:0;height:clamp(230px,48vh,460px);padding:0;border:1px solid #385c69;border-radius:15px;overflow:hidden;background:#101e2c;box-shadow:0 12px 30px #0005;transition:transform .22s,border-color .22s,box-shadow .22s;text-align:center;isolation:isolate;cursor:pointer}
.tearbound-home .mode-button:hover,.tearbound-home .mode-button:focus-visible{transform:translateY(-6px);border-color:#82e8d1;box-shadow:0 15px 42px #030912,0 0 0 2px #7ce9cf33;outline:none}
.mode-art{display:block;width:100%;height:100%;object-fit:cover;object-position:center;image-rendering:pixelated;transition:filter .25s;filter:brightness(.86)}
.mode-button:hover .mode-art,.mode-button:focus-visible .mode-art{filter:brightness(1)}
.mode-placeholder{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,#26435055,transparent 62%),linear-gradient(155deg,#162838,#0a1421)}
.mode-placeholder:after{content:'';position:absolute;inset:18px;border:1px dashed #42677755;border-radius:7px}
.mode-pvp .mode-placeholder{background:radial-gradient(ellipse at 50% 30%,#4b2f4855,transparent 62%),linear-gradient(155deg,#222236,#0a1421)}
.tearbound-home .mode-label{position:absolute;display:flex;align-items:center;justify-content:center;left:0;right:0;bottom:0;min-height:66px;z-index:1;background:linear-gradient(180deg,#08131be8,#08131b);border-top:1px solid #7ce9cf66;color:#e8fff5;font:clamp(16px,2vw,22px) 'Press Start 2P',monospace;letter-spacing:1px;transform:translateY(101%);opacity:0;transition:transform .22s,opacity .22s}
.mode-button:hover .mode-label,.mode-button:focus-visible .mode-label{transform:translateY(0);opacity:1}
.home-actions{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}
.home-actions .menu-button,.home-actions .account-open{flex:none;margin:0;border:1px solid #365461;border-radius:7px;background:#101f2d;color:#b9cfd0;font:600 14px Rajdhani,system-ui,sans-serif;padding:9px 16px;cursor:pointer;white-space:nowrap;transition:border-color .2s,color .2s}
.home-actions button:hover,.home-actions button:focus-visible{color:#e9fff7;border-color:#80e3c7;outline:none}
.tearbound-home .menu-bottom{display:none;margin:0;padding:0;border:0;min-height:0}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
#tearWallet{position:absolute;z-index:6;right:clamp(14px,3vw,36px);top:20px;display:flex;align-items:center;gap:10px;min-width:107px;padding:8px 15px;background:#0d1b2ce8;border:1px solid #477775;border-radius:10px;box-shadow:0 4px 18px #0003;color:#b2ffeb}
.tear-symbol{display:block;flex-shrink:0;width:25px;height:36px;background:url('Logo%20tearbound%20%C5%82za.png') center/327% auto no-repeat;image-rendering:pixelated}
#tearCount{font:15px 'Press Start 2P',monospace;font-variant-numeric:tabular-nums}
.is-playing #tearWallet{display:none}
#soloScreen .level-list{margin:22px 0}
#soloScreen .menu-foot{margin-top:24px}
#progressScreen .stat-grid{margin:18px 0 24px}
#pvpNotice{max-width:min(440px,90vw);padding:28px;border:1px solid #426777;border-radius:12px;background:#111e2e;color:#f6e7bb;font:18px Rajdhani,system-ui,sans-serif}
#pvpNotice::backdrop{background:#030915cc}
@media(max-width:650px){.card.tearbound-home{gap:22px;padding:80px 14px 25px}.tearbound-home .mode-row{gap:10px;width:100%}.tearbound-home .mode-button{height:clamp(230px,45vh,390px);border-radius:10px}.home-logo{width:170px}.tearbound-home .mode-label{min-height:52px;font-size:13px}.home-actions{gap:8px}.home-actions .menu-button,.home-actions .account-open{font-size:13px;padding:8px 11px}#tearWallet{top:14px;padding:6px 11px}.tear-symbol{width:21px;height:30px}#tearCount{font-size:12px}}
@media(max-height:650px) and (min-width:651px){.card.tearbound-home{gap:14px;padding-top:24px}.home-logo{width:140px}.tearbound-home .mode-button{height:50vh;min-height:200px}}
@media(hover:none){.tearbound-home .mode-label{transform:translateY(0);opacity:1}}
@media(prefers-reduced-motion:reduce){.mode-button,.mode-label,.mode-art{transition:none!important}#introSplash.play .tearbound-logo{animation:none;opacity:1;transform:none}#introSplash.play{animation:none}}
.menu-top-tools{position:absolute;top:20px;right:clamp(14px,3vw,36px);z-index:6;display:flex;align-items:center;gap:12px}
.menu-top-tools #tearWallet{position:static}
.settings-trigger{position:relative;display:grid;place-items:center;flex:none;width:56px;height:54px;margin:0;padding:0;background:transparent;border:1px solid transparent;border-radius:10px;cursor:pointer;overflow:visible}
.settings-trigger img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block;width:80px;height:60px;max-width:none;object-fit:contain;image-rendering:pixelated;pointer-events:none}
.settings-trigger:hover,.settings-trigger:focus-visible{border-color:#548f7e;background:#122a3155;outline:none}
.settings-trigger .settings-label{position:absolute;top:calc(100% + 8px);right:0;z-index:1;display:block;white-space:nowrap;padding:6px 10px;border:1px solid #477775;border-radius:5px;background:#0d1b2cf5;color:#b2ffdf;font:600 14px Rajdhani,system-ui,sans-serif;opacity:0;transform:translateY(-4px);transition:opacity .15s,transform .15s;pointer-events:none}
.settings-trigger:hover .settings-label,.settings-trigger:focus-visible .settings-label{opacity:1;transform:translateY(0)}
.is-playing .menu-top-tools{display:none}
.game #profileBadge{max-width:calc(100% - 260px)}
#profileBadge .player-identity{max-width:100%}
#profileBadge .player-identity>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#homeScreen{display:flex;flex-direction:column;align-items:center;gap:22px;flex-shrink:0}
.menu-settings{width:min(820px,90vw);flex-shrink:0}
.settings-content{padding:20px;border:1px solid #385c69;border-radius:15px;background:#101e2ce8;box-shadow:0 12px 30px #0004}
.settings-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:8px}
.settings-heading .title{font-size:20px;margin:0}
.settings-heading .menu-button{flex:none;width:auto;font:600 14px Rajdhani,system-ui,sans-serif;padding:9px 12px;white-space:nowrap}
.menu-settings .desc{font-size:16px;line-height:1.4;margin:12px 0 20px}
.settings-grid{display:grid;grid-template-columns:minmax(150px,.7fr) minmax(0,1.7fr);gap:24px}
.settings-grid>section{min-width:0}
.settings-grid h3{margin:0 0 15px;color:#9ae6d0;font-size:16px}
.settings-grid label{display:grid;gap:8px;font-size:14px;color:#c4d7dd}
.settings-grid select,.settings-grid button{font:inherit;background:#1b3043;color:#edf8ed;border:1px solid #476875;border-radius:6px;padding:8px;cursor:pointer}
.settings-grid select{max-width:100%}
.settings-grid button:disabled{opacity:.45;cursor:default}
.settings-grid .privacy-setting{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 12px}
.privacy-note{font-size:13px;line-height:1.45;color:#a7bdc7;margin:8px 0}
.privacy-status{font-size:14px;color:#a0ead1;min-height:18px;margin:8px 0 0}
.card.tearbound-home:has(.menu-settings:not(.hidden)){justify-content:flex-start}
@media(max-height:650px) and (min-width:651px){.card.tearbound-home{padding-block:72px}}
@media(max-width:650px){#homeScreen{width:100%}.menu-settings{width:100%}.settings-content{padding:17px}.settings-heading{align-items:flex-start;gap:10px}.settings-heading .title{font-size:15px}.settings-heading .menu-button{font-size:12px;padding:7px}.settings-grid{grid-template-columns:1fr;gap:22px}.settings-grid .privacy-setting{align-items:flex-start;flex-direction:column;gap:6px}.settings-grid .privacy-setting select{width:100%}}
@media(max-width:650px){.menu-top-tools{top:14px;gap:8px}.settings-trigger{width:44px;height:44px}.settings-trigger img{width:64px;height:48px}.game #profileBadge{max-width:calc(100% - 210px)}}