/* ===================================================================
   HelaGo — Play & Win  |  stall kiosk theme
   Brand palette taken from the HelaGo artwork:
     green #55BB6F   dark teal #0E2D33   lime #E6FD00   ink #1B1B1B
   =================================================================== */

:root {
    --green:    #55BB6F;
    --green-dk: #3E9E56;
    --green-lt: #7FD394;
    --dark:     #0E2D33;
    --dark-2:   #071A1E;
    --lime:     #E6FD00;
    --ink:      #1B1B1B;
    --white:    #FFFFFF;
    --muted:    #6B7F84;
    --radius:   26px;
    --shadow:   0 18px 50px rgba(0, 0, 0, .35);
    --font-ui:  "Poppins", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --font-hd:  "Anton", "Archivo Black", Impact, "Arial Narrow", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: rgba(85, 187, 111, .25); }

[ng-cloak], .ng-cloak { display: none !important; }

html, body { height: 100%; }

body {
    font-family: var(--font-ui);
    color: var(--white);
    background: var(--dark);
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: pan-y;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* The poster look: lime cap curving down into the dark teal field. */
body::before {
    content: "";
    position: fixed;
    top: 0; left: -10%;
    width: 120%; height: 46vh;
    background: var(--lime);
    border-radius: 0 0 50% 50% / 0 0 22% 22%;
    z-index: 0;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 45% at 50% 78%, rgba(85, 187, 111, .38), transparent 70%),
        linear-gradient(180deg, transparent 30%, var(--dark) 62%, var(--dark-2) 100%);
    z-index: 1;
    pointer-events: none;
}

/* ===================================================================
   LAYOUT
   =================================================================== */
.app-container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 3vh 20px 4vh;
    gap: 2.2vh;
}

.brand {
    flex: 0 0 auto;
    display: block;
    width: clamp(150px, 26vw, 260px);
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .22));
}

/* Headline — the "PLAY & WIN!" lockup from the artwork */
.hero {
    flex: 0 0 auto;
    text-align: center;
    line-height: .84;
    color: var(--ink);
    font-family: var(--font-hd);
    font-weight: 400;
    letter-spacing: -.01em;
    text-transform: uppercase;
    font-size: clamp(42px, 11vw, 104px);
}

.hero small {
    display: block;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: clamp(11px, 2.1vw, 16px);
    letter-spacing: .22em;
    line-height: 1.5;
    margin-top: .7em;
    opacity: .72;
    text-transform: uppercase;
}

/* ===================================================================
   SLIDE DECK
   Plain 2D slide + fade. This deliberately avoids 3D transforms:
   an item that mixes overflow:hidden with preserve-3d gets flattened
   by the browser, which paints the card but breaks tap hit-testing —
   fatal on an unattended kiosk.
   =================================================================== */
.carousel-wrapper {
    position: relative;
    width: 100%;
    max-width: 620px;
    flex: 1 1 auto;
    min-height: 340px;
}

.carousel-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-item {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* "safe" keeps overflowing content reachable instead of clipping it at
       both ends. Older engines ignore this line and keep plain centring. */
    justify-content: safe center;
    gap: 18px;
    padding: clamp(24px, 4.5vw, 44px);
    background: var(--white);
    color: var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    /* Prize names are editable from the panel, so a card can grow taller
       than the wrapper. Scroll it rather than clip a button out of reach. */
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(5%) scale(.97);
    /* visibility flips discretely, never as part of the fade: a slide must
       never depend on a transition finishing before it accepts a tap. */
    transition: opacity .42s ease,
                transform .42s cubic-bezier(.4, 0, .2, 1),
                visibility 0s linear .42s;
}

/* Only the current step is visible and tappable. */
.carousel-item.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    z-index: 10;
    transition: opacity .42s ease,
                transform .42s cubic-bezier(.4, 0, .2, 1),
                visibility 0s linear 0s;
}

.carousel-item.is-prev { transform: translateX(-5%) scale(.97); }

.carousel-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    width: 100%;
}

.carousel-title {
    width: 100%;
    font-size: clamp(15px, 2.6vw, 19px);
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--dark);
    margin-bottom: 8px;
}

.carousel-title .req { color: var(--green-dk); }

.step-label {
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--green-dk);
}

.hint {
    text-align: center;
    font-size: clamp(13px, 2.3vw, 15px);
    line-height: 1.55;
    color: var(--muted);
}

/* ===================================================================
   FORM CONTROLS
   =================================================================== */
.field { width: 100%; margin-bottom: 18px; }

