/* ============ MONOPOLI NUSANTARA — style.css ============ */
:root{
    --merah:#e63946; --merah-d:#c1121f;
    --gold:#f4a261; --kuning:#e9c46a;
    --tosca:#2a9d8f; --tosca-d:#21867a;
    --navy:#1d3557; --biru:#457b9d;
    --cream:#fdf6ec; --card:#ffffff; --ink:#26243b; --muted:#6b7280;
    --shadow:0 10px 30px rgba(29,53,87,.14);
    --shadow-sm:0 4px 14px rgba(29,53,87,.10);
    --radius:22px; --radius-sm:14px;
    --font-head:'Baloo 2', system-ui, sans-serif;
    --font-body:'Plus Jakarta Sans', system-ui, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
    font-family:var(--font-body); color:var(--ink);
    background:var(--cream); -webkit-font-smoothing:antialiased;
    min-height:100vh;
}
h1,h2,h3,.logo-text,.setup-title{font-family:var(--font-head)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

.bg-decor{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
        radial-gradient(circle at 12% 18%, rgba(42,157,143,.18), transparent 42%),
        radial-gradient(circle at 88% 12%, rgba(230,57,70,.16), transparent 40%),
        radial-gradient(circle at 78% 88%, rgba(244,162,97,.20), transparent 42%),
        radial-gradient(circle at 20% 82%, rgba(69,123,157,.15), transparent 40%);
}

/* ---------- buttons ---------- */
.btn{
    border:none; border-radius:999px; padding:.8rem 1.5rem; font-weight:700;
    font-size:1rem; transition:transform .12s ease, box-shadow .12s ease, background-color .15s;
    display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
    min-height:48px; color:#fff; background:var(--navy); box-shadow:var(--shadow-sm);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none}
.btn-primary{background:linear-gradient(135deg,var(--merah),var(--merah-d))}
.btn-secondary{background:linear-gradient(135deg,var(--tosca),var(--tosca-d))}
.btn-ghost{background:#fff; color:var(--navy); border:2px solid rgba(29,53,87,.14)}
.btn-danger{background:linear-gradient(135deg,#ef4444,#b91c1c)}
.btn-xl{padding:1rem 2rem; font-size:1.15rem; min-height:56px}
.btn.sm{padding:.4rem .8rem; min-height:34px; font-size:.85rem}
.btn.full{width:100%}
.btn-emoji{font-size:1.3em}
.icon-btn{background:rgba(255,255,255,.16); border:none; color:#fff; width:42px;height:42px;
    border-radius:12px; font-size:1.2rem; display:grid;place-items:center; transition:background .15s}
.icon-btn:hover{background:rgba(255,255,255,.3)}
.icon-btn.danger:hover{background:#ef4444}

/* ---------- HOME ---------- */
.home-body,.setup-body,.lobby-body{position:relative}
.home-wrap{position:relative; z-index:1; max-width:1000px; margin:0 auto; padding:3rem 1.25rem 4rem; text-align:center}
.logo-badge{display:inline-flex; align-items:center; gap:.6rem; background:#fff;
    padding:1rem 1.6rem; border-radius:28px; box-shadow:var(--shadow); transform:rotate(-1.5deg)}
.logo-dice,.logo-map{font-size:2.6rem}
.logo-text{display:flex; flex-direction:column; line-height:.9}
.logo-top{font-size:2rem; font-weight:800; letter-spacing:2px; color:var(--navy)}
.logo-bottom{font-size:2.7rem; font-weight:800; letter-spacing:1px;
    background:linear-gradient(120deg,var(--merah),var(--gold),var(--tosca));
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.logo-by{font-size:.85rem; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--muted); margin-top:.45rem; align-self:flex-end}
.gt-by{font-size:.62rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; opacity:.75; margin-left:.25rem}
.home-tagline{max-width:640px; margin:1.6rem auto 2rem; font-size:1.15rem; color:var(--muted); line-height:1.6}
.home-actions{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap}
.home-features{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; margin:3.5rem 0}
.feature-card{background:#fff; border-radius:var(--radius); padding:1.5rem 1.25rem; box-shadow:var(--shadow-sm); text-align:left}
.feature-card span{font-size:2rem}
.feature-card h3{margin:.6rem 0 .3rem; font-size:1.15rem}
.feature-card p{color:var(--muted); font-size:.95rem; line-height:1.5}
.home-how{background:#fff; border-radius:var(--radius); padding:2rem; box-shadow:var(--shadow-sm); text-align:left; max-width:720px; margin:0 auto}
.home-how h2{color:var(--navy); margin-bottom:1rem}
.home-how ol{padding-left:1.3rem; line-height:2; color:var(--ink)}
.home-foot{margin-top:2.5rem; color:var(--muted); font-size:.9rem}

/* ---------- SETUP (create/join) ---------- */
.setup-wrap{position:relative; z-index:1; max-width:860px; margin:0 auto; padding:2rem 1.25rem 4rem}
.back-link{display:inline-block; margin-bottom:1rem; color:var(--navy); font-weight:700; background:#fff; padding:.5rem 1rem; border-radius:999px; box-shadow:var(--shadow-sm)}
.setup-title{font-size:2rem; color:var(--navy)}
.setup-sub{color:var(--muted); margin:.3rem 0 1.5rem}
.setup-form{background:#fff; border-radius:var(--radius); padding:1.8rem; box-shadow:var(--shadow)}
.field-label{display:block; font-weight:700; margin:1rem 0 .5rem; color:var(--navy)}
.text-input{width:100%; padding:.9rem 1.1rem; border:2px solid rgba(29,53,87,.14); border-radius:var(--radius-sm);
    font-size:1.05rem; font-family:inherit; transition:border-color .15s}
.text-input:focus{outline:none; border-color:var(--tosca)}
.code-input{letter-spacing:5px; font-weight:800; text-align:center; font-size:1.5rem}
.char-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.8rem; margin-top:.5rem}
.char-grid.compact{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.char-card{background:var(--cream); border:3px solid transparent; border-radius:var(--radius-sm);
    padding:1rem .6rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:.25rem;
    transition:transform .12s, border-color .15s, box-shadow .15s; position:relative}
.char-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-sm)}
.char-card.selected{border-color:var(--pion,var(--merah)); box-shadow:0 0 0 4px color-mix(in srgb, var(--pion,#e63946) 22%, transparent)}
.char-card.taken{opacity:.4; pointer-events:none; filter:grayscale(.7)}
.char-avatar{font-size:2.2rem; width:56px;height:56px; display:grid;place-items:center; border-radius:50%;
    background:color-mix(in srgb, var(--pion,#e63946) 18%, #fff)}
.char-grid.compact .char-avatar{width:44px;height:44px;font-size:1.6rem}
.char-name{font-weight:800; font-size:.95rem}
.char-desc{font-size:.72rem; color:var(--muted); line-height:1.3}
.form-error{color:var(--merah-d); font-weight:700; margin-top:1rem; min-height:1.2em}

/* ---------- LOBBY ---------- */
.lobby-wrap{position:relative; z-index:1; max-width:900px; margin:0 auto; padding:2rem 1.25rem 4rem}
.room-code-box{background:linear-gradient(135deg,var(--navy),var(--biru)); color:#fff; border-radius:var(--radius);
    padding:1.4rem 1.8rem; display:flex; align-items:center; justify-content:space-between; box-shadow:var(--shadow); margin:1rem 0}
.rc-label{display:block; font-size:.85rem; opacity:.8}
.rc-code{font-family:var(--font-head); font-size:2.4rem; font-weight:800; letter-spacing:4px}
.lobby-cols{display:grid; grid-template-columns:1.4fr 1fr; gap:1.2rem}
.lobby-players,.lobby-qr,.lobby-chars{background:#fff; border-radius:var(--radius); padding:1.4rem; box-shadow:var(--shadow-sm)}
.lobby-players h2,.lobby-qr h2,.lobby-chars h2{color:var(--navy); margin-bottom:1rem; font-size:1.2rem}
.lobby-qr{text-align:center}
.qr-img{width:180px;height:180px; border-radius:var(--radius-sm); background:#eee}
.qr-hint{color:var(--muted); font-size:.85rem; margin-top:.8rem; line-height:1.5}
.player-list{list-style:none; display:flex; flex-direction:column; gap:.6rem}
.player-item{display:flex; align-items:center; gap:.75rem; background:var(--cream); border-radius:var(--radius-sm); padding:.7rem 1rem}
.pi-avatar{width:42px;height:42px; border-radius:50%; display:grid;place-items:center; font-size:1.4rem; color:#fff}
.pi-name{flex:1; font-weight:700}
.pi-badge{font-size:.7rem; font-weight:800; padding:.25rem .6rem; border-radius:999px; color:#fff}
.pi-badge.host{background:var(--merah)} .pi-badge.ready{background:var(--tosca)}
.lobby-chars{margin-top:1.2rem}
.lobby-rules{margin-top:1.2rem; background:#fff; border-radius:var(--radius); padding:1.4rem; box-shadow:var(--shadow-sm)}
.lobby-rules h2{color:var(--navy); margin-bottom:1rem; font-size:1.2rem}
.rules-sub{font-size:.8rem; color:var(--muted); font-weight:600}
.rules-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.7rem}
.rule-field{display:flex; flex-direction:column; gap:.3rem; background:var(--cream); border-radius:12px; padding:.6rem .8rem}
.rule-field > span{font-size:.8rem; font-weight:700; color:var(--navy)}
.rule-input{display:flex; align-items:center; gap:.4rem}
.rule-input b{font-size:.78rem; color:var(--muted)}
.rule-input input{flex:1; min-width:0; padding:.45rem .6rem; border:2px solid rgba(29,53,87,.14); border-radius:10px; font-family:inherit; font-weight:700; font-size:.95rem}
.rule-input input:focus{outline:none; border-color:var(--tosca)}
.rule-input input:disabled{background:#f3efe6; color:var(--ink); border-color:transparent}
.rules-actions{display:flex; gap:.6rem; align-items:center; margin-top:.9rem; flex-wrap:wrap}
.rules-msg{font-size:.85rem; font-weight:700} .rules-msg.ok{color:var(--tosca-d)} .rules-msg.err{color:var(--merah-d)}
.lobby-start{margin-top:1.4rem; text-align:center}
.start-hint{color:var(--muted); margin-top:.7rem}

/* ---------- GAME layout ---------- */
.game-body{background:linear-gradient(160deg,#fdf6ec,#f3e9d8); height:100vh; overflow:hidden; display:flex; flex-direction:column}
.game-top{background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:space-between;
    padding:.6rem 1rem; gap:1rem; flex-shrink:0}
.gt-logo{font-family:var(--font-head); font-weight:700; font-size:1.1rem; white-space:nowrap}
.gt-logo b{color:var(--gold)}
.gt-room{font-size:.95rem} .gt-room b{color:var(--kuning); letter-spacing:2px}
.gt-online{color:#4ade80; margin-left:.4rem; animation:pulse 2s infinite}
.gt-online.offline{color:#f87171}
.spectator-badge{margin-left:.6rem; background:var(--kuning); color:#3b2f00; font-size:.7rem; font-weight:800; padding:.15rem .55rem; border-radius:999px; letter-spacing:.3px; animation:pulse 2.4s infinite}
.spectator-wait b{color:var(--navy)}
.cm-spec{font-size:.72rem; opacity:.8}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.gt-actions{display:flex; gap:.5rem}

.game-main{flex:1; display:grid; grid-template-columns:300px 1fr 320px; gap:1rem; padding:1rem; overflow:hidden; min-height:0}
.panel{background:#fff; border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow-sm); overflow-y:auto; display:flex; flex-direction:column; min-height:0}
.panel-title{color:var(--navy); font-size:1rem; margin:.4rem 0 .7rem; position:sticky; top:0; background:#fff}
.players-list{display:flex; flex-direction:column; gap:.55rem; margin-bottom:1rem}
.pl-card{display:flex; gap:.6rem; align-items:center; background:var(--cream); border-radius:var(--radius-sm);
    padding:.55rem .7rem; border-left:5px solid var(--pc,#ccc); transition:box-shadow .15s}
.pl-card.turn{box-shadow:0 0 0 3px color-mix(in srgb,var(--pc,#e63946) 40%, transparent); background:#fff}
.pl-card.bankrupt{opacity:.55; filter:grayscale(.5)}
.pl-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:1.3rem;color:#fff;flex-shrink:0}
.pl-info{min-width:0;flex:1}
.pl-name{font-weight:800; font-size:.9rem; display:flex; gap:.3rem; align-items:center; flex-wrap:wrap}
.pl-money{font-weight:800; color:var(--tosca-d); font-size:1rem}
.pl-sub{font-size:.75rem; color:var(--muted)}
.pl-hist-btn{flex-shrink:0; align-self:flex-start; margin-left:auto; background:#fff; border:1.5px solid #e5e0d5;
    border-radius:10px; width:32px; height:32px; font-size:1rem; cursor:pointer; line-height:1; transition:transform .12s, background .12s, border-color .12s}
.pl-hist-btn:hover{transform:translateY(-1px); background:var(--cream); border-color:var(--tosca-d)}
.tx-summary{display:flex; gap:.5rem; margin:.2rem 0 .8rem; text-align:center}
.tx-sum-item{flex:1; background:var(--cream); border-radius:12px; padding:.5rem .3rem}
.tx-sum-item span{display:block; font-size:.65rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.03em}
.tx-sum-item b{display:block; font-size:.85rem; margin-top:.15rem}
.tx-list{max-height:46vh; overflow-y:auto; text-align:left; display:flex; flex-direction:column; gap:.25rem}
.tx-row{display:flex; align-items:center; gap:.5rem; padding:.4rem .5rem; background:#faf8f3; border-radius:10px; font-size:.8rem}
.tx-dir{font-size:.7rem; flex-shrink:0}
.tx-dir.in{color:#0f9d58}
.tx-dir.out{color:#e11d48}
.tx-desc{flex:1; min-width:0; color:var(--ink,#333); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tx-desc em{color:var(--muted); font-style:normal; font-size:.7rem; margin-left:.25rem}
.tx-amt{font-weight:800; flex-shrink:0; white-space:nowrap}
.tx-amt.pos,.tx-sum-item b.pos{color:#0f9d58}
.tx-amt.neg,.tx-sum-item b.neg{color:#e11d48}
.tx-empty{padding:1.2rem .5rem; text-align:center; color:var(--muted); font-size:.85rem}
.inflation-banner{margin:.1rem 0 .5rem; padding:.4rem .6rem; border-radius:10px; font-size:.72rem; font-weight:700;
    background:linear-gradient(90deg,#fff4e5,#ffe9d6); color:#b45309; border:1.5px solid #f6c88a; text-align:center}
.inflation-banner b{color:#c2410c}
.mr-up{font-size:.62rem; font-weight:800; color:#7c3aed; margin-left:.25rem}


.pl-tag{font-size:.6rem; font-weight:800; padding:.12rem .4rem; border-radius:999px; color:#fff}
.pl-tag.you{background:var(--biru)} .pl-tag.host{background:var(--merah)}
.pl-tag.jail{background:#6366f1} .pl-tag.bk{background:#111}
.pl-tag.afk{background:#f59e0b; color:#1f1300; animation:pulse 1.2s infinite}
.event-log{display:flex; flex-direction:column; gap:.35rem; font-size:.82rem; overflow-y:auto; flex:1; min-height:80px}
.log-row{display:flex; gap:.4rem; align-items:flex-start; padding:.3rem .4rem; border-radius:8px; background:var(--cream)}
.log-icon{flex-shrink:0}

/* board area */
.board-area{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; min-height:0; overflow:hidden}
.controls{display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; min-height:56px; align-items:center}
.ctrl-wait{background:#fff; border-radius:999px; padding:.7rem 1.4rem; box-shadow:var(--shadow-sm); font-weight:600; color:var(--muted)}

/* chat */
.panel-chat{min-height:0}
.chat-messages{flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:.6rem; margin-bottom:.6rem; min-height:100px}
.chat-msg{display:flex; gap:.5rem; align-items:flex-start}
.cm-avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:1rem;color:#fff;flex-shrink:0}
.cm-body{background:var(--cream); border-radius:12px; padding:.4rem .7rem; max-width:100%}
.cm-head{font-size:.75rem; display:flex; gap:.4rem; align-items:baseline}
.cm-time{color:var(--muted); font-size:.68rem}
.cm-text{font-size:.9rem; word-break:break-word}
.chat-form{display:flex; gap:.5rem}
.chat-input{flex:1; padding:.7rem 1rem; border:2px solid rgba(29,53,87,.14); border-radius:999px; font-family:inherit}
.chat-input:focus{outline:none;border-color:var(--tosca)}
.chat-send{min-height:44px; padding:.6rem 1rem; border-radius:50%; width:44px}

/* info list in popups */
.info-list,.manage-list{display:flex; flex-direction:column; gap:.5rem; margin:.5rem 0 1rem; text-align:left}
.info-row{display:flex; justify-content:space-between; background:var(--cream); padding:.5rem .8rem; border-radius:10px}
.manage-head{font-size:.9rem; margin-bottom:.6rem; text-align:left; color:var(--navy)}
.manage-head .mh-debt{color:var(--merah-d); font-weight:700}
.manage-row{display:flex; align-items:center; gap:.5rem; background:var(--cream); padding:.5rem .6rem; border-radius:10px; flex-wrap:wrap}
.mr-band{width:8px; align-self:stretch; min-height:26px; border-radius:4px}
.mr-name{flex:1 1 40%; font-weight:700; font-size:.85rem; display:flex; flex-direction:column}
.mr-lvl{font-size:.75rem; color:var(--muted); font-weight:600}
.mr-acts{display:flex; gap:.35rem; flex-wrap:wrap; justify-content:flex-end}
.mr-acts .btn.sm{font-size:.72rem; padding:.35rem .6rem; min-height:32px}
.debt-bar{background:#fee2e2; color:var(--merah-d); font-weight:700; padding:.55rem 1.1rem; border-radius:999px; box-shadow:var(--shadow-sm)}
.mn-note{font-size:.78rem; color:var(--muted)}
.help-body{text-align:left; display:flex; flex-direction:column; gap:.6rem; margin:.5rem 0 1rem}
.help-body p{line-height:1.5}
.help-body[hidden]{display:none}
.help-tabs{display:flex; flex-wrap:wrap; gap:.35rem; justify-content:center; margin:.4rem 0 .2rem}
.help-tab{border:1.5px solid rgba(29,53,87,.15); background:#fff; color:var(--navy); border-radius:999px; padding:.3rem .7rem;
    font-size:.72rem; font-weight:700; cursor:pointer; font-family:inherit; transition:background-color .15s, color .15s, transform .15s}
.help-tab:hover{transform:translateY(-1px)}
.help-tab.active{background:var(--navy); color:#fff; border-color:var(--navy)}
.help-pane{min-height:150px}
.help-tip{background:#fff7ed; border-left:3px solid #fb923c; padding:.4rem .6rem; border-radius:8px; font-size:.82rem}
.help-badge{display:inline-block; background:linear-gradient(135deg,#f97316,#ea580c); color:#fff; font-size:.65rem; font-weight:800; padding:2px 6px; border-radius:6px}

/* confetti */
#confetti-root{position:fixed; inset:0; pointer-events:none; z-index:1000; overflow:hidden}
.confetti{position:absolute; top:-20px; width:11px; height:16px; border-radius:2px; animation:fall 4s linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg); opacity:.2}}
.coin-burst{position:absolute; font-size:1.2rem; transform:translate(-50%,-50%); animation:coinfly 1.1s cubic-bezier(.2,.7,.3,1) forwards; opacity:0}
@keyframes coinfly{0%{opacity:0; transform:translate(-50%,-50%) scale(.4)}15%{opacity:1}100%{opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.2) rotate(360deg)}}
.tile.sparkle{animation:sparkle 1.3s ease-out; z-index:7}
@keyframes sparkle{0%{box-shadow:0 0 0 0 rgba(233,196,106,1), 0 0 0 0 rgba(255,255,255,.9); filter:brightness(1.6)}60%{box-shadow:0 0 0 10px rgba(233,196,106,.5), 0 0 30px 12px rgba(244,162,97,.5)}100%{box-shadow:0 0 0 0 rgba(233,196,106,0), 0 0 0 0 rgba(244,162,97,0); filter:brightness(1)}}
.btn.urgent{animation:urgent .6s ease-in-out infinite; box-shadow:0 0 0 4px rgba(230,57,70,.35), var(--shadow-sm)}
@keyframes urgent{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px) rotate(-1deg)}40%{transform:translateX(4px) rotate(1deg)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}

/* toast */
#toast-root{position:fixed; top:70px; left:50%; transform:translateX(-50%); z-index:900; display:flex; flex-direction:column; gap:.5rem; align-items:center; pointer-events:none}
.toast{background:var(--navy); color:#fff; padding:.7rem 1.2rem; border-radius:999px; box-shadow:var(--shadow);
    display:flex; gap:.5rem; align-items:center; font-weight:600; font-size:.9rem; opacity:0; transform:translateY(-10px);
    transition:opacity .3s, transform .3s; max-width:90vw}
.toast.show{opacity:1; transform:translateY(0)}
.toast-icon{font-size:1.1rem}

/* zoom papan (tampil di HP) */
.zoom-controls{display:none; position:fixed; z-index:66; right:10px; bottom:132px; flex-direction:column; gap:.4rem}
.zoom-btn{width:44px; height:44px; border-radius:12px; border:none; background:var(--navy); color:#fff;
    font-size:1.35rem; font-weight:800; box-shadow:var(--shadow-sm); display:grid; place-items:center; line-height:1}
.zoom-btn:active{transform:scale(.94)}