/* ==========================
     Root variables
     ========================== */
  :root{
    --bg-color: #121212;
    --accent: #bd2d2d;
    --dialog-text: #fff;
    --info-bg: #3a3a3a;

    --item-info-width: 350px;
    --item-size-base: 64px;   /* base size the design used */
    --merchant-width: 120px;  /* base merchant width (CSS multiplies by --canvas-scale) */

    --shake-duration: 2600ms;
    --glitch-pulse-duration: 180ms;
    --glitch-iterations: 1;
    --canvas-scale: 1; /* calculated in JS (continuous scaling) - fallback 1 */


   /* Info box control vars (edit these to tune position/size) */
    --info-fixed-width: 350px;       /* desktop fixed width (scales via --canvas-scale) */
    --info-fixed-height: 605px;      /* reduced height to sit near the talk button */
    --info-gap: 2px;                 /* gap between info box and dialogue box */
    --info-top-offset: 2px;          /* distance from top of canvas */
    --dialogue-estimated-height: 140px; /* estimated dialogue box height for positioning */
    --dialogue-bottom-percent: 2%;   /* dialogue box bottom position */

}

/* GPU acceleration and performance optimization */
.glitch-shake,
.glitch-blur,
.dialogue-text.glitch-text-active,
.dialogue-box.pulse-emphasis,
#electric-arcs,
#electric-arcs path,
.zap-scanlines,
.zap-white {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

#electric-arcs {
  contain: layout style paint;
  isolation: isolate;
}

#electric-arcs path {
  transform: translateZ(0);
  will-change: stroke-dashoffset, opacity;
}

  /* ========================== 
     Base layout
     ========================== */
  html,body{
    height:100%;
    background:var(--bg-color);
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin:0;
  }

  .page-wrap{
    position: relative;
    max-width: 1150px;
    margin: 10px auto;
    padding: 0;
  }

/* Allow mobile overflow for elements below canvas */
@media (max-width: 476px) {
  .page-wrap {
    overflow: visible !important;
    padding-bottom: 180px; /* Space for dialogue box below canvas */
  }
  
  #shop-canvas {
    overflow: visible !important;
    margin-bottom: 0;
  }
}

  #shop-canvas{
    position: relative;
    width: 100%;
    aspect-ratio: 16/10;
    border-radius: 6px;
    overflow: visible;
    box-shadow: 0 6px 18px rgba(0,0,0,0.2);
    z-index: 1;
    background-color: transparent;
  }

  #shop-bg-img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    z-index: 1;
    pointer-events: none;
  }

  .interactive-layer{
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
  }

  /* ==========================
     Item buttons / icons - FLUID RESPONSIVE (NO BREAKPOINTS)
     ========================== */
  .item-btn{
    position: absolute;
    border: 2px solid transparent;
    background: transparent;
    padding: 0;
    border-radius: 8px;
    cursor: pointer;
    pointer-events: auto;
    transition: box-shadow 120ms ease, border-color 120ms ease, transform 120ms ease;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform-origin: center center;
    will-change: width, height;
    /* FLUID SCALING - No breakpoints, just smooth canvas-scale */
    width: calc(var(--item-size-base) * var(--hitbox-scale, 1) * var(--canvas-scale, 1));
    height: calc(var(--item-size-base) * var(--hitbox-scale, 1) * var(--canvas-scale, 1));
    /* Center on position with optional offset (set inline via style="top: X; left: Y;") */
    transform: translate(calc(-50% + var(--btn-offset-x, 0%)), calc(-50% + var(--btn-offset-y, 0%)));
  }

  .item-btn img{
    display: block;
    width: calc(var(--item-size-base) * var(--icon-scale, 1) * var(--canvas-scale, 1));
    height: auto;
    pointer-events: none;
    user-select: none;
    flex-shrink: 0;
    transform-origin: center center;
    transition: transform 180ms cubic-bezier(.2,.8,.2,1), opacity 120ms ease;
    will-change: width;
  }

  .item-btn:hover{
    box-shadow: 0 6px 14px rgba(0,0,0,0.25);
    border-color: rgba(255,255,255,0.6);
    transform: translate(calc(-50% + var(--btn-offset-x, 0%)), calc(-50% + var(--btn-offset-y, 0%))) scale(1.08);
  }

  .item-btn:active{
    transform: translate(calc(-50% + var(--btn-offset-x, 0%)), calc(-50% + var(--btn-offset-y, 0%))) scale(1.02);
  }

  .item-btn.active{
    border-color: #ff3333;
    box-shadow: 0 10px 24px rgba(255, 51, 51, 0.4), 0 0 12px rgba(255, 51, 51, 0.3);
  }

  /* ==========================
     Merchant character & dialogue
     ========================== */
  #merchant-character {
    position: absolute;
    bottom: 6%;
    left: 24%;
    z-index: 20;
    pointer-events: auto;
    transform-origin: center bottom;
    width: calc(var(--merchant-width) * var(--canvas-scale, 1));
    height: auto;
    transition: transform 180ms ease;
    will-change: width;
  }

  #merchant-character img,
  .merchant-sprite img {
    display: block;
    width: 200%;
    height: auto;
    max-width: none;
    pointer-events: none;
    transform-origin: bottom center;
    will-change: width, transform;
  }

