/* =========================================================================
   DESERT GENIE — game.css
   Every rule is scoped under .dge- so this file can't leak into, or be
   leaked into by, the shared site stylesheet (/css/styles.css).
   No image assets — all 11 symbols are emoji/CSS glyphs.
   ========================================================================= */

:root {
  --dge-sky-deep: #1a0b2e;
  --dge-sky-mid: #2d1250;
  --dge-sky-storm: #4a1942;
  --dge-panel: #241242;
  --dge-panel-2: #341a54;
  --dge-gold: #ffcc4d;
  --dge-gold-bright: #ffe08a;
  --dge-magenta: #e0479e;
  --dge-magenta-bright: #ff8fce;
  --dge-ink: #f7f0ff;
  --dge-ink-dim: #cbb8e8;
  --dge-ink-faint: #937fb5;
  --dge-win-green: #3ddc97;
  --dge-danger: #ff5d6c;
  --dge-line-glow: #ffd75e;
  --dge-border: rgba(255, 204, 77, 0.28);
  --dge-shadow: rgba(0, 0, 0, 0.55);

  --dge-radius-sm: 8px;
  --dge-radius-md: 14px;
  --dge-radius-lg: 22px;

  --dge-safe-top: env(safe-area-inset-top, 0px);
  --dge-safe-bottom: env(safe-area-inset-bottom, 0px);
  --dge-safe-left: env(safe-area-inset-left, 0px);
  --dge-safe-right: env(safe-area-inset-right, 0px);

  --dge-font: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

/* Hide the shared site chrome while a hand is actually in progress. */
body:has(.dge-root.is-playing) .dge-site-header,
body:has(.dge-root.is-playing) #footer {
  display: none;
}

.dge-root {
  font-family: var(--dge-font);
  color: var(--dge-ink);
  background:
    radial-gradient(ellipse at 50% -10%, rgba(224, 71, 158, 0.16), transparent 55%),
    linear-gradient(180deg, var(--dge-sky-deep) 0%, var(--dge-sky-mid) 55%, var(--dge-sky-storm) 100%);
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  overflow-x: hidden;
  padding-left: var(--dge-safe-left);
  padding-right: var(--dge-safe-right);
  box-sizing: border-box;
}

.dge-root * {
  box-sizing: border-box;
}

.dge-screen {
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(1.25rem + var(--dge-safe-top)) 1rem calc(1.25rem + var(--dge-safe-bottom));
}

/* Bug-class guard: this screen is toggled with the native "hidden"
   attribute from JS. Without an explicit [hidden] rule here, the
   "display: flex" a few lines up would win the specificity fight against
   the browser's default [hidden]{display:none} UA rule and the screen
   would stay visible (and its buttons clickable) underneath whatever
   screen is actually meant to be showing. */
.dge-screen[hidden] {
  display: none !important;
}

/* -------------------------------------------------------------------------
   Ambient starlight/shimmer flicker — pure CSS, no per-frame JS.
   ------------------------------------------------------------------------- */
.dge-starlight-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse 60% 40% at 30% 0%, rgba(255, 143, 206, 0.3), transparent 60%);
  opacity: 0;
  animation: dge-flicker 7s infinite ease-in-out;
}

