/* Base Reset & Variables */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg: #111;
  --felt: #1a4a2e;
  --felt-dark: #0f3320;
  --gold: #c9a227;
  --gold-dim: #8a7020;
  --text: #fff;
  --text-dim: #888;
  --success: #4a4;
  --fail: #666;
  --danger: #a33;
  --purple: #a7c;
  --border: #333;
  --card-bg: rgba(0,0,0,0.3);
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  /* Prevent double-tap zoom on mobile */
  touch-action: manipulation;
}

#app {
  height: 100%;
  position: relative;
}

/* Screens */
.screen {
  display: none;
  flex-direction: column;
  height: 100%;
  background: linear-gradient(180deg, var(--felt-dark) 0%, var(--felt) 100%);
  overflow: hidden;
}

.screen:not(.active) {
  visibility: hidden;
  position: absolute;
  pointer-events: none;
}

.screen.active {
  display: flex;
}

/* Loading Screen */
#screen-loading {
  justify-content: center;
  align-items: center;
  background: var(--bg);
}

.loading-content {
  text-align: center;
  padding: 20px;
}

.loading-dice {
  margin-bottom: 24px;
  color: var(--gold);
  animation: loading-pulse 1.5s ease-in-out infinite;
}

.loading-dice svg {
  filter: drop-shadow(0 0 10px var(--gold));
}

@keyframes loading-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

.loading-text {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Join Game Link */
.join-game-link {
  display: block;
  margin-top: 30px;
  padding: 12px 24px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  transition: color 0.2s;
}

.join-game-link:hover {
  color: var(--gold);
}

/* Screen Header */
.screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.back-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 14px;
  cursor: pointer;
  padding: 5px 0;
}

.back-btn:hover {
  color: var(--text);
}

.game-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-dim);
}

.settings-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 18px;
  cursor: pointer;
}

/* Roll Area */
.roll-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 20px;
  padding-bottom: 10vh;
  overflow: visible;
  transition: opacity 0.3s ease;

  /* Subtle surface effect - feels like sitting on material */
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.03) 0%, transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.1) 0%, transparent 20%);
  border-radius: 8px;
  margin: 10px;
}

.roll-area.rolling {
  opacity: 0.2;
  pointer-events: none;
}

/* Wrapper for all roll UI content to keep it together */
.roll-area > * {
  flex-shrink: 0;
}

/* Pre-roll UI */
.preroll-ui {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 300px;
}

.preroll-ui.hidden {
  display: none;
}

/* Dice Display */
.dice-display {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 10px;
}

/* Die Wireframes */
.die-wireframe {
  width: 80px;
  height: 80px;
  position: relative;
}

.die-wireframe::before {
  content: '';
  position: absolute;
  inset: 0;
}

.die-wireframe.d20::before {
  clip-path: polygon(50% 0%, 100% 75%, 0% 75%);
  border: 2px solid var(--text-dim);
  background: transparent;
}

.die-wireframe.d20 {
  background: linear-gradient(to bottom right, transparent 49%, var(--text-dim) 49%, var(--text-dim) 51%, transparent 51%);
}

.die-wireframe.d100 {
  border: 2px solid var(--text-dim);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.die-wireframe.d100::after {
  content: '100';
  font-size: 14px;
  color: var(--text-dim);
}

.die-wireframe.d10 {
  border: 2px solid var(--text-dim);
  clip-path: polygon(50% 0%, 100% 40%, 100% 60%, 50% 100%, 0% 60%, 0% 40%);
}

.die-wireframe.d10.chance {
  border-color: var(--danger);
}

/* Dice Pool Display */
.dice-pool-display {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 280px;
}

.dice-pool-display .pool-die {
  width: 36px;
  height: 36px;
  border: 1px solid var(--text-dim);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-dim);
}

.dice-pool-display.wod .pool-die {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  border-radius: 0;
}

/* Modifier Row */
.modifier-row, .skill-row, .target-row, .bonus-row, .explode-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.modifier-row label, .skill-row label, .target-row label, .bonus-row label, .explode-row label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}

.modifier-input, .skill-input, .target-input {
  width: 80px;
  padding: 10px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 18px;
  text-align: center;
  font-family: inherit;
}

.modifier-input:focus, .skill-input:focus, .target-input:focus {
  outline: none;
  border-color: var(--gold);
}