/* Override size for scream expression only
   NOTE: switched from matching on `src` to matching on a data attribute (data-emotion)
   so the sizing will only apply *after* we explicitly mark the element as scream in JS.
*/
#merchant-character img[data-emotion="scream"],
.merchant-sprite img[data-emotion="scream"] {
  width: 280%; /* Adjust this percentage to match visual size of other expressions */
}


.dialogue-box{
    position: absolute;
    left: 50%;
    bottom: 1%;
    transform: translateX(-50%);
    width: 94%;
    max-width: 1100px;
    z-index: 30;
    pointer-events: auto;
    background: linear-gradient(180deg, rgba(30,30,30,0.87), rgba(10,10,10,0.85));
    color: var(--dialog-text);
    border-radius: 12px;
    padding: 7px 18px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    display: flex;
    gap:12px;
    align-items: flex-start;
    font-family: "Georgia", "Times New Roman", serif;
  }

  .dialogue-content-wrapper{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }

  .dialogue-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
  }

  .merchant-name-label{
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
    white-space: nowrap;
    letter-spacing: 0.3px;
    padding: 2px 0;
  }

  .dialogue-avatar{ width:64px; min-width:64px; height:64px; }
  .dialogue-avatar img{ 
    width:100%; 
    border-radius:8px;
    visibility: visible !important;
    opacity: 1 !important;
  }

.dialogue-text{ 
    flex: 1; 
    font-size: 1rem; 
    line-height: 1.35; 
    color: #fbfbfb;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    min-width: 0;
  }


.item-info{
    position: absolute;
    /* -------------------------
       Width: fixed desktop reference scaled by --canvas-scale
       ------------------------- */
    width: calc(var(--info-fixed-width) * var(--canvas-scale, 1));
    max-width: calc(30% - 28px);

    /* -------------------------
       Height: dynamic based on available space
       Position from top, leaving room for dialogue box at bottom
       ------------------------- */
    height: auto;
    max-height: calc(150% - var(--dialogue-bottom-percent) - var(--dialogue-estimated-height) - var(--info-gap) - var(--info-top-offset));
    min-height: 200px;

    /* -------------------------
       Positioning: flush with top of canvas, maintaining gap from dialogue box
       ------------------------- */
    top: var(--info-top-offset);
    bottom: auto;
    right: 1%;

    z-index: 30;
    pointer-events: auto;
    background: var(--info-bg);
    color: var(--dialog-text);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.5);
    padding: 8px;
    display: none; /* shown by CSS when a radio is checked */
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
}

/* Inner scroller sized to the panel so text scrolls within the reduced height */
.item-info-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* compute inner height subtracting panel padding (10px top + 10px bottom = 20px) */
    height: calc(var(--info-fixed-height) * var(--canvas-scale, 1) - 20px);
    max-height: calc(var(--info-fixed-height) * var(--canvas-scale, 1) - 20px);
    min-height: calc(var(--info-fixed-height) * var(--canvas-scale, 1) - 20px);
    overflow-y: auto;
    padding-right: 8px;
    box-sizing: border-box;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* default: hide all content blocks */
.item-info-content{ display:none; }

.item-info-close {
    position: absolute;
    top: 6px;
    right: 6px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    padding: 4px;
    transition: color 150ms ease, transform 150ms ease;
    user-select: none;
}

