/* Part 7 of 7 of the game's stylesheet (was style.css; the parts load in order, so rule
   order is exactly as before). Mostly: Combat action row and circle buttons, resonance/weapon row, stances, nav dock, class colours, zone mastery, Duality, later additions (NEW! markers, NEXT hint, shortcut labels, passive flash). */

/* ==========================================================================
   1. CORE CONTAINERS & LAYOUT
   ========================================================================== */

#combat-console-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 8px;
    margin-bottom:10px;
}

/* Base image rules for the container */
#combat-console-container img.ui-static-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* ==========================================================================
   2. GLOBAL ACTION BUTTON CORES (.btn-action)
   ========================================================================== */

.btn-action {
    background: linear-gradient(135deg, #16181b 0%, #090a0c 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #e1e2e6 !important;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    position: relative;
    overflow: hidden; /* Vital to keep inner image shapes clipped cleanly */
}

/* Active State */
.btn-action:active:not([disabled]) {
    transform: scale(0.96);
    background: linear-gradient(135deg, #0d0e10 0%, #050506 100%) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8) !important;
}

/* Disabled State */
.btn-action:disabled {
    background: #121315 !important;
    border-color: rgba(255, 255, 255, 0.03) !important;
    color: #55565a !important;
    cursor: not-allowed;
}

.btn-action:disabled img.ui-static-icon {
    filter: grayscale(100%) opacity(30%);
}


/* ==========================================================================
   3. MIDDLE UTILITY STACK & RECTANGLE ACTIONS
   ========================================================================== */

.center-utility-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-grow: 1;
    min-width: 0;
    height: 80px; /* Locks 1:1 scale alignment height with the updated circle heights */
}

.action-box {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: bold;
    text-overflow: ellipsis;
    
    /* Tweak & Priority Rules */
    border-radius: 3px !important;
    padding-left: 38px !important; 
    padding-right: 6px !important;
    justify-content: center !important;
    gap: 8px;
    white-space: nowrap;      
    overflow: hidden;         
    position: relative;
}
#btn-limit.action-box {
    padding-left: 6px !important;
    text-align: center;
}

/* Rectangle Embedded Icons */
.action-box img.ui-static-icon {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 32px !important;
    height: 100% !important;
    object-fit: cover;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
}

/* Dynamic State: Limit Ready */
.action-box.limit-ready {
    position: relative; /* Required for the pseudo-element context */
    border: 1px solid rgba(255, 71, 87, 0.3) !important; /* Subtle baseline border */
    background: linear-gradient(135deg, #2b1416 0%, #0d0e10 100%) !important;
    color: #ff6b81 !important;
    overflow: hidden; /* Keeps the glow crisp and contained */
}

/* The Hardware-Accelerated Glow Layer */
.action-box.limit-ready::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid #ff4757; /* The bright, solid glowing border */
    box-shadow: inset 0 0 10px rgba(255, 71, 87, 0.4), 
                0 0 15px rgba(255, 71, 87, 0.5);
    border-radius: inherit; /* Matches your container's corner rounding */
    pointer-events: none; /* Ensures it doesn't block touch interactions */
    
    /* Performance keys: force GPU layer & animate opacity only */
    will-change: opacity;
    transform: translateZ(0); 
    animation: limitGlowPulse 1s ease-in-out infinite alternate;
}

@keyframes limitGlowPulse {
    0% { 
        opacity: 0.15; 
    }
    100% { 
        opacity: 1.0; 
    }
}



/* ==========================================================================
   4. HIGHEST PRIORITY OVERRIDES (Main Row, Circles, and Resonance)
   ========================================================================== */

/* --- Fixed Main Combat Row Layout --- */
#main-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px; /* Margins between buttons inside the tray */
    width: 100%;
    height: 94px; /* Lifted slightly to give the elements breathing room inside the tray padding */
    box-sizing: border-box;
    
    /* --- THE HUD BACKING PLATE CHASSIS --- */
    background: linear-gradient(180deg, #121417 0%, #07080a 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-top: 1px solid rgba(255, 255, 255, 0.12); /* Gives the top rim a sharp metallic light reflection */
    border-radius: 12px; /* Smoothly cradles the inner elements */
    
    /* Pushes the tray out from the background screen with heavy ambient occlusion shadows */
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.03),
                0 12px 24px rgba(0, 0, 0, 0.95),
                0 4px 8px rgba(0, 0, 0, 0.5);
                
    /* Generous internal padding so the massive circle buttons sit beautifully encased inside the frame */
    padding: 6px 8px; 
    /*margin-top: 4px;*/
}


