/* =============================================================
   ARCADE REVIEW CARD — arcade-review.css
   BEM block: aa-arcade-review
   Backwards-compatible: legacy .styled-table is hidden automatically.

   Colour palette:
     Dark bg:        #092133
     Cabinet:        #1c1c1c  bevel top/left #2e2e2e  bottom/right #0d0d0d
     Cabinet fill:   #0a0a0a
     Inner line:     #ff4fa8
     Panel border:   #3a5fa0
     Pink label:     #E94B9D  /  #D54591
     Blue label:     #7ed6ea
     Gold gradient:  #FFE033 → #FFB700 → #FF8C00
     Star filled:    #FFB733
     Star empty:     #333
   ============================================================= */

/* ---------------------------------------------------------------
   BACKWARDS COMPATIBILITY
   Hide the old hardcoded styled-table — new card replaces it.
   --------------------------------------------------------------- */
.styled-table,
table.styled-table {
  display: none !important;
}


/* ---------------------------------------------------------------
   OUTER WRAP — centres the card, max-width 540px
   --------------------------------------------------------------- */
.aa-arcade-review__wrap {
  width: 100%;
  max-width: 540px !important;
  margin: 20px auto 32px;
  box-sizing: border-box;
}


/* ---------------------------------------------------------------
   CABINET — retro TV bezel
   Outer charcoal bevel → dark gap → thin pink rounded inner line
   --------------------------------------------------------------- */
.aa-arcade-review__cabinet {
  display: block;
  width: 100%;
  background: #0a0a0a;
  border-top:    10px solid #2e2e2e;
  border-left:   10px solid #2e2e2e;
  border-bottom: 10px solid #0d0d0d;
  border-right:  10px solid #0d0d0d;
  padding: 14px;
  position: relative;
  box-sizing: border-box;
}

/* Thin pink rounded inner screen line */
.aa-arcade-review__cabinet::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1.5px solid #ff4fa8;
  border-radius: 12px;
  pointer-events: none;
  z-index: 100;
}


/* ---------------------------------------------------------------
   MAIN CARD
   --------------------------------------------------------------- */
.aa-arcade-review {
  width: 100%;
  background: #092133;
  border: none;
  outline: none;
  font-family: 'Press Start 2P', monospace;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-sizing: border-box;
  padding-bottom: 0;
  font-size: 16px !important
}

/* Scanlines overlay */
.aa-arcade-review::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.06) 2px,
    rgba(0, 0, 0, 0.06) 4px
  );
}

/* CRT vignette overlay */
.aa-arcade-review::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 21;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(9, 33, 51, 0.4) 100%);
}


/* ---------------------------------------------------------------
   STAR FIELD CANVAS
   --------------------------------------------------------------- */
.aa-arcade-review__starfield {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}


/* ---------------------------------------------------------------
   HEADER
   --------------------------------------------------------------- */
.aa-arcade-review__header {
  background: #092133;
  padding: 4% 4% 3%;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  min-height: clamp(200px, 52vw, 280px);
}

.aa-arcade-review__header-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  flex: 1;
  gap: 2%;
}

/* Tag sits as direct child of header (above z-index 20/21 overlays) */
.aa-arcade-review__tag {
  display: block;
  font-size: clamp(0.35rem, 1.8vw, 0.55rem);
  letter-spacing: 0.08em;
  color: #E94B9D;
  text-align: center;
  padding-top: 4%;
  position: relative;
  z-index: 25;
}

.aa-arcade-review__title {
  display: block;
  font-size: clamp(1rem, 7vw, 2rem);
  line-height: 1.2;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, #FFE033 0%, #FFB700 50%, #FF8C00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.aa-arcade-review__venue-name {
  display: block;
  font-size: clamp(0.4rem, 2.5vw, 0.75rem);
  letter-spacing: 0.1em;
  color: #ff4fa8;
}

/* VENUE | 4 | VERDICT row */
.aa-arcade-review__score-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 3vw, 20px);
  width: 100%;
}

.aa-arcade-review__score-label {
  font-size: clamp(0.35rem, 2vw, 0.75rem);
  letter-spacing: 0.1em;
  color: #7ed6ea;
}

