@import './reset.css';

@keyframes pulse {
    from { transform: scale(1);    opacity: 1;   }
    to   { transform: scale(1.15); opacity: 0.8; }
}

@keyframes rewardPopIn {
    from { transform: scale(0.5); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

@font-face {
    font-family: 'IRANYekanXVF';
    src: url('../font/IRANYekanXVF.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

body {
    min-height: 100vh;
    background-color: #1a1a2e;
    background-image: url('../images/background.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    font-family: 'IRANYekanXVF', Tahoma, sans-serif;
    font-weight: 700;
    overflow: hidden;
}

.container {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#machine-scaler {
    transform: scale(var(--machine-scale, 1));
    transform-origin: bottom center;
}

.machine {
    position: relative;
    width: 370px;
    height: 739px;
}

#machine-back {
    position: absolute;
    inset: 0;
    background: url('../images/machine-back.webp') center/cover;
    z-index: 10;
}

#machine-front {
    position: absolute;
    inset: 0;
    background: url('../images/machine-front.webp') center/cover;
    z-index: 40;
    pointer-events: none;
}

#claw-assembly {
    position: absolute;
    top: 0;
    left: 0;
    width: 110px;
    height: 100%;
    z-index: 30;
}

#claw-mount {
    position: absolute;
    top: 68px;
    left: 50%;
    transform: translateX(-50%);
    width: 69px;
    height: 36px;
    background: url('../images/claw-mount.webp') center / contain no-repeat;
    z-index: 30;
}

#claw-rod {
    position: absolute;
    top: 104px;
    left: 50%;
    transform: translateX(-50%) scaleY(0);
    transform-origin: top center;
    width: 14px;
    height: 396px;
    background: url('../images/rod.webp') top center / cover;
    z-index: 30;
}

#claw {
    position: absolute;
    top: 104px;
    left: 50%;
    transform: translateX(-50%) translateY(0px);
    width: 110px;
    height: 144px;
    z-index: 31;
}

#claw-img {
    width: 110px;
    height: 144px;
    display: block;
}

.item-field {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
}

.item { position: absolute; }

.collection-zone {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    background: rgba(255,255,255,0.04);
    border-top: 1px solid rgba(255,255,255,0.1);
}

#attempts-pill {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* Extra 4px on the right so the label is not flush against the pill's edge. Asymmetric on
       purpose: the dots on the left already read as having margin, so padding them equally would
       widen the pill more than it needs. */
    padding: 8px 12px 8px 8px;
    gap: 8px;
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    /* Width is intentionally content-driven now. It used to be hardcoded (118px = 3 dots x 16 +
       label 30 + 3 gaps x 8 + padding 2 x 8), which had to be recalculated by hand when the dot
       count changed and left the row with exactly zero slack — so the label's text, 1.7px wider
       than its own 30px box, spilled into the right padding and looked flush against the edge. */
    height: 32px;
    background: #4F616F;
    border-radius: 16px;
    z-index: 50;
}
.attempt-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #324955;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}
.attempt-dot.failed { background: #FF6666; }
.attempt-dot.won    { background: #66FF97; }

#attempts-pill-label {
    /* auto, not a hardcoded 30px: "فرصت" measures 31.7px, so the fixed box clipped it by 1.7px */
    width: auto;
    height: 16px;
    font-family: 'IRANYekanXVF', 'Arial Black', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    display: flex;
    align-items: center;
    text-align: right;
    color: #FFFFFF;
    flex-shrink: 0;
}

#grab-button {
    position: absolute;
    left: 50%;
    bottom: 99px;
    transform: translateX(-50%);
    width: 92px;
    height: 73px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 50;
}
/* Invisible tap-target expansion — catches near-miss taps without changing the
   button's visible size. Pseudo-element boxes are part of the host element's own
   hit-testing area, so this needs no extra DOM and no visual change. */
#grab-button::before {
    content: '';
    position: absolute;
    top: -14px;
    right: -14px;
    bottom: -14px;
    left: -14px;
}
#grab-button-img {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 92px;
    height: auto;
    display: block;
}