/* visual hover for close label */
.item-info-close:hover { color: #ff3333; }

/* header: prominent but compact */
.item-info .item-title{
    font-family: "Georgia", "Times New Roman", serif; /* elegant serif for the title */
    font-weight: 700;
    font-size: clamp(1rem, 1.6vw, 1.15rem); /* responsive but capped */
    line-height: 1.05;
    margin: 6px 0 4px 0; /* compact vertical footprint */
    padding: 0;
    color: #fff;
    text-align: center; /* center header for visual focus */
    letter-spacing: 0.4px;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* small decorative rule centered under the title */
.item-info .item-title::after{
    content: "";
    display: block;
    margin: 6px auto 0;
    width: 38%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(255,80,80,0.95), rgba(189,45,45,0.85));
    opacity: 0.95;
}

/* tagline smaller, centered, and lighter */
.item-info .item-tagline{
    font-style: italic;
    font-size: 0.86rem;
    margin: 4px 0 8px 0;
    color: rgba(255,255,255,0.85);
    text-align: center;
    display: block;
}
.item-info .item-tagline em { font-style: italic; color: rgba(255,255,255,0.85); }

/* body text: readable compact layout */
.item-info .item-longdesc {
    font-size: 0.94rem;
    line-height: 1.28;
    color: rgba(250,250,250,0.94);
    margin: 0 0 8px 0;
    text-align: left; /* keep body left-aligned for readability */
}

.item-info .item-bullets {
    margin: 0 0 8px 0;
    padding-left: 16px;
    font-size: 0.92rem;
    color: rgba(240,240,240,0.92);
    line-height: 1.25;
}
.item-info .item-bullets li { margin-bottom: 4px; }

/* Link styling: red by default and expands slightly on hover */
.item-info .item-more a{
    color: var(--accent);
    text-decoration: none;
    font-weight: 700;
    display: inline-block;
    padding: 4px 6px;
    border-radius: 6px;
    transition: transform 140ms ease, box-shadow 140ms ease, letter-spacing 140ms ease;
    letter-spacing: 0.2px;
    will-change: transform;
    box-shadow: 0 2px 8px rgba(189,45,45,0.08), inset 0 -2px rgba(0,0,0,0.05);
}
.item-info .item-more a:hover{
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 6px 18px rgba(189,45,45,0.12), inset 0 -2px rgba(0,0,0,0.06);
    letter-spacing: 0.6px;
}

/* ==========================
   CSS toggle rules (radio-driven)
   - Inputs are placed as siblings earlier in the DOM.
   - For each item radio we show the panel and the matching content.
   ========================== */

/* by default hide panel (already set). show when specific radios checked */
/* show info panel when any item radio is checked */
#info-1:checked ~ .item-info,
#info-2:checked ~ .item-info,
#info-3:checked ~ .item-info,
#info-4:checked ~ .item-info,
#info-5:checked ~ .item-info,
#info-6:checked ~ .item-info,
#info-7:checked ~ .item-info,
#info-8:checked ~ .item-info,
#info-9:checked ~ .item-info{
    display: block;
}

/* ensure no panel when the "none" radio is checked */
#info-none:checked ~ .item-info {
    display: none;
}

/* Show specific content when matching radio is checked */
.item-info-content.active { display: block !important; }

/* make close control a label that checks the "none" radio */
.item-info .item-info-close { display: inline-block; }

/* keep radio inputs hidden */
.item-info-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Image styling inside the info panel
   - Constrain the image within the container respecting borders & padding.
   - Image aligns with text content and won't overflow.
   ========================== */
.item-info .item-image-wrap {
    box-sizing: border-box;
    padding: 6px;                 /* keeps image away from the panel edge */
    margin: 0;
    width: 100%;
    /* allow image block to occupy at most 46% of the reduced panel height to leave room for text */
    max-height: calc(var(--info-fixed-height) * var(--canvas-scale, 1) * 0.46);
    display: flex;
    align-items: center;          /* vertically center the image */
    justify-content: center;      /* center the image for a neat look */
    overflow: hidden;             /* crop any excess */
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.03));
    border: 1px solid rgba(255,255,255,0.02);
}

.item-info .item-image-wrap img {
    display: block;
    width: auto;
    height: auto;
    max-width: 40%;
    max-height: 40%;
    object-fit: contain;
    vertical-align: middle;
    box-sizing: border-box;
    filter: saturate(1.02) contrast(1.02);
}