/* --- Massive, Seamlessly Incorporated Circle Buttons --- */
.action-circle {
    width: 80px !important;  /* Dialed down slightly from 82px to fit inside the tray margins */
    height: 80px; 

    flex-shrink: 0 !important; /* Stops text from crushing/pushing the circle */
    border-radius: 5px !important;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    
    /* Aesthetic Ring Frame */
    border: 2px solid rgba(var(--gold-old-rgb), 0.25) !important; 
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.95),
                0 6px 14px rgba(0, 0, 0, 0.7) !important;
}

/* Circle Highlight profile when usable */
.action-circle:not([disabled]) {
    border-color: rgba(var(--gold-old-rgb), 0.3) !important;
}

/* Circle Inner Content Container */
.action-circle .btn-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    width: 100%;
    height: 100%;
    padding-bottom: 8px;
    box-sizing: border-box;
    z-index: 2;
}

/* Blends the square icon completely into the circular geometry */
.action-circle img.ui-static-icon {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover; 
    
    /* Radial Mask Trick to dissolve hard square corners */
    -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 35%, rgba(0,0,0,0) 68%);
    mask-image: radial-gradient(circle, rgba(0,0,0,1) 35%, rgba(0,0,0,0) 68%);
    
    opacity: 0.55; /* Mutes artwork highlights for text readability */
    z-index: -1;
    mix-blend-mode: luminosity; /* Forces image to meld into dark plate */
}

/* Text protection rules over background artwork */
.action-circle .btn-label {
    font-size: 0.65rem !important;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    max-width: 64px;
    white-space: normal; /* Allows wrapping onto secondary line */
    overflow: visible;
    text-shadow: 0 2px 4px #000, 0 0 6px #000;
}

/* --- The Top Resonance/Weapon Select Row --- */
#resonance-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    width: 100%;
    height: 35px; /* Sleek profile height */
    box-sizing: border-box;
}

#resonance-wrapper .btn-resonance {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* The Isolated Left Sidebar Slot for the Weapon Graphic */
#resonance-wrapper .res-icon {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    height: 100%;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.4);
    overflow: hidden;
    display: block;
    z-index: 1;
}

#resonance-wrapper .res-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0.4; /* Dims the asset slightly when inactive */
    filter: grayscale(40%);
    transition: opacity 0.2s ease, filter 0.2s ease;
}

/* Stacking Container for Text Strings */
.res-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    line-height: 1.2;
    padding-left: 2px;
}

.res-title {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #a4a6af;
}

/* --- Active Stance Highlighting --- */
#resonance-wrapper .btn-resonance.active-res {
    background: linear-gradient(135deg, #1e222b 0%, #0c0e12 100%) !important;
    border-color: rgba(var(--gold-old-rgb), 0.4) !important; /* Golden pop for active stance */
    box-shadow: inset 0 0 6px rgba(var(--gold-old-rgb), 0.15) !important;
}

#resonance-wrapper .btn-resonance.active-res .res-title {
    color: #fff; /* Text goes bright white */
}

#resonance-wrapper .btn-resonance.active-res .res-icon img {
    opacity: 0.95 !important; /* Full rich weapon artwork visual */
    filter: grayscale(0%) !important;
}

/* Stance Dynamic Active Element Profiles */
#resonance-wrapper .btn-resonance.active-res[data-type="dawn"] {
    border-color: var(--fury) !important;
    box-shadow: inset 0 0 8px rgba(235, 94, 40, 0.3), 0 0 10px rgba(235, 94, 40, 0.2) !important;
}

#resonance-wrapper .btn-resonance.active-res[data-type="eclipse"] {
    border-color: var(--magic) !important;
    box-shadow: inset 0 0 8px rgba(155, 93, 229, 0.3), 0 0 10px rgba(155, 93, 229, 0.2) !important;
}

