/* ===== Base / Stage ====================================================== */
@font-face{
  font-family:"SinglyLinked";
  src:url("assets/fonts/SinglyLinkedRegular-vmoRL.otf") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --ink:#010326;
  --accent:#ffb347;
  --slot-bg:#fcbefd;
  --surround:#646464;
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  height:100%;
}

body{
  font-family:"SinglyLinked", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--surround);
  overflow:hidden;
}

/* Stage */
.container{
  position: relative;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100svh;
  background: #646464;
  overflow: hidden;
}

/* --- mobile-safe typography scaling --- */
html { -webkit-text-size-adjust: 100%; }

/* Base machine image */
.machine{
  font-size: clamp(12px, 2.6vw, 18px);
  position: relative;
  width: min(100vw, calc(92svh * 1170 / 2532)); 
  height: auto;                /* or 100% */
  aspect-ratio: 1170 / 2532;     /* your artboard */
  background: center/contain no-repeat url("assets/Main_Page.png");
  overflow: hidden;
}

/* FULL MACHINE OVERLAY (line art) — stays under UI */
.machine::after{
  content:"";
  position:absolute;
  inset:0;
  background: center/contain no-repeat url("assets/Button_LineArt.png");
  pointer-events:none;
  z-index: 6; /* below UI */
}

/* ----- UI layers INSIDE the machine (above overlay) ----- */
.stats,
.slots,
.message,
.bottom-bar,
.spin-button-wrapper{
  position:absolute;
  z-index: 6;  /* above overlay (5) */
}

/* ===== HUD: Stats ======================================================== */
.stats{
  left:24%;
  right:32%;
  top:27%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:clamp(30px, 1.8vw, 18px);
}

/* ===== Slots (the 3 + locked 4th) ======================================= */
.slots{
  left:35.3%;
  top:44.5%;                       /* tweak to align with window in art */
  transform:translateX(-50%);
  display:flex;
  gap:50%;
  z-index: 3;
}

.slot{
  position: relative;            /* keep relative for digit centering */
  width:13.5%;
  scale: 100%;
  aspect-ratio:1 / 1;
  border:3px solid transparent;
  border-radius:8px;
  font-size:clamp(20px, 3.2vw, 28px);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "kern" 0, "liga" 0;
  overflow: visible;
}

/* Digit is absolutely centered in a fixed-width box */
.slot .digit{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  display:block;
  width: 1.2ch;          /* fixed width prevents horizontal shift */
  text-align:center;
  line-height:1;

}

/* Slot 4 needs room for +/- and the digit */
#slot4 .digit{
  width: 2.2ch;
}