#grab-button:disabled {
    cursor: not-allowed;
}
#grab-button.sdk-loading #grab-button-img {
    opacity: 0.4;
}
#grab-button.sdk-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 3px solid rgba(255, 255, 255, 0.35);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: sdkSpin 0.8s linear infinite;
}
@keyframes sdkSpin {
    to { transform: rotate(360deg); }
}

#loading {
    position: fixed;
    inset: 0;
    background: #0a0a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8rem;
    color: white;
    font-family: 'IRANYekanXVF', Tahoma, sans-serif;
    font-weight: 700;
    visibility: hidden;
    z-index: 100;
    animation: pulse 0.7s ease-in-out infinite alternate;
}

#vitrin-root {
    z-index: 1000 !important;
}

#coins-front {
    position: absolute;
    left: 27px;
    top: 501px;
    width: 316px;
    height: 140px;
    background: url('../images/coins-front.webp') center / cover no-repeat;
    z-index: 35;
    pointer-events: none;
}

#coins-back {
    position: absolute;
    left: 27px;
    top: 463px; /* 501 - 38, per the person's spec */
    width: 316px;
    height: 140px;
    background: url('../images/coins-back.webp') center / cover no-repeat;
    z-index: 15;
    pointer-events: none;
}

/* Reward Popup Overlay — unchanged behavior.
   The padding is what guarantees the card can never touch the screen edges, however narrow the
   viewport gets; the card sizes itself against this padded box rather than the raw viewport. */
#reward-popup {
    box-sizing: border-box;
    position: fixed;
    inset: 0;
    padding: 16px;
    background: rgba(0, 0, 0, 0.85);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
}
#reward-popup.visible {
    opacity: 1;
    visibility: visible;
}

#reward-popup-confetti-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Card — fluid up to its design width so it shrinks with the viewport instead of overflowing it.
   290px stays the intended size on any normal phone; below roughly 322px the overlay padding
   takes over and the card narrows with everything inside it. */
#reward-popup-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px;
    gap: 16px;
    width: 100%;
    max-width: 290px;
    background: #1A202C;
    border: 1px solid #4F616F;
    border-radius: 24px;
    direction: rtl;
    text-align: center;
    animation: rewardPopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Icon — same id, bigger */
#reward-popup-icon {
    width: 140px;
    height: 140px;
    border-radius: 999px;
    object-fit: cover;
    flex-shrink: 0;
}

/* The Round 4 grouping wrapper is gone: the card's children are now four separate rows —
   headline, icon, "برنده شدی!", description row — each carrying its own width. */

/* Top line, above the icon: "بیت‌کوین اومد بالا!". Deliberately mirrors #catch-popup-title —
   same family, same 800 weight, same white — so the win reads as the same voice as the
   per-catch popup. Size comes from the design (16px) rather than the catch popup's 20px, which
   would compete with the 24px "برنده شدی!" directly below the icon. */
#reward-popup-headline {
    font-family: 'IRANYekanXVF', 'Arial Black', sans-serif;
    font-weight: 800;
    font-size: 16px;
    line-height: 23px;
    color: #FFFFFF;
    margin: 0;
    width: 100%;
    text-align: center;
}

/* The yellow "برنده شدی!" line — id kept from earlier rounds. It now sits BELOW the icon. */
#reward-popup-amount {
    font-family: 'IRANYekanXVF', 'Arial Black', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 34px;
    color: #FBBF23; /* same yellow as the CTA button */
    margin: 0;
    width: 100%;
    text-align: center;
}

/* Description row — the reward sentence with the shiba coin beside it. The card is direction:rtl,
   so the first child renders on the RIGHT: the coin sits right, the sentence fills the space to
   its left and is right-aligned so it hugs the coin. */
#reward-popup-desc-row {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

/* height: auto rather than a second hardcoded number — the SVG's intrinsic ratio is 32:31, so
   the browser derives 38.75px and the shiba cannot end up stretched. The file carries Figma's
   preserveAspectRatio="none", so a literal 40x40 would distort it. flex-shrink: 0 keeps the coin
   at a fixed size on every viewport, exactly as before; the sentence beside it absorbs the
   change, which is the responsive behaviour this row already had. */