#resonance-wrapper .btn-resonance.active-res[data-type="twilight"] {
    border-color: #dcdde1 !important;
    box-shadow: inset 0 0 8px rgba(220, 221, 225, 0.2), 0 0 10px rgba(220, 221, 225, 0.1) !important;
}
/* Target your specific button ID to override the old merchant list layout */
/* Pseudo-element trick to create a ROUNDED gradient border */
#btnRest::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 4px; 
    padding: 2px; /* Border thickness */
    
    /* Dropped the stark white-gold; shifted to a rich, burnished antique gold spectrum */
    background: linear-gradient(to bottom, #d4a34b 0%, #8c6323 60%, #3a250a 100%);
    
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}


/* Give the icon a subtle inner frame to imbed it into the UI */
#btnRest .sanc-hearth-btn-icon {
    width: 34px;
    height: 34px;
    background-size: cover;
    border: 1px solid #5a4a35;
    box-shadow: inset 0 0 4px rgba(0,0,0,0.8);
    flex-shrink: 0;
}

/* Text alignment */

/* Main "REST" text with metallic gradient & hard shadow */

/* Small subtext */

/* Micro-interactions for phone taps - Gives a satisfying physical press feel */
#btnRest:active {
    transform: scale(0.95) translateY(1px);
    background: linear-gradient(135deg, #0d0a09 0%, #050404 100%);
    box-shadow: 
        inset 0 0 12px rgba(0, 0, 0, 0.9),
        0 2px 5px rgba(0, 0, 0, 0.5);
}

/* Dimmed state for when the hero is already at 100% health */
#btnRest:disabled {
    border-image: linear-gradient(to bottom, #4a3f35 0%, #2b241e 100%) 1;
    opacity: 1;
    cursor: not-allowed;
    transform: none;
    filter: grayscale(100%);
    box-shadow: none;
}


#btn-pulse {
    border: 1px solid rgba(76, 209, 55, 0.5) !important;
}
/* === BOTTOM NAV DOCK === */#nav-dock {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  padding: 0 12px; /* Marginally widened side padding to push items inward away from screen edges */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.dock-item .dock-icon {
  font-size: 18px; /* Slightly scaled down base size to grant instant breathing room */
  line-height: 1;
  display: inline-block;
  filter: brightness(0.35) sepia(0.8) saturate(0.4);
  will-change: transform, filter;
  transition: filter 0.3s ease, transform 0.3s ease;
}

/* Active state */
/* Active state */

.dock-item.active .dock-icon {
  filter: brightness(1.1) sepia(0.2) saturate(1.4) drop-shadow(0 0 6px rgba(var(--gold-nav-rgb), 0.5));
  transform: translateY(-2px) scale(1.15);
}

/* Active indicator line (Top) */
.dock-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 22%;
  right: 22%;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--gold-nav) 30%, var(--gold-nav) 70%, transparent);
  border-radius: 2px;
  z-index: 2;
}

/* NEW: Super subtle side and bottom frame for the active item */
.dock-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* Draws a 1px border on left, right, and bottom only */
  border-left: 1px solid rgba(180, 60, 60, 0.18);
  border-right: 1px solid rgba(180, 60, 60, 0.18);
  border-bottom: 1px solid rgba(180, 60, 60, 0.22);
  /* A very soft gradient mask so the side borders elegantly fade away near the top */
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  z-index: 1;
}



.tut-help-list b {
    color: var(--gold-old);
}

.small-icon {
    width: 32px !important;  /* Control icon size */
    height: 32px !important;
    border-radius: 4px; /* Softens the square edges */
    border: 1px solid #555; /* Makes the non-transparent block look like a framed tile */
    object-fit: contain;
    background-color: #000; /* Optional: provides a consistent backing for the icons */

}
.tiny-icon {
    width: 25px !important;  /* Control icon size */
    height: 25px !important;
    border-radius: 4px; /* Softens the square edges */
    border: 1px solid #555; /* Makes the non-transparent block look like a framed tile */
    object-fit: contain !important;
    background-color: #000; /* Optional: provides a consistent backing for the icons */

}
/* Card Container Styles */

/* The Darker Header Container Block */
.mastery-move-header-block {
    background: #111318;
}

/* Top row containing Name and Badge */
.mastery-move-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
}

