/* Target-language wraps — shared stage for en | ja | ko | tl | id | zh | vi | th | ru | ar | hi.
   Costume tiger cat is the identity difference (not Hangul dancheong / Kana sakura-fuji).
   Do NOT place motifs behind .display-area / .hangul-text / .card-display / .kana-text. */

.main-content {
  position: relative;
}

/* Interactive chrome stays clickable above the mascot.
   Do not set position on .stats-panel — style.css owns absolute (desktop)
   vs static flex (phone) so the counter stays inside .display-area. */
.speed-control,
.control-buttons,
.keyboard-hints,
.top-chrome,
.action-buttons,
.quiz-input-area {
  position: relative;
  z-index: 6;
}

/* Speed strip is full-width; don't steal clicks from absolute Exit (top-right). */
.speed-control {
  pointer-events: none;
}
.speed-control > * {
  pointer-events: auto;
}

.stats-panel {
  z-index: 6;
}

/* Glyph stage above page chrome, below mascot corner (words stay centered & readable) */
.display-area {
  position: relative;
  z-index: 2;
}

.card-display,
.hangul-text,
.kana-text,
.kanji-text {
  position: relative;
  z-index: 3;
}

/* Fixed to viewport so a tall sidebar never pushes the cat below the fold */
.target-tora {
  position: fixed;
  right: clamp(6px, 1.5vw, 20px);
  bottom: clamp(8px, 1.5vw, 18px);
  width: clamp(140px, 22vw, 220px);
  height: auto;
  max-height: min(42vh, 280px);
  object-fit: contain;
  object-position: bottom right;
  pointer-events: none;
  user-select: none;
  z-index: 4;
  background: transparent;
  /* Soft drop-shadow follows transparent PNG silhouette (not a white plate) */
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
  opacity: 0.94;
}

/* Narrow: tuck further into the corner so Start/Stop & Got it stay clear */
@media (max-width: 900px) {
  .target-tora {
    width: clamp(96px, 28vw, 140px);
    right: 4px;
    bottom: 56px; /* clear sticky action bar when present */
    opacity: 0.88;
    max-height: 26vh;
  }
}

@media (max-width: 480px) {
  .target-tora {
    width: clamp(72px, 24vw, 110px);
    right: 2px;
    bottom: 52px;
    opacity: 0.8;
    max-height: 20vh;
  }
}

/* Very short viewports: hide so controls stay usable */
@media (max-height: 520px) {
  .target-tora {
    display: none;
  }
}

/* ==========================================================================
   Shared wrap skeleton — body[data-target="en|ja|ko|tl|id|zh|vi|th|ru|ar|hi"]
   One dark practice stage; neutralize Hangul dancheong insets and Kana washi/sakura.
   ========================================================================== */