@keyframes dge-flicker {
  0%, 91%, 100% { opacity: 0; }
  92% { opacity: 0.9; }
  92.6% { opacity: 0.1; }
  93.2% { opacity: 0.65; }
  94% { opacity: 0; }
  96% { opacity: 0.45; }
  96.4% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dge-starlight-bg { animation: none; opacity: 0.08; }
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.dge-btn {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: var(--dge-radius-md);
  border: 1px solid var(--dge-border);
  padding: 0.85rem 1.25rem;
  cursor: pointer;
  background: var(--dge-panel-2);
  color: var(--dge-ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.dge-btn:hover { filter: brightness(1.08); }
.dge-btn:active { transform: scale(0.97); }

.dge-btn--primary {
  background: linear-gradient(180deg, var(--dge-gold-bright), var(--dge-gold));
  color: #2a1a06;
  border-color: transparent;
  box-shadow: 0 6px 22px rgba(255, 204, 77, 0.35);
}

.dge-btn--ghost {
  background: transparent;
  border-color: var(--dge-border);
}

.dge-btn--disabled,
.dge-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.4);
}
.dge-btn:disabled:active { transform: none; }

.dge-btn--icon {
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  font-size: 1.1rem;
  line-height: 1;
}

/* -------------------------------------------------------------------------
   Menu screen
   ------------------------------------------------------------------------- */
.dge-screen--menu { justify-content: center; }

.dge-menu-card {
  width: 100%;
  max-width: 460px;
  background: linear-gradient(180deg, var(--dge-panel), var(--dge-panel-2));
  border: 1px solid var(--dge-border);
  border-radius: var(--dge-radius-lg);
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: 0 20px 60px var(--dge-shadow);
}

.dge-menu-glyphs {
  font-size: 3rem;
  margin-bottom: 0.25rem;
  filter: drop-shadow(0 0 18px rgba(224, 71, 158, 0.55));
}

.dge-title {
  font-size: 2.7rem;
  margin: 0;
  letter-spacing: 0.1em;
  background: linear-gradient(180deg, var(--dge-gold-bright), var(--dge-gold) 60%, #a9761a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 30px rgba(255, 204, 77, 0.25);
}

.dge-tagline {
  color: var(--dge-ink-dim);
  margin: 0.6rem 0 1.4rem;
  font-size: 0.98rem;
  font-style: italic;
}

.dge-menu-jackpot {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.4rem;
  background: rgba(255, 204, 77, 0.08);
  border: 1px solid var(--dge-border);
  border-radius: var(--dge-radius-md);
  padding: 0.7rem 1rem;
  margin-bottom: 1.5rem;
}

.dge-menu-jackpot-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dge-ink-faint);
}

.dge-menu-jackpot-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--dge-gold-bright);
  font-variant-numeric: tabular-nums;
}

.dge-menu-jackpot-unit {
  font-size: 0.78rem;
  color: var(--dge-ink-faint);
}

.dge-menu-actions {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.dge-fineprint {
  margin-top: 1.4rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--dge-ink-faint);
}

/* -------------------------------------------------------------------------
   Help / paytable screen
   ------------------------------------------------------------------------- */
.dge-screen--help { align-items: stretch; padding-left: 0; padding-right: 0; }

.dge-help-panel {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  background: var(--dge-panel);
  border: 1px solid var(--dge-border);
  border-radius: var(--dge-radius-lg);
  overflow: hidden;
}

.dge-help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--dge-border);
  position: sticky;
  top: 0;
  background: var(--dge-panel);
  z-index: 2;
}

.dge-help-header h2 { margin: 0; font-size: 1.2rem; }

.dge-help-body { padding: 1.25rem; }

.dge-help-note {
  color: var(--dge-ink-dim);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-top: 0;
}

.dge-paytable-wrap {
  overflow-x: auto;
  border-radius: var(--dge-radius-md);
  border: 1px solid var(--dge-border);
  margin: 1rem 0 1.5rem;
}

.dge-paytable {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
  font-size: 0.88rem;
}

.dge-paytable th, .dge-paytable td {
  padding: 0.55rem 0.7rem;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  white-space: nowrap;
}

.dge-paytable th {
  color: var(--dge-ink-faint);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
}

.dge-paytable td:first-child, .dge-paytable th:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--dge-panel);
}

.dge-paytable-glyph { font-size: 1.3rem; margin-right: 0.4rem; }
.dge-paytable-name { color: var(--dge-ink); font-weight: 600; }
.dge-paytable-sub { display: block; color: var(--dge-ink-faint); font-size: 0.72rem; font-weight: 400; }