.mastery-move-name {
    font-weight: 700;
    font-size: 1.05rem;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.mastery-passive-trigger {
    font-size: 0.6rem;
    
    font-weight: 500;
}

/* Lower Body Container Styles */
.mastery-move-body {
        display: flex;
    flex-direction: column;
    gap: 10px; /* Snug vertical element gaps */
}

/* Code-Style Formula Block inside the Body */

.mastery-move-desc {
    color: #9ba1b0;
    font-size: 0.85rem;
    line-height: 1.4;
    padding:12px 14px;
}

/* Main Class Header Container spacing */

/* Row containing Title + Subtitle */

/* ROGUE - High-contrast Gold Accent */
.mastery-main-title {
    color: #ffb74d;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* THE SCOUNDREL - Clean, legible muted gray */
.mastery-subtitle {
    color: #717784;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Flavor text description */

/* Duality Layout Section Main Wrappers */
.duality-divider-container {
    margin: 12px 0 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.duality-line {
    flex-grow: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(68, 72, 84, 0.5), transparent);
}
.duality-line:first-child {
    background: linear-gradient(to left, rgba(68, 72, 84, 0.5), transparent);
}

.duality-divider-text {
    font-size: 0.8rem;
    color: #ffb74d; /* Uses matching gold accent */
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.duality-main-card {
    padding: 12px;
    border: 1px solid #23262f;
    background: #0f1115;
    border-radius: 8px;
    max-width: 420px;
}

/* Progression State Locks */
.mastery-card-locked {
    opacity: 0.3;
    filter: grayscale(100%);
}

/* Custom Level Badges */
.mastery-level-badge {
    padding: 1px 5px;
    border-radius: 4px;
    margin-left: 6px;
    font-size: 0.65rem;
    font-weight: bold;
    vertical-align: middle;
    letter-spacing: 0.5px;
}
.badge-unlocked {
    background: #23262f;
    color: #ffffff;
    border: 1px solid #3a3f4d;
}
.badge-locked {
    background: rgba(229, 57, 53, 0.15);
    color: #e53935;
    border: 1px solid #e53935;
}

/* Ascendant Convergence Stat Panel Component */
.duality-stat-convergence-card {
    background: #191b22;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #23262f;
    text-align: center;
    margin-bottom: 12px;
}

.duality-convergence-label {
    font-size: 0.75rem;
    color: #838996;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
}

.duality-convergence-value {
    font-size: 1.25rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
}

.duality-convergence-desc {
    font-size: 0.8rem;
    color: #838996;
    font-style: italic;
    line-height: 1.4;
    text-align: left;
    border-top: 1px solid #23262f;
    padding-top: 8px;
}

/* Helper Elements */
.mastery-move-title-wrap {
    display: flex;
    align-items: center;
}

.compact-border {
    border-bottom: 1px solid #1c1e24;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.text-highlight {
    color: #ddd;
    font-weight: 600;
}

#fade-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: black;
    opacity: 0;
    pointer-events: none; /* Prevents clicking on the black screen */
    transition: opacity 0.3s ease-in-out;
    z-index: 9999999;
}

/* The class triggered by JavaScript */
#fade-overlay.fade-black {
    opacity: 1;
}

/* Container to position the badge cleanly above the log or navigation */
.obc-loot-notification-container {
    display: inline-flex;
    align-items: center;
    margin: 6px 0;
    z-index: 10;
}

/* The Main Spoils / Loot Button */
.obc-loot-btn-notification {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(180deg, #1e222b 0%, #12151c 100%);
    border: 1px solid #3d4352;
    border-radius: 4px;
    padding: 6px 12px;
    color: #c9d1d9;
    font-family: 'Cinzel', 'Georgia', sans-serif; /* Fallback to sharp serif if using a fantasy font */
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), 
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

/* Subtle interactive feedback for mobile taps */
.obc-loot-btn-notification:active {
    background: #15181f;
    border-color: #565d6e;
}

/* The Pulse/Quantity Badge Indicator */
.obc-loot-badge-pulse {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Quiet by default: nothing in the sack beats what you're wearing. The gold ▲
       .is-upgrade state (below) is the "go look" signal. The old infinite box-shadow
       glow repainted every frame for as long as loot was waiting. */
    background: #3a3f4b;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 800;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 3px;
}

/* 2x2 Merchant Selection Grid */
.sanc-merchant-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 12px;
    width: 100%;
    box-sizing: border-box;
}

/* Individual Grid Character Cards */
.sanc-grid-card {
    background: #14171c; /* Match your inset battle card dark background */
    border: 1px solid #2d333f;
    border-radius: 6px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.1s ease, border-color 0.2s;
}

.sanc-grid-card:active {
    transform: scale(0.97);
    border-color: var(--accent-gold, var(--gold-brass));
}

/* Rounded, framed thumbnail portraits inside grid */
.sanc-grid-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #3c4554;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
    margin-bottom: 8px;
}

.sanc-grid-label {
    font-size: 11px;
    letter-spacing: 1.5px;
    color: #a3aebf;
    font-weight: bold;
    text-align: center;
}

/* Back Button to leave shop and return to town view */
.sanc-back-btn {
    background: transparent;
    border: none;
    color: var(--accent-gold, var(--gold-brass));
    font-size: 11px;
    letter-spacing: 2px;
    font-weight: bold;
    padding: 12px;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

/* Ensure the active stage container is strictly locked to the remaining viewport height */
.sanc-merchant-stage {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 160px); /* Adjust '160px' to match the combined height of your top global header and bottom navigation footer */
    
}

/* Force the actual shop inventory container to scroll vertically */






#btn-buy-surge.sanc-row-btn {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    padding: 16px;
    gap: 10px;
}