body[data-target="en"] .side-panel,
body[data-target="ja"] .side-panel,
body[data-target="ko"] .side-panel,
body[data-target="tl"] .side-panel,
body[data-target="id"] .side-panel,
body[data-target="zh"] .side-panel,
body[data-target="vi"] .side-panel,
body[data-target="th"] .side-panel,
body[data-target="ru"] .side-panel,
body[data-target="ar"] .side-panel,
body[data-target="hi"] .side-panel {
  border-right: 1px solid rgba(142, 176, 255, 0.2);
  box-shadow: none; /* kill Hangul inset dancheong bars */
  background-color: var(--chrome-indigo, #152238);
  background-image: none; /* kill Kana sidebar washi */
  background-attachment: local;
}

body[data-target="en"] .side-panel::before,
body[data-target="ja"] .side-panel::before,
body[data-target="ko"] .side-panel::before,
body[data-target="tl"] .side-panel::before,
body[data-target="id"] .side-panel::before,
body[data-target="zh"] .side-panel::before,
body[data-target="vi"] .side-panel::before,
body[data-target="th"] .side-panel::before,
body[data-target="ru"] .side-panel::before,
body[data-target="ar"] .side-panel::before,
body[data-target="hi"] .side-panel::before {
  opacity: 0.95;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  background: linear-gradient(
    90deg,
    #1e3a5f 0 18%,
    #c4a574 18% 36%,
    #3b6ea5 36% 55%,
    #8b6914 55% 72%,
    #1e3a5f 72% 88%,
    #c4a574 88% 100%
  );
}

body[data-target="en"] .panel-header::after,
body[data-target="ja"] .panel-header::after,
body[data-target="ko"] .panel-header::after,
body[data-target="tl"] .panel-header::after,
body[data-target="id"] .panel-header::after,
body[data-target="zh"] .panel-header::after,
body[data-target="vi"] .panel-header::after,
body[data-target="th"] .panel-header::after,
body[data-target="ru"] .panel-header::after,
body[data-target="ar"] .panel-header::after,
body[data-target="hi"] .panel-header::after {
  opacity: 0.95;
  height: 4px;
  box-shadow: 0 0 10px rgba(196, 165, 116, 0.28);
  background: linear-gradient(
    90deg,
    #1e3a5f 0 25%,
    #c4a574 25% 50%,
    #3b6ea5 50% 75%,
    #8b5a2b 75% 100%
  );
}

body[data-target="en"] .panel-section h2,
body[data-target="ja"] .panel-section h2,
body[data-target="ko"] .panel-section h2,
body[data-target="tl"] .panel-section h2,
body[data-target="id"] .panel-section h2,
body[data-target="zh"] .panel-section h2,
body[data-target="vi"] .panel-section h2,
body[data-target="th"] .panel-section h2,
body[data-target="ru"] .panel-section h2,
body[data-target="ar"] .panel-section h2,
body[data-target="hi"] .panel-section h2 {
  border-left: 3px solid #c4a574;
}

body[data-target="en"] .mobile-bar::before,
body[data-target="ja"] .mobile-bar::before,
body[data-target="ko"] .mobile-bar::before,
body[data-target="tl"] .mobile-bar::before,
body[data-target="id"] .mobile-bar::before,
body[data-target="zh"] .mobile-bar::before,
body[data-target="vi"] .mobile-bar::before,
body[data-target="th"] .mobile-bar::before,
body[data-target="ru"] .mobile-bar::before,
body[data-target="ar"] .mobile-bar::before,
body[data-target="hi"] .mobile-bar::before {
  background: linear-gradient(
    90deg,
    #1e3a5f 0 25%,
    #c4a574 25% 50%,
    #3b6ea5 50% 75%,
    #8b5a2b 75% 100%
  );
}

/* Kana-only sakura / fuji top banner — hide so JA shares EN/KO stage */
body[data-target="ja"] .top-chrome {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  overflow: hidden !important;
}

/* ==========================================================================
   Showcase field colors + floral corners on practice stage
   Locked motifs: EN saguaro/#3a1808 · JA sakura/#061428 · KO mugunghwa/#050505
   Glyph plate (.display-area / .card-display / texts) stays clear — no motifs behind.
   ========================================================================== */

body[data-target="en"] {
  --stage-field: #3a1808;
  /* Warm dark navy — darker than cool denim, sits with canyon brown/orange */
  --stage-panel: #12141c;
  --stage-display: #1a0e08;
  --stage-wallpaper: url("../art/showcase-wallpapers/en-lacquer.webp");
  --stage-drape-opacity: 0.42;
  --en-denim: #12141c;
  --en-denim-mid: #1a1824;
  --en-bunting-red: #c41e3a;
  --en-bunting-white: #f5f7fa;
  --en-bunting-blue: #1e3a5f;
}

body[data-target="ja"] {
  --stage-field: #061428;
  --stage-panel: #040e1c;
  --stage-display: #0a1628;
  --stage-wallpaper: url("../art/showcase-wallpapers/ja-lacquer.webp");
  --stage-drape-opacity: 0.48;
}

body[data-target="ko"] {
  --stage-field: #050505;
  --stage-panel: #030303;
  --stage-display: #0c0c0c;
  --stage-wallpaper: url("../art/showcase-wallpapers/ko-lacquer.webp");
  --stage-drape-opacity: 0.4;
}


body[data-target="tl"] {
  --stage-field: #0a1f14;
  --stage-panel: #06150e;
  --stage-display: #0c2418;
  --stage-wallpaper: url("../art/showcase-wallpapers/tl-lacquer.webp");
  --stage-drape-opacity: 0.44;
}

body[data-target="id"] {
  --stage-field: #061428;
  --stage-panel: #040e1c;
  --stage-display: #0a1a30;
  --stage-wallpaper: url("../art/showcase-wallpapers/id-lacquer.webp");
  --stage-drape-opacity: 0.46;
}

body[data-target="zh"] {
  --stage-field: #1a0808;
  --stage-panel: #120505;
  --stage-display: #220c0c;
  --stage-wallpaper: url("../art/showcase-wallpapers/zh-lacquer.webp");
  --stage-drape-opacity: 0.44;
}

body[data-target="vi"] {
  --stage-field: #061a12;
  --stage-panel: #04140e;
  --stage-display: #0a2218;
  --stage-wallpaper: url("../art/showcase-wallpapers/vi-lacquer.webp");
  --stage-drape-opacity: 0.44;
}

body[data-target="th"] {
  --stage-field: #1a1208;
  --stage-panel: #120c05;
  --stage-display: #24180c;
  --stage-wallpaper: url("../art/showcase-wallpapers/th-lacquer.webp");
  --stage-drape-opacity: 0.44;
}

body[data-target="ru"] {
  --stage-field: #1a0610;
  --stage-panel: #12040c;
  --stage-display: #220814;
  --stage-wallpaper: url("../art/showcase-wallpapers/ru-lacquer.webp");
  --stage-drape-opacity: 0.44;
}

body[data-target="ar"] {
  --stage-field: #060e1c;
  --stage-panel: #040a14;
  --stage-display: #0a1428;
  --stage-wallpaper: url("../art/showcase-wallpapers/ar-lacquer.webp");
  --stage-drape-opacity: 0.44;
}

body[data-target="hi"] {
  --stage-field: #1a0a08;
  --stage-panel: #120605;
  --stage-display: #240e0c;
  --stage-wallpaper: url("../art/showcase-wallpapers/hi-lacquer.webp");
  --stage-drape-opacity: 0.44;
}

/* Field wash on body + shell */
body[data-target="en"],
body[data-target="ja"],
body[data-target="ko"],
body[data-target="tl"],
body[data-target="id"],
body[data-target="zh"],
body[data-target="vi"],
body[data-target="th"],
body[data-target="ru"],
body[data-target="ar"],
body[data-target="hi"]{
  background-color: var(--stage-field);
}

body[data-target="en"] .app-container,
body[data-target="ja"] .app-container,
body[data-target="ko"] .app-container,
body[data-target="tl"] .app-container,
body[data-target="id"] .app-container,
body[data-target="zh"] .app-container,
body[data-target="vi"] .app-container,
body[data-target="th"] .app-container,
body[data-target="ru"] .app-container,
body[data-target="ar"] .app-container,
body[data-target="hi"] .app-container {
  background-color: var(--stage-field);
}

/* Main stage: field color + veiled lacquer wallpaper (never on glyph plate) */
body[data-target="en"] .main-content,
body[data-target="ja"] .main-content,
body[data-target="ko"] .main-content,
body[data-target="tl"] .main-content,
body[data-target="id"] .main-content,
body[data-target="zh"] .main-content,
body[data-target="vi"] .main-content,
body[data-target="th"] .main-content,
body[data-target="ru"] .main-content,
body[data-target="ar"] .main-content,
body[data-target="hi"] .main-content {
  background-color: var(--stage-field);
  isolation: isolate;
}

body[data-target="en"] .main-content::before,
body[data-target="ja"] .main-content::before,
body[data-target="ko"] .main-content::before,
body[data-target="tl"] .main-content::before,
body[data-target="id"] .main-content::before,
body[data-target="zh"] .main-content::before,
body[data-target="vi"] .main-content::before,
body[data-target="th"] .main-content::before,
body[data-target="ru"] .main-content::before,
body[data-target="ar"] .main-content::before,
body[data-target="hi"] .main-content::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--stage-wallpaper);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.18;
  /* Soft veil so wallpaper does not compete with glyphs/controls */
  -webkit-mask-image: radial-gradient(
    ellipse 85% 75% at 55% 45%,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.2) 55%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 85% 75% at 55% 45%,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.2) 55%,
    transparent 100%
  );
}

