/* ===========================
   COLOMBO POOLS — Traditional Sri Lanka Theme
   Palette: Maroon, Saffron, Ivory, Teak
   Motif: Lotus / Kolam / Batik-like pattern
   =========================== */

:root{
  --bg-ivory: #f6f1e6;
  --bg-ivory-2: #efe6d6;
  --ink: #201510;

  --maroon: #7a1d2b;
  --maroon-2: #5e1320;

  --saffron: #d39b2a;
  --saffron-2: #b77f1f;

  --teak: #5a3a22;
  --teak-2: #3e2617;

  --leaf: #2f6b52;

  --line: rgba(32,21,16,.14);
  --line-strong: rgba(32,21,16,.22);

  --shadow: 0 16px 40px rgba(0,0,0,.18);
  --radius: 18px;

  --serif: "Georgia", "Times New Roman", Times, serif;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  font-family: var(--sans);
  background:
    /* subtle motif dots */
    radial-gradient(circle at 12px 12px, rgba(122,29,43,.10) 1px, transparent 1.2px) 0 0/24px 24px,
    /* soft vignette */
    radial-gradient(1200px 700px at 50% 0%, rgba(211,155,42,.18), transparent 60%),
    linear-gradient(180deg, var(--bg-ivory), var(--bg-ivory-2));
}

/* ===== Top Bar (traditional banner) ===== */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  background:
    linear-gradient(180deg, rgba(246,241,230,.98), rgba(239,230,214,.96));
  border-bottom: 3px solid rgba(211,155,42,.55);
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}

/* Ornamental border strip */
.topbar::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-3px;
  height:8px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(122,29,43,.85) 0 16px,
      rgba(211,155,42,.90) 16px 32px,
      rgba(47,107,82,.80) 32px 48px,
      rgba(90,58,34,.75) 48px 64px
    );
  opacity:.85;
}

.brand{display:flex; gap:12px; align-items:center}
.brand__mark{
  width:46px; height:46px;
  display:grid; place-items:center;
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 30%, rgba(211,155,42,.45), transparent 60%),
    linear-gradient(180deg, rgba(122,29,43,.92), rgba(94,19,32,.98));
  border: 2px solid rgba(211,155,42,.65);
  color: var(--bg-ivory);
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  font-size:20px;
}
.brand__name{
  font-family: var(--serif);
  font-weight: 900;
  letter-spacing:.10em;
  color: var(--maroon);
  text-transform: uppercase;
}
.brand__sub{
  margin-top:2px;
  color: rgba(32,21,16,.72);
  font-size:12px;
  letter-spacing:.02em;
}

/* ===== Navigation ===== */
.nav{display:flex; gap:10px; align-items:center}
.nav__link{
  color: rgba(32,21,16,.78);
  text-decoration:none;
  padding:10px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  font-weight: 700;
}
.nav__link:hover{
  border-color: rgba(122,29,43,.22);
  background: rgba(122,29,43,.06);
}
.nav__link.is-active{
  color: var(--bg-ivory);
  background: linear-gradient(180deg, rgba(122,29,43,.95), rgba(94,19,32,.98));
  border-color: rgba(211,155,42,.55);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

/* ===== Layout ===== */
.wrap{max-width:1100px; margin:0 auto; padding:22px 18px 60px}

/* ===== Hero card (carved panel feel) ===== */
.hero{
  position:relative;
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:16px;
  padding:18px 16px;
  border-radius: var(--radius);
  background:
    /* “carved border” illusion */
    linear-gradient(180deg, rgba(246,241,230,.92), rgba(239,230,214,.90));
  border: 2px solid rgba(90,58,34,.22);
  box-shadow: var(--shadow);
  overflow:hidden;
}

/* Lotus/kolam watermark */
.hero::before{
  content:"";
  position:absolute; inset:-80px -120px auto auto;
  width:360px; height:360px;
  background:
    radial-gradient(circle at 50% 50%, rgba(211,155,42,.18), transparent 62%),
    conic-gradient(from 0deg, rgba(122,29,43,.10), rgba(47,107,82,.08), rgba(90,58,34,.08), rgba(122,29,43,.10));
  border-radius: 50%;
  filter: blur(.2px);
  opacity: .55;
  transform: rotate(12deg);
}

/* Decorative corner lines */
.hero::after{
  content:"";
  position:absolute; inset:10px;
  border-radius: calc(var(--radius) - 6px);
  border: 1px dashed rgba(122,29,43,.22);
  pointer-events:none;
}

.hero__title{
  margin:0;
  font-family: var(--serif);
  font-size:30px;
  letter-spacing:.02em;
  color: var(--maroon);
}
.hero__desc{
  margin:8px 0 0;
  color: rgba(32,21,16,.72);
  max-width:56ch;
  line-height:1.55;
}
.hero__right{display:flex; gap:14px; align-items:center; position:relative}

/* ===== Live badge (traditional seal) ===== */
.live-badge{
  display:inline-flex; gap:10px; align-items:center;
  padding:10px 12px;
  border-radius: 999px;
  border: 2px solid rgba(211,155,42,.70);
  background:
    radial-gradient(circle at 30% 30%, rgba(211,155,42,.40), transparent 60%),
    linear-gradient(180deg, rgba(122,29,43,.96), rgba(94,19,32,.99));
  box-shadow: 0 10px 26px rgba(0,0,0,.14);
}
.live-dot{
  width:10px; height:10px; border-radius:999px;
  background: var(--saffron);
  box-shadow: 0 0 0 0 rgba(211,155,42,.55);
  animation: pulse 1.2s infinite;
}
.live-text{
  font-weight:900;
  letter-spacing:.14em;
  color: var(--bg-ivory);
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(211,155,42,.55)}
  70%{box-shadow:0 0 0 12px rgba(211,155,42,0)}
  100%{box-shadow:0 0 0 0 rgba(211,155,42,0)}
}