#btn-buy-surge .sanc-row-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

#btn-buy-surge .sanc-row-name {
    font-size: clamp(0.95rem, 4vw, 1.15rem);
    font-weight: 700;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: break-word;
    text-align: left;
}

#btn-buy-surge .sanc-row-price {
    flex-shrink: 0;
    white-space: nowrap;
}

#btn-buy-surge .sanc-row-content {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
}

#btn-buy-surge .sanc-icon-box {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#btn-buy-surge .sanc-row-info {
    flex: 1 1 auto;
    min-width: 0;
}

#btn-buy-surge .sanc-row-desc {
    display: block;
    white-space: normal;
    overflow-wrap: break-word;
    font-size: clamp(0.75rem, 1.8vw, 0.85rem);
    line-height: 1.4;
    text-align: left;
}

.duel-hand-card { position: relative; }
.duel-card-tooltip {
    position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-6px);
    background: rgba(10,10,14,0.97); border: 1px solid var(--accent-gold, var(--gold-brass)); border-radius: 6px;
    padding: 6px 8px; font-size: 10px; line-height: 1.3; color: #ddd; width: 130px; text-align: center;
    opacity: 0; pointer-events: none; transition: opacity 0.12s ease; z-index: 20;
}
.duel-hand-card.duel-card-held .duel-card-tooltip { opacity: 1; }

/* ─── BATTLE PERFORMANCE (keep at end of file so these win) ─── */

/* All hero/enemy battle art is fully opaque and clipped by its frame, so the drop-shadow
   filters from .enemy-icon were invisible but forced the phone to render the frame
   offscreen. The frames already have their own box-shadow. */
#hero-sprite.enemy-icon,
#enemy-sprite.enemy-icon,
#enemy-sprite img.enemy-icon {
    filter: none;
}

/* Charge-up telegraph (the turn before a heavy/burst attack). The glow used to be a
   drop-shadow + brightness filter with a 0.4s filter transition and a pulsing overlay,
   all re-rendered every frame. Same look as a static box-shadow glow, drawn once; the
   cheap transform shudder is kept. */
#enemy-sprite.enemy-charge,
#enemy-sprite.boss-charge {
    filter: none;
    transition: none;
}
#enemy-sprite.enemy-charge {
    box-shadow: 0 0 14px #ffa502, inset 0 0 30px rgba(0, 0, 0, 1) !important;
}
#enemy-sprite.boss-charge {
    box-shadow: 0 0 20px #ff4757, 0 0 6px #ff4757, inset 0 0 30px #000 !important;
}
#enemy-sprite.boss-charge::after {
    animation: none;
}

/* Keep the battle area and enemy frame on their own GPU layers from the start. Otherwise
   the first hit, and the start and end of every crit screen-shake, rebuild them from
   scratch — the "first animation lags" and "crits stutter" hitches. */
#combat-ui,
#enemy-sprite {
    will-change: transform;
}