/* Toggle Group */
.toggle-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.toggle-buttons {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.toggle-buttons button,
.toggle-group button {
  background: transparent;
  border: none;
  padding: 10px 16px;
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.toggle-buttons button:not(:last-child),
.toggle-group button:not(:last-child) {
  border-right: 1px solid var(--border);
}

.toggle-buttons button.active,
.toggle-group button.active {
  background: var(--gold);
  color: var(--bg);
}

.toggle-buttons button:hover:not(.active),
.toggle-group button:hover:not(.active) {
  background: rgba(255,255,255,0.1);
}

/* Quantity Stepper */
.qty-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.qty-stepper button {
  background: transparent;
  border: none;
  width: 44px;
  height: 44px;
  color: var(--text);
  font-size: 20px;
  cursor: pointer;
  transition: background 0.2s;
}

.qty-stepper button:hover {
  background: rgba(255,255,255,0.1);
}

.qty-stepper .qty-value {
  min-width: 50px;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 8px 0;
}

.qty-stepper.large .qty-value {
  font-size: 32px;
  min-width: 70px;
}

.qty-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin-top: -10px;
}

/* Dice Picker */
.dice-picker, .dice-type-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.dice-picker button, .dice-type-picker button {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
  color: var(--text-dim);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.dice-picker button:hover, .dice-type-picker button:hover {
  border-color: var(--text);
  color: var(--text);
}

.dice-picker button.selected, .dice-type-picker button.selected {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(201, 162, 39, 0.15);
}

/* Notation Preview */
.notation-preview {
  font-size: 18px;
  color: var(--text-dim);
  text-align: center;
}

/* Dynamic Controls (data-driven game screen) */
.dynamic-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 420px; /* 30% wider on desktop */
  margin-bottom: 16px;
}

.controls-panel {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  width: 100%;
}

.control {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.control-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.number-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.number-input {
  width: 80px;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 18px;
  text-align: center;
  font-family: inherit;
}

.number-input:focus {
  outline: none;
  border-color: var(--gold);
}

.input-suffix {
  position: absolute;
  right: 8px;
  color: var(--text-dim);
  font-size: 14px;
  pointer-events: none;
}

.toggle-buttons {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.toggle-btn {
  background: transparent;
  border: none;
  padding: 10px 16px;
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.toggle-btn:not(:last-child) {
  border-right: 1px solid var(--border);
}

.toggle-btn.active {
  background: var(--gold);
  color: var(--bg);
}

.toggle-btn:hover:not(.active):not(.disabled) {
  background: rgba(255,255,255,0.1);
}

.toggle-btn.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  color: var(--text-dim);
}

.stepper-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.stepper {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.stepper-btn {
  background: transparent;
  border: none;
  width: 44px;
  height: 44px;
  color: var(--text);
  font-size: 20px;
  cursor: pointer;
  transition: background 0.2s;
}

.stepper-btn:hover {
  background: rgba(255,255,255,0.1);
}

.stepper-value {
  min-width: 50px;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 8px 0;
}

.dice-picker-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.dice-picker .dice-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.2s;
}

.dice-picker .dice-btn:hover {
  border-color: var(--text);
  color: var(--text);
}

.dice-picker .dice-btn.selected {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(201, 162, 39, 0.15);
}

.dice-picker .dice-icon {
  width: 32px;
  height: 32px;
}

.dice-picker .dice-label {
  font-size: 11px;
}

/* Control Header (faded label above controls) */
.control-header {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 8px;
  text-align: center;
}

/* Dice Row - visual preview of selected dice in grid pattern */
.dice-row-container {
  width: 100%;
  max-width: 520px;
  min-height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
}

.dice-row {
  display: grid;
  grid-template-columns: repeat(5, 40px);
  gap: 8px;
  padding: 8px;
  justify-content: center;
}

.dice-row-die {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  transition: opacity 0.3s ease;
}

.dice-row-die.faded {
  opacity: 0.3;
}

/* Roll Row - dice config + roll button side by side */
.roll-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 520px;
  margin-bottom: 16px;
}

/* Dice Configurator - +/- controls for each die type */
.dice-config-container {
  flex: 1;
}

.dice-configurator {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 8px;
}

/* Center the last dice row (d20) when it's alone in its row */
.dice-config-row:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
}

.dice-config-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 4px;
}

.dice-config-icon {
  width: 20px;
  height: 20px;
  color: var(--text-dim);
  opacity: 0.6;
}

.dice-config-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-dim);
  opacity: 0.6;
  min-width: 28px;
}

.dice-config-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dice-config-btn:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(201, 162, 39, 0.1);
}

.dice-config-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.dice-config-count {
  min-width: 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
}

.dice-config-count.has-dice {
  color: var(--gold);
}

/* Presets Bar - rows of 3 */
.presets-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 520px; /* 30% wider on desktop */
  margin-top: 16px;
}

/* Presets dropdown - hidden on desktop, shown on mobile */
.presets-dropdown {
  display: none;
  margin-top: 16px;
}

/* Preset Button - horizontal layout with dice icons */
.preset-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--text-dim);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

