/* components.action-menu.css
 * Extracted from legacy .action-menu + button cluster styling.
 */
 :root {
  --action-menu-bg: linear-gradient(145deg,#2a2d31,#181a1c 65%); /* lighter legacy-inspired */
  --action-menu-border: 3px solid #000;
  --action-menu-inner-border: none; /* Removed thin inner border */
  --action-menu-radius: 0; /* Sharp 90 degree corners */
  --action-menu-gap: 6px; /* vertical gap between buttons */
  --action-menu-padding: 6px 12px 8px; /* more compact */
  --action-menu-title-color: var(--accent-monsters,#ffcf33);
  --action-menu-shadow: 4px 4px 0 #000; /* Removed inner shadow */
  --action-menu-button-width: 220px; /* Narrower buttons for more compact menu */
}

.cmp-action-menu {
  position:fixed;
  top:110px; /* desktop default: near top */
  right:385px; /* Adjusted to avoid monsters panel overlap */
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  gap:var(--action-menu-gap);
  background:var(--action-menu-bg);
  padding:6px 20px 24px; /* restored horizontal padding (20px), increased bottom to 24px */
  border:var(--action-menu-border);
  border-radius:0; /* Sharp corners */
  box-shadow:4px 4px 0 #000; /* Simple drop shadow, no inner border */
  z-index:9600; /* Above mini player cards (9500) */
  font-family:'Bangers',cursive;
  letter-spacing:.5px;
  width:260px; /* Narrower to match reduced button width */
  max-width:260px;
  min-width:260px;
  align-items:stretch;
  /* Smooth fade-in animation */
  transition: opacity 0.6s ease-out;
  overflow:visible; /* Allow drag handle to extend outside menu bounds */
  filter:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

/* Hide action menu when pause overlay is visible */
.cmp-pause-overlay:not(.hidden) ~ * .cmp-action-menu,
body:has(.cmp-pause-overlay:not(.hidden)) .cmp-action-menu {
  pointer-events: none;
  opacity: 0.3;
  z-index: 100;
}

/* Hide action menu during unleash/setup screen */
.cmp-unleash-screen:not(.hidden) ~ * .cmp-action-menu,
body:has(.cmp-unleash-screen:not(.hidden)) .cmp-action-menu,
body:has([data-setup-active="true"]) .cmp-action-menu,
.cmp-action-menu.am-waiting-for-unleash {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* REMOVED OLD MOBILE CODE - Now using unified responsive styles below */

/* Drag grip removed - menu is now draggable from any open space */
.cmp-action-menu .am-header-row { 
  display:flex; 
  align-items:center; 
  gap:4px; 
  position:relative; 
  overflow:visible;
  cursor: grab;
}
.cmp-action-menu .am-header-row:active {
  cursor: grabbing;
}
/* Grip styles hidden - no longer used
.cmp-action-menu .am-drag-grip.am-grip-left {
  display: none;
}
*/

/* When draggable and has transform applied, allow free positioning */
.cmp-action-menu[data-draggable="true"][style*="transform"] {
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
}
.app-toolbar, .game-toolbar, [data-toolbar] { margin-bottom:12px; }
.cmp-action-menu .am-label { 
  display:flex !important; 
  align-items: center;
  justify-content: space-between;
  position:static; 
  margin:0; /* Remove bottom margin since flex gap handles spacing */
  background:transparent !important; 
  color:#fff; 
  padding:8px 6px 4px; /* Added top padding (8px instead of 2px) */ 
  font-size:24px; 
  line-height:1; 
  border:none !important; 
  box-shadow:none !important; 
  letter-spacing:2px; 
  text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000, 3px 3px 0 #000;
  border-radius: 0 !important;
  outline: none !important;
  width: 100%;
}

/* Hamburger Icon (Desktop) */
.cmp-action-menu .am-hamburger-icon {
  display: inline-block;
  font-size: 24px;
  font-weight: bold;
  color: #fff !important;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
  margin-right: 10px;
  line-height: 1;
  vertical-align: middle;
  transition: opacity 0.2s ease;
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* Ensure clicks go to parent button */
}


/* Content Container Collapse Styles */
.cmp-action-menu .am-content {
  transition: max-height 0.3s ease, opacity 0.2s ease;
  overflow: hidden;
  margin-top: 2px; /* tiny separation for readability */
  padding-top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--action-menu-gap);
  transform-origin: top; /* grow upward when expanding */
}

.cmp-action-menu .am-content[data-collapsed="true"] {
  max-height: 0px !important;
  opacity: 0 !important;
  overflow: hidden !important;
}

.cmp-action-menu .am-content[data-collapsed="false"] {
  max-height: 500px !important;
  opacity: 1 !important;
  overflow: visible !important;
}

.cmp-action-menu[data-layout="horizontal"] { flex-direction:row; flex-wrap:wrap; align-items:flex-start; }
.cmp-action-menu[data-layout="horizontal"] .am-label { margin-bottom:6px; }

/* Power Cards Menu Styles */
.power-cards-menu-container {
  position: relative;
  width: auto;
}

.power-cards-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: auto;
  background: linear-gradient(135deg, #2c5234, #1a3d20) !important;
  border-color: #4a7c59 !important;
}

.power-cards-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #345a3b, #1f4524) !important;
}

.power-cards-btn .arrow-left {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
  transition: opacity 0.2s ease;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  position: absolute;
}

.power-cards-btn .arrow-left {
  left: 8px;
  opacity: 1 !important; /* Visible to indicate submenu expands to the left */
}

.power-cards-btn .btn-text {
  flex: 1;
  text-align: center;
  position: relative;
  z-index: 1;
}

.power-cards-submenu {
  position: absolute;
  top: 0;
  z-index: 9600; /* Match action menu z-index */
  background: var(--action-menu-bg);
  border: var(--action-menu-border);
  border-radius: var(--action-menu-radius);
  box-shadow: var(--action-menu-shadow);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.power-cards-submenu:not([hidden]) {
  pointer-events: auto;
}

.power-cards-submenu:not([hidden]) {
  opacity: 1;
  transform: translateX(0);
}

.power-cards-submenu.submenu-left {
  right: 100%;
  margin-right: 8px;
}

.power-cards-submenu.submenu-right {
  left: 100%;
  margin-left: 8px;
}

.power-cards-submenu button {
  white-space: nowrap;
  font-size: 14px;
  padding: 6px 12px;
}

/* Deck illumination on power cards button hover */
.power-cards-btn:hover ~ .power-cards-submenu,
.power-cards-btn:hover {
  animation: deckIlluminate 0.3s ease-out;
}

@keyframes deckIlluminate {
  0% { box-shadow: var(--action-menu-shadow); }
  50% { box-shadow: var(--action-menu-shadow), 0 0 15px #4a7c59; }
  100% { box-shadow: var(--action-menu-shadow); }
}

/* Trigger deck illumination in power cards panel */
.power-cards-btn:hover {
  --deck-illuminate: true;
}

/* All action menu buttons - consistent styling with power card font */
.cmp-action-menu button {
  font-family: 'Bangers', cursive !important;
  font-size: 18px !important;
  letter-spacing: 2px !important;
  color: #fff !important;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000 !important;
  min-height: 48px !important;
  padding: 8px 12px !important;
  border: 1px solid #000 !important;
  border-radius: 0 !important;
  box-shadow: 2px 2px 0 #000, 0 0 0 1px #222 inset !important;
  transition: all 0.2s ease !important;
}

/* End Turn Button - Red when enabled */
.cmp-action-menu [data-action="end"]:not(:disabled) {
  background: linear-gradient(145deg, #8b2c2c, #5c1a1a) !important;
  border-color: #a64545 !important;
  color: #fff !important;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000 !important;
}

.cmp-action-menu [data-action="end"]:not(:disabled):hover {
  background: linear-gradient(145deg, #9d3333, #661f1f) !important;
  color: #fff !important;
}
.cmp-action-menu[data-layout="vertical"] { flex-direction:column; flex-wrap:nowrap; width:260px; }
.cmp-action-menu[data-layout="vertical"] button { width:100%; max-width:100%; }
.cmp-action-menu { row-gap:12px; }
/* Base reset for buttons (we'll color per action) */
.cmp-action-menu button {
  --btn-bg-muted:#c5c5c5;
  border:3px solid #000;
  box-shadow:3px 3px 0 #000,0 0 0 2px #222 inset;
  font-family:'Bangers',cursive;
  letter-spacing:.5px;
  padding:8px 16px 10px;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  position:relative;
  color:#fff;
  text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000;
  transition:transform .18s cubic-bezier(.25,.46,.45,.94), box-shadow .18s ease, filter .2s ease, background .25s ease;
}

/* ROLL = Yellow */
.cmp-action-menu button[data-action="roll"] {
  background:linear-gradient(135deg,#ffe066,#ffb400);
  color:#222;
  text-shadow:none;
  border-color:#111;
}
.cmp-action-menu button[data-action="roll"]:not(:disabled):hover { filter:brightness(1.08); transform:translate(-2px,-3px); }
.cmp-action-menu button[data-action="roll"]:not(:disabled):active { transform:translate(0,0); }

/* KEEP ALL = Blue */
.cmp-action-menu button[data-action="keep"] {
  background:linear-gradient(135deg,#1f6ed4,#084c99);
  border-color:#052d57;
}
.cmp-action-menu button[data-action="keep"]:not(:disabled):hover { background:linear-gradient(135deg,#2c7fe6,#0a5bab); }

/* ACCEPT DICE RESULTS = Orange */
.cmp-action-menu button[data-action="accept-dice"] {
  background:linear-gradient(135deg,#ffb347,#ff7a18);
  border-color:#b35400;
}
.cmp-action-menu button[data-action="accept-dice"]:not(:disabled):hover { background:linear-gradient(135deg,#ffc162,#ff8a32); }

/* MY CARDS + FLUSH inside submenu (inherit smaller variant) */
.cmp-action-menu button[data-action="show-my-cards"] { 
  font-size:16px; 
  /* Purple background matching player power cards modal */
  background: linear-gradient(135deg, #2e2540, #1d1729) !important;
  border-color: #4a3b63 !important;
}
.cmp-action-menu button[data-action="show-my-cards"]:not(:disabled):hover { 
  background: linear-gradient(135deg, #3a2f52, #241e35) !important; 
}

.cmp-action-menu button[data-action="flush"] { font-size:16px; }

/* FLUSH keep gold accent */
.cmp-action-menu button[data-action="flush"] { background:linear-gradient(135deg,#d4a017,#b8860b); border-color:#8b7355; color:#111; text-shadow:none; }
.cmp-action-menu button[data-action="flush"]:not(:disabled):hover { background:linear-gradient(135deg,#f4c430,#d4a017); }

/* END TURN = Red */
.cmp-action-menu button[data-action="end"] {
  background:linear-gradient(135deg,#8b2c2c,#5c1a1a);
  border-color:#a64545;
}
.cmp-action-menu button[data-action="end"]:not(:disabled):hover { background:linear-gradient(135deg,#9d3333,#661f1f); }
.cmp-action-menu button:disabled {
  /* Preserve original background & border but visually mute */
  opacity:1; /* keep structural presence */
  filter:grayscale(.25) brightness(.75) saturate(.7); /* REDUCED grayscale from .55 to .25 to show more color */
  cursor:not-allowed;
  position:relative;
  box-shadow:2px 2px 0 #000,0 0 0 2px #222 inset;
}
/* Subtle hatch overlay for disabled state (non-intrusive) */
.cmp-action-menu button:disabled::after {
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,0.08) 0 6px, rgba(0,0,0,0.08) 6px 12px);
  mix-blend-mode:overlay; opacity:.35;
}
.cmp-action-menu button:not(:disabled):active { transform:translate(0,0); }
.cmp-action-menu button:focus-visible { outline:3px solid #fff; outline-offset:2px; }
.cmp-action-menu[data-draggable="true"] { cursor:move; }
.cmp-action-menu.cpu-rolling { filter:grayscale(1); transform:scale(.95); transition:filter .3s ease, transform .3s ease, opacity .3s ease; }

/* CPU turn: show buttons visually muted but preserve color identity */
.cmp-action-menu.cpu-turn button { opacity:.55; filter:saturate(.6) brightness(.9); cursor:not-allowed; }
.cmp-action-menu.cpu-turn button:disabled { background:var(--btn-bg); color:#222; }
.cmp-action-menu.cpu-turn button[data-action="keep"],
.cmp-action-menu.cpu-turn button[data-action="end"] { background:var(--btn-bg-alt); }
/* Prevent hover/active transforms during CPU turn */
.cmp-action-menu.cpu-turn button:not(:disabled):hover,
.cmp-action-menu.cpu-turn button:not(:disabled):active { transform:none; box-shadow:none; filter:saturate(.6) brightness(.9); }

/* Paused game: show buttons even more muted than CPU turn */
.cmp-action-menu.is-paused { opacity: 0.4; filter: grayscale(0.8) brightness(0.7); }
.cmp-action-menu.is-paused button { cursor: not-allowed; }
.cmp-action-menu.is-paused button:not([data-action="power-cards"]):not([data-action="show-my-cards"]):hover,
.cmp-action-menu.is-paused button:not([data-action="power-cards"]):not([data-action="show-my-cards"]):active { 
  transform: none; 
  box-shadow: none; 
  filter: none; 
}

/* Flash indicator when CPU performs an action */
.cmp-action-menu button.cpu-flash { animation:cpu-flash-border 1.1s ease; }
@keyframes cpu-flash-border { 0% { box-shadow:0 0 0 0 #fff; } 25% { box-shadow:0 0 8px 3px #fff; } 55% { box-shadow:0 0 10px 4px rgba(255,255,255,.85); } 100% { box-shadow:none; } }

/* Restore borders/shadows for non-black text variants (keep/end) */
/* Hover shadow lift for enabled buttons */
.cmp-action-menu button:not(:disabled):hover { box-shadow:5px 5px 0 #000,0 0 0 2px #222 inset; }
.cmp-action-menu button:not(:disabled):active { box-shadow:2px 2px 0 #000,0 0 0 2px #222 inset; }

/* Invisible backdrop to allow outside-click closing on mobile when menu is open */
@media (max-width: 1024px) {
  .action-menu-backdrop { position: fixed; inset: 0; z-index: 5995; display:none; }
  .action-menu-backdrop[data-show] { display:block; }
}

/* Radial Action Menu - Hidden by default on desktop */
.radial-action-menu {
  display: none !important;
}

/* Show when radial-menu mode is active (user preference) */
body[data-mobile-ui-mode="radial-menu"] .radial-action-menu {
  display: block !important;
}

/* Horizontal Action Menu (Mobile Only) */
@media (max-width: 1024px) {
  /* Radial Action Menu Container */
  .radial-action-menu {
    display: block !important; /* Always show on mobile */
    position: fixed;
    bottom: 2vh;
    right: 2vw;
    width: 50vh; /* Larger area to cover the arc */
    height: 50vh; /* Larger area to cover the arc */
    pointer-events: none; /* Container doesn't block clicks, only buttons do */
    z-index: 10600; /* High z-index: above overlay (10490), mobile player cards (9500), and all game elements */
    background: radial-gradient(circle at bottom right, rgba(0,0,0,0.85) 0%, transparent 70%);
    transition: left 0.3s ease, right 0.3s ease;
  }
  
  /* Left corner variant */
  .radial-action-menu[data-corner="left"] {
    left: 2vw;
    right: auto;
    background: radial-gradient(circle at bottom left, rgba(0,0,0,0.85) 0%, transparent 70%);
  }
  
  /* Buttons in left corner anchor to bottom-left instead of bottom-right */
  .radial-action-menu[data-corner="left"] .radial-action-btn {
    left: 0;
    right: auto;
  }
  
  /* Individual Radial Action Buttons */
  .radial-action-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10vh;
    height: 10vh;
    border-radius: 50%;
    border: 4px solid #000 !important;
    /* No background or backdrop-filter here - let individual buttons set their colors */
    color: #000 !important;
    font-family: 'Bangers', cursive;
    font-size: 2vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2vh; /* Reduced from 0.5vh */
    padding: 0.5vh; /* Reduced padding */
    cursor: pointer;
    pointer-events: auto !important; /* All visible buttons are clickable */
    box-shadow: 0 0.6vh 1.8vh rgba(0,0,0,0.8), 
                0 0 0 2px rgba(255,255,255,0.3) inset !important;
    z-index: 10510; /* All buttons at same level, high above game elements */
    
    /* Animation properties */
    transform: translate(0, 0) scale(0);
    opacity: 0 !important; /* Hidden by default */
    pointer-events: none !important; /* Not clickable when hidden */
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), 
                opacity 0.3s ease,
                width 0.3s ease,
                height 0.3s ease,
                font-size 0.3s ease,
                box-shadow 0.3s ease,
                pointer-events 0s 0.3s; /* Delay disabling pointer-events until after collapse animation */
    will-change: transform, opacity, width, height;
  }
  
  /* Visible button state - when expanded with scale > 0 */
  .radial-action-btn[style*="scale(1)"] {
    pointer-events: auto !important; /* Only clickable when visible (scale 1) */
    opacity: 1 !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), 
                opacity 0.3s ease,
                width 0.3s ease,
                height 0.3s ease,
                font-size 0.3s ease,
                box-shadow 0.3s ease,
                pointer-events 0s; /* Enable pointer-events immediately on expand */
  }
  
  /* Active button state - larger and fully opaque */
  .radial-action-btn.active {
    width: 14vh !important;
    height: 14vh !important;
    font-size: 2.8vh !important;
    opacity: 1 !important;
    pointer-events: auto !important; /* Active button is clickable */
    z-index: 10520 !important; /* Active button on top of other buttons */
    box-shadow: 0 1vh 3vh rgba(0,0,0,0.9), 
                0 0 0 3px rgba(255,255,255,0.5) inset,
                0 0 2vh rgba(255,255,255,0.3) !important;
  }
  
  /* Active button icon */
  .radial-action-btn.active .r-btn-icon {
    font-size: 5.2vh !important;
  }
  
  /* Active button label */
  .radial-action-btn.active .r-btn-label {
    font-size: 2.2vh !important;
  }
  
  /* Dark backdrop behind each button - REMOVED to show button colors clearly */
  .radial-action-btn::before {
    display: none !important; /* Completely disable the pseudo-element */
  }
  
  /* Roll button - Red/Orange */
  .radial-action-btn.r-btn-primary {
    background: linear-gradient(135deg, #e63946 0%, #f77f00 100%) !important;
    color: #fff !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6) !important;
    border: 4px solid #000 !important;
  }
  
  /* Individual button colors - matching desktop version exactly */
  @media (max-width: 1024px) {
    /* ROLL button - Yellow/Gold (matches desktop) */
    #radial-action-menu .radial-action-btn#r-roll-btn,
    .radial-action-menu #r-roll-btn {
      background: linear-gradient(135deg, #ffe066, #ffb400) !important;
      color: #222 !important;
      text-shadow: none !important;
      border: 4px solid #111 !important;
    }
    
    /* KEEP button - Blue (matches desktop) */
    #radial-action-menu .radial-action-btn#r-keep-btn,
    .radial-action-menu #r-keep-btn {
      background: linear-gradient(135deg, #1f6ed4, #084c99) !important;
      color: #fff !important;
      text-shadow: 0 2px 4px rgba(0,0,0,0.6) !important;
      border: 4px solid #052d57 !important;
    }
    
    /* ACCEPT DICE button - Orange (matches desktop) */
    #radial-action-menu .radial-action-btn#r-accept-dice-btn,
    .radial-action-menu #r-accept-dice-btn {
      background: linear-gradient(135deg, #ffb347, #ff7a18) !important;
      color: #fff !important;
      text-shadow: 0 2px 4px rgba(0,0,0,0.6) !important;
      border: 4px solid #b35400 !important;
    }
    
    /* POWER CARDS button - Purple (matches desktop) */
    #radial-action-menu .radial-action-btn#r-power-cards-btn,
    .radial-action-menu #r-power-cards-btn {
      background: linear-gradient(135deg, #2e2540, #1d1729) !important;
      color: #fff !important;
      text-shadow: 0 2px 4px rgba(0,0,0,0.6) !important;
      border: 4px solid #4a3b63 !important;
    }
    
    /* END TURN button - Red (matches desktop) */
    #radial-action-menu .radial-action-btn#r-end-turn-btn,
    .radial-action-menu #r-end-turn-btn {
      background: linear-gradient(135deg, #8b2c2c, #5c1a1a) !important;
      color: #fff !important;
      text-shadow: 0 2px 4px rgba(0,0,0,0.6) !important;
      border: 4px solid #a64545 !important;
    }
  }
  
  /* Button icon */
  .r-btn-icon {
    font-size: 3.8vh;
    line-height: 1;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
  }
  
  /* Button label */
  .r-btn-label {
    font-size: 1.5vh;
    line-height: 1;
    letter-spacing: 0.5px;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(255,255,255,0.5);
  }
  
  /* Hover/Active states */
  .radial-action-btn:hover:not(:disabled) {
    transform: translate(var(--tx, 0), var(--ty, 0)) scale(1.1);
    box-shadow: 0 0.6vh 1.6vh rgba(0,0,0,0.5);
  }
  
  .radial-action-btn:active:not(:disabled) {
    transform: translate(var(--tx, 0), var(--ty, 0)) scale(0.95);
    box-shadow: 0 0.2vh 0.6vh rgba(0,0,0,0.4);
  }
  
  /* Disabled state */
  .radial-action-btn:disabled {
    cursor: not-allowed !important;
    filter: grayscale(70%) brightness(0.7) !important;
    opacity: 1 !important; /* Keep fully opaque even when disabled */
    /* Don't override background - keep the button's color but make it look disabled */
  }
  
  /* Update toggle button to rotate when expanded */
  .action-menu-mobile-btn {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }
  
  /* Pie slice animation - each slice fills individually */
  .action-menu-mobile-btn .pie-slice {
    transition: fill 0.15s ease-in-out;
  }
  
  .horizontal-action-menu {
    position: fixed;
    bottom: 20px; /* Same height as circular buttons */
    right: 80px; /* Start from right edge (will slide from here) */
    height: 50px; /* Same height as dice tray in mobile view */
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #2a2d31 0%, #181a1c 100%);
    border: 3px solid #333;
    border-radius: 6px;
    padding: 0 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    z-index: 9600; /* Above mini player cards */
    
    /* Width calculation: viewport - dice button (50px) - actions button (50px) - left padding (20px) - right padding (20px) - gap between buttons (20px) - menu offset (80px) */
    width: calc(100vw - 50px - 50px - 20px - 20px - 20px - 80px - 16px);
    max-width: 500px;
    
    /* Animation properties */
    transform: translateX(110%);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
    will-change: transform, opacity;
  }
  
  /* Horizontal action buttons */
  .h-action-btn {
    flex: 1 1 auto;
    min-width: 50px;
    height: 38px;
    font-family: 'Bangers', cursive;
    font-size: 12px;
    letter-spacing: 0.5px;
    border: 3px solid #000;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding: 0 6px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  
  .h-btn-primary {
    background: linear-gradient(135deg, #ff6b00 0%, #ff4500 100%);
    color: #fff;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
  }
  
  .h-btn-secondary {
    background: linear-gradient(135deg, #ffcf33 0%, #ffb300 100%);
    color: #fff;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
  }
  
  .h-action-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(0,0,0,0.4);
  }
  
  .h-action-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  }
  
  .h-action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #666 !important;
    color: #999 !important;
  }
  
  /* Settings button - special styling */
  .h-btn-settings {
    background: linear-gradient(135deg, #666 0%, #444 100%) !important;
    min-width: 48px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .h-btn-settings svg {
    display: block;
  }
  
  .h-btn-settings:hover:not(:disabled) {
    background: linear-gradient(135deg, #777 0%, #555 100%) !important;
  }
  
  /* Shortened text for compact buttons */
  .h-btn-text {
    display: inline;
  }
}

/* ==========================================
   UNIFIED RESPONSIVE ACTION MENU STYLES
   Single component transforms between desktop/mobile layouts
   ========================================== */

/* Desktop Layout (Default) - Vertical Panel */
@media (min-width: 761px) and (pointer: fine) {
  /* Ensure desktop layout and visibility - position is set by anchorActionMenu() */
  .cmp-action-menu {
    position: fixed !important;
    width: 260px !important;
    height: auto !important;
    background: var(--action-menu-bg) !important;
    border: var(--action-menu-border) !important;
    box-shadow: 4px 4px 0 #000 !important;
    padding: 6px 20px 8px !important;
    z-index: 9600 !important;
    display: flex !important;
    flex-direction: column !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Hide mobile toggle on desktop */
  .cmp-action-menu .action-menu-toggle {
    display: none !important;
  }
  
  /* Ensure header doesn't block button clicks */
  .cmp-action-menu .am-header-row {
    pointer-events: none !important;
  }
  
  /* Desktop vertical panel layout */
  .cmp-action-menu .action-menu-buttons,
  .cmp-action-menu .am-content {
    position: static !important; /* Not absolute like mobile */
    display: flex !important;
    flex-direction: column !important;
    gap: var(--action-menu-gap) !important;
    opacity: 1 !important; /* Ensure visible */
    max-height: none !important; /* No height limit */
    overflow: visible !important;
  }
  
  /* CRITICAL: On desktop, ignore collapsed state - always show content */
  .cmp-action-menu .am-content[data-collapsed="true"],
  .cmp-action-menu .am-content[data-collapsed="false"] {
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    display: flex !important;
  }
  
  /* Show labels on desktop */
  .cmp-action-menu .action-btn .action-label {
    display: inline;
  }
  
  /* Desktop button styling - consistent width and padding */
  /* CRITICAL: Override mobile radial styles that hide buttons */
  .cmp-action-menu button,
  .cmp-action-menu .action-btn,
  .cmp-action-menu button.action-btn {
    position: static !important; /* Not absolute like mobile radial */
    opacity: 1 !important; /* Fully visible */
    pointer-events: auto !important; /* Clickable - must override label's pointer-events:none */
    transform: none !important; /* No transform */
    width: 100% !important; /* Full width */
    height: auto !important; /* Auto height */
    border-radius: 0 !important; /* Sharp corners, not circular */
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: center; /* CENTER text - not left aligned */
    gap: 10px;
    padding: 10px 20px; /* Increased padding for better spacing */
    white-space: nowrap; /* Prevent text wrapping */
    min-width: var(--action-menu-button-width);
    box-sizing: border-box;
  }
  
  /* Ensure button labels are visible on desktop */
  .cmp-action-menu button .action-label,
  .cmp-action-menu .action-btn .action-label {
    display: inline !important;
    pointer-events: none !important; /* Let clicks pass through to button */
  }
  
  .cmp-action-menu .action-btn .action-icon {
    font-size: 24px;
    flex-shrink: 0; /* Prevent icon from shrinking */
    width: 24px; /* Fixed icon width for alignment */
    text-align: center;
    margin-right: 12px; /* Increased spacing between icon and text */
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; /* Ensure emojis render */
    display: inline-flex; /* Ensure icon is visible */
    align-items: center;
    justify-content: center;
    pointer-events: none !important; /* Let clicks pass through to button */
  }
  
  /* Power cards button specific desktop styling */
  .cmp-action-menu .power-cards-btn .action-icon {
    display: none; /* Hide SVG icon on desktop, keep arrow */
  }
  
  .cmp-action-menu .power-cards-btn .arrow-left {
    position: static; /* Not absolute on desktop */
    display: inline !important; /* Show arrow inline */
    margin-right: 8px; /* Add spacing between arrow and text */
  }
  
  /* Power cards menu container consistent width */
  .cmp-action-menu .power-cards-menu-container {
    width: var(--action-menu-button-width);
  }
}

/* Mobile Layout (Radial Transform) - Only apply to actual touch devices */
@media (pointer: coarse) and (max-width: 1024px) {
  /* Override any desktop styles for mobile/tablet touch devices */
  .cmp-action-menu {
    display: flex !important;
    flex-direction: column;
    position: fixed !important;
    bottom: 100px !important;
    right: 20px !important;
    top: auto !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    z-index: 9999 !important;
  }
  
  /* Hide desktop header on mobile */
  .cmp-action-menu .am-header-row {
    display: none !important;
  }
  
  /* Show mobile hamburger toggle */
  .cmp-action-menu .action-menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--action-menu-bg);
    border: 3px solid #000;
    box-shadow: 4px 4px 0 #000;
    font-size: 32px;
    color: #fff;
    cursor: pointer;
    transition: transform 0.3s ease;
    z-index: 10;
    position: relative;
  }
  
  .cmp-action-menu.expanded .action-menu-toggle {
    transform: rotate(90deg);
  }
  
  /* Button container positioning */
  .cmp-action-menu .action-menu-buttons {
    position: absolute;
    bottom: 0;
    right: 0;
    display: block;
  }
  
  /* Radial button styling */
  .cmp-action-menu .action-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--action-menu-bg);
    border: 3px solid #000;
    box-shadow: 3px 3px 0 #000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transform: translate(0, 0) scale(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 9;
  }
  
  /* Expanded state: show buttons in radial arc */
  .cmp-action-menu.expanded .action-btn {
    opacity: 1;
    pointer-events: auto;
  }
  
  /* Radial positioning - 90° arc, 100px radius from center */
  /* Buttons arranged from 180° (left) to 270° (up) - quarter circle */
  .cmp-action-menu.expanded .action-btn[data-index="0"] {
    transform: translate(-100px, 0) scale(1);
    transition-delay: 0ms;
  }
  
  .cmp-action-menu.expanded .action-btn[data-index="1"] {
    transform: translate(-92px, -38px) scale(1);
    transition-delay: 50ms;
  }
  
  .cmp-action-menu.expanded .action-btn[data-index="2"] {
    transform: translate(-71px, -71px) scale(1);
    transition-delay: 100ms;
  }
  
  .cmp-action-menu.expanded .action-btn[data-index="3"] {
    transform: translate(-38px, -92px) scale(1);
    transition-delay: 150ms;
  }
  
  .cmp-action-menu.expanded .action-btn[data-index="4"] {
    transform: translate(0, -100px) scale(1);
    transition-delay: 200ms;
  }
  
  /* Hide labels on mobile (icon-only) */
  .cmp-action-menu .action-btn .action-label,
  .cmp-action-menu .action-btn .btn-text {
    display: none !important;
  }
  
  /* Show icons on mobile */
  .cmp-action-menu .action-btn .action-icon {
    display: flex;
    font-size: 28px;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; /* Ensure emojis render */
  }
  
  /* Hide power cards submenu on mobile */
  .cmp-action-menu .power-cards-submenu {
    display: none !important;
  }
  
  /* Hide power cards arrow on mobile */
  .cmp-action-menu .arrow-left {
    display: none !important;
  }
  
  /* Power cards container adjustments */
  .cmp-action-menu .power-cards-menu-container {
    position: static;
    width: auto;
    height: auto;
  }
}

/* Glow pulse animation for reactive cards button */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(255, 207, 51, 0.6),
                0 0 16px rgba(255, 207, 51, 0.4),
                0 0 24px rgba(255, 207, 51, 0.2),
                inset 0 0 8px rgba(255, 207, 51, 0.3);
  }
  50% {
    box-shadow: 0 0 15px rgba(255, 207, 51, 0.9),
                0 0 30px rgba(255, 207, 51, 0.6),
                0 0 45px rgba(255, 207, 51, 0.3),
                inset 0 0 12px rgba(255, 207, 51, 0.5);
  }
}

.glow-pulse {
  animation: glowPulse 1.5s ease-in-out infinite;
  filter: brightness(1.2);
}