.dge-help-rules h3 {
  font-size: 0.98rem;
  margin: 1.1rem 0 0.35rem;
  color: var(--dge-gold-bright);
}
.dge-help-rules p {
  margin: 0 0 0.6rem;
  color: var(--dge-ink-dim);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* -------------------------------------------------------------------------
   Play screen
   ------------------------------------------------------------------------- */
.dge-screen--play {
  position: relative;
  padding-top: calc(0.6rem + var(--dge-safe-top));
  gap: 0.6rem;
}

.dge-play-topbar {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  display: grid;
  grid-template-columns: auto 1fr 1fr auto;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.dge-chip {
  background: var(--dge-panel-2);
  border: 1px solid var(--dge-border);
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  min-width: 0;
}

.dge-chip-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dge-ink-faint);
}

.dge-chip-value {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--dge-gold-bright);
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.dge-chip--jackpot .dge-chip-value { color: var(--dge-magenta-bright); }

.dge-status-strip {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.78rem;
  color: var(--dge-ink-faint);
  margin-bottom: 0.4rem;
}

.dge-status-item strong { color: var(--dge-ink); }

#freeSpinsIndicator strong, #bonusIndicator strong { color: var(--dge-gold-bright); }

.dge-reel-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  background: linear-gradient(180deg, var(--dge-panel), var(--dge-panel-2));
  border: 1px solid var(--dge-border);
  border-radius: var(--dge-radius-lg);
  padding: 0.6rem;
  box-shadow: 0 16px 50px var(--dge-shadow), inset 0 0 40px rgba(224, 71, 158, 0.06);
  /* Content-sized on purpose: no flex-grow here. Inside .dge-screen's
     min-height:100vh column, "flex: 1 1 auto" plus centered content would
     stretch this card to fill all leftover viewport height and center the
     (correctly, tightly sized) reel grid inside it, leaving big empty gaps
     above and below the reels. */
}

.dge-reels {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.35rem;
  width: 100%;
  aspect-ratio: 5 / 3;
  max-height: 52vh;
}

