:root{
  --bg:#0a0f1f; --panel:#101830; --tile:#182030; --neon:#2EBECC; --pink:#ff00aa; --accent:#ffc94d;
  --gutter: 12px;
  --cyan-neon: #2EBECC;
  --light-cyan: #e0fcff;
  --magenta-neon: #D325C0;
  --light-magenta: #fdddf9;
  
  /* NeonButton color palette */
  --btn-bg: transparent;
  --btn-text-cyan: #b7eff5;
  --btn-text-magenta: #FFEEFD;
  --btn-border-cyan: #2EBECC;
  --btn-border-light-cyan: #d3fafdff;
  --btn-border-magenta: #FF2EBE;
  --btn-border-light-magenta: #FFEEFD;
  --btn-success: #2ECC71;
  --btn-success-light: #c9fde2;
  --btn-success-hover: #27AE60;
  --btn-danger: #E74C3C;
  --btn-danger-light: #fad7d3;
  --btn-danger-hover: #C0392B;
  --btn-outline-cyan: #b7eff5;

  /* Menu Buttons colors */
  --light: #fff;
  --achievements-primary: #BBBBBB;
  --friends-primary: #FABE01;
  --friends-secondary: #3772FF;
  --game-primary: #FFBF00;
  --game-secondary: #00F6FF;
  --research-primary: #00A6FF;
  --research-secondary: #00FFCC;
  --leaderboard-primary: #F42272;
  --leaderboard-secondary: #00D9FF;
  --shop-primary: #8E3DFF;
}

/* base */
html,body{
  margin:0; height:100%;
  background:var(--bg);
  font-family: "Orbitron", Inter, Arial,system-ui;
  color:#cfe;
  overscroll-behavior: none;
  touch-action: manipulation;
  font-size: clamp(14px, 2.5vw, 18px);
}

button {
  background: transparent;
}

/* Ensure NeonButton and NeonIconButton components maintain their own backgrounds */
button.neon-button,
button.neon-icon-button {
  background: transparent !important;
}

/* Center the game window to a phone-like width with a neon outline */
#gameWindow{
  /* Match menu overlay horizontal + top insets */
  width: calc(100% - 2*var(--gutter) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  max-width: 420px;             /* phone width cap */
  position: fixed;
  top: calc(6px + env(safe-area-inset-top, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  padding: var(--gutter);
  padding-bottom: calc(var(--gutter) + 24px);
  border-radius: 16px;
}

/* allow selection by default, opt out where needed */
.grid, .cell, .tile, .controls, .customers, .slot, button{
  user-select:none; -webkit-user-select:none;
}
/* inputs: restore dark style and keep exact alignment */
.gate-input{
  width:100%;
  height:44px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid #223047;
  background:#0f1426;
  color:#cfe;
  font-weight:700;
  font-size:16px;
  outline:none;
  box-sizing:border-box;
  -webkit-appearance:none;
  appearance:none;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.gate-input:-webkit-autofill,
.gate-input:-webkit-autofill:hover,
.gate-input:-webkit-autofill:focus{
  -webkit-text-fill-color:#cfe;
  box-shadow:0 0 0 1000px #0f1426 inset;
  transition: background-color 9999s ease-out 0s;
}
.gate-input:focus{
  border-color:#00ffcc;
  box-shadow:0 0 0 3px rgba(0,255,204,.12);
}
.gate-input::placeholder{ color:#8aa; opacity:.9 }

/* PIN should start at the same x as username */
#pinInput{ letter-spacing:2px; text-align:left; }

/* layout */
.wrap{
  /* Expand to nearly the full viewport width on small devices while
     retaining a sensible maximum on larger screens.  This makes the
     game board adaptive to different mobile widths. */
  /* Fill the available width on mobile screens.  Using 100% here
     ensures the layout does not compress important elements such as
     the XP and customer containers, preventing them from wrapping
     unintentionally. */
  width:100%;                  /* fill inside #gameWindow */
  max-width:unset;             /* inherit cap from #gameWindow */
  margin: auto 0;               /* vertical center inside game window */
  padding:10px 0;               /* remove left/right inner padding so grid hugs outline */
}
.top{
  display:block;
  width: 100%;
  margin: 0 0 10px 0;
  padding: 0 10px; /* add horizontal breathing room so boxes don't touch outline */
  box-sizing: border-box;
}
/* Status row: energy left, spacer, XP right */
.status-row{
  display:grid;
  grid-template-columns: auto 1fr auto; /* energy | spacer | xp */
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
/* keep spacer visible so middle stays blank */
/* .status-row .status-spacer intentionally has no override */
.status-row #xpBox{ justify-self:end; }

/* Customers / slots */
/* Customers / orders */
/* The customers container holds up to three order cards.  It uses flex
   layout to distribute the cards evenly with spacing. */
/* Allocate more horizontal space to the customers so they span roughly six
   grid tiles.  The xp-area will occupy the remaining width. */
.customers {
  
  grid-column:1 / span 11;

  /* Keep original visible size (3 across), scroll to reveal others */
  display: grid;
  grid-auto-flow: column;
  gap: 2px;
  /* Each card column width = 75% of the 3-column layout; visible gap stays 12px */
  /* Visible gap = 2px -> total gaps across 3 cols = 4px */
  grid-template-columns: repeat(3, calc((100% - 4px) / 3 * 0.75));
  grid-auto-columns: calc((100% - 4px) / 3 * 0.75);
  width: 100%;
  overflow-x: scroll;            /* Always reserve scrollbar space to prevent layout shift */
  overflow-y: hidden;            /* allow horizontal scroll only */
  -webkit-overflow-scrolling: touch;
  /* Restore outline without extra height */
  background: var(--panel);
  border: 2px solid var(--neon);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 10px 28px rgba(0,0,0,.35), 0 0 18px rgba(0,255,204,.05) inset;
  box-sizing:border-box;
  /* Keep height stable even when no customers */
  min-height: clamp(120px, 18vh, 200px);
}

/* Remove scrollbar arrows from customers horizontal scrollbar */
.customers::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Empty-state row inside customers: center the message and reserve space */
.customers-empty{
  min-height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  color:#cfe;
  opacity:.8;
}

/* Each customer card shows the portrait of the customer, their order plate
   and a give button. */
.customer-card{
  width:100%; /* fill grid column */
  background:var(--panel);
  border:2px solid var(--neon);
  border-radius:10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0;
  gap:0;
  box-shadow:0 6px 14px rgba(0,255,204,.1);
  position:relative; /* restored - needed for give button functionality */
  max-width:100%;
  overflow:hidden;
  box-sizing:border-box;
}

/* Customer reward label sizing, no reordering here */
.customer-card .order-reward .reward-xp,
.customer-card .order-reward .reward-coins span:not(.coin-icon){
  font-size: 0.6em;   /* use 0.5em if you want smaller */
  line-height: 1.1;
  white-space: nowrap;
}

/* Customer portrait.  */
.customer-img{
  width:100%;
  aspect-ratio:1 / 1;
  height:auto;
  display:block;
  margin:0;
  border-radius:inherit;      
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}


/* Order plate.  Displays the items the customer is requesting. */
.order-plate{
  position:relative;                   /* make this the positioned parent for .give button */
  width:calc(100% - 16px);
  min-height:36px;
  background:#0f1426;
  border-radius:8px;
  border:1px solid #223047;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:4px;
  margin:0 4px 6px 4px;
}
/* Individual item on the order plate. */
.plate-item{
  position:relative;
  width:28px;
  height:28px;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}

/* ------------------------------------------------------------------ */

.customer-card[data-reward] {
  position: relative;
}
.customer-card[data-reward]:hover::after {
  content: attr(data-reward);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10, 15, 31, 0.95);
  color: var(--neon);
  padding: 4px 8px;
  border: 1px solid var(--neon);
  border-radius: 6px;
  white-space: nowrap;
  font-size: 12px;
  pointer-events: none;
  z-index: 10000;
  box-shadow: 0 6px 12px rgba(0, 255, 204, 0.2);

  backdrop-filter: blur(4px);

  text-shadow: 0 0 6px #ffd54f, 0 0 3px #33aaff;
}
/* Quantity badge for items with counts > 1. */
.plate-count{
  position:absolute;
  bottom:-2px;
  right:-2px;
  background:rgba(0,0,0,.65);
  color:var(--accent);
  font-size:10px;
  font-weight:bold;
  padding:1px 3px;
  border-radius:4px;
  line-height:1;
}

/* Display for order rewards (XP and coins) below the order plate. */
.order-reward{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:0;
  margin-bottom:4px;
  font-size:12px;
  color:var(--neon);
}
.reward-xp{
  display:flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
}
.reward-xp::before{
  content:none;
  color:#ffd54f;
  font-size:14px;
  margin-right:2px;
}

.coin-icon.small{
  display:inline-block;
  width:16px;
  height:16px;
  background-image:url('../pictures/coins_currency.png');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  font-size:0;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));
}

/* Old splash styles removed - using InitialSplash.js component now */
@keyframes spin{to{transform:rotate(360deg)}}

/* -------------------------------------------------------------- */
/* Circular modal close button with neon outline + X image         */
/* Apply to all in-game modals to unify look and hit target.       */
/* Change --close-size to adjust across the app.                    */
/* -------------------------------------------------------------- */
.modal-close-x,
#bookClose:not(.neon-icon-button),
#storageClose:not(.neon-icon-button),
#achievementsClose,
#friendsClose{
  --close-size: 28px; /* smaller, less intrusive */
  width: var(--close-size);
  height: var(--close-size);
  position: absolute; /* remove from layout flow so it never shifts content */
  top: 6px;
  right: 6px;
  z-index: 10;
  display: inline-block;
  border-radius: 50%;
  border: 0;                /* remove outline */
  box-shadow: none;         /* no glow outline */
  background-color: transparent;
  background-image: url('../pictures/X-128.png');
  background-repeat: no-repeat;
  background-size: 60% 60%;
  background-position: center;
  cursor: pointer;
  line-height: 0;
  font-size: 0; /* hide any fallback glyph */
  color: transparent;
  user-select: none;
}

/* Position and spacing inside modal headers (common case) */
/* ensure absolute positioning uses the modal panel as the anchor */
.modal .modal-content{ position: relative; }

.modal-close-x:hover,
#bookClose:not(.neon-icon-button):hover,
#storageClose:not(.neon-icon-button):hover,
#achievementsClose:hover,
#friendsClose:hover{
  filter: brightness(1.06);
  box-shadow: 0 0 18px rgba(0,255,204,.35);
}

