/* ═══════════════════════════════════════════════════════
   CariKata · style.css · v0.3.7
   Dipindahkan dari single-file HTML ke file terpisah.
   Tidak ada perubahan konten CSS dari v0.3.6.
   ═══════════════════════════════════════════════════════ */

:root {
  /* ── WHITEBOARD THEME ──────────────────────────────────────────
     Ganti nilai di bawah ini untuk kembali ke warm paper:
       --bg:    #f4efe6;
       --paper: #fdfaf4;
       --ink:   #1c1714;
       --ink2:  #5a5048;
       --rule:  #ddd5c4;
       --sel:   #c8c2b8;
     ──────────────────────────────────────────────────────────── */
  --bg:    #ffffff;
  --paper: #ffffff;
  --ink:   #1a1a1a;
  --ink2:  #555555;
  --rule:  #e0e0e0;
  --stamp: #bf3b2e;
  --green: #2d6a4f;
  --sel:   #d4d4d4;

  /* ── PALET KURASI MANUAL — 16 warna chips & SVG pipeline ──────
     16 warna kurasi (revisi Mei 2026).
     ──────────────────────────────────────────────────────────── */
  --c0:  #E87F24;
  --c1:  #FFC81E;
  --c2:  #A47251;
  --c3:  #DD9E59;
  --c4:  #982598;
  --c5:  #B153D7;
  --c6:  #FF3737;
  --c7:  #FF8383;
  --c8:  #1F6F5F;
  --c9:  #6FCF97;
  --c10: #89D4FF;
  --c11: #44ACFF;
  --c12: #F9B2D7;
  --c13: #FE81D4;
  --c14: #FFDE42;
  --c15: #FFEF9F;
}

* { margin:0; padding:0; box-sizing:border-box; }
h1 { font-size: inherit; font-weight: inherit; }
html, body { height:100%; overflow-x:hidden; }

body {
  background: var(--bg);
  font-family: 'DM Mono', monospace;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 12px 20px;
  min-height: 100vh;
  max-width: 860px;
  margin: 0 auto;
}

/* ── GAME LAYOUT ── */
.game-layout {
  display:flex; flex-direction:column; align-items:center;
  gap:10px;
  width: var(--grid-total-width, auto);
  max-width: 100%;
  animation: fadeUp 0.4s 0.15s ease both; opacity:0;
}

/* ── HEADER LOGO ── */
.header-logo {
  display: flex;
  gap: 6px;
  width: 100%;
  flex-shrink: 0;
  container-type: inline-size;
}
.logo-stamp {
  flex: 1;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: 3px 3px 0 var(--ink);
  font-family: 'Gabarito', sans-serif;
  font-weight: 900;
  color: var(--ink);
  line-height: 1;
  user-select: none;
  font-size: clamp(16px, calc((100cqw - 42px) / 8 * 0.85), 52px);
  background: var(--c0);
}

/* ── WORD CHIPS ── */
.chips-box {
  background:var(--paper); border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink); border-radius:8px;
  padding:9px 13px; width:100%; flex-shrink:0;
}
.chips-row { display:flex; flex-wrap:wrap; gap:5px; }
.wchip {
  display:flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:100px;
  border:1.5px solid var(--ink);
  font-family:'Gabarito',sans-serif;
  font-size:10px; font-weight:700; letter-spacing:0.5px;
  transition:opacity 0.3s; white-space:nowrap;
}
.wchip.found { opacity:.38; }
.wchip.found .wchip-text { text-decoration:line-through; }
@keyframes chipFound {
  0%{transform:scale(1)} 40%{transform:scale(1.12)} 100%{transform:scale(1)}
}
.wchip.just-found { animation:chipFound 0.25s ease; }

/* ── CHIP TERSENSOR ── */
.wchip-mask {
  opacity: 0.55;
  letter-spacing: 1px;
  font-size: 9px;
}
@keyframes chipReveal {
  0%   { opacity: 0; transform: scaleX(0.6); }
  60%  { opacity: 1; transform: scaleX(1.08); }
  100% { opacity: 1; transform: scaleX(1); }
}
.wchip.revealing .wchip-text {
  display: inline-block;
  animation: chipReveal 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* ── TRANSISI PUZZLE ── */
@keyframes chipsOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes chipsIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.wchip.anim-chips-out {
  animation: chipsOut 0.25s ease-in forwards;
}
.wchip.anim-chips-in {
  opacity: 0;
  animation: chipsIn 0.4s ease-out forwards;
}

@keyframes flipOut {
  from { transform: rotateX(0deg);  opacity: 1; }
  to   { transform: rotateX(90deg); opacity: 0; }
}
@keyframes flipIn {
  from { transform: rotateX(-90deg); opacity: 0; }
  to   { transform: rotateX(0deg);   opacity: 1; }
}
.cell.anim-flip-out {
  animation: flipOut 0.25s ease-in forwards;
  transform-origin: center center;
}
.cell.anim-flip-in {
  opacity: 0;
  animation: flipIn 0.35s ease-out forwards;
  transform-origin: center center;
}

/* ── GRID BOX ── */
.grid-box {
  background:var(--paper); border:2px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink); border-radius:8px;
  padding:8px; flex-shrink:0;
  transition:opacity 0.2s;
  display:inline-flex; justify-content:center;
  max-width:100%;
}

