:root {
    color-scheme: dark;
    font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif;
    background: #00050c;
}

@font-face {
    font-family: "Noto Georgian Display";
    src: url("fonts/NotoSansGeorgian-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62.5% 100%;
    font-display: swap;
}

* { box-sizing: border-box; }

html, body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    overflow: hidden;
    background: #00050c;
    touch-action: manipulation;
}

body {
    display: grid;
    place-items: center;
}

.preloader {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 18px;
    color: #fff;
    background: radial-gradient(circle at center, #04243a 0, #010914 42%, #00050c 75%);
    font-family: "Noto Georgian Display", "Arial Narrow", sans-serif;
    text-align: center;
    transition: opacity .18s ease;
}

.preloader-spinner {
    width: 72px;
    aspect-ratio: 1;
    border: 5px solid rgb(0 207 255 / 20%);
    border-top-color: #00d9ff;
    border-radius: 50%;
    filter: drop-shadow(0 0 10px rgb(0 217 255 / 70%));
    animation: preloader-spin .75s linear infinite;
}

.preloader-title { font-size: clamp(24px, 4vw, 46px); font-weight: 800; }
.preloader-progress { color: #00d9ff; font-size: clamp(20px, 3vw, 34px); font-variant-numeric: tabular-nums; }

.is-preloading .app-shell { visibility: hidden; }
body.is-ready .preloader { opacity: 0; pointer-events: none; }

@keyframes preloader-spin { to { transform: rotate(360deg); } }

button { font: inherit; }

.app-shell {
    position: relative;
    width: min(100vw, 66.6667vh);
    height: min(150vw, 100vh);
    max-width: 1024px;
    max-height: 1536px;
    overflow: hidden;
    background: #020914;
    isolation: isolate;
    user-select: none;
}

.screen {
    position: absolute;
    inset: 0;
    display: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.screen.is-active { display: block; }
.screen-main { background-image: url("mainpage-new-new.jpg"); }
.screen-exit { background-image: url("manqanidan-gadasvlis-dro-new.jpg"); }
.screen-menu { background-image: url("menu-bg-clean.jpg"); }
.screen-water { background-image: url("menuwyali.png"); }
.screen-water-before { background-image: url("wyali-before.jpg"); }
.screen-food { background-image: url("menusachmeli.png"); }
.screen-food-before { background-image: url("sachmeli-before.jpg"); }
.screen-toilet { background-image: url("menutoilet.png"); }
.screen-toilet-before { background-image: url("tualeti-before.jpg"); }
.screen-ac { background-image: url("kondicioneri-new.jpg"); }
.screen-end-prompt { background-image: url("gsurt-dasruleba.jpg"); }
.screen-final { background-image: url("tqvensheagorvet.jpg"); }
.screen-gulf { background-image: url("gulfpopup.png"); }

.hit {
    position: absolute;
    z-index: 5;
    border: 0;
    padding: 0;
    color: transparent;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.hit:focus-visible {
    outline: clamp(2px, .35vw, 5px) solid #fff;
    outline-offset: clamp(-8px, -.6vw, -3px);
}

.hit:active { background: rgb(0 213 255 / 10%); }

.dynamic-value {
    position: absolute;
    z-index: 4;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    pointer-events: none;
}

.main-exit-time {
    left: 9.5%; top: 11.6%; width: 27%; height: 5.5%;
    color: #ff161d;
    font-size: clamp(25px, 4.7vw, 72px);
    text-shadow: 0 0 14px #ff1313;
}

.main-spent {
    left: 69.5%; top: 11.2%; width: 23%; height: 6.2%;
    color: #ff1e23;
    font-size: clamp(28px, 5.3vw, 82px);
    text-shadow: 0 0 14px #ff1313;
}

.main-balance {
    left: 25%; top: 26.1%; width: 50%; height: 12.6%;
    color: #ecffe8;
    font-size: clamp(58px, 11.8vw, 181px);
    letter-spacing: -.04em;
    text-shadow: 0 0 10px #caffba, 0 0 28px #3cff20, 0 0 56px #18be00;
}

.movement-time {
    left: 43.5%; top: 80.4%; width: 39%; height: 10.5%;
    color: #12c8ef;
    font-size: clamp(44px, 8.7vw, 134px);
    letter-spacing: .01em;
    text-shadow: none;
}

.hit-exit { left: 4.5%; top: 7.2%; width: 34%; height: 17%; }
.hit-menu { left: 10.8%; top: 61%; width: 78%; height: 12%; }

.exit-countdown {
    left: 25%; top: 40%; width: 50%; height: 17%;
    color: #ff2e27;
    font-size: clamp(86px, 16vw, 246px);
    text-shadow: 0 0 14px #ff1c17, 0 0 40px #b90000;
}

.hit-exit-stop { left: 38%; top: 59%; width: 25%; height: 16%; }

.menu-spent {
    left: 75%; top: 6.2%; width: 20%; height: 7%;
    color: #ff2227;
    font-size: clamp(29px, 5.3vw, 82px);
    text-shadow: 0 0 14px #ff1313;
}

.menu-price {
    left: 70%;
    width: 25%;
    height: 7.2%;
    color: #fff;
    font-family: "Noto Georgian Display", "Arial Narrow", sans-serif;
    font-size: clamp(28px, 4.8vw, 74px);
    font-variation-settings: "wdth" 76, "wght" 850;
    text-shadow: none;
}

.menu-price-water { top: 21.6%; }
.menu-price-food { top: 38.6%; }
.menu-price-toilet { top: 55.6%; }
.menu-price-ac { top: 72.3%; }

.hit-menu-home { left: 1%; top: 1%; width: 68%; height: 15%; }
.menu-item { left: 1.5%; width: 97%; }
.item-water { top: 17.7%; height: 14.6%; }
.item-food { top: 34.5%; height: 14.5%; }
.item-toilet { top: 51.5%; height: 14.5%; }
.item-ac { top: 68.5%; height: 14.5%; }

.hit-product-close {
    left: 84%; top: 10.5%; width: 8%; aspect-ratio: 1;
    display: grid; place-items: center;
    border: clamp(2px, .25vw, 4px) solid #18caff;
    border-radius: 50%;
    color: #fff;
    background: rgb(3 20 34 / 88%);
    box-shadow: 0 0 18px rgb(0 190 255 / 55%);
    font-size: clamp(30px, 5vw, 76px);
    line-height: 1;
}

.hit-map-open { left: 15%; top: 77.5%; width: 70%; height: 8.5%; }

.inline-map {
    position: absolute;
    z-index: 4;
    left: 14.2%;
    top: 42.9%;
    width: 71.6%;
    height: 31.6%;
    overflow: hidden;
    border: clamp(2px, .3vw, 5px) solid #0faee7;
    background: #071625;
    clip-path: polygon(3% 0, 97% 0, 100% 5%, 100% 95%, 97% 100%, 3% 100%, 0 95%, 0 5%);
    box-shadow: inset 0 0 18px rgb(0 189 255 / 35%);
}

.inline-map iframe { width: 100%; height: 100%; border: 0; }

.ac-status {
    display: none;
}

.ac-time {
    left: 18%; top: 43%; width: 65%; height: 16%;
    color: white;
    font-size: clamp(88px, 17vw, 262px);
    text-shadow: none;
}

.ac-cost {
    left: 24%; top: 65%; width: 52%; height: 8%;
    color: #ff3540;
    font-size: clamp(48px, 9vw, 138px);
    text-shadow: 0 0 15px #f01928;
}

.hit-ac-toggle {
    left: 15%; top: 77.4%; width: 70%; height: 9.8%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: clamp(28px, 4.9vw, 75px);
    font-weight: 900;
    font-family: "Noto Georgian Display", "Arial Narrow", sans-serif;
    font-variation-settings: "wdth" 68, "wght" 900;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-shadow: none;
}

.hit-ac-toggle span { transform: translateY(-.13em); }

.hit-ac-close { left: 0; top: 0; width: 10%; height: 12%; }

.end-prompt-balance {
    left: 32.5%; top: 78.5%; width: 53%; height: 9%;
    color: #a4f516;
    font-size: clamp(42px, 8vw, 123px);
    text-shadow: 0 0 18px #67dc0a;
}

.end-prompt-time {
    left: 17%; top: 3%; width: 66%; height: 16%;
    color: #f61e31;
    font-size: clamp(68px, 13vw, 200px);
    letter-spacing: -.025em;
}

.hit-end-yes { left: 14%; top: 59.5%; width: 34%; height: 10%; }
.hit-end-no { left: 52%; top: 59.5%; width: 34%; height: 10%; }

.final-balance {
    left: 12%; top: 57.5%; width: 77%; height: 16%;
    color: #b3ff54;
    font-size: clamp(92px, 18vw, 276px);
    text-shadow: 0 0 18px #7fff1a, 0 0 35px #26d220;
}

.hit-gulf-open { left: 8.5%; top: 79.5%; width: 83%; height: 11%; }

.confirm-modal {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: grid;
    place-items: center;
    padding: 7%;
    background: rgb(0 2 7 / 82%);
    backdrop-filter: blur(5px);
}

.confirm-modal[hidden] { display: none; }

.confirm-card {
    width: 100%;
    padding: 8% 7% 7%;
    border: clamp(2px, .35vw, 5px) solid #0dd1ff;
    clip-path: polygon(6% 0, 94% 0, 100% 8%, 100% 92%, 94% 100%, 6% 100%, 0 92%, 0 8%);
    background: linear-gradient(150deg, rgb(4 31 54 / 98%), rgb(1 11 23 / 99%));
    box-shadow: 0 0 25px #0085d7, inset 0 0 35px rgb(0 149 255 / 22%);
    text-align: center;
    font-family: "Noto Georgian Display", "Arial Narrow", sans-serif;
    font-stretch: condensed;
    font-variation-settings: "wdth" 68, "wght" 900;
}

.confirm-icon {
    width: 16%; aspect-ratio: 1;
    display: grid; place-items: center;
    margin: 0 auto 5%;
    border: .08em solid #ff2a2e;
    border-radius: 50%;
    color: #ff2a2e;
    font-size: clamp(42px, 9vw, 138px);
    font-weight: 900;
    box-shadow: 0 0 25px rgb(255 20 25 / 45%);
}

.confirm-card h2 {
    margin: 0 0 3%;
    color: #fff;
    font-size: clamp(35px, 6vw, 92px);
    font-weight: 900;
    letter-spacing: .015em;
    text-transform: uppercase;
}

.confirm-card p {
    min-height: 2.4em;
    margin: 0 0 7%;
    color: #d9f7ff;
    font-size: clamp(24px, 4vw, 61px);
    font-weight: 900;
    letter-spacing: .01em;
    line-height: 1.2;
}

.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 4%; }

.confirm-button {
    min-height: clamp(62px, 12vw, 184px);
    border: clamp(2px, .3vw, 4px) solid currentColor;
    clip-path: polygon(8% 0, 92% 0, 100% 22%, 100% 78%, 92% 100%, 8% 100%, 0 78%, 0 22%);
    color: #fff;
    font-size: clamp(31px, 5vw, 77px);
    font-weight: 900;
    font-family: "Noto Georgian Display", "Arial Narrow", sans-serif;
    font-variation-settings: "wdth" 68, "wght" 900;
    cursor: pointer;
}

.confirm-button.yes { background: linear-gradient(#55c800, #238800); box-shadow: 0 0 18px #65df00; }
.confirm-button.no { background: linear-gradient(#e8272b, #8d0710); box-shadow: 0 0 18px #e10c17; }

.toast, .connection-badge {
    position: absolute;
    z-index: 50;
    left: 50%;
    transform: translateX(-50%);
    border: 2px solid #12c9ef;
    border-radius: 10px;
    color: #fff;
    background: rgb(1 15 27 / 96%);
    box-shadow: 0 0 18px rgb(0 187 255 / 50%);
    font-weight: 800;
    font-family: "Noto Georgian Display", "Arial Narrow", sans-serif;
    font-variation-settings: "wdth" 72, "wght" 850;
    text-align: center;
}

.toast { bottom: 5%; width: 80%; padding: 3%; font-size: clamp(19px, 3.2vw, 49px); }
.connection-badge { top: 2%; padding: 1.5% 3%; font-size: clamp(14px, 2.2vw, 34px); }
[hidden] { display: none !important; }

@media (orientation: landscape) and (max-height: 700px) {
    .app-shell { width: min(100vw, 66.6667vh); height: min(150vw, 100vh); }
}