/* =========================================================
   GLOBAL PAGE RULES
========================================================= */
:root { --void-bg: #000; --tv_center_y_offset: -72px; } /* ThreadVoid: default void background (overridden by moon phase) */
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  touch-action: none;
  touch-action: manipulation;
  overscroll-behavior: none;
  background: var(--void-bg, #000);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

html { -webkit-text-size-adjust: 100%; }

/* =========================================================
   STAGE / VIEWPORT / WORLD WRAPPERS
========================================================= */
#stage {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: var(--void-bg, #000);
}

#viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

#world_anchor {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
  transform-origin: top left;
}

#world_scale {
  transform-origin: top left;
  will-change: transform;
}

#world_translate { will-change: transform; }

#world {
  display: flex;
  flex-direction: column;
}

.row { display: flex; }

/* =========================================================
   TILE BASE STYLE
========================================================= */
:root {

  --tv_aura_idle: rgba(255,255,255,0.50);
  --tv_aura_busy: rgba(0, 255, 255, 0.85);
  --tv_aura_fx:   rgba(255, 170, 0, 0.90);
  --tv_aura_fail: rgba(255,  40, 40, 0.92);
--tv_aura_gain: rgba(120,255,80,0.90);
--tv_aura_pink: rgba(255,90,200,0.92);
--tv_aura_void: rgba(170,80,255,0.90);
--tv_aura_gold: rgba(200,150,60,0.92);

  --tv_ui_glow: var(--tv_aura_idle);
  --tv_ui_glow_size: 3px;

  --tv_btn_glow: var(--tv_aura_idle);
  --tv_btn_glow_size: 2px;
  --tv_frame_h: 28px;
}
.aura-idle { --tv_aura_ring: var(--tv_aura_idle); }
.aura-busy { --tv_aura_ring: var(--tv_aura_busy); }
.aura-fx   { --tv_aura_ring: var(--tv_aura_fx); }
.aura-fail { --tv_aura_ring: var(--tv_aura_fail); }
.aura-gain { --tv_aura_ring: var(--tv_aura_gain); }
.aura-pink { --tv_aura_ring: var(--tv_aura_pink); }
.aura-void { --tv_aura_ring: var(--tv_aura_void); }
.aura-gold { --tv_aura_ring: var(--tv_aura_gold); }
/* Data bubble aura wiring (extend existing) */
.data-bubble.aura-gain { --tv_aura_ring: var(--tv_aura_gain); --tv_aura_ring_size: 3px; }
.data-bubble.aura-pink { --tv_aura_ring: var(--tv_aura_pink); --tv_aura_ring_size: 3px; }
.data-bubble.aura-void { --tv_aura_ring: var(--tv_aura_void); --tv_aura_ring_size: 3px; }
.data-bubble.aura-gold { --tv_aura_ring: var(--tv_aura_gold); --tv_aura_ring_size: 3px; }
/* =========================================================
   THREAD KEYFRAMES (FIXED: NO MORE translate(-50%,-50%))
========================================================= */
@keyframes tv_thread_tilt_forward {
  0%   { transform: rotateX(0deg) translateY(0px)  scaleY(1); }
  50%  { transform: rotateX(-30deg) translateY(14px) scaleY(0.85); }
  100% { transform: rotateX(0deg) translateY(0px)  scaleY(1); }
}
@keyframes tv_thread_tilt_back {
  0%   { transform: rotateX(0deg) translateY(0px)  scaleY(1); }
  50%  { transform: rotateX(35deg) translateY(-14px) scaleY(0.85); }
  100% { transform: rotateX(0deg) translateY(0px)  scaleY(1); }
}
@keyframes tv_thread_spin_360 {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(45deg); }
  75%  { transform: rotate(315deg); }
  100% { transform: rotate(360deg); }
}
@keyframes tv_thread_tilt_left {
  0%   { transform: rotate(0deg); }
  45%  { transform: rotate(-30deg); }
  100% { transform: rotate(0deg); }
}
@keyframes tv_thread_tilt_right {
  0%   { transform: rotate(0deg); }
  45%  { transform: rotate(30deg); }
  100% { transform: rotate(0deg); }
}

