/* Koberplay: the Kober Mie palette made calm and elegant. Yellow pages, warm charcoal for text, header and
   buttons, gold accents; Kober (the red mascot) is the only red, so he stands out. Fredoka headings, Poppins text.
   The video player stays dark (black and gold). Loaded after app.css on koberplay.com only. */
:root, :root[data-tema] {
  --bg: #fde39a;
  --bg-rgb: 253, 227, 154;
  --bg-image: none;
  --surface: #fff3cf;
  --surface-2: #fcebb8;
  --hover: #f8dc8e;
  --line: rgba(62, 44, 10, .14);
  --text: #1e1912;
  --soft: #45392a;
  --muted: #6c5c42;
  --faint: #978566;
  --accent: #1e1912;
  --accent-soft: rgba(30, 25, 18, .08);
  --accent-text: #1e1912;
  --btn: #1e1912;
  --btn-hover: #3a3024;
  --btn-ink: #fff3d1;
  --gold: #8a5d00;
  --ok: #2f7d32;
  --card-radius: 12px;
  --radius: 18px;
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Fredoka", "Poppins", system-ui, sans-serif;
  --kb-ink: #1e1912;
  --kb-gold: #f5c542;
  --kb-gold-deep: #e9ad1f;
  --kb-cream: #fff3d1;
  color-scheme: light;
}
body { font-size: 14.5px; }
h1, h2, h3, .page-title { font-family: var(--display); font-weight: 600; letter-spacing: -.01em; }
::selection { background: var(--kb-ink); color: var(--kb-gold); }

/* ---------- Header & tab bar: warm charcoal, the frame around the yellow page ---------- */
.top, .top.solid { background: rgba(30, 25, 18, .97); backdrop-filter: blur(10px); border-bottom: 0; box-shadow: 0 2px 16px rgba(30, 25, 18, .18); }
.logo img { display: block; height: 38px; width: auto; }
@media (min-width: 768px) { .logo img { height: 44px; } }
.nav { color: rgba(255, 243, 209, .7); font-weight: 500; font-size: 15px; }
.nav a { position: relative; }
.nav a.on, .nav a:hover { color: var(--kb-cream); }
.nav a.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; border-radius: 2px; background: var(--kb-gold); }
.top .icon-btn { color: var(--kb-cream); }
.top .icon-btn:hover { background: rgba(255, 243, 209, .1); }
.tabs { background: rgba(30, 25, 18, .97); border-top: 0; box-shadow: 0 -2px 16px rgba(30, 25, 18, .16); }
.tabs a { color: rgba(255, 243, 209, .55); font-weight: 500; }
.tabs a.on, .tabs a.on svg { color: var(--kb-gold); }
:focus-visible { outline-color: var(--kb-ink); }

/* ---------- Buttons, chips, cards ---------- */
.btn { font-weight: 600; letter-spacing: .01em; }
.btn.primary { box-shadow: 0 6px 18px rgba(30, 25, 18, .2); }
.btn.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px rgba(30, 25, 18, .35); backdrop-filter: none; }
.btn.ghost:hover { background: rgba(30, 25, 18, .06); }
.chip { background: rgba(30, 25, 18, .07); color: var(--soft); font-weight: 500; }
button.chip.on, .ranges button.on, .seg button.on { background: var(--kb-ink); color: var(--kb-cream); }
.ranges button, .seg { background: var(--surface-2); }
.poster { box-shadow: 0 8px 20px rgba(80, 52, 0, .18); }
.card:hover .poster { box-shadow: 0 16px 32px rgba(80, 52, 0, .28); }
.poster .badge { background: rgba(30, 25, 18, .82); color: var(--kb-cream); }
.poster .badge.new { background: var(--kb-gold); color: var(--kb-ink); }
.poster .prog i { background: var(--kb-gold); }
.card h3 { font-family: var(--display); font-weight: 500; font-size: 14.5px; }
.row { margin-top: 34px; }
.row-head h2 { font-family: var(--display); font-weight: 600; font-size: 20px; }
.row-head a { color: var(--muted); font-weight: 500; }
.row-head a:hover { color: var(--text); }
.searchbox { background: var(--surface); }
.searchbox:focus-within { border-color: var(--kb-ink); }
.detail-bg { opacity: .22; }
.detail-meta b { color: var(--text); }
.tagline { color: var(--gold); font-family: var(--display); font-weight: 500; font-size: 17px; }
.ep { font-family: var(--display); font-weight: 500; background: var(--surface); }
.ep:hover { background: var(--hover); }
.ep.current { background: var(--kb-ink); color: var(--kb-gold); border-color: var(--kb-ink); }
.sheet { background: var(--surface); box-shadow: 0 -10px 30px rgba(30, 25, 18, .2); }
.empty { border: 0; background: var(--surface); box-shadow: 0 8px 24px rgba(80, 52, 0, .1); }
.footer { color: var(--muted); border-top: 1px solid var(--line); margin-top: 44px; padding-top: 28px; }
.footer nav a { color: var(--soft); }
.kb-foot { display: flex; align-items: center; gap: 10px; margin-top: 14px !important; font-weight: 500; color: var(--soft); }
.kb-foot img { width: 34px; height: 34px; }
.kb-foot a { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--kb-gold-deep); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Kober instead of the generic icons: hints, empty pages, the lock screen, the end card. */
.hint svg.i { display: none; }
.hint::before { content: ""; display: inline-block; width: 22px; height: 22px; margin-right: 6px; vertical-align: -6px; background: url(/assets/kober/kepala-bulat.webp) center / contain no-repeat; }
.empty svg.i { display: none; }
.empty::before { content: ""; display: block; width: 116px; height: 116px; margin: 0 auto 12px; background: url(/assets/kober/kepala-bulat.webp) center / contain no-repeat; animation: kb-float 4.5s ease-in-out infinite; }
.gate-box .lock { width: 108px; height: 108px; background: url(/assets/kober/kepala-bulat.webp) center / contain no-repeat; border-radius: 0; animation: kb-float 4.5s ease-in-out infinite; }
.gate-box .lock svg { display: none; }
.endcard h3::before { content: ""; display: block; width: 88px; height: 88px; margin: 0 auto 10px; background: url(/assets/kober/kepala-bulat.webp) center / contain no-repeat; }