.aa-arcade-review__score-number {
  font-size: clamp(1.8rem, 10vw, 3.5rem);
  line-height: 1;
  background: linear-gradient(180deg, #FFE033 0%, #FFB700 50%, #FF8C00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding: 0 clamp(4px, 2vw, 10px);
}

/* Big hero stars */
.aa-arcade-review__hero-stars {
  display: flex;
  justify-content: center;
  gap: clamp(2px, 1vw, 4px);
  line-height: 1;
  margin-top: -2%;
}

.aa-arcade-review__hero-star {
  font-size: clamp(1.4rem, 7vw, 3rem);
  line-height: 1;
  background: linear-gradient(180deg, #FFE033 0%, #FFB700 60%, #FF8C00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.aa-arcade-review__hero-star--empty {
  background: none;
  -webkit-text-fill-color: #333;
  color: #333;
}


/* ---------------------------------------------------------------
   PANEL WRAP — dark bg continues, stars show through
   --------------------------------------------------------------- */
.aa-arcade-review__panel-wrap {
  padding: 0 4% 18px;
  background: transparent;
  position: relative;
  z-index: 2;
}


/* ---------------------------------------------------------------
   CATEGORY PANEL
   --------------------------------------------------------------- */
.aa-arcade-review__panel {
  background: #092133;
  border: 2px solid #3a5fa0;
  border-radius: 12px;
  overflow: hidden;
  max-width: 460px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
  width: 100%;
  box-sizing: border-box;
}

/* CATEGORY | SCORE header */
.aa-arcade-review__panel-header {
  display: flex;
  justify-content: space-around;
  padding: clamp(6px, 2%, 10px) clamp(8px, 4%, 16px);
  border-bottom: 1px solid rgba(58, 95, 160, 0.5);
}

.aa-arcade-review__panel-heading {
  font-size: clamp(0.35rem, 2vw, 0.72rem);
  letter-spacing: 0.1em;
  color: #D54591;
}

/* Table rows */
.aa-arcade-review__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: clamp(4px, 1%, 6px) clamp(8px, 4%, 20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.aa-arcade-review__row:last-child {
  border-bottom: none;
}

.aa-arcade-review__row-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(4px, 1.5vw, 8px);
}

.aa-arcade-review__icon {
  font-size: clamp(0.7rem, 3vw, 1.1rem);
  width: clamp(18px, 5vw, 28px);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: center;
}

.aa-arcade-review__category {
  font-size: clamp(0.3rem, 1.8vw, 0.65rem);
  color: #fff;
  letter-spacing: 0.06em;
  text-align: left;
  line-height: 1.6;
  display: flex;
  align-items: center;
  position: relative;
  top: 2px;
}

/* Row star cluster */
.aa-arcade-review__stars {
  font-size: clamp(0.9rem, 5vw, 2rem);
  line-height: 1;
  letter-spacing: clamp(1px, 0.5vw, 2px);
  display: flex;
  align-items: center;
  align-self: center;
  position: relative;
  top: -0.15em;
}

.aa-arcade-review__star {
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}

.aa-arcade-review__star--filled {
  color: #FFB733;
}

.aa-arcade-review__star--empty {
  color: #333;
}


/* =============================================================
   BACKWARDS-COMPATIBLE LEGACY SELECTORS
   Maps old class/id names onto the new styles so that the
   hundreds of existing hardcoded pages will automatically
   pick up the new design once this CSS is dropped in.
   The new card HTML uses the BEM classes above.
   ============================================================= */

/* Wrap / cabinet */
.aar-wrap                          { /* alias for aa-arcade-review__wrap    */ }
.aar-cabinet                       { /* alias for aa-arcade-review__cabinet  */ }

/* Card */
.aar                               { /* alias for aa-arcade-review          */ }

/* Header */
.aar__hd,
.aar__header                       { /* alias for aa-arcade-review__header  */ }
.aar__hd-inner,
.aar__header-inner                 { /* alias for aa-arcade-review__header-inner */ }
.aar__tag                          { font-size: clamp(0.35rem, 1.8vw, 0.55rem); letter-spacing: 0.08em; color: #E94B9D; position: relative; z-index: 25; display: block; text-align: center; padding-top: 4%; }
.aar__title                        { display: block; font-size: clamp(1rem, 7vw, 2rem); line-height: 1.2; letter-spacing: 0.04em; background: linear-gradient(180deg, #FFE033 0%, #FFB700 50%, #FF8C00 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.aar__venue-name                   { display: block; font-size: clamp(0.4rem, 2.5vw, 0.75rem); letter-spacing: 0.1em; color: #ff4fa8; }
.aar__row1                         { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 3vw, 20px); width: 100%; }
.aar__side-lbl                     { font-size: clamp(0.35rem, 2vw, 0.75rem); letter-spacing: 0.1em; color: #7ed6ea; }
.aar__big-num                      { font-size: clamp(1.8rem, 10vw, 3.5rem); line-height: 1; background: linear-gradient(180deg, #FFE033 0%, #FFB700 50%, #FF8C00 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; padding: 0 clamp(4px, 2vw, 10px); }
.aar__stars-hero                   { display: flex; justify-content: center; gap: clamp(2px, 1vw, 4px); line-height: 1; margin-top: -2%; }
.aar__star-hero                    { font-size: clamp(1.4rem, 7vw, 3rem); line-height: 1; background: linear-gradient(180deg, #FFE033 0%, #FFB700 60%, #FF8C00 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.aar__star-hero-off                { font-size: clamp(1.4rem, 7vw, 3rem); line-height: 1; color: #333; }

/* Panel */
.aar__panel-wrap                   { padding: 0 4% 18px; background: transparent; position: relative; z-index: 2; }
.aar__panel                        { background: #092133; border: 2px solid #3a5fa0; border-radius: 12px; overflow: hidden; max-width: 460px; margin: 0 auto; position: relative; z-index: 5; width: 100%; box-sizing: border-box; }
.aar__panel-heads                  { display: flex; justify-content: space-around; padding: clamp(6px, 2%, 10px) clamp(8px, 4%, 16px); border-bottom: 1px solid rgba(58, 95, 160, 0.5); }
.aar__panel-head                   { font-size: clamp(0.35rem, 2vw, 0.72rem); letter-spacing: 0.1em; color: #D54591; }
.aar__row                          { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: clamp(5px, 1.5%, 8px) clamp(8px, 4%, 20px); border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.aar__row:last-child               { border-bottom: none; }
.aar__row-left                     { display: flex; align-items: center; justify-content: flex-start; gap: clamp(4px, 1.5vw, 8px); }
.aar__icon                         { font-size: clamp(0.7rem, 3vw, 1.1rem); width: clamp(18px, 5vw, 28px); text-align: center; display: flex; align-items: center; justify-content: center; flex-shrink: 0; align-self: center; }
.aar__cat                          { font-size: clamp(0.3rem, 1.8vw, 0.65rem); color: #fff; letter-spacing: 0.06em; text-align: left; line-height: 1.6; display: flex; align-items: center; position: relative; top: 2px; }
.aar__row-stars                    { font-size: clamp(0.9rem, 5vw, 2rem); line-height: 1; letter-spacing: clamp(1px, 0.5vw, 2px); display: flex; align-items: center; align-self: center; position: relative; top: -0.15em; }