@media (max-width: 476px) {
  /* Constrain the actual image so it remains tidy at the bottom */
  .item-info .item-image-wrap img {
    display: block;
    margin: 0 auto;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
}


.item-info {
background: linear-gradient(180deg, rgba(30,30,30,0.67), rgba(10,10,10,0.65)); /* Reduced from default opacity */
  backdrop-filter: blur(3px); /* Optional: adds a nice blur effect behind the panel */
  -webkit-backdrop-filter: blur(.8px); /* Safari support */
}

  /* Text wrapping safety for reduced-height panel */
  .item-info .item-longdesc,
  .item-info .item-tagline,
  .item-info p,
  .item-info .item-bullets {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    margin: 0 0 6px 0;
  }

  .disabled-interaction{ pointer-events: none !important; user-select: none !important; opacity: 0.98; }


  .item-info-inner::-webkit-scrollbar { width: 8px; height: 8px; }
  .item-info-inner::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
  .item-info-inner::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.06));
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.18);
  }
  .item-info-inner::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.09));
  }
  /* Firefox */
  .item-info-inner { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent; }


.talk-button{
  
    position: relative;
    right: auto;
    bottom: auto;
    z-index: auto;
    pointer-events: auto;
    background: rgba(11, 79, 121, 0.50);
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.88rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    cursor: pointer;
    transition: transform 100ms ease, color 150ms ease, background 150ms ease;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .talk-button:hover{
    transform: translateY(-2px);
    color: #ff3333;
    background: rgba(11, 79, 121, 0.65);
  }


/* Performance optimization for all animations */
@media (prefers-reduced-motion: no-preference) {
  #electric-arcs path {
    animation-timing-function: linear;
    animation-fill-mode: forwards;
  }
  
  .glitch-shake {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .dialogue-text.glitch-text-active::before,
  .dialogue-text.glitch-text-active::after {
    animation-timing-function: steps(6);
    contain: paint;
  }
}

  /* ===== ACCESSIBILITY ===== */
  @media (prefers-reduced-motion: reduce) {
    .glitch-shake,
    .glitch-blur,
    .dialogue-text.glitch-text-active,
    .zap-scanlines,
    #electric-arcs,
    .dialogue-box.pulse-emphasis,
    .item-btn,
    .item-btn img,
    #merchant-character,
    .item-hitbox {
      animation: none !important;
      transition: none !important;
    }
  }

  /* ===== ANIMATIONS ===== */
  @keyframes zap-shake {
    0%   { transform: translate(0,0); }
    10%  { transform: translate(-4px, 2px); }
    25%  { transform: translate(3px, -3px); }
    40%  { transform: translate(-3px, 3px); }
    55%  { transform: translate(4px, -2px); }
    70%  { transform: translate(-2px, 3px); }
    85%  { transform: translate(3px, -2px); }
    100% { transform: translate(0, 0); }
  }

  @keyframes zap-blur {
    0%   { filter: blur(0px) saturate(1); }
    50%  { filter: blur(3px) saturate(1.06); }
    100% { filter: blur(0px) saturate(1); }
  }

  .glitch-shake {
    animation-name: zap-shake;
    animation-duration: var(--shake-duration, 4900ms);
    animation-timing-function: ease-in-out;
    animation-iteration-count: 6;
  }

  .glitch-blur {
    animation-name: zap-blur;
    animation-duration: var(--shake-duration, 4900ms);
    animation-timing-function: ease-in-out;
    animation-iteration-count: 6;
  }

  .dialogue-box.pulse-emphasis {
    animation: dialogue-pulse 0.6s ease-in-out 3;
    box-shadow: 0 0 30px rgba(255, 50, 50, 0.6), 0 8px 24px rgba(0,0,0,0.4);
  }

  @keyframes dialogue-pulse {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.03); }
  }

  .zap-scanlines {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 99995;
    background-image: repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.03) 0px,
      rgba(0, 0, 0, 0.03) 1px,
      transparent 1px,
      transparent 2px
    );
    opacity: 0;
    display: none;
    animation: scanline-scroll 8s linear infinite;
  }

  @keyframes scanline-scroll {
    from { background-position-y: 0; }
    to   { background-position-y: 2px; }
  }

  .zap-white {
    position: fixed;
    inset: 0;
    background: #ffffff;
    opacity: 0;
    pointer-events: none;
    z-index: 99998;
    transition: opacity var(--white-fade-duration, 1000ms) ease-in-out;
  }

  .zap-white.visible { 
    opacity: 0.98;
  }