/* Side panel deeper toward field; gold-ish stripe language kept */
body[data-target="en"] .side-panel,
body[data-target="ja"] .side-panel,
body[data-target="ko"] .side-panel,
body[data-target="tl"] .side-panel,
body[data-target="id"] .side-panel,
body[data-target="zh"] .side-panel,
body[data-target="vi"] .side-panel,
body[data-target="th"] .side-panel,
body[data-target="ru"] .side-panel,
body[data-target="ar"] .side-panel,
body[data-target="hi"] .side-panel {
  background-color: var(--stage-panel);
  background-image: none;
  border-right-color: rgba(196, 163, 90, 0.22);
}

/* Readable dark plate + Showcase gold border — no wallpaper / drapes behind glyphs */
body[data-target="en"] .display-area,
body[data-target="ja"] .display-area,
body[data-target="ko"] .display-area,
body[data-target="tl"] .display-area,
body[data-target="id"] .display-area,
body[data-target="zh"] .display-area,
body[data-target="vi"] .display-area,
body[data-target="th"] .display-area,
body[data-target="ru"] .display-area,
body[data-target="ar"] .display-area,
body[data-target="hi"] .display-area {
  background-color: var(--stage-display);
  background-image: none !important;
  border: 1px solid rgba(196, 163, 90, 0.45);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(196, 163, 90, 0.18);
}