#reward-popup-desc-icon {
    display: block;
    flex-shrink: 0;
    width: 40px;
    height: auto;
    border-radius: 50px;
}

/* Description — same id, now the flexible half of the row rather than a full-width centred line */
#reward-popup-title {
    flex: 1;
    min-width: 0;
    font-family: 'IRANYekanXVF', 'Arial Black', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 23px;
    color: #FFFFFF;
    margin: 0;
    text-align: right;
}

/* Invite-code card — reintroduced in Round 5 with the new design. This is NOT the pre-Round-1
   markup (that had a code box, label and notice stacked vertically); it is a single row with the
   label on the right and a tap-to-copy button on the left, per the RTL card direction. */
#reward-code-card {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 16px;
    background: #0F172A;
    border: 1px solid #1E293B;
    border-radius: 12px;
}

/* 12px, not the design's literal 10px: at 10px this label rendered as a single cramped line in
   the 78px column this card leaves it (the design's own card is narrower, so the same 10px
   wrapped to two lines and read larger there). 12px restores that intended weight and wraps the
   same way, while staying below the 14px code value in the hierarchy. */
#reward-code-label {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-family: 'IRANYekanXVF', 'Arial Black', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 17px;
    color: #FFFFFF;
    text-align: right;
}

/* The box is pinned in BOTH dimensions so swapping to the confirmation text cannot resize it:
   96px wide (8 + 48 + 8 + 24 + 8) and 40px tall (8 + 24 + 8, driven by the icon in the default
   state). Height matters as much as width — the 10px confirmation text is shorter than the 24px
   icon, so without a fixed height the button collapsed to 31px and dragged the whole popup up
   with it, since #reward-popup-card is vertically centred. */
#reward-code-copy {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 96px;
    height: 40px;
    padding: 8px;
    background: #1E293B;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s;
}

#reward-code-copy-default {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#reward-code-value {
    width: 48px;
    font-family: 'IRANYekanXVF', 'Arial Black', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #F5F5F5;
    text-align: center;
}

/* 24px outer box from the design, with the 20px glyph centred inside it (18px path plus its
   1px stroke on each side) — the two boxes are deliberately not collapsed into one. */
#reward-code-copy-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}
#reward-code-copy-icon img {
    display: block;
    width: 20px;
    height: 20px;
}

/* Copied confirmation — swapped in for COPY_FEEDBACK_MS, then reverted so the code can be
   copied again as many times as the player wants. */
#reward-code-copied-text {
    display: none;
    font-family: 'IRANYekanXVF', 'Arial Black', sans-serif;
    font-weight: 800;
    font-size: 10px;
    color: #00FF51;
    text-align: center;
}
#reward-code-copy.copied {
    background: #254B2D;
}
#reward-code-copy.copied #reward-code-copy-default {
    display: none;
}
#reward-code-copy.copied #reward-code-copied-text {
    display: block;
}

/* CTA button — same id, same yellow as before, shimmer needs position:relative + overflow:hidden.
   Now full-width to match #reward-code-card above it (the Round 2 max-width of 196px left it
   visibly narrower than that card). min-height rather than a fixed height so the label can wrap
   on a very narrow card instead of being clipped. */
#claim-reward-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    background: #FBBF23;
    box-shadow: 0px 4px 8px -8px rgba(251, 191, 35, 0.4);
    border-radius: 12px;
    box-sizing: border-box;
    text-decoration: none;
    font-family: 'IRANYekanXVF', 'Arial Black', sans-serif;
    font-weight: 800;
    font-size: 14px;
    line-height: 20px;
    color: #1A1A2C;
    align-self: center;
    position: relative;
    overflow: hidden;
}

