/* Sors Duo: the Syndicate skin (green CRT menus, red agent boxes, blue IPA bars), its CRT switch and the team selection card; colours from css/amiga-colors.css | games/Sors_Duo/css/syndicate.css | v.0.6 */

/* Audiowide, SIL Open Font License 1.1 (fonts/OFL-Audiowide.txt): wide square letters like
   the menus of the game, full Polish letters (2026-09-27). */
@font-face { font-family: 'Audiowide'; src: url('../fonts/Audiowide-Regular.ttf') format('truetype'); font-display: swap; }

:root {
  /* The phosphor green of the menus and the colours of the mission panel, palette only;
     dark shades are palette colours mixed with black. */
  --sy-green: var(--amiga-light-green);
  --sy-green-mid: color-mix(in srgb, var(--amiga-light-green) 55%, var(--amiga-black));
  --sy-green-lo: color-mix(in srgb, var(--amiga-dark-green) 35%, var(--amiga-black));
  --sy-green-deep: color-mix(in srgb, var(--amiga-dark-green) 16%, var(--amiga-black));
  --sy-red: var(--amiga-red-orange);
  --sy-red-lo: var(--amiga-dark-red);
  --sy-yellow: var(--amiga-yellow);
  --sy-blue: var(--amiga-medium-blue);
  --sy-blue-lo: color-mix(in srgb, var(--amiga-blue) 45%, var(--amiga-black));
  --sy-ink: var(--amiga-black);
  --sy-white: var(--amiga-white);
  --sy-font: 'Audiowide', 'Courier New', monospace;
  --sy-glow: 0 0 6px color-mix(in srgb, var(--amiga-light-green) 60%, transparent);
  /* A bevelled green menu frame. */
  --sy-frame: inset 0 0 0 1px var(--sy-green-mid), 0 0 0 2px var(--sy-green), 0 0 12px color-mix(in srgb, var(--amiga-light-green) 35%, transparent);
}

/* ---------------------------------------------------------------- the picture tube */
html.crt-off body { animation: sy-off .42s ease-in forwards; }
html.crt-on body { animation: sy-off .46s ease-out reverse; }
@keyframes sy-off {
  0% { transform: none; filter: none; }
  55% { transform: scale(1, .004); filter: brightness(4); }
  100% { transform: scale(0, .004); filter: brightness(6); }
}
@media (prefers-reduced-motion: reduce) { html.crt-off body, html.crt-on body { animation-duration: .01s; } }

/* ---------------------------------------------------------------- the arrival */
.sy-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sy-ink);
  cursor: pointer;
  font-family: var(--sy-font);
  color: var(--sy-green);
  text-shadow: var(--sy-glow);
}
.sy-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .35) 0 1px, transparent 1px 3px);
}
.sy-term { position: absolute; left: 6vw; top: 8vh; font-size: 14px; letter-spacing: 2px; line-height: 2; transition: opacity .4s; }
.sy-overlay.show-card .sy-term { opacity: 0; }

/* The team selection screen of the game, with the guest in agent box 2. */
.sy-card {
  position: relative;
  display: grid;
  grid-template-columns: 150px 250px 1fr;
  gap: 12px 16px;
  width: min(820px, 94vw);
  padding: 18px;
  background: linear-gradient(160deg, var(--sy-green-lo), var(--sy-green-deep) 60%, var(--sy-ink));
  box-shadow: var(--sy-frame);
  animation: sy-in .35s steps(5) both;
}
@keyframes sy-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.sy-title { grid-column: 1 / -1; text-align: center; font-size: 30px; letter-spacing: 4px; }
.sy-agent { grid-column: 1 / -1; padding: 6px 12px; font-size: 15px; letter-spacing: 3px; text-transform: uppercase; background: var(--sy-green-lo); box-shadow: inset 0 0 0 1px var(--sy-green-mid); }
/* Agent box 2: red with the yellow rim, the number and the portrait. */
.sy-box { position: relative; align-self: start; padding: 8px; background: var(--sy-red); box-shadow: 0 0 0 2px var(--sy-yellow), 0 0 0 4px var(--sy-ink); }
.sy-box b { position: absolute; top: 2px; left: 8px; z-index: 1; font-size: 26px; color: var(--sy-yellow); text-shadow: 2px 2px 0 var(--sy-ink); }
.sy-pic { width: 100%; aspect-ratio: 1; background: var(--sy-ink); }
.sy-pic canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.sy-body svg { display: block; width: 250px; height: 220px; overflow: visible; }
.sy-lead { fill: none; stroke: var(--sy-green); stroke-width: 1; }
.sy-dot { fill: var(--sy-green); }
.sy-modt { font-family: var(--sy-font); font-size: 11px; letter-spacing: 1px; fill: var(--sy-green); }
.sy-side { display: flex; flex-direction: column; gap: 10px; }
.sy-syn { padding: 6px 10px; font-size: 15px; letter-spacing: 2px; text-transform: uppercase; color: var(--sy-ink); text-shadow: none; background: var(--sy-green); }
.sy-bio { padding: 10px; font-size: 12px; line-height: 1.7; box-shadow: inset 0 0 0 1px var(--sy-green-mid); }
.sy-credit, .sy-hint { grid-column: 1 / -1; text-align: center; font-size: 11px; letter-spacing: 1px; color: var(--sy-green-mid); }