.modal-close-x:active,
#bookClose:not(.neon-icon-button):active,
#storageClose:not(.neon-icon-button):active,
#achievementsClose:active,
#friendsClose:active{
  transform: scale(.97);
}
.splash .msg{color:#00ffcc;font-weight:bold;text-align:center;max-width:260px}

/* (removed preboot fallback) */

/* Energy */
/* The new energy box displays the current energy and a countdown timer. */
.energy {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:transparent; /* remove background color */
  border:0; /* remove outline */
  border-radius:10px;
  padding:6px;
  min-width:60px;
  text-align:center; /* center numbers like coins/gems */

  /* Allow the energy box to expand and fill available space between
     the backpack and the controls.  Without flex growth it can look
     undersized on wider layouts. */
  flex: 0 0 auto; /* keep natural size so it centers nicely */
}
.energy-num {
  font-size:20px;
  font-weight:bold;
  color:var(--neon);
}
.energy-timer {
  font-size:12px;
  color:var(--pink);
}

/* XP area */

.xp-area{
  display:flex;
  flex-direction:row; /* horizontal: currency + xp ring */
  align-items:center;
  justify-content:center;
  gap: 10px; /* add space between coins and xp ring */
  background:transparent; /* remove background color */
  border:0; /* remove pink outline */
  border-radius:12px;
  padding:6px 8px;
  min-width:0;
}
/* Circular XP ring.  JS sets the background conic gradient on this element. */
.xp-ring {
  /* Reduce the size of the XP ring so that the surrounding currency counters can grow */
  width:40px;
  height:40px;
  border-radius:50%;
  background:conic-gradient(var(--neon) 0deg, #223047 0deg);
  position:relative;
  /* Provide a small vertical margin so the ring does not touch adjacent text */
  margin:4px 0;
}
.xp-ring::after {
  content:'';
  position:absolute;
  top:6px; left:6px; right:6px; bottom:6px;
  background:var(--panel);
  border-radius:50%;
  z-index:0;
}
.xp-level {
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%, -50%);
  font-weight:900;
  font-size:12px;
  color:var(--neon);
  line-height:1;
  z-index:1; /* ensure level text sits above inner fill */
}
/* Currency counters overlayed inside the XP ring.  Positioned at the
   top-left and top-right corners. */
/* Stack the gem and coin counters vertically rather than side by side.  This
   places the gem count above the coin count and aligns both in the centre
   of the xp area. */
.currency-overlay {
  position:static;
  display:flex;
  flex-direction:row; /* horizontal layout: gems and coins inline */
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-bottom:0;
  pointer-events:auto;
}
.currency-overlay .gem-count,
.currency-overlay .coin-count {
  display:flex;
  align-items:center;
  gap:2px;
  /* enlarge the font size of the amount text for better readability */
  font-size:16px;
  color:var(--neon);
  font-weight:bold;
}
.currency-overlay .gem-icon,
.currency-overlay .coin-icon {
  /* Replace the emoji icons with custom images.  Each icon is
     displayed as a small square with a neon‑styled background.
     The font size is set to zero to hide any fallback text in older
     browsers. */
  display:inline-block;
  width:24px;
  height:24px;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  font-size:0;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));
}

/* Use specific background images for gem and coin icons.  The
   relative paths resolve correctly because styles.css lives in the
   css directory. */
.gem-icon{
  background-image:url('../pictures/gems_currency.png');
}
.coin-icon{
  background-image:url('../pictures/coins_currency.png');
}

/* Grid */
.grid{position:relative;width:100%;aspect-ratio:1;display:grid;grid-auto-rows:1fr;touch-action:none}
.cell{border:1px solid #223047;background:var(--tile);display:grid;place-items:center;position:relative}
.tile{
  width:90%;height:90%;border-radius:10px;display:grid;place-items:center;
  font-weight:bold;color:#0a0f1f;box-shadow:0 0 0 2px #0003 inset,
  0 6px 16px rgba(0,0,0,.25);
  background-size:contain;background-position:center;background-repeat:no-repeat
}
.grid, .cell, .tile { -webkit-user-drag: none; }

/* --------------------------- Shop --------------------------- */
.shop-modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.shop-modal-categories {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.shop-modal-categories .neon-button {
  flex: 1 1 0;
  min-width: 0;
  --btn-bg: rgba(14, 24, 40, 0.45);
}

.shop-modal-categories .neon-button .neon-button__text {
  font-size: 13px;
  letter-spacing: 0.05em;
}

.shop-modal-categories .neon-button:hover:not(:disabled) {
  filter: brightness(1.08);
}

.shop-modal-categories .neon-button--active {
  --btn-bg: rgba(46, 190, 204, 0.92);
  color: #04141e;
  box-shadow: 0 0 12px rgba(46, 190, 204, 0.35);
}

.shop-modal-categories .neon-button--active .neon-button__text {
  color: #04141e;
  text-shadow: none;
}

.shop-modal-subtabs {
  display: none;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.shop-modal-subtabs .neon-button {
  flex: 1 1 0;
  min-width: 0;
  --btn-bg: rgba(12, 20, 36, 0.55);
}

.shop-modal-subtabs .neon-button .neon-button__text {
  font-size: 12px;
  letter-spacing: 0.04em;
}

.shop-modal-subtabs .neon-button--active {
  --btn-bg: rgba(46, 190, 204, 0.85);
  color: #04141e;
}

.shop-modal-subtabs .neon-button--active .neon-button__text {
  color: #04141e;
  text-shadow: none;
}

/* --------------------------- Leaderboard --------------------------- */
.leader-modal-body{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.leader-categories{
  display:flex;
  gap:8px;
  justify-content:center;
  margin-bottom:6px;
}

.leader-category-btn{
  flex:1 1 0;
  min-width:0;
  --btn-bg: rgba(10, 18, 32, 0.35);
}

.leader-category-btn.neon-button--active{
  --btn-bg: rgba(46, 190, 204, 0.18);
}

.leader-category-btn .neon-button__text{
  font-size:12px;
}

/* Controls */
/* Controls */
.controls {
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  margin-top:12px;
}
.controls-col {
  display:flex;
  flex-direction:row;
  gap:16px;
}
/* Styled action buttons (spawn, book, leaderboard, shop) */
.spawn-btn, .book-btn, .leader-btn, .shop-btn, .menu-btn {
  width:64px;
  height:64px;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  border:2px solid var(--neon);
  border-radius:12px;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(0,255,204,.1);
  transition:transform .08s ease, box-shadow .12s ease, filter .12s ease;
  position:relative; /* anchor label pseudo-element */
}
.spawn-btn:hover, .book-btn:hover, .leader-btn:hover, .shop-btn:hover, .menu-btn:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,255,204,.22);
}
.spawn-btn:active, .book-btn:active, .leader-btn:active, .shop-btn:active, .menu-btn:active {
  transform:none;
  filter:brightness(.96);
}

.spawn-btn { background-image:url('../pictures/stop.png'); }
.book-btn  { background-image:url('../pictures/Merge_Book.png'); background-color:transparent !important; }
.leader-btn{ background-image:url('../pictures/Leaderboard.png'); }
.shop-btn { background-image:url('../pictures/shop.png'); }
/* icons, set by paths */
.menu-btn { background-image:url('../pictures/menu_button.png'); background-color:transparent !important; }

/* Button labels under bottom buttons */
.backpack-btn::after,
.menu-btn::after,
.book-btn::after,
.shop-btn::after {
  position:absolute;
  top:100%; left:50%; transform:translateX(-50%);
  margin-top:4px;
  font-size:11px;
  font-weight:700;
  color:#cfe;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
  pointer-events:none;
  white-space:nowrap;
}
.backpack-btn::after { content:'Backpack'; }
.menu-btn::after     { content:'Menu'; }
.book-btn::after     { content:'Merge Book'; }
.shop-btn::after     { content:'Shop'; }
.menu-back-btn { background-image:url('../pictures/game_button.png'); }

/* fullscreen menu overlay */
.menu-page {
  /* The menu overlay should match the width of the game board instead of
     occupying the entire screen.  Position it centrally and constrain
     its width to the game container (max 420px).  Retain the fixed
     positioning so it overlays the grid, but center horizontally via
     translateX. Leave a small vertical inset so the outline doesn't hug
     screen edges on mobile. */
  position: fixed;
  top: calc(6px + env(safe-area-inset-top, 0px));
  /* lift the bottom outline slightly above the screen edge */
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  /* Allow the menu overlay to shrink or grow with the viewport.  Use a
     percentage width for flexibility and a larger maximum to support
     slightly wider devices. */
  /* Match the width of the underlying game board.  By using 100% we
     ensure the neon outline aligns with the grid container. */
  width: calc(100% - 2*var(--gutter) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  max-width: 420px;
  display: none;              /* JS sets to flex when open */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border-radius: 16px;
  color: #cfe;
  z-index: 10000;
  /* overflow: auto; */
  padding: var(--gutter);
  padding-left:  calc(var(--gutter) + env(safe-area-inset-left, 0px));
  padding-right: calc(var(--gutter) + env(safe-area-inset-right, 0px));
  padding-bottom: calc(var(--gutter) + 24px); /* extra breathing room at bottom */
  /* ensure height respects the vertical inset at top/bottom */
  min-height: calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 26px);
  box-sizing: border-box;
}

.neon-border {
  position: absolute;
  inset: 0 0 auto 0;
  border-radius: 16px;
  pointer-events: none; /* allow clicks to pass through */
  border: 4px solid var(--cyan-neon);
  isolation: isolate;
  height: 100%;
}
.neon-border::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 16px;
  pointer-events: none; /* allow clicks to pass through */
  border: 1.5px solid var(--light-cyan);
  z-index: -1;
}
.neon-border::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  inset: -4px;
  pointer-events: none; /* allow clicks to pass through */
  border: 4px solid var(--cyan-neon);
  filter: blur(4px);
  z-index: -2;
}

