/* PLAYORA 제비뽑기 화면 */
.dr { --kraft: #d9b27c; --kraft-2: #c39257; --kraft-ink: #5b3a17; }
.dr-modes { position: absolute; z-index: 5; left: 0; right: 0; top: 50px; height: 46px; display: flex; gap: 2px; padding: 0 var(--s2); background: var(--paper-2); border-bottom: 2px solid var(--ink); overflow-x: auto; scrollbar-width: none; }
.dr-modes::-webkit-scrollbar { display: none; }
.dr-modes button { flex: 1 0 auto; border: 0; background: transparent; height: 44px; padding: 0 10px; font-weight: 700; font-size: 14px; color: var(--ink-3); position: relative; }
.dr-modes button[aria-selected="true"] { color: var(--ink); }
.dr-modes button[aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 4px; border-radius: 4px 4px 0 0; background: var(--acc); }
.dr.land .dr-modes { position: static; height: auto; background: transparent; border: 0; padding: 0; flex: 0 1 auto; min-width: 0; }
.dr.land .dr-modes button { height: 50px; flex: 0 0 auto; }
.dr.land.short .dr-modes button { height: 44px; }
.dr.land .pk-bar .bar-l { flex: 1 1 auto; }

.dr-main { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 10px; }
.scr { display: flex; flex-direction: column; gap: 10px; min-height: 0; flex: 1; }
.quick { flex: none; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; min-height: 40px; font-weight: 600; font-size: 15px; }
.quick { gap: 6px; }
.quick .num { height: 38px; }
.quick .num button { width: 30px; }
.quick .num input { width: 42px; font-size: 15px; }
.quick .wide input { width: 88px; }
.quick .lbl-q { white-space: nowrap; }
.quick .roster { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 6px 0 12px; border: 2px dashed var(--line-2); border-radius: var(--r2); background: rgba(255, 252, 246, 0.7); font-weight: 500; text-align: left; overflow: hidden; }
.quick .roster b { flex: none; font-weight: 700; }
.quick .roster span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); font-size: 14px; }
.quick .roster i { flex: none; font-style: normal; font-size: 13px; font-weight: 700; color: var(--acc-2); }
.quick .fld.n { flex: 1 1 70px; min-width: 64px; max-width: 140px; height: 38px; font-weight: 700; text-align: center; padding: 0 6px; }
.quick .til { color: var(--ink-3); }
.tight .quick { gap: 4px; }
.tight .quick .u { display: none; }
.tight .quick .num button { width: 28px; }
.tight .quick .num input { width: 36px; }
.tight .quick .fld.n { flex-basis: 56px; min-width: 56px; }
.stage { position: relative; flex: 1; min-height: 0; }
.acts { flex: none; display: flex; gap: var(--s2); }
.acts .go { flex: 1; min-width: 0; }
.acts .sq { width: 58px; height: 58px; flex: none; padding: 0; border-radius: var(--r3); }
.dr.short .acts .sq { width: 50px; height: 50px; }
.acts .sq svg { width: 22px; height: 22px; }
.acts .bt.alt { height: 58px; border-radius: var(--r3); flex: none; padding: 0 var(--s4); font-size: 15px; }
.dr.short .acts .bt.alt { height: 50px; }
.dr.land .acts .only-port { display: none; }
.hint { font-size: 13px; color: var(--ink-3); text-align: center; }

/* ---------------------------------------------------------------- 제비통 */
.box { position: absolute; inset: 0 0 34px; border: 2.5px solid var(--ink); border-radius: 22px; background: var(--kraft);
  background-image: repeating-linear-gradient(92deg, rgba(255, 240, 210, 0.07) 0 2px, rgba(0, 0, 0, 0) 2px 11px); box-shadow: 0 5px 0 var(--ink); }
.box-in { position: absolute; inset: 14px 14px 30px; border-radius: 14px; background: var(--kraft-2); border: 2px solid rgba(60, 33, 8, 0.55);
  box-shadow: inset 0 10px 18px rgba(60, 30, 5, 0.42), inset 0 -4px 10px rgba(255, 220, 170, 0.12); overflow: hidden; }
