.dong-choi .xdm{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(16px,4vw,56px);width:100%;max-width:940px}.dong-choi .xdm-table{position:relative;isolation:isolate;width:clamp(240px,36vw,450px);aspect-ratio:240 / 159;margin-top:70px}.dong-choi .xdm-table:before{content:"";position:absolute;z-index:-1;inset:-34% -26% -30%;border-radius:50%;background:radial-gradient(closest-side,#f6e7b347,#e8c7781a 50%,#e8c77800);pointer-events:none}.dong-choi .xdm-table:after{content:"";position:absolute;z-index:-1;left:8%;right:8%;bottom:-7%;height:26%;border-radius:50%;background:radial-gradient(closest-side,#000000a6,#0000);pointer-events:none}.dong-choi .xdm-plate{width:100%;filter:drop-shadow(0 10px 10px #0008) saturate(1.05)}.dong-choi .xdm-disc{position:absolute;width:15.5%;aspect-ratio:1;transform:translate(-50%,-50%);filter:drop-shadow(0 4px 4px #000a);transition:opacity .3s}.dong-choi .xdm-disc svg,.dong-choi .xdm-slot svg{display:block;width:100%;height:100%}.dong-choi .xdm-red{fill:#b8321f;stroke:#6e1a0e;stroke-width:2}.dong-choi .xdm-sheen{fill:#fff;opacity:.38}.dong-choi .xdm-ring{fill:none;stroke:#e8c77899;stroke-width:1.5}.dong-choi .xdm-mark{fill:var(--dc-ivory)}.dong-choi .xdm-white{fill:#f8f4e8;stroke:#0b2a37;stroke-width:2.5}.dong-choi .xdm-ring-w{fill:none;stroke:#0b2a3755;stroke-width:1.2}.dong-choi .xdm-table.closed .xdm-disc{opacity:0}.dong-choi .xdm-table.hidden .xdm-disc{visibility:hidden}.dong-choi .xdm-bowl{position:absolute;left:50%;bottom:17%;width:76%;margin-left:-38%;pointer-events:none;opacity:0;transform:translateY(-16px) rotate(-12deg);transform-origin:70% 90%;transition:transform .4s cubic-bezier(.3,.7,.3,1),opacity .4s}.dong-choi .xdm-bowl img{width:100%;filter:drop-shadow(0 14px 16px #000b)}.dong-choi .xdm-table.closed .xdm-bowl{opacity:1;transform:none}.dong-choi .xdm-panel{display:grid;justify-items:center;gap:14px;width:min(340px,100%);padding:22px 22px 20px;border-radius:18px;background:linear-gradient(180deg,#0b2a378c,#071b26b3);border:1px solid #e8c77847;box-shadow:inset 0 1px #ffffff14,0 18px 34px #0008;text-align:center}.dong-choi .xdm-ask{margin:0;font-size:19px;font-weight:600;line-height:1.35}.dong-choi .xdm-note{margin:0;font-size:13px;color:var(--mist)}.dong-choi .xdm-count{display:flex;gap:8px}.dong-choi .xdm-num{width:52px;min-width:44px;min-height:52px;padding:0;font-size:21px;color:var(--gold);border-color:#e8c77859;background:#071b26b3;font-variant-numeric:tabular-nums}.dong-choi .xdm-num.picked{border:2px dashed var(--dc-coral);opacity:1}.dong-choi .xdm-num.answer{border:2px solid var(--dc-jade);background:#49d6b026;box-shadow:0 0 0 4px #49d6b02e;opacity:1}.dong-choi .xdm-slots{display:grid;gap:10px}.dong-choi .xdm-slots.grid{grid-template-columns:repeat(2,66px)}.dong-choi .xdm-slots.diamond{grid-template-columns:repeat(3,64px);grid-template-rows:repeat(3,64px);gap:2px}.dong-choi .xdm-slots.diamond .s0{grid-area:1 / 2}.dong-choi .xdm-slots.diamond .s1{grid-area:2 / 3}.dong-choi .xdm-slots.diamond .s2{grid-area:3 / 2}.dong-choi .xdm-slots.diamond .s3{grid-area:2 / 1}.dong-choi .xdm-slot{width:64px;height:64px;padding:7px;border-radius:50%;border:1px solid #e8c77859;background:radial-gradient(closest-side,#0f3a46b3,#071b26cc);box-shadow:inset 0 2px 6px #000a;cursor:pointer;transition:transform .15s}.dong-choi .xdm-slot:hover:not(:disabled){transform:scale(1.05);border-color:var(--dc-jade)}.dong-choi .xdm-slot:focus-visible{outline:3px solid var(--coral);outline-offset:2px}.dong-choi .xdm-slot:disabled{opacity:1}.dong-choi .xdm-slot.right{border:2px solid var(--dc-jade)}.dong-choi .xdm-slot.wrong{border:2px dashed var(--dc-coral)}@media(max-width:640px){.dong-choi .xdm{flex-direction:column;gap:10px}.dong-choi .xdm-table{width:min(300px,100%);margin-top:52px}.dong-choi .xdm-panel{padding:14px 8px;width:100%}.dong-choi .xdm-count{flex-wrap:wrap;justify-content:center}.dong-choi .xdm-ask{font-size:16px}.dong-choi .xdm-count{gap:6px}.dong-choi .xdm-num{width:46px;min-height:46px}.dong-choi .xdm-slots.grid{grid-template-columns:repeat(2,56px)}.dong-choi .xdm-slots.diamond{grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,52px)}.dong-choi .xdm-slot{width:56px;height:56px}.dong-choi .xdm-slots.diamond .xdm-slot{width:52px;height:52px;padding:6px}}.dong-choi .xdm-quiz{width:min(420px,100%)}.dong-choi .xdm-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%}.dong-choi .xdm-opts.three{grid-template-columns:1fr 1fr}.dong-choi .xdm-opts.three .xdm-opt:last-child{grid-column:1 / -1}.dong-choi .xdm-opt{position:relative;min-height:54px;padding:8px 12px;border:0;border-radius:12px;font:700 16px/1.25 var(--font);color:#ffe7a8;background:linear-gradient(180deg,#6e4628,#4a2c15 55%,#3b2412);box-shadow:inset 0 0 0 2px #c9a24a,inset 0 0 0 5px #3a2210,inset 0 0 0 6px #c9a24a66,0 6px 14px #0009;cursor:pointer;transition:transform .15s,filter .15s}.dong-choi .xdm-opt:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.1)}.dong-choi .xdm-opt:focus-visible{outline:3px solid var(--dc-coral);outline-offset:3px}.dong-choi .xdm-opt:disabled{cursor:default;opacity:1}.dong-choi .xdm-opt.picked{box-shadow:inset 0 0 0 2px #ffe7a8,inset 0 0 0 5px #3a2210,0 0 0 3px #e8c778,0 0 22px #e8c7786b}.dong-choi .xdm-opt.answer{color:#d9fff3;background:linear-gradient(180deg,#1d6b5c,#0f4a40 55%,#0a3530);box-shadow:inset 0 0 0 2px #49d6b0,inset 0 0 0 5px #0a3530,0 0 0 3px #49d6b066}.dong-choi .xdm-opt:after{position:absolute;top:-9px;right:-9px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font:800 12px/1 var(--font)}.dong-choi .xdm-opt.answer:after{content:"✓";background:var(--dc-jade);color:#04332d}.dong-choi .xdm-opt.picked:not(.answer):after{content:"✕";background:#c8402c;color:#fff4d6}.dong-choi .xdm-opt.picked:not(.answer){text-decoration:line-through;text-decoration-color:#ff8b70}.dong-choi[data-phase=resolving] .xdm-opt:not(.picked):not(.answer){filter:saturate(.55) brightness(.75)}@media(max-width:640px){.dong-choi .xdm-opt{font-size:15px;min-height:50px}}
