:root {
    --bg: #0D0D1A;
    --card: #16213E;
    --elev: #1F2B47;
    --gold: #D4AF37;
    --gold2: #FFD700;
    --grn: #00C851;
    --red: #FF4444;
    --txt: #FFF;
    --txt2: #B8B8B8;
    --mut: #6B7280;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
    font-family: 'Montserrat', 'Noto Sans SC', sans-serif;
    background: var(--bg);
    color: var(--txt);
    min-height: 100vh;
}

body.zh { font-family: 'Noto Sans SC', 'Montserrat', sans-serif; }

.app { max-width: 430px; margin: 0 auto; min-height: 100vh; background: var(--bg); }

.scr { display: none; min-height: 100vh; padding: 20px; animation: fade .3s; }
.scr.on { display: flex; flex-direction: column; }

@keyframes fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; } }

.gold {
    background: linear-gradient(135deg, #D4AF37, #FFD700, #D4AF37);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.logo {
    font-family: 'Playfair Display', serif;
    font-size: 56px;
    font-weight: 900;
    letter-spacing: 10px;
    text-align: center;
}

.logo::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #D4AF37, #FFD700);
    margin: 10px auto;
    border-radius: 2px;
}

.sub { text-align: center; font-size: 10px; letter-spacing: 5px; color: var(--txt2); text-transform: uppercase; }

/* Buttons */
.btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 20px; border-radius: 12px; font-family: inherit;
    font-size: 14px; font-weight: 600; cursor: pointer; border: none;
    text-transform: uppercase; letter-spacing: 1px; transition: all .2s;
}

