/* ═══════════════════════════════════════════════════════════════
Dragon Fortune Deluxe — v6 LIFT PATCH (v2: 릴 창 세로 확장 + 프레임 간섭 제거)
목적: (1) 릴 창 확대 (2) 화면 밝기 상향
사용법: index.html 에서 game.css 바로 "다음" 줄에 추가
← 이 줄
되돌리기: 위 한 줄만 삭제
═══════════════════════════════════════════════════════════════ */
/* ───── 1. 가로 여백 회수 → 심볼이 실제로 커지는 유일한 방법 ───── */
body{ padding:8px 4px 40px; }
.stage{ width:calc(100vw - 8px); max-width:620px; }
.machine{ padding:10px 8px; border-radius:18px; }
/* v2: 프레임이 바깥으로 나가 앉을 자리를 위아래 여백으로 확보 */
.screen{ margin:30px 4px 28px; padding:4px 8px; }
.grid{ gap:4px; }
/* v2: frame0.webp는 2.05:1로 그려져 위아래 테두리가 높이의 13%다.
세로로 늘어나면 테두리가 두꺼워져 첫/마지막 줄 심볼을 덮으므로,
프레임을 위아래로 36px씩 빼내 테두리가 릴 창 밖에 앉게 한다. */
.reel-frame{
left:-14px; top:-36px;
width:calc(100% + 28px); height:calc(100% + 72px);
}
/* 셀 높이 (v2: 위아래로 확장). 심볼은 가로 넘침 방지 */
:root{ --cellH:76px; }
@media(max-width:480px){ :root{ --cellH:74px; } }
@media(max-width:380px){ :root{ --cellH:64px; } }
@media(max-height:700px){ :root{ --cellH:60px; } }
.cell img{
width:calc(var(--cellH) * .92);
height:calc(var(--cellH) * .92);
max-width:96%; /* 셀보다 좁으면 가로에 맞춤 */
object-fit:contain;
filter:brightness(1.08) drop-shadow(0 3px 6px rgba(0,0,0,.6));
}
/* ───── 2. 세로 공간 회수 → 릴을 화면 위쪽으로 끌어올림 ───── */
/* 브랜드: 부제·구분선 제거, 제목 축소 (약 40px 회수) */
.brand{ margin-bottom:4px; }
.brand h1{ font-size:clamp(20px,5vw,32px); }
.brand .sub, .brand .rule{ display:none; }
.brand .hanzi{ font-size:clamp(44px,12vw,76px); }
/* 아이콘바 축소 */
.topbar{ margin:-2px 0 6px; }
.icon-btn{ width:32px; height:32px; font-size:15px; }
/* XP바 축소 */
.xp-wrap{ margin:0 2px 6px; font-size:10px; }
.xp-bar{ height:6px; }
/* next-unlock 은 momentum-card 와 내용이 중복 → 숨김 (약 34px 회수) */
.next-unlock{ display:none; }
/* 드래곤 파워: 준비됐을 때만 안내문 표시 (약 24px 회수) */
.dragon-power{ padding:5px 9px 6px; margin:0 0 6px; }
.dp-head{ font-size:9px; }
.dp-head img{ width:18px; height:18px; }
.dp-ready{ display:none; }
.dragon-power.ready .dp-ready{ display:block; }
/* 리텐션 독 축소 (약 16px 회수) */
.retention-dock{ margin:-2px 0 6px; gap:6px; }
.retention-btn{ min-height:40px; padding:5px 9px; gap:7px; }
.retention-btn b{ font-size:12px; }
/* 모멘텀 카드: 힌트 한 줄 제거 (약 20px 회수) */
.momentum-card{ margin:-2px 0 6px; padding:7px 10px 8px; }
#momentumHint{ display:none; }
/* 잭팟: 3줄 → 1줄 4칩 (약 62px 회수) */
.jackpots{ grid-template-columns:repeat(4,1fr); gap:4px; padding:6px; margin-bottom:8px; }
.jp{ flex-direction:column; gap:1px; padding:5px 4px; align-items:center; }
.jp.grand{ grid-column:auto; }
.jp .tag{ min-width:0; font-size:8px; letter-spacing:.1em; padding:1px 6px; }
.jp .amt{ flex:none; text-align:center; font-size:13px; }
.jp.grand .amt{ font-size:15px; }
.jp.major .amt, .jp.minor .amt, .jp.mini .amt{ font-size:12px; }
/* nameplate: 릴 위 공간 절약 */
.nameplate{ margin:-22px auto 8px; font-size:10px; padding:3px 18px; }
/* ───── 3. 밝기 — 중복된 검정 비네팅 3겹 중 2겹 완화 ───── */
/* 배경 오버레이 완화 */
body{
background:
linear-gradient(180deg, rgba(14,7,24,.30), rgba(11,6,18,.52) 52%, rgba(8,4,13,.74)),
url("../assets/bg/tex0.webp") center top / cover no-repeat,
#120a1c;
}
body::before{ opacity:.14; }
/* 스크린: 안쪽 검정 그림자 축소 + 뒤쪽 백라이트 추가 */
.screen{
background:
radial-gradient(120% 80% at 50% 46%, rgba(255,206,128,.10), transparent 72%),
#0d1210;
box-shadow: inset 0 0 18px rgba(0,0,0,.55);
border-color:rgba(232,182,76,.55);
}
/* 릴: 배경 명도 8% → 약 20%, 위아래 inset 그림자 완화 */
.reel{
background:
radial-gradient(110% 70% at 50% 45%, rgba(255,214,140,.09), transparent 70%),
linear-gradient(90deg,rgba(0,0,0,.22),transparent 14%,transparent 86%,rgba(0,0,0,.22)),
linear-gradient(180deg,#402a4a, #33203c 42%, #281831);
box-shadow: inset 0 6px 10px rgba(0,0,0,.28), inset 0 -6px 10px rgba(0,0,0,.28);
border-color:rgba(232,182,76,.38);
}
/* 릴 위아래 페이드: 26% .55 → 8% .20 (v2에서 한 번 더 완화) */
.reel::before, .reel::after{ height:8%; }
.reel::before{ background:linear-gradient(180deg,rgba(0,0,0,.20),transparent); }
.reel::after{ background:linear-gradient(0deg,rgba(0,0,0,.20),transparent); }
/* 유리 반사 조금 더 또렷하게 */
.glass{
background:linear-gradient(112deg,rgba(255,255,255,.14),transparent 22%,transparent 56%,rgba(255,255,255,.07) 68%,transparent 80%);
}
/* 셀 구분선 살짝 밝게 */
.cell{ border-bottom:1px solid rgba(232,182,76,.18); }
/* 당첨 시 나머지 심볼 암전 완화 (.38 → .60) — 포커스는 유지, 암전은 방지 */
.grid.haswin .cell:not(.hl) img{ filter:brightness(.60) saturate(.72); }
/* 당첨 셀 글로우 강화 */
@keyframes cellGlow{
from{ background:rgba(232,182,76,.16); }
to{ background:rgba(232,182,76,.44); box-shadow:inset 0 0 24px rgba(255,225,140,.7); }
}
/* ───── 4. 하단 여백 정리 ───── */
.control{ margin-top:10px; padding:10px 8px 12px; gap:8px; }
.spin-btn{ padding:13px 58px 12px; }
footer{ font-size:9px; }
/* ═══════════════════════════════════════════════════════════════
HOLD & SPIN — 보너스 연출 개선
문제: 코인이 CSS 원이라 릴의 실제 아트보다 품질이 떨어지고,
rotateY 회전이 폭 0의 선으로 붕괴하며,
마지막 칸이 정해진 순서라 극적인 순간이 없었다.
═══════════════════════════════════════════════════════════════ */
/* ── 코인: CSS 원 → 실제 coin.webp ── */
.hcoin{
background:none !important; border:0 !important; box-shadow:none !important;
position:relative; width:92%; height:92%;
display:grid; place-items:center;
filter:drop-shadow(0 4px 8px rgba(0,0,0,.6));
}
.hcoin img{
position:absolute; inset:0; width:100%; height:100%;
object-fit:contain; pointer-events:none;
}
.hcoin b{
position:relative; z-index:2;
font-family:'Cinzel',serif; font-weight:900;
font-size:clamp(11px,3vw,17px); line-height:1.05; text-align:center;
color:#fff8e2;
text-shadow:0 2px 3px rgba(60,32,0,.95), 0 0 8px rgba(0,0,0,.7);
}
/* 잭팟 티어는 같은 아트를 색으로 물들여 등급을 구분 */
.hcoin.tier b{ font-size:clamp(8px,2.2vw,12px); letter-spacing:.08em; }
.hcoin.tier.grand img{ filter:hue-rotate(-56deg) saturate(1.65) brightness(1.04); }
.hcoin.tier.minor img{ filter:hue-rotate(78deg) saturate(1.25); }
.hcoin.tier.mini img{ filter:hue-rotate(176deg) saturate(1.35); }
.hcoin.tier.grand{ filter:drop-shadow(0 0 14px rgba(224,72,79,.85)); }
.hcoin.tier.major{ filter:drop-shadow(0 0 14px rgba(232,182,76,.85)); }
.hcoin.tier.minor{ filter:drop-shadow(0 0 14px rgba(63,174,122,.8)); }
.hcoin.tier.mini { filter:drop-shadow(0 0 14px rgba(90,143,216,.8)); }
/* ── 회전: 각 칸이 릴처럼 세로로 흐르다 멈춘다 ── */
.hns-cell.rolling{ position:relative; overflow:hidden; }
.hstrip{
position:absolute; left:0; top:0;
width:100%; height:800%; /* 8칸짜리 미니 릴 */
display:flex; flex-direction:column;
transform:translateY(0);
will-change:transform; backface-visibility:hidden;
}
.hs-item{ height:12.5%; display:grid; place-items:center; }
.hs-item img{ width:88%; height:88%; object-fit:contain;
filter:drop-shadow(0 3px 5px rgba(0,0,0,.55)); }
/* 흐르는 동안만 살짝 눌러 속도감을 준다 (필터 미사용 — 모바일 안전) */
.hns-cell.rolling .hs-item img{ transform:scaleY(.94); opacity:.94; }
.rollcoin{ display:none; }
/* ── 마지막 한 칸: 조용히 지목만 한다 ──
이전에는 확대 + 밝은 섬광이라, 결과가 빈칸일 때 당첨된 것처럼 번쩍여서
거짓 신호로 읽혔다. 이제는 크기 변화와 섬광 없이 테두리만 은은히 숨쉰다. */
.hns-cell.final-tease{
border-color:rgba(232,182,76,.72);
box-shadow:0 0 14px rgba(232,182,76,.34), inset 0 0 12px rgba(232,182,76,.12);
animation:finalTease 1.25s ease-in-out infinite alternate;
z-index:3;
}
@keyframes finalTease{
from{ border-color:rgba(232,182,76,.52);
box-shadow:0 0 10px rgba(232,182,76,.24), inset 0 0 9px rgba(232,182,76,.08); }
to { border-color:rgba(232,182,76,.86);
box-shadow:0 0 20px rgba(232,182,76,.46), inset 0 0 15px rgba(232,182,76,.16); }
}
/* ── 그랜드까지 남은 칸: 목표를 눈에 보이게 ── */
.hns-progress{
margin:2px auto 10px; width:92%; max-width:420px;
display:flex; flex-direction:column; gap:4px; align-items:center;
}
.hns-progress i{
display:block; height:100%; border-radius:999px;
background:linear-gradient(90deg,#8a5f13,#e8b64c 60%,#fff3c4);
box-shadow:0 0 10px rgba(232,182,76,.55);
transition:width .45s cubic-bezier(.2,.9,.3,1);
}
.hns-progress::before{
content:''; order:2; width:100%; height:7px; border-radius:999px;
background:rgba(0,0,0,.55); border:1px solid rgba(232,182,76,.3);
}
.hns-progress{ position:relative; }
.hns-progress i{
position:absolute; left:0; bottom:0; height:7px; width:0;
}
.hns-progress b{
order:1; font-family:'Cinzel',serif; font-weight:700;
font-size:10px; letter-spacing:.16em; color:#c9ad72;
}
.hns-progress.close b{ color:#ffd873; text-shadow:0 0 9px rgba(232,182,76,.6); }
/* ── 마지막 리스핀: 화면 전체에 압박을 건다 ── */
.bonus-stage.last-chance .hns{
box-shadow:0 0 70px rgba(220,49,19,.5), inset 0 0 42px rgba(113,21,10,.3);
animation:lastChance 1.15s ease-in-out infinite;
}
@keyframes lastChance{
0%,100%{ box-shadow:0 0 55px rgba(220,49,19,.38), inset 0 0 34px rgba(113,21,10,.24); }
50% { box-shadow:0 0 88px rgba(220,49,19,.66), inset 0 0 52px rgba(113,21,10,.4); }
}
.bonus-stage.last-chance #hnsSpins{ color:#ff8a6a; text-shadow:0 0 12px rgba(255,80,40,.8); }
/* ── 잭팟 코인 착지 플래시 ── */
.bonus-stage.tier-flash::after{
content:''; position:fixed; inset:0; pointer-events:none; z-index:5;
background:radial-gradient(circle at 50% 45%, rgba(255,236,180,.5), transparent 62%);
animation:tierFlash .62s ease-out forwards;
}
@keyframes tierFlash{ from{opacity:1} to{opacity:0} }
/* ── 빈 칸도 죽어 보이지 않게 ── */
.hns-cell{
background:
radial-gradient(circle at 50% 32%, rgba(232,182,76,.07), transparent 58%),
linear-gradient(180deg,#1c1815,#0a0908) !important;
border-color:rgba(232,182,76,.16) !important;
}
.hns-cell.locked{ border-color:rgba(232,182,76,.9) !important; }
body.reduce-motion .hns-cell.final-tease,
body.reduce-motion .bonus-stage.last-chance .hns,
body.reduce-motion .rollcoin{ animation:none !important; }
/* ═══════════════════════════════════════════════════════════════
모바일에서 심볼이 안 보이는 문제 수정
원인 1: game.css의 .cell img{will-change:transform} — 스핀 중
130개 이상의 이미지가 각각 GPU 레이어를 요구해 폰의
레이어 예산이 고갈되고, 합성기가 레이어를 버린다.
원인 2: .strip.blur의 filter:blur() 가 will-change + overflow:hidden
과 겹치면 모바일 크롬에서 빈 화면으로 합성된다.
해법: 레이어를 이미지 단위가 아니라 스트립 단위(릴당 1개)로 승격.
═══════════════════════════════════════════════════════════════ */
/* 심볼 개별 레이어 승격을 해제 — 이것이 핵심 수정 */
.cell img{ will-change:auto; }
/* 실제로 변형되는 당첨 심볼만 레이어로 (최대 5개 내외) */
.cell.hl img{ will-change:transform; }
/* 레이어는 릴당 하나로. 스핀 애니메이션은 여기서만 일어난다 */
.strip{
will-change:transform;
transform:translateZ(0);
backface-visibility:hidden;
}
/* 릴 바깥으로 새는 페인트를 차단해 합성 비용을 더 줄인다 */
.reel{ contain:paint; }
/* 모션 블러는 데스크톱에서만. 터치 기기에서는 끈다 */
.strip.blur{ filter:none; }
@media (hover:hover) and (pointer:fine){
.strip.blur{ filter:blur(2.5px) saturate(1.15); }
}
/* 터치 기기에서는 블러 대신 밝기 흔들림으로 속도감을 준다 (필터 미사용) */
@media (hover:none){
.strip.blur .cell img{ opacity:.88; }
}
/* ═══════════════════════════════════════════════════════════════
프레임 보석 반짝임
frame0.webp에 구워진 초록 보석 14개의 좌표를 이미지에서 추출해,
프레임과 정확히 겹치는 오버레이에 반짝임을 얹는다.
═══════════════════════════════════════════════════════════════ */
.gem-layer{
position:absolute; left:-14px; top:-36px;
width:calc(100% + 28px); height:calc(100% + 72px);
z-index:10; pointer-events:none;
}
.gem-layer i{
position:absolute; width:15px; height:15px; margin:-7.5px 0 0 -7.5px;
border-radius:50%;
background:radial-gradient(circle,
rgba(214,255,231,.98) 0%, rgba(104,225,164,.72) 34%,
rgba(45,150,102,.32) 58%, transparent 74%);
mix-blend-mode:screen;
opacity:0; transform:scale(.55);
animation-name:gemTwinkle;
animation-timing-function:ease-in-out;
animation-iteration-count:infinite;
will-change:opacity, transform;
}
/* 십자 글린트 — 보석다운 광택 */
.gem-layer i::before,
.gem-layer i::after{
content:''; position:absolute; left:50%; top:50%;
background:linear-gradient(90deg,transparent,rgba(224,255,238,.9),transparent);
transform:translate(-50%,-50%);
}
.gem-layer i::before{ width:34px; height:1.5px; }
.gem-layer i::after{ width:1.5px; height:34px;
background:linear-gradient(180deg,transparent,rgba(224,255,238,.9),transparent); }
@keyframes gemTwinkle{
0%, 84% { opacity:0; transform:scale(.55); }
88% { opacity:1; transform:scale(1.4); }
91% { opacity:.28; transform:scale(.95); }
94% { opacity:.85; transform:scale(1.18); }
100% { opacity:0; transform:scale(.55); }
}
/* 당첨 중에는 프레임 전체가 함께 살아난다 */
.grid.haswin ~ .gem-layer i,
.screen:has(.grid.haswin) .gem-layer i{
animation-duration:1.6s !important;
animation-delay:0s !important;
}
body.reduce-motion .gem-layer{ display:none; }
/* ═══════════════════════════════════════════════════════════════
컬러 테마
기본(루비)은 body·machine·reel이 모두 붉은 계열이라 층이 뭉개진다.
아래 세 테마는 캐비닛 / 릴 / 배경의 명도와 색상을 분리해서
금색 장식과 프레임의 초록 보석이 살아나게 한다.
사용: (sapphire | obsidian | ruby)
═══════════════════════════════════════════════════════════════ */
/* ───────── 옥 (JADE) — 프레임의 초록 보석과 같은 계열 ───────── */
[data-df-theme="jade"]{ --lacquer:#14453A; --lacquer-dk:#08201B; }
[data-df-theme="jade"] body{
background:
radial-gradient(circle at 50% -4%, rgba(255,225,140,.26), transparent 27%),
radial-gradient(circle at 15% 20%, rgba(46,168,128,.16), transparent 34%),
radial-gradient(circle at 85% 15%, rgba(120,200,168,.12), transparent 30%),
linear-gradient(180deg, rgba(6,32,26,.26) 0%, rgba(5,24,20,.44) 26%, rgba(3,14,12,.76) 58%, rgba(2,9,8,.96) 100%),
#06110E;
}
[data-df-theme="jade"] .machine{
background:
radial-gradient(140% 90% at 50% 0%, rgba(255,255,255,.07), transparent 40%),
linear-gradient(160deg,#08201B 0%, #0E3229 30%, #15473B 52%, #061A15 100%);
box-shadow:0 0 0 4px #04100D, 0 0 0 5px rgba(232,182,76,.35),
0 26px 60px rgba(0,0,0,.75), 0 0 60px rgba(24,108,82,.28);
}
[data-df-theme="jade"] .screen{
background:radial-gradient(120% 80% at 50% 46%, rgba(255,206,128,.09), transparent 72%), #04100C;
}
[data-df-theme="jade"] .reel{
background:
radial-gradient(110% 70% at 50% 45%, rgba(255,214,140,.08), transparent 70%),
linear-gradient(90deg,rgba(0,0,0,.22),transparent 14%,transparent 86%,rgba(0,0,0,.22)),
linear-gradient(180deg,#17392F, #102A23 42%, #0A1D18);
}
[data-df-theme="jade"] .hns{ background:linear-gradient(165deg,#0A2A22,#12483A 40%, #06180F); }
[data-df-theme="jade"] .bonus-stage{
background:radial-gradient(circle at 50% 14%, rgba(255,213,96,.24), transparent 34%),
radial-gradient(circle at 50% 58%, rgba(18,88,66,.5), rgba(3,8,7,.95) 72%);
}
/* ───────── 청람 (SAPPHIRE) — 금색이 가장 강하게 튄다 ───────── */
[data-df-theme="sapphire"]{ --lacquer:#1B3168; --lacquer-dk:#0A1228; }
[data-df-theme="sapphire"] body{
background:
radial-gradient(circle at 50% -4%, rgba(255,225,140,.26), transparent 27%),
radial-gradient(circle at 15% 20%, rgba(64,110,210,.17), transparent 34%),
radial-gradient(circle at 85% 15%, rgba(126,164,236,.11), transparent 30%),
linear-gradient(180deg, rgba(8,16,40,.26) 0%, rgba(6,12,30,.44) 26%, rgba(3,7,18,.78) 58%, rgba(2,4,10,.96) 100%),
#050A16;
}
[data-df-theme="sapphire"] .machine{
background:
radial-gradient(140% 90% at 50% 0%, rgba(255,255,255,.08), transparent 40%),
linear-gradient(160deg,#0A1228 0%, #142549 30%, #1D3670 52%, #070E20 100%);
box-shadow:0 0 0 4px #040814, 0 0 0 5px rgba(232,182,76,.35),
0 26px 60px rgba(0,0,0,.78), 0 0 60px rgba(38,72,158,.3);
}
[data-df-theme="sapphire"] .screen{
background:radial-gradient(120% 80% at 50% 46%, rgba(255,206,128,.10), transparent 72%), #050A14;
}
[data-df-theme="sapphire"] .reel{
background:
radial-gradient(110% 70% at 50% 45%, rgba(255,214,140,.09), transparent 70%),
linear-gradient(90deg,rgba(0,0,0,.24),transparent 14%,transparent 86%,rgba(0,0,0,.24)),
linear-gradient(180deg,#1E3059, #16233F 42%, #0E1728);
}
[data-df-theme="sapphire"] .hns{ background:linear-gradient(165deg,#0C1836,#1B3168 40%, #060B1A); }
[data-df-theme="sapphire"] .bonus-stage{
background:radial-gradient(circle at 50% 14%, rgba(255,213,96,.24), transparent 34%),
radial-gradient(circle at 50% 58%, rgba(26,54,128,.52), rgba(3,5,12,.95) 72%);
}
/* ───────── 흑요석 (OBSIDIAN) — 기본 테마 ─────────
data-df-theme 속성이 없으면 이 테마가 적용된다. */
html:not([data-df-theme]),
[data-df-theme="obsidian"]{ --lacquer:#2C2721; --lacquer-dk:#141210; }
html:not([data-df-theme]) body,
[data-df-theme="obsidian"] body{
background:
radial-gradient(circle at 50% -4%, rgba(255,222,132,.30), transparent 28%),
radial-gradient(circle at 15% 20%, rgba(186,150,84,.11), transparent 34%),
linear-gradient(180deg, rgba(20,17,13,.28) 0%, rgba(14,12,10,.48) 26%, rgba(8,7,6,.8) 58%, rgba(4,4,4,.97) 100%),
#0A0908;
}
html:not([data-df-theme]) .machine,
[data-df-theme="obsidian"] .machine{
background:
radial-gradient(140% 90% at 50% 0%, rgba(255,240,200,.09), transparent 42%),
linear-gradient(160deg,#141210 0%, #221E19 30%, #2F2921 52%, #100E0C 100%);
box-shadow:0 0 0 4px #070606, 0 0 0 5px rgba(232,182,76,.42),
0 26px 60px rgba(0,0,0,.8), 0 0 60px rgba(150,112,44,.22);
}
html:not([data-df-theme]) .screen,
[data-df-theme="obsidian"] .screen{
background:radial-gradient(120% 80% at 50% 46%, rgba(255,206,128,.11), transparent 72%), #0A0908;
}
html:not([data-df-theme]) .reel,
[data-df-theme="obsidian"] .reel{
background:
radial-gradient(110% 70% at 50% 45%, rgba(255,214,140,.10), transparent 70%),
linear-gradient(90deg,rgba(0,0,0,.26),transparent 14%,transparent 86%,rgba(0,0,0,.26)),
linear-gradient(180deg,#2B261F, #1F1B16 42%, #151210);
}
html:not([data-df-theme]) .hns,
[data-df-theme="obsidian"] .hns{ background:linear-gradient(165deg,#1A1712,#2F2921 40%, #0D0B09); }
html:not([data-df-theme]) .bonus-stage,
[data-df-theme="obsidian"] .bonus-stage{
background:radial-gradient(circle at 50% 14%, rgba(255,213,96,.26), transparent 34%),
radial-gradient(circle at 50% 58%, rgba(52,44,32,.55), rgba(4,4,4,.96) 72%);
}
/* ═══════════════════════════════════════════════════════════════
오버레이 제목 가독성 수정
문제 1: 그라디언트 텍스트의 하단 정지점(#8b5c16 / #8c190d)이
어두운 배경에 묻혀 글자 아랫부분이 안 읽힌다.
문제 2: 아트가 없는 등급(bonus/nice)은 기본 .bw-title 이 13vw 라
"FREE SPINS TOTAL" 같은 긴 제목이 3줄로 접히고,
그라디언트가 3줄 전체에 한 번 걸려 2·3행이 통째로 어두워진다.
═══════════════════════════════════════════════════════════════ */
/* 하단 정지점을 밝은 금색으로 끌어올린다 */
.bw-title{
background:linear-gradient(180deg,#fffbe9 4%,#ffe8a2 26%,#f7cd65 56%,#d9a23a 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
filter:drop-shadow(0 4px 0 #3d2a08) drop-shadow(0 0 30px rgba(232,182,76,.85));
}
/* 아트 없는 등급은 글자를 줄여 2줄 안에 들어오게 한다 */
.bonus .bw-title, .nice .bw-title{
font-size:clamp(30px,8vw,62px); line-height:1.02; letter-spacing:.03em;
}
.bonus .bw-title{
filter:drop-shadow(0 3px 0 #3d2a08) drop-shadow(0 0 26px rgba(232,182,76,.8));
}
/* 어느 등급이든 부제·금액은 확실히 밝게 */
.bw-sub{ color:#ffe6ae; text-shadow:0 2px 7px #000, 0 0 14px rgba(255,181,61,.4); }
.bw-amt{ color:#fff4bd; text-shadow:0 0 20px rgba(255,206,86,.9), 0 3px 0 #4a2206; }
/* AWAKENING — 하단이 검붉게 죽던 구간을 밝은 주황금색으로 */
.dragon-awaken-title{
background:linear-gradient(180deg,#fffbe0 6%,#ffdf95 38%,#ffb44a 70%,#ef8a24 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
filter:drop-shadow(0 3px 0 #4a1206) drop-shadow(0 0 24px rgba(255,140,40,.95));
}
.dragon-awaken-kicker{ color:#ffd977; }
.dragon-awaken-sub{ color:#f0d9a6; text-shadow:0 1px 5px #000; }
/* 글자가 앉을 자리를 조금 더 어둡게 눌러 대비를 확보 */
.dragon-awaken{
background:radial-gradient(circle at 50% 45%,
rgba(150,44,16,.38), rgba(6,3,2,.88) 52%, rgba(0,0,0,.95));
}
/* ═══════════════════════════════════════════════════════════════
당첨 아트가 화면 밖으로 잘리는 문제
.overlay.jackpot/.epic 의 아트는 98vw 인데, 여기에 s11ArtEnter 의
scale(1.07) 과 s11ArtGlow 의 scale(1.018) 이 겹쳐 화면 폭을 넘는다.
기준 폭을 줄여 확대 구간까지 화면 안에 들어오게 한다.
═══════════════════════════════════════════════════════════════ */
.bw-art{ width:min(88vw,700px); }
.overlay.big .bw-art{ width:min(84vw,640px); }
.overlay.mega .bw-art{ width:min(87vw,680px); }
.overlay.epic .bw-art{ width:min(89vw,720px); }
.overlay.jackpot .bw-art{ width:min(89vw,720px); }
/* 등장 애니메이션의 오버슈트를 완화 (1.07 → 1.03) */
@keyframes s11ArtEnter{
0% { opacity:0; transform:scale(.52) translateY(24px); filter:brightness(2.1) blur(4px); }
58% { opacity:1; transform:scale(1.03) translateY(-4px); filter:brightness(1.22) blur(0); }
100% { transform:scale(1) translateY(0); filter:brightness(1); }
}
@keyframes s11ArtGlow{
from{ transform:scale(1); filter:brightness(1) saturate(1.03); }
to { transform:scale(1.012); filter:brightness(1.08) saturate(1.10); }
}
/* ═══════════════════════════════════════════════════════════════
릴이 툭툭 끊기는 문제
원인 1: .strip.blur 의 filter:blur() — 움직이는 큰 요소에 필터를 걸면
매 프레임 재래스터라이즈가 일어나 GPU 합성 경로에서 벗어난다.
원인 2: 보석 반짝임의 mix-blend-mode:screen — 블렌드 모드는 배경을
매 프레임 다시 합성하게 만든다. 배경(릴)이 움직이는 동안엔
.screen 전체가 순수 합성 경로를 잃는다.
═══════════════════════════════════════════════════════════════ */
/* 모션 블러 대신 밝기·채도만 낮춘다 (필터 미사용 → 합성 유지) */
.strip.blur{ filter:none !important; }
.strip.blur .cell img{ opacity:.9; }
@media (hover:hover) and (pointer:fine){
.strip.blur .cell img{ opacity:.86; }
}
/* 블렌드 모드를 걷어내고 일반 합성으로 */
.gem-layer i{ mix-blend-mode:normal; }
/* 릴이 도는 동안엔 보석 레이어를 합성 대상에서 완전히 제외 */
.screen.spinning .gem-layer{ display:none; }
/* ═══════════════════════════════════════════════════════════════
BONUS WIN 제목이 안 읽히는 문제
원인 둘. (1) bonus 등급만 전용 오버레이 배경이 없어 기본 배경의
rgba(120,24,21,.58) 붉은 구간 위에 글자가 얹힌다. (2) 그라디언트
텍스트는 제목 전체에 한 번 걸리므로 "GRAND JACKPOT" 처럼 줄바꿈되는
제목은 아래 줄이 통째로 어두운 구간에 들어간다.
→ 아트 없는 등급은 그라디언트를 버리고 단색으로 간다. 줄 수와
무관하게 대비가 일정해진다.
═══════════════════════════════════════════════════════════════ */
.overlay.bonus{
background:radial-gradient(circle at 50% 42%,
rgba(232,182,76,.20), rgba(28,14,10,.86) 46%, rgba(0,0,0,.97));
}
.bonus .bw-title, .nice .bw-title{
background:none; -webkit-background-clip:initial; background-clip:initial;
color:#ffeaba;
filter:none;
text-shadow:0 3px 0 #2a1a04, 0 0 24px rgba(255,196,74,.6), 0 2px 10px rgba(0,0,0,.95);
}