.box-tag { position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%) rotate(-1.5deg); padding: 1px 14px 3px; background: var(--card); border: 2px solid var(--ink); border-radius: 6px; font: 400 15px/1.3 var(--f-disp); color: var(--ink); white-space: nowrap; box-shadow: 0 2px 0 rgba(31, 36, 64, 0.3); }
.box.shake { animation: boxShake .7s var(--ease); }
@keyframes boxShake { 0% { transform: none; } 15% { transform: translateX(-8px) rotate(-1.4deg); } 32% { transform: translateX(7px) rotate(1.2deg); } 50% { transform: translateX(-5px) rotate(-0.8deg); } 68% { transform: translateX(4px) rotate(0.5deg); } 85% { transform: translateX(-2px); } 100% { transform: none; } }
.slip { position: absolute; left: 50%; top: 50%; width: var(--sw); height: var(--sh); margin: 0; padding: 0; border: 0; background: transparent; transform: translate(-50%, -50%) rotate(var(--r)); transition: left .6s var(--ease), top .6s var(--ease), transform .25s var(--ease), opacity .2s; cursor: pointer; }
.slip::before { content: ""; position: absolute; inset: 0; border-radius: 3px 3px 5px 5px; border: 1.5px solid var(--ink); background: linear-gradient(176deg, #fffbf2 0 44%, #f3e9d6 49%, #e6d7bb 53%, #efe3cc 100%); box-shadow: 0 3px 0 rgba(31, 36, 64, 0.3), inset 0 -3px 0 rgba(120, 90, 40, 0.08); }
.slip::after { content: ""; position: absolute; left: 2px; right: 2px; top: 47%; height: 2px; background: linear-gradient(90deg, rgba(31, 36, 64, 0.12), rgba(31, 36, 64, 0.3) 50%, rgba(31, 36, 64, 0.12)); border-radius: 2px; }
.slip i { position: absolute; right: -1px; top: -1px; width: 28%; height: 44%; border-radius: 0 3px 0 6px; background: linear-gradient(225deg, var(--kraft-2) 0 48%, #e2d2b4 52%); border-left: 1.5px solid rgba(31, 36, 64, 0.5); border-bottom: 1.5px solid rgba(31, 36, 64, 0.5); }
.slip:hover:not(:disabled) { transform: translate(-50%, -58%) rotate(var(--r)) scale(1.08); z-index: 3; }
.slip:active:not(:disabled) { transform: translate(-50%, -54%) rotate(var(--r)) scale(1.04); }
.slip.gone { opacity: 0; pointer-events: none; }
.slip:disabled { cursor: default; }
.tray { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; }
.tray .chipr { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--card); border: 1.5px solid var(--line-2); font-size: 12px; font-weight: 600; flex: none; }
.tray .chipr.hit { border-color: var(--acc); color: var(--acc-2); }
.tray .scroll { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.tray .scroll::-webkit-scrollbar { display: none; }

/* 펼치기 */
.rv { position: absolute; inset: 0; z-index: 30; background: rgba(31, 36, 64, 0.5); opacity: 0; transition: opacity .25s; }
.rv.on { opacity: 1; }
.note-w { position: absolute; left: 50%; top: 44%; width: var(--nw); height: var(--nh); margin: calc(var(--nh) / -2) 0 0 calc(var(--nw) / -2); perspective: 1100px; transition: transform .42s var(--ease); }
.note { position: absolute; inset: 0; transform-style: preserve-3d; }
.note .half { position: absolute; left: 0; right: 0; height: 50%; }
.note .bot { bottom: 0; background: #fffaf0; border: 2.5px solid var(--ink); border-top-width: 1px; border-top-style: dashed; border-top-color: rgba(31, 36, 64, 0.3); border-radius: 0 0 12px 12px; box-shadow: 0 8px 0 rgba(31, 36, 64, 0.35); display: flex; align-items: center; justify-content: center;
  background-image: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 23px, rgba(61, 111, 214, 0.12) 23px 24px); }
.note .top { top: 0; transform-origin: 50% 100%; transform: rotateX(180deg); transform-style: preserve-3d; transition: transform .6s cubic-bezier(.25, 1.35, .45, 1); }
.note.open .top { transform: rotateX(0deg); }
.note .face, .note .back { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; border: 2.5px solid var(--ink); border-bottom: 0; border-radius: 12px 12px 0 0; }
.note .face { background: #fffaf0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px; background-image: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 23px, rgba(61, 111, 214, 0.12) 23px 24px); }
.note .face span { font-size: 15px; font-weight: 600; color: var(--ink-2); max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note .back { transform: rotateX(180deg); background: #efe5d0; border-bottom: 2.5px solid var(--ink); border-top: 0; border-radius: 0 0 12px 12px; box-shadow: inset 0 -16px 0 rgba(255, 255, 255, 0.25); }
.stampv { opacity: 0; transform: scale(1.8) rotate(-14deg); transition: opacity .15s, transform .35s cubic-bezier(.2, 1.6, .4, 1); max-width: 92%; text-align: center; }
.note.shown .stampv { opacity: 1; transform: scale(1) rotate(-6deg); }
.stampv b { display: inline-block; padding: 4px 16px 6px; border: 4px solid var(--acc); border-radius: 14px; color: var(--acc-2); font: 700 clamp(26px, 8vmin, 46px)/1.15 var(--f-body); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.stampv b.d { font-family: var(--f-disp); font-weight: 400; letter-spacing: 0.04em; }
.stampv.miss b { border-color: var(--ink-3); color: var(--ink-3); border-style: dashed; }
.rv-acts { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: var(--s2); width: min(360px, calc(100% - 24px)); opacity: 0; transition: opacity .2s; }
.rv-acts.on { opacity: 1; }
.rv-acts .bt { flex: 1; height: 50px; font-size: 15px; }

/* 결과 가리기 (휴대폰 넘기기) */
.cover { position: absolute; inset: 0; z-index: 32; background: var(--paper); background-image: radial-gradient(circle at 1px 1px, rgba(31, 36, 64, 0.11) 1.1px, rgba(0, 0, 0, 0) 1.4px); background-size: 18px 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3); padding: var(--s5); text-align: center; opacity: 0; transition: opacity .2s; }
.cover.on { opacity: 1; }
.cover svg { width: 84px; height: 84px; }
.cover h3 { margin: 0; font: 400 26px/1.25 var(--f-disp); }
.cover p { margin: 0; color: var(--ink-2); font-size: 15px; }
.cover .go { width: min(300px, 100%); margin-top: var(--s2); }

/* 결과 모아 보기 */
.sum { position: absolute; inset: 0; z-index: 31; background: rgba(31, 36, 64, 0.5); display: flex; align-items: center; justify-content: center; padding: var(--s3); opacity: 0; transition: opacity .2s; }
.sum.on { opacity: 1; }
.sum-card { width: min(460px, 100%); max-height: 100%; display: flex; flex-direction: column; background: var(--card); border: 2.5px solid var(--ink); border-radius: var(--r3); box-shadow: 0 6px 0 var(--ink); overflow: hidden; }
.sum-h { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s2) var(--s2) var(--s4); border-bottom: 2px solid var(--ink); }
.sum-h h3 { margin: 0; flex: 1; font: 400 21px/1.2 var(--f-disp); }
.sum-b { overflow-y: auto; padding: var(--s2) var(--s4); flex: 1; min-height: 0; }
.sum-b ol { margin: 0; padding: 0; list-style: none; }
.sum-b li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: var(--s2); align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.sum-b li:last-child { border-bottom: 0; }
.sum-b li .k { font: 400 17px/1 var(--f-disp); color: var(--ink-3); }
.sum-b li .w { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sum-b li .r { font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--paper-2); white-space: nowrap; max-width: 52vw; overflow: hidden; text-overflow: ellipsis; }
.sum-b li.hit .r { background: var(--acc); color: var(--acc-ink); }
.sum-f { display: flex; gap: var(--s2); padding: var(--s3) var(--s4) var(--s4); border-top: 2px dashed var(--line-2); }
.sum-f .bt { flex: 1; min-width: 0; padding: 0 8px; }

/* ---------------------------------------------------------------- 순서 카드 */
.cards { position: absolute; inset: 0; display: grid; gap: var(--cg, 8px); grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-rows: var(--ch); align-content: center; overflow-y: auto; padding: 4px 4px 8px; }
.card { perspective: 700px; min-width: 0; }
.card .in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3, 1.3, .5, 1); }
.card.on .in { transform: rotateY(180deg); }
.card .bk, .card .fr { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; border: 2px solid var(--ink); border-radius: 10px; box-shadow: 0 3px 0 var(--ink); }
.card .bk { background: var(--acc); background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.22) 0 5px, rgba(0, 0, 0, 0) 5px 11px); }
.card .bk::after { content: ""; position: absolute; inset: 5px; border: 2px solid rgba(255, 252, 246, 0.85); border-radius: 6px; }
.card .fr { transform: rotateY(180deg); background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px; text-align: center; overflow: hidden; }
.card .fr b { font: 400 var(--nf, 30px)/1 var(--f-disp); color: var(--acc-2); }
.card .fr span { font-weight: 700; font-size: var(--tf, 15px); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card.first .fr { background: #fff3c4; }
.card.next .bk { outline: 3px solid var(--blue); outline-offset: 3px; }
.olist { position: absolute; inset: 0; overflow-y: auto; margin: 0; padding: 0 4px; list-style: none; columns: var(--oc, 1); column-gap: 18px; }
.olist li { display: flex; gap: 10px; align-items: baseline; padding: 6px 2px; border-bottom: 1px solid var(--line); break-inside: avoid; opacity: 0.2; transition: opacity .25s; }
.olist li.on { opacity: 1; }
.olist li b { font: 400 18px/1 var(--f-disp); color: var(--acc-2); min-width: 34px; }
.olist li span { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- 팀 */
.teams { position: absolute; inset: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(var(--tc, 2), minmax(0, 1fr)); grid-auto-rows: max-content; gap: 10px; align-content: start; padding: 2px 2px 8px; }
.team { border: 2px solid var(--ink); border-radius: var(--r2); background: var(--card); box-shadow: 0 3px 0 var(--ink); overflow: hidden; min-width: 0; }
.team h4 { margin: 0; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 2px solid var(--ink); background: var(--tcol); font-size: 15px; font-weight: 700; color: var(--tink, var(--ink)); }
.team h4 span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team h4 small { font-size: 12px; font-weight: 600; opacity: 0.85; }
.team ul { list-style: none; margin: 0; padding: 8px; display: flex; flex-wrap: wrap; gap: 6px; min-height: 44px; }
.mem { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--paper); font-weight: 600; font-size: 14px; max-width: 100%; }
.mem span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem.lead { border-color: var(--ink); background: #fff3c4; }
.mem.lead::before { content: "조장"; font-size: 11px; font-weight: 700; padding: 1px 5px; border-radius: 6px; background: var(--ink); color: var(--paper); }
.mem.in { animation: dealIn .38s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes dealIn { from { opacity: 0; transform: translateY(-14px) scale(0.6) rotate(-6deg); } to { opacity: 1; transform: none; } }
.team .ph { color: var(--ink-3); font-size: 13px; padding: 4px 2px; }

/* ---------------------------------------------------------------- 숫자 */
.tiles { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-rows: var(--th); gap: var(--tg, 10px); align-content: center; padding: 4px 4px 10px; overflow-y: auto; }
.tile { position: relative; display: flex; align-items: center; justify-content: center; border: 2.5px solid var(--ink); border-radius: 14px; background: var(--card); box-shadow: 0 4px 0 var(--ink); font: 400 var(--fs, 40px)/1 var(--f-disp); color: var(--ink); overflow: hidden; min-width: 0; letter-spacing: 0.01em; }
.tile::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(31, 36, 64, 0.08); }
.tile i { font-style: normal; position: relative; z-index: 1; }
.tile.roll { color: var(--ink-3); }
.tile.roll i { display: inline-block; animation: rollY .09s linear infinite; }
@keyframes rollY { from { transform: translateY(-6%); } to { transform: translateY(6%); } }
.tile.set { animation: tileSet .42s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes tileSet { 0% { transform: scale(1.12); background: #fff3c4; } 100% { transform: scale(1); } }
.tile.ph { color: var(--line-2); border-style: dashed; box-shadow: none; background: rgba(255, 252, 246, 0.6); font-size: calc(var(--fs, 40px) * 0.7); }
.tile .ord { position: absolute; left: 7px; top: 5px; font: 600 12px/1 var(--f-body); color: var(--ink-3); }
.nlist { position: absolute; inset: 0; overflow-y: auto; font-weight: 700; font-size: 16px; line-height: 2; word-spacing: 6px; padding: 4px; }
.nmeta { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; line-height: 22px; text-align: center; font-size: 13px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- 옆 판(설정·기록) */
.dr-side { position: absolute; z-index: 25; display: flex; flex-direction: column; background: var(--card); border: 2px solid var(--ink); border-radius: var(--r3); overflow: hidden; }
.dr.port .dr-side { left: 0; right: 0; bottom: 0; top: auto; height: min(86%, 700px); border-radius: var(--r3) var(--r3) 0 0; border-bottom: 0; border-left: 0; border-right: 0; transform: translateY(102%); transition: transform .32s var(--ease); box-shadow: 0 -10px 30px rgba(31, 36, 64, 0.18); }
.dr.port .dr-side.on { transform: translateY(0); }
.dr.port .dr-side:not(.on):not(.moving) { visibility: hidden; }
.ph { display: flex; align-items: center; border-bottom: 2px solid var(--ink); flex: none; }
.ph .tabs { border-bottom: 0; flex: 1; min-width: 0; }
.ph .ib { margin-right: 4px; }
.dr.land .ph .x { display: none; }
.pb { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--s3) var(--s3) var(--s4); }
.fset { display: flex; flex-direction: column; gap: var(--s3); }
.frow { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.frow > .lbl-s, .fcol > .lbl-s { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.fcol { display: flex; flex-direction: column; gap: 6px; }
.fcol textarea { min-height: 120px; font-size: 15px; }
.fnote { font-size: 13px; color: var(--ink-3); margin: 0; }
.fnote.warn { color: var(--acc-2); font-weight: 600; }
.fsep { border: 0; border-top: 2px dashed var(--line-2); margin: 2px 0; }
.lbl-s { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.seg.wrap { flex-wrap: wrap; border: 0; background: transparent; gap: 6px; overflow: visible; border-radius: 0; }
.seg.wrap button, .seg.wrap button + button { border: 2px solid var(--ink); border-radius: 999px; background: var(--card); height: 32px; }
.seg.wrap button[aria-pressed="true"] { background: var(--ink); }
.hi-list { list-style: none; margin: 0; padding: 0; }
.hi { padding: 8px 0; border-bottom: 1px solid var(--line); }
.hi .t { display: flex; gap: 8px; align-items: baseline; font-size: 12px; color: var(--ink-3); }
.hi .t b { font-size: 12px; font-weight: 700; color: var(--ink-2); padding: 1px 7px; border-radius: 6px; background: var(--paper-2); }
.hi p { margin: 2px 0 0; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.pane-h { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.pane-h .grow { flex: 1; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { height: 34px; padding: 0 12px; border-radius: 999px; border: 2px solid var(--ink); background: var(--card); font-weight: 600; font-size: 14px; color: var(--ink); }
.chip.used { opacity: 0.4; }

/* 발표 모드: 크게 */
.dr.present .dr-side, .dr.present .only-port, .dr.present #bShare, .dr.present #bSnd { display: none !important; }
.dr.present .quick { font-size: 18px; }
.dr.present .note .face span { font-size: 19px; }
.dr.present .stampv b { font-size: clamp(34px, 10vmin, 72px); }
#bPresent[aria-pressed="true"] { background: var(--ink); color: var(--paper); }