/* ─── LOOT SACK: silent collection, loud upgrades ─── */
/* Something in the sack beats your equipped item */
.obc-loot-btn-notification.has-upgrade {
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}
.obc-loot-badge-pulse.is-upgrade {
    background: var(--accent-gold);
    color: #1a1400;
    box-shadow: 0 0 6px rgba(var(--accent-gold-rgb), 0.6); /* static; only the transform animates */
    animation: loot-upgrade-pulse 1.1s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes loot-upgrade-pulse {
    from { transform: scale(1); }
    to   { transform: scale(1.15); }
}
/* A new item just arrived */
.obc-loot-btn-notification.loot-bump {
    animation: loot-bump 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes loot-bump {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.18) translateY(-3px); }
    100% { transform: scale(1); }
}
/* Empty side-menu Loot Sack entry */
#sidebar-loot-sack-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* "▲ UPGRADE" tag on rows in the loot list */
.loot-upgrade-tag {
    margin-left: 6px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #1a1400;
    background: var(--accent-gold);
    padding: 1px 5px;
    border-radius: 3px;
    vertical-align: middle;
}

/* Level-up guidance: the main stat's "+" glows while points are unspent (ui.js). */
.stat-btn.stat-btn-primary {
    border-color: var(--accent-gold) !important;
    color: var(--accent-gold) !important;
    box-shadow: 0 0 8px rgba(var(--accent-gold-rgb), 0.6);
    animation: pulse2 1.2s infinite alternate;
}

/* The crit shake nudges #combat-ui a few px past #view-combat's edges, which made the
   scrollable panel flash a scrollbar. shakeScreen() adds this class to the shaken
   element's parent for the duration of the shake. (A :has() selector didn't take effect in
   older Android WebViews.) */
.shake-scroll-lock {
    overflow: hidden !important;
}

/* ── Gradual introduction of systems (managers/introManager.js) ──
   Anything tagged data-intro stays hidden until the game introduces it. */
[data-intro]:not(.intro-on) { display: none !important; }
.intro-new { position: relative; }
.intro-new::after {
    content: 'NEW!';
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--accent-gold, var(--gold-brass));
    color: #141619;
    font-family: var(--font-head);
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 1px;
    pointer-events: none;
    z-index: 2;
}
/* Small buttons: the marker sits on the corner, outside the button, so it doesn't hide the label */
.crier-retire-button.intro-new::after,
.btn-dashboard.intro-new::after {
    top: -9px;
    right: -8px;
    font-size: 8px;
    padding: 1px 4px;
}
/* the sidebar's Relics section unlocks with the Relics shop; the shop card carries the marker */
.hero-group.intro-new::after { display: none; }

/* "What should I do next?" hint (ui.js uiUpdateNextGoal) */
.next-goal-hint {
    margin: 12px 16px 0;
    padding: 6px 10px;
    border: 1px solid rgba(var(--gold-brass-rgb), 0.25);
    border-radius: 4px;
    background: rgba(var(--gold-brass-rgb), 0.06);
    color: #d1d5db;
    font-size: 12px;
    line-height: 1.4;
    flex-shrink: 0;
}
.next-goal-hint[data-where="combat"] { margin: 0; }
.next-goal-label {
    color: var(--accent-gold, var(--gold-brass));
    font-family: var(--font-head);
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1.5px;
    margin-right: 4px;
}

/* Compendium entry reached from a tutorial's "Learn more" link */
.guide-entry { scroll-margin-top: 10px; border-radius: 4px; transition: background 0.6s; }
.guide-entry-highlight { background: rgba(var(--gold-brass-rgb), 0.12); }

/* Keyboard shortcut labels (src/core/shortcuts.js). Only on devices with a mouse, so phones
   and tablets never show them. */
@media (hover: hover) and (pointer: fine) {
    [data-shortcut]::after {
        content: attr(data-shortcut);
        position: absolute;
        top: 3px;
        right: 4px;
        padding: 0 3px;
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 3px;
        background: rgba(0, 0, 0, 0.55);
        color: rgba(255, 255, 255, 0.7);
        font-family: monospace;
        font-size: 9px;
        line-height: 13px;
        letter-spacing: 0;
        pointer-events: none;
    }
    [data-shortcut]:disabled::after { opacity: 0.4; }
}