@media (max-width: 700px) {
  .sy-card { grid-template-columns: 110px 1fr; padding: 12px; }
  .sy-body { display: none; }
  .sy-title { font-size: 20px; }
  .sy-agent, .sy-syn { font-size: 12px; }
  .sy-bio { font-size: 11px; }
  .sy-term { font-size: 11px; }
}

/* ---------------------------------------------------------------- the table */
html.theme-syndicate { font-synthesis: none; }
html.theme-syndicate body {
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--amiga-dark-green) 18%, transparent) 1px, transparent 1px) 0 0 / 100% 32px,
    linear-gradient(90deg, color-mix(in srgb, var(--amiga-dark-green) 18%, transparent) 1px, transparent 1px) 0 0 / 32px 100%,
    radial-gradient(ellipse at 50% 40%, var(--sy-green-deep), var(--sy-ink) 75%);
}
html.theme-syndicate body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .25) 0 1px, transparent 1px 3px);
}

.theme-syndicate .topbar { border-bottom: 2px solid var(--sy-green); background: linear-gradient(180deg, var(--sy-green-lo), var(--sy-green-deep)); box-shadow: 0 0 12px color-mix(in srgb, var(--amiga-light-green) 30%, transparent); }
.theme-syndicate .brand { font-family: var(--sy-font); font-weight: 400; color: var(--sy-green); text-shadow: var(--sy-glow); }
.theme-syndicate .brand span { color: var(--sy-yellow); }
.theme-syndicate .stat b, .theme-syndicate .jackpot b, .theme-syndicate .dial b, .theme-syndicate .pot b { font-family: var(--sy-font); font-weight: 400; color: var(--sy-green-mid); }
.theme-syndicate .stat em, .theme-syndicate .dial em, .theme-syndicate .jackpot em { font-family: var(--sy-font); font-weight: 400; color: var(--sy-green); text-shadow: var(--sy-glow); }
.theme-syndicate .stat small { color: var(--sy-yellow); }
.theme-syndicate .jackpot { border: 0; border-radius: 0; background: var(--sy-ink); box-shadow: var(--sy-frame); }
.theme-syndicate .lang { font-family: var(--sy-font); color: var(--sy-green); border-color: var(--sy-green-mid); border-radius: 0; background: var(--sy-ink); }

.theme-syndicate .seat-head { border-bottom: 1px solid var(--sy-green-mid); }
.theme-syndicate .seat-name { font-family: var(--sy-font); font-weight: 400; text-transform: uppercase; letter-spacing: 2px; color: var(--sy-green); text-shadow: var(--sy-glow); }
.theme-syndicate .seat-stack { font-family: var(--sy-font); font-weight: 400; color: var(--sy-yellow); }

/* The machine is an agent status box of the mission screen: red with a yellow rim, the
   agent's number in the corner, the white health bar on the side, the blue IPA bars below.
   The reels inside stay like the casino ones. */