.slot.locked{ background:#dddddd00; color:#8270d100; border-style:dashed; }
/* make the digit grey when locked as well */
.slot.locked .digit{ 
    border-radius: 3px;
    z-index: 3;
}


.slot.pos{ color:#1a7f37; }      /* phase 2 green */
.slot.neg{ color:#c62828; }      /* phase 2 red   */

/* subtle spin wobble (kept off by final override if you use it) */
.slot.spinning{
  filter:blur(1px);
}

/* The digit stays put; we animate an overlay above it */
.slot .digit{
  position: relative;            /* anchor the overlay */
  /* keep your centering styles here */
}

/* overlay base — hidden above the slot */
.slot .digit::after{
  content:"";
  position:absolute;
  left:50%; top:35%;
  transform: translate(-50%, -50%) scaleY(0);  /* hidden, squished */
  transform-origin: top;
  width: 2.3em;                        /* size of your blue plate */
  height: 5em;
  background:#8270d1;
  border-radius: 3px;
  opacity: 0;
  pointer-events:none;
  z-index: 3;                           /* on top of the digit */
  transition: transform .25s ease, opacity .2s ease;
}

/* show/slide DOWN when locked */
.slot.locked .digit::after{
  transform: translate(-50%, -50%) scaleY(1);     /* centered on the digit */
  opacity: 1;
}

/* hide/slide DOWN when the digit is active (spinning/unlocked) */
.slot.spinning .digit::after,
.slot:not(.locked) .digit::after{
  transform: translate(-50%, -180%) scaleY();
  opacity: 1;
}

/* wider plate for slot 4 (to fit +/-) */
#slot4 .digit::after{
  width: 2.4em;
}


/* ===== Message line ====================================================== */
.message{
  left:50%;
  top:79%;
  transform:translateX(-50%);
  width:76%;
  text-align:center;
  white-space:pre-line;
  line-height:1.0;
  font-size:clamp(14px, 2vw, 18px);
  text-transform: uppercase;
}

/* ===== Spin button + overlay ============================================ */
.spin-button-wrapper{
  left:50%;
  top:63.5%;                     /* nudge to fit your SPIN panel */
  transform:translateX(-50%);
  width:58%;                     /* scales with machine width */
  aspect-ratio:2.15 / 1;         /* shape of your SPIN panel */
}

#spinBtn, #spinOverlay{
  position:absolute;
  inset:0;                        /* fill wrapper */
}

#spinBtn{
  border:none;
  border-radius:15px;
  background:transparent;         /* transparent idle */
  color:transparent;
  cursor:pointer;
  z-index:1;
}
#spinBtn:active{
  background:rgba(99, 99, 99, 0.4);  /* press grey under line art */
}

#spinOverlay{
  object-fit: contain;
  pointer-events:none;            /* clicks go to button */
  z-index:2;
  /* mix-blend-mode:multiply;  optional */
}

/* ===== Bottom buttons row ================================================= */
.bottom-bar{
  left:49%;
  top:91.2%;
  transform:translateX(-50%);
  display:flex;
  gap:3%;
  width:95%;
  max-width:460px;
}

.hud-btn{
  position: absolute;
  left: 100%;
  height:55px;
  background:transparent;
  border:none;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
  font-size:clamp(20px, 1.8vw, 16px);
}

/* tweak these % to line up with your pads */
#rulesBtn{
  left:21.5%;           /* center of left pad */
  transform:translateX(-50%);
  width:38%;          /* width of left pad */
}

#restartBtn{
  left:76%;           /* center of right pad */
  transform:translateX(-50%);
  width:50%;          /* width of right pad (wider) */
}

.hud-btn:active{ background:rgba(56, 56, 56, 0.35); }

/* ===== Generic button style (if you use normal buttons elsewhere) ======== */
button{
  font-family:inherit;
}

/* ===== Utility =========================================================== */
.hidden{ display:none !important; }

/* (optional) final kill-switch for wobble/blur if needed elsewhere */
.slot.spinning {
  animation: none !important;
  filter: none !important;
  transform: none !important;
}

/* Full-screen layer centered */
.modal{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
}
.modal.hidden{ display:none !important; }

.modal__backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
}

.modal__panel{
  text-transform: uppercase;
  font-weight: 400;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  letter-spacing: .4px;
  width: clamp(280px, 70vw, 480px);
  max-height: min(80vh, 640px);
  overflow: auto;
  background: #fff;
  color: var(--ink);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  padding: 18px 20px 22px;
  position: relative;
}

/* Close button — force your font + literal X */
.modal__panel .modal__close{
  position:absolute; right:10px; top:10px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;

  font-family: "SinglyLinked", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 60px;               /* one size only */
  line-height: 1;
  text-transform: none;           /* keep the literal X */
  font-weight: 400;
  font-synthesis-weight: none; /* don't let the browser fake bold */
  -webkit-font-smoothing: antialiased;
  letter-spacing: .4px; /* optional: a touch of spacing in caps */
  color: var(--ink);
  z-index: 2;
}
.x-glyph{
  font-family:"SinglyLinked", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size:32px; line-height:1; font-weight:400; text-transform:uppercase;
}