/* ---------- The player stays dark: black and gold ---------- */
.player {
  --bg: #15120d; --bg-rgb: 21, 18, 13; --surface: #1f1a13; --surface-2: #2b241a; --hover: #3a3124; --line: #3a3124;
  --text: #fff8e6; --soft: #e1d6bd; --muted: #a99c80; --faint: #6f6450;
  --accent: #f5c542; --accent-soft: rgba(245, 197, 66, .16); --accent-text: #f5c542;
  --btn: #f5c542; --btn-hover: #ffd86b; --btn-ink: #1e1912; --gold: #f5c542;
  color: var(--text); color-scheme: dark;
}
.player .btn.ghost { background: rgba(255, 248, 230, .12); color: var(--text); box-shadow: none; }
.player .chip { background: rgba(255, 248, 230, .1); color: var(--soft); }
.player .poster .badge { background: rgba(21, 18, 13, .8); color: var(--text); }
.player .ep { background: var(--surface-2); }
.player .ep.current { background: var(--kb-gold); color: var(--kb-ink); border-color: var(--kb-gold); }
.player .tagline { color: var(--kb-gold); }

/* ---------- Home: Kober presents the featured dramas on a golden stage ---------- */
.kb-hero { position: relative; padding-top: var(--header-h); }
.kb-stage {
  position: relative; overflow: hidden; isolation: isolate; touch-action: pan-y;
  height: clamp(370px, 108vw, 480px);
  background:
    radial-gradient(60% 55% at 32% 58%, rgba(255, 246, 214, .75) 0%, rgba(255, 246, 214, 0) 70%),
    linear-gradient(165deg, #fbd462 0%, #f5c542 55%, #eab22a 100%);
  border-radius: 0 0 28px 28px;
}
/* a thin warm line where the stage meets the page */
.kb-stage::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 -1px 0 rgba(62, 44, 10, .12); pointer-events: none; }
.kb-mascot { position: absolute; z-index: 2; left: -9%; bottom: -5%; height: 72%; aspect-ratio: 916 / 749; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kb-mascot img { width: 100%; height: 100%; transform-origin: 50% 100%; filter: drop-shadow(0 16px 24px rgba(90, 58, 0, .28));
  animation: kb-rise 1s cubic-bezier(.2, 1.1, .4, 1) both, kb-float 4.5s ease-in-out 1s infinite; }
.kb-mascot.hop img { animation: kb-hop .6s cubic-bezier(.3, 1.4, .5, 1), kb-float 4.5s ease-in-out .6s infinite; }
.kb-mascot:focus-visible { outline: 2px solid var(--kb-ink); outline-offset: -6px; border-radius: 30px; }
.kb-bubble {
  position: absolute; z-index: 4; top: 16px; right: 4%; max-width: min(60%, 320px); margin: 0; padding: 11px 15px;
  border-radius: 18px; background: #fffaf0; color: var(--kb-ink); font: 500 15px/1.35 var(--display);
  box-shadow: 0 10px 26px rgba(90, 58, 0, .18); transform-origin: 20% 120%;
}
.kb-bubble b { font-weight: 600; background: linear-gradient(transparent 58%, rgba(245, 197, 66, .75) 58%); }
.kb-bubble::after { content: ""; position: absolute; left: 20px; bottom: -12px; width: 24px; height: 14px; background: #fffaf0; clip-path: polygon(0 0, 100% 0, 8% 100%); }
.kb-bubble.pop { animation: kb-pop .35s ease-out; }
.kb-posters { position: absolute; z-index: 3; right: 5%; bottom: 8%; width: 38%; max-width: 240px; aspect-ratio: 3 / 4; }
.kb-poster {
  position: absolute; inset: 0; overflow: hidden; border-radius: 14px; background: var(--kb-ink);
  box-shadow: 0 22px 44px rgba(60, 38, 0, .38), 0 0 0 1px rgba(255, 250, 240, .35);
  opacity: 0; transform: translateY(10px) scale(.97); transition: opacity .5s ease, transform .5s ease; pointer-events: none;
}
.kb-poster.on { opacity: 1; transform: none; pointer-events: auto; }
.kb-poster img { width: 100%; height: 100%; object-fit: cover; }
.kb-ph { position: absolute; inset: 0; display: grid; place-items: center; padding: 14px; text-align: center; font: 600 18px/1.15 var(--display); color: var(--kb-cream); background: var(--kb-ink); }
.kb-dots { position: absolute; z-index: 4; right: 5%; bottom: 2.6%; width: 38%; max-width: 240px; display: flex; justify-content: center; gap: 6px; }
.kb-dots button { width: 7px; height: 7px; border-radius: 7px; background: rgba(30, 25, 18, .25); transition: width .3s, background .3s; }
.kb-dots button.on { width: 22px; background: var(--kb-ink); }
.kb-info { position: relative; z-index: 3; padding: 20px var(--gutter) 0; }
.kb-slide { display: none; }
.kb-slide.on { display: block; animation: kb-fade .45s ease; }
.kb-title { margin: 8px 0 4px; font: 600 clamp(26px, 6.8vw, 32px)/1.1 var(--display); color: var(--kb-ink); letter-spacing: -.015em; text-wrap: balance; }
.kb-tagline { margin: 0 0 6px; color: var(--soft); font-weight: 400; }
.kb-meta { margin-bottom: 16px; font-size: 13px; font-weight: 500; color: var(--muted); }
.kb-meta b { color: var(--kb-ink); font-weight: 600; }
.kb-actions { display: flex; gap: 10px; }
.kb-actions .btn { flex: 1; max-width: 220px; }
@media (min-width: 600px) and (max-width: 899px) { .kb-mascot { left: 3%; } }

@media (min-width: 900px) {
  .kb-hero { padding: calc(var(--header-h) + 18px) var(--gutter) 0; }
  .kb-stage { height: min(78vh, 600px); min-height: 500px; border-radius: 32px; }
  .kb-mascot { left: 36%; height: 88%; bottom: -4%; }
  .kb-posters, .kb-dots { right: 5%; width: clamp(190px, 17vw, 250px); max-width: none; }
  .kb-posters { bottom: 14%; }
  .kb-dots { bottom: 5%; }
  .kb-bubble { top: 28px; right: calc(5% + 6px); max-width: 320px; font-size: 16.5px; padding: 13px 18px; }
  .kb-bubble::after { left: 26px; }
  .kb-info { position: absolute; left: calc(var(--gutter) + 5%); bottom: 64px; width: min(34vw, 480px); padding: 0; }
  .kb-title { font-size: clamp(38px, 3.8vw, 54px); }
  .kb-tagline { font-size: 16.5px; color: #3e3120; }
  .kb-meta { color: #5d4d32; }
}

/* Kober peeks up from behind the tab bar once the stage has scrolled away (home only). */
.kb-buddy { position: fixed; z-index: 39; right: 6px; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) - 26px); width: 100px; transform: translateY(130%); transition: transform .6s cubic-bezier(.2, 1.2, .4, 1); pointer-events: none; }
.kb-buddy.on { transform: none; }
.kb-buddy button { display: block; width: 100%; padding: 0; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.kb-buddy img { width: 100%; height: auto; transform-origin: 50% 100%; filter: drop-shadow(0 -2px 10px rgba(30, 25, 18, .2)); animation: kb-float 4.5s ease-in-out infinite; }
.kb-buddy.hop img { animation: kb-hop .6s cubic-bezier(.3, 1.4, .5, 1); }
.kb-tip {
  position: absolute; right: 76px; bottom: 58px; width: max-content; max-width: 200px; padding: 8px 12px;
  border-radius: 16px 16px 4px 16px; background: #fffaf0; color: var(--kb-ink); font: 500 13.5px/1.3 var(--display);
  box-shadow: 0 8px 22px rgba(30, 25, 18, .2); opacity: 0; transform: translateY(6px) scale(.94); transform-origin: right bottom; transition: opacity .3s, transform .3s;
}
.kb-tip b { font-weight: 600; }
.kb-buddy.talk .kb-tip { opacity: 1; transform: none; }
@media (min-width: 768px) { .kb-buddy { right: 20px; bottom: -22px; width: 136px; } .kb-tip { right: 106px; bottom: 78px; } }

@keyframes kb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes kb-rise { from { transform: translateY(30%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes kb-hop { 0% { transform: none; } 35% { transform: translateY(-18px); } 70% { transform: translateY(0) scale(1, .985); } 100% { transform: none; } }
@keyframes kb-pop { from { transform: scale(.92); opacity: 0; } }
@keyframes kb-fade { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .kb-mascot img, .kb-buddy img, .empty::before, .gate-box .lock { animation: none !important; }
}