/* ============================================================
   STOP! SIMULASI JERAT JUDOL
   Game edukasi MULTI-FSM (vanilla JS)
   File CSS — semua tampilan dipindah ke sini (perilaku tidak berubah)
   ============================================================ */
:root{
  --bg:#0d0d10;
  --panel:rgba(0,0,0,.78);
  --accent:#ffcf33;
  --danger:#e0463e;
  --safe:#4caf78;
  --warn:#e8a13a;
  --text:#f4f4f0;
  --muted:#9a9a9a;
  --font-display:'Bebas Neue','Arial Narrow',sans-serif;
  --font-body:'Segoe UI',system-ui,sans-serif;
}
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}

/* ====== STAGE ====== */
#stage{
  position:relative;
  width:900px;
  height:506.25px;
  flex-shrink:0;
  background:#1b1b20;
  overflow:hidden;
  box-shadow:0 0 60px rgba(0,0,0,.6);
  user-select:none;
  transform-origin:center center;
}

/* ====== LATAR (SLOT GAMBAR) ====== */
#bg-slot{
  position:absolute;inset:0;
  background:#23232b;
  display:flex;align-items:center;justify-content:center;
  background-size:cover;background-position:center;
  transition:background-image .2s;
}
#bg-slot .alt-label{
  color:#555;font-size:14px;letter-spacing:1px;
  border:1px dashed #444;padding:8px 14px;border-radius:6px;
  background:rgba(0,0,0,.3);text-align:center;
}

/* ====== INTERACTIVE LAYER ====== */
#interactive-layer{
  position:absolute;inset:0;z-index:4;
}
.interactive-obj {
  position: absolute;
  pointer-events: none;
}
#img-tv { top: -10%; left: 50%; transform: translate(-50%, 0); width: 320px; height: auto; filter:drop-shadow(0 10px 15px rgba(0,0,0,0.8)); }

.hitbox {
  position:absolute;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform 0.2s, filter 0.2s;
}
.hitbox:hover {
  transform:scale(1.05);
  filter: brightness(1.2);
}
.obj-img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 5px 8px rgba(0,0,0,0.6)); }

#hitbox-remote { top: 55%; left: 25%; transform:translate(-50%,0); width:100px; height:220px; cursor: pointer; }
#hitbox-pisang { top: 55%; left: 42%; transform:translate(-50%,0); width:250px; height:180px; cursor: pointer; }
#hitbox-kopi { top: 55%; left: 58%; transform:translate(-50%,0); width:150px; height:150px; cursor: pointer; }
#hitbox-hp { top: 55%; left: 75%; transform:translate(-50%,0); width:150px; height:230px; cursor: pointer; }

@keyframes liftUpFade {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-50px) scale(1.1); opacity: 0; }
}
.anim-lift {
  animation: liftUpFade 0.6s ease-out forwards;
}

/* ====== KARAKTER (SLOT GAMBAR) ====== */
#char-container{
  position:absolute;bottom:0;left:0;right:0;height:78%;
  display:flex;align-items:flex-end;justify-content:center;
  gap: 20px; pointer-events:none;
}
.char-slot{
  width:35%;height:100%;
  display:flex;align-items:flex-end;justify-content:center;
  background-size:contain;background-position:bottom center;background-repeat:no-repeat;
  transition: transform 0.2s, filter 0.2s;
}
.char-slot.item-slot{
  position:absolute;
  width:200px;height:120px;
  bottom:30px;left:50%;
  transform:translateX(-50%);
  z-index:20;
}
.char-slot.inactive{
  filter: brightness(0.6);
  transform: scale(0.95);
}
.char-slot .alt-label{
  margin-bottom:120px;color:#777;font-size:12px;
  border:1px dashed #555;padding:6px 10px;border-radius:6px;
  background:rgba(0,0,0,.35);
}

/* ====== HUD KIRI ATAS ====== */
#hud{
  position:absolute;top:0;left:0;z-index:5;
  background:var(--panel);
  padding:14px 18px 16px;
  border-bottom-right-radius:6px;
  min-width:270px;
}
#hud .saldo{font-size:20px;font-weight:700;letter-spacing:.3px}
#hud .hari{font-size:12px;color:var(--muted);margin-top:2px}
#hud .kc-label{font-size:13px;margin-top:10px;margin-bottom:5px}
#kc-bar{
  width:240px;height:18px;border:2px solid #fff;background:#000;position:relative;
}
#kc-fill{height:100%;width:0;background:var(--accent);transition:width .5s,background .5s}