/* Remove scrollbar arrows from menu-page */
.menu-page::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Generic modal container stays within phone width */
.modal{ position: fixed; inset: 0; z-index: 11000; display: none; place-items: center; background: rgba(0,0,0,0.45); }
.modal .modal-content{
  /* Slightly inset the modal from the menu outline */
  width: calc(100% - 12px);
  max-width: calc(420px - 12px);
  margin: 0 auto;
  background: var(--panel);
  border: 2px solid var(--neon);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.35), 0 0 18px rgba(0,255,204,.08) inset;
  box-sizing: border-box;
  padding: 12px;
}

/* optional helper if you ever toggle with a class */
.menu-page.is-open { display: flex; }

/* buttons grid inside the overlay */
.menu-buttons {
  /* Stack menu button rows with proper spacing */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px; /* Space between rows */
  margin-top: 6px;
}

/* Individual button rows */
.menu-buttons-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px; /* Space between buttons in a row */
  width: 100%;
}

/* Research Tree Styles */
.research-modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 8px;
}

.research-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(10, 18, 32, 0.42);
  border: 1px solid rgba(46, 190, 204, 0.25);
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: inset 0 0 12px rgba(0, 255, 204, 0.08);
}

.research-summary-balances {
  display: flex;
  width: 100%;
  justify-content: space-around;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.research-summary-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--neon);
  font-family: 'Orbitron', 'Arial', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.research-summary-icon {
  width: 28px;
  height: 28px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 2px 6px rgba(0, 255, 204, 0.45));
}

.research-summary-icon-coins {
  background-image: url('../pictures/coins_currency.png');
}

.research-summary-icon-gems {
  background-image: url('../pictures/gems_currency.png');
}

.research-summary-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.research-summary-label {
  font-size: 11px;
  opacity: 0.7;
}

.research-summary-value {
  font-size: 16px;
  font-weight: 700;
  color: #c7fbff;
}

.research-summary-hint {
  width: 100%;
  font-size: 12px;
  font-family: 'Orbitron', 'Arial', sans-serif;
  letter-spacing: 0.05em;
  color: rgba(199, 251, 255, 0.85);
  text-align: center;
  margin: 0 auto;
  margin-top: 4px;
}

.research-summary-hint::before {
  content: 'ℹ';
  margin-right: 6px;
  color: var(--neon);
}

.research-scroll-area {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 8px 0 8px;
  position: relative;
}


.research-node-modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.research-node-modal {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.research-node-modal__description {
  margin: 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(199, 251, 255, 0.85);
}

.research-node-modal__status {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(0, 255, 204, 0.7);
}

.research-node-modal__cost {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: rgba(12, 20, 36, 0.5);
  border: 1px solid rgba(46, 190, 204, 0.25);
  border-radius: 12px;
}

.research-node-modal__cost-title {
  font-size: 11px;
  font-family: 'Orbitron', 'Arial', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(199, 251, 255, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
}

.research-node-modal__cost-row {
  font-size: 14px;
  font-weight: 600;
  color: #c7fbff;
  text-align: center;
}

.research-node-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.research-node-modal__btn {
  padding: 12px 24px;
  border-radius: 12px;
  border: 2px solid var(--btn-border-cyan, #2EBECC);
  background: rgba(46, 190, 204, 0.18);
  color: var(--btn-text-cyan, #b7eff5);
  font-family: 'Orbitron', 'Arial', sans-serif;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.research-node-modal__btn:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

.research-node-modal__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.research-node-modal__btn--secondary {
  background: rgba(14, 24, 40, 0.6);
  border-color: rgba(199, 251, 255, 0.35);
  color: rgba(199, 251, 255, 0.85);
}

.research-node-modal__speedups {
  width: 100%;
}

.research-tree-container {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 8px 24px;
  align-items: center;
}


.research-tree-error {
  text-align: center;
  padding: 40px 24px;
  color: rgba(255, 120, 120, 0.9);
}

.research-tree-error-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
}

.research-tree-error-sub {
  font-size: 13px;
  opacity: 0.78;
}
.research-tree-row {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}

.research-node-row {
  margin-bottom: 5px;
}

.research-connection-row {
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
}

.research-connection-row .research-row-connections {
  width: 100%;
  max-width: 340px;
}

.research-tree-row-content {
  position: relative;
  width: 100%;
  max-width: 340px;
}

.research-row-indicator {
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: var(--neon);
  opacity: 0.6;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.research-row-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20px;
  margin: 4px 0;
}

.research-node-card {
  background: var(--panel);
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 10px;
  width: 100px;
  height: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
}

.research-node-icon {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: var(--panel-dark);
  border: 1px solid var(--neon);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  overflow: hidden;
}

.research-node-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--neon);
  text-align: center;
  line-height: 1.2;
  margin-bottom: 4px;
  word-wrap: break-word;
}

.research-node-level {
  font-size: 11px;
  color: var(--neon);
  opacity: 0.8;
  text-align: center;
}

.research-node-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
}

.research-start-btn {
  background: var(--neon);
  color: var(--bg);
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}

.research-start-btn:hover:not(:disabled) {
  background: #00e6b8;
  box-shadow: 0 0 8px rgba(0, 255, 204, 0.4);
}

.research-start-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.research-cancel-btn {
  background: transparent;
  color: #ff6666;
  border: 1px solid #ff6666;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 10px;
  cursor: pointer;
  margin-top: 4px;
  width: 100%;
  transition: all 0.2s ease;
}

.research-cancel-btn:hover {
  background: #ff6666;
  color: var(--bg);
}

.research-progress-bar {
  position: relative;
  width: 100%;
  height: 24px;
  background-color: var(--panel);
  border: 1px solid var(--neon);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 4px;
}

.research-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: var(--neon);
  opacity: 0.3;
  transition: width 0.5s ease;
  width: 0%;
}

.research-progress-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--neon);
  text-shadow: 0 0 4px rgba(0, 255, 204, 0.5);
  z-index: 1;
}

/* Node state styling */
.research-node-card[data-state="locked"] {
  opacity: 0.4;
  filter: grayscale(0.8);
  cursor: not-allowed;
}

.research-node-card[data-state="available"] {
  border-color: var(--neon);
  box-shadow: 0 0 8px rgba(0, 255, 204, 0.3);
}

.research-node-card[data-state="researching"] {
  border-color: #ffaa00;
  box-shadow: 0 0 8px rgba(255, 170, 0, 0.4);
  animation: research-pulse 2s infinite;
}

.research-node-card[data-state="completed"] {
  border-color: #ff6666;
  box-shadow: 0 0 6px rgba(255, 102, 102, 0.3);
}

/* Animations */
@keyframes research-pulse {
  0%, 100% { 
    box-shadow: 0 0 8px rgba(255, 170, 0, 0.4);
  }
  50% { 
    box-shadow: 0 0 16px rgba(255, 170, 0, 0.7);
  }
}