body[data-target="en"] .card-display,
body[data-target="ja"] .card-display,
body[data-target="ko"] .card-display,
body[data-target="tl"] .card-display,
body[data-target="id"] .card-display,
body[data-target="zh"] .card-display,
body[data-target="vi"] .card-display,
body[data-target="th"] .card-display,
body[data-target="ru"] .card-display,
body[data-target="ar"] .card-display,
body[data-target="hi"] .card-display,
body[data-target="en"] .hangul-text,
body[data-target="ja"] .hangul-text,
body[data-target="ko"] .hangul-text,
body[data-target="tl"] .hangul-text,
body[data-target="id"] .hangul-text,
body[data-target="zh"] .hangul-text,
body[data-target="vi"] .hangul-text,
body[data-target="th"] .hangul-text,
body[data-target="ru"] .hangul-text,
body[data-target="ar"] .hangul-text,
body[data-target="hi"] .hangul-text,
body[data-target="en"] .kana-text,
body[data-target="ja"] .kana-text,
body[data-target="ko"] .kana-text,
body[data-target="tl"] .kana-text,
body[data-target="id"] .kana-text,
body[data-target="zh"] .kana-text,
body[data-target="vi"] .kana-text,
body[data-target="th"] .kana-text,
body[data-target="ru"] .kana-text,
body[data-target="ar"] .kana-text,
body[data-target="hi"] .kana-text,
body[data-target="en"] .kanji-text,
body[data-target="ja"] .kanji-text,
body[data-target="ko"] .kanji-text,
body[data-target="tl"] .kanji-text,
body[data-target="id"] .kanji-text,
body[data-target="zh"] .kanji-text,
body[data-target="vi"] .kanji-text,
body[data-target="th"] .kanji-text,
body[data-target="ru"] .kanji-text,
body[data-target="ar"] .kanji-text,
body[data-target="hi"] .kanji-text {
  background-image: none !important;
}