/* ── GRID ── */
.grid {
  display:grid; touch-action:none;
  user-select:none; -webkit-user-select:none;
  perspective: 500px;
}
.cell {
  display:flex; align-items:center; justify-content:center;
  font-family:'Gabarito',sans-serif; font-weight:700;
  border-radius:4px; cursor:pointer;
  border:1px solid transparent;
  color:var(--ink); -webkit-tap-highlight-color:transparent;
  position: relative; z-index: 1;
}
.cell:hover { background:rgba(0,0,0,0.05); }
@media (hover: none) { .cell:hover { background: transparent; } }
.cell.selecting {
  background:var(--sel) !important;
  border-color:rgba(0,0,0,0.15) !important;
  transform:scale(1.05); z-index:2; position:relative;
}

/* ── GRID WRAPPER ── */
.grid-wrapper {
  position: relative;
  display: inline-block;
  line-height: 0;
  isolation: isolate;
}
.grid-svg {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 10;
}
.cell { position: relative; z-index: 1; }

@keyframes cellPop {
  0%{transform:scale(1)} 40%{transform:scale(1.2)}
  70%{transform:scale(0.94)} 100%{transform:scale(1)}
}
.cell.pop { animation:cellPop 0.28s ease; }

@keyframes cellPopFlipped {
  0%  { transform: scaleX(-1) scale(1);    }
  40% { transform: scaleX(-1) scale(1.2);  }
  70% { transform: scaleX(-1) scale(0.94); }
  100%{ transform: scaleX(-1) scale(1);    }
}

/* ── FLIP STATIS ── */
.cell-flipped {
  display: inline-flex;
  transform: scaleX(-1);
}
.cell-flipped.selecting {
  transform: scaleX(-1) scale(1.05);
}
.cell-flipped.pop {
  animation: cellPopFlipped 0.28s ease;
}

/* ── COMPLETE OVERLAY ── */
.complete-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(28,23,20,0.80); backdrop-filter:blur(6px);
  z-index:200; align-items:center; justify-content:center; padding:16px;
}
.complete-overlay.show { display:flex; }
.complete-card {
  background:var(--paper); border:3px solid var(--ink);
  box-shadow:7px 7px 0 var(--ink); border-radius:14px;
  padding:28px 32px; text-align:center;
  max-width:280px; width:100%;
  animation:dropIn 0.45s cubic-bezier(0.34,1.56,0.64,1) both;
}
.complete-card .burst {
  font-size:42px; line-height:1; margin-bottom:8px;
  display:block; opacity:0;
  animation: fadeUp 0.4s ease 0.05s both;
}
.complete-card .complete-title {
  font-family:'Gabarito',sans-serif; font-size:20px; font-weight:900;
  color:var(--green); margin-bottom:5px; letter-spacing:-0.5px;
  opacity:0; animation: fadeUp 0.4s ease 0.15s both;
}
.complete-card .complete-sub {
  font-size:11px; color:var(--ink2); line-height:1.8; margin-bottom:20px;
  opacity:0; animation: fadeUp 0.4s ease 0.25s both;
}
.complete-card .btn-lanjut {
  font-family:'Gabarito',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:1.5px; padding:11px 24px; width:100%;
  background:var(--ink); color:var(--paper);
  border:2px solid var(--ink); border-radius:7px;
  cursor:pointer; transition:all 0.13s; text-transform:uppercase;
  opacity:0; animation: fadeUp 0.4s ease 0.35s both;
}
.complete-card .btn-lanjut:hover {
  background:var(--green); border-color:var(--green);
  transform:translate(-2px,-2px); box-shadow:3px 3px 0 var(--ink);
}

