/* Chat: anklickbarer Autor */
  .chat-author--link { cursor: pointer; text-decoration: underline dotted transparent; }
  .chat-author--link:hover { text-decoration-color: currentColor; }
  @media (max-width: 820px) {
    .profileGrid {
      grid-template-columns: 1fr;
    }
    .profileHeader h2 {
      font-size: 42px;
    }
  }

  body.tutorial-active #startDemoMatch,
  body.tutorial-active #undoMove {
    display: none !important;
  }

  .tutorialCoach {
    grid-column: 1 / -1;
    display: grid;
    gap: 7px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid rgba(77, 208, 196, .24);
    border-left: 3px solid var(--mp-teal, #4dd0c4);
    background: rgba(8, 15, 18, .62);
  }

  .tutorialCoach[hidden] {
    display: none !important;
  }

  .tutorialCoachHead {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-family: var(--mp-mono);
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--mp-teal-1, #80e8df);
  }

  .tutorialCoachHead b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mp-bone, #f5ecd8);
    font-family: var(--mp-serif);
    font-size: 14px;
    letter-spacing: .5px;
    text-transform: none;
  }

  .tutorialCoachHead em {
    justify-self: end;
    color: rgba(232, 222, 197, .62);
    font-style: normal;
  }

  .tutorialCoachTask {
    color: var(--mp-bone, #f5ecd8);
    font-family: var(--mp-serif);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
  }

  .tutorialCoachCopy {
    color: rgba(232, 222, 197, .74);
    font-size: 12px;
    line-height: 1.35;
  }

  .tutorialCoachMsg {
    padding: 6px 8px;
    border-left: 2px solid #e26a6a;
    background: rgba(176, 48, 80, .14);
    color: #ffd2d2;
    font-size: 12px;
  }

  .tutorialCoachMsg.success {
    border-left-color: #7bbf9a;
    background: rgba(90, 192, 140, .13);
    color: #dff8e8;
  }

  .tutorialCoachActions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .tutorialCoachActions button {
    min-height: 28px;
    padding: 5px 9px;
    font-size: 11px;
  }

  .sq.tutorialSource {
    box-shadow:
      inset 0 0 0 2px rgba(77, 208, 196, .76),
      inset 0 0 22px rgba(77, 208, 196, .22);
  }

  .sq.tutorialSource .chip {
    animation: pieceFocusPulse 1.45s ease-in-out infinite;
  }

  .sq.tutorialTarget::before,
  .sq.tutorialBlocked::before,
  .sq.tutorialDanger::before {
    content: "";
    position: absolute;
    inset: 5px;
    z-index: 1;
    pointer-events: none;
    border: 2px solid rgba(216, 177, 90, .86);
    box-shadow: 0 0 14px rgba(216, 177, 90, .36);
  }

  .sq.tutorialTarget::before {
    border-color: rgba(216, 177, 90, .92);
  }

  .sq.tutorialBlocked::before {
    border-color: rgba(140, 148, 156, .78);
    box-shadow: none;
  }

  .sq.tutorialDanger::before {
    border-color: rgba(226, 106, 106, .82);
    box-shadow: 0 0 12px rgba(226, 106, 106, .32);
  }

  .sq .tutorialMarker {
    position: absolute;
    left: 4px;
    bottom: 4px;
    z-index: 7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: calc(100% - 8px);
    min-height: 15px;
    padding: 1px 4px;
    border: 1px solid rgba(8, 10, 14, .55);
    background: rgba(5, 8, 10, .78);
    color: #f3d795;
    font-family: var(--mp-mono);
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    pointer-events: none;
  }

  @media (max-width: 700px) {
    .tutorialCoach {
      padding: 8px;
      gap: 6px;
    }

    .tutorialCoachHead {
      grid-template-columns: 1fr auto;
      gap: 5px 8px;
    }

    .tutorialCoachHead b {
      grid-column: 1 / -1;
      grid-row: 1;
      white-space: normal;
      font-size: 13px;
    }

    .tutorialCoachHead span {
      grid-column: 1;
      grid-row: 2;
    }

    .tutorialCoachHead em {
      grid-column: 2;
      grid-row: 2;
    }

    .tutorialCoachTask {
      font-size: 15px;
    }

    .sq .tutorialMarker {
      font-size: 8px;
      padding-inline: 3px;
    }
  }
  .startHero {
    display: grid;
    gap: 16px;
    min-height: 430px;
    align-content: center;
    max-width: 780px;
    padding: 56px 0 42px;
  }
  .startHero h2 {
    margin: 0;
    color: #fff7df;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 78px;
    font-weight: 700;
    line-height: .92;
    text-transform: uppercase;
    text-shadow: 0 2px 0 #000, 0 0 32px rgba(200, 155, 60, .28);
  }
  .startHero p {
    margin: 0;
    color: #d2d9df;
    max-width: 58ch;
    font-size: 17px;
  }
  .startBand {
    border-top: 1px solid rgba(200, 155, 60, .38);
    border-bottom: 1px solid rgba(10, 200, 185, .18);
    background:
      linear-gradient(90deg, rgba(200, 155, 60, .13), rgba(10, 200, 185, .07), transparent),
      rgba(5, 8, 14, .66);
    backdrop-filter: blur(5px);
  }
  .startBandCompact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
  }
  .startBandCompact > div {
    display: grid;
    gap: 5px;
    padding: 18px 20px;
    background: rgba(11, 15, 23, .62);
  }
  .startBand strong,
  .factionPanel h3,
  .visionGrid h3 {
    color: #fff4d9;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    line-height: 1.1;
  }
  .startBand span,
  .startBand p,
  .visionGrid p,
  .factionPanel p {
    color: #aab4bf;
  }
  .visionGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }
  .visionGrid article {
    min-height: 184px;
    padding: 16px;
    border: 1px solid rgba(200, 155, 60, .28);
    border-radius: 6px;
    background:
      linear-gradient(180deg, rgba(240, 210, 131, .08), rgba(10, 200, 185, .04)),
      rgba(12, 16, 24, .78);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
  }
  .visionGrid article > span {
    color: var(--rift-blue);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
  }
  .visionGrid h3,
  .factionPanel h3,
  .roadmapBand h3 {
    margin: 10px 0 8px;
  }
  .visionGrid p,
  .factionPanel p {
    margin: 0;
    font-size: 13px;
  }
  .factionShowcase {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .factionPanel {
    position: relative;
    min-height: 210px;
    padding: 22px;
    overflow: hidden;
    border: 1px solid rgba(200, 155, 60, .32);
    border-radius: 6px;
    background:
      linear-gradient(130deg, rgba(240, 210, 131, .13), transparent 44%),
      rgba(9, 13, 21, .78);
  }
  .factionPanel::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 4px;
    background: linear-gradient(90deg, rgba(240, 210, 131, .76), rgba(10, 200, 185, .58));
  }
  .factionPanel.undead {
    background:
      linear-gradient(130deg, rgba(10, 200, 185, .14), transparent 46%),
      rgba(9, 13, 21, .78);
  }
  .factionSigil {
    color: rgba(240, 210, 131, .72);
    font-size: 48px;
    line-height: 1;
  }
  .roadmapBand {
    display: grid;
    gap: 14px;
    padding: 18px 20px;
  }
  .roadmapBand h3 {
    color: #fff4d9;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
  }
  .roadmapSteps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }
  .roadmapSteps span {
    padding: 10px 12px;
    border: 1px solid rgba(200, 155, 60, .24);
    background: rgba(0,0,0,.18);
    color: #d7dee5;
    font-size: 12px;
    text-transform: uppercase;
  }
  .startLobby {
    background: rgba(7, 10, 16, .76);
    border: 1px solid rgba(200, 155, 60, .30);
    border-radius: 6px;
    padding: 14px;
  }
  .modePanel {
    position: relative;
    z-index: 1;
    width: min(640px, calc(100vw - 32px));
    display: grid;
    gap: 16px;
    padding: clamp(22px, 4vw, 38px);
    border: 1px solid rgba(200, 155, 60, .58);
    border-radius: 8px;
    background:
      linear-gradient(135deg, rgba(10, 200, 185, .12), transparent 46%),
      linear-gradient(180deg, rgba(240, 210, 131, .12), rgba(0,0,0,.14)),
      rgba(14, 18, 27, .92);
    box-shadow: 0 30px 80px rgba(0,0,0,.56), inset 0 0 0 1px rgba(255,255,255,.05);
    backdrop-filter: blur(6px);
  }
  .startMenu::before,
  .startMenu::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(240, 210, 131, .62), transparent);
  }
  .startMenu::before { top: 12px; }
  .startMenu::after { bottom: 12px; }
  .startKicker {
    color: var(--rift-blue);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  .modePanel h2 {
    margin: 0;
    color: #fff7df;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(46px, 8vw, 86px);
    font-weight: 700;
    line-height: .92;
    text-transform: uppercase;
    text-shadow: 0 2px 0 #000, 0 0 32px rgba(200, 155, 60, .28);
  }
  .modePanel p {
    margin: 0;
    color: #c8d0d7;
    max-width: 54ch;
    font-size: 15px;
  }
  .modeChoices {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .modeChoices button {
    min-width: 150px;
    min-height: 42px;
    border-color: rgba(200, 155, 60, .56);
    background:
      linear-gradient(180deg, rgba(240, 210, 131, .12), rgba(10, 200, 185, .05)),
      #121925;
    color: #f6ecd4;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
  }
  .modeChoices button.primary {
    border-color: rgba(240, 210, 131, .82);
    background:
      linear-gradient(180deg, rgba(240, 210, 131, .24), rgba(120, 90, 40, .22)),
      #1b2231;
    box-shadow: 0 0 24px rgba(200, 155, 60, .18);
  }
  .modeChoices button:disabled {
    cursor: not-allowed;
    color: rgba(240, 230, 210, .42);
    border-color: rgba(143, 152, 168, .20);
    background: rgba(17, 21, 29, .62);
  }
  .alphaStrip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--rift-gold-bright);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .alphaStrip span {
    padding: 5px 9px;
    border: 1px solid rgba(200, 155, 60, .34);
    background: rgba(0,0,0,.18);
  }
  /* Welt-Inschrift (Layer 1 der Lore): dezente, wechselnde Zeile — "in den Rand
     der Tafel geritzt". Absichtlich leise; wird beim Laden per JS gefüllt. */
  .worldInscription {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    min-height: 1.4em;
    opacity: 0;
    transition: opacity 1.2s ease;
  }
  .worldInscription.ready { opacity: 1; }
  .worldInscription .wiMark {
    flex: none;
    color: rgba(200, 155, 60, .48);
    font-size: 9px;
  }
  .worldInscription .wiText {
    color: rgba(214, 206, 190, .5);
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 14px;
    letter-spacing: .4px;
    transition: opacity .6s ease;
  }
  .worldInscription .wiText.fading { opacity: 0; }
  @media (prefers-reduced-motion: reduce) {
    .worldInscription,
    .worldInscription .wiText { transition: none; }
  }
  .lobbyPanel {
    border-top: 1px solid var(--line, rgba(255,255,255,0.08));
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .lobbyPanel[hidden] { display: none; }
  .lobbyPanel h3 {
    margin: 0;
    font-size: 14px;
    color: var(--muted);
  }
  .lobbyList {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 220px;
    overflow-y: auto;
  }
  .lobbyEntry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid var(--line, rgba(255,255,255,0.08));
    border-radius: 4px;
    background: rgba(255,255,255,0.02);
    cursor: pointer;
    text-align: left;
    color: inherit;
    font-size: 13px;
  }
  .lobbyEntry:hover {
    background: rgba(255,255,255,0.06);
  }
  .lobbyEntry .lobbyMeta {
    color: var(--muted);
    font-size: 11px;
  }
  .lobbyEmpty {
    color: var(--muted);
    font-size: 12px;
    font-style: italic;
  }
  .lobbyDeckPickerPanel {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(216, 177, 90, .22);
    background:
      radial-gradient(ellipse 70% 55% at 12% 0%, rgba(77, 208, 196, .10), transparent 62%),
      rgba(7, 10, 16, .56);
    border-radius: 6px;
  }
  .lobbyDeckPickerState {
    padding: 12px;
    border: 1px dashed rgba(216, 177, 90, .20);
    color: var(--muted);
    font-size: 12px;
    font-style: italic;
  }
  .lobbyDeckPickerHead,
  .lobbyDeckPickerFoot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .lobbyDeckPickerHead span,
  .lobbyDeckSelected span {
    display: block;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
  }
  .lobbyDeckPickerHead strong,
  .lobbyDeckSelected strong {
    display: block;
    color: var(--bone, #f3ead8);
    font-family: var(--font-display, inherit);
    font-size: 16px;
    letter-spacing: 1px;
  }
  .lobbyDeckPickerText {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
  }
  .lobbyDeckPickerLink,
  .lobbyStartDeckMatch {
    min-height: 32px;
    padding: 0 11px;
    border: 1px solid rgba(216, 177, 90, .28);
    border-radius: 4px;
    background: rgba(216, 177, 90, .10);
    color: var(--rift-gold-bright, #f4d37f);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  .lobbyDeckPickerLink:hover,
  .lobbyStartDeckMatch:hover {
    border-color: rgba(216, 177, 90, .48);
    background: rgba(216, 177, 90, .16);
  }
  .lobbyStartDeckMatch {
    background: linear-gradient(135deg, rgba(216, 177, 90, .22), rgba(77, 208, 196, .12));
  }
  .lobbyStartDeckMatch:disabled {
    cursor: wait;
    opacity: .62;
  }
  .lobbyDeckOptions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
  }
  .lobbyDeckOption {
    display: grid;
    gap: 4px;
    min-height: 78px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 5px;
    background: rgba(255,255,255,0.025);
    color: inherit;
    text-align: left;
  }
  .lobbyDeckOption:hover {
    border-color: rgba(216, 177, 90, .30);
    background: rgba(255,255,255,0.055);
  }
  .lobbyDeckOption.selected {
    border-color: rgba(216, 177, 90, .55);
    box-shadow: inset 0 0 0 1px rgba(216, 177, 90, .30);
  }
  .lobbyDeckOption.active {
    background:
      linear-gradient(135deg, rgba(216, 177, 90, .10), rgba(77, 208, 196, .04)),
      rgba(255,255,255,0.025);
  }
  .lobbyDeckOption .ldo-faction {
    color: var(--rift-cyan, #8ff6ff);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
  }
  .lobbyDeckOption strong {
    overflow: hidden;
    color: var(--bone, #f3ead8);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .lobbyDeckOption small {
    color: var(--muted);
    font-size: 11px;
  }
  @media (max-width: 640px) {
    .lobbyDeckPickerHead,
    .lobbyDeckPickerFoot {
      align-items: stretch;
      flex-direction: column;
    }
    .lobbyDeckPickerLink,
    .lobbyStartDeckMatch {
      width: 100%;
    }
  }

  /* Einladungs-Box entfaellt: #onlineShareBanner ist nur noch der unsichtbare
     Traeger des Einladungs-Links — sichtbar sind der Rail-Knopf "Link kopieren"
     (effect-footers.js) und der Leisten-Knopf auf Handy/Tablet (game-topbar.js). */

  /* Oeffentliche Beta == volles Online-/Account-Produkt: die fruehere
     "public = lokale Demo"-Ausgrauung (Online/Lab/Ranked grau + "Bald") ist
     entfallen. Nur die allgemeine Eingeklappt-Regel bleibt. */
  body.side-nav-collapsed .sideNavList button::after {
    content: none !important;
    display: none !important;
  }

  @media (max-width: 860px) {
    body:not(.side-nav-collapsed) {
      --side-nav-width: 280px;
    }
    header.sideNav {
      padding: 12px 8px;
      gap: 12px;
    }
    .sideNavList {
      margin-top: 28px;
    }
    .modeScreen { padding: 24px 12px 36px; }
    .startHero {
      min-height: 360px;
      padding-top: 34px;
    }
    .startHero h2 { font-size: 52px; }
    .startHero p { font-size: 15px; }
    .startBandCompact,
    .factionShowcase,
    .roadmapSteps {
      grid-template-columns: 1fr;
    }
    .visionGrid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 560px) {
    .startHero h2 { font-size: 42px; }
    .visionGrid {
      grid-template-columns: 1fr;
    }
    .modeChoices button {
      width: 100%;
    }
  }

  body.mode-select,
  body.mode-profile,
  body.mode-collection,
  body.mode-community,
  body.mode-lessons,
  body.mode-puzzle,
  body.mode-messages,
  body.mode-info,
  body.mode-play {
    grid-template-columns: var(--side-nav-width) minmax(0, 1fr);
  }

  /* --- board-using modes: re-show <main> (the board) and the dev <aside>.
     Everything else keeps the default `display: none`, so new pages never
     leak the board/editor. The live game (demo) also runs for online &
     ranked matches; lab is the dev figure editor; puzzle shows the board
     only while a puzzle is actually loaded (body.puzzle-active). --- */
  body.mode-demo main,
  body.mode-lab main {
    display: flex;
  }
  /* The dev editor side panel is only used inside the figure lab. */
  aside { display: none; }
  body.mode-lab aside {
    display: block;
  }

  body.mode-demo {
    /* 100dvh-Reserve deckt das, was UNTER dem Brett in <main> liegt:
       main-Padding (16+16) + gap zum #gamePanel (12) + boardWrap-Chrome (~22)
       + die (im Online-Spiel sichtbare) Aufgeben-Zeile. Sonst ueberragt das
       Brett den Viewport um wenige Pixel -> dauerhafter Mini-Scrollbalken. */
    --board-size: max(420px, calc(min(calc(100dvh - 104px), calc(100vw - var(--side-nav-width) - 56px - var(--rail-size) * 2)) * 0.98));
    grid-template-columns: var(--side-nav-width) minmax(520px, 1fr);
  }
  body.mode-demo aside,
  body.mode-demo #boardControls,
  body.mode-demo .legend,
  body.mode-demo #statusLegend,
  body.mode-demo #moveHistory,
  body.mode-demo #setupStatus,
  body.mode-demo #captureStatus,
  body.mode-demo #startGame,
  body.mode-demo #returnSetup,
  body.mode-demo #newLocalGame,
  body.mode-demo #undoMove,
  body.mode-demo #gameStatus,
  body.mode-demo #pieceInfo,
  body.mode-demo #showModeSelect,
  body.mode-demo .brandBlock span {
    display: none !important;
  }
  body.mode-demo main {
    grid-column: 2 / -1;
    min-height: 100vh;
    justify-content: center;
  }
  body.mode-demo.exposure-public main {
    justify-content: flex-start;
  }
  /* Im Spielmodus unterm Brett kein Kasten — die Zug-Navigation lebt jetzt in der
     Zughistorie (rechte Rail). Nur "Aufgeben" (online) bleibt rahmenlos. */
  body.mode-demo #gamePanel {
    grid-template-columns: 1fr auto;
    background: transparent;
    border-color: transparent;
    padding: 0;
  }
  body.mode-demo #gameActions {
    justify-content: flex-end;
  }
  body.mode-demo #startDemoMatch::after {
    content: "";
  }

  @media (orientation: portrait) and (max-width: 1180px) {
    body.mode-demo {
      --side-nav-width: var(--side-nav-collapsed-width);
      --rail-size: clamp(42px, 6vw, 58px);
      --effect-chip-size: clamp(32px, 4.8vw, 44px);
      --board-size: min(
        calc(100vw - var(--side-nav-width) - 54px),
        calc(100dvh - 368px),
        820px
      );
      grid-template-columns: var(--side-nav-width) minmax(0, 1fr);
      overflow-x: hidden;
    }

    body.mode-demo header.sideNav {
      padding: 12px 8px;
      align-items: center;
      gap: 12px;
      overflow: hidden;
    }

    body.mode-demo .sideNavToggle {
      right: 14px;
    }

    body.mode-demo .brandBlock,
    body.mode-demo .sideSearch,
    body.mode-demo #modeBadge,
    body.mode-demo .sideUser span:not(.sideAvatar),
    body.mode-demo .authPanel,
    body.mode-demo .sideUtility {
      display: none !important;
    }

    body.mode-demo .sideBrand,
    body.mode-demo .sideFooter {
      justify-content: center;
      align-items: center;
    }

    body.mode-demo .sideNavList {
      width: 100%;
      margin-top: 12px;
      justify-items: center;
    }

    body.mode-demo .sideNavList button,
    body.mode-demo .sideNavList button:disabled,
    body.mode-demo .sideNavList button:hover,
    body.mode-demo .sideNavList button:focus-visible,
    body.mode-demo #navOnline {
      width: 38px !important;
      max-width: 38px !important;
      min-height: 38px;
      grid-template-columns: 1fr;
      place-items: center;
      padding: 0 !important;
      color: transparent !important;
      font-size: 0 !important;
    }

    body.mode-demo .sideNavList button .navIcon {
      color: var(--rift-gold-bright);
      font-size: 18px;
    }
    body.mode-demo .sideNavList button .navLabel {
      display: none !important;
    }

    body.mode-demo main {
      min-width: 0;
      min-height: 100dvh;
      padding: 12px 10px 20px;
      justify-content: flex-start;
      overflow-x: hidden;
    }

    body.mode-demo #boardStage {
      width: min(calc(var(--board-size) + 24px), calc(100vw - var(--side-nav-width) - 20px));
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas:
        "enemy"
        "board"
        "own";
      gap: 8px;
      align-items: center;
      justify-items: center;
    }

    body.mode-demo #boardWrap {
      width: min(calc(var(--board-size) + 24px), calc(100vw - var(--side-nav-width) - 20px));
      padding: 8px;
      border-radius: 8px;
    }

    body.mode-demo #ranks,
    body.mode-demo #files {
      display: none;
    }

    body.mode-demo .effectRail {
      width: min(calc(var(--board-size) + 24px), calc(100vw - var(--side-nav-width) - 20px));
      min-height: 0;
      max-height: 78px;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      gap: 8px;
      padding: 6px;
      border: 1px solid rgba(200, 155, 60, .20);
      border-radius: 8px;
      background: rgba(8, 12, 18, .58);
      overflow: hidden;
    }

    body.mode-demo .effectRailHeader {
      width: 62px;
      min-height: 46px;
      flex: 0 0 62px;
      border-radius: 8px;
      font-size: 10px;
      padding: 5px 4px;
    }

    body.mode-demo .effectGroups,
    body.mode-demo .effectRail.left .effectGroups {
      min-width: 0;
      flex: 1 1 auto;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    body.mode-demo .effectGroups::-webkit-scrollbar {
      display: none;
    }

    body.mode-demo .effectGroup {
      width: auto;
      flex: 0 0 auto;
      flex-direction: row;
      align-items: center;
      gap: 6px;
    }

    body.mode-demo .effectGroupHeader {
      width: auto;
      min-width: 28px;
      padding: 0;
      border-top: 0;
      font-size: 0;
      letter-spacing: 0;
    }

    body.mode-demo .effectGroupHeader span {
      display: none;
    }

    body.mode-demo .effectGroupHeader b {
      min-width: 16px;
      height: 16px;
      display: inline-flex;
      font-size: 9px;
    }

    body.mode-demo .effectList,
    body.mode-demo .effectRail.left .effectList,
    body.mode-demo .effectRail.right .effectList {
      flex-direction: row;
      gap: 8px;
      padding: 0;
    }

    /* In horizontal compact rails, hide the bottom footer block (Aufgeben/Remis + Zughistorie) */
    body.mode-demo .effectRailFooter {
      display: none;
    }

    body.mode-demo #gamePanel,
    body.mode-demo #pieceInfo {
      width: min(calc(var(--board-size) + 24px), calc(100vw - var(--side-nav-width) - 20px));
    }

    body.mode-demo #gamePanel {
      grid-template-columns: minmax(0, 1fr);
      align-items: stretch;
      padding: 10px;
    }

    body.mode-demo #gameStatus {
      gap: 5px 8px;
    }

    body.mode-demo #gameActions {
      justify-content: center;
    }

    body.mode-demo #startDemoMatch {
      max-width: 100%;
      white-space: normal;
    }
  }

  @media (orientation: portrait) and (max-width: 1180px) {
    @supports not (height: 100dvh) {
      body.mode-demo {
        --board-size: min(
          calc(100vw - var(--side-nav-width) - 54px),
          calc(100vh - 368px),
          820px
        );
      }
    }
  }

  body.mode-lab .modeScreen {
    display: none;
  }
  body.mode-lab #showModeSelect {
    display: none;
  }

  #boardStage {
    display: grid;
    grid-template-columns: var(--rail-size) auto var(--rail-size);
    grid-template-areas:
      "own board enemy";
    gap: 10px 12px;
    align-items: start;
    filter: drop-shadow(0 24px 34px rgba(0,0,0,.42));
  }
  #boardWrap { grid-area: board; }
  #boardWrap {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    place-items: center;
    padding: 10px;
    border: 1px solid rgba(200, 155, 60, .56);
    border-radius: 10px;
    background:
      linear-gradient(135deg, rgba(240, 210, 131, .17), transparent 24% 76%, rgba(10, 200, 185, .13)),
      linear-gradient(180deg, #1b1820, #0b0f15 68%, #050607);
    box-shadow:
      0 0 0 1px rgba(0,0,0,.72),
      0 0 26px rgba(10, 200, 185, .11),
      inset 0 0 0 2px rgba(120, 90, 40, .45),
      inset 0 0 24px rgba(0,0,0,.86);
    user-select: none;
  }
  #ranks, #files {
    display: none;
  }
  #board {
    width: var(--board-size);
    height: var(--board-size);
    position: relative;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    gap: 1px;
    padding: 4px;
    border: 2px solid var(--rift-gold);
    border-radius: 7px;
    overflow: hidden;
    background:
      radial-gradient(circle at 50% 50%, rgba(10,200,185,.24), transparent 46%),
      linear-gradient(135deg, #c89b3c, #3a2a13 34%, #0a1117 50%, #785a28 77%, #f0d283);
    box-shadow:
      0 0 0 1px rgba(0,0,0,.86),
      0 0 22px rgba(10, 200, 185, .22),
      inset 0 0 0 1px rgba(240, 210, 131, .22),
      inset 0 0 28px rgba(0,0,0,.70);
    touch-action: none;
  }
  #board::before,
  #board::after {
    content: "";
    position: absolute;
    inset: 4px;
    pointer-events: none;
  }
  #board::before {
    z-index: 3;
    border: 1px solid rgba(240,210,131,.22);
    box-shadow:
      inset 0 0 0 1px rgba(0,0,0,.42),
      inset 0 0 32px rgba(0,0,0,.46);
  }
  #board::after {
    z-index: 4;
    opacity: .22;
    background:
      linear-gradient(90deg, transparent calc(50% - 1px), rgba(10,200,185,.45) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
      linear-gradient(0deg, transparent calc(50% - 1px), rgba(10,200,185,.45) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
      radial-gradient(circle at 50% 50%, transparent 0 15%, rgba(240,210,131,.35) 16% 17%, transparent 18% 100%);
    mix-blend-mode: screen;
  }
  .sq {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
    overflow: hidden;
    isolation: isolate;
  }
  .sq::before {
    content: "";
    position: absolute;
    inset: 9%;
    border: 1px solid rgba(240,210,131,.11);
    opacity: .7;
    pointer-events: none;
    z-index: 0;
  }
  .sqCoord {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    color: color-mix(in srgb, var(--rift-gold-bright) 72%, rgba(255,255,255,.38));
    font-size: clamp(8px, calc(var(--board-size) / 68), 12px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    opacity: .62;
    text-shadow: 0 1px 2px rgba(0,0,0,.72), 0 0 5px rgba(240,210,131,.22);
  }
  .sqCoordRank {
    left: 5px;
    top: 5px;
  }
  .sqCoordFile {
    right: 5px;
    bottom: 5px;
  }
  .sq.light {
    --sq-bg:
      radial-gradient(circle at 48% 44%, rgba(240,210,131,.10), transparent 45%),
      linear-gradient(135deg, rgba(255,255,255,.05), transparent 30% 70%, rgba(0,0,0,.18)),
      repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 13px),
      var(--light);
    background: var(--sq-bg);
  }
  .sq.dark  {
    --sq-bg:
      radial-gradient(circle at 50% 42%, rgba(10,200,185,.08), transparent 42%),
      linear-gradient(135deg, rgba(255,255,255,.025), transparent 28% 74%, rgba(0,0,0,.28)),
      repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 1px, transparent 1px 14px),
      var(--dark);
    background: var(--sq-bg);
  }
  .sq:nth-child(1),
  .sq:nth-child(8),
  .sq:nth-child(57),
  .sq:nth-child(64) {
    box-shadow: inset 0 0 0 1px rgba(240,210,131,.18);
  }
  .sq.dragSource .chip {
    opacity: 0;
  }
  .sq.dragMoveTarget::after,
  .sq.dragCaptureTarget::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
  }
  .sq.dragMoveTarget::after {
    background: radial-gradient(circle, color-mix(in srgb, var(--rift-gold-bright) 66%, transparent) 0 20%, transparent 23%);
  }
  .sq.dragCaptureTarget::after {
    background: radial-gradient(circle, rgba(220, 70, 70, .92) 0 14%, transparent 17%);
  }
  .sq.dragOverAllowed::after {
    inset: 5%;
    border-style: solid;
    box-shadow:
      0 0 0 2px rgba(255,255,255,.16),
      0 0 16px color-mix(in srgb, var(--piece-main-color, var(--accent)) 42%, transparent);
  }

  .chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    aspect-ratio: 1;
    border-radius: 50%;
    font-size: clamp(20px, 4.2vh, 38px);
    line-height: 1;
    z-index: 1;
    cursor: grab;
    user-select: none;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
  }
  .chip.dragging {
    cursor: grabbing;
    opacity: 0;
  }
  .pointerDragGhost {
    cursor: grabbing;
    user-select: none;
    touch-action: none;
  }
  .chip.w { background:#f3eadb; color:#1a1a1f; box-shadow: inset 0 0 0 2px #1a1a1f, 0 1px 3px rgba(0,0,0,.3); }
  .chip.b { background:#1a1a1f; color:#f3eadb; box-shadow: inset 0 0 0 2px #f3eadb, 0 1px 3px rgba(0,0,0,.3); }
  .chip.hasAsset {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }
  .chip .pieceAsset {
    width: 112%;
    height: 112%;
    object-fit: contain;
    pointer-events: none;
    filter:
      drop-shadow(0 5px 4px rgba(0,0,0,.68))
      drop-shadow(0 0 7px rgba(10,200,185,.18));
  }
  #board .sq:not(.selected):not(.actionActor):not(.actionSourcePicked):not(.pickCandidate):not(.kingInCheck) .chip:not(.dragging) {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
  .sq.move::after,
  .sq.capture::after,
  .sq.extra::after,
  .sq.actionTarget::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  }
  .sq.selected {
    box-shadow: inset 0 0 0 1px rgba(77, 208, 196, .7), inset 0 0 24px rgba(77, 208, 196, .3);
  }
  .sq.selected::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(77, 208, 196, .35), rgba(35, 155, 149, .08) 60%, transparent);
  }
  /* Hide the selected-piece teal marker while the cursor is in any effect
     rail — so the rail's own hover/preview state isn't fighting with the
     board glow. Skip the suppression when this square is the hovered
     effect's actor (.effectHover) so its gold corner markers stay visible. */
  body:has(.effectRail:hover) .sq.selected:not(.effectHover) {
    box-shadow: none;
  }
  body:has(.effectRail:hover) .sq.selected:not(.effectHover)::after {
    background: none;
  }
  body:has(.effectRail:hover) .sq.selected:not(.effectHover) .chip {
    animation: none;
  }
  .sq.lastMoveFrom,
  .sq.lastMoveTo {
    box-shadow:
      inset 0 0 0 1px rgba(216, 177, 90, .22),
      inset 0 0 18px rgba(216, 177, 90, .08);
  }
  .sq.lastAction-move {
    --last-action-tone: rgba(216, 177, 90, .76);
  }
  .sq.lastAction-capture {
    --last-action-tone: rgba(226, 106, 106, .82);
  }
  .sq.lastAction-effect {
    --last-action-tone: rgba(77, 208, 196, .82);
  }
  .sq.lastMoveTo {
    box-shadow:
      inset 0 0 0 1px rgba(216, 177, 90, .34),
      inset 0 0 20px rgba(216, 177, 90, .12),
      inset 0 -1px 0 rgba(216, 177, 90, .42);
  }
  .sq.lastMoveFrom.lastAction-capture {
    box-shadow:
      inset 0 0 0 1px rgba(226, 106, 106, .24),
      inset 0 0 18px rgba(226, 106, 106, .08);
  }
  .sq.lastMoveCapture {
    box-shadow:
      inset 0 0 0 1px rgba(226, 106, 106, .34),
      inset 0 0 20px rgba(226, 106, 106, .11),
      inset 0 -1px 0 rgba(226, 106, 106, .42);
  }
  .sq.lastMoveFrom.lastAction-effect {
    box-shadow:
      inset 0 0 0 1px rgba(77, 208, 196, .24),
      inset 0 0 18px rgba(77, 208, 196, .08);
  }
  .sq.lastMoveEffect {
    box-shadow:
      inset 0 0 0 1px rgba(77, 208, 196, .34),
      inset 0 0 20px rgba(77, 208, 196, .12),
      inset 0 -1px 0 rgba(77, 208, 196, .42);
  }
  .sq.lastActionSquare::before {
    content: "";
    position: absolute;
    inset: 8px;
    z-index: 1;
    pointer-events: none;
    border: 1px solid var(--last-action-tone, rgba(216, 177, 90, .7));
    opacity: 0;
    transform: scale(.82);
  }
  .sq.lastActionPulse.lastAction-move::before {
    animation: lastMoveBreath 1.45s ease-out 1;
  }
  .sq.lastActionPulse.lastAction-capture::before {
    border-color: rgba(226, 106, 106, .88);
    animation: lastCaptureStrike 1.35s ease-out 1;
  }
  .sq.lastActionPulse.lastAction-effect::before {
    border-color: rgba(77, 208, 196, .88);
    box-shadow: 0 0 16px rgba(77, 208, 196, .18);
    animation: lastEffectFocus 1.65s ease-out 1;
  }
  .sq .lastMoveMark {
    position: absolute;
    inset: 5px;
    z-index: 4;
    pointer-events: none;
    opacity: .96;
  }
  .sq .lastMoveMark::before,
  .sq .lastMoveMark::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border-color: rgba(216, 177, 90, .78);
    border-style: solid;
  }
  .sq .lastMoveMark-capture::before,
  .sq .lastMoveMark-capture::after {
    border-color: rgba(226, 106, 106, .78);
  }
  .sq .lastMoveMark-effect::before,
  .sq .lastMoveMark-effect::after {
    border-color: rgba(77, 208, 196, .82);
  }
  .sq .lastMoveMark-from::before {
    left: 0;
    top: 0;
    border-width: 1px 0 0 1px;
  }
  .sq .lastMoveMark-from::after {
    right: 0;
    bottom: 0;
    width: 6px;
    height: 6px;
    border-width: 0 1px 1px 0;
    opacity: .58;
  }
  .sq .lastMoveMark-to::before {
    right: 0;
    top: 0;
    border-width: 1px 1px 0 0;
  }
  .sq .lastMoveMark-to::after {
    left: 0;
    bottom: 0;
    border-width: 0 0 1px 1px;
  }
  .sq.lastMoveCapture .lastMoveMark::before,
  .sq.lastMoveCapture .lastMoveMark::after {
    border-color: rgba(226, 106, 106, .72);
  }
  .sq.lastMoveEffect .lastMoveMark::before,
  .sq.lastMoveEffect .lastMoveMark::after {
    border-color: rgba(77, 208, 196, .82);
  }
  @keyframes lastMoveBreath {
    0% { opacity: 0; transform: scale(.74); }
    22% { opacity: .72; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.18); }
  }
  @keyframes lastCaptureStrike {
    0% { opacity: 0; transform: scale(1.2); }
    18% { opacity: .88; transform: scale(.9); }
    55% { opacity: .28; transform: scale(1.04); }
    100% { opacity: 0; transform: scale(1.18); }
  }
  @keyframes lastEffectFocus {
    0% { opacity: 0; transform: scale(.72) rotate(0deg); }
    20% { opacity: .82; transform: scale(1) rotate(0deg); }
    58% { opacity: .34; transform: scale(.94) rotate(45deg); }
    100% { opacity: 0; transform: scale(1.16) rotate(45deg); }
  }
  .sq.dangerTarget {
    box-shadow: inset 0 0 0 2px rgba(255, 184, 107, .48);
  }
  .sq .dangerIcon {
    position: absolute;
    right: 4px;
    top: 4px;
    z-index: 5;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(35, 20, 12, .92);
    border: 1px solid rgba(255, 184, 107, .72);
    color: #ffd8a8;
    font-size: 11px;
    font-weight: 800;
    pointer-events: none;
  }
  .sq.move::after {
    background: radial-gradient(circle, color-mix(in srgb, var(--rift-gold-bright) 66%, transparent) 0 20%, transparent 23%);
  }
  .sq.capture::after {
    inset: 0;
    border-radius: 0;
    border: 0;
    background: radial-gradient(circle, rgba(220, 70, 70, .92) 0 14%, transparent 17%);
  }
  .sq.extra::after {
    background: radial-gradient(circle, color-mix(in srgb, var(--piece-main-color, var(--hl-extra)) 70%, transparent) 0 18%, transparent 21%);
  }
  .sq.actionTarget::after {
    inset: 0;
    border-radius: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .sq.actionMoveTarget::after {
    background: radial-gradient(circle, color-mix(in srgb, var(--piece-main-color, #d4af37) 78%, transparent) 0 16%, transparent 19%);
  }
  .sq.actionCaptureTarget::after {
    inset: 0;
    border-radius: 0;
    border: 0;
    background: radial-gradient(circle, color-mix(in srgb, var(--piece-main-color, #ff6b6b) 78%, transparent) 0 16%, transparent 19%);
  }
  .sq.actionSourceTarget::after {
    inset: 0;
    border-radius: 0;
    border: 0;
    background: radial-gradient(circle, color-mix(in srgb, var(--piece-main-color, #5a9ad6) 78%, transparent) 0 16%, transparent 19%);
  }
  .sq.actionTarget.abilityField::before,
  .sq.effectPotentialHover.abilityField::before,
  .sq.effectPotentialActive.abilityField::before {
    content: none;
  }
  .sq.actionActor .chip {
    animation: pickCandidatePulse 1.1s ease-in-out infinite;
  }
  #board.effectForeignHover .sq.actionActor .chip,
  #board.effectForeignHover .sq.actionSourcePicked .chip,
  #board.effectForeignHover .sq.pickCandidate .chip {
    animation: none;
    box-shadow: none;
  }
  #board.effectForeignHover .pickCandidateMarker {
    opacity: 0;
  }
  #board.effectForeignHover .sq.actionMoveTarget:not(.effectHover):not(.effectPotentialHover)::after,
  #board.effectForeignHover .sq.actionCaptureTarget:not(.effectHover):not(.effectPotentialHover)::after,
  #board.effectForeignHover .sq.actionSourceTarget:not(.effectHover):not(.effectPotentialHover)::after,
  #board.effectForeignHover .sq.move:not(.effectHover):not(.effectPotentialHover)::after,
  #board.effectForeignHover .sq.capture:not(.effectHover):not(.effectPotentialHover)::after,
  #board.effectForeignHover .sq.extra:not(.effectHover):not(.effectPotentialHover)::after,
  #board.effectForeignHover .sq.selected:not(.effectHover):not(.effectPotentialHover)::after {
    background: none;
  }
  #board.effectListGapHover .sq.actionMoveTarget::after,
  #board.effectListGapHover .sq.actionCaptureTarget::after,
  #board.effectListGapHover .sq.actionSourceTarget::after,
  #board.effectListGapHover .sq.move::after,
  #board.effectListGapHover .sq.capture::after,
  #board.effectListGapHover .sq.extra::after,
  #board.effectListGapHover .sq.selected::after {
    background: none;
  }
  .sq.actionSourcePicked .chip {
    animation: pickCandidatePulse 1.1s ease-in-out infinite;
  }
  .sq.effectHover .chip {
    filter: drop-shadow(0 6px 6px rgba(0,0,0,.42));
  }
  .sq.actionActor.effectHover::after,
  .sq.actionSourcePicked.effectHover::after,
  .sq.pickCandidate.effectHover::after {
    content: none;
  }
  .sq.effectHover::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 2;
    --effect-corner-gold: color-mix(in srgb, var(--rift-gold-bright) 78%, transparent);
    background:
      linear-gradient(var(--effect-corner-gold), var(--effect-corner-gold)) left 6px top 6px / 18px 2px no-repeat,
      linear-gradient(var(--effect-corner-gold), var(--effect-corner-gold)) left 6px top 6px / 2px 18px no-repeat,
      linear-gradient(var(--effect-corner-gold), var(--effect-corner-gold)) right 6px top 6px / 18px 2px no-repeat,
      linear-gradient(var(--effect-corner-gold), var(--effect-corner-gold)) right 6px top 6px / 2px 18px no-repeat,
      linear-gradient(var(--effect-corner-gold), var(--effect-corner-gold)) left 6px bottom 6px / 18px 2px no-repeat,
      linear-gradient(var(--effect-corner-gold), var(--effect-corner-gold)) left 6px bottom 6px / 2px 18px no-repeat,
      linear-gradient(var(--effect-corner-gold), var(--effect-corner-gold)) right 6px bottom 6px / 18px 2px no-repeat,
      linear-gradient(var(--effect-corner-gold), var(--effect-corner-gold)) right 6px bottom 6px / 2px 18px no-repeat;
  }
  .sq.selected .chip {
    filter: drop-shadow(0 6px 5px rgba(0,0,0,.42));
  }
  .sq.effectPotentialActive {
    background: var(--sq-bg);
  }
  .sq.effectPotentialHover::after,
  .sq.effectTargetHover::before,
  .sq.effectCaptureHover::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    background: radial-gradient(circle, color-mix(in srgb, var(--piece-main-color, #d4af37) 55%, transparent) 0 11%, transparent 14%);
  }
  .sq.effectSourceHover::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    background: radial-gradient(circle, color-mix(in srgb, var(--piece-main-color, #d4af37) 55%, transparent) 0 11%, transparent 14%);
  }
  .sq.placeTarget { outline: 2px dashed var(--accent); outline-offset: -4px; }
  .sq.pickCandidate .chip {
    animation: pickCandidatePulse 1.1s ease-in-out infinite;
  }
  .sq .pickCandidateMarker {
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 6;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 26, 31, .92);
    border: 1px solid rgba(212, 175, 55, .86);
    color: #ffe7a3;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
    box-shadow: 0 0 10px rgba(212, 175, 55, .42);
  }
  @keyframes pickCandidatePulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(212, 175, 55, .55), 0 0 14px rgba(212, 175, 55, .55); }
    50%      { box-shadow: 0 0 0 5px rgba(212, 175, 55, .85), 0 0 22px rgba(212, 175, 55, .8); }
  }
  .sq.attackedByEnemy { box-shadow: inset 0 0 0 3px rgba(230,80,80,.35); }
  .sq.threatActor .chip {
    filter: drop-shadow(0 6px 5px rgba(0,0,0,.42));
  }
  .sq.threatActor::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 4px;
    --hover-corner-gold: color-mix(in srgb, var(--rift-gold-bright) 58%, transparent);
    background:
      linear-gradient(var(--hover-corner-gold), var(--hover-corner-gold)) left 6px top 6px / 18px 2px no-repeat,
      linear-gradient(var(--hover-corner-gold), var(--hover-corner-gold)) left 6px top 6px / 2px 18px no-repeat,
      linear-gradient(var(--hover-corner-gold), var(--hover-corner-gold)) right 6px top 6px / 18px 2px no-repeat,
      linear-gradient(var(--hover-corner-gold), var(--hover-corner-gold)) right 6px top 6px / 2px 18px no-repeat,
      linear-gradient(var(--hover-corner-gold), var(--hover-corner-gold)) left 6px bottom 6px / 18px 2px no-repeat,
      linear-gradient(var(--hover-corner-gold), var(--hover-corner-gold)) left 6px bottom 6px / 2px 18px no-repeat,
      linear-gradient(var(--hover-corner-gold), var(--hover-corner-gold)) right 6px bottom 6px / 18px 2px no-repeat,
      linear-gradient(var(--hover-corner-gold), var(--hover-corner-gold)) right 6px bottom 6px / 2px 18px no-repeat;
    pointer-events: none;
    z-index: 2;
  }
  .sq.threatMove::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(circle, rgba(255, 200, 100, .32) 16%, transparent 18%);
  }
  .sq.threatCapture::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 0;
    pointer-events: none;
    z-index: 3;
    border: 0;
    background: radial-gradient(circle, rgba(220, 70, 70, .55) 0 11%, transparent 14%);
  }
  .sq.threatPoison::before {
    background: radial-gradient(circle, rgba(90, 192, 140, .52) 0 11%, transparent 14%);
  }
  .sq.threatReflect .chip {
    outline: 2px solid rgba(125, 184, 255, .9);
    outline-offset: 4px;
    animation: threatReflectPulse 1.4s ease-in-out infinite;
  }
  .threatPreviewIcon {
    position: absolute;
    font-size: 14px;
    z-index: 5;
    pointer-events: none;
    text-shadow: 0 0 5px rgba(0,0,0,.95), 0 0 2px rgba(0,0,0,.95);
    line-height: 1;
  }
  .threatPreviewIcon.ghoulRise   { bottom: 3px; right: 3px; }
  .threatPreviewIcon.maskTransform { top: 3px; right: 3px; }
  @keyframes threatReflectPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(125, 184, 255, .55); }
    50%      { box-shadow: 0 0 0 6px rgba(125, 184, 255, .15); }
  }
  .sq.abilityField::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 0;
    border-radius: 0;
    pointer-events: none;
    z-index: 3;
    opacity: 1;
    background: radial-gradient(circle, color-mix(in srgb, var(--ability-tone, #d4af37) 55%, transparent) 0 11%, transparent 14%);
  }
  .sq.abilitySource .chip::after {
    content: none;
  }
  .sq.status-planned .chip::after {
    content: none;
  }
  .sq.status-partial .chip::after {
    content: none;
  }
  .sq.abilitySourceHasField.abilitySource-aura .chip::before,
  .sq.abilitySourceHasField.abilitySource-poison .chip::before,
  .sq.abilitySourceHasField.abilitySource-control .chip::before,
  .sq.abilitySourceHasField.abilitySource-shield .chip::before {
    content: none;
  }
  .sq.abilitySource-shield .chip::after {
    border-color: var(--ability-tone, #7db8ff);
    box-shadow:
      0 0 12px var(--ability-tone, #7db8ff),
      inset 0 0 8px color-mix(in srgb, var(--ability-tone, #7db8ff) 35%, transparent);
  }
  .sq.abilitySource-danger .chip::after {
    border-color: var(--ability-tone, #ff6b6b);
    box-shadow: 0 0 16px var(--ability-tone, #ff6b6b);
  }