/* ============ 3d.css — tampilan 3D (aktif saat body.mode-3d) ============ */

/* ---------- tombol "bisa ditekan" ---------- */
.mode-3d .btn{box-shadow:0 5px 0 rgba(0,0,0,.28), 0 8px 16px rgba(29,53,87,.18); transform:translateY(-2px)}
.mode-3d .btn:hover{transform:translateY(-4px); box-shadow:0 7px 0 rgba(0,0,0,.28), 0 12px 20px rgba(29,53,87,.2)}
.mode-3d .btn:active{transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.28), 0 2px 6px rgba(29,53,87,.15)}
.mode-3d .btn:disabled{transform:none; box-shadow:none}
.mode-3d .btn-ghost{box-shadow:0 5px 0 rgba(29,53,87,.16), 0 8px 16px rgba(29,53,87,.1)}
.mode-3d .zoom-btn,.mode-3d .icon-btn{box-shadow:0 3px 0 rgba(0,0,0,.35)}
.mode-3d .zoom-btn:active,.mode-3d .icon-btn:active{transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.35)}

/* ---------- papan meja miring ---------- */
.mode-3d .board-area{perspective:1700px; perspective-origin:50% 30%}
.mode-3d .board{
    transform:rotateX(22deg) translateY(-12px); transform-origin:50% 60%; transform-style:preserve-3d;
    box-shadow:0 30px 0 -6px #14274a, 0 40px 0 -8px #0d1b33, 0 60px 60px rgba(13,27,51,.45);
    transition:transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s;
    background:linear-gradient(180deg,#22406a,#1d3557 60%,#15294a);
}
.mode-3d .board:hover{transform:rotateX(16deg) translateY(-12px)}
@media (min-width:901px){.mode-3d .controls{margin-top:1.2rem} .mode-3d .board{width:min(72vh, 100%)}}
.mode-3d .board-center{
    box-shadow:inset 0 10px 24px rgba(29,53,87,.22), inset 0 -4px 10px rgba(255,255,255,.7);
    transform:translateZ(1px);
}
.mode-3d .bc-turn,.mode-3d .bc-inflation,.mode-3d .bc-event{box-shadow:0 4px 0 rgba(29,53,87,.14), 0 8px 18px rgba(29,53,87,.14); transform:translateZ(8px)}

/* ---------- petak tebal ---------- */
.mode-3d .tile{
    box-shadow:0 3px 0 #d6cfc2, 0 5px 6px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.7);
    transform:translateZ(2px); transition:transform .18s, box-shadow .18s; border-radius:6px;
}
.mode-3d .tile.owned{box-shadow:0 3px 0 var(--owner,#999), 0 6px 8px rgba(0,0,0,.22), inset 0 0 0 2px var(--owner,#999); transform:translateZ(8px)}
.mode-3d .tile:hover{transform:translateZ(22px) scale(1.06); box-shadow:0 10px 0 #cfc7b8, 0 18px 22px rgba(0,0,0,.3)}
.mode-3d .tile.focus{transform:translateZ(18px) scale(1.1)}
.mode-3d .tile-band{box-shadow:inset 0 -2px 0 rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.35)}
.mode-3d .tile-owner{box-shadow:0 2px 0 rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.45)}
.mode-3d .tile-level{box-shadow:0 2px 0 #9a3412, 0 3px 4px rgba(0,0,0,.3)}

/* ---------- rumah & hotel balok 3D ---------- */
.tile-houses{display:flex; justify-content:center; align-items:flex-end; gap:2px; height:12px; letter-spacing:0}
.h3d,.ht3d{position:relative; display:inline-block; width:8px; height:7px; background:#22c55e; border-radius:1px;
    box-shadow:inset -2px -2px 0 rgba(0,0,0,.25), inset 1px 1px 0 rgba(255,255,255,.35); transform-style:preserve-3d}
.h3d::before{content:''; position:absolute; left:-1px; right:-1px; top:-4px; height:4px; background:#15803d;
    clip-path:polygon(50% 0, 100% 100%, 0 100%)}
.h3d::after{content:''; position:absolute; left:-1px; right:-1px; bottom:-2px; height:2px; background:rgba(0,0,0,.28); border-radius:50%; filter:blur(.5px)}
.ht3d{width:11px; height:10px; background:#ef4444; box-shadow:inset -3px -3px 0 rgba(0,0,0,.28), inset 1px 1px 0 rgba(255,255,255,.35)}
.ht3d::before{content:''; position:absolute; left:1px; right:1px; top:-3px; height:3px; background:#b91c1c; border-radius:1px 1px 0 0}
.ht3d::after{content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:rgba(0,0,0,.3); border-radius:50%; filter:blur(.5px)}
.mode-3d .h3d{animation:h3dpop .35s ease-out}
@keyframes h3dpop{0%{transform:translateY(-6px) scale(.6); opacity:0}100%{transform:none; opacity:1}}
.tile-houses .bank3d{font-size:.55rem; line-height:1}

/* ---------- pion token 3D ---------- */
.mode-3d .pion{
    border:none;
    background-image:radial-gradient(circle at 32% 28%, rgba(255,255,255,.75), rgba(255,255,255,.12) 35%, transparent 60%);
    box-shadow:0 3px 0 rgba(0,0,0,.42), 0 3px 0 1px rgba(255,255,255,.35), 0 7px 8px rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.75);
    text-shadow:0 1px 1px rgba(0,0,0,.35);
}
.mode-3d .pion::after{content:''; position:absolute; left:18%; top:10%; width:32%; height:22%; border-radius:50%;
    background:rgba(255,255,255,.7); filter:blur(.6px); transform:rotate(-25deg)}
.mode-3d .pion.active{animation:pion3dpop 1.1s infinite}
@keyframes pion3dpop{0%,100%{transform:translateY(0) scale(1); box-shadow:0 3px 0 rgba(0,0,0,.42), 0 3px 0 1px rgba(255,255,255,.35), 0 7px 8px rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.75)}
    50%{transform:translateY(-6px) scale(1.14); box-shadow:0 3px 0 rgba(0,0,0,.42), 0 3px 0 1px rgba(255,255,255,.35), 0 16px 14px rgba(0,0,0,.32), inset 0 0 0 2px rgba(255,255,255,.75)}}
.mode-3d .pion.hop{animation:pion3dhop .17s ease-out}
@keyframes pion3dhop{0%{transform:translateY(-22px) scale(1.35); box-shadow:0 3px 0 rgba(0,0,0,.42), 0 26px 16px rgba(0,0,0,.25), inset 0 0 0 2px rgba(255,255,255,.75)}
    70%{transform:translateY(2px) scale(.95)}100%{transform:none}}

/* ---------- dadu kubus 3D ---------- */
.die{perspective:420px; background:transparent; box-shadow:none; --half:calc(clamp(38px,6vh,56px) / 2)}
.die .die-2d{display:grid; place-items:center; width:100%; height:100%; background:#fff; border-radius:14px; box-shadow:var(--shadow-sm)}
.die .cube{display:none}
.mode-3d .die .die-2d{display:none}
.mode-3d .die .cube{display:block; position:relative; width:100%; height:100%; transform-style:preserve-3d;
    transition:transform .55s cubic-bezier(.2,.9,.3,1.1); transform:var(--rot, rotateX(-18deg) rotateY(24deg))}
.mode-3d .die.rolling{animation:none}
.mode-3d .die.rolling .cube{animation:tumble .5s linear infinite}
@keyframes tumble{to{transform:rotateX(360deg) rotateY(720deg) rotateZ(180deg)}}
.face{position:absolute; inset:0; background:linear-gradient(145deg,#fffdf7,#ece6da); border-radius:18%;
    display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); padding:14%;
    box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.08), inset 0 -3px 6px rgba(0,0,0,.08); backface-visibility:hidden}
.face i{display:block; width:70%; height:70%; border-radius:50%; background:radial-gradient(circle at 35% 35%,#3b4a6b,var(--navy)); place-self:center; visibility:hidden;
    box-shadow:inset 0 -1px 2px rgba(0,0,0,.4)}
/* posisi 6 sisi (half = 50% ukuran dadu) */
.face-1{transform:translateZ(var(--half))}
.face-6{transform:rotateY(180deg) translateZ(var(--half))}
.face-3{transform:rotateY(90deg) translateZ(var(--half))}
.face-4{transform:rotateY(-90deg) translateZ(var(--half))}
.face-2{transform:rotateX(90deg) translateZ(var(--half))}
.face-5{transform:rotateX(-90deg) translateZ(var(--half))}
/* pola titik: sel 1..9 (baris-major) */
.face-1 i:nth-child(5),
.face-2 i:nth-child(1),.face-2 i:nth-child(9),
.face-3 i:nth-child(1),.face-3 i:nth-child(5),.face-3 i:nth-child(9),
.face-4 i:nth-child(1),.face-4 i:nth-child(3),.face-4 i:nth-child(7),.face-4 i:nth-child(9),
.face-5 i:nth-child(1),.face-5 i:nth-child(3),.face-5 i:nth-child(5),.face-5 i:nth-child(7),.face-5 i:nth-child(9),
.face-6 i:nth-child(1),.face-6 i:nth-child(3),.face-6 i:nth-child(4),.face-6 i:nth-child(6),.face-6 i:nth-child(7),.face-6 i:nth-child(9){visibility:visible}
.face-1 i:nth-child(5){background:radial-gradient(circle at 35% 35%,#f87171,var(--merah-d))}

/* ---------- avatar karakter: koin 3D ---------- */
.mode-3d .pl-avatar,.mode-3d .pi-avatar,.mode-3d .cm-avatar,.mode-3d .rank-avatar,.mode-3d .char-avatar{
    background-image:radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), rgba(255,255,255,.08) 40%, rgba(0,0,0,.12) 100%);
    box-shadow:0 3px 0 rgba(0,0,0,.35), 0 5px 8px rgba(0,0,0,.25), inset 0 0 0 2px rgba(255,255,255,.55), inset 0 0 0 4px rgba(0,0,0,.08);
    text-shadow:0 1px 1px rgba(0,0,0,.3);
}
.mode-3d .char-card{perspective:500px; background:linear-gradient(180deg,#fffaf0,#f6ecd9); box-shadow:0 4px 0 #e2d8c6, 0 8px 14px rgba(29,53,87,.1)}
.mode-3d .char-card .char-avatar{animation:coinspin 4s ease-in-out infinite; transform-style:preserve-3d}
.mode-3d .char-card:hover .char-avatar,.mode-3d .char-card.selected .char-avatar{animation-duration:1.4s}
@keyframes coinspin{0%,100%{transform:rotateY(-32deg)}50%{transform:rotateY(32deg)}}
.mode-3d .char-card.selected{transform:translateY(-4px) rotateX(6deg); box-shadow:0 8px 0 var(--pion,#e63946), 0 14px 22px rgba(29,53,87,.18)}
.mode-3d .pl-card{transition:transform .25s, box-shadow .25s}
.mode-3d .pl-card.turn{transform:perspective(700px) rotateY(-5deg) translateZ(10px) translateX(4px);
    box-shadow:0 6px 0 color-mix(in srgb,var(--pc,#e63946) 55%, #000), 0 14px 22px rgba(29,53,87,.2)}
.mode-3d .pl-card.turn .pl-avatar{animation:coinspin 2s ease-in-out infinite}

/* ---------- popup masuk dengan kemiringan ---------- */
.mode-3d .popup-overlay{perspective:1200px}
.mode-3d .popup-card{transform:translateY(40px) rotateX(-14deg) scale(.92); animation:pop3d .42s cubic-bezier(.18,1.2,.4,1) forwards;
    box-shadow:0 12px 0 -4px rgba(255,255,255,.35), 0 34px 70px rgba(0,0,0,.45)}
@keyframes pop3d{to{transform:translateY(0) rotateX(0) scale(1)}}
.mode-3d .popup-icon{animation:iconfloat 2.6s ease-in-out infinite; filter:drop-shadow(0 10px 10px rgba(0,0,0,.25))}
@keyframes iconfloat{0%,100%{transform:translateY(0) rotateY(0)}50%{transform:translateY(-6px) rotateY(20deg)}}

/* ---------- panel & header ---------- */
.mode-3d .panel{box-shadow:0 6px 0 #e6dccb, 0 14px 26px rgba(29,53,87,.12)}
.mode-3d .game-top{box-shadow:0 4px 0 #0d1b33, 0 8px 16px rgba(0,0,0,.25); position:relative; z-index:80}
.mode-3d .logo-badge{box-shadow:0 8px 0 #e6dccb, 0 18px 30px rgba(29,53,87,.16); transform:rotate(-1.5deg) perspective(600px) rotateX(6deg)}
.mode-3d .feature-card,.mode-3d .home-how,.mode-3d .setup-form,.mode-3d .lobby-players,.mode-3d .lobby-qr,.mode-3d .lobby-chars,.mode-3d .room-code-box{
    box-shadow:0 6px 0 #e6dccb, 0 14px 26px rgba(29,53,87,.12)}
.mode-3d .room-code-box{box-shadow:0 6px 0 #0d1b33, 0 14px 26px rgba(29,53,87,.25)}

/* ---------- pengaturan suara ---------- */
.settings-body{display:flex; flex-direction:column; gap:.9rem; margin:.4rem 0 1rem; text-align:left}
.set-row{display:flex; align-items:center; gap:.7rem; background:var(--cream); border-radius:12px; padding:.6rem .8rem}
.set-row label{flex:1; font-weight:700; font-size:.9rem; display:flex; gap:.4rem; align-items:center}
.set-row input[type=range]{flex:1.4; accent-color:var(--tosca)}
.set-val{font-size:.75rem; font-weight:800; color:var(--muted); width:2.6rem; text-align:right}
.switch{position:relative; width:46px; height:26px; border-radius:999px; background:#cbd5e1; border:none; transition:background .2s; flex-shrink:0}
.switch::after{content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.25); transition:transform .2s}
.switch.on{background:var(--tosca)} .switch.on::after{transform:translateX(20px)}
.mood-tag{font-size:.72rem; color:var(--muted); text-align:center}

/* ---------- mobile: kemiringan lebih ringan ---------- */
@media (max-width:900px){
    .mode-3d .board{transform:rotateX(8deg) scale(1); transform-origin:50% 50%; box-shadow:0 14px 0 -4px #14274a, 0 26px 30px rgba(13,27,51,.4)}
    .mode-3d .board:hover{transform:rotateX(8deg)}
    .mode-3d .board-area{perspective:1200px}
}
@media (prefers-reduced-motion:reduce){
    .mode-3d .char-card .char-avatar,.mode-3d .pl-card.turn .pl-avatar,.mode-3d .popup-icon{animation:none}
}