/* logo pojok kanan */
#logo{
  position:absolute;top:14px;right:16px;z-index:5;
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:24px;color:#fff;
}

/* ====== DIALOG BAWAH ====== */
#dialog{
  position:absolute;left:0;right:0;bottom:0;z-index:6;
  background:linear-gradient(transparent,rgba(0,0,0,.55) 18%,rgba(0,0,0,.82) 40%);
  padding:26px 30px 22px;cursor:pointer;
}
#speaker{font-weight:700;font-size:17px;color:var(--accent);margin-bottom:4px;min-height:20px}
#line{font-size:18px;line-height:1.45;min-height:52px}
#hint{position:absolute;right:30px;bottom:14px;font-family:var(--font-display);
  font-size:22px;color:#fff;letter-spacing:1px;opacity:.85}
#hint.hidden{display:none}

/* ====== PILIHAN ====== */
#choices{
  position:absolute;left:0;right:0;bottom:0;z-index:7;
  display:none;flex-direction:column;gap:10px;
  padding:24px 30px;background:rgba(0,0,0,.6);
}
#choices button{
  font-family:var(--font-body);font-size:16px;
  background:#1c1c22;color:var(--text);border:2px solid #444;
  padding:13px 18px;border-radius:8px;cursor:pointer;text-align:left;
  transition:.15s;
}
#choices button:hover{border-color:var(--accent);background:#2a2a33;transform:translateX(4px)}

/* ====== SIMULASI HP ====== */
#phone-overlay{
  position:absolute;inset:0;z-index:20;display:none;
  align-items:center;justify-content:center;
  background:rgba(0,0,0,.65);backdrop-filter:blur(2px);
}
#phone{
  width:300px;height:90%;max-height:560px;
  background:#000;border-radius:30px;border:6px solid #222;
  padding:14px;display:flex;flex-direction:column;position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,.7);
}
#phone .notch{width:120px;height:20px;background:#222;border-radius:0 0 14px 14px;
  margin:0 auto 8px;flex-shrink:0}
#phone-screen{flex:1;background:#11131a;border-radius:18px;overflow-y:auto;color:#eee;
  display:flex;flex-direction:column}
.phone-appbar{padding:12px 14px;font-weight:700;background:#1a73e8;color:#fff;
  border-radius:18px 18px 0 0;display:flex;align-items:center;gap:8px;font-size:15px}