/* Corner drapes — TL/TR of main stage; soft; never cover glyph plate */
.reader-drapes {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.reader-drape {
  position: absolute;
  top: 0;
  width: clamp(110px, 22vw, 200px);
  height: auto;
  max-height: min(34vh, 220px);
  object-fit: contain;
  opacity: var(--stage-drape-opacity, 0.42);
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}

.reader-drape--tl {
  left: 0;
  object-position: top left;
}

.reader-drape--tr {
  right: 0;
  object-position: top right;
}

@media (max-width: 900px) {
  .reader-drape {
    width: clamp(72px, 26vw, 130px);
    max-height: 22vh;
    opacity: calc(var(--stage-drape-opacity, 0.42) * 0.85);
  }
}

@media (max-width: 480px) {
  .reader-drape {
    width: clamp(56px, 22vw, 96px);
    max-height: 16vh;
    opacity: calc(var(--stage-drape-opacity, 0.42) * 0.7);
  }
}

@media (max-height: 520px) {
  .reader-drapes {
    display: none;
  }
}

/* ==========================================================================
   Shared chrome — Showcase lacquer title banner (one wallpaper set per target)
   EN warm navy sidebar; JA/KO use field-tinted panels already set above
   ========================================================================== */

body[data-target="en"] {
  --banner-base: #1a0e08;
  --banner-veil: linear-gradient(
    180deg,
    rgba(18, 8, 4, 0.52) 0%,
    rgba(26, 12, 6, 0.68) 100%
  );
  --banner-title-shadow:
    0 1px 0 rgba(20, 8, 4, 0.95),
    0 0 10px rgba(0, 0, 0, 0.65),
    0 2px 12px rgba(0, 0, 0, 0.5);
}

body[data-target="ja"] {
  --banner-base: #040e1c;
  --banner-veil: linear-gradient(
    180deg,
    rgba(4, 14, 28, 0.45) 0%,
    rgba(6, 20, 40, 0.72) 100%
  );
  --banner-title-shadow:
    0 1px 0 rgba(4, 12, 28, 0.95),
    0 0 10px rgba(0, 0, 0, 0.7),
    0 2px 12px rgba(0, 0, 0, 0.55);
}

body[data-target="ko"] {
  --banner-base: #050505;
  --banner-veil: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(8, 8, 8, 0.72) 100%
  );
  --banner-title-shadow:
    0 1px 0 rgba(0, 0, 0, 0.95),
    0 0 10px rgba(0, 0, 0, 0.75),
    0 2px 12px rgba(0, 0, 0, 0.55);
}


body[data-target="tl"] {
  --banner-base: #06150e;
  --banner-veil: linear-gradient(
    180deg,
    rgba(6, 21, 14, 0.45) 0%,
    rgba(10, 31, 20, 0.72) 100%
  );
  --banner-title-shadow:
    0 1px 0 rgba(4, 16, 10, 0.95),
    0 0 10px rgba(0, 0, 0, 0.7),
    0 2px 12px rgba(0, 0, 0, 0.55);
}

body[data-target="id"] {
  --banner-base: #040e1c;
  --banner-veil: linear-gradient(
    180deg,
    rgba(4, 14, 28, 0.45) 0%,
    rgba(6, 20, 40, 0.72) 100%
  );
  --banner-title-shadow:
    0 1px 0 rgba(4, 12, 28, 0.95),
    0 0 10px rgba(0, 0, 0, 0.7),
    0 2px 12px rgba(0, 0, 0, 0.55);
}

body[data-target="zh"] {
  --banner-base: #120505;
  --banner-veil: linear-gradient(
    180deg,
    rgba(18, 5, 5, 0.48) 0%,
    rgba(34, 12, 12, 0.72) 100%
  );
  --banner-title-shadow:
    0 1px 0 rgba(16, 4, 4, 0.95),
    0 0 10px rgba(0, 0, 0, 0.7),
    0 2px 12px rgba(0, 0, 0, 0.55);
}

