:root {
    --bg-color: #050a18;
    --card-color: #1a2238;
    --accent-color: #2ecc71;
    --p0: #2ecc71; --p1: #e74c3c; --p2: #3498db; --p3: #f1c40f;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Hind Siliguri', sans-serif; -webkit-tap-highlight-color: transparent; }

body { background: var(--bg-color); height: 100vh; width: 100vw; overflow: hidden; display: flex; justify-content: center; align-items: center; color: white; }

.app-container { position: relative; width: 96vmin; height: 96vmin; display: flex; justify-content: center; align-items: center; }

/* প্লেয়ার প্রোফাইল */
.p-profile {
    position: absolute; width: 60px; height: 60px; background: var(--card-color);
    border: 2px solid #334155; border-radius: 12px; z-index: 100;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 11px; color: white; transition: 0.3s; box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
.p-profile.active { border-color: white; transform: scale(1.1); box-shadow: 0 0 20px rgba(255,255,255,0.3); }
.top-left { top: -10px; left: -10px; border-bottom: 5px solid var(--p0); }
.top-right { top: -10px; right: -10px; border-bottom: 5px solid var(--p1); }
.bottom-left { bottom: -10px; left: -10px; border-bottom: 5px solid var(--p2); }
.bottom-right { bottom: -10px; right: -10px; border-bottom: 5px solid var(--p3); }

/* ব্যাংক বাটন */
.fixed-bank-btn {
    position: absolute; right: -50px; top: 50%; transform: translateY(-50%);
    background: #1e293b; color: white; border: 1px solid #475569;
    padding: 10px 6px; border-radius: 10px; font-size: 12px; font-weight: bold; cursor: pointer; z-index: 101;
}

/* গেম গ্রিড */
.board-frame { width: 100%; height: 100%; background: #000; padding: 2px; border-radius: 5px; }
.game-grid {
    display: grid; width: 100%; height: 100%; gap: 1px;
    grid-template-columns: 1.5fr repeat(9, 1fr) 1.5fr;
    grid-template-rows: 1.5fr repeat(9, 1fr) 1.5fr;
}

.center-zone { grid-column: 2/11; grid-row: 2/11; background: #cbd5e1; position: relative; display: flex; justify-content: center; align-items: center; }
.main-logo { font-size: 8vmin; font-weight: 900; color: #1e293b; transform: rotate(-45deg); opacity: 0.2; position: absolute; z-index: 1; }
.main-logo span { color: #e11d48; }

/* ঘরসমূহ */
.space { background: #fff; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 1px; overflow: hidden; }
.space-header { position: absolute; top: 0; width: 100%; height: 22%; }
.space-name { font-size: 1.5vmin; font-weight: bold; margin-top: 25%; text-align: center; color: #000; line-height: 1; }
.space-icon { font-size: 3.5vmin; }
.space-price { font-size: 1.4vmin; font-weight: bold; color: #b91c1c; }

/* ৩ডি ছক্কা - সাইজ বড় করা হয়েছে */
.dice-3d-wrapper { z-index: 200; cursor: pointer; display: flex; flex-direction: column; align-items: center; }
.dice-set { display: flex; gap: 15px; perspective: 600px; }
.cube-3d { width: 45px; height: 45px; position: relative; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.face {
    position: absolute; width: 45px; height: 45px; background: white; border: 1px solid #bbb;
    display: flex; align-items: center; justify-content: center; font-size: 32px; color: #000;
    border-radius: 8px; box-shadow: inset 0 0 8px rgba(0,0,0,0.2), 0 0 5px rgba(0,0,0,0.1);
}
.front  { transform: rotateY(0deg) translateZ(22.5px); }
.back   { transform: rotateY(180deg) translateZ(22.5px); }
.right  { transform: rotateY(90deg) translateZ(22.5px); }
.left   { transform: rotateY(-90deg) translateZ(22.5px); }
.top    { transform: rotateX(90deg) translateZ(22.5px); }
.bottom { transform: rotateX(-90deg) translateZ(22.5px); }
.roll-hint { font-size: 11px; color: #1e293b; font-weight: bold; margin-top: 10px; background: rgba(255,255,255,0.5); padding: 2px 10px; border-radius: 10px; }

/* টোকেন ও ঘর */
.token { width: 2vmin; height: 2vmin; border-radius: 50%; border: 1px solid #fff; box-shadow: 0 1px 3px #000; margin: 1px; }
.house-container { position: absolute; top: 1px; right: 1px; font-size: 9px; }

/* মোডাল ইউআই */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.9); display: flex; align-items: center; justify-content: center; z-index: 500; }
.modal-content { background: var(--card-color); padding: 25px; border-radius: 20px; width: 90%; max-width: 350px; color: white; text-align: center; border: 1px solid #334155; }
.bank-logic-box { text-align: left; margin-top: 15px; }
.field { margin-bottom: 12px; }
.field label { font-size: 12px; color: #94a3b8; display: block; margin-bottom: 4px; }
.bank-select, .bank-input { width: 100%; padding: 12px; border-radius: 10px; border: none; background: #0f172a; color: white; font-size: 14px; }
.modal-btns { display: flex; gap: 10px; margin-top: 20px; }
.btn { flex: 1; padding: 12px; border-radius: 10px; border: none; cursor: pointer; font-weight: bold; }
.confirm { background: var(--accent-color); color: white; }
.cancel { background: #ef4444; color: white; }
.log-display { font-size: 11px; margin-top: 15px; color: #2ecc71; background: #000; padding: 10px; border-radius: 8px; max-height: 80px; overflow-y: auto; }
.notification-bar { position: fixed; bottom: 8px; background: rgba(0,0,0,0.9); color: var(--accent-color); padding: 4px 20px; border-radius: 20px; font-size: 12px; z-index: 400; }
.btn-group { display: flex; gap: 10px; margin-top: 15px; }