/* ABJP Live — "jewel box" rate board.
   Maroon velvet, gold foil, cream numbers; emerald marks the cheapest price. */
:root {
  --velvet-1: #4a0d0f;
  --velvet-2: #2a0607;
  --velvet-3: #160303;
  --panel: rgba(28, 5, 6, .72);
  --gold-1: #8a6420;
  --gold-2: #c9962f;
  --gold-3: #f3d27a;
  --gold-4: #fff3c4;
  --gold-line: rgba(232, 190, 92, .55);
  --gold-soft: rgba(232, 190, 92, .22);
  --cream: #fff6e3;
  --cream-dim: #e7d6b8;
  --muted: #b99b82;
  --emerald: #19c37d;
  --emerald-deep: #0a6b43;
  --rose: #ff9d8a;
  --foil: linear-gradient(100deg, #8a6420 0%, #d4a23c 18%, #fff0b3 32%, #d9a940 46%, #9c7226 62%, #f3d27a 80%, #b8862b 100%);
  --serif: "Cinzel", "Times New Roman", serif;
  --digits: "Rajdhani", "Arial Narrow", sans-serif;
  --sans: "Open Sans", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  color: var(--cream);
  font: 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  background-color: var(--velvet-2);
  background-image:
    radial-gradient(ellipse 80% 55% at 50% -5%, rgba(255, 200, 120, .16), transparent 70%),
    url("pattern.svg"),
    radial-gradient(ellipse at 50% 40%, var(--velvet-1) 0%, var(--velvet-2) 55%, var(--velvet-3) 100%);
  background-size: auto, 120px 120px, cover;
  background-attachment: fixed;
}
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 28px; }

/* ---------- gold foil helpers ---------- */
.foil-text {
  background: var(--foil); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine 7s linear infinite;
}
@keyframes shine { from { background-position: 0% 50%; } to { background-position: 220% 50%; } }
.rule { display: flex; align-items: center; gap: 14px; color: var(--gold-3); }
.rule::before, .rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-line), transparent); }
.rule i { font-style: normal; font-size: 11px; letter-spacing: .5em; }

/* ---------- header ---------- */
.crown { position: relative; text-align: center; padding: 26px 0 10px; }
.crown .logo { height: 96px; width: auto; display: inline-block; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .55)); }
.crown .title {
  font: 600 13px/1 var(--serif); letter-spacing: .42em; text-transform: uppercase; margin-top: 12px;
}
.crown .clock { position: absolute; right: 0; top: 44px; text-align: right; font: 500 12px/1.4 var(--sans); color: var(--muted); }
.crown .clock b { display: block; font: 600 28px/1 var(--digits); color: var(--cream); letter-spacing: .04em; }
.crown .live { position: absolute; left: 0; top: 50px; display: flex; align-items: center; gap: 8px; font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--emerald); }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 0 rgba(25,195,125,.6); animation: beat 1.8s infinite; }
@keyframes beat { 0% { box-shadow: 0 0 0 0 rgba(25,195,125,.6); } 70% { box-shadow: 0 0 0 10px rgba(25,195,125,0); } 100% { box-shadow: 0 0 0 0 rgba(25,195,125,0); } }
.sparkle { position: absolute; color: var(--gold-3); font-size: 12px; opacity: 0; animation: twinkle 4s infinite; pointer-events: none; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); } 50% { opacity: .9; transform: scale(1) rotate(45deg); } }