.preset-btn:hover {
  border-color: var(--text);
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

.preset-btn.selected {
  border-color: var(--gold);
  background: rgba(201, 162, 39, 0.15);
  color: var(--text);
}

.preset-btn.selected .preset-notation {
  color: var(--gold);
}

/* Preset dice section - left side with icons and notation */
.preset-dice-section {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.preset-dice-group {
  position: absolute;
  inset: 0;
  opacity: 0.5;
}

.preset-notation {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* Preset label section - middle */
.preset-label-section {
  flex: 1;
  font-size: 10px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Preset icon section - right side context icon */
.preset-icon-section {
  flex-shrink: 0;
  opacity: 0.4;
  display: flex;
  align-items: center;
}

.preset-icon-section .context-icon {
  width: 16px;
  height: 16px;
}

.preset-btn:hover .preset-icon-section {
  opacity: 0.7;
}

/* Dice icons styling */
.dice-icon {
  color: currentColor;
}

.dice-group .dice-icon {
  color: var(--text-dim);
}

/* Roll Button - Polished brushed aluminum */
.roll-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  min-height: 120px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: all 0.12s ease-out;
  flex-shrink: 0;
  font-size: 0;
  color: transparent;

  /* Outer bezel - polished aluminum ring */
  background:
    /* Top highlight arc */
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,255,255,0.25) 0%, transparent 50%),
    /* Brushed metal texture - horizontal micro-lines */
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.03) 0px,
      rgba(0,0,0,0.02) 1px,
      rgba(255,255,255,0.02) 2px,
      rgba(0,0,0,0.03) 3px
    ),
    /* Base metal gradient */
    linear-gradient(180deg,
      #5a5a5a 0%,
      #4a4a4a 15%,
      #3d3d3d 50%,
      #4a4a4a 85%,
      #5a5a5a 100%
    );
  box-shadow:
    /* Inner well for button to sit in */
    inset 0 0 0 4px rgba(0,0,0,0.15),
    inset 0 2px 6px rgba(0,0,0,0.3);
}

/* Inner button surface - the pressable part */
.roll-btn::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border-radius: 50%;
  transition: all 0.12s ease-out;

  background:
    /* Subtle top shine */
    radial-gradient(ellipse 70% 40% at 50% 15%, rgba(255,255,255,0.12) 0%, transparent 50%),
    /* Brushed texture */
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.02) 0px,
      rgba(0,0,0,0.015) 1px,
      rgba(255,255,255,0.015) 2px
    ),
    /* Metal base */
    linear-gradient(180deg,
      #484848 0%,
      #3a3a3a 30%,
      #333333 70%,
      #3a3a3a 100%
    );
  box-shadow:
    /* Raised effect - light on top */
    inset 0 2px 3px rgba(255,255,255,0.08),
    /* Shadow on bottom */
    inset 0 -2px 4px rgba(0,0,0,0.2);
}

/* Text styling */
.roll-btn::after {
  content: 'Roll';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  transition: all 0.12s ease-out;
  /* Light blue text */
  color: #8ec8e8;
  text-shadow:
    0 -1px 1px rgba(0,0,0,0.6),
    0 1px 1px rgba(255,255,255,0.08);
}

.roll-btn:hover {
  transform: scale(1.03);
}

.roll-btn:hover::before {
  background:
    radial-gradient(ellipse 70% 40% at 50% 15%, rgba(255,255,255,0.15) 0%, transparent 50%),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.025) 0px,
      rgba(0,0,0,0.015) 1px,
      rgba(255,255,255,0.015) 2px
    ),
    linear-gradient(180deg,
      #505050 0%,
      #404040 30%,
      #383838 70%,
      #404040 100%
    );
}

.roll-btn:hover::after {
  color: #a8daf5;
  text-shadow:
    0 -1px 1px rgba(0,0,0,0.6),
    0 1px 1px rgba(255,255,255,0.1),
    0 0 8px rgba(126, 184, 218, 0.3);
}

/* Active/pressed state - button depresses into the bezel */
.roll-btn:active {
  transform: scale(0.98);
}

.roll-btn:active::before {
  /* Button pushed down into the well */
  top: 12px;
  left: 12px;
  right: 12px;
  bottom: 8px;

  background:
    /* Reduced shine when pressed */
    radial-gradient(ellipse 70% 40% at 50% 20%, rgba(255,255,255,0.05) 0%, transparent 50%),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.015) 0px,
      rgba(0,0,0,0.02) 1px,
      rgba(255,255,255,0.01) 2px
    ),
    linear-gradient(180deg,
      #383838 0%,
      #303030 30%,
      #2a2a2a 70%,
      #303030 100%
    );
  box-shadow:
    /* Deep inset - pressed in */
    inset 0 4px 8px rgba(0,0,0,0.5),
    inset 0 2px 4px rgba(0,0,0,0.3),
    /* No outer shadow - it's pressed down */
    0 0 0 rgba(0,0,0,0);
}