.phone-appbar.judol{background:#7b1fa2}
.phone-appbar.pinjol{background:#c62828}
.phone-body{padding:14px;flex:1;font-size:14px;line-height:1.5}
.phone-body h4{margin-bottom:8px;font-size:15px}
.phone-saldo{background:#1f2330;border-radius:10px;padding:12px;text-align:center;margin-bottom:12px}
.phone-saldo .v{font-size:22px;font-weight:700;color:var(--accent)}
.phone-btn{display:block;width:100%;padding:12px;margin-top:10px;border:none;border-radius:10px;
  font-size:15px;font-weight:600;cursor:pointer;color:#fff;background:#1a73e8;transition:.15s}
.phone-btn:hover{filter:brightness(1.15)}
.phone-btn.win{background:#2e7d32}
.phone-btn.danger{background:#c62828}
.phone-btn.purple{background:#7b1fa2}
.phone-msg{padding:9px 12px;border-radius:14px;margin:6px 0;max-width:80%;font-size:13px}
.phone-msg.them{background:#23262f;align-self:flex-start;border-bottom-left-radius:3px}
.phone-msg.me{background:#1a73e8;align-self:flex-end;border-bottom-right-radius:3px}
.phone-chat{display:flex;flex-direction:column;padding:12px}
.phone-result{text-align:center;padding:18px;font-size:16px;font-weight:700}
.phone-result.win{color:#66bb6a}
.phone-result.lose{color:#ef5350}
.phone-close{position:absolute;top:-2px;right:8px;background:none;border:none;color:#888;
  font-size:26px;cursor:pointer;z-index:2}
.ktp-slot,.selfie-slot{border:1px dashed #555;border-radius:8px;padding:18px;text-align:center;
  color:#888;font-size:12px;margin:8px 0;background:#181b24}

/* ====== LAYAR JUDUL & ENDING ====== */
.fullscreen{
  position:absolute;inset:0;z-index:30;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:40px;
  background:radial-gradient(circle at 50% 30%,#1c1c28,#08080c);
}
.fullscreen h1{font-family:var(--font-display);font-size:78px;letter-spacing:3px;line-height:.9}
.fullscreen h1 .stop{color:var(--danger)}
.fullscreen .sub{color:var(--muted);margin-top:6px;letter-spacing:4px;font-size:14px;text-transform:uppercase}
.fullscreen .warn{margin-top:26px;max-width:520px;font-size:13px;color:#bbb;
  border:1px solid #333;padding:14px 18px;border-radius:8px;background:rgba(0,0,0,.3)}
.fullscreen button{
  margin-top:30px;font-family:var(--font-display);font-size:26px;letter-spacing:2px;
  padding:12px 46px;border:2px solid var(--accent);background:transparent;color:var(--accent);
  border-radius:8px;cursor:pointer;transition:.18s}
.fullscreen button:hover{background:var(--accent);color:#000}
.ending-badge{font-family:var(--font-display);font-size:20px;letter-spacing:3px;
  padding:6px 20px;border-radius:30px;margin-bottom:14px}
.ending-badge.happy{background:var(--safe);color:#04230f}
.ending-badge.bad{background:var(--danger);color:#fff}
.ending-badge.epilog{background:#5b7fb5;color:#fff}
.ending-title{font-family:var(--font-display);font-size:54px;line-height:1;margin-bottom:18px}
.ending-msg{max-width:560px;font-size:17px;line-height:1.55;color:#e8e8e8}
.ending-msg em{color:var(--accent);font-style:normal;font-weight:600}
.tips{text-align:left;max-width:540px;margin-top:20px;font-size:14px;color:#cfcfcf;
  background:rgba(0,0,0,.35);border-left:3px solid var(--safe);padding:14px 18px;border-radius:6px}
.tips b{color:var(--safe)}

/* ====== PANEL DEBUG FSM ====== */
#fsm-debug{
  position:absolute;top:0;right:0;z-index:40;
  background:rgba(5,8,14,.93);border:1px solid #2a3340;border-radius:0 0 0 10px;
  padding:12px 14px;font-family:'Consolas',monospace;font-size:11px;color:#9fe6c0;
  min-width:215px;
}
#fsm-debug h5{color:var(--accent);margin-bottom:8px;font-size:11px;letter-spacing:1px;
  font-family:var(--font-body)}
#fsm-debug .row{display:flex;justify-content:space-between;padding:2px 0;border-bottom:1px dotted #1d2530}
#fsm-debug .row span:first-child{color:#7a8aa0}
#fsm-debug .row span:last-child{color:#9fe6c0;font-weight:700}
.tool-btn{position:absolute;z-index:41;background:#181b24;color:#8a93a3;border:1px solid #333;
  font-size:11px;padding:5px 9px;border-radius:6px;cursor:pointer}
#toggle-debug{top:8px;right:235px}
#toggle-debug.collapsed{right:8px}
#skip-menu-btn{bottom:8px;left:8px}
#skip-menu{position:absolute;bottom:40px;left:8px;z-index:42;display:none;
  background:rgba(5,8,14,.96);border:1px solid #333;border-radius:8px;padding:8px;flex-direction:column;gap:5px}
#skip-menu button{font-size:12px;background:#1c1c22;color:#ccc;border:1px solid #3a3a44;
  padding:7px 10px;border-radius:5px;cursor:pointer;text-align:left}
#skip-menu button:hover{border-color:var(--accent)}

/* ====== JUDOL REALISTIC UI ====== */
.judol-bg {
  background: radial-gradient(circle at 50% 50%, #2b005c 0%, #120024 100%);
  position: relative;
  padding: 0;
  color: white;
  min-height: 100%;
}
.judol-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: rgba(0,0,0,0.4);
}
.judol-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.judol-coin-icon {
  font-size: 30px;
}
.judol-title-text h3 {
  margin: 0;
  font-size: 20px;
  letter-spacing: 2px;
  white-space: nowrap;
}
.judol-title-text p {
  margin: 0;
  font-size: 12px;
  color: #ccc;
}
.judol-topup {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 10px;
  cursor: pointer;
  background: rgba(255,255,255,0.1);
  padding: 5px 10px;
  border-radius: 8px;
}
.judol-topup-icon {
  font-size: 20px;
}
.judol-balance-label {
  text-align: center;
  font-size: 14px;
  margin-top: 20px;
}
.judol-balance-box {
  margin: 5px auto 20px;
  width: 70%;
  background: linear-gradient(180deg, #4caf50, #1b5e20);
  border: 2px solid #81c784;
  text-align: center;
  padding: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
}
.judol-balance-value {
  font-size: 18px;
  font-weight: bold;
}
.judol-bet-section {
  padding: 0 20px;
}
.judol-bet-label {
  font-size: 14px;
  margin-bottom: 5px;
}
.judol-bet-input-box {
  display: flex;
  align-items: center;
  background: #fff;
  color: #000;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
}
.judol-bet-input-box span {
  flex: 1;
  text-align: right;
  font-weight: bold;
}
.judol-spins-section {
  padding: 0 20px;
  margin-top: 15px;
}
.judol-spins-buttons {
  display: flex;
  gap: 15px;
  margin-top: 10px;
  justify-content: center;
}
.spin-multiplier {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 3px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 5px rgba(0,0,0,0.4);
  transition: transform 0.1s;
}
.spin-multiplier:hover, .spin-multiplier.active {
  transform: scale(1.1);
  box-shadow: 0 0 10px #fff;
}
.spin-m-3 { background: #1976d2; }
.spin-m-5 { background: #f57c00; }
.spin-m-7 { background: #388e3c; }

.judol-actions {
  margin-top: 30px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.judol-btn {
  padding: 15px;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,0.3);
  text-transform: uppercase;
  transition: filter 0.1s;
}
.judol-btn:active {
  box-shadow: inset 0 0 0 rgba(0,0,0,0);
  transform: translateY(4px);
}
.judol-btn-play {
  background: #03a9f4;
  color: #000;
}
.judol-btn-back {
  background: #e53935;
  color: #fff;
}

/* Pop-up Bet Selection */
.bet-popup-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  background: #6a1b9a;
  border: 4px solid #ba68c8;
  border-radius: 15px;
  padding: 20px;
  display: none;
  z-index: 100;
  box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}
.bet-popup-container.show {
  display: block;
  animation: popIn 0.2s ease-out;
}
@keyframes popIn {
  0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.bet-popup-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}
.bet-popup-title {
  font-weight: bold;
  font-size: 18px;
}
.bet-option {
  background: #ab47bc;
  border: 2px solid #e1bee7;
  color: white;
  padding: 12px;
  margin-bottom: 10px;
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  font-size: 16px;
  transition: background 0.1s;
}
.bet-option:hover {
  background: #ce93d8;
  color: #000;
}
.bet-popup-close {
  position: absolute;
  bottom: -15px;
  right: -15px;
  background: #fff;
  color: #6a1b9a;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 20px;
  cursor: pointer;
  border: 3px solid #6a1b9a;
}

/* ====== LAYAR SPIN SLOT ====== */
.spin-screen-bg {
  background: linear-gradient(180deg, #2a004f 0%, #a00b55 50%, #d84800 100%);
  position: relative;
  padding: 15px;
  color: white;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.judol-hex-container {
  text-align: left;
}
.judol-hex-label {
  font-size: 16px;
  font-weight: bold;
  text-shadow: 1px 1px 2px #000;
  margin-bottom: 2px;
  margin-left: 10px;
}
.judol-hex-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 25px;
  border: 3px solid #fff;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 1px 1px 2px #000;
  white-space: nowrap;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 4px 10px rgba(0,0,0,0.5);
  clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
}
.hex-yellow { background: linear-gradient(180deg, #ffca28, #f57f17); border-color: #fff59d; color: #000; text-shadow: none; }
.hex-red { background: linear-gradient(180deg, #ef5350, #b71c1c); border-color: #ef9a9a; }
.hex-purple { background: linear-gradient(180deg, #ba68c8, #6a1b9a); border-color: #e1bee7; }
.hex-green { background: linear-gradient(180deg, #66bb6a, #1b5e20); border-color: #c8e6c9; }
.hex-icon { font-size: 24px; filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.5)); }

.reels-wrapper {
  background: #333;
  border: 4px solid #aaa;
  padding: 5px;
  display: flex;
  gap: 5px;
  height: 110px;
  margin: 10px 0;
  box-shadow: 0 5px 15px rgba(0,0,0,0.6);
}
.reel {
  flex: 1;
  background: linear-gradient(180deg, #777 0%, #777 20%, #fff 20%, #fff 80%, #777 80%, #777 100%);
  border: 2px solid #555;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 10px 15px rgba(0,0,0,0.5), inset 0 -10px 15px rgba(0,0,0,0.5);
}
.reel-strip {
  display: flex;
  flex-direction: column;
  transition: transform 2s cubic-bezier(0.1, 0.7, 0.1, 1);
  will-change: transform;
}
.reel-symbol {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 45px;
  padding-bottom: 12px;
  box-sizing: border-box;
}