@keyframes pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* Responsive adjustments for research tree */
@media (max-width: 480px) {
  #researchModal .neon-modal__content {
    width: 95%;
    height: 90%;
  }
  
  .research-node-card {
    width: 100px;
    height: 120px;
    padding: 6px;
    gap: 1px;
  }
  
  .research-node-icon {
    width: 40px;
    height: 40px;
  }
  
  .research-tree-row-content[style*="grid-template-columns"] {
    grid-template-columns: 1fr auto 15px auto 1fr !important;
  }
}

/* back button pinned to the same spot as the in-game menu button */
.menu-back-btn {
  position: fixed;
  width: 64px;
  height: 64px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--panel);
  border: 2px solid var(--neon);
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0,255,204,.1);
  transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
  z-index: 11000;             /* above .menu-page */
  display: none;               /* shown when the menu opens */
  pointer-events: auto;
}

/* square action buttons */
.menu-action-btn {
  --menu-btn-primary: var(--neon);
  --menu-btn-light: var(--light);
  width: 72px;
  height: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 6px;
  padding: 0;
  background: rgba(16, 24, 48, 0.65);
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto;
  border: 4px solid var(--menu-btn-primary);
  border-radius: 16px;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  overflow: visible;
  transition: border-color 0.25s ease, filter 0.25s ease, opacity 0.25s ease;
}

.menu-action-btn::before,
.menu-action-btn::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  pointer-events: none;
  transition: border-color 0.25s ease, filter 0.25s ease, opacity 0.25s ease;
}

.menu-action-btn::before {
  border: 1.5px solid var(--menu-btn-light);
}

.menu-action-btn::after {
  inset: -4px;
  border: 4px solid var(--menu-btn-primary);
  filter: blur(14px);
  z-index: -2;
}

/* Button labels positioned below buttons */
.menu-action-btn__label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--menu-btn-light);
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  pointer-events: none;
}

.menu-action-btn:hover {
  filter: brightness(1.05);
}

.menu-action-btn:active {
  filter: brightness(0.95);
}

.menu-action-btn:focus-visible {
  outline: 2px solid var(--menu-btn-light);
  outline-offset: 2px;
}

#achievementsBtn {
  --menu-btn-primary: var(--achievements-primary);
}

#gameBtn {
  --menu-btn-primary: var(--game-primary);
}

#researchBtn {
  --menu-btn-primary: var(--research-primary);
}

#leaderBtnMenu {
  --menu-btn-primary: var(--leaderboard-primary);
}

#inviteBtn {
  --menu-btn-primary: var(--friends-primary);
}

#storageBtn {
  --menu-btn-primary: var(--shop-primary);
}

button:not(.give):active{ transform:translateY(0); filter:brightness(.96) }
.give{
  position:absolute;
  top:calc(50% + 40px);  /* Offset to center in order plate area */
  left:50%;
  transform:translate(-50%, -50%);     /* center both horizontally and vertically in order plate */
  display:none;background:transparent;color:var(--neon);border:2px solid var(--neon);border-radius:8px;
  font-weight:800;font-size:11px;padding:4px 10px;
  z-index:10;  /* Bring to front above the order plate */
}
.give:hover,.give:active{ transform:translate(-50%, -50%); box-shadow:none; filter:none }

/* Selection / drop targets */
.sel{outline:3px solid var(--accent)}
.cell.drop{outline:3px solid var(--accent);outline-offset:-3px}

/* Drag ghost */
.drag-ghost{
  position:fixed; pointer-events:none; width:56px; height:56px;
  background-size:contain; background-repeat:no-repeat; background-position:center;
  transform:translate(-50%,-50%); z-index:9999;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.45));
  user-select:none;
}

/* ================= VIP customer ================= */

.vip-timer{
  font-size:10px;
  color:var(--accent);
  margin-top:2px;
}
.customer-card.vip{
  border-color:var(--accent);
}

.customer-card.ghost{
  opacity: 0.5;
  border-style: dashed;
  border-color: #555;
  background: linear-gradient(135deg, rgba(16, 24, 48, 0.3), rgba(10, 15, 31, 0.3));
}

.customer-card.ghost .customer-img{
  background-image: none !important;
  background-color: #333;
  position: relative;
}

.customer-card.ghost .customer-img::before{
  content: '?';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: bold;
  color: #666;
}

/* XP area highlight when dragging over it */
.xp-area.drag-over {
  border-color: var(--accent) !important;
}

/* Modals */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center;z-index:10000}
.modal-content{
  background:#101830;
  border:2px solid #00ffcc;
  border-radius:12px;
  /* Inset a few px from the menu outline */
  max-width: calc(420px - 16px);
  width: calc(100% - 16px);
  padding:18px;
  box-sizing: border-box;
  box-shadow:0 12px 40px rgba(0,0,0,.4), 0 0 24px rgba(0,255,204,.08) inset
}
/* Level up modal: slightly tighter outline */
.modal-content.levelup{
  width: calc(100% - 28px);
  max-width: calc(420px - 28px);
}

/* Bring the outline (border) closer to center for specific modals */
#friendsModal .modal-content{
  width: calc(100% - 36px);            /* extra 18px inset per side */
  max-width: calc(420px - 36px);
}

.close{float:right;cursor:pointer;font-size:20px;color:#00ffcc}
.book-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-height:260px;overflow-y:auto;overflow-x:hidden;padding-right:4px;width:100%}
.book-card{border:1px solid #223047;border-radius:10px;background:#0f1426;padding:8px;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.book-card .img{width:66px;height:66px;background-size:contain;background-position:center;background-repeat:no-repeat;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}
.book-card .lvl{font-weight:700;color:#00ffcc}
.book-card.locked{opacity:.45}
.book-progress{
  margin:6px 0 12px;
  font-weight:700;
  color:#b7eff5;
  text-align:center;
  letter-spacing:.02em;
}

/* Book category selector */
.book-categories{
  margin-bottom:10px;
}

/* Friends tab buttons within the invite friends modal.  These mirror
   the styling of the merge book category buttons so the UI feels
   consistent.  Each button toggles a tab and highlights when
   active. */
.friends-tab-btn{
  padding:4px 10px;
  border-radius:8px;
  font-size:12px;
  font-weight:bold;
  cursor:pointer;
  background:var(--panel);
  border:2px solid var(--neon);
  color:var(--neon);
  transition:transform .08s ease, box-shadow .12s ease;
}
.friends-tab-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 14px rgba(0,255,204,.2);
}
.friends-tab-btn.active{
  background:var(--neon);
  color:#0a0f1f;
}

/* Custom scrollbar styling for merge book and shop grids */
.book-grid::-webkit-scrollbar, .shop-grid::-webkit-scrollbar {
  width:6px;
}
.book-grid::-webkit-scrollbar-track, .shop-grid::-webkit-scrollbar-track {
  background:#0f1426;
}
.book-grid::-webkit-scrollbar-thumb, .shop-grid::-webkit-scrollbar-thumb {
  background:var(--neon);
  border-radius:3px;
}
.book-grid::-webkit-scrollbar-button, .shop-grid::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Settings modal scrollbar styling */
.nm-modal__body::-webkit-scrollbar {
  width:6px;
}
.nm-modal__body::-webkit-scrollbar-track {
  background:#0f1426;
}
.nm-modal__body::-webkit-scrollbar-thumb {
  background:var(--neon);
  border-radius:3px;
}
.nm-modal__body::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
.nm-modal__panel::-webkit-scrollbar {
  width:6px;
}
.nm-modal__panel::-webkit-scrollbar-track {
  background:#0f1426;
}
.nm-modal__panel::-webkit-scrollbar-thumb {
  background:var(--neon);
  border-radius:3px;
}
.nm-modal__panel::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Coins / backpack box */
/* Legacy coins container removed: coins are now displayed within the currency group */
.coins{
  display:flex;
  align-items:center;
  gap:4px;
  margin-top:0;
}
.coin-icon{
  font-size:18px;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));
}

/* Storage modal grid */
.storage-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  justify-items:center;
  margin-bottom:8px;
}
.storage-hint{
  margin-top:8px;
  font-size:12px;
  color:#b7eff5;
  opacity:.8;
  text-align:center;
}
.storage-slot{
  width:56px;
  height:56px;
  border:1px solid #223047;
  border-radius:8px;
  background:#0f1426;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#00ffcc;
  font-size:14px;
  position:relative;
  filter: brightness(1.1);
  cursor: pointer;
}
.storage-slot:hover{
  filter: brightness(1.2);
}
.storage-slot.locked{
  opacity:0.6;
  cursor:default;
  background:#1a2238;
  color:#ffbb55;
  display:flex;
  align-items:center;
  justify-content:center;
  /* centre the cost text horizontally within the slot.  Without
     text-align the label "10 coins" tends to hug the left edge
     of the flex container.  Setting text-align ensures the text
     remains centred when the width is larger than the content. */
  text-align:center;
  font-weight:bold;
  font-size:14px;
  border:2px dashed #ffbb55;
  border-radius:8px;
  padding:4px;
}

/* Highlight backpack button when dragging over it */
#backpackBtn.drag-over{
  filter:brightness(1.35);
}