.theme-syndicate .cabinet {
  border: 2px solid var(--sy-yellow);
  border-radius: 0;
  background:
    linear-gradient(90deg, transparent calc(100% - 11px), var(--sy-white) calc(100% - 11px) calc(100% - 5px), transparent calc(100% - 5px)) 0 34px / 100% calc(100% - 60px) no-repeat,
    linear-gradient(180deg, var(--sy-red), color-mix(in srgb, var(--amiga-red-orange) 80%, var(--amiga-dark-red)));
  box-shadow: 0 0 0 3px var(--sy-ink), 0 0 0 5px var(--sy-green-mid), 0 14px 30px rgba(0, 0, 0, .7);
}
.theme-syndicate .machine-rival .cabinet { border-color: var(--sy-yellow); }
.theme-syndicate .cabinet::before {
  position: absolute;
  top: 2px;
  left: 8px;
  font-family: var(--sy-font);
  font-size: 22px;
  line-height: 1;
  color: var(--sy-yellow);
  text-shadow: 2px 2px 0 var(--sy-ink);
}
.theme-syndicate .machine-you .cabinet::before { content: '1'; }
.theme-syndicate .machine-rival .cabinet::before { content: '2'; }
/* The bulbs become the yellow star strip under the agent boxes. */
.theme-syndicate .bulbs {
  top: 10px;
  left: 40px;
  right: 40px;
  height: 10px;
  background: radial-gradient(circle, var(--sy-yellow) 0 2px, transparent 2.5px) 0 0 / 10px 10px repeat-x, var(--sy-red-lo);
  filter: none;
}
.theme-syndicate .machine.spinning .bulbs, .theme-syndicate .machine.win .bulbs { animation: sy-blink .25s steps(2) infinite; }
@keyframes sy-blink { 50% { opacity: .35; } }
.theme-syndicate .window { border: 2px solid var(--sy-ink); border-radius: 0; background: var(--sy-ink); box-shadow: inset 0 0 12px rgba(0, 0, 0, .9); }
.theme-syndicate .window::after { background: linear-gradient(90deg, transparent, var(--sy-green), transparent); }
/* Electronic reels: sharp while they step, a hard stop without the mechanical thud. */
.theme-syndicate .reel.blur .strip { --reel-blur: 0px; }
.theme-syndicate .reel.thud, .theme-syndicate .machine.jolt { animation: none; }
.theme-syndicate .reel::after { content: none; }
.theme-syndicate .reel.held { outline: 2px solid var(--sy-yellow); box-shadow: none; }
.theme-syndicate .sym { font-family: var(--sy-font); font-weight: 400; }
.theme-syndicate .sym-9 { color: var(--amiga-gray-22); }
.theme-syndicate .sym-10 { color: var(--amiga-dark-green); }
.theme-syndicate .sym-J { color: var(--amiga-blue); }
.theme-syndicate .sym-Q { color: var(--amiga-purple); }
.theme-syndicate .sym-K { color: var(--amiga-dark-red); }
.theme-syndicate .sym-A { color: var(--amiga-black); }
.theme-syndicate .reel.hidden-reel .sym-hidden { color: var(--sy-green-mid); }
.theme-syndicate .reel { background: linear-gradient(180deg, var(--sy-ink) 0%, var(--sy-green-deep) 30%, var(--sy-green-deep) 70%, var(--sy-ink) 100%); }
/* Daniel's painted symbols for this skin. */
html.art.theme-syndicate .sym-9 { background-image: url('../img/sym/sy/9.png'); }
html.art.theme-syndicate .sym-10 { background-image: url('../img/sym/sy/10.png'); }
html.art.theme-syndicate .sym-J { background-image: url('../img/sym/sy/J.png'); }
html.art.theme-syndicate .sym-Q { background-image: url('../img/sym/sy/Q.png'); }
html.art.theme-syndicate .sym-K { background-image: url('../img/sym/sy/K.png'); }
html.art.theme-syndicate .sym-A { background-image: url('../img/sym/sy/A.png'); }
/* The hold lamps are the IPA bars: dark until lit, then blue. */
.theme-syndicate .lamp { font-family: var(--sy-font); font-weight: 400; color: var(--sy-white); border: 0; border-radius: 0; background: var(--sy-blue-lo); box-shadow: inset 0 0 0 1px var(--sy-ink); }
.theme-syndicate .lamp.on { color: var(--sy-white); background: var(--sy-blue); box-shadow: inset 0 0 0 1px var(--sy-white); }
.theme-syndicate .lever-knob { background: radial-gradient(circle at 35% 30%, var(--sy-white), var(--sy-yellow) 45%, var(--sy-red-lo)); }
.theme-syndicate .lever::after { background: linear-gradient(180deg, var(--amiga-light-gray), var(--amiga-gray-22)); }