/* Glowing text on press */
.roll-btn:active::after {
  color: #b8e8ff;
  text-shadow:
    0 0 4px rgba(126, 200, 255, 0.8),
    0 0 8px rgba(126, 200, 255, 0.6),
    0 0 16px rgba(126, 200, 255, 0.4),
    0 0 24px rgba(126, 200, 255, 0.2);
}

/* Legacy active::before continued below */
.roll-btn.pressing::before {
  box-shadow:
    inset 0 6px 12px rgba(0,0,0,0.5),
    inset 0 -1px 2px rgba(255,255,255,0.02);
}

.roll-btn.danger::after {
  color: var(--danger);
}

/* Disabled state - no dice selected */
.roll-btn.disabled {
  cursor: not-allowed;
  box-shadow:
    /* Red glow on outer ring */
    0 0 12px rgba(220, 60, 60, 0.4),
    0 0 24px rgba(220, 60, 60, 0.2),
    /* Inner well shadow */
    inset 0 0 0 4px rgba(0,0,0,0.2),
    inset 0 2px 6px rgba(0,0,0,0.4);
}

.roll-btn.disabled::before {
  /* Darker, more muted inner surface */
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.01) 0px,
      rgba(0,0,0,0.02) 1px,
      rgba(255,255,255,0.01) 2px
    ),
    linear-gradient(180deg,
      #363636 0%,
      #2a2a2a 30%,
      #242424 70%,
      #2a2a2a 100%
    );
  box-shadow:
    inset 0 4px 8px rgba(0,0,0,0.4),
    inset 0 -2px 4px rgba(0,0,0,0.2);
}

.roll-btn.disabled::after {
  /* Grey/dark text */
  color: #4a4a4a;
  text-shadow: none;
}

.roll-btn.disabled:hover {
  transform: none;
}

.roll-btn.disabled:active {
  transform: none;
}

.roll-btn.disabled:active::before,
.roll-btn.disabled:active::after {
  /* No change on click when disabled */
}

/* Result UI */
.result-ui {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.result-ui.hidden {
  display: none;
}

.result-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}

.result-header {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-dim);
  margin-top: 10px;
}

.result-badge {
  padding: 6px 16px;
  border: 1px solid var(--success);
  border-radius: 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--success);
}

.result-badge.hidden {
  display: none;
}

.result-badge.crit {
  border-color: var(--gold);
  color: var(--gold);
  animation: pulse 1s ease-in-out infinite;
}

.result-badge.fumble {
  border-color: var(--danger);
  color: var(--danger);
}

.result-badge.extreme {
  border-color: var(--purple);
  color: var(--purple);
}

.result-badge.hard {
  border-color: #7af;
  color: #7af;
}

.result-badge.exceptional {
  border-color: var(--gold);
  color: var(--gold);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.result-total {
  font-family: 'Cinzel', serif;
  font-size: 72px;
  font-style: italic;
  color: var(--gold);
  line-height: 1;
}

.result-breakdown {
  font-size: 14px;
  color: var(--text-dim);
}

.result-subtitle {
  font-size: 13px;
  color: var(--text-dim);
}

.result-thresholds {
  font-size: 12px;
  color: var(--text-dim);
}

/* Dice Results Grid */
.dice-results {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 15px 0;
}

.dice-results .die-result {
  width: 44px;
  height: 44px;
  border: 2px solid var(--gold);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  background: var(--card-bg);
}

.dice-results .die-result.dropped {
  border-style: dashed;
  border-color: var(--text-dim);
  color: var(--text-dim);
}

.dice-results .die-result.success {
  border-color: var(--gold);
  color: var(--gold);
}

.dice-results .die-result.fail {
  border-color: var(--fail);
  color: var(--fail);
}

.dice-results .die-result.crit {
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 10px var(--gold);
}

.dice-results .die-result.fumble {
  border-color: var(--danger);
  color: var(--danger);
}

.dice-results .die-result.reroll-target {
  border-color: var(--gold);
  animation: pulse 0.5s ease-in-out infinite;
}

.dice-results .die-result.exploded {
  position: relative;
}

.dice-results .die-result.exploded::after {
  content: '+';
  position: absolute;
  top: -8px;
  right: -8px;
  width: 16px;
  height: 16px;
  background: var(--gold);
  border-radius: 50%;
  font-size: 12px;
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dice-results.wh-grid, .dice-results.wod-grid {
  max-width: 280px;
}

/* Reroll Actions */
.reroll-actions {
  display: flex;
  gap: 10px;
  margin: 10px 0;
}

.action-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 20px;
  color: var(--text-dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.2s;
}

.action-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* Result Actions */
.result-actions {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
}

.roll-again-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--text);
  color: var(--text);
  font-size: 24px;
  cursor: pointer;
  transition: all 0.2s;
}