/* Shop grid and cards */
.shop-grid {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
  max-height:300px;
  min-height:200px;
  overflow-y:auto;
  padding-right:4px;
}
.shop-card {
  background:var(--panel);
  border:2px solid var(--neon);
  border-radius:10px;
  padding:8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:6px;
  box-shadow:0 6px 14px rgba(0,255,204,.1);
}
.shop-card .shop-img {
  width:64px;
  height:64px;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  border-radius:6px;
}
.shop-card .shop-title {
  font-weight:bold;
  color:var(--neon);
}
.shop-card .shop-price {
  font-size:12px;
  color:var(--accent);
}
.shop-card button {
  background:var(--neon);
  color:#0a0f1f;
  border:0;
  border-radius:8px;
  padding:4px 8px;
  font-weight:700;
  cursor:default;
  opacity:.6;
}

/* Enhanced shop styling for bulk purchase support */
.shop-button-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  align-items: stretch;
}

.shop-single-btn {
  background: var(--neon);
  color: #0a0f1f;
  border: 0;
  border-radius: 6px;
  padding: 6px 8px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  opacity: 1;
  transition: all 0.2s ease;
}

.shop-bulk-btn {
  background: var(--accent);
  color: #0a0f1f;
  border: 0;
  border-radius: 6px;
  padding: 6px 8px;
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
  opacity: 1;
  transition: all 0.2s ease;
}

.shop-single-btn:hover:not(:disabled) {
  background: #00e6b8;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 255, 204, 0.3);
}

.shop-bulk-btn:hover:not(:disabled) {
  background: #ffe135;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(255, 201, 77, 0.3);
}

.shop-single-btn:disabled,
.shop-bulk-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.shop-single-btn:active:not(:disabled),
.shop-bulk-btn:active:not(:disabled) {
  transform: translateY(0);
}

/* Utility row below the grid containing energy and backpack */
/* Bottom bar: holds backpack, energy and action buttons on a single line */
.bottom-bar {
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center; /* center the row horizontally */
  width: calc(100% - 2*var(--gutter));
  margin: 12px auto 0;
  box-sizing: border-box;
  padding: 0 0 18px 0;          /* leave space for labels under buttons */
}

/* Backpack button styling */
.backpack-btn {
  width:64px;
  height:64px;
  /* Use lowercase pictures directory to match the actual file name */
  background-image:url('../pictures/Backpack.png');
  background-size:80% 80%; /* shrink just the image to 80% */
  background-repeat:no-repeat;
  background-position:center;
  background-color:transparent !important;
  border:2px solid var(--neon);
  border-radius:12px;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(0,255,204,.1);
  transition:transform .08s ease, box-shadow .12s ease, filter .12s ease;
  position:relative; /* anchor label pseudo-element */
}
.backpack-btn:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,255,204,.22);
}
.backpack-btn:active {
  transform:none;
  filter:brightness(.96);
}

