: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;
}

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("template1.png"); }
.screen-water { background-image: url("menuwyali.png"); }
.screen-food { background-image: url("menusachmeli.png"); }
.screen-toilet { background-image: url("menutoilet.png"); }
.screen-ac { background-image: url("kondicioneri-new.jpg"); }
.screen-end-prompt { background-image: url("tamashisdasruleba.png"); }
.screen-final { background-image: url("tamashisdasrulebakisshemdeg.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: 10.8%; 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: 68.2%; 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: 0 0 18px #11bce5;
}

.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);
    background: radial-gradient(ellipse, #16060a 50%, rgb(10 7 12 / 82%) 73%, transparent 76%);
    text-shadow: 0 0 14px #ff1313;
}

.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;
}

.ac-status {
    display: none;
}

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

.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: 0 0 12px #fff;
}

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

.end-prompt-balance {
    left: 36%; top: 76.5%; width: 53%; height: 9%;
    color: #a4f516;
    font-size: clamp(42px, 8vw, 123px);
    background: radial-gradient(ellipse, #0d3813 35%, rgb(4 24 18 / 84%) 69%, transparent 75%);
    text-shadow: 0 0 18px #67dc0a;
}

.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);
    background: radial-gradient(ellipse, #06431a 44%, rgb(2 40 18 / 83%) 69%, transparent 75%);
    text-shadow: 0 0 18px #7fff1a, 0 0 35px #26d220;
}

.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); }
}