.roll-again-btn:hover {
  background: rgba(255,255,255,0.1);
  transform: scale(1.05);
}

/* Explode Note */
.explode-note {
  font-size: 12px;
  color: var(--text-dim);
}

.explode-note.hidden {
  display: none;
}

/* Chance Die Warning */
.chance-warning {
  text-align: center;
}

.chance-warning p {
  font-size: 13px;
  color: var(--text-dim);
  margin: 5px 0;
}

.chance-warning .danger {
  color: var(--danger);
}

/* Screen Footer - now inline below roll button */
.screen-footer {
  display: none; /* Hide the fixed footer */
}

/* Mode buttons inline */
.mode-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.mode-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 20px;
  color: var(--text-dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.2s;
}

.mode-btn:hover {
  border-color: var(--text);
  color: var(--text);
}

.mode-btn.active {
  border-color: var(--gold);
  color: var(--gold);
}

/* D6 Style Toggle */
.d6-style-toggle {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.d6-style-toggle .style-btn {
  background: transparent;
  border: none;
  padding: 6px 12px;
  color: var(--text-dim);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
}

.d6-style-toggle .style-btn:first-child {
  border-right: 1px solid var(--border);
}

.d6-style-toggle .style-btn.active {
  background: var(--gold);
  color: var(--bg);
}

/* Notation Input */
.notation-input-row {
  width: 100%;
}

.notation-input {
  width: 100%;
  padding: 15px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 24px;
  text-align: center;
  font-family: monospace;
}

.notation-input:focus {
  outline: none;
  border-color: var(--gold);
}

.notation-help {
  text-align: center;
}

.notation-help p {
  font-size: 12px;
  color: var(--text-dim);
}

/* Simple Dice Display */
.simple-dice-display {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.simple-dice-display .iso-die {
  width: 70px;
  height: 80px;
}

.simple-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

/* Canvas */
#dice-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
}

#dice-canvas.rolling {
  pointer-events: auto;
}

/* Utilities */
.hidden {
  display: none !important;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===============================
   MULTIPLAYER UI
   =============================== */

/* Room Code Display - bottom right */
.room-code-display {
  position: fixed;
  bottom: 15px;
  right: 15px;
  z-index: 200;
  text-align: right;
  background: rgba(0, 0, 0, 0.85);
  padding: 12px 16px;
  border-radius: 8px;
  border: 2px solid var(--gold);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.room-code-display .code {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 2rem;
  color: var(--gold);
  letter-spacing: 0.35em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  font-weight: 700;
}

.room-code-display .url {
  display: block;
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.02em;
  margin-top: 6px;
  text-decoration: none;
  transition: color 0.2s;
}

.room-code-display .url:hover {
  color: var(--gold);
  text-decoration: underline;
}

/* Player List - bottom center */
.player-list {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
}

.player-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  border: 3px solid transparent;
  background-clip: padding-box;
  position: relative;
}

.player-avatar:hover {
  transform: scale(1.1);
}

.player-avatar.active {
  border-color: var(--gold);
  box-shadow: 0 0 15px rgba(201, 162, 39, 0.5);
  animation: player-glow 2s ease-in-out infinite;
}

@keyframes player-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(201, 162, 39, 0.4); }
  50% { box-shadow: 0 0 20px rgba(201, 162, 39, 0.7); }
}

.player-avatar .name-tooltip {
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  color: var(--text-dim);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.player-avatar:hover .name-tooltip {
  opacity: 1;
}

.player-avatar.active .name-tooltip {
  color: var(--gold);
  opacity: 1;
}

/* No players message */
.player-list-empty {
  font-size: 0.75rem;
  color: var(--text-dim);
  opacity: 0.6;
}

/* Score Overlay - positioned in the dice rolling area, above UI */
.score-overlay {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 150;
  text-align: center;
  pointer-events: none;
  background: rgba(0, 0, 0, 0);
  padding: 15px 25px;
  border-radius: 12px;
  min-width: 120px;
  opacity: 0;
  transition: opacity 0.3s, background 0.3s;
  display: none;
}

.score-overlay.visible {
  display: block;
  opacity: 1;
}

.score-overlay.has-result {
  background: rgba(0, 0, 0, 0.7);
}

.score-dice {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 10px;
}

.score-dice:empty {
  display: none;
  margin-bottom: 0;
}

.score-die {
  width: 44px;
  height: 44px;
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid var(--gold);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gold);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s, transform 0.3s;
}

.score-die.visible {
  opacity: 1;
  transform: scale(1);
}

.score-die.dropped {
  border-style: dashed;
  border-color: var(--text-dim);
  color: var(--text-dim);
}

.score-total {
  font-family: 'Cinzel', serif;
  font-size: 3rem;
  color: var(--gold);
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s, transform 0.4s;
}

