/* ============================================================
   BoBoiBoy Watch — mockup web
   Meniru layout SwiftUI: skrin hitam, butang gradient, glow denyut
   ============================================================ */

:root {
  --bezel: 12px;
  --casing: 8px;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; height: 100%;
  background: #000; color: #fff;
  font-family: -apple-system, "SF Pro Rounded", "SF Pro Text", system-ui, sans-serif;
  overflow: hidden; touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}

body {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100dvh; gap: 8px;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---------- Pentas & bingkai jam ---------- */
#pentas { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 0; width: 100%; }

#jam {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  transform-origin: center center;
  /* saiz skrin (pt) — ditukar ikut kelas saiz */
  --sw: 198px; --sh: 242px; --sr: 44px;
  --tali: 90px;
}
#jam.saiz-41 { --sw: 176px; --sh: 215px; --sr: 40px; }
#jam.saiz-45 { --sw: 198px; --sh: 242px; --sr: 44px; }
#jam.saiz-49 { --sw: 205px; --sh: 251px; --sr: 36px; }

.tali {
  width: calc(var(--sw) * 0.62); height: var(--tali);
  background: linear-gradient(90deg, #2a2a2d, #3d3d42 50%, #2a2a2d);
  border: 1px solid #1a1a1c;
}
.tali-atas  { border-radius: 14px 14px 4px 4px; margin-bottom: -6px; }
.tali-bawah { border-radius: 4px 4px 14px 14px; margin-top: -6px; }

.casing {
  position: relative; z-index: 2;
  padding: var(--casing);
  border-radius: calc(var(--sr) + var(--bezel) + var(--casing));
  background: linear-gradient(160deg, #4a4a4e 0%, #2b2b2e 40%, #17171a 100%);
  box-shadow: 0 10px 40px rgba(0,0,0,.8), inset 0 1px 1px rgba(255,255,255,.25), inset 0 -1px 2px rgba(0,0,0,.6);
}
#jam.saiz-49 .casing {
  background: linear-gradient(160deg, #a7a7ad 0%, #77777d 40%, #4a4a50 100%);
  border-radius: calc(var(--sr) + var(--bezel) + var(--casing));
}

.bezel {
  padding: var(--bezel);
  border-radius: calc(var(--sr) + var(--bezel));
  background: #000;
}

.crown {
  position: absolute; right: -7px; top: 24%;
  width: 9px; height: 30px; border-radius: 4px;
  background: linear-gradient(90deg, #5a5a5e, #2c2c2f);
  box-shadow: inset 0 0 0 1px #111;
  z-index: 1;
}
.crown::after {
  content: ""; position: absolute; inset: 3px 2px;
  background: repeating-linear-gradient(180deg, #666 0 1px, #333 1px 3px);
  border-radius: 2px;
}
.butang-sisi {
  position: absolute; right: -5px; top: 50%;
  width: 6px; height: 34px; border-radius: 3px;
  background: linear-gradient(90deg, #4a4a4e, #222);
  z-index: 1;
}
.butang-aksi {
  display: none; position: absolute; left: -6px; top: 42%;
  width: 7px; height: 30px; border-radius: 3px;
  background: linear-gradient(90deg, #ff7a00, #c94f00);
  z-index: 3;
}
#jam.saiz-49 .butang-aksi { display: block; }
#jam.saiz-49 .crown { right: -9px; width: 11px; height: 34px; background: linear-gradient(90deg, #ff8a1f, #b3480a); }
#jam.saiz-49 .crown::after { background: repeating-linear-gradient(180deg, #ffb066 0 1px, #a04400 1px 3px); }

/* ---------- Skrin ---------- */
#skrin {
  position: relative; overflow: hidden;
  width: var(--sw); height: var(--sh); border-radius: var(--sr);
  background: #000;
}
#skrin.gegar { animation: gegar .5s linear; }
@keyframes gegar {
  0%,100% { transform: translate(0,0); }
  10% { transform: translate(-3px, 2px); } 20% { transform: translate(3px,-2px); }
  30% { transform: translate(-3px,-1px); } 40% { transform: translate(2px, 3px); }
  50% { transform: translate(-2px, 1px); } 60% { transform: translate(3px,-3px); }
  70% { transform: translate(-1px, 2px); } 80% { transform: translate(2px,-1px); }
  90% { transform: translate(-1px, 0); }
}

.bar-atas {
  position: absolute; top: 0; left: 0; right: 0; height: 26px; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 14px 0 12px;
  font-size: 13px; font-weight: 700;
  background: linear-gradient(#000 60%, transparent);
}
.tajuk { color: #ffd60a; }
.masa  { color: #fff; font-weight: 600; }

#kandungan {
  position: absolute; inset: 26px 0 0 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 2px 6px 18px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; overflow-anchor: none;
  display: flex; flex-direction: column; gap: 8px;
}
#kandungan::-webkit-scrollbar { display: none; }

/* ---------- Butang Kuasa Tiga / gabungan ---------- */
.butang-kuasa-tiga {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; min-height: 40px; border: 0; border-radius: 14px;
  color: #fff; font: 900 14px/1 inherit; letter-spacing: .3px;
  background: linear-gradient(135deg, #ff453a, #ff9f0a, #bf5af2, #ff453a);
  background-size: 300% 300%;
  animation: kilau 1.5s ease-in-out infinite alternate;
  box-shadow: 0 0 6px rgba(255,159,10,.2);
  cursor: pointer;
}
.butang-kuasa-tiga.tujuh {
  background: linear-gradient(135deg, #ff453a, #ffd60a, #30d158, #64d2ff, #0a84ff, #bf5af2, #ff453a);
  background-size: 400% 400%;
  min-height: 36px; font-size: 13px;
}
@keyframes kilau {
  from { background-position: 0% 0%;     box-shadow: 0 0 4px rgba(255,159,10,.2); }
  to   { background-position: 100% 100%; box-shadow: 0 0 12px rgba(255,159,10,.8); }
}
.butang-kuasa-tiga:active { transform: scale(.95); }
.ikon-kecil { width: 14px; height: 14px; fill: #fff; }

/* ---------- Seksyen + grid ---------- */
.seksyen {
  margin: 2px 2px -4px; font-size: 9px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; color: #8e8e93;
}
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.butang-kuasa {
  --w: 255,69,58;   /* warna utama (rgb) */
  --g: 255,214,10;  /* warna glow (rgb) */
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 58px; padding: 6px 4px; border-radius: 14px;
  border: 1.5px solid rgba(var(--g), .2);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(180deg, rgb(var(--w)), rgba(var(--w), .5));
  color: #fff; cursor: pointer;
  animation: denyut 1.2s ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
  transition: transform .12s ease;
  overflow: hidden;
}
.butang-kuasa:active { transform: scale(.92); }
.butang-kuasa .ikon {
  width: 26px; height: 26px; fill: rgb(var(--g)); color: rgb(var(--g));
  filter: drop-shadow(0 0 2px rgba(var(--g), .3));
  animation: ikonGlow 1.2s ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}
.butang-kuasa .ikon.imej { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 0 4px rgba(var(--g), .6)); animation: none; }
.butang-kuasa .nama {
  font-size: 11px; font-weight: 900; line-height: 1.1; white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.butang-kuasa .nama.kecil { font-size: 9.5px; }
@keyframes denyut {
  from { border-color: rgba(var(--g), .2); box-shadow: 0 0 0 rgba(var(--g), 0); }
  to   { border-color: rgba(var(--g), .85); box-shadow: 0 0 10px rgba(var(--g), .45); }
}
@keyframes ikonGlow {
  from { filter: drop-shadow(0 0 2px rgba(var(--g), .3)); }
  to   { filter: drop-shadow(0 0 8px rgba(var(--g), .95)); }
}

/* ---------- Skrin transformasi ---------- */
#transformasi {
  --w: 255,69,58; --g: 255,214,10;
  position: absolute; inset: 0; z-index: 10; overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(var(--g), .9) 0%, rgba(var(--w), .7) 40%, #000 100%);
  animation: masuk .3s ease-out;
}
#transformasi.tutup { animation: keluar .3s ease-out forwards; }
@keyframes masuk  { from { opacity: 0; } to { opacity: 1; } }
@keyframes keluar { from { opacity: 1; } to { opacity: 0; } }

#fx { position: absolute; inset: 0; width: 100%; height: 100%; }

.kilat {
  position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none;
  animation: kilat .37s ease-out forwards;
}
@keyframes kilat { 0% { opacity: 0; } 32% { opacity: .85; } 100% { opacity: 0; } }

.cincin {
  position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 50%; border: 5px solid rgb(var(--g));
  box-shadow: 0 0 12px rgba(var(--g), .8), inset 0 0 12px rgba(var(--g), .6);
  opacity: 0; --sk: 4.5;
  animation: cincin .8s ease-out forwards;
}
.cincin.c2 { --sk: 5.5; animation-delay: .12s; }
.cincin.c3 { --sk: 6.5; animation-delay: .24s; }
@keyframes cincin {
  from { transform: scale(.3); opacity: .9; border-width: 5px; }
  to   { transform: scale(var(--sk)); opacity: 0; border-width: .5px; }
}

.pusat {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  pointer-events: none;
}
.ikon-besar {
  width: 72px; height: 72px; fill: #fff; color: #fff;
  filter: drop-shadow(0 0 12px rgb(var(--g))) drop-shadow(0 0 4px #fff);
  animation: zoomPusing .6s cubic-bezier(.34,1.56,.64,1) forwards;
}
.ikon-besar.imej { width: 124px; height: 124px; object-fit: contain; }
@keyframes zoomPusing {
  from { transform: scale(.2) rotate(0deg); }
  to   { transform: scale(1) rotate(360deg); }
}
.nama-besar {
  font-size: 18px; font-weight: 900; letter-spacing: .5px; color: #fff;
  text-shadow: 0 0 10px rgb(var(--g)), 0 2px 3px rgba(0,0,0,.6);
  animation: zoom .4s cubic-bezier(.34,1.56,.64,1) forwards;
  max-width: 95%; white-space: nowrap;
}
.nama-besar.panjang { font-size: 14px; }
@keyframes zoom { from { transform: scale(.2); } to { transform: scale(1); } }

/* ---------- Kawalan mockup (luar jam) ---------- */
#kawalan { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-bottom: 6px; }
.pil-saiz { display: flex; gap: 6px; }
.pil-saiz button {
  border: 1px solid #3a3a3c; background: #1c1c1e; color: #aaa;
  font: 600 12px inherit; padding: 6px 12px; border-radius: 999px; cursor: pointer;
}
.pil-saiz button.aktif { background: #ffd60a; color: #000; border-color: #ffd60a; }
.nota { font-size: 11px; color: #636366; text-align: center; padding: 0 16px; max-width: 360px; }