#electric-arcs {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99997;
    overflow: visible;
    display: none;
    contain: strict;
    content-visibility: auto;
    transform: translateZ(0);
    will-change: opacity;
  }

#electric-arcs path {
  stroke: #e0f7ff;
  stroke-width: 3;
  fill: none;
  opacity: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(200, 240, 255, 0.75));
  transform: translateZ(0);
  will-change: stroke-dashoffset, opacity;
  shape-rendering: optimizeSpeed;
}

  @keyframes arc-draw {
    0%   { stroke-dashoffset: 300; opacity: 0; }
    15%  { opacity: 1; }
    50%  { stroke-dashoffset: 0; opacity: 0.9; }
    100% { stroke-dashoffset: -100; opacity: 0; }
  }

  @keyframes arc-jitter {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(1px, -1px); }
    50% { transform: translate(-1px, 1px); }
    75% { transform: translate(1px, 1px); }
  }

  #electric-arcs.arc-run { display: block; }

  #electric-arcs.arc-run path.a1 { 
    stroke-dasharray: 300; 
    animation: arc-draw 1000ms ease-out forwards, arc-jitter 1000ms linear;
  }

  #electric-arcs.arc-run path.a2 { 
    stroke-dasharray: 280; 
    animation: arc-draw 1100ms ease-out 50ms forwards, arc-jitter 1100ms linear 50ms;
  }

  #electric-arcs.arc-run path.a3 { 
    stroke-dasharray: 260; 
    animation: arc-draw 1200ms ease-out 100ms forwards, arc-jitter 1200ms linear 100ms;
  }

  .dialogue-text {
    position: relative;
    z-index: 31;
    will-change: transform;
  }

  .dialogue-text.glitch-text-active {
    animation: text-horizontal-glitch 600ms steps(4) 1;
  }

  .dialogue-text.glitch-text-active::before,
  .dialogue-text.glitch-text-active::after {
    content: attr(data-glitch);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    overflow: visible;
    pointer-events: none;
    opacity: 0.85;
  }

  .dialogue-text.yell {
    font-size: 2.1rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    line-height: 1.05;
    text-align: center;
    color: #fff8f8;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,0.45));
    will-change: transform, filter;
    z-index: 99999;
    display: block;
    transition: transform 180ms ease, font-size 180ms ease;
    overflow-wrap: break-word;
  }

  .dialogue-box.yell-mode {
    padding: 22px 24px;
    align-items: center;
    justify-content: center;
  }

  @keyframes yell-pop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.14); }
    60%  { transform: scale(1.06); }
    100% { transform: scale(1); }
  }
  .dialogue-text.yell.yell-pop {
    animation: yell-pop 700ms cubic-bezier(.2,.9,.2,1) 1;
  }

  .dialogue-text.glitch-text-active::before {
    color: rgba(255, 110, 110, 0.95);
    transform: translate(-3px, 0);
    text-shadow: -3px 0 rgba(255, 60, 60, 0.9);
    animation: text-flicker-red var(--text-glitch-duration, 900ms) steps(6) 1;
  }

  .dialogue-text.glitch-text-active::after {
    color: rgba(100, 200, 255, 0.85);
    transform: translate(2px, 0);
    text-shadow: 2px 0 rgba(50, 150, 255, 0.7);
    animation: text-flicker-cyan 600ms steps(6) 50ms 1;
  }

  .glitch-global > * {
    transform-origin: center center;
    will-change: transform, filter, opacity;
    animation-name: global-glitch;
    animation-duration: var(--glitch-pulse-duration, 180ms);
    animation-iteration-count: var(--glitch-iterations, 1);
    animation-timing-function: steps(2);
    filter: contrast(1.05) saturate(1.12) drop-shadow(0 0 6px rgba(255,255,255,0.06));
  }

  .glitch-global .item-btn,
  .glitch-global .item-btn img,
  .glitch-global .item-icon,
  .glitch-global .inventory-slot,
  .glitch-global .fixed-ui,
  .glitch-global [data-no-glitch-shift],
  .glitch-global [data-no-glitch-shift] * {
    animation: none !important;
    filter: contrast(1.05) saturate(1.12) !important;
    will-change: filter, opacity;
  }