.score-total.visible {
  opacity: 1;
  transform: translateY(0);
}

.score-breakdown {
  font-size: 1rem;
  color: var(--text-dim);
  margin-top: 5px;
  opacity: 0;
  transition: opacity 0.4s;
}

.score-breakdown.visible {
  opacity: 1;
}

.score-breakdown .dropped {
  text-decoration: line-through;
  opacity: 0.5;
}

.score-breakdown .modifier-highlight {
  color: #4fc3f7;
  font-weight: 600;
}

.score-mode {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 8px;
  opacity: 0;
  transition: opacity 0.4s;
}

.score-mode.visible {
  opacity: 0.7;
}

/* Mobile buttons - hidden on desktop */
.mobile-roll-btn,
.mobile-edit-btn,
.hero-roll-btn {
  display: none;
}

/* Roll button highlight when player taps */
.roll-btn.remote-highlight {
  animation: remote-pulse 0.5s ease-out;
  border-color: var(--gold);
  color: var(--gold);
}

@keyframes remote-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.7); }
  50% { transform: scale(1.05); box-shadow: 0 0 20px 10px rgba(201, 162, 39, 0.3); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(201, 162, 39, 0); }
}

/* Roll button wrapper for turn indicator */
.roll-btn-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.turn-label {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0;
  transition: opacity 0.3s;
}

.turn-label.visible {
  opacity: 1;
}

.turn-label .player-name {
  color: var(--gold);
  font-weight: 600;
}

/* Host player entry in player list */
.player-avatar.host {
  border: 2px solid var(--gold);
  position: relative;
}

.player-avatar.host::after {
  content: '★';
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 0.6rem;
  color: var(--gold);
}