.dge-reel {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 0%, rgba(74, 25, 66, 0.9), rgba(26, 11, 46, 0.95));
  border-radius: var(--dge-radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.dge-reel--thud { animation: dge-thud 0.18s ease-out; }
@keyframes dge-thud {
  0% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

.dge-strip {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.dge-cell {
  height: 0;
  flex: 0 0 auto;
  /* aspect-ratio, not padding-top percentage math: padding-top would
     resolve against this cell's own WIDTH, not the strip's height, so
     getting a square cell inside a 5-wide/3-tall reel frame right requires
     aspect-ratio (1/1) rather than trying to back into the right
     percentage by hand. */
  aspect-ratio: 1 / 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dge-cell .dge-glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.4rem, 6.4vw, 2.6rem);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}

.dge-cell--wild .dge-glyph { filter: drop-shadow(0 0 10px rgba(224, 71, 158, 0.85)); }

/* The Golden Lamp (id 10) reads as visibly bigger and more gilded than the
   plain Genie wild. */
.dge-cell--top .dge-glyph {
  font-size: clamp(1.7rem, 7.6vw, 3.1rem);
  filter: drop-shadow(0 0 16px rgba(255, 224, 138, 1)) drop-shadow(0 0 6px #fff) drop-shadow(0 0 2px #fff);
}

.dge-cell--scatter .dge-glyph { filter: drop-shadow(0 0 8px rgba(255, 143, 206, 0.85)); }

.dge-cell--win::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 6px;
  border: 2px solid var(--dge-line-glow);
  box-shadow: 0 0 14px var(--dge-line-glow), inset 0 0 10px rgba(255, 215, 94, 0.4);
  pointer-events: none;
}

.dge-cell--win-pulse::after { animation: dge-win-pulse 0.9s ease-in-out infinite; }
@keyframes dge-win-pulse {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}

.dge-win-banner {
  position: absolute;
  left: 50%;
  top: 8%;
  transform: translateX(-50%);
  background: rgba(26, 11, 46, 0.9);
  border: 1px solid var(--dge-gold);
  color: var(--dge-gold-bright);
  font-weight: 800;
  font-size: clamp(1rem, 4vw, 1.5rem);
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  box-shadow: 0 0 26px rgba(255, 204, 77, 0.5);
  z-index: 3;
  animation: dge-banner-pop 0.35s ease-out;
  pointer-events: none;
}

/* Bug-class guard: the win banner is also toggled with the native
   "hidden" attribute. Explicit [hidden] rule so a later "display: ..."
   never wins the cascade and leaves it visible/interceptable over the
   reels. */
.dge-win-banner[hidden] {
  display: none;
}

@keyframes dge-banner-pop {
  0% { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(0.9); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* -------------------------------------------------------------------------
   Controls
   ------------------------------------------------------------------------- */
.dge-controls {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  grid-template-rows: auto auto;
  gap: 0.5rem 0.6rem;
  margin-top: 0.6rem;
  align-items: end;
}

.dge-control-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.dge-control-group--total { grid-column: 1 / 3; flex-direction: row; align-items: baseline; gap: 0.5rem; }

.dge-control-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dge-ink-faint);
}

.dge-select {
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  background: var(--dge-panel-2);
  color: var(--dge-ink);
  border: 1px solid var(--dge-border);
  border-radius: var(--dge-radius-sm);
  padding: 0.5rem 0.6rem;
}

.dge-total-bet {
  font-weight: 800;
  color: var(--dge-gold-bright);
  font-variant-numeric: tabular-nums;
}

.dge-btn--spin {
  grid-column: 3;
  grid-row: 1 / 3;
  min-width: 108px;
  min-height: 64px;
  border-radius: var(--dge-radius-lg);
  background: linear-gradient(180deg, var(--dge-gold-bright), var(--dge-gold));
  color: #2a1a06;
  border: none;
  box-shadow: 0 8px 26px rgba(255, 204, 77, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
}

.dge-spin-label { font-size: 1rem; letter-spacing: 0.06em; }
.dge-spin-lamp { font-size: 1.3rem; }

.dge-btn--spin.is-spinning .dge-spin-lamp { animation: dge-lamp-spin 0.6s linear infinite; }
@keyframes dge-lamp-spin {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.22) rotate(8deg); }
}

@media (min-width: 720px) {
  .dge-controls { grid-template-columns: 1fr 1fr 1fr auto; }
  .dge-control-group--total { grid-column: 3; flex-direction: column; align-items: flex-start; }
  .dge-btn--spin { grid-column: 4; }
}

/* -------------------------------------------------------------------------
   Bonus pick overlay
   ------------------------------------------------------------------------- */
.dge-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem calc(1rem + var(--dge-safe-right)) calc(1rem + var(--dge-safe-bottom)) calc(1rem + var(--dge-safe-left));
  background: rgba(10, 4, 20, 0.82);
  backdrop-filter: blur(2px);
}

/* Bug-class guard: overlays default to display:flex above so they can
   center their panel, but they start (and return to) hidden via the
   native "hidden" attribute — this explicit rule is required or the
   flex rule above would win and the overlay would sit invisible-in-intent
   but still display:flex, blocking every click on the screen under it. */
.dge-overlay[hidden] {
  display: none;
}

.dge-bonus-panel {
  width: 100%;
  max-width: 460px;
  background: linear-gradient(180deg, var(--dge-panel), var(--dge-sky-storm));
  border: 1px solid var(--dge-border);
  border-radius: var(--dge-radius-lg);
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 20px 60px var(--dge-shadow);
}

.dge-bonus-title { margin: 0 0 0.2rem; color: var(--dge-gold-bright); }
.dge-bonus-sub { margin: 0 0 1rem; color: var(--dge-ink-dim); font-size: 0.9rem; }