/* Medals */
.medal{margin-right:6px;font-size:14px;vertical-align:middle;filter:drop-shadow(0 0 6px rgba(255,217,0,.25))}
.medal-gold{color:#ffd54f}
.medal-silver{color:#cfd8dc}
.medal-bronze{color:#cd7f32}

/* Username gate */
.gate{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10001;
  background:
    radial-gradient(1200px 800px at 50% 10%, rgba(0,255,204,.07), transparent 55%),
    linear-gradient(rgba(10,15,31,.92), rgba(10,15,31,.92));
  backdrop-filter: blur(4px);
  /* Simplified padding that won't interfere with centering */
  padding: 20px;
  box-sizing: border-box;
}
.gate-card{
  position: relative;
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
  margin: 0 auto;
  background: transparent;
  border: 4px solid var(--btn-border-cyan, #2EBECC);
  border-radius: 18px;
  padding: 24px;
  box-shadow:
    0 18px 44px rgba(0,0,0,.55),
    0 0 32px rgba(46, 190, 204, .18);
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:stretch;
  overflow:visible;
  isolation: isolate;
  backdrop-filter: blur(10px);
}

.gate-card::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 1.5px solid var(--btn-border-light-cyan, #d3fafdff);
  z-index: -1;
  pointer-events: none;
}

.gate-card::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 4px solid var(--btn-border-cyan, #2EBECC);
  filter: blur(20px);
  z-index: -2;
  pointer-events: none;
}
.gate-title{
  font-size:22px;
  font-weight:600;
  color: var(--btn-text-cyan, #b7eff5);
  text-align:center;
  letter-spacing:.4px;
  text-shadow:
    0 0 2px rgba(210, 255, 255, 0.6),
    0 0 4px rgba(46, 190, 204, 0.5),
    0 0 6px rgba(20, 80, 100, 0.3);
}
.gate-sub{font-size:13px;color:#cfe;opacity:.9;text-align:center;margin-top:-2px}

/* row layout */
.gate-row{
  display:grid;
  grid-template-columns: minmax(220px, 260px) auto; /* inputs column, button column */
  grid-template-rows: auto auto;
  gap:12px;
  align-items:center;
}

/* place items explicitly */
#usernameInput{ grid-column:1; grid-row:1; }
#pinInput{      grid-column:1; grid-row:2; }
#enterBtn{      grid-column:2; grid-row:2; justify-self:start; }

.gate-btn{
  background:#00ffcc; color:#0a0f1f; border:0;
  position:static !important; inset:auto !important; transform:none !important;
  height:44px; padding:0 12px; border-radius:12px; font-weight:900; white-space:nowrap;
  cursor:pointer;
  box-shadow:0 10px 28px rgba(0,255,204,.2);
  transition:transform .08s ease, box-shadow .12s ease, filter .12s ease;
  will-change: transform;
  font-size: clamp(12px, 2.5vw, 14px);
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gate-btn:active{ transform:translateY(0); filter:brightness(.96) }
.gate-btn-small{ height:36px; padding:0 8px; font-size:12px; }

/* Google Sign-in Button (Neon variant) */
.google-signin-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  min-height: 52px;
  padding: 0 26px;
  border: 4px solid var(--btn-border-cyan, #2EBECC);
  border-radius: 14px;
  cursor: pointer;
  transition: filter .3s ease, opacity .3s ease, border-color .3s ease, box-shadow .3s ease;
  will-change: filter;
  outline: none;
  overflow: visible;
  box-sizing: border-box;
  background: linear-gradient(120deg, rgba(6,12,24,.95), rgba(10,24,44,.85));
  font-family: 'Orbitron','Arial',sans-serif;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  isolation: isolate;
  color: var(--btn-text-cyan, #b7eff5);
  box-shadow: 0 12px 32px rgba(15, 255, 255, .15);
  grid-column: 1 / -1; /* Span across all columns to center the button */
}

.google-signin-btn::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 1.5px solid var(--btn-border-light-cyan, #d3fafdff);
  z-index: -1;
  pointer-events: none;
}

.google-signin-btn::after {
  content: '';
  position: absolute;
  filter: blur(14px);
  inset: -4px;
  border-radius: inherit;
  border: 4px solid var(--btn-border-cyan, #2EBECC);
  z-index: -2;
  pointer-events: none;
}

.google-signin-btn:hover:not(:disabled),
.google-signin-btn:active:not(:disabled),
.google-signin-btn.google-signin-btn--active {
  border-color: var(--btn-border-magenta, #FF2EBE);
  filter: brightness(1.05);
}

.google-signin-btn:hover:not(:disabled)::before,
.google-signin-btn:active:not(:disabled)::before,
.google-signin-btn.google-signin-btn--active::before {
  border-color: var(--btn-border-light-magenta, #FFEEFD);
}

.google-signin-btn:hover:not(:disabled)::after,
.google-signin-btn:active:not(:disabled)::after,
.google-signin-btn.google-signin-btn--active::after {
  border-color: var(--btn-border-magenta, #FF2EBE);
  filter: blur(18px);
}

.google-signin-btn:focus-visible {
  outline: 2px solid var(--btn-outline-cyan, #b7eff5);
  outline-offset: 2px;
}

.google-signin-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.google-signin-btn:disabled::before,
.google-signin-btn:disabled::after {
  opacity: .3;
}

.google-signin-btn__icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--btn-text-cyan, #b7eff5);
  text-shadow:
    0 0 1px rgba(210, 255, 255, 0.6),
    0 0 3px rgba(46, 190, 204, 0.45),
    0 0 5px rgba(20, 80, 100, 0.25);
  transition: opacity .3s ease, transform .3s ease, color .3s ease, filter .3s ease, text-shadow .3s ease;
  flex-shrink: 0;
}

.google-signin-btn__icon svg,
.google-icon {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
  filter:
    drop-shadow(0 0 0.8px rgba(210, 255, 255, 0.55))
    drop-shadow(0 0 2px rgba(46, 190, 204, 0.48))
    drop-shadow(0 0 4px rgba(20, 80, 100, 0.28));
  transition: filter .3s ease;
}

.google-signin-btn:hover:not(:disabled) .google-signin-btn__icon {
  color: var(--btn-text-magenta, #FFEEFD);
  text-shadow:
    0 0 2px rgba(255, 238, 253, 0.65),
    0 0 4px rgba(255, 46, 190, 0.55),
    0 0 8px rgba(120, 20, 80, 0.3);
}

.google-signin-btn:hover:not(:disabled) .google-signin-btn__icon svg {
  filter:
    drop-shadow(0 0 1px rgba(255, 238, 253, 0.7))
    drop-shadow(0 0 3px rgba(255, 46, 190, 0.6))
    drop-shadow(0 0 6px rgba(120, 20, 80, 0.4));
}

.google-signin-btn--loading .google-signin-btn__icon {
  display: none;
}

.google-signin-btn__label,
.google-signin-btn .neon-button__text {
  position: relative;
  color: var(--btn-text-cyan, #b7eff5);
  text-shadow:
    0 0 2px rgba(210, 255, 255, 0.6),
    0 0 4px rgba(46, 190, 204, 0.5),
    0 0 6px rgba(20, 80, 100, 0.3);
  transition: color .3s ease, text-shadow .3s ease;
  font-size: inherit;
  line-height: 1.1;
}

.google-signin-btn:hover:not(:disabled) .google-signin-btn__label {
  color: var(--btn-text-magenta, #FFEEFD);
  text-shadow:
    0 0 2px rgba(255, 238, 253, 0.65),
    0 0 4px rgba(255, 46, 190, 0.55),
    0 0 8px rgba(120, 20, 80, 0.3);
}

.google-signin-btn--loading .google-signin-btn__icon {
  opacity: 0;
  transform: scale(.8);
}

.gate-hint{text-align:center;font-size:12px;color:#cfe;opacity:.75;margin-top:2px}


/* known user pills */
.user-pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:4px 0 6px}
.user-pill{
  padding:6px 10px; border-radius:999px; border:1px solid #223047; background:#0f1426; color:#cfe; font-weight:700;
  cursor:pointer; transition:transform .06s ease, border-color .12s ease, box-shadow .12s ease;
  will-change: transform;
}

/* small screens */
@media (max-width:350px){
  .top{ grid-template-columns:1fr; }
  .customers{ grid-column:auto; }
  .xp-area{ grid-column:auto; margin-top:10px; }
  .gate-row{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  #enterBtn{
    grid-column:1; grid-row:3; width:100%;
  }
}

/* Make modals full-screen on small devices */
@media (max-width: 480px) {
  .modal .modal-content,
  #achievementsModal .modal-content,
  #friendsModal .modal-content,
  #bookModal .neon-modal__content,
  #storageModal .neon-modal__content,
  #researchModal .neon-modal__content {
    width: calc(100vw - 16px);
    max-width: none;
    max-height: none;
    margin: 8px;
    border-radius: 0;
  }

  .research-summary {
    flex-direction: column;
    align-items: center;
  }

  .research-summary-hint {
    text-align: center;
  }
}

body.menu-open #gameWindow { display: none !important; }
body.menu-open #menuPage  { display: flex !important; }

/* ---- PWA Install/Reload modal ---- */
.install-banner{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Ensure banner never exceeds viewport width (incl. borders) */
  box-sizing: border-box;
  width: min(420px, calc(100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  max-width: calc(100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  background: rgba(16,24,48,0.96);
  border: 2px solid var(--neon);
  border-radius: 12px;
  color: #cfe;
  box-shadow: 0 10px 28px rgba(0,0,0,.35), 0 0 18px rgba(0,255,204,.08) inset;
  z-index: 20000;
  display: none; /* toggle to grid when shown */
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 14px 14px;
}
.install-banner.show{ display: grid; }
.install-banner__title{ font-weight: 800; letter-spacing: .2px; }
.install-banner__actions{ display: flex; gap: 8px; }
.install-btn{ background: var(--neon); color:#0a0f1f; border:0; border-radius:10px; padding:6px 10px; font-weight:900; cursor:pointer; }
.install-close{ background: transparent; border: 1px solid rgba(0,255,204,.35); color:#9fe; border-radius:10px; padding:6px 10px; cursor:pointer; }

/* Modal backdrop used by install/reload prompts */
.modal-backdrop{ position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 19990; display: none; }
.modal-backdrop.show{ display:block; }

/* iOS A2HS overlay with arrow guidance */
.ios-a2hs-tip{
  position: fixed; inset: 0; z-index: 21000; display: none;
}
.ios-a2hs-tip.show{ display:block; }
.ios-a2hs-tip__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); }
.ios-a2hs-tip__panel{
  position:absolute; left:50%; bottom:86px; transform:translateX(-50%);
  width: calc(100% - 24px); max-width: 420px;
  background: rgba(16,24,48,.96);
  border:2px solid var(--neon); border-radius:12px; color:#cfe;
  box-shadow: 0 10px 28px rgba(0,0,0,.35), 0 0 18px rgba(0,255,204,.08) inset;
  padding: 12px; text-align:center;
}

/* Hard gate overlay (forces PWA install on mobile) */
.pwa-gate{ position:fixed; inset:0; z-index:22000; background: rgba(0,0,0,.6); display:none; }
.pwa-gate.show{ display:flex; align-items:center; justify-content:center; }
.pwa-gate__panel{
  width: calc(100% - 32px); max-width: 460px;
  background: rgba(16,24,48,.98);
  border: 2px solid var(--neon);
  border-radius: 14px;
  color: #cfe;
  box-shadow: 0 12px 32px rgba(0,0,0,.45), 0 0 22px rgba(0,255,204,.10) inset;
  padding: 18px;
  text-align: center;
}
.pwa-gate__title{ font-weight:900; font-size:18px; margin-bottom:8px; }
.pwa-gate__desc{ opacity:.9; margin-bottom:14px; }
.pwa-gate__actions{ display:flex; gap:10px; justify-content:center; }
.pwa-gate__btn{ background: var(--neon); color:#0a0f1f; border:0; border-radius:10px; padding:8px 14px; font-weight:900; cursor:pointer; }
.pwa-gate__btn--secondary{ background: transparent; border: 1px solid rgba(0,255,204,.35); color:#9fe; }
.pwa-gate__note{ font-size:12px; opacity:.8; margin-top:10px; }
.ios-a2hs-tip__arrow{ position:absolute; left:50%; bottom:56px; transform:translateX(-50%);
  width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-top:12px solid var(--neon);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.4));
}
.ios-a2hs-tip__btn{ margin-top:8px; background: var(--neon); color:#0a0f1f; border:0; border-radius:10px; padding:6px 10px; font-weight:900; cursor:pointer; }

/* Chat messages scroll area */
#chatWindow #chatMessages{
  overflow-y: auto;
  scrollbar-width: thin;                 /* Firefox */
  scrollbar-color: var(--neon) #142033;  /* thumb, track */
}

/* Friends modal: search input styling */
#friendsModal input[type="text"]{
  background:#0f1426;
  color:#cfe;
  border:1px solid #223047;
  border-radius:8px;
  padding:6px 10px;
  font-weight:700;
  outline:none;
  box-sizing:border-box;
}
#friendsModal input[type="text"]:focus{
  border-color: var(--neon);
  box-shadow: 0 0 0 3px rgba(0,255,204,.12);
}
#friendsModal input[type="text"]::placeholder{
  color:#8aa;
  opacity:.9;
  letter-spacing:.2px;
}

/* Chromium, Edge, Safari */
#chatWindow #chatMessages::-webkit-scrollbar{
  width: 10px;
}
#chatWindow #chatMessages::-webkit-scrollbar-track{
  background: #142033;
  border-radius: 8px;
}
#chatWindow #chatMessages::-webkit-scrollbar-thumb{
  background: var(--neon);
  border-radius: 8px;
  border: 2px solid #142033;             /* gives a neon inset look */
}
#chatWindow #chatMessages::-webkit-scrollbar-thumb:hover{
  filter: brightness(0.9);
}
#chatWindow #chatMessages::-webkit-scrollbar-corner{
  background: transparent;
}
#chatWindow #chatMessages::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}


/* Leaderboard scroll area uses the same default scrollbar design */
#leaderWrap{
  max-height: 320px;           /* match inline attribute */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;                 /* Firefox */
  scrollbar-color: var(--neon) rgba(255,255,255,0.06); /* thumb, track */
  background: rgba(6, 12, 24, 0.6);
  border: 1px solid rgba(46, 190, 204, 0.18);
  border-radius: 16px;
  padding: 12px;
  box-shadow: inset 0 0 24px rgba(0, 255, 204, 0.08);
}

#leaderWrap::-webkit-scrollbar{
  width: 10px;
}

#leaderWrap::-webkit-scrollbar-track{
  background: rgba(255,255,255,0.06);
  border-left: 1px solid rgba(0,0,0,0.4);
}

#leaderWrap::-webkit-scrollbar-thumb{
  background: var(--neon);
  border: 2px solid var(--panel);
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0,255,204,0.4);
}

#leaderWrap::-webkit-scrollbar-thumb:hover{
  box-shadow: 0 0 10px rgba(0,255,204,0.7);
}

#leaderWrap::-webkit-scrollbar-corner{
  background: transparent;
}
#leaderWrap::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* === Rewards row final override: "+ x [coin]  + y XP" === */

/* remove the star before XP */
.customer-card .reward-xp::before{ content:none; }

/* layout: coins first, XP second */
.customer-card .order-reward{
  gap:4px;                 /* tighter */
  align-items:baseline;    /* nicer number alignment */
}

.customer-card .order-reward .reward-coins{
  order:1;
  display:inline-flex;
  flex-direction:row-reverse;  /* amount then icon */
  gap:4px;
}

/* make sure the XP block comes after coins */
.customer-card .order-reward .reward-xp{
  order:2;
}

/* Hide rewards under the plate inside customer cards */
.customer-card .order-reward{
  display:none !important;
}


/* Tile selection */
.tile { position: relative; }              /* does not change layout */
.tile .select-ring {
  position: absolute;
  inset: 0;
  border: 3px solid var(--neon);
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease;
}
.tile.selected .select-ring { opacity: 1; }

/* Merge Book target highlight */
.book-card.target {
  outline: 3px solid var(--neon);
  outline-offset: -3px;           /* fully inside */
  box-shadow: 0 0 12px rgba(0,255,204,0.7);
  position: relative;
}

.book-card.target::after {
  content: 'Target';
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0,255,204,0.15);
  border: 1px solid var(--neon);
  padding: 2px 6px;
}

.book-card.highlighted {
  outline: 3px solid var(--neon);
  outline-offset: -3px;           /* fully inside */
  box-shadow: 0 0 16px rgba(0,255,204,0.8);
  position: relative;
  animation: highlight-pulse 2s ease-in-out;
  font-size: 10px;
  color: var(--neon);
  border-radius: 6px;
}

@keyframes highlight-pulse {
  0%, 100% { box-shadow: 0 0 16px rgba(0,255,204,0.8); }
  50% { box-shadow: 0 0 24px rgba(0,255,204,1.0); }
}

/* ---------------- Delete popover ---------------- */
/* --- ensure overlays are not clipped --- */
#grid .cell, 
#grid .tile { overflow: visible; }
#grid .tile { position: relative; }
/* Center the game grid within the phone frame */
#grid{
  width: calc(100% - 2*var(--gutter));
  margin-left: auto; margin-right: auto;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0;
}

