@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&display=swap');

*{box-sizing:border-box}
html,body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    overflow:hidden;
    background:#000;
}
body{
    font-family:'Cinzel',serif;
    color:#fff;
}
.app{
    position:relative;
    width:100vw;
    height:100vh;
    overflow:hidden;
    background:#000;
}
.bg{
    position:absolute;
    inset:0;
    background:url('../assets/casino_bg.jpg') center/cover no-repeat;
    transform:scale(1.03);
}
.dark-glass{
    position:absolute;
    inset:0;
    background:
        radial-gradient(ellipse at 50% 32%, rgba(255,178,46,.16), transparent 38%),
        radial-gradient(ellipse at 50% 100%, rgba(135,20,10,.36), transparent 45%),
        linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.44));
    box-shadow:inset 0 0 180px rgba(0,0,0,.88);
}
.logo-wrap{
    position:absolute;
    left:50%;
    top:1.8%;
    width:min(760px,72vw);
    transform:translateX(-50%);
    z-index:4;
    text-align:center;
}
.logo-img{
    width:100%;
    display:block;
    filter:drop-shadow(0 0 18px rgba(255,193,76,.85));
}
.machine{
    position:absolute;
    left:50%;
    top:24%;
    width:min(1180px,94vw);
    height:70%;
    transform:translateX(-50%);
    z-index:3;
    border-radius:34px;
    background:
        linear-gradient(180deg, rgba(61,38,11,.88), rgba(2,2,2,.96) 18%, rgba(0,0,0,.98) 76%, rgba(35,15,5,.94));
    border:1px solid rgba(255,201,91,.32);
    box-shadow:
        0 30px 100px rgba(0,0,0,.72),
        inset 0 0 55px rgba(255,190,70,.08);
    padding:30px 28px 24px;
}
.machine::before{
    content:"";
    position:absolute;
    left:26px;
    right:26px;
    top:13px;
    height:8px;
    border-radius:999px;
    background:linear-gradient(90deg,#211103,#744208,#ffd879,#744208,#211103);
    opacity:.65;
    box-shadow:0 0 16px rgba(255,216,121,.5);
}
.reel-box{
    position:relative;
    height:34%;
    margin-top:30px;
    border-radius:28px;
    background:
        linear-gradient(180deg,#211304,#020202 20%,#010101 78%,#221304);
    border:4px solid #a8690f;
    overflow:hidden;
    box-shadow:
        0 0 42px rgba(255,178,46,.45),
        inset 0 0 44px rgba(0,0,0,.96);
}
.reel-window{
    position:absolute;
    inset:0;
    overflow:hidden;
    z-index:3;
    mask-image:linear-gradient(90deg,transparent 0%,#000 11%,#000 89%,transparent 100%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 11%,#000 89%,transparent 100%);
}
.reel{
    position:absolute;
    left:0;
    top:0;
    height:100%;
    display:flex;
    align-items:center;
    will-change:transform, filter;
}
.card{
    width:112px;
    height:132px;
    flex:0 0 112px;
    margin:0 8px;
    border-radius:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:48px;
    font-weight:900;
    color:#fff1d3;
    border:2px solid rgba(255,221,143,.3);
    box-shadow:
        inset 0 0 20px rgba(0,0,0,.72),
        inset 0 3px 7px rgba(255,255,255,.18),
        0 0 14px rgba(0,0,0,.85);
    text-shadow:0 4px 8px rgba(0,0,0,.9);
    position:relative;
}
.card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 32%,rgba(0,0,0,.26));
}
.card span{
    position:relative;
    z-index:2;
}
.red{background:linear-gradient(145deg,#db1a18,#85100c 48%,#260202)}
.black{background:linear-gradient(145deg,#333,#080808 50%,#000)}
.green{background:linear-gradient(145deg,#19b95f,#086331 50%,#021e0e)}
.rail{
    position:absolute;
    left:14px;
    right:14px;
    height:5px;
    z-index:8;
    background:linear-gradient(90deg,transparent,#9f6410,#ffd879,#9f6410,transparent);
    box-shadow:0 0 13px rgba(255,216,121,.9);
}
.rail-top{top:17px}
.rail-bottom{bottom:17px}
.fade{
    position:absolute;
    top:0;
    height:100%;
    width:25%;
    z-index:7;
    pointer-events:none;
}
.fade-left{left:0;background:linear-gradient(90deg,#010101 0%,rgba(1,1,1,.9) 45%,transparent)}
.fade-right{right:0;background:linear-gradient(270deg,#010101 0%,rgba(1,1,1,.9) 45%,transparent)}
.selector{
    position:absolute;
    left:50%;
    top:0;
    height:100%;
    width:132px;
    transform:translateX(-50%);
    z-index:10;
    border-left:2px solid rgba(255,216,121,.86);
    border-right:2px solid rgba(255,216,121,.86);
    background:linear-gradient(90deg,transparent,rgba(255,216,121,.18),transparent);
    box-shadow:
        0 0 28px rgba(255,184,44,.86),
        inset 0 0 26px rgba(255,216,121,.14);
    pointer-events:none;
}
.gem{
    position:absolute;
    left:50%;
    width:48px;
    height:48px;
    transform:translateX(-50%) rotate(45deg);
    background:linear-gradient(135deg,#fff1aa,#c57a10,#ffd879);
    box-shadow:
        0 0 16px rgba(255,216,121,.95),
        inset 0 0 8px rgba(255,255,255,.5);
}
.gem-top{top:-24px}
.gem-bottom{bottom:-24px}
.result-box{
    position:relative;
    width:min(500px,76%);
    height:118px;
    margin:32px auto 20px;
    border-radius:23px;
    background:linear-gradient(180deg,#0c0804,#010101);
    border:1px solid rgba(255,216,121,.45);
    box-shadow:
        0 0 30px rgba(255,216,121,.14),
        inset 0 0 30px rgba(0,0,0,.93);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
.result-label{
    color:#f4d282;
    font-size:17px;
    letter-spacing:6px;
    margin-bottom:8px;
    text-shadow:0 0 10px rgba(255,216,121,.7);
}
.result-number{
    min-width:88px;
    height:58px;
    padding:0 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:48px;
    font-weight:900;
    color:#5fff82;
    text-shadow:
        0 0 13px rgba(95,255,130,1),
        0 0 28px rgba(95,255,130,.65);
}
.result-number.hit{
    animation:hit .55s cubic-bezier(.1,.9,.2,1);
}
@keyframes hit{
    0%{transform:scale(.55);filter:brightness(2)}
    70%{transform:scale(1.18)}
    100%{transform:scale(1)}
}
.start-btn{
    display:block;
    width:320px;
    height:78px;
    margin:0 auto;
    border:0;
    border-radius:999px;
    cursor:pointer;
    font-family:'Cinzel',serif;
    font-size:32px;
    font-weight:900;
    color:#fff2c8;
    background:
        linear-gradient(180deg,rgba(255,255,255,.20),transparent 32%),
        linear-gradient(135deg,#080705 0%,#2b2113 18%,#b87a18 45%,#ffe09a 50%,#b87a18 58%,#211509 100%);
    box-shadow:
        0 0 36px rgba(255,216,121,.72),
        0 10px 26px rgba(0,0,0,.74),
        inset 0 0 16px rgba(0,0,0,.65);
    text-shadow:0 3px 7px rgba(0,0,0,.9);
}
.start-btn:hover{transform:translateY(-2px) scale(1.03)}
.start-btn:active{transform:scale(.96)}
.start-btn:disabled{opacity:.65;cursor:not-allowed}
.chip{
    position:absolute;
    left:30px;
    bottom:24px;
    width:116px;
    height:116px;
    border-radius:50%;
    background:
        radial-gradient(circle,#171717 0 35%,transparent 36%),
        conic-gradient(#f6c714 0 11%,#111 11% 22%,#f6c714 22% 33%,#111 33% 44%,#f6c714 44% 55%,#111 55% 66%,#f6c714 66% 77%,#111 77% 88%,#f6c714 88% 100%);
    border:9px solid #242424;
    box-shadow:0 12px 30px rgba(0,0,0,.58),0 0 18px rgba(246,199,20,.35);
}
.chip::after{
    content:"Royal";
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:cursive;
    color:#ffd879;
    font-size:28px;
}
.roulette{
    position:absolute;
    right:30px;
    bottom:18px;
    width:165px;
    height:165px;
    border-radius:50%;
    background:
        radial-gradient(circle,#a46a12 0 12%,#101010 13% 30%,transparent 31%),
        conic-gradient(#7f1414 0 10%,#020202 10% 20%,#7f1414 20% 30%,#020202 30% 40%,#7f1414 40% 50%,#020202 50% 60%,#7f1414 60% 70%,#020202 70% 80%,#7f1414 80% 90%,#020202 90% 100%);
    border:10px solid #94600e;
    opacity:.86;
    box-shadow:0 12px 34px rgba(0,0,0,.62),0 0 18px rgba(255,216,121,.24);
}
.rushing{
    animation:none;
}
.motion-blur{
    filter:blur(2px) brightness(1.2);
}
@keyframes shake{
    0%{transform:translateX(0)}
    25%{transform:translateX(-2px)}
    50%{transform:translateX(2px)}
    75%{transform:translateX(-1px)}
    100%{transform:translateX(0)}
}
@media(max-width:760px){
    .logo-wrap{top:3%;width:78vw}
    .machine{top:24%;height:70%;padding:24px 14px 18px}
    .reel-box{height:31%;margin-top:26px}
    .card{
        width:86px;
        height:96px;
        flex-basis:86px;
        margin:0 6px;
        font-size:37px;
        border-radius:12px;
    }
    .selector{width:96px}
    .gem{width:34px;height:34px}
    .gem-top{top:-17px}
    .gem-bottom{bottom:-17px}
    .result-box{width:78%;height:104px;margin-top:24px}
    .result-label{font-size:12px;letter-spacing:3px}
    .result-number{height:52px;font-size:37px}
    .start-btn{width:230px;height:62px;font-size:23px}
    .chip,.roulette{display:none}
}


.chip,
.roulette{
    display:none !important;
}


/* v7 tablet center-fix: 카드 실제 폭과 flex 이동폭 안정화 */
.card{
    box-sizing:border-box;
}

.reel,
.reel-window,
.selector{
    transform-style:preserve-3d;
}


/* v8 hard align fix */
.selector{
    pointer-events:none;
}

.reel{
    backface-visibility:hidden;
}