/* Turn indicator for host screen */
.turn-indicator-host {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 199;
  background: rgba(0, 0, 0, 0.8);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.8rem;
  color: var(--text);
  text-align: center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.turn-indicator-host .player-name {
  color: var(--gold);
  font-weight: 600;
}

/* Modal Overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(5px);
}

.modal-overlay.hidden {
  display: none;
}

.modal-content {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 16px;
  width: 90%;
  max-width: 320px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-header h3 {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  color: var(--gold);
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.modal-close:hover {
  color: var(--text);
}

.modal-body {
  padding: 20px;
}

.config-section {
  margin-bottom: 20px;
}

.config-section label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.color-picker {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.color-swatch {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.2s, border-color 0.2s;
}

.color-swatch:hover {
  transform: scale(1.1);
}

.color-swatch.selected {
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(201, 162, 39, 0.5);
}

.config-preview {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.config-preview canvas {
  width: 100%;
  height: 100%;
  border-radius: 12px;
}

/* Responsive */
@media (max-width: 360px) {
  .game-grid {
    gap: 10px;
  }

  .game-btn {
    padding: 15px 10px;
  }

  .game-icon {
    width: 40px;
    height: 40px;
  }

  .result-total {
    font-size: 56px;
  }

  .roll-btn {
    width: 110px;
    height: 110px;
    min-height: 110px;
  }

  .room-code-display {
    padding: 8px 12px;
  }

  .room-code-display .code {
    font-size: 1.4rem;
    letter-spacing: 0.25em;
  }

  .player-avatar {
    width: 40px;
    height: 40px;
    font-size: 0.875rem;
  }

  .score-total {
    font-size: 2.5rem;
  }
}

/* Timeout Notification */
.timeout-notification {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.9);
  border: 2px solid var(--gold);
  border-radius: 16px;
  padding: 24px 32px;
  text-align: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.timeout-message {
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
  color: var(--gold);
  margin-bottom: 20px;
}

.timeout-roll-btn,
.timeout-wait-btn {
  padding: 12px 24px;
  margin: 0 8px;
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.timeout-roll-btn {
  background: linear-gradient(135deg, var(--gold) 0%, #a88820 100%);
  color: #1a1a2e;
  font-weight: 600;
}

.timeout-roll-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(201, 162, 39, 0.4);
}

.timeout-wait-btn {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.timeout-wait-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Network Status (Host) */
.network-indicator {
  position: fixed;
  top: 8px;
  right: 8px;
  padding: 6px 12px;
  font-size: 0.75rem;
  border-radius: 4px;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.3s;
}

.network-indicator.visible {
  opacity: 1;
}

.network-indicator.warning {
  background: #f39c12;
  color: #1a1a2e;
}

.network-indicator.error {
  background: #e74c3c;
  color: #fff;
}

/* ===============================
   MOBILE UI OVERHAUL
   =============================== */
@media (max-width: 768px) {
  /* Score overlay - always visible at top, fixed height */
  .score-overlay {
    top: 60px;
    left: 0;
    right: 0;
    transform: none;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 16px;
    height: 100px; /* Increased to allow more space for breakdown text */
    min-width: auto;
    opacity: 1 !important;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 0;
    pointer-events: auto; /* Enable clicks on mobile */
    overflow: hidden;
  }

  .mobile-roll-btn,
  .mobile-edit-btn {
    pointer-events: auto; /* Ensure buttons are clickable */
  }

  .score-overlay.visible {
    opacity: 1;
  }

  /* Score area layout on mobile - edit button | score | roll button */
  .score-dice {
    display: none; /* Hide individual dice display on mobile */
  }

  .score-total {
    font-size: 2.5rem;
    opacity: 1;
    transform: none;
    min-width: 60px;
    text-align: center;
  }

  .score-total.visible {
    opacity: 1;
    transform: none;
  }

  .score-breakdown {
    font-size: 0.8rem;
    margin-top: 2px;
    opacity: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal; /* Allow wrapping for long tallies */
    max-height: 2.4em; /* Limit to ~2 lines */
    line-height: 1.2;
    text-align: center;
  }

  .score-breakdown.visible {
    opacity: 1;
  }

  .score-mode {
    display: none; /* Hide mode label on mobile to save space */
  }

  /* Score content wrapper for flexbox layout */
  .score-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    max-height: 100%;
  }

  /* Mobile roll button - compact, in score bar - hidden until post-roll */
  .mobile-roll-btn {
    display: none; /* Hidden by default, shown as roll-again after first roll */
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    min-height: 64px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
    transition: all 0.12s ease-out;
    background:
      radial-gradient(ellipse 70% 40% at 50% 15%, rgba(255,255,255,0.12) 0%, transparent 50%),
      repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0px, rgba(0,0,0,0.015) 1px, rgba(255,255,255,0.015) 2px),
      linear-gradient(180deg, #484848 0%, #3a3a3a 30%, #333333 70%, #3a3a3a 100%);
    box-shadow:
      inset 0 2px 3px rgba(255,255,255,0.08),
      inset 0 -2px 4px rgba(0,0,0,0.2);
    color: #8ec8e8;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.6), 0 1px 1px rgba(255,255,255,0.08);
  }

  .mobile-roll-btn:active {
    transform: scale(0.95);
    background:
      radial-gradient(ellipse 70% 40% at 50% 20%, rgba(255,255,255,0.05) 0%, transparent 50%),
      repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0px, rgba(0,0,0,0.02) 1px, rgba(255,255,255,0.01) 2px),
      linear-gradient(180deg, #383838 0%, #303030 30%, #2a2a2a 70%, #303030 100%);
    color: #b8e8ff;
  }

  .mobile-roll-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    color: #4a4a4a;
    text-shadow: none;
  }

  .mobile-roll-btn.roll-again {
    white-space: pre-line;
  }

  /* Hero roll button - shown in canvas area before any dice rolled */
  .hero-roll-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background:
      radial-gradient(ellipse 70% 40% at 50% 15%, rgba(255,255,255,0.12) 0%, transparent 50%),
      repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0px, rgba(0,0,0,0.015) 1px, rgba(255,255,255,0.015) 2px),
      linear-gradient(180deg, #484848 0%, #3a3a3a 30%, #333333 70%, #3a3a3a 100%);
    color: #8ec8e8;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.6), 0 1px 1px rgba(255,255,255,0.08);
    animation: roll-btn-pulse 2.5s ease-in-out infinite;
    flex-shrink: 0;
  }

  .hero-roll-btn:active {
    transform: scale(0.95);
  }

  .hero-roll-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    animation: none;
  }

  .hero-roll-btn.hidden {
    display: none;
  }

  /* Pulsing glow animation for Roll button */
  @keyframes roll-btn-pulse {
    0%, 100% {
      box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.08),
        inset 0 -2px 4px rgba(0,0,0,0.2),
        0 0 15px rgba(80, 180, 120, 0.3);
      color: #8ec8e8;
      text-shadow: 0 -1px 1px rgba(0,0,0,0.6), 0 1px 1px rgba(255,255,255,0.08), 0 0 8px rgba(80, 180, 120, 0.4);
    }
    50% {
      box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.08),
        inset 0 -2px 4px rgba(0,0,0,0.2),
        0 0 25px rgba(80, 180, 120, 0.5),
        0 0 40px rgba(80, 180, 120, 0.2);
      color: #a8e8ff;
      text-shadow: 0 -1px 1px rgba(0,0,0,0.6), 0 1px 1px rgba(255,255,255,0.08), 0 0 12px rgba(80, 180, 120, 0.6);
    }
  }

  /* Softer pulse for Roll Again button - also makes it visible */
  .mobile-roll-btn.roll-again {
    display: flex;
    animation: roll-again-pulse 3s ease-in-out infinite;
  }

  @keyframes roll-again-pulse {
    0%, 100% {
      box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.08),
        inset 0 -2px 4px rgba(0,0,0,0.2),
        0 0 10px rgba(80, 180, 120, 0.2);
    }
    50% {
      box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.08),
        inset 0 -2px 4px rgba(0,0,0,0.2),
        0 0 18px rgba(80, 180, 120, 0.35);
    }
  }

  /* Mobile edit button - matches roll button style */
  .mobile-edit-btn {
    display: none; /* Hidden by default, shown after roll */
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    min-height: 64px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.12s ease-out;
    background:
      radial-gradient(ellipse 70% 40% at 50% 15%, rgba(255,255,255,0.12) 0%, transparent 50%),
      repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0px, rgba(0,0,0,0.015) 1px, rgba(255,255,255,0.015) 2px),
      linear-gradient(180deg, #484848 0%, #3a3a3a 30%, #333333 70%, #3a3a3a 100%);
    box-shadow:
      inset 0 2px 3px rgba(255,255,255,0.08),
      inset 0 -2px 4px rgba(0,0,0,0.2);
    color: #8ec8e8;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.6), 0 1px 1px rgba(255,255,255,0.08);
  }

  .mobile-edit-btn.visible {
    display: flex;
  }

  .mobile-edit-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
  }

  .mobile-edit-btn:active {
    transform: scale(0.95);
    background:
      radial-gradient(ellipse 70% 40% at 50% 20%, rgba(255,255,255,0.05) 0%, transparent 50%),
      repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0px, rgba(0,0,0,0.02) 1px, rgba(255,255,255,0.01) 2px),
      linear-gradient(180deg, #383838 0%, #303030 30%, #2a2a2a 70%, #303030 100%);
    color: #b8e8ff;
  }

  /* Hide desktop roll button on mobile */
  .roll-row .roll-btn {
    display: none;
  }

  /* Roll area adjustments for mobile */
  .roll-area {
    padding-bottom: 10px;
    justify-content: flex-start;
    padding-top: 140px; /* Space for fixed score bar + buffer */
  }

  /* Roll area doesn't fade on mobile */
  .roll-area.rolling {
    opacity: 1;
    pointer-events: auto;
  }

  /* Post-roll state - UI stays hidden */
  .roll-area.post-roll {
    opacity: 0.2;
    pointer-events: none;
  }

  /* Dice hero area - contains dice icons on left, roll button on right */
  .dice-hero-area {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 0 20px;
    height: 100px; /* Fixed height - icons scroll/wrap within */
    max-height: 100px;
    margin-bottom: 12px;
    flex-shrink: 0;
  }

  /* Dice row container - centered within left portion */
  .dice-row-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex: 1;
    overflow: hidden;
  }

  /* Dice row - horizontal rows on mobile, constrained */
  .dice-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    align-items: center;
    align-content: center;
    max-width: 180px;
    max-height: 100%;
    overflow: hidden;
  }

  .dice-row-die {
    width: 28px;
    height: 28px;
  }

  /* Roll row takes full width */
  .roll-row {
    max-width: 100%;
    margin-bottom: 8px;
  }

  /* Dice configurator fills available space */
  .dice-config-container {
    width: 100%;
  }

  .dice-configurator {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  /* Presets dropdown on mobile */
  .presets-bar {
    display: none; /* Hide grid, use dropdown instead */
  }

  .presets-dropdown {
    display: block;
    width: 100%;
    margin-bottom: 80px; /* Space for design buttons at bottom */
  }

  .presets-dropdown select {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
  }

  .presets-dropdown select:focus {
    outline: none;
    border-color: var(--gold);
  }

  .presets-dropdown option {
    background: #1a1a1a;
    color: var(--text);
    padding: 8px;
  }

  /* Dynamic controls compact */
  .dynamic-controls {
    max-width: 100%;
    margin-bottom: 12px;
  }

  .controls-panel {
    gap: 16px;
  }
}

/* Design panel positioning on mobile */
@media (max-width: 768px) {
  #dice-design-panel {
    bottom: 20px !important; /* Keep at bottom on mobile */
  }
}

/* Text color grid - 8 columns (2 rows of 8) on mobile in design panel */
@media (max-width: 768px) {
  #dice-design-panel .text-color-grid {
    grid-template-columns: repeat(8, 1fr) !important;
    gap: 4px;
  }

  #dice-design-panel .text-color-grid .color-swatch {
    width: 28px;
    height: 28px;
  }

  /* Dice color grid also more compact */
  #dice-design-panel .dice-color-grid {
    grid-template-columns: repeat(8, 1fr) !important;
    gap: 4px;
  }

  #dice-design-panel .dice-color-grid .color-swatch {
    width: 28px;
    height: 28px;
  }
}