/* ---------- gold & dollar plaques ---------- */
.plaques { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
.plaque {
  position: relative; overflow: hidden; text-align: center; padding: 16px 18px 14px;
  background: var(--foil); background-size: 220% 100%; animation: shine 9s linear infinite;
  color: #3a1d02; border: 1px solid #fff0b3;
  box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(90,55,10,.35);
}
.plaque::after { /* engraved inner frame */
  content: ""; position: absolute; inset: 6px; border: 1px solid rgba(90, 55, 10, .35); pointer-events: none;
}
.plaque .pl-label { font: 700 12px/1 var(--serif); letter-spacing: .35em; text-transform: uppercase; color: #4a2a05; }
.plaque .pl-val { font: 700 44px/1.05 var(--digits); color: #2b1400; margin-top: 6px; letter-spacing: .01em; text-shadow: 0 1px 0 rgba(255,255,255,.45); }
.plaque .pl-unit { font: 600 11.5px/1 var(--sans); color: #5c3a0c; margin-top: 4px; letter-spacing: .04em; }

/* ---------- the board ---------- */
.board-head { margin: 34px 0 14px; }
.board-head .rule { font: 600 14px/1 var(--serif); letter-spacing: .32em; text-transform: uppercase; }
.colhead { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 14px; padding: 0 18px 8px; }
.colhead div { font: 700 11px/1 var(--serif); letter-spacing: .28em; text-transform: uppercase; color: var(--gold-3); text-align: center; }
.colhead div:first-child { text-align: left; color: var(--muted); }

.jewel {
  position: relative; display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 14px; align-items: stretch;
  padding: 16px 18px; margin-bottom: 14px;
  background: linear-gradient(180deg, rgba(60, 12, 12, .85), var(--panel));
  border: 1px solid var(--gold-line);
  outline: 1px solid var(--gold-soft); outline-offset: -6px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 220, 150, .12);
}
.jewel::before, .jewel::after { /* gem studs on the corners */
  content: "◆"; position: absolute; font-size: 10px; line-height: 1; color: var(--gold-3); text-shadow: 0 0 6px rgba(255, 210, 120, .8);
}
.jewel::before { top: -6px; left: -5px; }
.jewel::after { bottom: -6px; right: -5px; }

.co { display: flex; flex-direction: column; justify-content: center; padding: 6px 4px; position: relative; }
.co-name { font: 600 25px/1.15 var(--serif); letter-spacing: .02em; }
.co-meta { font: 400 12.5px/1.3 var(--sans); color: var(--muted); margin-top: 6px; }
.ribbon {
  align-self: flex-start; margin-bottom: 8px; padding: 4px 10px 4px 12px;
  font: 700 10px/1 var(--serif); letter-spacing: .26em; text-transform: uppercase; color: #3a1d02;
  background: var(--foil); background-size: 220% 100%; animation: shine 8s linear infinite;
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%);
}

.px {
  position: relative; text-align: center; padding: 14px 10px 12px;
  background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.25));
  border: 1px solid rgba(232, 190, 92, .28);
  display: flex; flex-direction: column; justify-content: center;
  transition: background-color .6s;
}
.px-label { display: none; font: 700 10px/1 var(--serif); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-3); margin-bottom: 6px; }
.px-val { font: 700 38px/1 var(--digits); color: var(--cream); letter-spacing: .01em; white-space: nowrap; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.px-note { font: 600 13px/1 var(--digits); color: var(--rose); margin-top: 7px; letter-spacing: .03em; min-height: 13px; }
.px.off { color: var(--muted); font: 400 14px var(--sans); }

/* cheapest: emerald glow */
.px.best {
  background: radial-gradient(ellipse at 50% 0%, rgba(25,195,125,.35), rgba(10,107,67,.55) 70%);
  border-color: var(--emerald);
  box-shadow: 0 0 22px rgba(25, 195, 125, .45), inset 0 0 18px rgba(25, 195, 125, .25);
}
.px.best .px-val { color: #eafff4; text-shadow: 0 0 14px rgba(25,195,125,.9); }
.px.best .px-note { color: #b8ffd9; font-family: var(--serif); font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; }

/* price moved */
.px.up { animation: flashUp 1.2s ease-out; }
.px.down { animation: flashDown 1.2s ease-out; }
@keyframes flashUp { 0% { background-color: rgba(255, 90, 70, .45); } 100% { background-color: transparent; } }
@keyframes flashDown { 0% { background-color: rgba(25, 195, 125, .45); } 100% { background-color: transparent; } }
.arrow { font-size: 14px; margin-left: 6px; vertical-align: 6px; }
.arrow.up { color: #ff7a66; }
.arrow.down { color: var(--emerald); }

/* JJ: the preferred house, larger */
.jewel.jj { padding: 22px 22px; border-color: var(--gold-3); box-shadow: 0 18px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255, 220, 140, .25), inset 0 1px 0 rgba(255, 220, 150, .2); }
.jewel.jj .co-name { font-size: 32px; }
.jewel.jj .px-val { font-size: 50px; }
.jewel.jj .px { padding: 18px 10px 16px; }

footer { text-align: center; padding: 26px 0 40px; color: var(--muted); font-size: 12.5px; }
footer .rule { margin-bottom: 14px; }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  .wrap { padding: 0 14px; }
  .crown { padding-top: 18px; }
  .crown .logo { height: 66px; }
  .crown .title { font-size: 11px; letter-spacing: .3em; }
  .crown .clock, .crown .live { position: static; justify-content: center; text-align: center; margin-top: 10px; }
  .crown .live { margin: 0 0 10px; }
  .crown .clock b { font-size: 22px; display: inline; margin-right: 8px; }
  .plaques { gap: 10px; margin-top: 16px; }
  .plaque { padding: 12px 8px 10px; }
  .plaque .pl-val { font-size: 30px; }
  .plaque .pl-label { font-size: 10.5px; letter-spacing: .25em; }
  .colhead { display: none; }
  .jewel, .jewel.jj { grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 12px; }
  .co { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 0 2px; }
  .ribbon { margin-bottom: 0; order: -1; flex-basis: 100%; max-width: max-content; }
  .co-name, .jewel.jj .co-name { font-size: 21px; }
  .co-meta { margin-top: 0; }
  .px-label { display: block; }
  .px-val { font-size: 27px; }
  .jewel.jj .px-val { font-size: 32px; }
}