/* =========================
   Delete badge (top-right)
   ========================= */
.tile .delete-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: var(--badge-size, 18px);
  height: var(--badge-size, 18px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ff3b6b;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  user-select: none;
  touch-action: none;
  transition: opacity 120ms ease, transform 120ms ease, filter 120ms ease;
}
.tile .delete-badge::before {
  content: "";
  width: 60%;
  height: 2px;
  background: #fff;
  border-radius: 1px;
}
.tile .delete-badge:hover  { filter: brightness(1.08); }
.tile .delete-badge:active { transform: scale(0.96); }

/* Hide the badge while the popover is open (prevents the red dot peeking under it) */
.tile.has-delete-popover > .delete-badge {
  opacity: 0;
  pointer-events: none;
}

/* ---- Delete popover: full, compact, centered ---- */

/* ---- Delete popover (compact + neon + centered icons) ---- */

/* make sure overlays aren't clipped by tiles */
#grid .cell, #grid .tile { overflow: visible; }
#grid .tile { position: relative; }

/* hide the red dot while popover is open */
.tile.has-delete-popover > .delete-badge {
  opacity: 0;
  pointer-events: none;
}

/* container */
.tile .delete-popover {
  --pop-bg: rgba(16,24,38,.94);
  --pop-border: rgba(0,255,204,.45);       /* neon border */

  position: absolute;
  right: 8px;
  top: 8px;
  transform: translateY(calc(-100% - 8px)) scale(.96);
  transform-origin: top right;

  padding: 8px 10px;                       /* smaller */
  border-radius: 10px;
  background: var(--pop-bg);
  border: 1px solid var(--pop-border);
  box-shadow:
    0 10px 28px rgba(0,0,0,.45),
    0 0 16px rgba(0,255,204,.20),          /* neon glow */
    inset 0 0 0 1px rgba(255,255,255,.035);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);

  color: #EAF0FF;
  font: 600 12px/1.1 Orbitron, Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

  display: flex;
  align-items: center;
  gap: 8px;

  z-index: 999;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 140ms ease, transform 140ms ease;
}
.tile .delete-popover.align-left {
  left: 8px;
  right: auto;
  transform-origin: top left;
}
.tile .delete-popover.show {
  opacity: 1;
  transform: translateY(calc(-100% - 8px)) scale(1);
}

/* arrow / nub */
.tile .delete-popover .nub {
  position: absolute;
  bottom: -6px;
  right: 12px;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
}
.tile .delete-popover.align-left .nub{
  right: auto;
  left: 12px;
}
.tile .delete-popover .nub::before,
.tile .delete-popover .nub::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
}
.tile .delete-popover .nub::before { background: var(--pop-bg); }
.tile .delete-popover .nub::after  {
  border-left: 1px solid var(--pop-border);
  border-bottom: 1px solid var(--pop-border);
}

/* label */
.tile .delete-popover__label {
  white-space: nowrap;
  letter-spacing: .2px;
}

/* round icon buttons (smaller + perfectly centered) */
.tile .delete-popover .round {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 0;
  outline: 0;
  position: relative;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
  transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;

  /* hide any literal ✓/✕ text from JS */
  font-size: 0;
  color: transparent;
  overflow: hidden;
}

/* confirm = pink gradient; cancel = deep navy */
.tile .delete-popover .btn-confirm {
  background: linear-gradient(180deg, #ff6a8e, #ff3b6b);
  box-shadow: 0 2px 10px rgba(0,0,0,.35),
              0 0 10px rgba(255, 59, 107, .35);
}
.tile .delete-popover .btn-cancel {
  background: #141c2d;
  box-shadow: 0 2px 10px rgba(0,0,0,.35),
              0 0 0 1px rgba(255,255,255,.04) inset;
}

/* vector ✓ — absolutely centered */
.tile .delete-popover .btn-confirm::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 6px;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: translate(-50%, -50%) rotate(-45deg);
  border-radius: 1px;
  box-sizing: border-box;
}

/* vector ✕ — absolutely centered */
.tile .delete-popover .btn-cancel::before,
.tile .delete-popover .btn-cancel::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  background: #e7eefc;
  border-radius: 1px;
  transform-origin: center;
}
.tile .delete-popover .btn-cancel::before { transform: translate(-50%, -50%) rotate(45deg);  }
.tile .delete-popover .btn-cancel::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.tile .delete-popover .round:hover  { filter: brightness(1.08); }
.tile .delete-popover .round:active { transform: scale(0.94); }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tile .delete-popover { transition: none; }
}



/* Settings modal */
.nm-modal.hidden { display: none; }
.nm-modal { position: fixed; inset: 0; z-index: 1000; }
.nm-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
.nm-modal__panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(calc(100vw - 16px), 420px); max-height: 80vh; overflow: auto;
  background: rgba(14,14,18,0.95);
  border: 1px solid rgba(0,255,204,0.35);
  box-shadow: 0 0 24px rgba(0,255,204,0.25);
  border-radius: 14px; padding: 16px;
  color: #e8f7f2;
}

/* Music volume slider styling */
#settingsModal input[type="range"]{
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 8px;
  background: linear-gradient(90deg, rgba(0,255,204,.8), rgba(0,153,255,.8));
  outline: none; transition: background 120ms ease;
}
#settingsModal input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #00ffcc; border: 2px solid rgba(10,15,31,0.9);
  box-shadow: 0 4px 10px rgba(0,255,204,.3); cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
#settingsModal input[type="range"]:active::-webkit-slider-thumb{ transform: scale(1.06); box-shadow: 0 6px 14px rgba(0,255,204,.45); }
#settingsModal input[type="range"]::-moz-range-track{ height: 6px; border-radius: 8px; background: linear-gradient(90deg, rgba(0,255,204,.8), rgba(0,153,255,.8)); }
#settingsModal input[type="range"]::-moz-range-thumb{ width: 18px; height: 18px; border-radius: 50%; background: #00ffcc; border: 2px solid rgba(10,15,31,0.9); box-shadow: 0 4px 10px rgba(0,255,204,.3); cursor: pointer; }

/* Settings modal checkbox styling - smaller toggles */
#settingsModal input[type="checkbox"] {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  transform: scale(0.85);
  margin: 0 !important;
}

