/* "Vitrin": a jeweller's display case. Charcoal background, warm champagne gold, light text.
   Palette is chosen with data-palette on <html> (default: charcoal; also "green", "navy"). */
:root {
  --bg: #121212; --bg-hi: #1E1E1E;
  --ink: #EDE6D8;          /* product names, phones, clock */
  --sell: #F3DCA6;         /* Satış: the brightest figure */
  --muted: #B39A6B;        /* Alış and secondary text */
  --gold: #D9B36C; --gold-hi: #F1D59A; --gold-lo: #B98A3E;
  --rule: rgba(217, 179, 108, .2); --dot: rgba(217, 179, 108, .55);
  --warn: #E7A653;
  --serif: "Cormorant Garamond", "Cormorant", Garamond, Georgia, "Times New Roman", serif;
  --caps: Cinzel, "Trajan Pro", "Cormorant Garamond", Georgia, serif;
  color-scheme: dark;
  box-sizing: border-box;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
           env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  background: var(--bg);
}
:root[data-palette="green"] { --bg: #0C1813; --bg-hi: #15291F; }
:root[data-palette="navy"] { --bg: #0A1120; --bg-hi: #142039; }

*, *::before, *::after { box-sizing: inherit; }
body {
  margin: 0; min-height: 100vh; color: var(--ink);
  background: radial-gradient(120% 90% at 50% 30%, var(--bg-hi) 0%, var(--bg) 70%) fixed, var(--bg);
  font-family: var(--serif); font-size: 18px; line-height: 1.4;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.num { font-variant-numeric: lining-nums tabular-nums; }

/* Engraved frame: two fine gold lines with small corner brackets. */
.wrap { position: relative; max-width: 1100px; margin: 0 auto; padding: 28px clamp(22px, 4vw, 48px); }
.wrap::before, .wrap::after { content: ""; position: absolute; pointer-events: none; inset: 8px; }
.wrap::before { border: 1px solid var(--rule); outline: 1px solid var(--rule); outline-offset: 4px; }
.wrap::after {
  --c: 18px; --t: 1.5px; inset: 4px;
  background:
    linear-gradient(var(--gold), var(--gold)) top left / var(--c) var(--t),
    linear-gradient(var(--gold), var(--gold)) top left / var(--t) var(--c),
    linear-gradient(var(--gold), var(--gold)) top right / var(--c) var(--t),
    linear-gradient(var(--gold), var(--gold)) top right / var(--t) var(--c),
    linear-gradient(var(--gold), var(--gold)) bottom left / var(--c) var(--t),
    linear-gradient(var(--gold), var(--gold)) bottom left / var(--t) var(--c),
    linear-gradient(var(--gold), var(--gold)) bottom right / var(--c) var(--t),
    linear-gradient(var(--gold), var(--gold)) bottom right / var(--t) var(--c);
  background-repeat: no-repeat;
}

header.head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 8px 24px; padding-bottom: 14px; border-bottom: 3px double var(--gold-lo);
}
/* Shop name: engraved Roman capitals with a soft metallic sheen. */
.brand h1 {
  margin: 0; font-family: var(--caps); font-weight: 600; line-height: 1.05;
  font-size: clamp(30px, 6vw, 64px); letter-spacing: .14em; margin-right: -.14em;
  color: var(--gold);
  background: linear-gradient(100deg, var(--gold-lo) 0%, var(--gold-hi) 28%, var(--gold) 48%, var(--gold-hi) 70%, var(--gold-lo) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.meta { text-align: right; }
.meta .clock { font-size: clamp(18px, 2.2vw, 26px); font-weight: 600; color: var(--ink); letter-spacing: .04em; }
.status { display: inline-flex; align-items: center; gap: .5em; }
.dot { display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: var(--muted); opacity: .6; }
.dot.ok { background: #46B26B; opacity: 1; box-shadow: 0 0 .5em rgba(70, 178, 107, .55); }
.dot.bad { background: #E0533D; opacity: 1; box-shadow: 0 0 .5em rgba(224, 83, 61, .6); }

/* One list: 50% name and weight, 25% Alış, 25% Satış. */
table.board { width: 100%; border-collapse: collapse; table-layout: fixed; }
.board col.c-name { width: 50%; }
.board col.c-price { width: 25%; }
.board th {
  font-family: var(--caps); font-weight: 500; font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); text-align: right; padding: 14px 12px 6px;
}
.board th:first-child { text-align: left; }
.board td { padding: 10px 12px; border-bottom: 1px solid var(--rule); font-variant-numeric: lining-nums; }
.board tbody tr:last-child td { border-bottom: 0; }
#coins tr:last-child td { border-bottom: 1px solid var(--gold-lo); }
.board td.name { font-weight: 600; font-size: 22px; line-height: 1.15; padding-right: 3%; letter-spacing: .01em; }
/* Name, dotted leader, weight: as on a printed price card. The weight sits at the end of the
   name column so all weights line up; the leader stretches or shrinks with the screen. */
.board td.name .nm { display: flex; align-items: baseline; gap: .45em; }
.board td.name .nm > span { min-width: 0; }
.board td.name .dots {
  flex: 1 1 auto; min-width: .8em; height: .2em;
  background: radial-gradient(circle, var(--dot) .055em, transparent .075em) 0 50% / .42em .2em repeat-x;
}
.board td.name small {
  flex: none; font-style: normal; font-weight: 600; color: var(--gold); font-size: .96em; white-space: nowrap;
}
.board td.price { --c: var(--sell); text-align: right; font-weight: 700; font-size: 26px; white-space: nowrap; color: var(--c); }
.board td.buy { --c: var(--muted); font-weight: 600; }
/* Pence a step smaller, so the pounds read first: £107.72 */
.board td.price .p { font-size: .72em; }
.board .unit { font-size: .55em; font-weight: 600; color: var(--muted); margin-left: 3px; }
.empty { padding: 40px 0; color: var(--muted); font-size: 22px; font-style: italic; }

/* A price that just changed gets one soft gold sweep. */
.board td.price.shine {
  background: linear-gradient(100deg, var(--c) 35%, var(--gold-hi) 50%, var(--c) 65%) 100% 0 / 260% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: shine 1.8s ease-out 1 forwards;
}
@keyframes shine { to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .board td.price.shine { animation: none; -webkit-text-fill-color: currentColor; background: none; } }

footer.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 10px 16px; margin-top: 16px; padding-top: 12px; border-top: 3px double var(--gold-lo);
  color: var(--muted); font-size: 15px;
}
.phones { font-size: clamp(19px, 2vw, 26px); font-weight: 600; color: var(--ink); letter-spacing: .06em; display: flex; flex-wrap: wrap; gap: 0 1.4em; }
.phones span + span::before { content: "◆"; color: var(--gold); font-size: .45em; vertical-align: middle; margin-right: 1.4em; margin-left: -.7em; }
.tools { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.tools a, .tools button {
  font: inherit; font-family: var(--caps); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); background: none; border: 0; padding: 4px 0; text-decoration: none; cursor: pointer;
}
.tools a:hover, .tools button:hover { color: var(--gold-hi); }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.hidden { display: none !important; }

/* Phones in portrait: keep three columns inside the screen width. Long names wrap. */
@media (max-width: 600px) {
  .wrap { padding: 22px 20px; }
  .meta { text-align: left; }
  .board th, .board td { padding-left: 5px; padding-right: 5px; }
  .board th:first-child, .board td:first-child { padding-left: 0; }
  .board th:last-child, .board td:last-child { padding-right: 0; }
  .board th { font-size: 11px; letter-spacing: .16em; }
  .board td.name { font-size: 18px; }
  .board td.name small { font-size: 17px; }
  /* Long names wrap on phones, so drop the leader and just push the weight to the right. */
  .board td.name .nm { justify-content: space-between; }
  .board td.name .dots { display: none; }
  .board td.price { font-size: 21px; }
  /* Pence a step smaller, so the pounds read first: £107.72 */
.board td.price .p { font-size: .72em; }
.board .unit { display: none; }
}

/* TV mode: landscape, one screen, no scrolling. Sizes follow the viewport height so any TV works. */
@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  html, body { height: 100%; overflow: hidden; }
  .wrap { max-width: none; height: 100%; display: grid; grid-template-rows: auto 1fr auto; padding: 3.4vh 3.4vw 2.6vh; }
  .wrap::before { inset: 1.3vh; outline-offset: .5vh; }
  .wrap::after { inset: .8vh; --c: 3vh; --t: .22vh; }
  .brand h1 { font-size: 6.6vh; }
  .meta .clock { font-size: 3.4vh; }
  header.head { padding-bottom: 1.4vh; border-bottom-width: .5vh; }
  /* --s is lowered by board.js if the list doesn't fit, so extra items shrink the rows instead of being cut off. */
  main.list { --s: 1; min-height: 0; overflow: hidden; }
  .board th { font-size: calc(1.7vh * var(--s)); padding: calc(1.2vh * var(--s)) 1vw calc(.4vh * var(--s)); }
  .board td { padding: calc(.5vh * var(--s)) 1vw; line-height: 1.12; }
  .board td.name { font-size: calc(3.6vh * var(--s)); }
  .board td.price { font-size: calc(4vh * var(--s)); }
  /* Pence a step smaller, so the pounds read first: £107.72 */
.board td.price .p { font-size: .72em; }
.board .unit { display: none; }
  .empty { font-size: 3vh; }
  footer.foot { margin-top: 1.2vh; padding-top: 1.2vh; border-top-width: .5vh; font-size: 1.8vh; }
  .phones { font-size: 3.2vh; }
  .tools a, .tools button { font-size: 1.4vh; opacity: .6; }
  .tools a:hover, .tools button:hover, .tools a:focus-visible, .tools button:focus-visible { opacity: 1; }
  body.idle { cursor: none; }
  body.idle .tools a, body.idle .tools button { opacity: 0; }
}