/* Shimmer sweep — loops automatically, never intercepts clicks */
.shimmer-sweep-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none; /* must never intercept clicks meant for the button */
}
.shimmer-sweep-bar {
    position: absolute;
    top: 0;
    left: -30%;
    width: 40px;
    height: 100%;
    background: rgba(255, 255, 255, 0.35);
    transform: skewX(-13deg);
    animation: shimmerSweep 2s ease-in-out infinite;
}
@keyframes shimmerSweep {
    0%   { left: -30%; }
    15%  { left: 130%; }
    100% { left: 130%; }
}

/* Timer — same id, no more pill badge wrapper, plain centered sentence */
#reward-timer-text {
    font-family: 'IRANYekanXVF', 'Arial Black', sans-serif;
    font-weight: 500;
    font-size: 10px;
    line-height: 14px;
    color: #9AA2B5;
    margin: 0;
    align-self: stretch;
    text-align: center;
}

/* Narrow-screen handling for the reward popup.
   Below 360px the card's own 32px padding is what squeezes its contents — reclaiming 24px of it
   buys back more inner width than shrinking any single element would, so the code row, CTA and
   text all keep their designed sizes. The icon steps down because it is the one element with a
   hard floor: it cannot wrap or reflow, so on the narrowest devices it is what would otherwise
   force the card to overflow. */
@media (max-width: 359px) {
    #reward-popup-card {
        padding: 24px 20px;
    }
    #reward-popup-icon {
        width: 120px;
        height: 120px;
    }
    #reward-code-card {
        gap: 12px;
        padding: 12px;
    }
}

/* Catch popup (Epic 30) — the interlude shown when a non-winning token is pulled up on
   attempt 1 or 2. Same overlay/fade mechanics as #reward-popup, but deliberately with NO
   backdrop tint: this is an interlude, not an ending, so the machine stays fully visible
   behind it. The layer itself still spans the viewport (so it swallows taps meant for the
   grab button, and gives tap-to-dismiss its hit area) — it is just transparent.
   z-index sits above the machine and the attempts pill (50) and below #reward-popup (2000),
   so the reward popup always wins if both were ever visible at once. */
#catch-popup {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
}
#catch-popup.visible {
    opacity: 1;
    visibility: visible;
}
#catch-popup-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    gap: 12px;
    width: 240px;
    max-width: calc(100vw - 32px);
    background: #1A202C;
    border: 1px solid #4F616F;
    border-radius: 24px;
    direction: rtl;
    text-align: center;
    animation: rewardPopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
/* contain, not cover — coin art is a transparent sprite, not a photo */
#catch-popup-icon {
    width: 96px;
    height: 96px;
    object-fit: contain;
    flex-shrink: 0;
}
#catch-popup-title {
    font-family: 'IRANYekanXVF', 'Arial Black', sans-serif;
    font-weight: 800;
    font-size: 20px;
    line-height: 28px;
    color: #FFFFFF;
    margin: 0;
    text-align: center;
}
#catch-popup-caption {
    font-family: 'IRANYekanXVF', 'Arial Black', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    color: #9AA2B5;
    margin: 0;
    text-align: center;
}

/* Connection-error popup — same overlay/fade mechanics as #reward-popup */
#connection-error-popup {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
}
#connection-error-popup.visible {
    opacity: 1;
    visibility: visible;
}
#connection-error-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px;
    gap: 16px;
    position: relative;
    width: 260px;
    height: 155px;
    background: #1A202C;
    border: 1px solid #4F616F;
    border-radius: 24px;
    direction: rtl;
    text-align: center;
}
#connection-error-text {
    font-family: 'IRANYekanXVF', 'Arial Black', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 23px;
    color: #FFFFFF;
    margin: 0;
    width: 196px;
    align-self: stretch;
    text-align: center;
}
#connection-error-retry-button {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px;
    gap: 10px;
    width: 196px;
    height: 52px;
    background: #FBBF23;
    box-shadow: 0px 4px 8px -8px rgba(251, 191, 35, 0.4);
    border-radius: 12px;
    border: none;
    cursor: pointer;
    align-self: stretch;
}
#connection-error-retry-button-text {
    font-family: 'IRANYekanXVF', 'Arial Black', sans-serif;
    font-weight: 800;
    font-size: 14px;
    line-height: 20px;
    color: #1A1A2C;
}