@keyframes global-glitch {
    0% { transform: translate3d(0, 0, 0) rotate(0); filter: hue-rotate(0deg) saturate(1); }
    25% { transform: translate3d(var(--global-glitch-translate, 1px), -1px, 0) rotate(-0.3deg); filter: hue-rotate(5deg) saturate(1.1); }
    50% { transform: translate3d(calc(var(--global-glitch-translate, 1px) * -1), 1px, 0) rotate(0.3deg); filter: hue-rotate(-5deg) saturate(1.15); }
    75% { transform: translate3d(1px, calc(var(--global-glitch-translate, 1px) * -1), 0) rotate(-0.2deg); filter: hue-rotate(6deg) saturate(1.18); }
    100% { transform: translate3d(0, 0, 0) rotate(0); filter: hue-rotate(0deg) saturate(1); }
  }
    25% { transform: translate(var(--global-glitch-translate, 1px), -1px) rotate(-0.3deg); filter: hue-rotate(5deg) saturate(1.1); }
    50% { transform: translate(calc(var(--global-glitch-translate, 1px) * -1), 1px) rotate(0.3deg); filter: hue-rotate(-5deg) saturate(1.15); }
    75% { transform: translate(1px, calc(var(--global-glitch-translate, 1px) * -1)) rotate(-0.2deg); filter: hue-rotate(6deg) saturate(1.18); }
    100% { transform: translate(0, 0) rotate(0); filter: hue-rotate(0deg) saturate(1); }


  .glitch-global .dialogue-box,
  .glitch-global #merchant-character,
  .glitch-global .item-btn,
  .glitch-global .item-info,
  .glitch-global .talk-button {
    filter: contrast(1.08) saturate(1.2);
  }

  @keyframes text-horizontal-glitch {
    0% { transform: translateX(0); }
    20% { transform: translateX(-2px); }
    40% { transform: translateX(2px); }
    60% { transform: translateX(-1px); }
    80% { transform: translateX(1px); }
    100% { transform: translateX(0); }
  }

  @keyframes text-flicker-red {
    0% { opacity: 0.85; clip-path: inset(0 0 0 0); }
    33% { opacity: 0.9; clip-path: inset(40% 0 50% 0); }
    66% { opacity: 0.75; clip-path: inset(20% 0 70% 0); }
    100% { opacity: 0; clip-path: inset(0 0 0 0); }
  }

  @keyframes text-flicker-cyan {
    0% { opacity: 0.85; clip-path: inset(0 0 0 0); }
    33% { opacity: 0.75; clip-path: inset(60% 0 30% 0); }
    66% { opacity: 0.9; clip-path: inset(10% 0 80% 0); }
    100% { opacity: 0; clip-path: inset(0 0 0 0); }
  }

  /* responsive adjustments */
  @media (max-width: 920px){
/* Keep the panel sizing consistent with top positioning */
    .item-info {
      width: calc(var(--info-fixed-width) * var(--canvas-scale, 1) * 0.92);
      height: auto;
      max-height: calc(100% - var(--dialogue-bottom-percent) - var(--dialogue-estimated-height) - var(--info-gap) - var(--info-top-offset));
      top: var(--info-top-offset);
      right: 3%;
    }
.dialogue-box {
      width: 96%;
      z-index: 35;
      padding: px 12px;
      bottom: 2%;
    
    }
    .merchant-name-label{
      font-size: 0.88rem;
    }
    .talk-button{
      padding: 7px 10px;
      font-size: 0.82rem;
    }
.item-info-inner {
      height: 100%;
      max-height: 100%;
    }
  }

  @media (max-width: 976px){
.item-info {
      width: calc(var(--info-fixed-width) * var(--canvas-scale, 1) * 0.95);
      top: var(--info-top-offset);
      right: 2%;
      bottom: auto;
      height: auto;
      max-height: calc(100% - var(--dialogue-bottom-percent) - var(--dialogue-estimated-height) - var(--info-gap) - var(--info-top-offset));
      font-size: 0.88rem;
    }


    
    .item-info h4 { font-size: 1rem; }
    .item-info p, .item-tagline, .item-longdesc { font-size: 0.85rem; }
    .item-bullets { font-size: 0.82rem; }
    .dialogue-avatar { display:none; }

    .dialogue-text {
      max-width: 100%;
      overflow-wrap: break-word;
      word-wrap: break-word;


    }
  }

  @media (max-width: 576px){
    #shop-canvas { position: relative; }
.item-info {
      width: calc(var(--info-fixed-width) * var(--canvas-scale, 1) * 0.9);
      max-width: calc(100% - 32px);
      position: absolute;
      top: var(--info-top-offset);
      right: 2%;
      left: auto;
      bottom: auto;
      height: auto;
      max-height: calc(100% - var(--dialogue-bottom-percent) - var(--dialogue-estimated-height) - var(--info-gap) - var(--info-top-offset));
      font-size: 0.82rem;
    }
    .item-info h4 { font-size: 0.95rem; }
    .item-info p, .item-tagline, .item-longdesc { font-size: 0.8rem; line-height: 1.3; }
    .item-bullets { font-size: 0.78rem; margin-left: 14px; }
    .item-image-wrap { height: 90px; min-height: 60px; }



.merchant-name-label{
      font-size: 0.82rem;
    }
    .talk-button {
      padding: 6px 9px;
      font-size: 0.8rem;
    }
    .dialogue-header{
      gap: 8px;
    }

/* ensure inner scroller stays correct */
    .item-info-inner {
      height: 100%;
      max-height: 100%;
    }
  }

  
  /* Tablet / small desktops and large phones */
  @media (max-width: 920px) {
    .item-info {
      width: calc(var(--info-fixed-width) * var(--canvas-scale, 1) * 0.96) !important;
      top: auto !important;
      right: 2% !important;
      bottom: calc(var(--talk-button-bottom) + var(--talk-button-height) + var(--info-gap)) !important;
      max-height: calc(var(--info-fixed-height) * var(--canvas-scale, 1)) !important;
      box-sizing: border-box;
      padding: 10px;
    }

    .item-info-inner {
      height: calc(var(--info-fixed-height) * var(--canvas-scale, 1) - 20px) !important;
      min-height: calc(var(--info-fixed-height) * var(--canvas-scale, 1) - 20px) !important;
      max-height: calc(var(--info-fixed-height) * var(--canvas-scale, 1) - 20px) !important;
      overflow-y: auto !important;
      
    }
  }

