/* kiosk.css */

html, body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#000;
  touch-action:manipulation;
  -webkit-user-select:none;
  user-select:none;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

:root{
  --hs-pad-x: 6%;
  --hs-pad-y: 10%;

  --hs-global-nudge-x: 0px;
  --hs-global-nudge-y: 0px;

  /* NAV base size — 25% larger */
  --kiosk-btn-size: 206px;

  --kiosk-nav-inset-left: 6%;
  --kiosk-nav-inset-right: 6%;
  --kiosk-nav-inset-bottom: 10%;

  --kiosk-img-left: 0px;
  --kiosk-img-top: 0px;
  --kiosk-img-width: 100px;
  --kiosk-img-height: 100px;
  --kiosk-img-scale: 1;
}

/* Stage */
.stage{
  position:relative;
  width:100vw;
  height:100vh;
  overflow:hidden;
  background:#000;
}

/* Screen image */
.stage img.screen{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  z-index:1;
}

/* Overlay */
.overlay{
  position:absolute;
  inset:0;
  z-index:2;
}

.overlay[data-fit="screen"]{
  pointer-events:none;
}

/* Hotspots */
.hotspot{
  position:absolute;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  box-sizing:border-box;
  translate: calc(var(--hs-global-nudge-x) + var(--nudge-x, 0px))
             calc(var(--hs-global-nudge-y) + var(--nudge-y, 0px));
  pointer-events:auto;
}

.hotspot::before{
  content:"";
  position:absolute;
  inset: calc(-1 * var(--hs-pad-y)) calc(-1 * var(--hs-pad-x));
  border-radius: inherit;
}

.hotspot.debug::before{
  outline:3px solid rgba(0,255,0,0.75);
  background:rgba(0,255,0,0.15);
}

/* NAV locked to bitmap box */
.kiosk-nav{
  position:absolute;
  left: var(--kiosk-img-left);
  top: var(--kiosk-img-top);
  width: var(--kiosk-img-width);
  height: var(--kiosk-img-height);
  z-index:30;
  pointer-events:none;
}

.kiosk-nav-inner{
  position:absolute;
  left: var(--kiosk-nav-inset-left);
  right: var(--kiosk-nav-inset-right);
  bottom: var(--kiosk-nav-inset-bottom);
  height:0;
}

.kiosk-nav .kiosk-btn{
  pointer-events:auto;
}

/* Buttons */
.kiosk-btn{
  position:absolute;
  bottom:0;

  width: calc(var(--kiosk-btn-size) * var(--kiosk-img-scale));
  height: calc(var(--kiosk-btn-size) * var(--kiosk-img-scale));

  border-radius:999px;
  background: rgba(0,0,0,0.30);
  border:3px solid rgba(255,255,255,0.95);

  display:grid;
  place-items:center;

  box-sizing:border-box;
  padding: calc(18px * var(--kiosk-img-scale));

  color:#fff;
  text-decoration:none;

  box-shadow:0 14px 40px rgba(0,0,0,0.55);
  -webkit-tap-highlight-color:transparent;
}

/* Final tuned placement */
.kiosk-btn--home{
  left:0;
  translate: 75px 15px;
}

.kiosk-btn--back{
  right:0;
  translate: -75px 15px;
}

.kiosk-btn:active{
  transform:scale(0.96);
}

/* Content spacing */
.kiosk-btn-content{
  display:grid;
  place-items:center;
  gap: calc(16px * var(--kiosk-img-scale));
}

.kiosk-btn svg{
  width: calc(52px * var(--kiosk-img-scale));
  height: calc(52px * var(--kiosk-img-scale));
}

.kiosk-label{
  font-size: calc(20px * var(--kiosk-img-scale));
  font-weight:900;
  letter-spacing:0.4px;
  line-height:1.1;
}

/* MODALS */
.modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
}
.modal.is-open{ display:block; }

.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.75);
}

.modal-panel{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:clamp(8px, 2vw, 24px);
}

.modal-panel{ pointer-events:none; }
.modal-backdrop{ pointer-events:auto; }
.modal-video,
.modal-image,
.modal-close{ pointer-events:auto; }

.modal-close{
  position:absolute;
  top:clamp(12px, 2vw, 18px);
  right:clamp(12px, 2vw, 18px);
  width:clamp(44px, 5vw, 56px);
  height:clamp(44px, 5vw, 56px);
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.25);
  background:rgba(0,0,0,0.55);
  color:#fff;
  font-size:clamp(22px, 2.2vw, 28px);
  font-weight:800;
}

.modal-video,
.modal-image{
  width:min(80vw,1700px);
  max-height:80vh;
  border-radius:16px;
  background:#000;
  box-shadow:0 12px 48px rgba(0,0,0,0.60);
}