body[data-target="vi"] {
  --banner-base: #04140e;
  --banner-veil: linear-gradient(
    180deg,
    rgba(4, 20, 14, 0.45) 0%,
    rgba(6, 26, 18, 0.72) 100%
  );
  --banner-title-shadow:
    0 1px 0 rgba(4, 16, 12, 0.95),
    0 0 10px rgba(0, 0, 0, 0.7),
    0 2px 12px rgba(0, 0, 0, 0.55);
}

body[data-target="th"] {
  --banner-base: #120c05;
  --banner-veil: linear-gradient(
    180deg,
    rgba(18, 12, 5, 0.48) 0%,
    rgba(36, 24, 12, 0.72) 100%
  );
  --banner-title-shadow:
    0 1px 0 rgba(16, 10, 4, 0.95),
    0 0 10px rgba(0, 0, 0, 0.7),
    0 2px 12px rgba(0, 0, 0, 0.55);
}

body[data-target="ru"] {
  --banner-base: #12040c;
  --banner-veil: linear-gradient(
    180deg,
    rgba(18, 4, 12, 0.48) 0%,
    rgba(34, 8, 20, 0.72) 100%
  );
  --banner-title-shadow:
    0 1px 0 rgba(16, 4, 10, 0.95),
    0 0 10px rgba(0, 0, 0, 0.7),
    0 2px 12px rgba(0, 0, 0, 0.55);
}

body[data-target="ar"] {
  --banner-base: #040a14;
  --banner-veil: linear-gradient(
    180deg,
    rgba(4, 10, 20, 0.45) 0%,
    rgba(6, 14, 28, 0.72) 100%
  );
  --banner-title-shadow:
    0 1px 0 rgba(4, 10, 20, 0.95),
    0 0 10px rgba(0, 0, 0, 0.7),
    0 2px 12px rgba(0, 0, 0, 0.55);
}

body[data-target="hi"] {
  --banner-base: #120605;
  --banner-veil: linear-gradient(
    180deg,
    rgba(18, 6, 5, 0.48) 0%,
    rgba(36, 14, 12, 0.72) 100%
  );
  --banner-title-shadow:
    0 1px 0 rgba(16, 6, 4, 0.95),
    0 0 10px rgba(0, 0, 0, 0.7),
    0 2px 12px rgba(0, 0, 0, 0.55);
}