#thread_sprite.tv_tilt_forward { animation: tv_thread_tilt_forward 320ms ease-out 1; }
#thread_sprite.tv_tilt_back    { animation: tv_thread_tilt_back    320ms ease-out 1; }
#thread_sprite.tv_tilt_left    { animation: tv_thread_tilt_left    350ms ease-out 1; }
#thread_sprite.tv_tilt_right   { animation: tv_thread_tilt_right   350ms ease-out 1; }
#thread_sprite.tv_spin_once    { animation: tv_thread_spin_360     700ms ease-in-out 1; }

.tile {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;

  border: 1px solid #111;
  border:none;
  border-radius: 0px;
  background-color: #111;
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  line-height: 1.1;
  text-align: center;

  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  width: var(--tile);
  height: var(--tile);
  background-size: var(--tile) var(--tile);
  background-repeat: no-repeat;
  image-rendering: pixelated;
}

/* =========================================================
   TILE LAYERS (subAtlas / atlas / fxAtlas)
   - Each layer is a full-tile pixel canvas (CSS background-image).
   - We control z-order with z-index, without changing tile sizing.
========================================================= */
.tile-layer{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-size: var(--tile) var(--tile);
  background-repeat: no-repeat;
  background-position: center;
  image-rendering: pixelated;
}
.tile-sub{  z-index: 1; }
.tile-main{ z-index: 2; }
.tile-frame{ z-index: 3; }
.tile-fx{   z-index: 5; }

/* Debug text (only filled when DEBUG=true) */
.tile-debug{
  position: relative;
  z-index: 4;
  pointer-events: none;
}

/* Stronger touch kill-switch across the world tree */
#stage, #viewport, #world, #world * { touch-action: none; }

/* =========================================================
   THREAD POSITION HIGHLIGHT (center tile)
========================================================= */
.tile.thread-here{
  outline: 2px solid 222;
  outline-offset: -2px;
  z-index: 999;
  position: relative;
}

/* =========================================================
   THREAD OVERLAY (always centered on screen)
========================================================= */
#thread_layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9000;
  pointer-events: none;
  perspective: 500px;
  perspective-origin: 50% 50%;
  --tv_thread_scale: 1;
}

/* NEW: wrapper owns centering (translate only, no scale) */
#thread_wrap {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--tv_center_y_offset, 0px));
  transform: translate(-50%, -50%) scale(var(--tv_thread_scale, 1));
  transform-origin: 50% 50%;
  pointer-events: none;
}
/* UPDATED: sprite no longer centers itself. it just animates/scales */
#thread_sprite {
  transform-origin: 50% 50%;
  position: absolute;
  left: 0;
  top: 0;


  --tv_aura_ring_size: 1px;

  background: transparent;
  border-radius: 23px;
  box-shadow:
    0 0 8px 8px rgba(20,20,20,0.95),
    inset 0 0 var(--tv_aura_ring_size) var(--tv_aura_ring_size) var(--tv_aura_ring, rgba(255,255,255,0.5)),
    inset 0 0 5px 5px rgba(120,120,120,0.95);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  image-rendering: pixelated;
  transition: box-shadow 140ms ease;

  transform-style: preserve-3d;
  backface-visibility: hidden;

  /* keep your hinge */
  transform-origin: 50% 65%;
}