/* ===== Countdown (tag style) ===== */
.countdown{
  min-width:150px;
  padding:10px 12px;
  border-radius: 16px;
  border: 2px solid rgba(90,58,34,.18);
  background:
    linear-gradient(180deg, rgba(246,241,230,.96), rgba(239,230,214,.92));
}
.countdown__label{
  color: rgba(32,21,16,.70);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.countdown__value{
  font-family: var(--serif);
  font-size:24px;
  font-weight:900;
  letter-spacing:.08em;
  margin-top:2px;
  color: var(--teak);
}

/* ===== Prize grid ===== */
/* === CENTER ALIGN CARDS (Fix last row center) === */
.grid{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;   /* ini yang bikin center */
  margin-top: 16px;
}

.card{
  /* lebar kartu (sesuaikan kalau mau lebih besar/kecil) */
  flex: 0 1 360px;           /* basis 360px, otomatis wrap */
  max-width: 360px;
}

@media (max-width: 520px){
  .card{
    flex: 1 1 100%;
    max-width: 100%;
  }
}
/* Subtle kolam pattern on cards */
.card::before{
  content:"";
  position:absolute; inset:-60px -80px auto auto;
  width:260px; height:260px;
  background:
    radial-gradient(circle at 8px 8px, rgba(122,29,43,.12) 1px, transparent 1.2px) 0 0/16px 16px,
    radial-gradient(circle at 50% 50%, rgba(211,155,42,.22), transparent 62%);
  border-radius:50%;
  opacity:.55;
  transform: rotate(-10deg);
}

@media (min-width: 800px){
  .card{grid-column: span 4;}
}

.card__top{
  display:flex; justify-content:space-between; align-items:center;
  position:relative;
}
.card__title{
  font-family: var(--serif);
  font-weight: 900;
  letter-spacing:.08em;
  color: var(--maroon);
  text-transform: uppercase;
}
.card__tag{
  font-size:12px;
  color: rgba(32,21,16,.78);
  padding:6px 10px;
  border-radius:999px;
  border: 1px solid rgba(90,58,34,.18);
  background: rgba(211,155,42,.10);
  font-weight: 800;
}

/* Digits: like carved tiles */
.digits{
  display:flex;
  gap:10px;
  margin-top:14px;
  position:relative;
}
.digit{
  width:58px; height:70px;
  display:grid; place-items:center;
  border-radius:16px;
  border: 2px solid rgba(122,29,43,.22);
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.65), transparent 55%),
    linear-gradient(180deg, rgba(122,29,43,.10), rgba(90,58,34,.06));
  color: var(--maroon-2);
  font-family: var(--serif);
  font-size:36px;
  font-weight: 900;
  letter-spacing:.02em;
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
}

.card__meta{
  margin-top:12px;
  color: rgba(32,21,16,.70);
  position:relative;
}
.status{
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-weight: 800;
}

/* ===== Note section ===== */
.footer-note{margin-top:16px}
.note{
  border: 2px solid rgba(90,58,34,.18);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(246,241,230,.92), rgba(239,230,214,.90));
  padding:14px 16px;
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
}
.note__title{
  font-family: var(--serif);
  font-weight:900;
  letter-spacing:.08em;
  color: var(--teak);
}
.note__text{
  color: rgba(32,21,16,.72);
  margin-top:6px;
  line-height:1.55;
}

/* ===== Footer ===== */
.footer{
  border-top: 3px solid rgba(211,155,42,.55);
  padding:18px;
  color: rgba(32,21,16,.75);
  background: linear-gradient(180deg, rgba(239,230,214,.95), rgba(246,241,230,.98));
}
.footer__inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  gap:10px;
  justify-content:center;
  font-weight: 700;
}
.sep{opacity:.6}

/* ===== History Table ===== */
.table-wrap{
  margin-top:16px;
  border: 2px solid rgba(90,58,34,.18);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  background: linear-gradient(180deg, rgba(246,241,230,.92), rgba(239,230,214,.90));
}
.table{
  width:100%;
  border-collapse:collapse;
}
.table th, .table td{
  padding:12px 10px;
  border-bottom: 1px solid rgba(32,21,16,.12);
  text-align:left;
}
.table th{
  font-size:12px;
  color: rgba(32,21,16,.75);
  letter-spacing:.10em;
  text-transform:uppercase;
  background:
    linear-gradient(180deg, rgba(211,155,42,.22), rgba(211,155,42,.10));
  border-bottom: 2px solid rgba(90,58,34,.18);
}
.table tr:hover td{
  background: rgba(211,155,42,.10);
}
.mono{
  font-family: ui-monospace, Menlo, Monaco, Consolas, "Courier New", monospace;
  font-weight: 900;
  color: var(--maroon-2);
}
.muted{
  color: rgba(32,21,16,.70);
  text-align:center;
}

/* ===== Pagination Buttons ===== */
.pager{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  margin-top:14px;
}
.btn{
  appearance:none;
  border: 2px solid rgba(122,29,43,.35);
  background:
    radial-gradient(circle at 25% 25%, rgba(211,155,42,.30), transparent 55%),
    linear-gradient(180deg, rgba(122,29,43,.96), rgba(94,19,32,.99));
  color: var(--bg-ivory);
  padding:10px 14px;
  border-radius: 14px;
  font-weight: 900;
  letter-spacing:.04em;
  cursor:pointer;
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
}
.btn:hover{
  filter: brightness(1.03);
}
.btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  filter: grayscale(.25);
}
.pager__info{
  color: rgba(32,21,16,.72);
  font-weight: 800;
}