.input {
    font-family: var(--font-ui);
    font-size: clamp(17px, 2.8vw, 21px);
    font-weight: 600;
    text-align: center;
    color: var(--ink);
    background: #F3F7F4;
    border: 2px solid #DCE7DF;
    border-radius: 16px;
    outline: none;
    padding: 18px 20px;
    width: 100%;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.input::placeholder { color: #A9B8B4; font-weight: 500; }

.input:focus {
    border-color: var(--green);
    background: var(--white);
    box-shadow: 0 0 0 5px rgba(85, 187, 111, .18);
}

.input.err {
    border-color: #E0483B;
    box-shadow: 0 0 0 5px rgba(224, 72, 59, .14);
}

.msg-err {
    min-height: 20px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #E0483B;
}

/* ===================================================================
   BUTTONS
   =================================================================== */
.button-normal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    border: 0;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
    font-family: var(--font-ui);
    font-size: clamp(18px, 2.9vw, 24px);
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--white);
    background-image: linear-gradient(135deg, var(--green-lt) 0%, var(--green-dk) 100%);
    border-radius: 18px;
    min-width: 200px;
    min-height: 62px;
    padding: 20px 44px;
    box-shadow: 0 8px 18px rgba(14, 45, 51, .22), rgba(20, 90, 45, .55) 0 -4px 0 inset;
    transition: transform .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s ease, opacity .2s ease;
}

.button-normal:hover { transform: translateY(-3px); box-shadow: 0 14px 26px rgba(14, 45, 51, .28), rgba(20, 90, 45, .55) 0 -4px 0 inset; }
.button-normal:active { transform: translateY(2px); box-shadow: rgba(20, 90, 45, .5) 0 4px 10px inset; }
.button-normal[disabled] { opacity: .45; pointer-events: none; }

/* Lime variant — the artwork's accent, used for the win/claim action */
.button-normal.lime {
    background-image: linear-gradient(135deg, #F2FF52 0%, var(--lime) 100%);
    color: var(--ink);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .3), rgba(150, 165, 0, .6) 0 -4px 0 inset;
}

.button-normal.ghost {
    background: transparent;
    background-image: none;
    color: var(--muted);
    box-shadow: none;
    min-height: 44px;
    min-width: 0;
    padding: 12px 20px;
    font-size: 13px;
    letter-spacing: .14em;
    text-decoration: underline;
}

/* Big round START button */
.button-29 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    border: 0;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    font-family: var(--font-hd);
    font-size: clamp(34px, 7vw, 54px);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--white);
    background-image: radial-gradient(100% 100% at 100% 0, var(--green-lt) 0, var(--green-dk) 100%);
    border-radius: 50%;
    width: clamp(190px, 46vw, 300px);
    height: clamp(190px, 46vw, 300px);
    box-shadow: 0 14px 34px rgba(14, 45, 51, .3), rgba(20, 90, 45, .55) 0 -6px 0 inset;
    transition: transform .25s cubic-bezier(.4, 0, .2, 1), box-shadow .25s ease;
    animation: breathe 2.6s ease-in-out infinite;
}

.button-29:hover { transform: scale(1.03); }
.button-29:active { transform: scale(.97); box-shadow: rgba(20, 90, 45, .5) 0 6px 14px inset; }

@keyframes breathe {
    0%, 100% { box-shadow: 0 14px 34px rgba(14, 45, 51, .3), 0 0 0 0 rgba(85, 187, 111, .45), rgba(20, 90, 45, .55) 0 -6px 0 inset; }
    50%      { box-shadow: 0 14px 34px rgba(14, 45, 51, .3), 0 0 0 26px rgba(85, 187, 111, 0), rgba(20, 90, 45, .55) 0 -6px 0 inset; }
}

/* ===================================================================
   GAME SCREEN
   =================================================================== */
.counter {
    font-family: var(--font-hd);
    font-size: clamp(84px, 24vw, 190px);
    line-height: .9;
    color: var(--green-dk);
    text-shadow: 0 6px 0 rgba(85, 187, 111, .18);
    animation: tick .6s ease-out;
}

@keyframes tick {
    from { transform: scale(1.35); opacity: .35; }
    to   { transform: scale(1);    opacity: 1; }
}

.round-dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.round-dots i {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #DCE7DF;
    transition: background .3s ease, transform .3s ease;
}

.round-dots i.on { background: var(--green); transform: scale(1.25); }

/* ===================================================================
   RESULT SCREEN
   =================================================================== */