/* =========================================================
   THREAD AURA STATES
========================================================= */
#thread_sprite.aura-idle { --tv_aura_ring: var(--tv_aura_idle); --tv_aura_ring_size: 1px; }
#thread_sprite.aura-busy { --tv_aura_ring: var(--tv_aura_busy); --tv_aura_ring_size: 3px; }
#thread_sprite.aura-fx   { --tv_aura_ring: var(--tv_aura_fx);   --tv_aura_ring_size: 3px; }
#thread_sprite.aura-fail { --tv_aura_ring: var(--tv_aura_fail); --tv_aura_ring_size: 3px; }
#thread_sprite.aura-gain { --tv_aura_ring: var(--tv_aura_gain); --tv_aura_ring_size: 3px; }
#thread_sprite.aura-pink { --tv_aura_ring: var(--tv_aura_pink); --tv_aura_ring_size: 3px; }
#thread_sprite.aura-void { --tv_aura_ring: var(--tv_aura_void); --tv_aura_ring_size: 3px; }
#thread_sprite.aura-gold { --tv_aura_ring: var(--tv_aura_gold); --tv_aura_ring_size: 3px; }

/* keep fill-mode behavior */
#thread_sprite.tv_tilt_forward,
#thread_sprite.tv_tilt_back,
#thread_sprite.tv_tilt_left,
#thread_sprite.tv_tilt_right,
#thread_sprite.tv_spin_once {
  animation-fill-mode: both;
}

/* =========================================================
   UI BASE STYLES
========================================================= */
.ui {
  position: fixed;
  
  z-index: 9999;
  pointer-events: auto;
  background: rgba(0,0,0,0.95);
  color: #ddd;
  border: 2px solid rgba(34,34,34,1);
  box-shadow:
    0 0 4px 4px rgba(17,17,17,0.9),
    0 0 var(--tv_ui_glow_size) var(--tv_ui_glow_size) var(--tv_ui_glow);
  padding: 10px;
  border-radius: 12px;

  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

:root { --actions-ui-offset: 517px; }

.nav-ui {
  left: 25px;
  right: 25px;
  bottom: calc(10px + var(--actions-ui-offset, 200px)+ var(--tv_frame_h, 0px));
}

.actions-ui {
  left: 25px;
  right: 25px;
  bottom: calc(10px + var(--tv_frame_h, 0px));
}

.ui h2 {
  text-align:center;
  margin:0;
  font-size:1.2em;
  border-bottom:2px solid #ccc;
  padding-bottom:3px;
  margin-bottom:5px;
}

.ui.aura-idle { --tv_ui_glow: var(--tv_aura_idle); --tv_ui_glow_size: 3px; }
.ui.aura-busy { --tv_ui_glow: var(--tv_aura_busy); --tv_ui_glow_size: 6px; }
.ui.aura-fx   { --tv_ui_glow: var(--tv_aura_fx);   --tv_ui_glow_size: 6px; }
.ui.aura-fail { --tv_ui_glow: var(--tv_aura_fail); --tv_ui_glow_size: 6px; }
.ui.aura-gain { --tv_ui_glow: var(--tv_aura_gain); --tv_ui_glow_size: 6px; }
.ui.aura-pink { --tv_ui_glow: var(--tv_aura_pink); --tv_ui_glow_size: 6px; }
.ui.aura-void { --tv_ui_glow: var(--tv_aura_void); --tv_ui_glow_size: 6px; }
.ui.aura-gold { --tv_ui_glow: var(--tv_aura_gold); --tv_ui_glow_size: 6px; }

/* =========================================================
   DIVE UI PANEL
========================================================= */
.dive-ui {
  left: 15px;
  right: 15px;
  top:125px;
  min-height:300px;
  max-height: calc(100vh - 250px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 160ms ease, transform 160ms ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y !important;
}
.dive-ui.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* =========================================================
   DIVE: TILE META (readable + mobile friendly)
========================================================= */
.dive-tile-meta{
  margin-top: 10px;
  padding: 10px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  border: 2px solid #222;
  border-radius: 10px;
  background: rgba(10,10,10,0.45);
  color: #ddd;
}

.dive-meta-head{
  display: grid;
  gap: 2px;
  margin-bottom: 8px;
}
.dive-meta-title{
  font-weight: 900;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  word-break: break-word;
}
.dive-meta-sub{
  font-size: 13px;
  opacity: 0.9;
  text-align: center;
  letter-spacing: 0.3px;
}

.dive-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 6px 0 10px 0;
}
.dive-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.35);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

