:root{color-scheme:dark;--gold:#fbd782;--navy:#091e40;--ice:#cfe6ff}
*{box-sizing:border-box}
html,body{margin:0;height:100%;width:100%;overflow:hidden}
body{font-family:system-ui,-apple-system,Segoe UI,Apple SD Gothic Neo,Noto Sans KR,sans-serif;color:#fff;background:#091d3a}
.page{width:100%;height:100dvh;padding:clamp(3px,1vh,9px);display:flex;align-items:stretch;justify-content:center;overflow:hidden}
.game-shell{width:min(1080px,100%);height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:5px}
.topbar{display:flex;flex-direction:column;gap:6px;padding:8px 10px;border:2px solid #f7d283;border-radius:21px;background:linear-gradient(140deg,rgba(7,28,64,.97),rgba(24,69,105,.95));box-shadow:0 5px 18px #0007;z-index:2}
.headerline{display:flex;justify-content:space-between;gap:8px;align-items:center}
.brand{display:flex;align-items:center;gap:8px;min-width:0}
h1{font-size:clamp(19px,3vw,32px);line-height:1.05;margin:0;color:#fff2b2;white-space:nowrap;text-shadow:0 2px 0 #815213,0 0 8px #ac8a2f}
.tag{font-size:clamp(9px,1.1vw,12px);color:#bcdefb;white-space:nowrap}
.controls{display:flex;justify-content:flex-end;gap:5px;flex-wrap:wrap}
.btn{border:1.5px solid #c7d4ec;border-radius:10px;background:linear-gradient(145deg,#365c8f,#162f59);color:white;font-size:clamp(11px,1.4vw,14px);font-weight:850;padding:7px 9px;min-height:36px;white-space:nowrap;cursor:pointer;touch-action:manipulation}
.btn.primary{background:linear-gradient(160deg,#ffe89c,#d6a04d);border-color:#fff4c7;color:#51300b}
.btn[aria-pressed="true"]{background:#e9ba60;color:#242e46}
.hud{display:grid;grid-template-columns:1fr 1fr minmax(138px,1fr);gap:7px}
.stat,.next-panel{border:1px solid #c2ad70;border-radius:12px;background:linear-gradient(160deg,#16375a,#091c3b);padding:5px 10px;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:7px}
.stat-label{font-size:clamp(10px,1.6vw,13px);font-weight:850;color:#bddbff}
.stat-value{font-size:clamp(18px,3vw,29px);font-variant-numeric:tabular-nums;font-weight:950;color:#fff7da;line-height:1}
.next-panel{justify-content:center}
.next-label{font-size:clamp(10px,1.6vw,13px);color:#dce9ff;font-weight:850}
#nextBallCanvas{width:36px;height:36px;flex-shrink:0}
#nextLabel{font-size:clamp(10px,1.6vw,13px);font-weight:900;color:#ffe7ab;white-space:nowrap}
.progress{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2px;align-items:center;padding:3px 5px;border:1px solid rgba(194,216,251,.32);border-radius:10px;background:#061a36d9}
.legend-item{display:grid;grid-template-rows:30px 13px;place-items:center;min-width:0;overflow:visible;color:#cfe6ff;font-weight:800}
.legend-item img{width:30px;height:30px;object-fit:contain;max-width:100%}.stage-center{position:relative;overflow:visible}.line-side-label{position:absolute;z-index:6;right:-8px;padding:7px 10px;border-radius:999px;background:linear-gradient(180deg,#ffefef,#ffc1c1);border:2px solid #ff7d7d;color:#6f1120;font-size:12px;font-weight:950;letter-spacing:.03em;white-space:nowrap;box-shadow:0 6px 14px rgba(0,0,0,.25),0 0 12px rgba(255,85,85,.2);pointer-events:none;transform:translate(100%,-50%)}.line-side-label.danger{background:linear-gradient(180deg,#fff4b0,#ff8f8f);color:#771119;box-shadow:0 0 18px rgba(255,74,74,.38),0 6px 14px rgba(0,0,0,.25)}
.legend-number{display:none}.legend-item span{font-size:clamp(8px,1.1vw,10px);white-space:nowrap;letter-spacing:-.06em}
.game-wrap{min-height:0;position:relative;display:flex;flex-direction:column;gap:3px;padding:6px;border:2px solid #ffe2a1;border-radius:18px;overflow:hidden;
background-image:linear-gradient(180deg,rgba(7,30,67,.14),rgba(3,21,46,.52)),url(assets/ball-merge-media/c30528b26a66c45a.webp);background-position:center;background-size:cover;background-repeat:no-repeat;box-shadow:inset 0 0 0 3px #fff3,0 5px 25px #0009}
.board-head{display:flex;justify-content:space-between;gap:8px;align-items:center;min-height:20px;padding:0 6px;background:#062548ba;border-radius:8px;font-size:11px;color:#edeeff}
.drop-guide{color:#ffebbe;font-size:10px}
.play-area{position:relative;margin:0 auto;flex:1 1 auto;min-height:0;width:min(100%,560px);overflow:hidden;border:4px solid #f9d591;border-radius:18px;
background:linear-gradient(135deg,rgba(203,245,255,.24),rgba(18,73,122,.18) 50%,rgba(1,19,44,.54));box-shadow:inset 0 0 0 3px #e0f4ff91,inset 8px 0 20px #6cd7ff38,inset -8px 0 20px #6cd7ff38,0 10px 25px #0008}
.play-area::after{display:none!important;content:none!important;background:none!important}
#gameCanvas{display:block;width:100%;height:100%;touch-action:none}
.pointer{display:none!important;position:absolute;top:2px;left:50%;z-index:2;pointer-events:none;transform:translateX(-50%);width:21px;height:14px}
.pointer:before{content:"";display:block;margin:0 auto;border-left:9px solid transparent;border-right:9px solid transparent;border-top:13px solid #ffe597;filter:drop-shadow(0 2px 2px #0009)}
.drop-line{display:none}
.overlay{display:none;position:absolute;inset:0;z-index:5;align-items:center;justify-content:center;background:#021025b0;padding:12px}
.overlay.show{display:flex}
.dialog{width:min(330px,98%);border-radius:18px;border:2px solid #fee1a1;padding:18px;background:linear-gradient(150deg,#16416e,#0b1d3a);box-shadow:0 8px 22px #0008;text-align:center}
.dialog h2{font-size:26px;color:#ffe59b;margin:0 0 10px}
.dialog p{color:#e8f3ff;font-size:13px}
.result-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.result-stats .card{background:#0d2b4d;border-radius:12px;padding:8px}
.result-stats h3{font-size:12px;font-weight:750;margin:0 0 5px;color:#b4dcfc}
.result-stats .stat-value{font-size:23px}
.toast{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:9;opacity:0;background:#10284ff0;border-radius:999px;padding:8px 14px;transition:opacity .2s;font-size:13px}
.toast.show{opacity:1}
.footer{height:15px;flex-shrink:0;text-align:center;font-size:10px;color:#b6d0eb}
body.mirrored #gameCanvas{transform:scaleX(-1)}
body.expanded .game-shell{width:min(1500px,100%)}
body.expanded .play-area{width:min(100%,750px)}
@media(max-width:700px){
 .tag{display:none}
 .headerline{align-items:flex-start}
 .brand{flex:0 0 auto;padding-top:5px}
 .topbar{padding:5px;gap:4px}
 .controls{max-width:none;flex-wrap:nowrap;gap:2px}
 .btn{min-height:30px;padding:5px 6px;font-size:10px;border-radius:8px}
 .hud{grid-template-columns:1fr 1fr minmax(122px,1fr);gap:4px}
 .stat,.next-panel{padding:4px 5px;border-radius:9px}
 .stat{flex-direction:column;gap:1px;justify-content:center}
 .stat-value{font-size:18px}
 #nextBallCanvas{width:28px;height:28px}
 .legend-item{grid-template-rows:25px 12px}
 .legend-item img{height:25px;width:25px}
 .legend-item .legend-name{display:none}.legend-item .legend-number{display:block;font-size:9px;color:#f6e2a1}
 .progress{padding:1px 2px;gap:1px}
 .game-wrap{padding:4px;border-radius:13px}
 .play-area{border-width:3px;border-radius:13px}
 .board-head{min-height:16px;font-size:10px}
 .drop-guide{display:none}
}
@media(max-width:360px){
 .brand h1{font-size:18px}
 .controls{max-width:none}
 .btn{font-size:9px;padding:4px 4px}
 .hud{grid-template-columns:.8fr .8fr 1.3fr}
 .stat-label{font-size:9px}
 .next-panel{gap:2px}
 .next-label{font-size:9px}
 #nextLabel{font-size:10px}
 .legend-item img{height:23px;width:23px}
 .legend-item .legend-number{font-size:9px}
}
@media(max-height:480px){
 .page{padding:2px}.topbar{padding:3px;gap:2px}
 .headerline{align-items:center}
 .btn{min-height:27px;padding:3px 5px}
 .hud{max-height:40px}.stat,.next-panel{padding:2px 6px}
 .progress{display:none}.board-head{min-height:15px}
 .footer{display:none}.game-wrap{padding:2px}
}

/* 공을 식별할 수 있도록 스프라이트와 실명 라벨을 함께 표시한다. */
.progress{grid-template-columns:repeat(11,minmax(0,1fr));padding:5px 7px;gap:4px;}
.legend-item{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;grid-template-rows:none;padding:2px 1px;border:1px solid #9dbbd94f;border-radius:9px;min-height:54px;background:#04193275;}
.legend-item img{height:34px;width:34px;max-width:100%;object-fit:contain;filter:drop-shadow(0 2px 3px #0009)}
.legend-item .legend-name{font-size:clamp(9px,1vw,12px);line-height:1.12;color:#f4f6ff;white-space:nowrap;font-weight:900;letter-spacing:-.04em;display:block;}
.legend-item .legend-number{display:none!important}
.next-panel{min-width:0;gap:6px;}
.next-panel #nextLabel{white-space:nowrap;font-size:clamp(12px,1.3vw,16px);color:#fff5b4;}
#nextBallCanvas{width:44px;height:44px;}
@media(max-width:700px){
 .progress{grid-template-columns:repeat(6,minmax(0,1fr));gap:2px;padding:2px 3px;}
 .legend-item{min-height:38px;gap:1px;padding:1px;border-radius:6px;}
 .legend-item img{width:27px;height:27px;}
 .legend-item .legend-name{font-size:clamp(8px,2.5vw,10px);line-height:1;}
 .next-panel .next-label{display:none}
 #nextBallCanvas{height:41px;width:41px}
 .next-panel #nextLabel{font-size:clamp(11px,3vw,14px)}
 .stat{gap:1px}
 .board-head{font-size:clamp(10px,2.9vw,13px);font-weight:800;}
}
@media(max-width:360px){
 .legend-item{min-height:34px}
 .legend-item img{width:24px;height:24px}
 .legend-item .legend-name{font-size:8px}
 #nextBallCanvas{width:36px;height:36px}
 .next-panel #nextLabel{font-size:11px}
}
@media(max-height:480px){
 .progress{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));padding:1px;gap:1px;}
 .legend-item{min-height:28px;gap:0;padding:0;border:0}
 .legend-item img{height:19px;width:19px}
 .legend-item .legend-name{font-size:7px}
}

/* 실제 조작 버튼, 점수, 공 프리뷰는 이미지가 아닌 HTML/Canvas. */
body{background:radial-gradient(circle at 55% 0,#386989 0,#142d55 60%,#071b30 100%)}
.topbar{
 background:linear-gradient(180deg,rgba(96,53,29,.97),rgba(55,32,24,.96));
 border-color:#fbe6a9;
 box-shadow:inset 0 2px 0 #fff2,0 8px 22px #071526ad;
}
h1{color:#ffe8a0;text-shadow:0 3px 1px #44210e,0 0 12px #f1b65788}
.tag{color:#ffe0aa}
.stat,.next-panel{background:linear-gradient(150deg,#fdf0c9,#efc88a);border-color:#fff3d6;box-shadow:inset 0 2px 0 #fff9e0,0 3px 7px #1e110b99}
.stat-label,.next-label{color:#664129}
.stat-value{color:#4b2513;text-shadow:0 1px 0 #fff7dd}
.next-panel #nextLabel{color:#643a1f}
.progress{background:linear-gradient(150deg,#7d5137,#4a302a);border:1px solid #e9bb77}
.legend-item{background:linear-gradient(170deg,#241b2599,#402b2ccc);border-color:#d7ac7277}
.legend-item .legend-name{color:#ffefca}
.btn{background:linear-gradient(170deg,#fff3cf,#d9ae70);border-color:#fff5d1;color:#482e20;box-shadow:inset 0 1px 0 #fff8,0 3px 7px #29171088}
.btn.primary{background:linear-gradient(180deg,#f7dc7c,#d4a240);color:#472308}
.btn[aria-pressed="true"]{background:#ddb763;color:#3a231b}
.game-wrap{border-color:#f2d397;box-shadow:0 12px 28px #0008,inset 0 0 0 3px #fff4}
.board-head{background:#4e301edc;color:#fff1d5}
.drop-guide{color:#fff0d3}
.play-area{border:5px solid #f2ca78;border-radius:15px;box-shadow:inset 0 0 0 3px #ffffffa8,inset 0 10px 18px #fff8,inset 6px 0 18px #8be4ff70,inset -6px 0 18px #8be4ff70,0 9px 20px #2a190f88}
.pointer{display:none!important}
@media(max-width:700px){.play-area{border-width:3px}.stat-value{font-size:18px}}

/* 실제 게임 조작 UI는 HTML, 학교 체육관은 놀이 공간 배경으로만 사용한다. */
.game-wrap{background-image:linear-gradient(180deg,rgba(5,19,38,.18),rgba(3,13,27,.21)),url("assets/ball-merge-media/2b55b77bf4140ff1.webp")!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important}
/* 실제 충돌 폭을 좁힌 작은 체육관 게임통. 경기장 외 장식 영역은 충돌 판정에서 제외한다. */
.play-area{width:min(100%,340px)!important;max-height:min(100%,520px)!important;flex:1 1 auto!important;margin:auto!important}
body.expanded .play-area{width:min(100%,390px)!important;max-height:min(100%,570px)!important}
.play-area{background:linear-gradient(180deg,rgba(162,230,255,.13),rgba(255,243,211,.12))!important}
/* 하단에 출력하던 임시 버전명은 사용자 요구에 따라 제거한다. */
.footer{display:none!important}
/* 탭을 더 만들지 않고 기존 게임처럼 상단 하나의 실제 랭킹 버튼을 노출한다. */
.rank-window{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;background:rgba(2,12,29,.8);padding:12px;backdrop-filter:blur(6px)}
.rank-window.open{display:flex}
.rank-panel{width:min(450px,100%);max-height:min(88dvh,690px);overflow:auto;border:2px solid #fbd990;border-radius:18px;background:linear-gradient(180deg,#133968,#0a1b39);box-shadow:0 16px 44px #000b;padding:17px;color:#fff}
.rank-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px}
.rank-head h2{margin:0;font-size:21px;color:#fff0b9}
.rank-close{cursor:pointer;background:#efc56e;color:#3a2411;border:0;border-radius:10px;padding:7px 12px;font-weight:900;font-size:14px;min-height:36px}
.rank-tabs{display:flex;gap:7px;margin-bottom:10px}
.rank-tab{flex:1;border:1px solid #688fbd;background:#193a66;color:#d6e8ff;padding:10px 5px;border-radius:10px;font-weight:850;cursor:pointer}
.rank-tab.selected{background:#ffdb80;color:#412a12;border-color:#ffeabb}
.rank-note{font-size:12px;color:#bfd3ef;margin:8px 0}
.rank-table{display:grid;gap:6px;max-height:45dvh;overflow:auto}
.rank-item{display:grid;grid-template-columns:33px 1fr auto;gap:8px;align-items:center;padding:10px 8px;border:1px solid #5276a8;border-radius:10px;background:#102b50}
.rank-item.mine{border-color:#ffe28f;background:#284576}
.rank-num{font-size:17px;font-weight:950;text-align:center;color:#ffdf83}
.rank-name{font-size:13px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-points{font-size:14px;font-weight:900;color:#fff0a8;font-variant-numeric:tabular-nums}
.rank-mine{margin-top:11px;padding:10px;border-radius:10px;background:#092344;border:1px solid #5a83b5;font-size:12px;color:#dceaff}
@media(max-width:700px){.play-area{width:min(100%,285px)!important;max-height:min(100%,485px)!important}.controls{gap:2px}.btn{padding:5px 5px}.rank-panel{padding:12px}}
@media(max-width:350px){.play-area{width:min(100%,270px)!important;max-height:min(100%,445px)!important}.btn{font-size:9px;padding:4px 3px}}
@media(max-height:500px){.play-area{max-height:100%!important}.rank-panel{max-height:95dvh}}

/* 제한선의 실제 공 접촉으로 시작하는 5초 카운트다운. 공이 모두 내려오면 취소한다. */
.line-countdown{position:absolute;z-index:4;top:5px;right:5px;display:flex;align-items:center;justify-content:center;gap:4px;padding:5px 9px;border:2px solid #ffafaf;border-radius:12px;background:#661829eb;color:#fff9e2;font-size:clamp(13px,2.9vw,18px);font-weight:950;box-shadow:0 0 14px #fe6c6699;pointer-events:none;font-variant-numeric:tabular-nums}
.line-countdown[hidden]{display:none!important}
.play-area.line-danger{border-color:#ff7f7f!important;box-shadow:inset 0 0 0 3px #ffb6b66b,0 0 14px #ff4a4a88!important}
/* 편하게 떨어뜨려도 높은 점수가 나오던 과도한 빈 공간을 줄임. */
.play-area{max-height:min(100%,500px)!important}
body.expanded .play-area{max-height:min(100%,550px)!important}
@media(max-width:700px){.play-area{max-height:min(100%,455px)!important}.progress{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}.legend-item{grid-template-rows:26px 13px}.legend-item img{width:24px;height:24px}.line-side-label{right:8px;transform:translateY(-50%);font-size:11px;padding:5px 8px}}
@media(max-width:350px){.play-area{max-height:min(100%,410px)!important}.legend-item img{width:22px;height:22px}.legend-item span{font-size:8px}}
@media(max-height:500px){.play-area{max-height:100%!important}}

/* v20261022_1747: legend moved below play area, basket half style */
.progress-bottom{margin-top:6px;padding:5px 6px;background:linear-gradient(180deg,rgba(110,63,32,.92),rgba(59,34,18,.98))!important;border:2px solid #e8ba79;border-radius:16px;box-shadow:0 8px 18px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.18);align-self:center;width:min(100%,560px)}
.game-wrap{gap:5px!important;padding:6px!important;background-image:linear-gradient(180deg,rgba(5,19,38,.18),rgba(3,13,27,.21)),url("assets/ball-merge-media/2b55b77bf4140ff1.webp")!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important}
.play-area{position:relative;overflow:visible!important;border-top:0!important;border-left:7px solid #be7e40!important;border-right:7px solid #be7e40!important;border-bottom:12px solid #8f5823!important;border-radius:0 0 34px 34px!important;background:linear-gradient(180deg,rgba(184,230,255,.18),rgba(255,250,236,.08))!important;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),inset 0 -14px 25px rgba(98,48,12,.22),0 12px 28px rgba(15,13,10,.36)!important}
.play-area::before{content:"";position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);width:94%;height:34px;border-radius:0 0 34px 34px;background:linear-gradient(180deg,#efcf93,#b3722d 62%,#6d4118);box-shadow:0 10px 18px rgba(0,0,0,.28),inset 0 2px 0 rgba(255,255,255,.45);pointer-events:none;z-index:2}
.play-area::after{content:"";position:absolute;left:9px;right:9px;bottom:9px;height:34%;border-radius:0 0 26px 26px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0)),repeating-linear-gradient(120deg,rgba(255,238,210,.17) 0 10px,rgba(0,0,0,0) 10px 20px),repeating-linear-gradient(60deg,rgba(255,238,210,.16) 0 10px,rgba(0,0,0,0) 10px 20px);opacity:.55;pointer-events:none;z-index:1}
#gameCanvas{position:relative;z-index:0}
.overlay,.pointer,.line-countdown,.drop-line{z-index:3}
@media(min-width:701px){.play-area{width:min(100%,338px)!important;max-height:min(100%,385px)!important}body.expanded .play-area{width:min(100%,388px)!important;max-height:min(100%,420px)!important}.progress-bottom{width:min(100%,560px)}}
@media(max-width:700px){.play-area{width:min(100%,282px)!important;max-height:min(100%,322px)!important;border-left-width:6px!important;border-right-width:6px!important;border-bottom-width:10px!important}.progress-bottom{width:min(100%,100%);padding:3px 4px;border-radius:12px;margin-top:4px}.legend-item img{width:26px;height:26px}.legend-item .legend-name{font-size:clamp(8px,2.4vw,9px)}}
@media(max-width:350px){.play-area{width:min(100%,268px)!important;max-height:min(100%,294px)!important}.legend-item img{width:22px;height:22px}.legend-item .legend-name{font-size:7px}}
@media(max-height:500px){.play-area{max-height:min(100%,290px)!important}.progress-bottom{padding:2px 3px}.legend-item{min-height:30px}.legend-item img{width:21px;height:21px}.legend-item .legend-name{font-size:7px}}


/* 실제 U자형 체육관 볼바구니 v2: 게임과 공 리스트를 함께 중앙 배치 */
.game-wrap{display:flex!important;flex-direction:column!important;gap:5px!important;min-height:0;overflow:hidden!important;background-position:center center!important}
.stage-center{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:100%;padding:5px 0 7px}
.stage-center .play-area{flex:0 1 auto!important;overflow:hidden!important;margin:0!important;position:relative;max-height:none!important;width:min(100%,346px)!important;height:min(65dvh,424px)!important;background:linear-gradient(180deg,rgba(170,229,252,.07),rgba(203,237,248,.025) 58%,rgba(189,236,255,.13))!important;border:0!important;border-radius:18px 18px 48% 48% / 16px 16px 18% 18%!important;box-shadow:0 15px 32px rgba(0,13,28,.32), inset 0 0 0 2px #d7e9f488!important;isolation:isolate}
.stage-center .play-area::before,.stage-center .play-area::after{display:none!important}
.basket-frame{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible;filter:drop-shadow(0 5px 7px #0818275d)}
.stage-center #gameCanvas{position:relative;z-index:1}
.stage-center .progress-bottom{margin:0!important;width:min(100%,580px);flex:0 0 auto;align-self:center;border-radius:12px;background:linear-gradient(155deg,rgba(24,62,89,.96),rgba(7,35,65,.98))!important;border:2px solid #bcd8e8;box-shadow:inset 0 1px 0 #f4faff6b,0 6px 15px #101c3388;padding:5px!important}
.stage-center .legend-item{background:linear-gradient(180deg,#1f496688,#0a294aee)!important;border:1px solid #8daebc77!important}
.stage-center .legend-name{color:#eef7ff!important}
.stage-center .overlay{z-index:5}
.stage-center .line-countdown{z-index:6}
.stage-center .play-area.line-danger{box-shadow:0 0 0 3px #fa737bcc,0 15px 25px #0008!important}
body.expanded .stage-center .play-area{width:min(100%,398px)!important;height:min(66dvh,454px)!important;max-height:none!important}
@media(max-width:700px){
 .stage-center{gap:9px;padding:1px 0}
 .stage-center .play-area{width:min(100%,300px)!important;height:min(53dvh,392px)!important;max-height:none!important}
 .stage-center .progress-bottom{width:min(100%,380px);padding:3px!important;gap:3px!important;grid-template-columns:repeat(6,minmax(0,1fr));}
 .stage-center .legend-item{min-height:43px;padding:1px;border-radius:7px}
 .stage-center .legend-item img{width:27px;height:27px}
 .stage-center .legend-item .legend-name{font-size:clamp(8px,2.5vw,10px)}
 .game-wrap{padding:5px!important}
}
@media(max-width:350px){
 .stage-center .play-area{width:min(100%,272px)!important;height:min(48dvh,330px)!important}
 .stage-center .legend-item{min-height:32px;gap:0}
 .stage-center .legend-item img{width:21px;height:21px}
 .stage-center .legend-item .legend-name{font-size:8px}
}
@media(max-height:500px){
 .stage-center{flex-direction:row;gap:8px}
 .stage-center .play-area{height:min(73dvh,315px)!important;width:min(54%,300px)!important;flex:0 1 auto!important}
 .stage-center .progress-bottom{width:min(44%,360px)!important;grid-template-columns:repeat(3,minmax(0,1fr));align-self:center!important}
 .stage-center .legend-item{min-height:29px}
 .stage-center .legend-item img{width:19px;height:19px}
 .stage-center .legend-item .legend-name{font-size:8px}
}

/* 제한선 안내가 바구니 내부에 들어가거나 잘리지 않도록 완전히 분리 */
.stage-center{position:relative!important;overflow:visible!important}
.stage-center .line-side-label{
  position:absolute!important;left:0;right:auto!important;top:0;
  z-index:12!important;display:flex;align-items:center;justify-content:center;
  padding:6px 9px!important;border:2px solid #fa8793!important;border-radius:10px!important;
  background:#401929f2!important;color:#ffe7e7!important;
  box-shadow:0 3px 10px #0009!important;font-size:clamp(10px,1vw,12px)!important;
  font-weight:900!important;letter-spacing:0!important;line-height:1.12!important;
  transform:translateY(-50%)!important;white-space:nowrap!important;pointer-events:none!important;
}
.stage-center .line-side-label.danger{background:#a8223af5!important;color:white!important;box-shadow:0 0 16px #ff626699,0 3px 10px #0008!important}
/* 바구니 철망/프레임은 항상 공 뒤에 그린다. 앞에 얹힌 흰색 막도 제거 */
.stage-center .play-area{isolation:isolate!important;overflow:hidden!important}
.stage-center .basket-frame{z-index:0!important;opacity:.94!important;pointer-events:none!important}
.stage-center #gameCanvas{z-index:2!important;position:relative!important}
.stage-center .play-area::before,.stage-center .play-area::after{display:none!important}
.stage-center .overlay{z-index:10!important}
/* 옆에 라벨 공간이 없는 모바일에서는 바구니 밖 위로 보내 글자를 보존 */
@media(max-width:700px){.stage-center .line-side-label{font-size:10px!important;padding:5px 8px!important}}

.line-side-label .label-compact{display:none}
@media(max-width:700px){
  .stage-center .line-side-label{width:29px!important;padding:3px 1px!important;font-size:8px!important;line-height:1.06!important;white-space:normal!important;transform:translateY(-50%)!important;border-radius:7px!important}
  .line-side-label .label-long{display:none!important}
  .line-side-label .label-compact{display:flex!important;flex-direction:column;align-items:center;gap:1px}
}
@media(max-width:350px){
  /* 좌측으로 여백을 옮겨 좁은 휴대전화에서도 제한선 라벨을 통 밖에 고정 */
  .stage-center .play-area{left:-13px!important}
}

/* 기본 상태에서 기존 확장 게임판 크기 사용. 한 화면 표시를 최우선으로 조절. */
.stage-center .play-area {
 width:min(100%,410px)!important;
 height:min(64dvh,454px)!important;
 max-height:none!important;
}
.stage-center .progress-bottom {
 grid-template-columns:repeat(12,minmax(0,1fr))!important;
 width:min(100%,630px)!important;
 padding:5px!important;
 gap:2px!important;
}
.stage-center .legend-item {min-height:51px!important}
.stage-center .legend-item img {height:30px!important;width:30px!important;max-width:100%!important}
.stage-center .legend-item .legend-name {font-size:clamp(8px,.78vw,11px)!important;letter-spacing:-.045em!important}
/* 제한선 글자는 바구니 바깥에 정상적인 가로형 배지로 표시. */
.stage-center .line-side-label,
.stage-center .line-side-label[data-position="side"] {
 display:flex!important;
 position:absolute!important;
 height:auto!important;
 width:max-content!important;
 max-width:none!important;
 white-space:nowrap!important;
 transform:translateY(-50%)!important;
 padding:6px 10px!important;
 font-size:12px!important;
 font-weight:900!important;
 line-height:1.15!important;
 letter-spacing:.015em!important;
 border-radius:9px!important;
}
.stage-center .line-side-label .label-long {display:inline!important;white-space:nowrap!important}
.stage-center .line-side-label .label-compact {display:none!important}
.stage-center .line-side-label[data-position="top"] {transform:translateY(-100%)!important}
@media(max-width:700px){
 .stage-center .play-area{width:min(100%,362px)!important;height:min(59dvh,486px)!important;}
 .stage-center .progress-bottom{grid-template-columns:repeat(6,minmax(0,1fr))!important;width:100%!important;gap:3px!important;padding:3px!important;}
 .stage-center .legend-item{min-height:42px!important;}
 .stage-center .legend-item img{height:26px!important;width:26px!important;}
 .stage-center .legend-item .legend-name{font-size:clamp(8px,2.35vw,10px)!important;}
 .stage-center .line-side-label{font-size:11px!important;padding:5px 8px!important;}
}
@media(max-width:350px){
 .stage-center .play-area{left:0!important;width:min(100%,296px)!important;height:min(58dvh,338px)!important;}
 .stage-center .legend-item{min-height:32px!important;}
 .stage-center .legend-item img{height:20px!important;width:20px!important;}
 .stage-center .legend-item .legend-name{font-size:8px!important;}
 .stage-center .line-side-label{font-size:10px!important;}
}
@media(max-height:500px){
 .stage-center .play-area{width:min(56%,360px)!important;height:min(75dvh,344px)!important;}
 .stage-center .progress-bottom{width:min(42%,370px)!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;}
 .stage-center .legend-item{min-height:30px!important;}
 .stage-center .legend-item img{height:19px!important;width:19px!important;}
 .stage-center .legend-item .legend-name{font-size:8px!important;}
}


/* Independent BGM and impact SFX mixer. Keep the existing BGM composition. */
.audio-mixer{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center;width:100%;padding:5px 8px;border:1px solid #678bbd88;border-radius:11px;background:#082146c7}
.mix-control{display:flex;align-items:center;gap:9px;min-width:0;font-size:12px;font-weight:900;color:#eaf4ff}
.mix-control span{min-width:92px;display:flex;justify-content:space-between;gap:5px;white-space:nowrap}
.mix-control b{color:#ffdd91;font-variant-numeric:tabular-nums}
.mix-control input{min-width:0;flex:1;accent-color:#ffb94d;height:24px;cursor:pointer;touch-action:pan-x}
.line-side-label[data-position="rail"]{left:auto;right:auto!important;top:auto;white-space:nowrap!important;writing-mode:horizontal-tb!important;transform:translateY(-50%) rotate(-90deg)!important;transform-origin:center!important;padding:4px 7px!important;font-size:10px!important;line-height:1.2!important;letter-spacing:0!important;max-width:none!important;z-index:9!important}
@media(max-width:700px){.audio-mixer{padding:3px 6px;gap:7px}.mix-control{flex-wrap:wrap;gap:0;align-content:center;font-size:11px}.mix-control span{width:100%;min-width:0}.mix-control input{width:100%;height:18px;flex:initial}.stage-center .line-side-label[data-position="rail"]{font-size:10px!important;padding:4px 7px!important}}
@media(max-height:500px){.audio-mixer{padding:2px 6px}.mix-control{flex-direction:row;flex-wrap:nowrap;gap:7px}.mix-control span{min-width:82px;width:auto}.mix-control input{flex:1;width:auto}.topbar{gap:3px!important}.stage-center .line-side-label[data-position="rail"]{font-size:9px!important}}

/* External, horizontal Game Over Line marker. It never rotates or covers the balls. */
.stage-center .line-side-label,
.stage-center .line-side-label[data-position="cap"],
.stage-center .line-side-label[data-position="side"]{
  box-sizing:border-box!important;
  position:absolute!important;
  display:flex!important;
  width:max-content!important;
  max-width:none!important;
  height:auto!important;
  white-space:nowrap!important;
  word-break:keep-all!important;
  writing-mode:horizontal-tb!important;
  text-orientation:mixed!important;
  transform:translateY(-50%)!important;
  z-index:18!important;
  padding:5px 9px!important;
  border:2px solid #ff9fa9!important;
  border-radius:9px!important;
  background:#6d2031f5!important;
  color:#fff8ed!important;
  font:900 11px/1.18 system-ui,-apple-system,"Noto Sans KR",sans-serif!important;
  letter-spacing:.015em!important;
  box-shadow:0 3px 9px #0009!important;
  pointer-events:none!important;
}
.stage-center .line-side-label[data-position="cap"]{
  transform:translateY(-100%)!important;
  background:#812538f7!important;
  font-size:clamp(9px,2.7vw,11px)!important;
  padding:4px 7px!important;
}
.stage-center .line-side-label .label-long{
  display:inline!important;
  white-space:nowrap!important;
  writing-mode:horizontal-tb!important;
}
.stage-center .line-side-label .label-compact{display:none!important}
.line-label-connector{
  position:absolute;z-index:15;width:0;
  border-right:2px dashed #ff8e9b;
  filter:drop-shadow(0 0 2px #ff7b8b);
  pointer-events:none;
}
.line-label-connector[hidden]{display:none!important}
/* Reserve just enough space above the bowl for the legible horizontal marker. */
@media(max-width:700px){
  .stage-center{padding-top:29px!important}
  .stage-center .line-side-label[data-position="cap"]{font-size:10px!important}
}
@media(max-width:350px){
  .stage-center{padding-top:25px!important}
  .stage-center .line-side-label[data-position="cap"]{font-size:9px!important}
}
@media(max-height:500px){
  .stage-center{padding-top:2px!important}
  .stage-center .line-side-label[data-position="cap"]{font-size:9px!important}
}

/* 가로가 넓고 세로가 짧은 화면에서 바구니가 상하로 잘리지 않도록 한다. */
@media(max-height:500px){
  .stage-center{min-height:0!important;align-items:center!important;justify-content:center!important}
  .stage-center .play-area{
    flex:0 1 auto!important;
    height:min(100%,218px)!important;
    max-height:100%!important;
  }
}

/* 가로 화면에서는 경고문과 단계 목록이 서로 겹치지 않게 한다. */
@media(max-height:500px) and (min-width:701px){
  .stage-center .progress-bottom{transform:translateY(38px)!important}
}

/* 게임오버 라인: 다른 위치 보정 및 연결선을 전부 폐기하고 선 위에 표시 */
.stage-center .play-area #lineSideLabel,
.stage-center .play-area #lineSideLabel[data-position="rail"],
.stage-center .play-area #lineSideLabel[data-position="cap"] {
  position:absolute!important;
  inset:auto 13px auto auto!important;
  top:var(--line-label-top, 45px)!important;
  bottom:auto!important;
  z-index:8!important;
  display:block!important;
  height:auto!important;
  width:max-content!important;
  max-width:calc(100% - 26px)!important;
  padding:3px 7px!important;
  margin:0!important;
  border:1px solid #ffb5c1!important;
  border-radius:6px!important;
  background:rgba(85,23,36,.90)!important;
  color:#fff!important;
  font:900 clamp(9px,2.5vw,11px)/1.25 system-ui,sans-serif!important;
  letter-spacing:.03em!important;
  white-space:nowrap!important;
  writing-mode:horizontal-tb!important;
  text-orientation:mixed!important;
  transform:translateY(-100%)!important;
  text-shadow:0 1px 2px #260812!important;
  pointer-events:none!important;
  box-shadow:0 2px 5px rgba(0,0,0,.3)!important;
}
.line-label-connector{display:none!important}
/* 버튼을 누를 때만 해당 음량 슬라이더를 보이고 레이아웃은 움직이지 않는다. */
.topbar{position:relative!important;z-index:30!important;overflow:visible!important}
.audio-mixer{position:absolute!important;left:50%!important;top:calc(100% + 5px)!important;transform:translateX(-50%)!important;z-index:50!important;display:block!important;width:min(290px,calc(100vw - 20px))!important;max-width:none!important;padding:0!important;border:0!important;background:transparent!important;pointer-events:none!important}
.audio-mixer .mix-panel{width:100%;padding:12px;border:2px solid #efc87a;border-radius:13px;background:linear-gradient(155deg,#173b62f7,#07182ffb);box-shadow:0 11px 24px #0009;pointer-events:auto}
.audio-mixer .mix-panel[hidden]{display:none!important}
.audio-mixer .mix-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:13px;color:#fff1c2}
.audio-mixer .mix-mute{padding:5px 9px;border:1px solid #ffe4a2;border-radius:9px;background:#a9762b;color:#fff;font-size:11px;font-weight:850;cursor:pointer;white-space:nowrap;touch-action:manipulation}
.audio-mixer .mix-control{display:flex!important;align-items:center!important;flex-wrap:nowrap!important;gap:8px!important;font-size:12px!important;min-height:30px!important}
.audio-mixer .mix-control span{display:flex!important;justify-content:space-between!important;min-width:86px!important;width:86px!important}
.audio-mixer .mix-control input{flex:1!important;width:auto!important;min-width:0!important;height:28px!important;touch-action:pan-x!important}
@media(max-width:350px){.audio-mixer{width:min(275px,calc(100vw - 12px))!important}.audio-mixer .mix-panel{padding:9px!important}}


/* 공 진화 순서: 아이콘과 이름을 가리지 않는 단계 간 화살표 */
.stage-center .progress-bottom .legend-item{position:relative!important;overflow:visible!important;z-index:calc(20 - var(--stage-index,0))!important}
.stage-center .progress-bottom .legend-item .evo-arrow{
  position:absolute;top:15px;right:-10px;z-index:8;
  display:flex;justify-content:center;align-items:center;
  width:15px;height:16px;border:1px solid #ffd87f;border-radius:6px;
  background:#1a3955;
  font:900 13px/1 system-ui,sans-serif;
  color:#ffe18a;text-shadow:0 1px 1px #162638;
  filter:drop-shadow(0 1px 2px #071421cb);
  pointer-events:none;white-space:nowrap;
}
@media(max-width:700px){
  .stage-center .progress-bottom .legend-item .evo-arrow{top:13px;right:-9px;font-size:11px;width:12px;height:14px;border-radius:5px}
  .stage-center .progress-bottom .legend-item:nth-child(6n) .evo-arrow{display:none}
}
@media(max-width:350px){
  .stage-center .progress-bottom .legend-item .evo-arrow{top:10px;right:-7px;font-size:9px;width:10px;height:12px;border-radius:4px}
}
@media(max-height:500px) and (min-width:701px){
  .stage-center .progress-bottom .legend-item .evo-arrow{top:10px;right:-7px;font-size:9px;width:10px;height:12px;border-radius:4px}
  .stage-center .progress-bottom .legend-item:nth-child(3n) .evo-arrow{display:none}
}

/* 메인 이동 버튼은 기존 컨트롤과 별개인 실제 링크다. */
.home-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none!important;background:linear-gradient(145deg,#355878,#102944)!important;border-color:#adcee3!important;color:#f8fcff!important}
@media(max-width:700px){.controls{gap:3px!important}.controls .btn{padding:5px 6px!important;min-height:30px!important;font-size:clamp(9px,2.7vw,12px)!important}.headerline{gap:5px!important}}
@media(max-width:350px){.controls .btn{padding:4px 5px!important;font-size:9px!important}}

/* 게임오버 라인의 글씨는 공 스프라이트보다 뒤에 보이도록 표시 순서만 수정. */
.stage-center .play-area #lineSideLabel,
.stage-center .play-area #lineSideLabel[data-position="rail"],
.stage-center .play-area #lineSideLabel[data-position="cap"] {
  z-index:1!important;
}
/* 빨간 점선은 기존 캔버스에서 공보다 먼저 그려지고, 공은 글씨를 덮는다. */
.stage-center .play-area #gameCanvas {
  position:relative!important;
  z-index:2!important;
}

/* 자체 홍보를 선택적으로 30초 시청한 뒤 게임 아이템을 한 번 사용하는 창. */
.reward-action{background:linear-gradient(145deg,#6656b9,#423880)!important;border-color:#f1d48b!important}
.reward-layer[hidden],.reward-screen[hidden]{display:none!important}
.reward-layer{position:fixed;inset:0;z-index:2500;display:flex;align-items:center;justify-content:center;padding:12px;background:rgba(2,13,32,.92);backdrop-filter:blur(5px)}
.reward-panel{width:min(460px,100%);max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;padding:16px;border-radius:18px;border:2px solid #f5d998;background:linear-gradient(145deg,#173f6b,#0a1b39);box-shadow:0 16px 48px #000a;color:#f6faff;text-align:center}
.reward-panel h2{font-size:clamp(19px,4vw,25px);color:#ffe9a7;margin:3px 0 6px}
.reward-note{font-size:12px;line-height:1.5;color:#daebff;margin:7px auto 12px}
.reward-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.reward-choice{display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;min-height:66px;border:1px solid #a4c9ed;border-radius:11px;background:#204572;color:#fff;padding:8px 5px;cursor:pointer;touch-action:manipulation}
.reward-choice b{font-size:14px}.reward-choice span{font-size:11px;color:#deedff;line-height:1.2}
.reward-choice:disabled{opacity:.42;cursor:not-allowed}
.reward-cancel{border:1px solid #a4c3db;border-radius:10px;background:#193553;color:#eaf3ff;font-weight:850;padding:9px 14px;margin-top:12px;cursor:pointer;touch-action:manipulation}
.reward-tag{font-size:11px;font-weight:900;color:#ffeaa9;letter-spacing:.05em}
.reward-banner{width:100%;display:block;max-height:min(36vh,245px);object-fit:contain;border-radius:11px;border:1px solid #8fb9dd;background:#102d4a}
.reward-sponsor{display:block;font-size:11px;color:#b9dcfa;margin:7px 0}
.reward-sponsor a{color:#ffe59d;text-underline-offset:3px}
.reward-count{font-size:17px;font-weight:950;color:#ffe4a7;min-height:26px;font-variant-numeric:tabular-nums}
.reward-close{display:block;margin:8px auto 0;border-radius:12px;border:2px solid #ffe7b2;background:linear-gradient(145deg,#ffe59e,#d99d4d);color:#332812;font-size:15px;font-weight:950;padding:11px 22px;min-width:128px;cursor:pointer;touch-action:manipulation}
.reward-close:disabled{opacity:.52;filter:grayscale(.6);cursor:default}
.reward-fallback{padding:12px;color:#ffeecb;font-size:13px}
.reward-fallback[hidden]{display:none!important}
#playArea.dart-selecting #gameCanvas{cursor:crosshair!important}
#playArea.promo-shaking{transform-origin:50% 52%;transition:none!important;will-change:rotate;}
#playArea.bowling-selecting #gameCanvas{cursor:crosshair!important;}
@media(max-width:700px){.reward-panel{padding:12px}.reward-choice{min-height:58px}.reward-choice b{font-size:13px}.reward-banner{max-height:26vh}}
@media(max-height:520px){.reward-panel{padding:8px 12px}.reward-panel h2{font-size:17px;margin:0}.reward-note{margin:3px 0 5px}.reward-banner{max-height:24vh}.reward-choice{min-height:47px}.reward-cancel{margin-top:6px;padding:6px 12px}.reward-close{padding:7px 12px}}
@media(prefers-reduced-motion:reduce){#playArea.promo-shaking{transition:none!important}}
/* 재생 상태에 따라 카운트하는 표시형 유튜브 홍보 영상. */
.reward-video-panel{width:min(650px,100%)}
.reward-promo-media{display:grid;grid-template-columns:minmax(210px,.95fr) minmax(0,1fr);gap:12px;align-items:center;margin:8px 0}
.reward-youtube-card,.reward-banner-card{min-width:0;display:flex;align-items:center;flex-direction:column;gap:7px}
.reward-media-label{font-size:12px;font-weight:900;color:#ffe8a5;line-height:1.3}
.reward-video-frame{width:min(100%,255px);height:310px;min-width:200px;min-height:200px;overflow:hidden;border:1px solid #92c9ee;border-radius:12px;background:#080e1b}
.reward-video-frame iframe{display:block;width:100%;height:100%;border:0;background:#081021}
.reward-video-link{color:#c8e8ff;font-size:12px;font-weight:850;text-underline-offset:3px}
.reward-reserve-link{display:flex;align-items:center;justify-content:center;gap:8px;width:min(100%,255px);min-height:42px;padding:9px 12px;border-radius:12px;border:1px solid #ffe49a;background:linear-gradient(125deg,#e33c22,#a9141d);color:#fff8dc;font-size:15px;font-weight:950;text-decoration:none;box-shadow:0 5px 16px #040b1970;touch-action:manipulation}
.reward-reserve-link:hover,.reward-reserve-link:focus-visible{filter:brightness(1.12);outline:2px solid #ffdb87;outline-offset:2px}
.reward-reserve-link span{font-size:16px}
.reward-youtube-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:13px;color:#cbe4fb;background:#080e1b;text-align:center;padding:12px}
.reward-banner-card .reward-banner{width:100%;height:auto;max-height:190px;object-fit:contain}
.reward-banner-card .reward-sponsor{line-height:1.55}
@media(max-width:620px){.reward-promo-media{grid-template-columns:1fr;gap:6px;margin:4px 0}.reward-media-label{font-size:11px}.reward-video-frame{width:min(100%,235px);height:242px}.reward-banner-card .reward-banner{max-height:85px}.reward-banner-card .reward-sponsor{margin:2px 0;font-size:10px}.reward-video-link{font-size:11px}.reward-reserve-link{min-height:40px;width:min(100%,235px);font-size:14px;padding:7px}.reward-video-panel .reward-note{margin:2px auto 5px}}
@media(max-width:350px){.reward-video-frame{width:205px;height:215px}.reward-reserve-link{width:205px}.reward-banner-card .reward-banner{max-height:72px}}
@media(max-height:590px){.reward-video-frame{height:215px}.reward-video-panel{padding:8px 12px}.reward-video-panel h2{font-size:17px}.reward-banner-card .reward-banner{max-height:67px}.reward-video-panel .reward-cancel{margin-top:5px}}

/* 아이템 패널은 게임판 왼쪽에 항상 표시하고, 영상 모달은 ▶ 획득을 눌렀을 때만 표시한다. */
.stage-center .item-shelf{position:absolute;z-index:15;left:clamp(6px,2.5vw,24px);top:46%;transform:translateY(-50%);width:clamp(138px,16vw,190px);padding:10px 8px;border:2px solid #f6d795;border-radius:16px;background:linear-gradient(160deg,#1a476bfa,#0b2345fb);box-shadow:0 9px 23px #0008;color:#fff;display:flex;flex-direction:column;gap:8px;}
.item-shelf-title{font-size:15px;font-weight:950;line-height:1.3;text-align:center;color:#ffe7a2;}
.item-shelf-title small{display:block;font-size:10px;color:#cbe3f7;font-weight:700;}
.item-row{display:grid;grid-template-columns:minmax(0,1fr) 43px;gap:5px;min-width:0;}
.item-use,.item-watch{cursor:pointer;border-radius:11px;border:1px solid #78b9dc;color:#fff;touch-action:manipulation;min-height:55px;font-weight:900;}
.item-use{display:flex;gap:4px;align-items:center;padding:6px 5px;background:linear-gradient(160deg,#245581,#0f2d54);}
.item-use.has-stock{border-color:#ffd488;background:linear-gradient(160deg,#32658a,#123e72);box-shadow:inset 0 0 0 1px #ffdf9177;}
.item-symbol{font-size:21px;flex:none;}.item-text{font-size:12px;line-height:1.25;display:flex;flex-direction:column;text-align:left;min-width:0;word-break:keep-all;}.item-text strong{margin-top:3px;color:#ffe7a4;font-size:16px;font-variant-numeric:tabular-nums;}
.item-watch{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px;font-size:19px;background:linear-gradient(150deg,#db6134,#a6292a);border-color:#fbd597;}
.item-watch .watch-caption{font-size:10px;}.item-use:disabled,.item-watch:disabled{opacity:.48;cursor:not-allowed;}.item-use:focus-visible,.item-watch:focus-visible{outline:3px solid #ffdf8d;outline-offset:2px;}
.item-shelf-note{font-size:10px;line-height:1.4;text-align:center;color:#d0e8ff;}
.reward-promo-media{grid-template-columns:1fr!important;display:flex!important;align-items:center!important;justify-content:center!important;margin:8px 0!important;}
.reward-video-panel{width:min(440px,100%)!important;}
.reward-video-frame{width:min(100%,252px)!important;height:min(42dvh,320px)!important;min-height:168px;}
.reward-youtube-card{width:100%;}.reward-reserve-link{margin:2px auto 0;}
@media(max-width:700px){
 .stage-center .item-shelf{left:3px;top:44%;width:84px;padding:6px 4px;border-radius:11px;gap:5px;}
 .item-shelf-title{font-size:11px;}.item-shelf-title small{font-size:8px;}
 .item-row{grid-template-columns:minmax(0,1fr) 24px;gap:2px;}
 .item-use,.item-watch{min-height:49px;border-radius:7px;}
 .item-use{padding:3px 1px;gap:0;flex-direction:column;justify-content:center;}
 .item-symbol{font-size:15px;}.item-text{font-size:9px;text-align:center;align-items:center;}.item-text strong{font-size:12px;margin-top:0;}
 .item-watch{font-size:13px;}.item-watch .watch-caption{font-size:8px;}
 .item-shelf-note{font-size:8px;}
 .stage-center .play-area{width:min(calc(100% - 112px),258px)!important;transform:translateX(46px)!important;}
}
@media(max-width:350px){.stage-center .item-shelf{width:76px}.stage-center .play-area{width:min(calc(100% - 102px),215px)!important;transform:translateX(40px)!important}.reward-video-frame{height:min(36dvh,220px)!important}}
@media(min-width:701px) and (max-width:850px){.stage-center .item-shelf{left:2px;width:134px}.stage-center .play-area{transform:translateX(25px)!important}}
@media(max-height:500px){.stage-center .item-shelf{top:50%;width:78px;padding:3px;gap:2px}.item-use,.item-watch{min-height:32px}.item-symbol{font-size:13px}.item-shelf-title small,.item-shelf-note{display:none}.stage-center .play-area{transform:none!important}.reward-video-frame{height:min(34dvh,170px)!important}}

.toast.item-help-active{bottom:clamp(48px,9dvh,95px);z-index:2550;width:min(92vw,440px);max-width:calc(100vw - 22px);white-space:normal;line-height:1.5;border-radius:13px;background:#122c52f7;border:1px solid #ffde8d;box-shadow:0 7px 25px #0007;text-align:center;font-weight:800;padding:12px 14px;font-size:13px;}
/* 아이템 이미지는 설명 전용이며 아이템 이름/수량 버튼만 사용합니다. */
.item-action{min-width:0;display:flex;align-items:stretch;gap:2px;background:linear-gradient(160deg,#245581,#0f2d54);border:1px solid #78b9dc;border-radius:11px;overflow:hidden;}
.item-action:has(.item-use.has-stock){border-color:#ffd488;}
.item-action .item-use{min-width:0;flex:1;border:0;background:transparent;box-shadow:none;justify-content:flex-start;}
.item-help{flex:0 0 35px;min-width:0;min-height:45px;background:#173d62;border:0;border-right:1px solid #78b9dc;color:white;cursor:pointer;font-size:20px;touch-action:manipulation;}
.item-help:focus-visible{outline:2px solid #ffe394;outline-offset:-2px;}
.item-sync-status{font-size:10px;text-align:center;color:#b8f3d2;line-height:1.4;}
.item-sync-status[data-state="offline"]{color:#ffe2a4;}
@media(max-width:700px){.item-action{flex-direction:column;gap:0;border-radius:7px}.item-help{flex:0 0 22px;min-height:22px;font-size:15px;border:0;border-bottom:1px solid #78b9dc}.item-action .item-use{padding:2px 1px;min-height:26px;justify-content:center}.item-sync-status{font-size:8px;line-height:1.15}}
@media(max-height:500px){.item-sync-status{display:none}.item-help{min-height:18px;flex-basis:18px}}

/* 이동 후 계속하기 / 새 판 선택. 광고 및 아이템 보관함과 독립된 진행상황 저장. */
#resumeOverlay{z-index:40!important;background:#06152fe9}
#resumeOverlay[hidden]{display:none!important}
#resumeOverlay .dialog{width:min(94%,365px);text-align:center;padding:20px 16px;background:linear-gradient(170deg,#183f67,#0b2342);border:2px solid #b2d9f9;box-shadow:0 18px 45px #0008;border-radius:18px}
#resumeOverlay .dialog h2{font-size:22px;margin:0 0 8px;color:#fff5ce}
#resumeOverlay .resume-subtitle{color:#e0ecf7;font-size:13px;line-height:1.55;margin:0 0 14px}
#resumeOverlay .resume-actions{display:flex;flex-direction:column;gap:9px}
#resumeOverlay .resume-actions .btn{min-height:45px;font-size:15px;font-weight:850;width:100%}
#resumeOverlay .resume-actions #resumeContinue{background:linear-gradient(160deg,#ffd475,#f5a52f);border-color:#fff0c4;color:#25201b}
#resumeOverlay .resume-actions #resumeFresh{background:#183c60;border:1px solid #8ab8db;color:#eefaff}
@media(max-width:350px){#resumeOverlay .dialog{padding:13px 9px}#resumeOverlay .dialog h2{font-size:19px}#resumeOverlay .resume-actions .btn{min-height:38px;font-size:13px}}