/* A reel seen by the scanner. */
.reel.scanned { outline: 2px solid var(--amiga-light-green); outline-offset: -2px; box-shadow: 0 0 14px color-mix(in srgb, var(--amiga-light-green) 70%, transparent); }

.theme-syndicate .card { border-radius: 0; border: 2px solid var(--sy-yellow); background: var(--sy-green-deep); font-family: var(--sy-font); }
.theme-syndicate .card.back { background: repeating-linear-gradient(0deg, var(--sy-green-lo) 0 2px, var(--sy-ink) 2px 4px); border-color: var(--sy-green); }
.theme-syndicate .hand-label { font-family: var(--sy-font); color: var(--sy-yellow); }

.theme-syndicate .portrait { border-radius: 0; border: 3px solid var(--sy-yellow); background: var(--sy-red); box-shadow: 0 0 0 2px var(--sy-ink); }
.theme-syndicate .rival-name { font-family: var(--sy-font); text-transform: uppercase; letter-spacing: 1px; color: var(--sy-green); text-shadow: var(--sy-glow); }
.theme-syndicate .rival-species, .theme-syndicate .rival-trait { font-family: var(--sy-font); color: var(--sy-green-mid); }
.theme-syndicate .dossier-btn { font-family: var(--sy-font); color: var(--sy-green); border: 0; border-radius: 0; background: var(--sy-ink); box-shadow: var(--sy-frame); }
.theme-syndicate .pot { border-color: var(--sy-green-mid); }
.theme-syndicate .pot em { font-family: var(--sy-font); background: none; -webkit-text-fill-color: currentColor; color: var(--sy-yellow); }
.theme-syndicate { --sors-lo: var(--sy-green-mid); --sors-hi: var(--sy-green); --sors-glow: color-mix(in srgb, var(--sy-green) 60%, transparent); --sors-font: var(--sy-font); --pot-glow: color-mix(in srgb, var(--sy-yellow) 40%, transparent); }
.theme-syndicate .phase { font-family: var(--sy-font); color: var(--sy-green-mid); }
.theme-syndicate .result { font-family: var(--sy-font); color: var(--sy-green); border: 0; border-radius: 0; background: var(--sy-ink); box-shadow: var(--sy-frame); text-shadow: var(--sy-glow); }
.theme-syndicate .result small { font-family: var(--sy-font); color: var(--sy-yellow); text-shadow: none; }
.theme-syndicate .log { font-family: var(--sy-font); border: 0; border-radius: 0; background: var(--sy-ink); box-shadow: var(--sy-frame); color: var(--sy-green-mid); }
.theme-syndicate .log li.you { color: var(--sy-white); }
.theme-syndicate .log li.rival, .theme-syndicate .log li.gold { color: var(--sy-yellow); }
.theme-syndicate .log li.sep { color: var(--sy-green); border-top-color: var(--sy-green-lo); }
.theme-syndicate .log li.node { color: var(--sy-green); text-shadow: var(--sy-glow); }
.theme-syndicate .speech { border-radius: 0; border: 0; background: var(--sy-ink); color: var(--sy-green); box-shadow: var(--sy-frame); font-family: var(--sy-font); text-shadow: var(--sy-glow); }
.theme-syndicate .bubble { font-family: var(--sy-font); border-color: var(--sy-green); background: var(--sy-ink); color: var(--sy-yellow); border-radius: 0; }
.theme-syndicate .dossier { font-family: var(--sy-font); border: 0; border-radius: 0; background: var(--sy-green-deep); box-shadow: var(--sy-frame); color: var(--sy-green); }
.theme-syndicate .dossier h3 { font-family: var(--sy-font); color: var(--sy-yellow); }
.theme-syndicate .dossier .entry b { color: var(--sy-white); }
.theme-syndicate .toast { border: 0; border-radius: 0; background: var(--sy-ink); box-shadow: var(--sy-frame); }
.theme-syndicate .toast b, .theme-syndicate .toast small, .theme-syndicate .toast span { font-family: var(--sy-font); color: var(--sy-green); }