.btn-g { background: linear-gradient(135deg, #D4AF37, #FFD700); color: #0D0D1A; box-shadow: 0 4px 15px rgba(212,175,55,.3); }
.btn-g:active { transform: scale(.98); }
.btn-o { background: transparent; color: var(--gold); border: 2px solid var(--gold); }
.btn-gh { background: var(--card); color: var(--txt); border: 1px solid var(--elev); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Input */
.inp {
    width: 100%; padding: 14px; background: var(--card);
    border: 2px solid var(--elev); border-radius: 12px;
    color: var(--txt); font-family: inherit; font-size: 16px;
}
.inp:focus { outline: none; border-color: var(--gold); }
.inp::placeholder { color: var(--mut); }

/* Language Selector */
.lang {
    position: absolute; top: 16px; right: 16px;
    display: flex; gap: 4px; background: var(--card);
    padding: 4px; border-radius: 10px; border: 1px solid var(--elev); z-index: 10;
}
.lang button {
    padding: 8px 12px; background: transparent; border: none;
    color: var(--txt2); font-size: 12px; font-weight: 600;
    cursor: pointer; border-radius: 6px;
}
.lang button.on { background: var(--gold); color: #0D0D1A; }

/* Home Screen */
#home {
    justify-content: center; align-items: center; text-align: center; padding-top: 50px;
    background: radial-gradient(ellipse at 50% 0%, rgba(212,175,55,.08), transparent 50%), var(--bg);
    position: relative;
}

.dice-i { font-size: 44px; margin-bottom: 16px; animation: flt 3s ease-in-out infinite; }
@keyframes flt { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.nick { width: 100%; max-width: 260px; margin: 30px auto; }
.nick .inp { text-align: center; font-weight: 600; }

.modes { width: 100%; display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }

.mode {
    display: flex; align-items: center; padding: 16px;
    background: var(--card); border: 2px solid var(--elev);
    border-radius: 14px; cursor: pointer; text-align: left; transition: all .2s;
}
.mode:active { border-color: var(--gold); transform: translateX(4px); }

.mode-i {
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    background: var(--elev); border-radius: 10px; font-size: 22px; margin-right: 14px; flex-shrink: 0;
}
.mode h3 { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.mode p { font-size: 11px; color: var(--txt2); }
.mode-a { margin-left: auto; color: var(--mut); font-size: 18px; }

.ftr { margin-top: auto; padding-top: 30px; font-size: 10px; color: var(--mut); }

/* Header */
.hdr { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.back {
    width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
    background: var(--card); border: none; border-radius: 10px;
    color: var(--txt); font-size: 18px; cursor: pointer;
}
.ttl { font-family: 'Playfair Display', serif; font-size: 22px; }

/* How to Play */
.htc { flex: 1; overflow-y: auto; padding-bottom: 20px; }
.hts { margin-bottom: 24px; }
.hts-t { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--gold); margin-bottom: 12px; }
.hts-x { font-size: 13px; line-height: 1.7; color: var(--txt2); }
.hts-x strong { color: var(--txt); }

.str { background: var(--card); border-radius: 10px; padding: 14px; margin-bottom: 10px; border-left: 3px solid var(--gold); }
.str h4 { font-size: 13px; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.str p { font-size: 12px; color: var(--txt2); line-height: 1.5; }
.str .pt { margin-left: auto; background: var(--elev); padding: 4px 8px; border-radius: 6px; font-size: 11px; color: var(--gold); }

.tbl { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 12px; }
.tbl th, .tbl td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--elev); }
.tbl th { background: var(--elev); color: var(--txt2); font-weight: 600; text-transform: uppercase; font-size: 10px; }
.tbl .p1 { color: var(--gold); font-weight: 700; }
.tbl .p2 { color: var(--grn); font-weight: 700; }

.warn { display: flex; gap: 12px; padding: 12px; background: rgba(255,68,68,.1); border: 1px solid var(--red); border-radius: 10px; margin: 12px 0; }
.tip { display: flex; gap: 12px; padding: 12px; background: rgba(212,175,55,.1); border: 1px solid #B8962E; border-radius: 10px; margin: 12px 0; }
.warn .ic, .tip .ic { font-size: 20px; flex-shrink: 0; }
.warn .tx, .tip .tx { font-size: 12px; color: var(--txt2); line-height: 1.5; }

/* Setup */
.sec { margin-bottom: 24px; }
.sec h3 { font-size: 13px; color: var(--txt2); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 12px; }

.rnds { display: flex; gap: 12px; }
.rnd { flex: 1; padding: 16px; background: var(--card); border: 2px solid var(--elev); border-radius: 14px; cursor: pointer; text-align: center; transition: all .2s; }
.rnd.sel { border-color: var(--gold); background: rgba(212,175,55,.1); }
.rnd .num { font-family: 'Playfair Display', serif; font-size: 32px; font-weight: 700; color: var(--gold); }
.rnd .lbl { font-size: 11px; color: var(--txt2); margin-top: 4px; }

.info { display: flex; align-items: center; gap: 10px; padding: 14px; background: rgba(212,175,55,.1); border-radius: 10px; border-left: 3px solid var(--gold); }
.info p { font-size: 12px; color: var(--txt2); }

.acts { margin-top: auto; padding-top: 24px; }
.acts .btn { width: 100%; }

/* Game Screen */
#game { padding: 14px; gap: 12px; }

.ghdr { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; }
.ghdr .lbl { font-size: 9px; color: var(--mut); text-transform: uppercase; letter-spacing: 1px; }
.ghdr .val { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; }
.gsc { text-align: right; }
.gsc .val { font-size: 28px; color: var(--gold); }

/* Dice Area */
.da {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 160px; background: radial-gradient(ellipse at center, rgba(212,175,55,.05), transparent 70%), var(--card);
    border-radius: 20px; border: 1px solid var(--elev); position: relative;
}
.da::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, #B8962E, transparent); }

.dcs { display: flex; gap: 28px; margin-bottom: 12px; }

.die {
    width: 64px; height: 64px; background: linear-gradient(145deg, #fff, #e8e8e8);
    border-radius: 10px; display: flex; align-items: center; justify-content: center;
    font-family: 'Playfair Display', serif; font-size: 32px; font-weight: 900;
    color: #0D0D1A; box-shadow: 0 6px 16px rgba(0,0,0,.4);
}
.die.roll { animation: rol .5s; }
@keyframes rol { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.1); } 100% { transform: rotate(360deg) scale(1); } }

.dtot { font-size: 13px; color: var(--txt2); }
.dtot strong { font-family: 'Playfair Display', serif; font-size: 18px; color: var(--txt); }
.dph { color: var(--mut); font-size: 13px; }

/* Betting Panel */
.bp { background: var(--card); border-radius: 18px; padding: 14px; border: 1px solid var(--elev); }
.bs { margin-bottom: 12px; }
.bs:last-child { margin-bottom: 0; }
.bs-t { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 10px; color: var(--mut); text-transform: uppercase; letter-spacing: 1px; }
.bs-t .py { color: var(--gold); }

.bg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.bg4 { grid-template-columns: repeat(4, 1fr); }

.bb {
    padding: 12px; background: var(--elev); border: 2px solid transparent;
    border-radius: 10px; color: var(--txt); font-size: 11px; font-weight: 600;
    cursor: pointer; text-transform: uppercase; font-family: inherit; transition: all .15s;
}
.bb:active { background: var(--bg); }
.bb.sel { border-color: var(--gold); background: rgba(212,175,55,.15); color: var(--gold2); }
.bb-s { background: linear-gradient(135deg, rgba(212,175,55,.1), rgba(212,175,55,.05)); border: 1px solid #B8962E; }

.snp {
    width: 100%; padding: 12px; background: var(--elev); border: 2px solid transparent;
    border-radius: 10px; color: var(--txt); font-family: inherit; font-size: 13px;
    cursor: pointer; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='%23B8B8B8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
}
.snp:focus { outline: none; border-color: var(--gold); }
.snp.sel { border-color: var(--gold); background-color: rgba(212,175,55,.15); }

/* Leverage Toggle */
.lev {
    display: flex; align-items: center; justify-content: space-between; padding: 12px;
    background: linear-gradient(135deg, rgba(212,175,55,.15), rgba(212,175,55,.05));
    border: 1px solid #B8962E; border-radius: 10px; margin-top: 12px;
}
.lev-i { display: flex; align-items: center; gap: 10px; }
.lev-t h4 { font-size: 12px; font-weight: 700; color: var(--gold2); }
.lev-t p { font-size: 10px; color: var(--txt2); }

.tog { width: 48px; height: 26px; background: var(--elev); border-radius: 13px; position: relative; cursor: pointer; transition: all .2s; flex-shrink: 0; }
.tog.on { background: var(--gold); }
.tog::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: all .2s; }
.tog.on::after { left: 25px; }
.tog.dis { opacity: .5; cursor: not-allowed; }

.thr { width: 100%; padding: 16px; font-size: 16px; font-weight: 700; letter-spacing: 2px; margin-top: 12px; }
.thr:disabled { background: var(--elev); color: var(--mut); box-shadow: none; }

/* Real Dice Input */
.rdi { display: none; margin-bottom: 12px; }
.rdi.on { display: block; }
.rdi-g { display: flex; gap: 12px; justify-content: center; }
.rdi-g select { width: 80px; text-align: center; }

/* Result Overlay */
.ov { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(13,13,26,.95); display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.ov.on { display: flex; animation: fade .3s; }

.rc { width: 100%; max-width: 340px; background: var(--card); border-radius: 20px; padding: 28px; text-align: center; border: 1px solid var(--elev); }
.ri { font-size: 56px; margin-bottom: 12px; }
.rt { font-family: 'Playfair Display', serif; font-size: 26px; margin-bottom: 8px; }
.rt.win { color: var(--grn); }
.rt.lose { color: var(--red); }

.rdc { display: flex; justify-content: center; gap: 14px; margin: 20px 0; }
.rdc .die { width: 52px; height: 52px; font-size: 26px; }

.rdt { background: var(--elev); border-radius: 10px; padding: 14px; margin: 16px 0; }
.rr { display: flex; justify-content: space-between; padding: 8px 0; font-size: 13px; }
.rr:not(:last-child) { border-bottom: 1px solid var(--card); }
.rr span:first-child { color: var(--txt2); }

.rp { font-family: 'Playfair Display', serif; font-size: 44px; font-weight: 700; margin: 12px 0; }
.rp.pos { color: var(--gold2); }
.rp.zero { color: var(--mut); }

.ra { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.ra .btn { width: 100%; }

/* Duel Screen */
.dop { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.dc { padding: 24px; background: var(--card); border: 2px solid var(--elev); border-radius: 18px; cursor: pointer; transition: all .2s; }
.dc:active { border-color: var(--gold); }
.dc-i { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--elev); border-radius: 14px; font-size: 28px; margin-bottom: 12px; }
.dc h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.dc p { font-size: 12px; color: var(--txt2); }

.rms { display: none; margin-top: 24px; animation: fade .3s; }
.rms.on { display: block; }

.rmd { text-align: center; padding: 24px; background: var(--card); border-radius: 18px; border: 2px dashed #B8962E; }
.rml { font-size: 11px; color: var(--txt2); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 12px; }
.rmc { font-family: 'Playfair Display', serif; font-size: 44px; font-weight: 900; letter-spacing: 8px; color: var(--gold2); }
.rmh { font-size: 11px; color: var(--mut); margin-top: 12px; }
.rinfo { text-align: center; padding: 12px; background: var(--elev); border-radius: 10px; margin-top: 16px; font-size: 14px; color: var(--txt2); }
.rinfo strong { color: var(--gold); font-size: 18px; }

/* Waiting Screen */
#wait { justify-content: center; align-items: center; text-align: center; }
.wdc { display: flex; gap: 14px; justify-content: center; margin-bottom: 24px; }
.wdc .die { animation: bnc 1.5s ease-in-out infinite; }
.wdc .die:nth-child(2) { animation-delay: .2s; }
@keyframes bnc { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.wt { font-family: 'Playfair Display', serif; font-size: 22px; margin-bottom: 8px; }
.ws { color: var(--txt2); font-size: 13px; margin-bottom: 24px; }
.wi { padding: 20px; background: var(--card); border-radius: 14px; margin-bottom: 24px; }
.wc { font-family: 'Playfair Display', serif; font-size: 32px; font-weight: 900; letter-spacing: 6px; color: var(--gold2); }

.wps { display: flex; gap: 32px; justify-content: center; margin-top: 16px; }
.wp { text-align: center; }
.wp-a { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--elev); border-radius: 50%; font-size: 24px; margin: 0 auto 8px; border: 2px solid var(--card); }
.wp-a.rdy { border-color: var(--grn); }
.wp-a.wt { border: 2px dashed var(--mut); }
.wp-n { font-size: 13px; font-weight: 600; }
.wp-s { font-size: 10px; color: var(--mut); text-transform: uppercase; }

/* Final Screen */
#final { padding-top: 24px; background: radial-gradient(ellipse at 50% 30%, rgba(212,175,55,.1), transparent 50%), var(--bg); }
.fh { text-align: center; margin-bottom: 24px; }
.fcr { font-size: 56px; margin-bottom: 12px; animation: crn 2s ease-in-out infinite; }
@keyframes crn { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-8px) rotate(5deg); } }

.ft { font-family: 'Playfair Display', serif; font-size: 28px; }
.fw { font-size: 20px; color: var(--gold2); margin-top: 8px; }

.fss { display: flex; gap: 12px; margin-bottom: 24px; }
.fpc { flex: 1; padding: 16px; background: var(--card); border-radius: 14px; text-align: center; border: 2px solid var(--elev); }
.fpc.win { border-color: var(--gold); background: linear-gradient(180deg, rgba(212,175,55,.1), var(--card)); }
.fpc-a { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--elev); border-radius: 50%; font-size: 20px; margin: 0 auto 8px; }
.fpc-n { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.fpc-s { font-family: 'Playfair Display', serif; font-size: 32px; font-weight: 700; }
.fpc.win .fpc-s { color: var(--gold2); }

.fbr { background: var(--card); border-radius: 14px; overflow: hidden; margin-bottom: 24px; }
.fbr-h { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 12px; background: var(--elev); font-size: 10px; font-weight: 600; text-transform: uppercase; color: var(--txt2); }
.fbr-r { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 12px; border-bottom: 1px solid var(--elev); font-size: 13px; }
.fbr-r .rd { color: var(--txt2); }
.fbr-r .sc { font-weight: 600; }
.fbr-r .sc.hi { color: var(--gold); }

.fac { display: flex; flex-direction: column; gap: 10px; }
.fac .btn { width: 100%; }

.bdg { display: inline-flex; padding: 4px 8px; background: rgba(212,175,55,.2); border-radius: 20px; font-size: 10px; font-weight: 600; color: var(--gold2); text-transform: uppercase; margin-top: 8px; }

.hs { margin-top: 16px; padding: 12px; background: var(--card); border-radius: 10px; text-align: center; }
.hs .lb { font-size: 10px; color: var(--txt2); text-transform: uppercase; }
.hs .vl { font-family: 'Playfair Display', serif; font-size: 24px; color: var(--gold); }

/* ============================================
   WAIT FOR OPPONENT TO FINISH SCREEN
   ============================================ */
#waitFinish { 
    justify-content: flex-start; 
    align-items: center; 
    text-align: center; 
    padding-top: 30px;
    background: radial-gradient(ellipse at 50% 20%, rgba(212,175,55,.08), transparent 60%), var(--bg);
}

.wf-header { margin-bottom: 24px; }

.wf-badge {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, rgba(0,200,81,.2), rgba(0,200,81,.1));
    border: 1px solid var(--grn);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    color: var(--grn);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.wf-title {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
}

/* Your Score Card */
.wf-your-score {
    width: 100%;
    padding: 24px;
    background: linear-gradient(135deg, rgba(212,175,55,.15), rgba(212,175,55,.05));
    border: 2px solid var(--gold);
    border-radius: 20px;
    margin-bottom: 16px;
}

.wf-score-label {
    font-size: 11px;
    color: var(--txt2);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.wf-score-value {
    font-family: 'Playfair Display', serif;
    font-size: 64px;
    font-weight: 900;
    color: var(--gold2);
    line-height: 1;
    text-shadow: 0 4px 20px rgba(212,175,55,.3);
}

.wf-player-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--txt);
    margin-top: 8px;
}

/* VS Divider */
.wf-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 8px 0;
}

.wf-vs span {
    padding: 8px 20px;
    background: var(--elev);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    color: var(--mut);
    letter-spacing: 2px;
}

/* Opponent Card */
.wf-opponent {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--card);
    border: 1px solid var(--elev);
    border-radius: 16px;
    margin-bottom: 20px;
}

.wf-opp-avatar {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--elev);
    border-radius: 50%;
    font-size: 24px;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
}