/* tint chips using your aura palette (text only, subtle) */
.dive-chip.aura-idle{ color: var(--tv_aura_idle); }
.dive-chip.aura-busy{ color: var(--tv_aura_busy); }
.dive-chip.aura-fx{   color: var(--tv_aura_fx); }
.dive-chip.aura-fail{ color: var(--tv_aura_fail); }
.dive-chip.aura-gain{ color: var(--tv_aura_gain); }
.dive-chip.aura-pink{ color: var(--tv_aura_pink); }
.dive-chip.aura-void{ color: var(--tv_aura_void); }
.dive-chip.aura-gold{ color: var(--tv_aura_gold); }

.dive-meta-grid{
  display: grid;
  gap: 6px;
}
.dive-kv{
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.10);
}
.dive-kv:last-child{ border-bottom: none; }

.dive-k{
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 12px;
}
.dive-v{
  font-size: 14px;
  line-height: 1.25;
  word-break: break-word;
}

.dust-ui {
  left: 15px;
  right: 15px;
  top: 125px;
  padding-bottom:15px;
  min-height: 250px;
max-height: calc(100vh - 250px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 160ms ease, transform 160ms ease;
overflow: scroll-y;
  display: flex;
  flex-direction: column;
}
.dust-ui.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
/* DUST LIST: allow vertical scrolling even though items are ui-btn */
#dust_script_list .ui-btn,
#dust_script_list .ui_btn_generated {
  touch-action: pan-y !important;
}
#dust_script_list {
  display: grid;
  gap: 8px;
  padding-left:10px;
  padding-right:10px;
  margin-top: 14px;
  max-height: 25vh;          /* or calc(100vh - <header+footer px>) */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y !important;
flex: 1 1 auto;
  overflow-y: auto;
}

.dust-selected {
  margin-top: 6px;
  padding: 6px 8px;
  font-family: monospace;
  border: 2px solid #222;
  border-radius: 10px;
}

/* UI grid layout */
.ui-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
.ui-row:last-child { margin-bottom: 0; }