.modal__panel .modal__close:hover{ opacity: .8; }
.modal__panel .modal__close:active{ transform: scale(.96); }
.modal__panel .modal__close:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Optional: rules content */
.rules-content{
  text-transform: uppercase;
  font-weight: 400;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  letter-spacing: .4px;
}


/* ===== iPhone/iPad: lock slot row geometry ===== */
@media (hover: none) and (pointer: coarse), (max-width: 820px) {

  .container{ height: 100dvh;}
  .machine{width: min(100vw, calc(100dvh * 1170 / 2532));
  height: auto;
  aspect-ratio: 1170 / 2532
  }
  
  /* Slots strip uses a fixed width + grid for stable gaps */
  .machine .slots{
    left: 55.5% !important;
    top: 44.7% !important;
    transform: translateX(-50%) !important;
    width: 64% !important;                 /* tweak to fit window */
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    column-gap: 7.8% !important;           /* tweak for spacing */
    row-gap: 0 !important;
    align-items: center !important;
  }

  /* Ensure predictable positioning inside grid cells */
  .machine .slots .slot { 
    position: relative !important;
    left: 0 !important;    
  }

  /* DIGIT (stays under the plate) */
  .machine .slots .slot .digit{
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: block !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    /*change font size - then change width/ height on .digit::after - then change width on #slot4 .digit::after */
    font-size: 1.5em;                     /* digit under plate */
    width: 1.4ch !important;               /* a touch wider on mobile */
    z-index: 1;    
  }

  /* ====== THE ONLY PLATE (same element as desktop): digit::after ====== */
  /* Resize/reposition for mobile; keep the same show/hide logic */
  .machine .slots .slot .digit::after{
    /* same content + animation model as desktop, just sized for mobile */
    content:"";
    position:absolute;
    left:50%; top:35%;
    transform: translate(-50%, -50%) scaleY(0);  /* hidden, squished */
    transform-origin: top;
    width: 2.0em;                        /* size of your blue plate */
    height: 4.25em;
    background:#8270d1;
    border-radius: 3px;
    opacity: 0;
    pointer-events:none;
    z-index: 3;                           /* on top of the digit */
    transition: transform .25s ease, opacity .2s ease;
  }

  /* #slot4’s plate a hair wider */
  .machine .slots #slot4 .digit::after{
    width: 2.1em !important;
  }

  /* Show the plate when locked (Phase 1 or 2 — JS toggles .locked) */
  .machine .slots .slot.locked .digit::after{
    transform: translate(-50%, -50%) scaleY(1) !important;
    opacity: 1 !important;
  }

   /* HIDE (unlocked/spinning) — push plate UP; DON'T fade */
  .machine .slots .slot.spinning .digit::after,
  .machine .slots .slot:not(.locked) .digit::after{
    transform: translate(50%, -160%) scaleY() !important;
    opacity: 1 !important;
  }

  /* Make sure spinning never introduces transforms/filters on the element stack */
  .machine .slots .slot.spinning,
  .machine .slots .slot.spinning .digit{
    animation: none !important;
    filter: none !important;
  }

  .message{
  left:50%;
  top:78.6%;
  transform:translateX(-50%);
  width:76%;
  text-align:center;
  white-space:pre-line;
  line-height:1.0;
  font-size:clamp(17px, 2vw, 18px);
  text-transform: uppercase;
}

/* Hidden everywhere by default */
.rotate-overlay{
  position: fixed;
  inset: 0;
  display: none !important;          /* force off by default */
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: #0b0b0b;
  color: #fff;
  z-index: 9999;
  text-transform: uppercase;
  letter-spacing: .04em;
  font: 600 1rem/1.2 "SinglyLinked", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.rotate-content{ max-width: 26rem; }

/* Only show on *touch* devices in *landscape* */
@media screen and (orientation: landscape) and (hover: none) and (pointer: coarse){
  .rotate-overlay{ display: flex !important; }
  /* optional: block interaction with app underneath */
  .container{ pointer-events: none; filter: blur(2px); }
}


}