/* ---------- MOBILE: place .item-info below the canvas (only <= 476px) ---------- */
@media (max-width: 476px) {
  :root {
    /* compatibility vars */
    --info-fixed-height: 450px;
    /* Dialogue box height for spacing calculations */
    --dialogue-box-mobile-height: 140px;
    
    /* Total offset from canvas top to info box */
    --info-total-offset: calc(var(--dialogue-box-mobile-height) + 20px);
    --info-gap: 6px;

    /* outer cap for item-info panel */
    --info-mobile-max: 70vh;

    /* inner visible length before scrolling */
    --info-mobile-default-height: 360px;

    /* horizontal side gap, font and padding tuning */
    --info-mobile-side-gap: 10px;
    --info-mobile-font-size: 1rem;
    --info-mobile-padding: 12px;

    /* Dialogue tuning for very small screens */
    --dialogue-left-edge: 3%;         /* keep left where it is */
    --dialogue-width-reduced: calc(100% - 32px); /* near full width but respects left edge */
    --dialogue-max-width: none;

    /* ✅ Talk Button offset control (distance ABOVE dialogue box) */
    --talk-button-offset-mobile: 68px; /* adjust this: increase to move button higher */
    
  }



  /* allow panel to extend below canvas */
  .interactive-layer { 
    overflow: visible !important; 
  }
/* info panel below canvas AND dialogue box (mobile) - positioned under dialogue using estimated dialogue height + 2px gap */
.item-info {
  position: absolute !important;
  /* place the top of this panel at:
     canvas-bottom (100%) + estimated dialogue height + 2px gap */
  top: calc(100% + var(--dialogue-box-mobile-height, 140px) + 2px) !important;
  bottom: auto !important;

  /* keep safe-area gap horizontally */
  left: calc(var(--info-mobile-side-gap) + env(safe-area-inset-left, 0px)) !important;
  right: calc(var(--info-mobile-side-gap) + env(safe-area-inset-right, 0px)) !important;
  transform: none !important;

  width: auto !important;
  max-width: calc(100% - (var(--info-mobile-side-gap) * 2)) !important;

  height: auto !important;
  max-height: var(--info-mobile-max) !important;

  padding: var(--info-mobile-padding) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  z-index: 30 !important;
  display: none; /* visibility still controlled by your radio toggles */
  font-size: var(--info-mobile-font-size) !important;
  line-height: 1.35 !important;
}


  /* inner scroller sizing for item-info */
  .item-info-inner {
    height: auto !important;
    --_outer-usable: calc(var(--info-mobile-max) - (var(--info-mobile-padding) * 2));
    max-height: min(var(--info-mobile-default-height), var(--_outer-usable)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-right: 6px !important;
  }

/* Show/hide controls left intact */
#info-1:checked ~ .item-info,
#info-2:checked ~ .item-info,
#info-3:checked ~ .item-info,
#info-4:checked ~ .item-info,
#info-5:checked ~ .item-info,
#info-6:checked ~ .item-info,
#info-7:checked ~ .item-info,
#info-8:checked ~ .item-info,
#info-9:checked ~ .item-info { display: block !important; } 

/* Mobile positioning for Talk Button - now relative within dialogue box */
  .talk-button {
    padding: 7px 11px !important;
    font-size: 0.85rem !important;
  }
  .merchant-name-label{
    font-size: 0.8rem !important;
  }
  .dialogue-header{
    gap: 6px !important;
  }

  .item-info .item-info-close {
    top: 8px !important;
    right: 8px !important;
    padding: 6px !important;
    font-size: 1.05rem !important;
  }

/* dialogue box on very small screens - positioned below canvas */
  .dialogue-box {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: calc(100% + 8px) !important;
    bottom: auto !important;
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    padding: 12px 14px !important;
    z-index: 35 !important;
    margin-left: calc(env(safe-area-inset-left, 0px) + 0px);
    margin-right: calc(env(safe-area-inset-right, 0px) + 0px);
  }
} 
 
 
/* ========================================================
   4. NAVIGATION
   ======================================================== */

/* --- Mobile Navigation Circle --- */
.mobile-nav {
  position: fixed;
  bottom: 15px;
  right: -140px; /* hidden by default */
  height: 250px;
  width: 250px;
  border-radius: 50% 0 0 50%;
  background: rgba(255,255,255,0.02);
  border: 2px solid #9f2a2a;
  z-index: 9999;
  opacity: 0.5;
  backdrop-filter: blur(3px);
  transition: right 0.3s ease, opacity 0.3s ease;
  pointer-events: none; /* Base element not clickable */
}

.mobile-nav.open {
  right: 0 !important;
  opacity: 1;
}

.mobile-nav:hover {
  opacity: 1;
}

/* Make specific nav elements clickable */
.mobile-nav .nav-tab,
.mobile-nav .side-nav,
.mobile-nav .nav-link {
  pointer-events: auto;
}

/* --- Side Navigation Links --- */
.side-nav {
  position: absolute;
  bottom: 15px;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
  z-index: 10000;
}

.nav-link {
  display: inline-block;
  background: #9f2a2a;
  color: white;
  text-decoration: none;
  padding: 1px 25px;
  border-radius: 20px 0 0 70px;
  transition: all 0.3s ease;
  font-family: monospace;
  letter-spacing: 2px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-link:hover {
  background: #b53333;
  padding-left: 55px;
  color: #ffcccc;
  box-shadow: -6px 6px 16px rgba(0,0,0,0.4);
  transform: scale(1.02);
}

.nav-link .nav-content {
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.3s ease;
}

.nav-link:hover .nav-content {
  transform: translateX(-10px);
}

.nav-link i {
  margin-right: 8px;
  font-size: 14px;
  min-width: 16px;
}

/* Nav link padding lengths (left side extension) */
.nav-link.home { 
  padding-left: 40px;  /* shortest */
}

.nav-link.characters { 
  padding-left: 30px; 
}

.nav-link.locations  { 
  padding-left: 50px;  /* longest */
}

.nav-link.worldinfo { 
  padding-left: 40px;  /* longest */
}

.nav-link.stories { 
  padding-left: 40px; 
}

.nav-link.au { 
  padding-left: 40px;  /* shortest */
}

/* --- Navigation Tab Toggle --- */
.nav-tab {
  position: absolute;
  top: 50%;
  left: -20px;
  transform: translateY(-50%);
  width: 20px;
  height: 60px;
  background: #9f2a2a;
  border-radius: 6px 0 0 6px;
  cursor: pointer;
  z-index: 10000;
  transition: background 0.3s ease;
}

.nav-tab:hover {
  background: #b53333;
}



/* --- Mobile Breakpoints --- */
@media (max-width: 768px) {
  /* Navigation adjustments */
  .mobile-nav {
    height: 150px;
    width: 150px;
    right: -125px;
    border-radius: 60% 0 0 60%;
    transform: scale(0.65);
    transform-origin: bottom right;
  }
}