/* UI button base */
.ui-btn {
  height: 52px;
  border-radius: 10px;
  border: 1px solid #333;
  /* background: 111; */ /* intentionally broken: kept as reference */
  color: #ddd;

  font-size: 16px;
  font-weight: 700;

  display: flex;
  align-items: center;
  justify-content: center;

  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.ui-btn:active { background: #1a1a1a; }
.ui-btn.disabled { opacity: 0.4; }

.ui-btn{
  box-shadow:
    0 0 2px 2px rgba(0,0,0,0.6),
    0 0 var(--tv_btn_glow_size) var(--tv_btn_glow_size) var(--tv_btn_glow);
}

.ui-btn.aura-idle { --tv_btn_glow: var(--tv_aura_idle); --tv_btn_glow_size: 2px; }
.ui-btn.aura-busy { --tv_btn_glow: var(--tv_aura_busy); --tv_btn_glow_size: 4px; }
.ui-btn.aura-fx   { --tv_btn_glow: var(--tv_aura_fx);   --tv_btn_glow_size: 4px; }
.ui-btn.aura-fail { --tv_btn_glow: var(--tv_aura_fail); --tv_btn_glow_size: 4px; }
.ui-btn.aura-gain { --tv_btn_glow: var(--tv_aura_gain); --tv_btn_glow_size: 4px; }
.ui-btn.aura-pink { --tv_btn_glow: var(--tv_aura_pink); --tv_btn_glow_size: 4px; }
.ui-btn.aura-void { --tv_btn_glow: var(--tv_aura_void); --tv_btn_glow_size: 4px; }
.ui-btn.aura-gold { --tv_btn_glow: var(--tv_aura_gold); --tv_btn_glow_size: 4px; }

.dive-tile-preview{
  width: 96px;
  height: 96px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 8px;
  display: inline-block;
}

/* =========================================================
   INPUT UI (Tile-Glyph Typing)
========================================================= */
.buffer-ui{
  left: 15px;
  right: 15px;
  top: 125px;
  padding-bottom:15px;
  min-height: 250px;
  max-height: calc(100vh - 410px);
  /* IMPORTANT (especially iOS):
     prevent the outer container from being a scroll container.
     Let the inner panes (.buffer-marks / .buffer-string) handle scrolling.
     Nested scroll containers often feel "dead" on mobile Safari. */
  overflow: hidden;
  -webkit-overflow-scrolling: auto;
  touch-action: pan-y !important;
  display: flex;
  flex-direction: column;

  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 160ms ease, transform 160ms ease;
}

/* Ensure Buffer UI sub-elements are allowed to scroll even with global
   touch-kill rules used for the game world. */
.buffer-ui,
.buffer-ui *{
  touch-action: pan-y !important;
}
.buffer-ui.is-open{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Buffer UI: internal section headings */
.buffer-section{
  margin-top: 6px;
}
.buffer-section-title{
  margin: 2px 2px 6px 2px;
  font-size: 14px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  opacity: 0.85;
}
.buffer-section-buffer{
  margin-top: 10px;
}


.buffer-string{
  margin-top: 6px;
  padding: 8px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 18px;
  line-height: 1.35;
  word-break: break-word;
  border: 2px solid #222;
  border-radius: 10px;
  color: #ddd;
  background: rgba(10,10,10,0.6);
  max-height: 220px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y !important;
}




/* =========================================================
   BUFFER: MARKS LIST (shown above raw buffer string)
   - Uses global .aura-* colors (unified palette)
========================================================= */
.buffer-marks{
  margin-top: 6px;
  margin-bottom: 8px;
  padding: 8px 10px;
  border: 2px solid #222;
  border-radius: 10px;
  background: rgba(10,10,10,0.45);
  max-height: 140px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y !important;
}

.buffer-marks-empty{
  opacity: 0.75;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 14px;
}
.buffer-mark-row{
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 2px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 14px;
  line-height: 1.25;
  border-bottom: 1px dashed rgba(255,255,255,0.10);
}
.buffer-mark-row:last-child{ border-bottom: none; }
.buffer-mark-aura{
  min-width: 52px;
  text-transform: lowercase;
  letter-spacing: 0.5px;
  opacity: 0.95;
}

/* Color the aura label text using the unified aura palette */
.buffer-mark-aura.aura-idle{ color: var(--tv_aura_idle); }
.buffer-mark-aura.aura-busy{ color: var(--tv_aura_busy); }
.buffer-mark-aura.aura-fx{ color: var(--tv_aura_fx); }
.buffer-mark-aura.aura-void{ color: var(--tv_aura_void); }
.buffer-mark-aura.aura-fail{ color: var(--tv_aura_fail); }
.buffer-mark-aura.aura-gain{ color: var(--tv_aura_gain); }
.buffer-mark-aura.aura-pink{ color: var(--tv_aura_pink); }
.buffer-mark-aura.aura-gold{ color: var(--tv_aura_gold); }

.buffer-mark-key{
  color: #ddd;
  word-break: break-all;
}
/* =========================================================
   LORE TOAST (Name + Lore line)
========================================================= */
:root { --tv_lore_color: #9f9f9fff; }

.tv-lore-toast {
  position: fixed;
  left: 50%;
  top: 190px;
  transform: translateX(-50%) translateY(-40px);
  z-index: 10050;
  pointer-events: none;
  width: 80%;
  color: var(--tv_lore_color);
  background: rgba(1,1,1,1.35);
  border: 2px solid #222;
  border-radius: 12px;
  padding: 10px 14px;

  box-shadow:
    0 0 3px 3px rgba(90, 90, 90, 0.58),
    0 0 55px 55px #000000ff,
    inset 0 0 20px 120px rgba(0, 0, 0, 0.9);

  opacity: 0;
  transition: opacity 920ms ease, transform 600ms ease;
}

.tv-lore-toast.is-open {
  opacity: 1;
  transform: translateX(-50%) translateY(0px);
}

.tv-lore-name {
  font-weight: 800;
  font-size: 18px;
  line-height: 1.3;
  text-align: center;
  text-shadow: 0 2px 2px rgba(2,2,2,0.9);
  padding-left: 25px;
  padding-right: 25px;
 padding-top:15px;
}

.tv-lore-line {
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  opacity: 0.95;
  text-shadow: 0 2px 2px rgba(2,2,2,0.9);
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom:15px;
}

/* =========================================================
   INPUT NUCLEAR OVERRIDE
========================================================= */
.nuke-input,
.nuke-input *,
.nuke-input *::before,
.nuke-input *::after {
  touch-action: none !important;
  -ms-touch-action: none !important;

  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;

  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent !important;

  -webkit-text-size-adjust: 100% !important;
}

.nuke-input a,
.nuke-input button,
.nuke-input input,
.nuke-input textarea {
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* Buffer UI must remain scrollable even when input is nuked.
   We want to block world panning, not UI scrolling. */
.nuke-input .buffer-ui,
.nuke-input .buffer-ui *{
  touch-action: pan-y !important;
  -ms-touch-action: pan-y !important;
}
.nuke-input .buffer-marks,
.nuke-input .buffer-string{
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Generated buttons reuse your existing .nav_btn style if it exists.
   This is just a fallback so they don’t render like sad default buttons. */
.ui_btn_generated {
  min-height: 44px;
}
/* =========================================================
   WINDOW AURA (full-screen inset glow)
   - sits above #stage but below .ui panels
   - does NOT affect layout like borders do
========================================================= */
#uiShell{
  position: fixed;
  inset: 0;
  top: var(--tv_frame_h) !important;
  bottom: var(--tv_frame_h) !important;
  z-index: 9500;          /* .ui is 9999, lore toast is higher */
  pointer-events: none;
  --tv_window_glow: var(--tv_aura_fail);
  --tv_window_glow_size:2px;
}

#uiShell::before{
  content:"";
  position:absolute;
  inset: 0;
  /* inset window aura */
  box-shadow:
    inset 0 0 var(--tv_window_glow_size) var(--tv_window_glow_size) var(--tv_window_glow),
    inset 0 0 120px 40px rgba(0,0,0,0.55); /* optional: adds depth */
}

/* re-use the same aura state names */
#uiShell.aura-idle { --tv_window_glow: var(--tv_aura_idle); --tv_window_glow_size: 14px; }
#uiShell.aura-busy { --tv_window_glow: var(--tv_aura_busy); --tv_window_glow_size: 22px; }
#uiShell.aura-fx   { --tv_window_glow: var(--tv_aura_fx);   --tv_window_glow_size: 22px; }
#uiShell.aura-fail { --tv_window_glow: var(--tv_aura_fail); --tv_window_glow_size: 24px; }
#uiShell.aura-gain { --tv_window_glow: var(--tv_aura_gain); --tv_window_glow_size: 22px; }
#uiShell.aura-pink { --tv_window_glow: var(--tv_aura_pink); --tv_window_glow_size: 22px; }
#uiShell.aura-void { --tv_window_glow: var(--tv_aura_void); --tv_window_glow_size: 22px; }
#uiShell.aura-gold { --tv_window_glow: var(--tv_aura_gold); --tv_window_glow_size: 22px; }

#topFrame,
#bottomFrame{
  position: fixed;
  left: 0;
  right: 0;
  height: 28px;
  padding-top:3px;
  background: var(--void-bg, #000);
  z-index: 10000;
  color: #ddd;
  text-align:center;
}

#topFrame{ top: 0; }
#bottomFrame{ bottom: 0; }
#ui_slotbar_primary{ bottom: calc(20px + var(--tv_frame_h, 0px)) !important; }
/* =========================
   DATA BUBBLES (Top HUD)
========================= */

.data-bubbles-shell{
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 70px);
  left: 20px;
  right: 20px;
  z-index: 80; /* above world, below toasts if needed */
  display: flex;
  flex-wrap: wrap;          /* ← THIS */
  justify-content: center;
  align-items: center; 
  gap: 10px;

  /* shell itself is invisible */
  background: transparent;
  border: 0;
  pointer-events: none; /* bubbles are display-only for now */
}

.data-bubble{
  width: 38px;
  height: 38px;
  overflow:hidden;
  padding: 0 2px;
  display: flex;
flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 12px;

  /* thread-like capsule feel */
  background: rgba(0,0,0,0.65);
box-shadow:
    0 0 3px 3px rgba(20,20,20,0.95),
    inset 0 0 var(--tv_aura_ring_size) var(--tv_aura_ring_size) var(--tv_aura_ring, rgba(255,255,255,0.5)),
    inset 0 0 4px 4px rgba(120,120,120,0.95);

  /* text */
  color: rgba(240,240,240,0.92);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.7);

  /* allow aura classes to glow it */
  will-change: filter, box-shadow, transform;
}

/* show/hide mechanic */
.data-bubble.is-hidden{
  display: none;
}

.data-bubble-value{
  display: inline-block;
  max-width: 5ch;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}
/* Data bubble aura wiring (match your UI/Thread aura system) */
.data-bubble{
  --tv_aura_ring: var(--tv_aura_idle);
  --tv_aura_ring_size: 1px;
}

.data-bubble.aura-idle { --tv_aura_ring: var(--tv_aura_idle); --tv_aura_ring_size: 1px; }
.data-bubble.aura-busy { --tv_aura_ring: var(--tv_aura_busy); --tv_aura_ring_size: 3px; }
.data-bubble.aura-fx   { --tv_aura_ring: var(--tv_aura_fx);   --tv_aura_ring_size: 3px; }
.data-bubble.aura-fail { --tv_aura_ring: var(--tv_aura_fail); --tv_aura_ring_size: 3px; }



/* =========================
   ORB FX (floating reward text)
   - purely visual, sits near the centered thread
========================= */
#orb_fx_layer{
  position: fixed;
  inset: 0;
  z-index: 9050;        /* above world + thread sprite, below uiShell/ui */
  pointer-events: none;
}

.tv-orb{
  position: absolute;
  left: 50%;
  top: calc(50% + var(--tv_center_y_offset, 0px));
  transform: translate(-50%,-50%);

  /* DO NOT CHANGE SIZE (kept identical) */
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 14px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: rgba(245,245,245,0.95);
  text-shadow: 0 1px 0 rgba(0,0,0,0.75);

  /* Aura-ring vars (same pattern as #thread_sprite) */
  --tv_aura_ring: rgba(255,255,255,0.50);
  --tv_aura_ring_size: 1px;

  /* Match thread + bubble aura styling (NO new look) */
  background: rgba(0,0,0,0.15);
  box-shadow:
    0 0 8px 8px rgba(20,20,20,0.95),
    inset 0 0 var(--tv_aura_ring_size) var(--tv_aura_ring_size) var(--tv_aura_ring, rgba(255,255,255,0.5)),
    inset 0 0 5px 5px rgba(120,120,120,0.95);

  /* Kill the washed-out glow method */
  filter: none;

  opacity: 0;
  will-change: transform, opacity;
}

@keyframes tv_orb_float_up {
  0%   { opacity: 0; transform: translate(-50%,-50%) translate(var(--ox,0px), var(--oy,0px)) scale(0.90); }
  10%  { opacity: 1; }
  95%  { opacity: 0.95; }
  100% { opacity: 0; transform: translate(-50%,-50%) translate(var(--ox,0px), calc(var(--oy,0px) - 80px)) scale(1.05); }
}

.tv-orb.is-float{
  animation: tv_orb_float_up 800ms ease-out 1;
}

/* Aura states: exact same values as your thread aura states */
.tv-orb.aura-idle { --tv_aura_ring: rgba(255,255,255,0.50); --tv_aura_ring_size: 1px; }
.tv-orb.aura-busy { --tv_aura_ring: rgba(0, 255, 255, 0.85); --tv_aura_ring_size: 3px; }
.tv-orb.aura-fx   { --tv_aura_ring: rgba(255, 170, 0, 0.90); --tv_aura_ring_size: 3px; }
.tv-orb.aura-fail { --tv_aura_ring: rgba(255,  40, 40, 0.92); --tv_aura_ring_size: 3px; }
/* ORB aura routing (match bubbles + thread) */
.tv-orb.aura-gain { --tv_aura_ring: var(--tv_aura_gain); --tv_aura_ring_size: 3px; }
.tv-orb.aura-pink { --tv_aura_ring: var(--tv_aura_pink); --tv_aura_ring_size: 3px; }
.tv-orb.aura-void { --tv_aura_ring: var(--tv_aura_void); --tv_aura_ring_size: 3px; }
.tv-orb.aura-gold { --tv_aura_ring: var(--tv_aura_gold); --tv_aura_ring_size: 3px; }

.data-bubbles-shell{ pointer-events: auto !important; }
.data-bubble{ pointer-events: auto !important; }


/* =========================================================
   DATA UI (Bubble Manager) - same feel as DUST list
========================================================= */
.data-ui {
  left: 15px;
  right: 15px;
  top: 125px;
  padding-bottom: 15px;
  min-height: 250px;
  max-height: calc(100vh - 250px);

  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 160ms ease, transform 160ms ease;

  display: flex;
  flex-direction: column;

  overflow: hidden;
}

.data-ui.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.intro-ui {
  left: 25px;
  right: 25px;
  top: 125px;
  padding-bottom: 15px;
  min-height: 250px;
  max-height: calc(100vh - 350px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 160ms ease, transform 160ms ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.intro-ui.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Scroll list exactly like DUST */
#data_bubble_list {
  display: grid;
  gap: 8px;
  padding-left: 15px;
  padding-right: 15px;
  margin-top: 14px;
  max-height: 25vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y !important;
  flex: 1 1 auto;
}

/* Allow vertical scroll even though items are ui-btn */
#data_bubble_list .ui-btn,
#data_bubble_list .ui_btn_generated {
  touch-action: pan-y !important;
}



/* ============================================================
   TILE MARKING (overlay)
   - Pure ::after overlay, does NOT change tile sizing/borders.
   - Uses existing aura palette variables:
     --tv_aura_busy, --tv_aura_idle, --tv_aura_fx, --tv_aura_fail,
     --tv_aura_gain, --tv_aura_pink, --tv_aura_void, --tv_aura_gold
   ============================================================ */

.tile.tv-mark::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 0px;
z-index: 420; /* sit above sub/main/frame/fx 
  /* default ring */
  --tv_mark_ring: var(--tv_aura_busy);
  --tv_mark_ring_size: 3px;
  box-shadow:
    inset 0 0 0 var(--tv_mark_ring_size) var(--tv_mark_ring),
    inset 0 0 10px var(--tv_mark_ring);
}

/* Color variants */
.tile.tv-mark-busy::after{ --tv_mark_ring: var(--tv_aura_busy); }
.tile.tv-mark-idle::after{ --tv_mark_ring: var(--tv_aura_idle); }
.tile.tv-mark-fx::after{   --tv_mark_ring: var(--tv_aura_fx); }
.tile.tv-mark-fail::after{ --tv_mark_ring: var(--tv_aura_fail); }
.tile.tv-mark-gain::after{ --tv_mark_ring: var(--tv_aura_gain); }
.tile.tv-mark-pink::after{ --tv_mark_ring: var(--tv_aura_pink); }
.tile.tv-mark-void::after{ --tv_mark_ring: var(--tv_aura_void); }
.tile.tv-mark-gold::after{ --tv_mark_ring: var(--tv_aura_gold); }