.dge-bonus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.dge-bonus-tile {
  aspect-ratio: 1;
  border-radius: var(--dge-radius-md);
  border: 1px solid var(--dge-border);
  background: radial-gradient(circle at 50% 30%, #4a2a70, #201039);
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--dge-ink);
  transition: transform 0.12s ease, filter 0.12s ease;
}

.dge-bonus-tile:hover:not(.is-revealed) { transform: translateY(-2px); filter: brightness(1.15); }
.dge-bonus-tile:active:not(.is-revealed) { transform: scale(0.96); }

.dge-bonus-tile.is-revealed {
  cursor: default;
  background: radial-gradient(circle at 50% 30%, #4a3a10, #241a08);
  border-color: var(--dge-gold);
  flex-direction: column;
  font-size: 1rem;
  font-weight: 800;
  color: var(--dge-gold-bright);
  animation: dge-tile-reveal 0.35s ease-out;
}

.dge-bonus-tile.is-dim { opacity: 0.35; cursor: default; }

@keyframes dge-tile-reveal {
  0% { transform: scale(0.7) rotateY(90deg); }
  100% { transform: scale(1) rotateY(0); }
}

.dge-bonus-total { color: var(--dge-ink-dim); font-size: 0.95rem; }
.dge-bonus-total strong { color: var(--dge-gold-bright); }

/* -------------------------------------------------------------------------
   Pause / menu overlay
   ------------------------------------------------------------------------- */
.dge-overlay--pause { background: rgba(6, 3, 14, 0.78); }

/* -------------------------------------------------------------------------
   Jackpot overlay
   ------------------------------------------------------------------------- */
.dge-overlay--jackpot { background: rgba(6, 3, 14, 0.92); }

.dge-jackpot-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 20%, rgba(255, 224, 240, 0.85), transparent 60%);
  animation: dge-jackpot-flash 1.6s ease-in-out infinite;
}

@keyframes dge-jackpot-flash {
  0%, 100% { opacity: 0; }
  4% { opacity: 1; }
  8% { opacity: 0.15; }
  12% { opacity: 0.85; }
  16% { opacity: 0; }
  55% { opacity: 0; }
  58% { opacity: 0.6; }
  61% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dge-jackpot-flash { animation: none; opacity: 0.15; }
}

.dge-jackpot-panel {
  position: relative;
  text-align: center;
  z-index: 1;
}

.dge-jackpot-glyph {
  font-size: 3rem;
  margin-bottom: 0.5rem;
  filter: drop-shadow(0 0 30px rgba(255, 224, 138, 0.9));
}

.dge-jackpot-title {
  font-size: clamp(1.7rem, 8vw, 3rem);
  margin: 0;
  letter-spacing: 0.06em;
  background: linear-gradient(180deg, #fff, var(--dge-gold-bright) 55%, var(--dge-gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dge-jackpot-sub { color: var(--dge-ink-dim); margin: 0.4rem 0; }

.dge-jackpot-amount {
  font-size: clamp(1.6rem, 7vw, 2.6rem);
  font-weight: 800;
  color: var(--dge-gold-bright);
  margin: 0.6rem 0 1.4rem;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   Loading screen
   ------------------------------------------------------------------------- */
.dge-screen--loading { justify-content: center; align-items: center; }
.dge-loading-lamp { font-size: 3rem; animation: dge-loading-pulse 1s ease-in-out infinite; }
.dge-loading-text { color: var(--dge-ink-dim); margin-top: 0.5rem; }
@keyframes dge-loading-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.08); }
}


/* Shown while the reels turn waiting on the server's outcome (SMO mode only). Softened so
   the swap between symbols reads as motion rather than a flicker. */
.dge-cell--blur, .dge-cell--blur .dge-glyph {
  filter: blur(2.5px);
  opacity: 0.72;
}

@media (prefers-reduced-motion: reduce) {
  .dge-cell--blur, .dge-cell--blur .dge-glyph { filter: none; opacity: 0.8; }
}