*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --blue:#0aa6ff; --blue2:#0077e6; --navy:#0b2a4a;
  --yellow:#ffcf2e; --green:#22c55e; --red:#ef4444; --pink:#ff5fa2;
  --card:#ffffff;
}
html,body{margin:0;padding:0}
body{
  font-family:'Nunito',system-ui,sans-serif; color:#0b2a4a;
  background:linear-gradient(160deg,#0284c7,#38bdf8 45%,#bae6fd);
  min-height:100vh; min-height:100dvh; display:flex; justify-content:center;
}
#phone{width:100%;max-width:480px;min-height:100vh;min-height:100dvh;background:linear-gradient(180deg,#f0f9ff,#dbeafe 60%,#fef9c3);position:relative;padding-bottom:24px;box-shadow:0 0 40px rgba(0,0,0,.25)}
/* saat main: boleh full-lebar (landscape) */
body.playing #phone{max-width:1000px;padding-bottom:10px}
#topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:linear-gradient(90deg,var(--blue2),var(--blue));color:#fff;border-bottom:3px solid #fff}
.logo{font-family:'Fredoka';font-weight:700;letter-spacing:.5px;font-size:18px}
.logo span{background:var(--yellow);color:#7c2d12;padding:1px 7px;border-radius:8px}
.logo small{background:#fff;color:var(--blue2);border-radius:8px;padding:0 6px;font-size:11px}
.netstat{font-size:10px;background:#0b2a4a66;border-radius:8px;padding:1px 6px;font-weight:800}
.icon-btn{border:none;background:#ffffff33;color:#fff;font-size:18px;border-radius:10px;padding:4px 10px;cursor:pointer}
.screen{display:none;padding:12px 12px 0}
.screen.active{display:block}
.hidden{display:none!important}
#modeSeg{margin-bottom:4px}
.roomcode{text-align:center;background:linear-gradient(180deg,#0b2a4a,#155e9c);color:#fff;border-radius:16px;padding:12px;margin:10px 0;border:3px solid var(--yellow)}
.roomcode h1{font-family:'Fredoka';font-size:44px;letter-spacing:8px;margin:4px 0;color:var(--yellow)}
.roomcode small{opacity:.8}
.lrow{display:flex;align-items:center;gap:8px;background:#f1f5f9;border-radius:10px;padding:6px 10px;margin:6px 0;font-weight:800;font-size:14px}
#btnAddBot{width:100%;border:2px solid var(--navy);background:#fff;border-radius:12px;padding:10px;font-weight:800;font-size:14px;cursor:pointer;margin:6px 0}
#btnStartOnline{width:100%;margin:6px 0 4px;border:none;background:linear-gradient(180deg,#22c55e,#15803d);color:#fff;font-family:'Fredoka';font-weight:700;font-size:22px;padding:14px;border-radius:16px;cursor:pointer;box-shadow:0 4px 0 #14532d;position:relative;overflow:hidden}
#btnStartOnline::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffff66,transparent);animation:shine 2.2s infinite}
#btnRejoin{width:100%;margin-top:6px;border:2px solid var(--navy);background:#fff;border-radius:12px;padding:10px;font-weight:800;font-size:14px;cursor:pointer}
#joinRoster .lrow{background:#f0fdf4}

/* SETUP */
.hero{text-align:center;background:linear-gradient(180deg,#0b2a4a,#155e9c);color:#fff;border-radius:20px;padding:18px 14px 12px;border:3px solid #fff;box-shadow:0 6px 0 #0b2a4a33}
.hero-badge{display:inline-block;background:var(--pink);font-size:11px;font-weight:800;padding:4px 10px;border-radius:20px;letter-spacing:.5px;animation:badgePulse 1.6s infinite}
@keyframes badgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.hero h1{font-family:'Fredoka';font-size:52px;line-height:.9;margin:10px 0 6px;color:var(--yellow);text-shadow:3px 3px 0 #7c2d12}
.tagline{font-size:14px;opacity:.95;margin:0 0 8px}
.marquee{overflow:hidden;white-space:nowrap;background:#ffffff22;border-radius:10px;padding:6px 0;font-size:12px;font-weight:700}
.marquee span{display:inline-block;animation:slide 18s linear infinite}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.card{background:var(--card);border-radius:18px;padding:14px;margin-top:12px;border:3px solid #fff;box-shadow:0 5px 0 rgba(11,42,74,.15)}
.card h2{font-family:'Fredoka';margin:0 0 8px;font-size:18px}
.lbl{font-size:12px;font-weight:800;color:#475569;text-transform:uppercase;margin:10px 0 6px;display:block}
.seg{display:flex;gap:8px}
.seg button{flex:1;border:2px solid #cbd5e1;background:#f1f5f9;border-radius:12px;padding:8px 4px;font-weight:800;cursor:pointer;font-size:14px;transition:transform .15s}
.seg button.on{background:var(--yellow);border-color:#7c2d12;transform:scale(1.03)}
.btn-primary{width:100%;margin-top:14px;border:none;background:linear-gradient(180deg,#22c55e,#15803d);color:#fff;font-family:'Fredoka';font-size:19px;padding:14px;border-radius:16px;cursor:pointer;box-shadow:0 4px 0 #14532d;position:relative;overflow:hidden}
.btn-primary::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffff66,transparent);animation:shine 2.2s infinite}
@keyframes shine{to{left:130%}}
.btn-primary:active{transform:translateY(2px);box-shadow:none}
.hint{font-size:12px;color:#64748b}
.howto ol{margin:0;padding-left:18px;font-size:13px}
.prow{display:flex;gap:8px;margin-bottom:8px;align-items:center}
.prow .ava{font-size:26px;background:#f1f5f9;border-radius:12px;padding:4px 8px}
.prow input{flex:1;border:2px solid #cbd5e1;border-radius:12px;padding:9px;font-weight:700;font-family:inherit}
.prow select{border:2px solid #cbd5e1;border-radius:12px;padding:9px;font-weight:800}
.dot{width:14px;height:14px;border-radius:50%;display:inline-block}

/* PLAYERS */
#playersBar{display:flex;gap:6px;margin-bottom:8px}
.pcard{flex:1;background:#fff;border-radius:12px;padding:6px 4px;text-align:center;border:2px solid #e2e8f0;position:relative;min-width:0;transition:transform .25s, box-shadow .25s}
.pcard.active{border-color:var(--yellow);box-shadow:0 0 0 2px var(--yellow),0 4px 12px #f59e0b66;background:#fffbeb;transform:translateY(-2px);animation:activeGlow 1.4s infinite}
@keyframes activeGlow{0%,100%{box-shadow:0 0 0 2px var(--yellow)}50%{box-shadow:0 0 0 4px #f59e0b,0 4px 14px #f59e0b88}}
.pcard.dead{opacity:.45;filter:grayscale(1)}
.pcard.jailed{border-color:var(--red);box-shadow:0 0 0 2px var(--red);background:#fef2f2}
.pcard .pa{font-size:22px;display:inline-block}
.pcard.active .pa{animation:hop .6s infinite}
@keyframes hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.pcard .pn{font-size:10px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard .pm{font-size:11px;font-weight:800;color:#15803d}
.pcard .props{font-size:9px;color:#0b2a4a;font-weight:800}
.pcard .worth{font-size:9px;color:#7c3aed;font-weight:800}
.pcard .lands{display:flex;flex-wrap:wrap;gap:2px;justify-content:center;margin-top:2px;max-height:40px;overflow-y:auto}
.lchip{background:#f1f5f9;border:1px solid #cbd5e1;border-radius:6px;font-size:8px;font-weight:800;padding:0 3px;white-space:nowrap}
.lempty{font-size:8px;color:#94a3b8;font-weight:700}
.pcard .pturn{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--red);color:#fff;font-size:9px;font-weight:800;border-radius:8px;padding:1px 7px;display:none}
.pcard.active .pturn{display:block;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.5}}
.pcard .props{font-size:9px;color:#64748b;font-weight:700}

/* LAYOUT main */
#playRow{display:flex;flex-direction:column;gap:8px}
#boardWrap{position:relative;flex-shrink:0}
#board{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:3px;background:linear-gradient(180deg,#0b2a4a,#1e40af);padding:6px;border-radius:18px;border:3px solid #fff;aspect-ratio:1/1;touch-action:manipulation}
.tile{background:#fff;border-radius:8px;font-size:9px;font-weight:800;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2px;line-height:1.1;position:relative;overflow:hidden;min-height:0;transition:transform .15s}
.tile .t-emoji{font-size:16px;line-height:1}
.tile .t-price{font-size:8px;color:#15803d}
.tile.city{border-bottom:4px solid var(--green)}
.tile.special-takdir{background:#fef9c3}
.tile.special-musibah{background:#ffe4e6}
.tile.special-pajak{background:#ffedd5}
.tile.special-court{background:linear-gradient(180deg,#ede9fe,#ddd6fe);border-bottom:4px solid #7c3aed}
.tile.corner{background:var(--yellow)}
.tile .owner{position:absolute;bottom:1px;right:2px;font-size:9px}
.tile .houses{position:absolute;top:1px;right:2px;font-size:9px}
/* PION JELAS: chip lingkaran warna pemain */
.tile .pawns{position:absolute;top:1px;left:1px;display:flex;max-width:70%;flex-wrap:wrap;gap:1px}
.pawn{width:21px;height:21px;border-radius:50%;background:#fff;border:2.5px solid var(--pc,#333);display:inline-flex;align-items:center;justify-content:center;font-size:12px;line-height:1;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.pawn.me{animation:pawnGlow .9s infinite;transform:scale(1.12)}
@keyframes pawnGlow{0%,100%{box-shadow:0 0 0 2px var(--pc),0 0 6px var(--pc)}50%{box-shadow:0 0 0 4px var(--pc),0 0 12px var(--pc)}}
.tile.mypos{outline:2.5px dashed var(--navy);outline-offset:-2px}
.pcard .ppos{font-size:9px;font-weight:800;color:#0b2a4a;background:#e0f2fe;border-radius:6px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile.stepPulse{animation:tilePulse .35s}
@keyframes tilePulse{0%{transform:scale(1)}40%{transform:scale(1.12);box-shadow:0 0 0 3px var(--pink)}100%{transform:scale(1)}}
.tile.hl{animation:landGlow 1s infinite;border:2px solid var(--pink)}
@keyframes landGlow{0%,100%{box-shadow:0 0 0 2px var(--pink)}50%{box-shadow:0 0 14px 4px var(--pink)}}

/* CENTER PANEL = pusat semua tombol aksi */
#centerPanel{position:absolute;inset:calc(100%/7 + 10px);background:linear-gradient(180deg,#ffffff,#fef9c3);border-radius:14px;border:3px dashed var(--blue2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center;padding:6px;overflow:hidden}
#turnInfo{font-size:12px;font-weight:800}
#phaseInfo{font-size:10px;font-weight:800;color:#fff;background:var(--navy);border-radius:8px;padding:1px 8px;animation:phaseIn .3s}
@keyframes phaseIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1}}
#diceArea{display:flex;gap:8px}
.die{width:42px;height:42px;background:#fff;border:3px solid var(--navy);border-radius:12px;font-size:28px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 0 var(--navy)}
.die.rolling{animation:tumble .12s infinite}
@keyframes tumble{0%{transform:rotate(-18deg) scale(1.15)}50%{transform:rotate(18deg) scale(.92)}100%{transform:rotate(-10deg) scale(1.08)}}
.die.landed{animation:landPop .35s}
@keyframes landPop{0%{transform:scale(1.5)}100%{transform:scale(1)}}
.btn-dice{border:none;background:linear-gradient(180deg,#ff5fa2,#e11d48);color:#fff;font-family:'Fredoka';font-size:14px;padding:7px 18px;border-radius:14px;cursor:pointer;box-shadow:0 3px 0 #881337;position:relative;overflow:hidden}
.btn-dice::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffff77,transparent);animation:shine 2s infinite}
.btn-dice:disabled{opacity:.5;cursor:wait}
.btn-dice:active{transform:translateY(2px);box-shadow:none}
#centerActions{display:grid;grid-template-columns:1fr 1fr;gap:4px;width:100%}
.cbtn{border:2px solid var(--navy);background:#fff;border-radius:10px;padding:4px 2px;font-weight:800;font-size:10px;cursor:pointer;line-height:1.2;transition:transform .12s}
.cbtn:active{transform:scale(.93)}
.cbtn:disabled{opacity:.35;filter:grayscale(.8);cursor:not-allowed}
.cbtn:not(:disabled){box-shadow:0 0 6px #22c55e88;border-color:#15803d}
#btnBuild:not(:disabled){background:#f0fdf4}
#btnEnd{grid-column:1/-1;background:#fef9c3;border-color:#7c2d12}
#modalAuto{font-size:11px;font-weight:800;color:#b45309;background:#fef9c3;border-radius:8px;padding:4px 8px;margin-top:8px}
#modalAuto.hidden{display:none}
.cbtn small{display:block;font-size:8px;color:#15803d}
#roundInfo{font-size:10px;font-weight:800;color:#64748b}

/* SIDE: story + log */
#sideCol{display:flex;flex-direction:column;gap:8px;min-width:0}
#storyBar{background:linear-gradient(90deg,#0b2a4a,#155e9c);color:#fff;font-size:12px;font-weight:700;border-radius:12px;padding:8px 10px;border:2px solid #fff;min-height:38px;animation:storyFlash .3s}
@keyframes storyFlash{from{background:#e11d48}to{}}
#logBox{background:#0b2a4a;border-radius:14px;padding:8px;border:3px solid #fff;height:190px;display:flex;flex-direction:column}
#log{overflow-y:auto;display:flex;flex-direction:column;gap:5px;flex:1}
.msg{background:#fff;border-radius:10px 10px 10px 2px;padding:5px 8px;font-size:12px;font-weight:600;max-width:98%;animation:msgIn .3s}
@keyframes msgIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1}}
.msg b{font-weight:800}
.msg.good{border-left:4px solid var(--green)}
.msg.bad{border-left:4px solid var(--red)}
.msg.info{border-left:4px solid var(--blue)}
.msg.gold{background:#fef9c3;border-left:4px solid var(--yellow)}
.msg.why{background:#f0fdf4;border-left:4px solid #16a34a;font-size:11px;color:#14532d}

/* event banner */
#eventBanner{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;pointer-events:none}
#eventBanner.hidden{display:none}
#eventText{background:#0b2a4add;color:var(--yellow);font-family:'Fredoka';font-size:26px;padding:14px 22px;border-radius:18px;border:3px solid var(--yellow);text-align:center;max-width:88vw;animation:bannerZoom 1.4s}
@keyframes bannerZoom{0%{transform:scale(.4) rotate(-4deg);opacity:0}20%{transform:scale(1.1);opacity:1}70%{transform:scale(1)}100%{transform:scale(1.05);opacity:0}}

/* floating money fx */
#fxLayer{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.floatMoney{position:absolute;font-weight:800;font-size:16px;animation:floatUp 1.4s forwards;text-shadow:1px 1px 0 #fff}
@keyframes floatUp{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-60px)}}

/* MODAL */
#modalOverlay{position:fixed;inset:0;background:rgba(11,42,74,.7);z-index:50;display:flex;align-items:center;justify-content:center;padding:18px}
#modalOverlay.hidden{display:none}
#modalCard{background:#fff;border-radius:22px;max-width:420px;max-height:92vh;max-height:92dvh;overflow-y:auto;width:100%;text-align:center;padding:20px 16px;border:4px solid var(--yellow);box-shadow:0 10px 0 rgba(0,0,0,.3);animation:cardFlip .35s}
@keyframes cardFlip{0%{transform:perspective(600px) rotateY(90deg) scale(.8);opacity:0}100%{transform:perspective(600px) rotateY(0) scale(1);opacity:1}}
#modalEmoji{font-size:56px;animation:emojiBounce .8s infinite}
@keyframes emojiBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
#modalTitle{font-family:'Fredoka';margin:6px 0;font-size:22px}
#modalDesc{font-size:13px;color:#334155;font-weight:600;text-align:left;background:#f8fafc;border-radius:12px;padding:10px}
#modalDesc .sec{background:#fff;border-radius:8px;padding:6px 8px;margin:6px 0;border:1px solid #e2e8f0}
#modalBtns{display:flex;gap:8px;margin-top:14px;flex-direction:column}
#modalBtns button{border:none;border-radius:14px;padding:12px;font-weight:800;font-size:15px;cursor:pointer;font-family:inherit;transition:transform .12s}
#modalBtns button:active{transform:scale(.96)}
.btn-yes{background:linear-gradient(180deg,#22c55e,#15803d);color:#fff}
.btn-no{background:#e2e8f0;color:#334155}
.btn-one{background:linear-gradient(180deg,var(--blue),var(--blue2));color:#fff}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#0b2a4a;color:#fff;font-weight:800;font-size:13px;padding:10px 16px;border-radius:14px;z-index:60;max-width:92vw;text-align:center;border:2px solid var(--yellow);animation:msgIn .25s}
#toast.hidden{display:none}
#confettiLayer{position:fixed;inset:0;pointer-events:none;z-index:55;overflow:hidden}
.confetti{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}

/* LAYAR BESAR LANDSCAPE (tablet ≥1024px / desktop): papan kiri, log kanan.
   Semua HP (portrait maupun landscape) → susun vertikal: kartu pemain → papan → cerita+log di bawah. */
@media (orientation:landscape) and (min-width:1024px){
  #phone{padding-bottom:8px}
  #gameScreen{padding:8px 10px 0}
  #playersBar{margin-bottom:6px}
  .pcard .pa{font-size:18px}
  #playRow{flex-direction:row;align-items:stretch}
  #boardWrap{flex:0 1 auto;width:min(calc(100dvh - 150px),52vw);margin:0 auto}
  #sideCol{flex:1;min-width:240px;max-width:420px}
  #logBox{height:auto;flex:1;min-height:0;max-height:calc(100dvh - 220px)}
  #centerPanel{gap:2px;padding:4px}
  .die{width:32px;height:32px;font-size:22px}
  .btn-dice{font-size:12px;padding:5px 14px}
  .cbtn{font-size:9px;padding:3px 2px}
  #turnInfo{font-size:11px}
}
/* LAYAR KECIL/HP (<1024px): semua disusun vertikal — kartu pemain & log di bawah papan */
@media (max-width:1023px){
  body.playing #phone{max-width:600px}
  #gameScreen{padding:8px 8px 0}
  #playRow{flex-direction:column}
  #boardWrap{width:100%}
  .pcard .pa{font-size:18px}
  .pcard .lands{max-height:26px}
  #storyBar{font-size:11px}
  #logBox{height:170px}
}
@media(min-width:1000px){#phone{border-left:3px solid #fff;border-right:3px solid #fff}}