/* Lucky Six Web v1.8 Screenshot Tuned */
* { box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior:smooth; }
:root{
    --score-left:14.0%;
    --score-top:6.8%;
    --score-width:72.0%;
    --score-height:7.5%;

    --round-left:17.0%;
    --round-top:50.8%;
    --round-width:31.5%;
    --round-height:4.1%;

    --roundno-left:64.2%;
    --roundno-top:50.8%;
    --roundno-width:19.8%;
    --roundno-height:4.1%;

    --dice-left:4.2%;
    --dice-top:59.1%;
    --dice-width:91.6%;
    --dice-height:8.3%;

    --roll-left:15.3%;
    --roll-top:81.8%;
    --bank-left:42.0%;
    --bank-top:81.8%;
    --clear-left:68.2%;
    --clear-top:81.8%;
    --btn-width:16.0%;
    --btn-height:5.9%;

    --gold:#f3bd2b;
    --panel:#101827;
    --panel2:#0b1020;
    --text:#f8fafc;
    --muted:#d1d5db;
}
body{
    margin:0;
    min-height:100vh;
    font-family: Arial, Helvetica, sans-serif;
    color:var(--text);
    background:
      radial-gradient(circle at top, rgba(243,189,43,.18), transparent 24%),
      radial-gradient(circle at left, rgba(28,100,242,.12), transparent 24%),
      radial-gradient(circle at right, rgba(239,68,68,.10), transparent 24%),
      linear-gradient(180deg, #050913 0%, #09111f 45%, #111827 100%);
}
button,input{font:inherit;}
button{
    touch-action:manipulation;
    border:0;
    border-radius:14px;
    padding:12px 14px;
    min-height:48px;
    font-size:15px;
    font-weight:900;
    cursor:pointer;
}
button:active{ transform:translateY(1px) scale(.99); }
button:disabled{ opacity:.55; cursor:not-allowed; }
input{
    border:1px solid #4b5563;
    background:#0b1020;
    color:#fff;
    border-radius:14px;
    padding:14px;
    font-size:16px;
}
.app{
    width:min(920px, calc(100% - 10px));
    margin:0 auto;
    padding:8px 0 max(22px, env(safe-area-inset-bottom));
}
.hero{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
}
.eyebrow{
    color:var(--gold);
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:11px;
    font-weight:bold;
}
h1{
    margin:4px 0 2px;
    font-size:clamp(28px, 8vw, 46px);
    line-height:.95;
    letter-spacing:-.03em;
}
h2{ margin:0 0 12px; }
p{ color:var(--muted); line-height:1.45; margin:0; }
.panel{
    background:rgba(15,23,42,.90);
    border:1px solid rgba(243,189,43,.22);
    border-radius:20px;
    padding:14px;
    box-shadow:0 20px 60px rgba(0,0,0,.34);
    backdrop-filter:blur(8px);
}
.ghost{
    background:transparent;
    color:var(--gold);
    border:1px solid rgba(243,189,43,.35);
    box-shadow:none;
}
.hidden{ display:none !important; }
.name-panel{ max-width:720px; margin:0 auto; }
.name-row{ display:flex; gap:10px; margin-top:14px; }
.name-row input{ flex:1; }

#gamePanel{ display:block; }
.cabinet-wrap{
    width:100%;
    display:flex;
    justify-content:center;
}
.cabinet{
    position:relative;
    width:min(100%, 650px);
    aspect-ratio:768 / 1366;
    background:url("assets/cabinet_skin.png") center/contain no-repeat;
}

/* Overlay positions tuned for the exact original skin */
.score-zone{
    position:absolute;
    left:var(--score-left);
    top:var(--score-top);
    width:var(--score-width);
    height:var(--score-height);
    display:flex;
    align-items:center;
    justify-content:center;
}
.score-zone strong{
    color:#ffffff;
    font-family:"Courier New", monospace;
    font-size:clamp(24px, 6.8vw, 42px);
    letter-spacing:.12em;
    text-shadow:0 0 10px rgba(255,255,255,.15);
}

.round-zone{
    position:absolute;
    left:var(--round-left);
    top:var(--round-top);
    width:var(--round-width);
    height:var(--round-height);
    display:flex;
    align-items:center;
    justify-content:center;
}
.roundno-zone{
    position:absolute;
    left:var(--roundno-left);
    top:var(--roundno-top);
    width:var(--roundno-width);
    height:var(--roundno-height);
    display:flex;
    align-items:center;
    justify-content:center;
}
.round-zone strong,
.roundno-zone strong{
    color:#ffffff;
    font-family:"Courier New", monospace;
    font-size:clamp(14px, 3.7vw, 23px);
    letter-spacing:.08em;
    text-shadow:0 0 8px rgba(255,255,255,.12);
}

.dice-zone{
    position:absolute;
    left:var(--dice-left);
    top:var(--dice-top);
    width:var(--dice-width);
    height:var(--dice-height);
    display:flex;
    align-items:center;
    justify-content:center;
}
.dice-row{
    width:100%;
    height:100%;
    display:grid;
    grid-template-columns:repeat(6, minmax(0,1fr));
    gap:1.8%;
}
.die{
    width:100%;
    height:100%;
    border-radius:10px;
    background:linear-gradient(145deg, #181818, #07090f);
    border:2px solid #a01212;
    box-shadow: inset 0 0 10px rgba(255,255,255,.05), 0 4px 10px rgba(0,0,0,.28);
    position:relative;
    cursor:pointer;
    min-height:0;
}
.die.held{
    outline:3px solid var(--gold);
    box-shadow:0 0 16px rgba(243,189,43,.30), inset 0 0 10px rgba(255,255,255,.05);
}
.die.special{
    background:linear-gradient(145deg, #fff0b3, #eea51c);
    border-color:#7a4b00;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:clamp(14px, 4vw, 24px);
    color:#111827;
    font-weight:900;
}

.pip{
    position:absolute;
    width:8px;
    height:7px;
    border-radius:50%;
    background:#f8fafc;
    box-shadow:0 0 4px rgba(255,255,255,.25);
}
.p1 { left:50%; top:50%; transform:translate(-50%,-50%); }
.p2a { left:22%; top:22%; }
.p2b { right:22%; bottom:22%; }
.p3a { left:22%; top:22%; }
.p3b { left:50%; top:50%; transform:translate(-50%,-50%); }
.p3c { right:22%; bottom:22%; }
.p4a { left:22%; top:22%; }
.p4b { right:22%; top:22%; }
.p4c { left:22%; bottom:22%; }
.p4d { right:22%; bottom:22%; }
.p5a { left:22%; top:22%; }
.p5b { right:22%; top:22%; }
.p5c { left:50%; top:50%; transform:translate(-50%,-50%); }
.p5d { left:22%; bottom:22%; }
.p5e { right:22%; bottom:22%; }
.p6a { left:22%; top:20%; }
.p6b { left:22%; top:50%; transform:translateY(-50%); }
.p6c { left:22%; bottom:20%; }
.p6d { right:22%; top:20%; }
.p6e { right:22%; top:50%; transform:translateY(-50%); }
.p6f { right:22%; bottom:20%; }

/* Button overlays on the three black button windows */
.button-zone{
    position:absolute;
    width:var(--btn-width);
    height:var(--btn-height);
}
.roll-zone{ left:var(--roll-left); top:var(--roll-top); }
.bank-zone{ left:var(--bank-left); top:var(--bank-top); }
.clear-zone{ left:var(--clear-left); top:var(--clear-top); }

.cab-btn{
    width:100%;
    height:100%;
    min-height:0;
    border-radius:12px;
    padding:0;
    color:#eaf4ff;
    font-size:clamp(10px, 2.6vw, 14px);
    background:linear-gradient(180deg, #173d86, #0d234c);
    border:2px solid var(--gold);
    box-shadow: inset 0 0 0 2px #071229, 0 4px 10px rgba(0,0,0,.25);
}

.status{
    margin-top:10px;
    min-height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:14px;
}
.score-panel{ margin-top:14px; }
.tabs{ display:flex; gap:8px; margin-bottom:12px; }
.tab{
    flex:1;
    padding:10px 8px;
    background:#1f2937;
    color:#f9fafb;
    box-shadow:none;
}
.tab.active{
    background:var(--gold);
    color:#111827;
}
.ranking{ margin:0; padding-left:24px; }
.ranking li{
    padding:10px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
    color:#e5e7eb;
    font-size:15px;
}
.ranking .score{ color:var(--gold); font-weight:bold; float:right; }
.guide{ margin-top:14px; }
.note{ color:var(--gold); font-weight:bold; margin-top:8px; }

@media (min-width: 760px){
    .app{
        width:min(980px, calc(100% - 20px));
        padding-top:12px;
    }
    #gamePanel{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) 320px;
        gap:16px;
        align-items:start;
    }
    .score-panel{ margin-top:0; }
    .guide{ grid-column:1 / -1; margin-top:0; }
    .cabinet{ max-width:620px; }
}

@media (max-width: 520px){
    .app{ width:calc(100% - 8px); padding-top:6px; }
    .hero{ flex-direction:column; gap:8px; margin-bottom:8px; }
    .panel{ padding:12px; border-radius:18px; }
    .name-row{ flex-direction:column; }
    .cabinet{ width:100%; }
    .score-zone strong{
        letter-spacing:.12em;
        font-size:clamp(24px, 6.8vw, 42px);
    }
    .round-zone strong,
    .roundno-zone strong{
        font-size:clamp(14px, 3.7vw, 23px);
    }
    .pip{
        width:8px;
        height:7px;
    }
    .cab-btn{
        font-size:clamp(10px, 2.6vw, 14px);
    }
}

@media (max-width: 390px){
    .score-zone strong{
        font-size:clamp(24px, 6.8vw, 42px);
    }
    .pip{
        width:8px;
        height:7px;
    }
}