/* Hyper-realistic device faceplate surface */

:root {
  --ma-paint-base1: #181820;
  --ma-paint-base2: #0e0e14;
  --ma-paint-shadow: #050508;
  --ma-paint-rim-light: rgba(255, 255, 255, 0.08);
}

.ma-device-surface {
  position: relative;
  background:
    /* worn edge vignette */
    radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(0,0,0,.55) 100%),
    /* uneven highlight / wear patches */
    radial-gradient(ellipse at 20% 15%, rgba(255,255,255,.07) 0%, transparent 30%),
    radial-gradient(ellipse at 80% 85%, rgba(0,0,0,.55) 0%, transparent 40%),
    radial-gradient(ellipse at 60% 30%, rgba(255,255,255,.03) 0%, transparent 45%),
    radial-gradient(ellipse at 35% 70%, rgba(0,0,0,.35) 0%, transparent 35%),
    /* painted black base */
    linear-gradient(165deg, var(--ma-paint-base1) 0%, #12121a 45%, var(--ma-paint-base2) 100%);
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 var(--ma-paint-rim-light),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

/* grain, scratches, dust */
.ma-device-surface::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    /* subtle noise grain */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E"),
    /* fine scratch / wear lines */
    repeating-linear-gradient(
      78deg,
      transparent 0 14px,
      rgba(255,255,255,.06) 14px 15px,
      transparent 15px 52px
    ),
    repeating-linear-gradient(
      -12deg,
      transparent 0 20px,
      rgba(0,0,0,.22) 20px 21px,
      transparent 21px 80px
    ),
    repeating-linear-gradient(
      3deg,
      transparent 0 38px,
      rgba(255,255,255,.025) 38px 39px,
      transparent 39px 120px
    ),
    /* paint chips / worn spots */
    radial-gradient(circle at 8% 12%, rgba(255,255,255,.06) 0 2px, transparent 4px),
    radial-gradient(circle at 92% 8%, rgba(0,0,0,.4) 0 4px, transparent 7px),
    radial-gradient(circle at 15% 88%, rgba(255,255,255,.04) 0 3px, transparent 6px),
    radial-gradient(circle at 85% 82%, rgba(0,0,0,.35) 0 4px, transparent 8px),
    radial-gradient(circle at 42% 45%, rgba(255,255,255,.03) 0 2px, transparent 5px),
    radial-gradient(circle at 68% 55%, rgba(0,0,0,.25) 0 3px, transparent 6px),
    radial-gradient(circle at 30% 62%, rgba(255,255,255,.035) 0 1px, transparent 3px);
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: overlay;
}

/* recessed edge / bezel */
.ma-device-surface::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 15px;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.07),
    inset 0 -1px 3px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  z-index: 0;
}

.ma-device-surface > * {
  position: relative;
  z-index: 1;
}

/* optional screw-head corners */
.ma-device-screws::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 14px 14px, #a8a8b0 0 3px, #2a2a30 4px 5px, transparent 6px),
    radial-gradient(circle at calc(100% - 14px) 14px, #a8a8b0 0 3px, #2a2a30 4px 5px, transparent 6px),
    radial-gradient(circle at 14px calc(100% - 14px), #a8a8b0 0 3px, #2a2a30 4px 5px, transparent 6px),
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), #a8a8b0 0 3px, #2a2a30 4px 5px, transparent 6px);
  pointer-events: none;
  z-index: 2;
}

/* screw slot lines */
.ma-device-screws::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent 12px, rgba(30,30,35,.85) 13px 15px, transparent 16px),
    linear-gradient(90deg, transparent calc(100% - 16px), rgba(30,30,35,.85) calc(100% - 15px) calc(100% - 13px), transparent calc(100% - 12px)),
    linear-gradient(0deg, transparent 12px, rgba(30,30,35,.85) 13px 15px, transparent 16px),
    linear-gradient(0deg, transparent calc(100% - 16px), rgba(30,30,35,.85) calc(100% - 15px) calc(100% - 13px), transparent calc(100% - 12px));
  pointer-events: none;
  z-index: 2;
}

/* --- Variants --- */

/* Dark steel / industrial variant */
.ma-device-steel {
  background:
    radial-gradient(ellipse at 30% 15%, rgba(255,255,255,.08) 0%, transparent 35%),
    radial-gradient(ellipse at 70% 85%, rgba(0,0,0,.5) 0%, transparent 40%),
    linear-gradient(180deg, #22222c 0%, #15151c 100%);
}
.ma-device-steel::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.2'/%3E%3C/svg%3E"),
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.05) 0 1px,
      transparent 1px 3px
    );
  opacity: 0.5;
}

/* Carbon weave variant */
.ma-device-carbon {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.06) 0%, transparent 45%),
    linear-gradient(180deg, #16161e 0%, #0d0d12 100%);
}
.ma-device-carbon::before {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,.025) 0 2px,
      transparent 2px 4px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,.025) 0 2px,
      transparent 2px 4px
    );
  opacity: 0.7;
  mix-blend-mode: normal;
}