#settingsModal .nm-box {
  padding: 4px 6px !important;
  gap: 6px !important;
  font-size: 11px !important;
  min-height: auto !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  width: auto !important;
  flex-shrink: 0 !important;
}
.nm-modal__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.nm-title { font: 700 18px/1.2 Orbitron, Inter, system-ui, sans-serif; margin: 0; }
.nm-close { background: transparent; border: 0; font-size: 18px; color: #9fe; cursor: pointer; }
.nm-modal__body { display: grid; gap: 14px; }
.nm-section h4 { font: 600 13px/1.2 Orbitron, Inter, system-ui, sans-serif; margin: 0 0 8px 0; color: #9fe; }
.nm-row { display: flex; align-items: center; gap: 10px; font: 500 13px/1.2 Orbitron, Inter, system-ui, sans-serif; }
.nm-select { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(0,255,204,0.25); background: #0f1416; color: #e8f7f2; }
.nm-actions { display: flex; gap: 10px; }
/* Story overlay minimal tweaks are inline in JS; core variables remain here if needed */

/* Border flash animation for XP level up */
@keyframes borderFlash {
  0%, 100% { border-color: #ff00aa; }
  50% { border-color: #ffd54f; }
}

/* Notification dot pulse animation */
@keyframes notificationPulse {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 0 8px rgba(255,68,102,0.7), 0 0 16px rgba(255,68,102,0.3), inset 0 1px 0 rgba(255,255,255,0.4);
  }
  50% { 
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(255,68,102,0.9), 0 0 20px rgba(255,68,102,0.5), inset 0 1px 0 rgba(255,255,255,0.4);
  }
}

#sessionRewardsDot {
  animation: notificationPulse 2s ease-in-out infinite;
}
/* Tutorial pulse animation for stuck detection */
@keyframes tutorial-pulse {
  0%, 100% { 
    box-shadow: 0 0 0 0 rgba(255, 196, 77, 0.7);
  }
  50% { 
    box-shadow: 0 0 0 10px rgba(255, 196, 77, 0);
  }
}

/* Merge Book tabs (Neon buttons) */
.book-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
  width: 100%;
}

.book-tabs .neon-button.book-tab {
  --btn-bg: rgba(12, 22, 36, 0.6);
  --btn-border-cyan: rgba(46, 190, 204, 0.65);
  --btn-border-light-cyan: rgba(210, 255, 255, 0.7);
  width: 100%;
  min-width: 0;
  justify-content: center;
  padding: 10px 12px;
  box-sizing: border-box;
}

.book-tabs .neon-button.book-tab .neon-button__text {
  font-size: 12px;
  letter-spacing: 0.06em;
}

.book-tabs .neon-button.book-tab:hover:not(:disabled) {
  filter: brightness(1.08);
}

.book-tabs .neon-button.book-tab.neon-button--active {
  --btn-bg: rgba(46, 190, 204, 0.92);
  box-shadow: 0 0 12px rgba(46, 190, 204, 0.35);
}

.book-tabs .neon-button.book-tab.neon-button--active .neon-button__text {
  color: var(--btn-text-magenta, #FFEEFD);
  text-shadow:
    0 0 2px rgba(255, 238, 253, 0.65),
    0 0 5px rgba(255, 46, 190, 0.5),
    0 0 10px rgba(120, 20, 80, 0.4);
}

/* Hide scrollbar arrows on all scrollbars - Comprehensive webkit removal */
::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Specific webkit scrollbar button removal for all directions */
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Horizontal scrollbar buttons */
::-webkit-scrollbar:horizontal:start:decrement,
::-webkit-scrollbar:horizontal:end:increment {
  display: none !important;
}

/* Vertical scrollbar buttons */
::-webkit-scrollbar:vertical:start:decrement,
::-webkit-scrollbar:vertical:end:increment {
  display: none !important;
}

/* Corner scrollbar buttons */
::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:horizontal:end:increment,
::-webkit-scrollbar-button:vertical:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Firefox scrollbar arrow removal */
* {
  scrollbar-width: thin !important;
  scrollbar-color: var(--neon) transparent !important;
}

/* Alternative Firefox approach */
html {
  scrollbar-arrow-color: transparent !important;
}

/* ====== ORIENTATION LOCK ====== */
/* Hide orientation lock by default */
.orientation-lock {
  display: none;
}

/* Show orientation lock overlay in landscape mode on mobile devices */
@media screen and (orientation: landscape) and (max-height: 600px) {
  /* Hide all game content */
  body > *:not(.orientation-lock) {
    display: none !important;
  }

  /* Show orientation lock overlay */
  .orientation-lock {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--bg);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
}

/* Orientation lock content styling */
.orientation-content {
  text-align: center;
  padding: 40px 20px;
  color: var(--neon);
  max-width: 400px;
}

.orientation-icon {
  font-size: 4rem;
  margin-bottom: 20px;
  display: block;
  transform: rotate(90deg);
  animation: rotatePhone 2s ease-in-out infinite;
}

.orientation-content h2 {
  color: var(--neon);
  font-size: 1.8rem;
  margin: 0 0 16px 0;
  font-weight: bold;
  text-shadow: 0 0 10px var(--neon);
}

.orientation-content p {
  color: #cfe;
  font-size: 1.1rem;
  margin: 0 0 20px 0;
  opacity: 0.9;
}

.rotation-hint {
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: bold;
  margin-top: 20px;
  padding: 12px 24px;
  border: 2px solid var(--accent);
  border-radius: 25px;
  background: rgba(255, 201, 77, 0.1);
  display: inline-block;
}

/* Rotation animation for phone icon */
@keyframes rotatePhone {
  0%, 100% { transform: rotate(90deg); }
  50% { transform: rotate(0deg); }
}

/* ====== Achievement Modal Redesign ====== */

/* CSS Variables for Achievement Theme */
:root {
  --bg-panel: var(--panel);
  --bg-card: #1a2040;
  --txt-1: #ffffff;
  --txt-2: #cfe;
  --muted: #8892b0;
  --accent: var(--neon);
  --ok: #10b981;
  --cy: var(--neon);
  --pk: var(--pink);
  --glow: rgba(0, 255, 204, 0.2);
}

/* Achievement Tabs */
.ach-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

.ach-tabs .neon-button {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 0;
  --btn-bg: rgba(14, 24, 40, 0.45);
  --btn-border-cyan: rgba(46, 190, 204, 0.6);
  --btn-border-light-cyan: rgba(210, 255, 255, 0.65);
}

.ach-tabs .neon-button .neon-button__text {
  font-size: 13px;
  letter-spacing: 0.05em;
}

.ach-tabs .neon-button:hover:not(:disabled) {
  filter: brightness(1.08);
}

.ach-tabs .neon-button--active {
  --btn-bg: rgba(46, 190, 204, 0.92);
  color: #04141e;
  box-shadow: 0 0 12px rgba(46, 190, 204, 0.35);
}

.ach-tabs .neon-button--active .neon-button__text {
  color: #04141e;
  text-shadow: none;
}

/* Achievement Lists Container */
.ach-lists {
  height: 360px;
  max-height: 360px;
  overflow: hidden;
  position: relative;
}

.ach-list {
  display: none;
  flex-direction: column;
  gap: 12px;
  height: 360px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
}

.ach-list-active {
  display: flex;
}

/* Custom scrollbar for achievement lists */
.ach-list::-webkit-scrollbar {
  width: 6px;
}

.ach-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.ach-list::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 3px;
}

.ach-list::-webkit-scrollbar-thumb:hover {
  background: var(--pk);
}

/* Achievement Row */
.ach-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  min-height: 88px;
  box-sizing: border-box;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.ach-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, var(--glow) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.ach-row:hover::before {
  opacity: 1;
}

.ach-state-completed {
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(16, 185, 129, 0.1) 100%);
  border-color: rgba(16, 185, 129, 0.3);
}

/* Achievement Icon */
.ach-icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  overflow: hidden;
}

.ach-medal {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Achievement Body */
.ach-body {
  flex: 1;
  min-width: 0;
}

.ach-title {
  font-size: 13px;
  font-weight: bold;
  color: var(--txt-1);
  margin-bottom: 4px;
  line-height: 1.2;
}

.ach-sub {
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 8px;
  line-height: 1.3;
}

.ach-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ach-bar {
  flex: 1;
  height: 12px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.ach-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cy) 0%, var(--pk) 100%);
  border-radius: inherit;
  transition: width 0.3s ease;
  position: relative;
}

.ach-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
  animation: progress-shine 2s ease-in-out infinite;
}

@keyframes progress-shine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.ach-count {
  font-size: 13px;
  color: var(--txt-2);
  font-family: 'Courier New', monospace;
  white-space: nowrap;
  min-width: 60px;
  text-align: right;
}

/* Achievement Reward */
.ach-reward {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 43px;
  height: 36px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.ach-reward-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.ach-reward-amt {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  font-family: 'Courier New', monospace;
}

.ach-claim {
  width: 100%;
  height: 100%;
  padding: 0;
  background: linear-gradient(135deg, var(--ok) 0%, #059669 100%);
  border: none;
  border-radius: 999px;
  color: white;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ach-claim:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.ach-claim:active {
  transform: translateY(0);
}

.ach-claimed-badge {
  padding: 4px 12px;
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.4);
  border-radius: 999px;
  color: var(--ok);
  font-size: 12px;
  font-weight: 500;
}

/* Group Headers */
.ach-group-header {
  font-size: 14px;
  font-weight: bold;
  color: var(--accent);
  margin: 16px 0 8px 0;
  padding: 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.9;
}

.ach-group-header:first-child {
  margin-top: 0;
}

/* Mobile Responsive */
@media (max-width: 480px) {
  .ach-row {
    padding: 10px;
    gap: 10px;
    min-height: 80px;
  }

  .ach-icon {
    width: 56px;
    height: 56px;
  }

  .ach-title {
    font-size: 13px;
  }

  .ach-sub {
    font-size: 10px;
  }

  .ach-reward {
    width: 43px;
    height: 32px;
    padding: 0 10px;
  }

  .ach-claim {
    width: 100%;
    height: 100%;
    font-size: 10px;
  }
}