:root{
    --left-bg: #e6f3ff; 
    --left-border: #2b6fb3; 
    --right-bg: #ffe6f0; 
    --right-border: #d13a6b; 
}

*{box-sizing:border-box;font-family:Arial, Helvetica, sans-serif}
body{margin:0;background:#fafafa}
.logo{display:block;margin:12px auto;height:auto;max-height:none}

.jamb-page{display:flex;align-items:flex-start;gap:2vw;padding:8px 16px;height:calc(100vh - 84px)}
.side{width:32%;display:flex;flex-direction:column;align-items:stretch}
.center-spacer{flex:1}

.side h2{margin:6px 0 8px 0;font-size:1.05rem;text-align:center}
.table-wrap{flex:1;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between}

.jamb-table{width:100%;border-collapse:collapse;table-layout:fixed}
.jamb-table th,.jamb-table td{
    border:2px solid transparent;
    padding:1.5px;
    text-align:center;
    vertical-align:middle
}

.left-side .jamb-table th,.left-side .jamb-table td{background:var(--left-bg);border-color:var(--left-border);color:#083345}
.right-side .jamb-table th,.right-side .jamb-table td{background:var(--right-bg);border-color:var(--right-border);color:#401427}

.jamb-table thead th{font-weight:700}
.label-cell{font-weight:700}

input.jamb-input{width:100%;height:100%;border:0;background:transparent;text-align:center;font-size:0.95rem}
input.jamb-input:focus{outline:2px solid rgba(0,0,0,0.08)}
input.readonly{background:transparent;font-weight:700}

.total{margin-top:8px;padding:8px 10px;font-weight:700;text-align:center;border-top:1px solid rgba(0,0,0,0.06)}

/* Ensure table doesn't exceed viewport height */
.table-wrap{max-height:calc(100vh - 170px);overflow:auto;padding:6px}
.jamb-table tr{height:22px}

@media (max-width:900px){
    .jamb-page{flex-direction:column}
    .side{width:100%}
    .center-spacer{display:none}
}

/* Dice area */
.dice-area{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}
.dice-grid{display:grid;grid-template-columns:repeat(3,70px);grid-gap:10px;margin-bottom:12px}
.dice{width:70px;height:70px;border:2px solid #ccc;display:flex;align-items:center;justify-content:center;font-size:1.25rem;background:white;cursor:pointer;user-select:none;border-radius:10px}
.dice.saved{border-color:gold;box-shadow:0 0 0 4px rgba(255,215,0,0.12) inset}

/* die face grid and pips */
.face{width:90%;height:90%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);align-items:center;justify-items:center}
.pip{width:14px;height:14px;background:#111;border-radius:50%;}
.pip.pos1{grid-area:1/1}
.pip.pos2{grid-area:1/2}
.pip.pos3{grid-area:1/3}
.pip.pos4{grid-area:2/1}
.pip.pos5{grid-area:2/2}
.pip.pos6{grid-area:2/3}
.pip.pos7{grid-area:3/1}
.pip.pos8{grid-area:3/2}
.pip.pos9{grid-area:3/3}

@media (max-width:900px){
    .pip{width:10px;height:10px}
}
.face{transition: transform 120ms ease, opacity 120ms ease}
.dice-controls{display:flex;gap:8px;align-items:center}
.dice-controls #rollBtn[disabled]{opacity:0.5;cursor:not-allowed}
.roll-info{font-size:0.95rem;margin-left:6px}

@media (max-width:900px){
    .center-spacer{display:block;margin:12px 0}
    .dice-grid{grid-template-columns:repeat(3,56px);grid-gap:8px}
    .dice{width:56px;height:56px;font-size:1rem}
}