.theme-syndicate .actions { border-top: 2px solid var(--sy-green); background: linear-gradient(0deg, var(--sy-green-deep), var(--sy-green-lo)); box-shadow: 0 0 12px color-mix(in srgb, var(--amiga-light-green) 30%, transparent); }
.theme-syndicate .actions::after { content: 'Tribute to Syndicate by Bullfrog (1993)'; font-family: var(--sy-font); font-size: 11px; letter-spacing: 0; color: var(--sy-green-mid); }
.theme-syndicate .hint { font-family: var(--sy-font); color: var(--sy-green-mid); }
/* Menu items of the game: a green square in front, green text in a bevelled bar. */
.theme-syndicate .btn {
  border: 0;
  border-radius: 0;
  background: linear-gradient(var(--sy-green), var(--sy-green)) 8px 50% / 7px 7px no-repeat, var(--sy-green-lo);
  box-shadow: inset 0 0 0 1px var(--sy-green-mid);
  padding-left: 22px;
  color: var(--sy-green);
  font-family: var(--sy-font);
  font-weight: 400;
  text-shadow: var(--sy-glow);
}
.theme-syndicate .btn:hover:not(:disabled) { color: var(--sy-ink); background: linear-gradient(var(--sy-ink), var(--sy-ink)) 8px 50% / 7px 7px no-repeat, var(--sy-green); text-shadow: none; }
.theme-syndicate .btn-gold { color: var(--sy-yellow); }
/* The weapon slots of the mission panel. */
.theme-syndicate .chip { border-radius: 0; font-family: var(--sy-font); background: var(--sy-blue-lo); color: var(--sy-white); border-color: var(--sy-blue); }
.theme-syndicate .chip.on { background: var(--sy-red); border-color: var(--sy-yellow); color: var(--sy-white); }
.theme-syndicate .slider { accent-color: var(--sy-green); }
.theme-syndicate .fx-banner {
  border-color: var(--sy-green);
  background: linear-gradient(90deg, transparent, var(--sy-green-lo) 12%, var(--sy-green-deep) 50%, var(--sy-green-lo) 88%, transparent);
  color: var(--sy-green);
  font-family: var(--sy-font);
  text-shadow: var(--sy-glow);
}

/* ---------------------------------------------------------------- font sizes */
/* Audiowide is wide; every text gets a size that keeps the layout still. */
.theme-syndicate .brand { font-size: 20px; }
.theme-syndicate .stat b, .theme-syndicate .jackpot b, .theme-syndicate .dial b, .theme-syndicate .pot b { font-size: 10px; letter-spacing: 1px; }
.theme-syndicate .pot b { font-size: 13px; letter-spacing: 3px; }
.theme-syndicate .stat em, .theme-syndicate .dial em { font-size: 13px; }
.theme-syndicate .jackpot em { font-size: 15px; }
.theme-syndicate .lang { font-size: 11px; }
.theme-syndicate .seat-name { font-size: 13px; }
.theme-syndicate .seat-stack { font-size: 14px; }
.theme-syndicate .sym { font-size: 28px; }
.theme-syndicate .card { font-size: 26px; }
.theme-syndicate .hand-label { font-size: 12px; }
.theme-syndicate .lamp { font-size: 9px; letter-spacing: 1px; padding: 3px 0; }
.theme-syndicate .rival-name { font-size: 14px; }
.theme-syndicate .rival-species, .theme-syndicate .rival-trait { font-size: 10px; letter-spacing: 0; }
.theme-syndicate .dossier-btn { font-size: 10px; letter-spacing: 1px; }
.theme-syndicate .pot em { font-size: 34px; }
.theme-syndicate .phase { font-size: 10px; letter-spacing: 1px; }
.theme-syndicate .result { font-size: 14px; line-height: 1.5; }
.theme-syndicate .result small { font-size: 10px; line-height: 1.6; }
.theme-syndicate .log { font-size: 11px; line-height: 1.7; }
.theme-syndicate .speech { font-size: 11px; line-height: 1.6; }
.theme-syndicate .bubble { font-size: 11px; }
.theme-syndicate .dossier { font-size: 11px; line-height: 1.7; }
.theme-syndicate .hint { font-size: 11px; }
.theme-syndicate .btn { font-size: 11px; letter-spacing: 0; padding-top: 12px; padding-bottom: 12px; }
.theme-syndicate .btn small { font-size: 9px; }
.theme-syndicate .chip { font-size: 10px; }