.wf-opp-info { text-align: left; flex: 1; }

.wf-opp-name {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}

.wf-opp-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--txt2);
}

.wf-status-dot {
    width: 8px;
    height: 8px;
    background: var(--grn);
    border-radius: 50%;
    animation: blink 1s ease-in-out infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Progress Section */
.wf-progress-section {
    width: 100%;
    padding: 16px;
    background: var(--card);
    border-radius: 14px;
    margin-bottom: 16px;
}

.wf-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--txt2);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.wf-progress-label span:last-child {
    color: var(--gold);
    font-weight: 700;
}

.wf-progress-bar {
    width: 100%;
    height: 8px;
    background: var(--elev);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}

.wf-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--gold2));
    border-radius: 4px;
    transition: width 0.5s ease;
}

.wf-progress-rounds {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.wf-round-dot {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--elev);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 600;
    color: var(--mut);
    transition: all 0.3s;
}

.wf-round-dot.done {
    background: var(--gold);
    color: #0D0D1A;
}

.wf-round-dot.current {
    background: var(--elev);
    border: 2px solid var(--gold);
    color: var(--gold);
    animation: currentRound 1s ease-in-out infinite;
}

@keyframes currentRound {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Room Code */
.wf-room {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--elev);
    border-radius: 10px;
    margin-bottom: 20px;
}

.wf-room-label {
    font-size: 10px;
    color: var(--mut);
    text-transform: uppercase;
}

.wf-room-code {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 4px;
}

/* Waiting Animation */
.wf-waiting-anim {
    margin-bottom: 20px;
}

.wf-dice-roll {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 12px;
}

.wf-dice-roll span {
    font-size: 28px;
    animation: diceFloat 2s ease-in-out infinite;
}

.wf-dice-roll span:nth-child(2) {
    animation-delay: 0.3s;
}

@keyframes diceFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-8px) rotate(-10deg); }
    75% { transform: translateY(-8px) rotate(10deg); }
}

.wf-waiting-text {
    font-size: 12px;
    color: var(--mut);
    font-style: italic;
}

/* Actions */
.wf-actions {
    width: 100%;
    margin-top: auto;
    padding-top: 20px;
}

.wf-actions .btn {
    width: 100%;
}