/* 야추 다이스 — 카지노 펠트 테마(자체 테마, 사이트 라이트/다크 모두 같게 보인다)
   ★#yd-game 에 max-width 를 두지 않는다★ — .quiz_doc·.answer_shadow 와 같은 폭으로 꽉 채우고,
   넓어지면 안 되는 것(주사위 줄·점수판 한 열·결과 패널)만 그 요소에 cap 을 둔다.
   PC(≥880px)는 좌: 주사위 / 우: 점수판 2단으로 가로 여유를 쓴다. */
#yd-game { position:relative; width:100%; max-width:100%; margin:0 auto; border:1px solid #1d4a38; border-radius:20px; overflow:hidden; background:linear-gradient(180deg,#143c2d,#0b241b); color:#f1f6f1; box-shadow:0 18px 45px rgba(4,30,20,.3); user-select:none; -webkit-user-select:none; }
#yd-game, #yd-game * { box-sizing:border-box; }
#yd-game [hidden] { display:none !important; }
#yd-game button { font-family:inherit; }
#yd-game button:focus-visible { outline:3px solid #ffd76a; outline-offset:-3px; }

.yd-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 16px; background:linear-gradient(110deg,#1b5340,#0d2a20); border-bottom:1px solid #ffffff14; }
.yd-brand { display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.14em; font-size:.72rem; color:#ffd76a; }
.yd-brand > i { font-size:22px; color:#f0b429; }
.yd-brand small { display:block; margin-top:2px; font-size:.65rem; font-weight:600; color:#9fbdae; letter-spacing:.02em; }
#yd-sound { border:1px solid #ffffff30; background:#ffffff0a; color:#dcebe2; border-radius:8px; padding:8px 10px; font-size:.72rem; cursor:pointer; touch-action:manipulation; }

.yd-hud { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:12px 12px 6px; align-items:center; }
.yd-hud > div { text-align:center; border-left:1px solid #ffffff14; }
.yd-hud > div:first-child { border-left:0; }
.yd-hud small { display:block; font-size:.62rem; font-weight:600; color:#94b3a3; letter-spacing:.03em; }
.yd-hud strong { display:block; line-height:1.4; font-size:1.05rem; font-weight:800; font-variant-numeric:tabular-nums; }
.yd-hud .yd-scorebox strong { color:#ffd76a; font-size:1.45rem; }
.yd-hud .yd-bonusbox strong.hit { color:#7ce0a4; }

#yd-stage { position:relative; margin:6px 12px 0; padding:14px 12px 12px; border:1px solid #ffffff14; border-radius:14px; background:radial-gradient(120% 90% at 50% 0%,#1d5a43 0%,#0c2419 100%); }

/* ── 주사위 5개 (한 줄 고정) ── */
#yd-dicerow { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; max-width:420px; margin:0 auto; }
.yd-die { position:relative; aspect-ratio:1/1; min-height:52px; padding:0; border:0; border-radius:16%; background:linear-gradient(160deg,#fffdf6,#ded8c7); box-shadow:inset 0 -4px 0 #b9b2a0, 0 4px 8px #0006; cursor:pointer; touch-action:manipulation; transition:transform .12s ease, box-shadow .12s ease; }
@supports not (aspect-ratio:1/1) { .yd-die { height:60px; } }
.yd-die i { display:none; position:absolute; width:18%; height:18%; border-radius:50%; background:#1d2a22; box-shadow:inset 0 -1px 1px #0006; }
.yd-die .p1, .yd-die .p2, .yd-die .p3 { top:13%; }
.yd-die .p4, .yd-die .p5, .yd-die .p6 { top:41%; }
.yd-die .p7, .yd-die .p8, .yd-die .p9 { top:69%; }
.yd-die .p1, .yd-die .p4, .yd-die .p7 { left:13%; }
.yd-die .p2, .yd-die .p5, .yd-die .p8 { left:41%; }
.yd-die .p3, .yd-die .p6, .yd-die .p9 { left:69%; }
.yd-die.f1 .p5,
.yd-die.f2 .p1, .yd-die.f2 .p9,
.yd-die.f3 .p1, .yd-die.f3 .p5, .yd-die.f3 .p9,
.yd-die.f4 .p1, .yd-die.f4 .p3, .yd-die.f4 .p7, .yd-die.f4 .p9,
.yd-die.f5 .p1, .yd-die.f5 .p3, .yd-die.f5 .p5, .yd-die.f5 .p7, .yd-die.f5 .p9,
.yd-die.f6 .p1, .yd-die.f6 .p3, .yd-die.f6 .p4, .yd-die.f6 .p6, .yd-die.f6 .p7, .yd-die.f6 .p9 { display:block; }
.yd-die.idle { background:linear-gradient(160deg,#2f4f41,#1b3328); box-shadow:inset 0 0 0 2px #ffffff1a; }
.yd-die.idle i { background:#ffffff2e; box-shadow:none; }
.yd-die.held { transform:translateY(-7px); box-shadow:inset 0 -4px 0 #b9b2a0, 0 0 0 3px #ffd76a, 0 8px 14px #0007; }
.yd-die .yd-keep { display:none; position:absolute; left:50%; bottom:-16px; transform:translateX(-50%); padding:1px 6px; border-radius:999px; background:#ffd76a; color:#3a2a00; font-size:.56rem; font-weight:900; letter-spacing:.06em; }
.yd-die.held .yd-keep { display:block; }
.yd-die.rolling { animation:ydShake .3s ease; }
@keyframes ydShake {
    0% { transform:translateY(0) rotate(0); }
    30% { transform:translateY(-10px) rotate(-14deg); }
    60% { transform:translateY(3px) rotate(10deg); }
    100% { transform:translateY(0) rotate(0); }
}
.yd-die:disabled { cursor:default; }
@media (prefers-reduced-motion:reduce) { .yd-die.rolling { animation:none; } }

.yd-rollwrap { display:flex; align-items:center; gap:10px; max-width:420px; margin:22px auto 0; }
#yd-rollsleft { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:2px; font-size:.6rem; font-weight:700; color:#9fbdae; letter-spacing:.04em; }
#yd-rollsleft span { font-size:.95rem; letter-spacing:1px; color:#ffd76a; }
#yd-roll { flex:1 1 auto; min-height:56px; border:0; border-radius:14px; background:linear-gradient(135deg,#e2a32f,#ffd76a); color:#38270a; font-size:1.05rem; font-weight:900; cursor:pointer; touch-action:manipulation; box-shadow:0 4px 0 #8a5f12; }
#yd-roll:active { transform:translateY(2px); box-shadow:0 2px 0 #8a5f12; }
#yd-roll:disabled { opacity:.42; box-shadow:none; cursor:default; }
#yd-hint { margin:12px 4px 0; text-align:center; font-size:.76rem; font-weight:600; color:#a9c6b6; min-height:20px; line-height:1.45; }
#yd-hint b { color:#ffd76a; }
#yd-toast { position:absolute; left:50%; bottom:12px; transform:translate(-50%,10px); z-index:11; max-width:92%; padding:9px 15px; border-radius:999px; background:#071a13e8; border:1px solid #ffffff2b; color:#f1f6f1; font-size:.76rem; font-weight:700; text-align:center; opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; }
#yd-toast.on { opacity:1; transform:translate(-50%,0); }

/* ── 점수판 12칸 ── */
#yd-card { padding:12px; }
.yd-cardhead { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin:0 2px 8px; font-size:.68rem; font-weight:700; color:#9fbdae; letter-spacing:.04em; }
.yd-cardhead span { white-space:nowrap; }
@media (max-width:380px) { .yd-cardhead span:last-child { display:none; } }
#yd-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.yd-cell { display:flex; align-items:center; justify-content:space-between; gap:6px; min-height:50px; padding:7px 10px; border:1px solid #ffffff1f; border-radius:11px; background:#ffffff0a; color:#eaf3ed; text-align:left; cursor:pointer; touch-action:manipulation; transition:background .12s, border-color .12s, transform .08s; }
.yd-cell:active { transform:scale(.985); }
.yd-cname { display:block; min-width:0; font-size:.82rem; font-weight:800; line-height:1.2; }
.yd-cname small { display:block; margin-top:2px; font-size:.6rem; font-weight:600; color:#8fae9e; letter-spacing:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.yd-cval { flex:0 0 auto; font-size:1.18rem; font-weight:900; font-variant-numeric:tabular-nums; color:#5e8572; }
.yd-cell.open .yd-cval { color:#ffd76a; }
.yd-cell.open.zero { background:#ffffff05; }
.yd-cell.open.zero .yd-cval { color:#6f8f7e; }
.yd-cell.open.good { border-color:#ffd76a7a; background:#ffd76a14; }
.yd-cell.open.big { border-color:#7ce0a4; background:#7ce0a41f; box-shadow:0 0 0 1px #7ce0a44d inset; }
.yd-cell.open.big .yd-cval { color:#9af0bd; }
.yd-cell.done { background:#061a12; border-color:#ffffff14; cursor:default; }
.yd-cell.done .yd-cname { color:#8fae9e; font-weight:700; }
.yd-cell.done .yd-cval { color:#ffffffd6; }
.yd-cell.done.zeroed .yd-cval { color:#e08b8b; }
.yd-cell.pending { border-color:#ffb4a2; background:#ff6b4a26; animation:ydPulse .6s ease-in-out infinite alternate; }
.yd-cell.just { animation:ydPop .4s ease; }
@keyframes ydPulse { from { box-shadow:0 0 0 0 #ff6b4a55; } to { box-shadow:0 0 0 6px #ff6b4a00; } }
@keyframes ydPop { 0% { transform:scale(1); } 40% { transform:scale(1.05); background:#ffd76a33; } 100% { transform:scale(1); } }
@media (prefers-reduced-motion:reduce) { .yd-cell.pending, .yd-cell.just { animation:none; } }

#yd-bonus { grid-column:1 / -1; display:flex; align-items:center; gap:10px; min-height:44px; padding:8px 11px; border:1px dashed #ffd76a66; border-radius:11px; background:#ffd76a0f; }
#yd-bonus .yd-bname { flex:0 0 auto; font-size:.76rem; font-weight:800; color:#ffd76a; }
#yd-bonus .yd-btrack { position:relative; flex:1 1 auto; height:10px; border-radius:6px; background:#04140d; overflow:hidden; }
#yd-bonus .yd-btrack i { display:block; height:100%; width:0; border-radius:6px; background:linear-gradient(90deg,#e2a32f,#ffd76a); transition:width .3s ease; }
#yd-bonus .yd-bval { flex:0 0 auto; font-size:.72rem; font-weight:800; color:#cfe3d7; font-variant-numeric:tabular-nums; }
#yd-bonus.hit { border-style:solid; border-color:#7ce0a4; background:#7ce0a41f; }
#yd-bonus.hit .yd-bname, #yd-bonus.hit .yd-bval { color:#9af0bd; }
#yd-bonus.hit .yd-btrack i { background:linear-gradient(90deg,#3f9b63,#9af0bd); }

.yd-controls { display:flex; gap:8px; padding:0 12px 12px; }
.yd-controls button { flex:1; min-height:48px; border-radius:10px; border:1px solid #ffffff2b; background:linear-gradient(160deg,#235040,#102b20); color:#e9f3ec; font-size:.86rem; font-weight:800; cursor:pointer; touch-action:manipulation; box-shadow:0 3px 0 #061a12; }
.yd-controls button:active { transform:translateY(2px); box-shadow:0 1px 0 #061a12; filter:brightness(1.15); }
.yd-controls button small { display:block; margin-top:3px; font-size:.62rem; font-weight:600; opacity:.72; }

/* ── 오버레이(시작·결과) ── */
.yd-overlay { position:absolute; inset:0; z-index:12; display:none; align-items:center; justify-content:center; padding:20px; background:linear-gradient(180deg,#05160fb0,#05160fee 45%); overflow:auto; }
.yd-overlay.on { display:flex; }
.yd-panel { width:100%; max-width:400px; text-align:center; padding:26px 20px; border:1px solid #ffffff2b; border-radius:16px; background:linear-gradient(155deg,#1d5240f2,#0a1f16f7); box-shadow:0 16px 45px #02100966; }
.yd-eyebrow { display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.12em; color:#ffd76a; margin-bottom:10px; }
.yd-panel h2 { margin:0 0 12px; font-size:1.3rem; font-weight:900; color:#fff; }
.yd-panel p { margin:0 0 16px; font-size:.86rem; line-height:1.65; color:#d3e5da; }
.yd-panel p b { color:#ffd76a; }
.yd-panel small { color:#9fbdae; }
.yd-primary { width:100%; min-height:52px; margin-top:6px; border:0; border-radius:12px; background:linear-gradient(135deg,#e2a32f,#ffd76a); color:#38270a; font-size:1rem; font-weight:900; cursor:pointer; box-shadow:0 4px 0 #8a5f12; }
.yd-primary:active { transform:translateY(2px); box-shadow:0 2px 0 #8a5f12; }
.yd-demo { display:flex; justify-content:center; gap:7px; margin:2px 0 16px; }
.yd-demo .yd-die { width:38px; min-height:38px; flex:0 0 38px; }
.yd-demo .yd-die:nth-child(2) { animation:ydShake 1.8s ease-in-out infinite; }
.yd-demo .yd-die:nth-child(4) { animation:ydShake 1.8s ease-in-out .3s infinite; }
@media (prefers-reduced-motion:reduce) { .yd-demo .yd-die { animation:none !important; } }
#yd-newrecord { display:inline-block; margin-bottom:8px; padding:4px 12px; border-radius:999px; background:#ffd76a; color:#3a2a00; font-size:.68rem; font-weight:900; letter-spacing:.08em; }
#yd-final { display:inline-block; font-size:3rem; font-weight:900; line-height:1.1; color:#ffd76a; }
.yd-final-unit { font-size:1rem; font-weight:800; color:#ffd76a; margin-left:3px; }
#yd-grade { margin:6px 0 4px; font-size:1.05rem; font-weight:900; color:#fff; }
#yd-detail { margin:10px 0 4px; font-size:.8rem; line-height:1.75; color:#bcd3c5; }
#yd-detail b { color:#ffd76a; }

/* 규칙 안내 — 전역 .answer_shadow 는 가운데 정렬·1.1em 이라 반드시 눌러 준다 */
.yd-guide { text-align:left; line-height:1.7; margin-top:16px; }
.yd-guide h3 { font-size:1rem; margin:0 0 8px; }
.yd-guide p { font-size:.9rem; margin:0 0 8px; }
.yd-guide ul { margin:0 0 8px; padding-left:1.15em; font-size:.88rem; line-height:1.7; }
.yd-guide li { margin:0 0 2px; }
.yd-guide small { display:block; font-size:.8rem; opacity:.85; }

@media (max-width:420px) {
    .yd-hud { gap:3px; padding:10px 8px 4px; }
    .yd-hud strong { font-size:.95rem; }
    .yd-hud .yd-scorebox strong { font-size:1.25rem; }
    #yd-stage { margin:6px 8px 0; padding:12px 8px 10px; }
    #yd-dicerow { gap:6px; }
    .yd-die { min-height:46px; }
    .yd-rollwrap { gap:8px; margin-top:20px; }
    #yd-card { padding:10px 8px 8px; }
    #yd-grid { gap:5px; }
    .yd-cell { min-height:46px; padding:6px 8px; }
    .yd-cname { font-size:.76rem; }
    .yd-cname small { font-size:.56rem; }
    .yd-cval { font-size:1.05rem; }
    .yd-controls { padding:0 8px 10px; }
}

/* ── PC(≥880px) 2단 — 왼쪽 주사위, 오른쪽 점수판 ──
   게임 박스가 컨테이너 폭 100% 라 가로 여유는 점수판 열로 쓴다(주사위만 커지는 것을 막는다). */
@media (min-width:880px) {
    #yd-game { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); grid-template-rows:auto auto minmax(0,1fr) auto;
        grid-template-areas:"tb tb" "hud card" "stage card" "ct card"; align-items:start; }
    .yd-toolbar { grid-area:tb; }
    .yd-hud { grid-area:hud; grid-template-columns:1fr 1fr; gap:8px; padding:14px 8px 4px 14px; }
    .yd-hud > div { border-left:0; padding:9px 6px 8px; border-radius:10px; background:#ffffff0a; border:1px solid #ffffff12; }
    .yd-hud .yd-scorebox { grid-column:1 / -1; }
    .yd-hud .yd-scorebox strong { font-size:1.8rem; }
    #yd-stage { grid-area:stage; margin:8px 8px 0 14px; display:flex; flex-direction:column; justify-content:center; }
    .yd-controls { grid-area:ct; padding:12px 8px 14px 14px; }
    #yd-card { grid-area:card; padding:14px 14px 14px 6px; }
    #yd-grid { gap:7px; }
    .yd-cell { min-height:54px; }
}