.result-win  { background: linear-gradient(165deg, #FFFFFF 0%, #F3FFE0 100%); }
.result-lose { background: var(--white); }

/* The win card carries the most content of any step — headline, prize shot,
   name, score, claim note, countdown and button. Tighten its rhythm so the
   whole thing fits without scrolling and the button stays in easy reach. */
.result-win, .result-lose { gap: 10px; }

.result-win .carousel-content,
.result-lose .carousel-content { gap: 12px; }

.result-head {
    font-family: var(--font-hd);
    font-size: clamp(34px, 6.4vw, 62px);
    line-height: .88;
    text-transform: uppercase;
    text-align: center;
    color: var(--ink);
}

.result-win .result-head { color: var(--green-dk); }

.prize-shot {
    width: 100%;
    max-width: 420px;
    max-height: min(26vh, 178px);
    object-fit: contain;
    border-radius: 18px;
    background: var(--dark);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
    animation: pop .55s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes pop {
    from { transform: scale(.7) rotate(-4deg); opacity: 0; }
    to   { transform: scale(1) rotate(0);      opacity: 1; }
}

.prize-name {
    text-align: center;
    font-size: clamp(17px, 3vw, 23px);
    font-weight: 800;
    line-height: 1.2;
    color: var(--ink);
}

.claim {
    text-align: center;
    font-size: clamp(11px, 2vw, 14px);
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--green-dk);
    background: rgba(85, 187, 111, .12);
    border: 2px dashed var(--green);
    border-radius: 14px;
    padding: 11px 16px;
}

.score-pill {
    align-self: center;
    font-size: clamp(13px, 2.4vw, 16px);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dark);
    background: var(--lime);
    border-radius: 999px;
    padding: 10px 24px;
}

.reset-note {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Confetti burst on a win */
.confetti { position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }

.confetti i {
    position: absolute;
    top: -12vh;
    width: 11px; height: 18px;
    border-radius: 2px;
    animation: fall linear forwards;
}

@keyframes fall {
    to { transform: translateY(118vh) rotate(760deg); opacity: .1; }
}

/* ===================================================================
   BOOT / ERROR OVERLAY
   =================================================================== */
.overlay {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 30px;
    text-align: center;
    background: rgba(7, 26, 30, .94);
    color: var(--white);
}

.overlay p { max-width: 30ch; font-size: 15px; line-height: 1.6; opacity: .8; }

.spinner {
    width: 46px; height: 46px;
    border: 5px solid rgba(255, 255, 255, .18);
    border-top-color: var(--green);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Staff-only tap target for the config page */
.cfg-dot {
    position: fixed;
    right: 0; bottom: 0;
    width: 62px; height: 62px;
    z-index: 40;
    opacity: 0;
}

/* ===================================================================
   RESPONSIVE — tablet is the primary target, phone + desktop supported
   =================================================================== */

/* Phones */
@media (max-width: 600px) {
    body::before { height: 40vh; }
    .app-container { padding: 2vh 14px 3vh; gap: 1.6vh; }
    .carousel-wrapper { min-height: 300px; }
    .carousel-item { padding: 22px 18px; gap: 14px; }
    .prize-shot { max-height: 26vh; }
}

/* Tablet portrait — the stall kiosk */
@media (min-width: 601px) and (max-width: 1180px) and (orientation: portrait) {
    .app-container { padding: 4vh 40px 5vh; gap: 3vh; }
    .carousel-wrapper { max-width: 680px; min-height: 460px; }
    .carousel-item { gap: 26px; }
    .button-normal { min-width: 260px; padding: 26px 56px; }
}

/* Anything landscape and short — put the hero beside the card */
@media (orientation: landscape) and (max-height: 860px) {
    body::before { height: 100vh; width: 46%; left: -6%; border-radius: 0 42% 42% 0 / 0 12% 12% 0; }
    body::after { background: radial-gradient(ellipse 60% 70% at 78% 50%, rgba(85, 187, 111, .34), transparent 70%), linear-gradient(90deg, transparent 26%, var(--dark) 46%, var(--dark-2) 100%); }
    .app-container {
        display: grid;
        grid-template-columns: minmax(240px, 1fr) minmax(320px, 1.15fr);
        grid-template-rows: auto 1fr;
        align-items: center;
        justify-items: center;
        column-gap: 4vw;
        padding: 3vh 4vw;
        height: 100vh;
        height: 100dvh;
    }
    .brand { grid-column: 1; grid-row: 1; align-self: end; width: clamp(130px, 16vw, 210px); }
    .hero  { grid-column: 1; grid-row: 2; align-self: start; font-size: clamp(38px, 7.4vw, 84px); }
    .carousel-wrapper { grid-column: 2; grid-row: 1 / span 2; height: 88vh; max-width: 560px; min-height: 0; }
    .counter { font-size: clamp(64px, 13vh, 130px); }
    .button-29 { width: clamp(150px, 30vh, 230px); height: clamp(150px, 30vh, 230px); font-size: clamp(28px, 6vh, 46px); }

    /* Short landscape is the tightest case for the win card — trim it so the
       prize, the claim note and the button all fit without scrolling. */
    .carousel-item { padding: clamp(18px, 2.6vw, 30px); }
    .result-head { font-size: clamp(26px, 5.6vh, 44px); }
    .prize-shot { max-height: min(19vh, 132px); }
    .claim { padding: 9px 14px; }
    .result-win, .result-lose { gap: 8px; }
    .result-win .carousel-content,
    .result-lose .carousel-content { gap: 10px; }
}

/* Desktop */
@media (min-width: 1181px) and (orientation: landscape) {
    .carousel-wrapper { max-width: 600px; }
}

/* Short screens — trim vertical rhythm so nothing clips */
@media (max-height: 620px) and (orientation: portrait) {
    .hero { font-size: clamp(32px, 8vw, 54px); }
    .hero small { display: none; }
    .brand { width: clamp(120px, 20vw, 170px); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}