body[data-target="en"] .side-panel {
  background-color: var(--en-denim, #12141c);
  background-image: none;
  border-right-color: rgba(196, 163, 90, 0.22);
}

/* Soft gold rail — matches Showcase border language */
body[data-target="en"] .side-panel::before,
body[data-target="ja"] .side-panel::before,
body[data-target="ko"] .side-panel::before,
body[data-target="tl"] .side-panel::before,
body[data-target="id"] .side-panel::before,
body[data-target="zh"] .side-panel::before,
body[data-target="vi"] .side-panel::before,
body[data-target="th"] .side-panel::before,
body[data-target="ru"] .side-panel::before,
body[data-target="ar"] .side-panel::before,
body[data-target="hi"] .side-panel::before {
  background: linear-gradient(
    90deg,
    rgba(196, 163, 90, 0.15) 0%,
    rgba(196, 163, 90, 0.55) 35%,
    rgba(196, 163, 90, 0.55) 65%,
    rgba(196, 163, 90, 0.15) 100%
  );
  height: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

body[data-target="en"] .panel-header,
body[data-target="ja"] .panel-header,
body[data-target="ko"] .panel-header,
body[data-target="tl"] .panel-header,
body[data-target="id"] .panel-header,
body[data-target="zh"] .panel-header,
body[data-target="vi"] .panel-header,
body[data-target="th"] .panel-header,
body[data-target="ru"] .panel-header,
body[data-target="ar"] .panel-header,
body[data-target="hi"] .panel-header {
  position: relative;
  margin: 0 -8px 12px;
  padding: 22px 12px 18px;
  min-height: 3.4rem;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  border: 1px solid rgba(196, 163, 90, 0.45);
  background-color: var(--banner-base);
  background-image: var(--banner-veil), var(--stage-wallpaper);
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(196, 163, 90, 0.2);
}

/* Showcase banner replaces shared gold under-stripe */
body[data-target="en"] .panel-header::after,
body[data-target="ja"] .panel-header::after,
body[data-target="ko"] .panel-header::after,
body[data-target="tl"] .panel-header::after,
body[data-target="id"] .panel-header::after,
body[data-target="zh"] .panel-header::after,
body[data-target="vi"] .panel-header::after,
body[data-target="th"] .panel-header::after,
body[data-target="ru"] .panel-header::after,
body[data-target="ar"] .panel-header::after,
body[data-target="hi"] .panel-header::after {
  display: none;
}

body[data-target="en"] .panel-header .app-title,
body[data-target="ja"] .panel-header .app-title,
body[data-target="ko"] .panel-header .app-title,
body[data-target="tl"] .panel-header .app-title,
body[data-target="id"] .panel-header .app-title,
body[data-target="zh"] .panel-header .app-title,
body[data-target="vi"] .panel-header .app-title,
body[data-target="th"] .panel-header .app-title,
body[data-target="ru"] .panel-header .app-title,
body[data-target="ar"] .panel-header .app-title,
body[data-target="hi"] .panel-header .app-title {
  position: relative;
  z-index: 1;
  margin: 0;
  padding-top: 2px;
  color: #ffffff;
  text-align: center;
  letter-spacing: 0.06em;
  text-shadow: var(--banner-title-shadow);
}

/* Mobile title bar — same Showcase lacquer banner */
@media (max-width: 900px) {
  body[data-target="en"] .mobile-bar,
  body[data-target="ja"] .mobile-bar,
  body[data-target="ko"] .mobile-bar,
  body[data-target="tl"] .mobile-bar,
  body[data-target="id"] .mobile-bar,
  body[data-target="zh"] .mobile-bar,
  body[data-target="vi"] .mobile-bar,
  body[data-target="th"] .mobile-bar,
  body[data-target="ru"] .mobile-bar,
  body[data-target="ar"] .mobile-bar,
  body[data-target="hi"] .mobile-bar {
    background-color: var(--stage-panel);
    background-image: var(--banner-veil), var(--stage-wallpaper);
    background-repeat: no-repeat;
    background-position: center right;
    background-size: cover;
    border-bottom: 1px solid rgba(196, 163, 90, 0.35);
    padding-top: 12px;
  }

  body[data-target="en"] .mobile-bar {
    background-color: var(--en-denim, #12141c);
  }

  body[data-target="en"] .mobile-bar::before,
  body[data-target="ja"] .mobile-bar::before,
  body[data-target="ko"] .mobile-bar::before,
  body[data-target="tl"] .mobile-bar::before,
  body[data-target="id"] .mobile-bar::before,
  body[data-target="zh"] .mobile-bar::before,
  body[data-target="vi"] .mobile-bar::before,
  body[data-target="th"] .mobile-bar::before,
  body[data-target="ru"] .mobile-bar::before,
  body[data-target="ar"] .mobile-bar::before,
  body[data-target="hi"] .mobile-bar::before {
    display: none;
  }

  body[data-target="en"] .mobile-title,
  body[data-target="ja"] .mobile-title,
  body[data-target="ko"] .mobile-title,
  body[data-target="tl"] .mobile-title,
  body[data-target="id"] .mobile-title,
  body[data-target="zh"] .mobile-title,
  body[data-target="vi"] .mobile-title,
  body[data-target="th"] .mobile-title,
  body[data-target="ru"] .mobile-title,
  body[data-target="ar"] .mobile-title,
  body[data-target="hi"] .mobile-title {
    color: #ffffff;
    text-shadow: var(--banner-title-shadow);
  }
}