/* ── ERROR OVERLAY ── */
.error-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(28,23,20,0.85); backdrop-filter: blur(6px);
  z-index: 500; align-items: center; justify-content: center; padding: 16px;
}
.error-overlay.show { display: flex; }
.error-card {
  background: var(--paper); border: 3px solid var(--ink);
  box-shadow: 7px 7px 0 var(--ink); border-radius: 14px;
  padding: 28px 32px; text-align: center;
  max-width: 280px; width: 100%;
  animation: dropIn 0.45s cubic-bezier(0.34,1.56,0.64,1) both;
}
.error-icon { font-size: 36px; margin-bottom: 10px; }
.error-title {
  font-family: 'Gabarito', sans-serif; font-size: 18px; font-weight: 900;
  color: var(--stamp); margin-bottom: 8px;
}
.error-sub {
  font-size: 11px; color: var(--ink2); line-height: 1.8; margin-bottom: 20px;
}

/* ── SITE FOOTER ── */
.site-footer {
  margin-top: 14px;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 6px; flex-shrink: 0;
  width: 100%;
}
.footer-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px; color: var(--ink2);
  letter-spacing: 0.3px; line-height: 1;
}
.footer-icons {
  display: flex; align-items: center; gap: 4px;
}
.footer-copy {
  font-family: 'DM Mono', monospace;
  font-size: 10px; color: var(--ink2); letter-spacing: 0.3px; line-height: 1;
}
.social-link {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; color: var(--ink2); font-size: 16px;
  border-radius: 8px; text-decoration: none;
  transition: color 0.15s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.social-link:hover { color: var(--ink); transform: translateY(-2px); }

/* ── KEYFRAMES ── */
@keyframes dropIn {
  from{opacity:0;transform:translateY(-16px) scale(0.96)}
  to  {opacity:1;transform:translateY(0) scale(1)}
}
@keyframes fadeUp {
  from{opacity:0;transform:translateY(10px)}
  to  {opacity:1;transform:translateY(0)}
}

/* ── HINT PULSE ── */
@keyframes hintPulse {
  0%   { background:transparent; transform:scale(1);    box-shadow:none; }
  20%  { background:#ffe44d;     transform:scale(1.18); box-shadow:0 0 0 3px rgba(196,160,0,0.35); }
  40%  { background:transparent; transform:scale(1);    box-shadow:none; }
  60%  { background:#ffe44d;     transform:scale(1.18); box-shadow:0 0 0 3px rgba(196,160,0,0.35); }
  80%  { background:transparent; transform:scale(1);    box-shadow:none; }
  100% { background:#ffe44d;     transform:scale(1.18); box-shadow:0 0 0 3px rgba(196,160,0,0.35); }
}
@keyframes hintFade {
  0%   { background:#ffe44d; transform:scale(1.18); }
  100% { background:transparent; transform:scale(1); }
}
.cell.hint-pulse {
  animation: hintPulse 1.8s ease 0s 1, hintFade 0.4s ease 1.8s 1;
  animation-fill-mode: forwards;
  position:relative; z-index:3;
}

/* ── DUAL CONTROL BAR ── */
.control-bar {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  flex-shrink: 0;
}
.ctrl-box {
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  border-radius: 8px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
}
.ctrl-box-left  { flex: 0 0 calc(40% - 5px); }
.ctrl-box-right { flex: 0 0 calc(60% - 5px); }

.ctrl-row {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
}

/* ── HINT BULBS ── */
.hint-bulbs {
  display: flex; align-items: center;
  justify-content: space-evenly;
  width: 100%;
  cursor: pointer;
  border-radius: 20px;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.bulb-slot {
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.bulb {
  font-size: 20px; line-height: 1;
  transition: opacity 0.25s, filter 0.25s, transform 0.25s;
  user-select: none; display: block;
}
.bulb.active { opacity: 1; filter: none; }
.bulb.used   { opacity: 0.25; filter: grayscale(1); }

/* ── NOMOR PUZZLE & POIN ── */
.puzzle-num {
  font-family: 'Gabarito', sans-serif;
  font-size: 15px; font-weight: 900;
  color: var(--ink); letter-spacing: -0.5px; line-height: 1;
}
.points-display {
  font-family: 'Gabarito', sans-serif;
  font-size: 15px; font-weight: 900;
  color: var(--ink); letter-spacing: -0.5px; line-height: 1;
  display: flex; align-items: center; gap: 3px;
}
.points-star { color: #c4a000; font-size: 13px; }

/* ── TOMBOL BULAT ── */
.btn-info,
.btn-action {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-family: 'Gabarito', sans-serif;
  font-size: 13px; font-weight: 900;
  color: var(--ink);
  transition: all 0.15s;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 2px 2px 0 var(--ink);
  text-decoration: none;
}
.btn-info:hover,
.btn-action:hover {
  background: var(--ink); color: var(--paper);
  transform: translate(-1px,-1px);
  box-shadow: 3px 3px 0 var(--ink2);
}
.btn-info:active,
.btn-action:active {
  transform: translate(1px,1px);
  box-shadow: 1px 1px 0 var(--ink);
}

.badge-sep {
  width: 1px; height: 14px;
  background: var(--rule); flex-shrink: 0;
}

@keyframes shake {
  0%,100%{ transform: translateX(0); }
  20%    { transform: translateX(-5px); }
  40%    { transform: translateX(5px); }
  60%    { transform: translateX(-4px); }
  80%    { transform: translateX(4px); }
}
.hint-bulbs.shake { animation: shake 0.4s ease; }

/* ── INFO MODAL ── */
.info-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(28,23,20,0.82);
  backdrop-filter: blur(7px);
  z-index: 400;
  align-items: center; justify-content: center; padding: 16px;
}
.info-overlay.show { display: flex; }
.info-box {
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  border-radius: 12px; overflow: hidden;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  animation: dropIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}
.info-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px 11px;
  border-bottom: 1px solid var(--rule); flex-shrink: 0;
}
.info-title {
  font-family: 'Gabarito', sans-serif;
  font-size: 11px; font-weight: 900; letter-spacing: 0.5px; color: var(--ink);
}
.btn-close-info {
  width: 26px; height: 26px;
  background: var(--ink); color: var(--paper);
  border: none; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 13px; font-weight: 700;
  transition: all 0.13s; font-family: 'DM Mono', monospace; flex-shrink: 0;
}
.btn-close-info:hover { background: var(--stamp); transform: scale(1.08); }
.info-body {
  padding: 14px 16px; overflow-y: auto; flex: 1;
  scrollbar-width: thin; scrollbar-color: var(--rule) transparent;
}
.info-body::-webkit-scrollbar { width: 3px; }
.info-body::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 2px; }
.info-section { margin-bottom: 16px; }
.info-section:last-child { margin-bottom: 0; }
.info-section-title {
  font-family: 'Gabarito', sans-serif;
  font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ink2); margin-bottom: 8px; padding-bottom: 5px;
  border-bottom: 1px solid var(--rule);
}
.info-item { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.info-item:last-child { margin-bottom: 0; }
.info-badge {
  width: 22px; height: 22px; border-radius: 5px;
  background: var(--ink); color: var(--paper);
  font-family: 'Gabarito', sans-serif; font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}
.info-text { font-size: 11px; color: var(--ink2); line-height: 1.7; flex: 1; }
.info-text strong { color: var(--ink); font-weight: 500; }
.info-notice {
  background: var(--bg); border: 1.5px solid var(--rule); border-radius: 7px;
  padding: 10px 12px; display: flex; gap: 8px; align-items: flex-start;
}
.info-notice-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.info-notice-text { font-size: 11px; color: var(--ink2); line-height: 1.7; }
.info-notice-text strong { color: var(--ink); }
.info-footer { padding: 10px 16px 14px; border-top: 1px solid var(--rule); flex-shrink: 0; }
.btn-mengerti {
  font-family: 'Gabarito', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 1px; padding: 11px 20px; width: 100%;
  background: var(--ink); color: var(--paper);
  border: 2px solid var(--ink); border-radius: 7px;
  cursor: pointer; transition: all 0.13s; text-transform: uppercase;
}
.btn-mengerti:hover {
  background: var(--green); border-color: var(--green);
  transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink);
}

/* ── ANIMASI POIN ── */
@keyframes pointsBump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25); color: #c4a000; }
  100% { transform: scale(1); }
}
.points-bump { animation: pointsBump 0.3s ease; }

/* ── COMPLETE CARD STAT ── */
.complete-stat {
  margin: 0 0 20px; padding: 12px 14px;
  background: var(--bg); border: 1.5px solid var(--rule); border-radius: 9px;
  opacity: 0; animation: fadeUp 0.4s ease 0.30s both;
}
.complete-stat-num {
  font-family: 'Gabarito', sans-serif;
  font-size: 28px; font-weight: 900; color: var(--green); line-height: 1; margin-bottom: 4px;
}
/* ── QRIS MODAL ── */
.qris-box {
  max-width: 300px;
}
.qris-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 16px;
}
.qris-instruction {
  font-size: 11px;
  color: var(--ink2);
  line-height: 1.7;
  text-align: center;
}
.qris-img-wrap {
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: 3px 3px 0 var(--ink);
  overflow: hidden;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.qris-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.qris-notice {
  font-size: 10px;
  color: var(--ink2);
  line-height: 1.7;
  text-align: center;
  letter-spacing: 0.2px;
}