@font-face { font-family: 'Grobold'; src: url('../assets/fonts/GROBOLD.ttf') format('truetype'); font-display: block; }
@font-face { font-family: 'Digitalt'; src: url('../assets/fonts/Digitalt.ttf') format('truetype'); font-display: block; }
:root {
--navy: #1b1f4b;
--purple: #7a3cf0;
--purple-dark: #3d1590;
--purple-light: #a877ff;
--green: #2fb24a;
--gold: #ffcb2e;
--red: #e5383b;
--panel: #fdfcf8;
--panel-shadow: #c9cde0;
--ease: cubic-bezier(.3, .8, .3, 1);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
margin: 0; height: 100%; overflow: hidden;
background: #0a7cff url('../assets/bg/BG1.webp') center / cover no-repeat;
font-family: 'Grobold', system-ui, sans-serif;
color: var(--navy);
user-select: none; -webkit-user-select: none;
touch-action: manipulation;
}
.screen { position: fixed; inset: 0; display: none; }
.screen.active { display: flex; align-items: center; justify-content: center; }
.hidden { display: none !important; }
.btn {
font-family: 'Grobold', system-ui, sans-serif;
color: #fff; cursor: pointer;
background: linear-gradient(180deg, var(--purple-light), var(--purple) 55%);
border: 3px solid var(--purple-dark); border-radius: 14px;
box-shadow: 0 5px 0 var(--purple-dark), 0 8px 14px rgba(0, 0, 0, .25);
text-shadow: 0 2px 0 var(--purple-dark);
transition: transform .08s, box-shadow .08s, filter .15s;
}
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--purple-dark), 0 3px 6px rgba(0, 0, 0, .25); }
.btn:disabled { filter: grayscale(.6) brightness(.9); cursor: default; }
.btn.secondary { background: linear-gradient(180deg, #fff, #e4e6f2 60%); color: var(--navy); border-color: #8a8fb3; box-shadow: 0 5px 0 #8a8fb3, 0 8px 14px rgba(0, 0, 0, .2); text-shadow: none; }
#boot { background: url('../assets/bg/BG_menu.webp') center / cover no-repeat; }
.boot-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.boot-inner { display: flex; flex-direction: column; align-items: center; gap: 4.6cqw; padding: 6cqw; width: 100cqw; margin-top: -8cqh; }
.boot-logo { width: 100%; filter: drop-shadow(0 2cqw 3cqw rgba(0, 0, 0, .3)); animation: bob 3s ease-in-out infinite; }
.boot-tagline { margin: 0; color: #fff; font-size: 5.5cqw; text-shadow: 0 .8cqw 0 var(--navy), 0 0 3cqw rgba(0, 0, 0, .3); }
.play-row { display: flex; align-items: center; gap: 3.6cqw; margin-top: 1cqh; width: 100%; }
.boot-stage .btn { border-width: .8cqw; box-shadow: 0 1.3cqw 0 var(--purple-dark), 0 2cqw 3.6cqw rgba(0, 0, 0, .25); text-shadow: 0 .5cqw 0 var(--purple-dark); }
.boot-stage .btn:active:not(:disabled) { transform: translateY(1cqw); box-shadow: 0 .3cqw 0 var(--purple-dark), 0 .8cqw 1.5cqw rgba(0, 0, 0, .25); }
.btn-play { flex: 1; min-width: 0; font-size: 9cqw; padding: 3.6cqw 3cqw 4cqw; border-radius: 5cqw; animation: pulse 1.6s ease-in-out infinite; }
.btn-play:disabled { animation: none; font-size: 5cqw; }
.btn-menu-rules { position: absolute; bottom: 6cqw; display: grid; place-items: center; width: 15cqw; aspect-ratio: 1; padding: 0;
border-radius: 4cqw; font-family: 'Digitalt', sans-serif; font-size: 8cqw; line-height: 1; }
.btn-menu-rules svg { width: 60%; height: 60%; }
#menu-settings-btn { left: 6cqw; }
#menu-rules-btn { right: 6cqw; }
@keyframes bob { 50% { transform: translateY(-2cqw); } }
.profile { display: flex; align-items: center; gap: 4cqw; width: 100%; padding: 3.6cqw 4cqw;
background: #fff; border-radius: 4.6cqw; box-shadow: 0 1.5cqw 0 rgba(27, 31, 75, .25), 0 2.6cqw 5cqw rgba(0, 0, 0, .2); }
.profile-avatar { position: relative; flex: none; }
.profile-avatar .avatar { width: 26cqw; background-color: transparent; box-shadow: none; }
.profile-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.5cqw; text-align: left; }
.profile-name { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; color: var(--navy); font-size: 5.6cqw; }
#profile-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-coins { display: flex; align-items: center; gap: 1.5cqw; color: var(--navy); font-family: 'Digitalt', sans-serif; font-size: 4.8cqw; }
.coin { width: 1.3em; height: 1.3em; flex: none; background: url('../assets/ui/coin.webp') center / contain no-repeat; }
.profile-level { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; }
.level-pill { background: linear-gradient(180deg, var(--purple-light), var(--purple)); color: #fff; border-radius: 99px; padding: .5cqw 3cqw .8cqw;
font-size: 3.8cqw; }
.xp-numbers { color: var(--navy); font-family: 'Digitalt', sans-serif; font-size: 3.8cqw; white-space: nowrap; }
.xp-bar { height: 3cqw; border-radius: 99px; background: #dcdcf0; overflow: hidden; }
.xp-fill { height: 100%; width: 0; border-radius: inherit; background: var(--purple); transition: width .4s; }
.xp-next { color: #5d6288; font-family: 'Digitalt', sans-serif; font-size: 3.5cqw; }
.pencil { width: 8.2cqw; height: 8.2cqw; padding: 1.5cqw; border-radius: 50%; cursor: pointer; display: grid; place-items: center; flex: none;
background: #fff; color: var(--purple); border: .5cqw solid var(--purple-dark); box-shadow: 0 .8cqw 0 var(--purple-dark); }
.pencil svg { width: 100%; height: 100%; }
.pencil:active { transform: translateY(.5cqw); box-shadow: 0 .3cqw 0 var(--purple-dark); }
.pencil-avatar { position: absolute; right: -1cqw; bottom: -1cqw; }
.difficulty { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 2cqw; row-gap: 1.5cqw; width: 100%; }
.diff-stat { display: flex; flex-direction: column; align-items: center; gap: .3cqw; color: #fff; font-size: 3.2cqw;
line-height: 1.2; text-shadow: 0 .5cqw 0 var(--navy); white-space: nowrap; }
.diff-stat b { font-family: 'Digitalt', sans-serif; font-weight: normal; font-size: 1.25em; color: var(--gold); }
.diff-btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: .5cqw;
font-family: 'Grobold', system-ui, sans-serif; font-size: 4.4cqw; padding: 2cqw 3.6cqw 2.6cqw; cursor: pointer;
color: var(--navy); background: rgba(255, 255, 255, .85); border: .8cqw solid #8a8fb3; border-radius: 3cqw; box-shadow: 0 1cqw 0 #8a8fb3; }
.diff-btn.selected { color: #fff; background: linear-gradient(180deg, var(--purple-light), var(--purple) 55%); border-color: var(--purple-dark);
box-shadow: 0 1cqw 0 var(--purple-dark); text-shadow: 0 .5cqw 0 var(--purple-dark); }
.diff-bonus { position: absolute; top: -2.6cqw; right: -2cqw; padding: .5cqw 1.8cqw .8cqw; border-radius: 99px; font-size: 3.4cqw; line-height: 1;
font-family: 'Digitalt', sans-serif; color: var(--navy); background: linear-gradient(180deg, #ffe27a, #ffc928); border: .5cqw solid #c77d00;
text-shadow: none; box-shadow: 0 .5cqw 0 #c77d00; }
.diff-btn .stars { display: flex; gap: .3cqw; height: 1em; }
.diff-btn .stars svg { height: 100%; aspect-ratio: 1; fill: #ffc928; stroke: #c77d00; stroke-width: 1.5; stroke-linejoin: round; }
#rules-btn { left: auto; top: auto; right: 3cqw; bottom: 2.2cqh; font-size: 6.5cqw; line-height: 1; }
.modal-card.rules-card { max-height: 88cqh; display: flex; flex-direction: column; text-align: left; }
.modal .rules-card h2 { flex: none; text-align: center; margin: 0 7cqw 2cqw; font-size: max(22px, 6cqw); }
.rules-goal, .rules-scroll-hint, .rules-body, .rules-values { font-family: Arial, Helvetica, sans-serif; }
.rules-goal { flex: none; text-align: center; background: #eee6ff; color: var(--purple-dark);
padding: 2cqw; border-radius: 2cqw; margin-bottom: 3cqw; font-size: max(14px, 3.8cqw); line-height: 1.25; }
.rules-scroll-hint { flex: none; text-align: center; color: #575c7a; font-size: max(12px, 3cqw); margin-bottom: 2cqw; }
.rules { min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
display: flex; flex-direction: column; gap: 3.4cqw; padding: 0 1.5cqw 1cqw 0; scrollbar-width: thin; }
.rules > * { flex: none; }
.rules h3 { margin: 0 0 1cqw; font-weight: normal; font-size: max(16px, 4.2cqw); color: var(--purple); }
.rules-body, .rules-values { font-size: max(15px, 3.6cqw); line-height: 1.5; color: var(--navy); }
.rules-example { display: block; margin-top: 1cqw; color: #575c7a; }
.rules-row { display: flex; gap: 2.4cqw; align-items: flex-start; }
.rules-row > div { min-width: 0; }
.rules-num { flex: none; width: 7cqw; height: 7cqw; border-radius: 50%; display: grid; place-items: center;
background: linear-gradient(180deg, var(--purple-light), var(--purple)); color: #fff; font-size: max(15px, 4cqw); }
.rules-section { background: #eef0fa; border-radius: 2.4cqw; padding: 2cqw 3cqw; }
.rules-values { margin: 0; }
.rules-values-top { flex: none; margin-bottom: 2cqw; padding: 1.5cqw 2cqw; }
.rules-values-top h3 { margin: 0 0 1.2cqw; font-weight: normal; font-size: max(14px, 3.6cqw); color: var(--purple); }
.rules-values-heading { display: flex; justify-content: space-between; gap: 1cqw;
padding: .8cqw 0; border-bottom: 1px solid #d8daeb;
font-family: Arial, Helvetica, sans-serif; font-size: max(14px, 3.3cqw);
line-height: 1.3; font-weight: bold; color: var(--navy); }
.rules-values-top .rules-values { display: grid; grid-template-columns: minmax(0, 1fr);
gap: 0; font-size: max(14px, 3.3cqw); line-height: 1.3; }
.rules-values > div { display: grid; grid-template-columns: minmax(0, 1fr) auto;
align-items: center; gap: 1cqw; padding: .8cqw 0; }
.rules-values > div + div { border-top: 1px solid #d8daeb; }
.rules-values > div:first-child { color: #18763e; }
.rules-values dd { margin: 0; text-align: right; font-weight: bold; }
.rules .hl-red { font-size: inherit; }
.hl-red { color: #e9486b; font-size: 1.4em; }
.hl-blue { color: #2d7dd2; font-size: 1.2em; }
.theme-fade { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: center / cover no-repeat; }
.theme-arrow { width: 7cqw; height: 7cqw; padding: 1.4cqw; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
color: #fff; background: linear-gradient(180deg, var(--purple-light), var(--purple) 60%); box-shadow: 0 .5cqw 0 var(--purple-dark); }
.theme-arrow svg { width: 100%; height: 100%; }
.theme-arrow:active { transform: translateY(.4cqw); box-shadow: 0 .1cqw 0 var(--purple-dark); }
#settings-btn { left: 3cqw; top: auto; bottom: 2.2cqh; }
.settings { display: flex; flex-direction: column; gap: 3cqw; margin-top: 2cqw; text-align: left; }
.settings-row { display: grid; grid-template-columns: 30cqw 1fr auto; align-items: center; gap: 2cqw; color: var(--navy); font-size: 3.8cqw; }
.settings-row output { min-width: 9cqw; text-align: right; font-family: 'Digitalt', sans-serif; font-size: 4cqw; color: var(--purple); }
.settings-row input[type=range] { width: 100%; accent-color: var(--purple); height: 4cqw; cursor: pointer; }
.settings-divider { width: 100%; margin: 1cqw 0; border: 0; border-top: .4cqw solid #e2e4f0; }
.settings-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4cqw; margin-top: 1cqw; }
.settings-col { display: flex; flex-direction: column; align-items: center; gap: 2cqw; text-align: center; min-width: 0; }
.settings-col h3 { margin: 0; font-weight: normal; font-size: 4cqw; color: var(--navy); }
.settings-preview { position: relative; height: 30cqw; display: flex; align-items: center; justify-content: center; }
.settings-theme-preview { height: 100%; aspect-ratio: 9 / 16; border-radius: 2cqw; background: center / cover no-repeat;
box-shadow: 0 .4cqw 1cqw rgba(0, 0, 0, .3); }
.settings-preview .card { position: relative; left: auto; top: auto; transform: none; width: auto; height: 100%; }
.settings-preview .side { position: absolute; inset: 0; }
.settings-preview.locked { cursor: pointer; }
.settings-preview.locked > :not(.unlock-price-btn) { filter: grayscale(.85) brightness(.8); opacity: .75; }
.unlock-price-btn { position: absolute; left: 50%; bottom: 1.5cqw; transform: translateX(-50%); z-index: 10;  white-space: nowrap; display: inline-flex; align-items: center; gap: 1cqw; padding: .6cqw 2.4cqw; border: 0; border-radius: 99px; cursor: pointer;
background: var(--navy); color: #fff; font-family: 'Digitalt', sans-serif; font-size: 3.6cqw; line-height: 1; box-shadow: 0 .4cqw 0 rgba(0, 0, 0, .3); }
.unlock-price-btn .coin { width: 4cqw; height: 4cqw; }
.back-preview .side.back::after { background-image: var(--back-image) !important; background-size: 100% 100% !important; background-position: 0 0 !important; }
.confirm-preview { height: 36cqw; display: flex; justify-content: center; margin: 0 auto 2cqw; }
.confirm-preview .card { position: relative; left: auto; top: auto; transform: none; width: auto; height: 100%; }
.confirm-preview .side { position: absolute; inset: 0; }
.settings-stepper { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5cqw; }
.settings-stepper > span { flex: 1; min-width: 0; text-align: center; font-size: 3.6cqw; color: var(--navy); overflow-wrap: anywhere; }
.modal-card { position: relative; }
.modal-close { position: absolute; top: 2cqw; right: 2cqw; width: 8cqw; height: 8cqw; border: 0; border-radius: 50%; cursor: pointer;
background: #eceef6; color: #5d6288; font-size: 6cqw; line-height: 1; padding: 0; }
.name-input { width: 100%; box-sizing: border-box; margin-top: 2cqw; font-family: 'Grobold', sans-serif; font-size: 5cqw; text-align: center;
padding: 2cqw; border: .6cqw solid #8a8fb3; border-radius: 3cqw; color: var(--navy); outline: none; }
.name-input:focus { border-color: var(--purple); }
.avatar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; max-height: 60cqh; overflow-y: auto; padding: 1cqw; margin-top: 2cqw; }
.avatar-pick { padding: .6cqw; border: .6cqw solid transparent; border-radius: 50%; background: none; cursor: pointer; }
.avatar-pick .avatar { width: 100%; background-color: transparent; box-shadow: none; }
.avatar-pick.selected { border-color: var(--purple); background: #efe9ff; }
.avatar-pick { position: relative; }
.avatar-pick.locked .avatar { filter: grayscale(.85) brightness(.8); opacity: .75; }
.avatar-price { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; align-items: center; gap: .6cqw;
padding: .3cqw 1.4cqw; border-radius: 99px; background: var(--navy); color: #fff; font-family: 'Digitalt', sans-serif; font-size: 3.2cqw;
line-height: 1; white-space: nowrap; box-shadow: 0 .4cqw 0 rgba(0, 0, 0, .3); }
.avatar-price .coin { width: 3.6cqw; height: 3.6cqw; }
@keyframes pulse { 50% { transform: scale(1.05); } }
#stage, .boot-stage, .dong-splash, .modal-stage, .score-stage {
position: relative;
width: min(100vw, calc(100dvh * 9 / 16));
aspect-ratio: 9 / 16;
container-type: size;
overflow: hidden;
}
@media (orientation: landscape) { #stage { overflow: visible; } }
#world-scene, #layer-cards, #layer-seats, #layer-indicators { position: absolute; inset: 0; pointer-events: none; }
#layer-cards > *, #layer-seats > * { pointer-events: auto; }
.btn-icon {
position: absolute; left: 3cqw; top: 2.2cqh; z-index: 30;
width: 11cqw; height: 11cqw; padding: 0; display: grid; place-items: center;
color: #fff; cursor: pointer;
background: linear-gradient(180deg, var(--purple-light), var(--purple) 60%);
border: 0.7cqw solid var(--purple-dark); border-radius: 3cqw;
box-shadow: 0 1cqw 0 var(--purple-dark);
}
.pill {
position: absolute; left: calc(3cqw + 11cqw + 10px); top: 2.2cqh; z-index: 30;
box-sizing: border-box; min-height: 11cqw; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
background: rgba(20, 24, 60, .82); color: #fff; border-radius: 1.2cqw;
padding: 1.2cqw 3cqw; font-family: 'Digitalt', sans-serif; font-size: 3.2cqw; text-align: left; line-height: 1.25;
}
.pill:empty { visibility: hidden; }
#wallet { position: absolute; right: 3cqw; top: 2.2cqh; z-index: 30; display: flex; flex-direction: column; align-items: stretch; gap: 1cqw; }
.wallet-row { display: flex; align-items: center; gap: .8cqw; background: rgba(20, 24, 60, .82); color: #fff; border-radius: 1.2cqw;
padding: .6cqw 1.2cqw; font-family: 'Digitalt', sans-serif; font-size: 3.2cqw; line-height: 1; }
.wallet-row > span:first-child { min-width: 7ch; flex: 1; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wallet-row .coin { width: 3.8cqw; height: 3.8cqw; }
.wallet-row.wallet-level > .level-pill { flex: none; min-width: 4.2em;  font-family: 'Digitalt', sans-serif; font-size: 3cqw; letter-spacing: .03em; padding: .3cqw 1.6cqw .4cqw; text-align: center; }
.wallet-xpbar { flex: 1; min-width: 6cqw; height: 1.6cqw; border-radius: 99px; background: rgba(255, 255, 255, .25); overflow: hidden; }
#wallet-xpfill { height: 100%; width: 0; border-radius: inherit; background: var(--gold); transition: width .4s; }
.xp-icon { width: 3.8cqw; height: 3.8cqw; display: grid; place-items: center; flex: none; border-radius: 50%;
background: linear-gradient(180deg, var(--purple-light), var(--purple)); color: #fff; font-size: 2.2cqw; }
.pill b { font: inherit; color: var(--gold); }
.card {
position: absolute; z-index: 5;
width: calc(var(--w, 16) * 1cqw);
aspect-ratio: 178 / 263;
left: 50%; top: 50%;
transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(var(--s, 1));
perspective: 800px;
}
#world-scene { transform-origin: 0 0; z-index: 1; }
#layer-cards { z-index: 1; }
#layer-seats { z-index: 2; }
#layer-indicators { z-index: 35; }
.card.flying { z-index: 40; }
.card-lift, .card-tilt, .card-punch, .card-inner {
position: absolute; inset: 0; transform-style: preserve-3d;
}
.card.up .card-inner { transform: rotateY(180deg); }
.card .side { position: absolute; inset: 0; border-radius: 7.3%/4.95%;  backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: box-shadow .5s; box-shadow: 0 .4cqw 1cqw rgba(0, 0, 0, .35); }
.pile-under-layer .card:not(:first-child) .side, .card.on-pile .side {
box-shadow: 0 .12cqw .15cqw rgba(0, 0, 0, .12);
}
.card .back { background: #f6f1e4; }
.card .back::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background-image: url('../assets/cards/cardsBG.webp'); background-repeat: no-repeat; }
.glow-fx { position: absolute; inset: 0; z-index: 1; border-radius: inherit; overflow: hidden; pointer-events: none; }
.glow-band { position: absolute; top: -10%; bottom: -10%; left: -26.3%; width: 25.4%; background: #fff; opacity: .6; transform: skewX(-7deg); }
.glow-flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
.card .front { transform: rotateY(180deg); background-color: #fff; border: .25cqw solid #d9d4c7; }
.card .front .art { position: absolute; inset: 0; background-repeat: no-repeat; }
.card.clickable { cursor: pointer; }
.dealing .card .side { box-shadow: 0 .4cqw 1cqw rgba(0, 0, 0, .14); }
.card.clickable:hover { cursor: pointer; }
.card.pile-empty { display: none; }
.pile-under-layer { position: absolute; inset: 0; z-index: 1; }
#layer-cards > .pile-under-layer, .pile-under-layer .card { pointer-events: none; }
.seat { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; z-index: 20; }
.player-seat > .seat-name { position: absolute; top: 100%; }
.avatar {
position: relative;
width: calc(var(--aw, 13) * 1cqw); aspect-ratio: 1;
border-radius: 50%;
background-color: #fff; background-repeat: no-repeat;
image-rendering: auto;
-webkit-mask-image: radial-gradient(circle closest-side, #000 calc(100% - 1.5px), transparent 100%);
mask-image: radial-gradient(circle closest-side, #000 calc(100% - 1.5px), transparent 100%);
box-shadow: 0 0 0 .7cqw #fff, 0 1cqw 2cqw rgba(0, 0, 0, .3);
transition: box-shadow .3s;
}
.avatar.cutout { -webkit-mask-image: none; mask-image: none; border-radius: 0; background-color: transparent; box-shadow: none; }
.avatar-frame > .avatar.cutout::after { display: none; }
.seat-mirror .avatar { scale: -1 1; }
.avatar-frame {
position: relative; width: calc(var(--aw, 13) * 1cqw); aspect-ratio: 1;
}
.avatar-frame > .avatar {
transform-origin: center;
background-color: transparent;
box-shadow: none;
filter: brightness(.92) saturate(.94) contrast(1.02);
}
.avatar-frame { filter: drop-shadow(0 .4cqw 1cqw rgba(0, 0, 0, .35)); }
.avatar-frame > .avatar::after {
content: ''; position: absolute; inset: 3%; border-radius: inherit;
pointer-events: none;
background: linear-gradient(145deg, rgba(255, 246, 224, .1), transparent 42%, rgba(20, 24, 40, .18));
box-shadow: inset 0 .12cqw .2cqw rgba(255, 248, 227, .2), inset 0 -.18cqw .3cqw rgba(20, 24, 40, .22);
}
.score-badge {
position: absolute; right: -9%; top: -9%;
min-width: 36%; height: 36%; padding: 0 6%;
display: grid; place-items: center;
background: var(--green); color: #fff; border: .5cqw solid #fff; border-radius: 99px;
font-family: 'Digitalt', sans-serif; font-size: calc(var(--aw, 13) * .24cqw);
box-shadow: 0 .4cqw .8cqw rgba(0, 0, 0, .3);
}
.seat-name {
margin-top: -1.2cqw; z-index: 1;
box-sizing: border-box; width: calc(2.7 * 100cqw / 12.375); height: calc(.7 * 100cqw / 12.375);
display: flex; align-items: center; justify-content: center;
background: rgba(69, 69, 69, .451); color: #fff; border-radius: 1.8cqw;
padding: 0 1cqw; white-space: nowrap; overflow: hidden;
font-family: 'Grobold', sans-serif; font-size: calc(.3 * 100cqw / 12.375); line-height: 1;
text-shadow: -.03em .1em 0 rgba(21, 1, 1, .5);
}
.bubble {
position: absolute; z-index: 35; box-sizing: border-box;
display: flex; align-items: center; justify-content: center;
background: #fff; color: var(--navy); border-radius: 1.2cqw;
font-size: 3.1cqw; line-height: 1.2; text-align: center;
box-shadow: 0 1cqw 2cqw rgba(0, 0, 0, .25);
transform: translate(-50%, -50%) scale(0); transition: transform .25s var(--ease);
pointer-events: none;
}
.bubble.show { transform: translate(-50%, -50%) scale(1); }
.bubble.compact { width: 6cqw; min-height: 4cqw; padding: 1cqw 1.6cqw; }
.bubble.wide { width: 32cqw; min-height: 12cqw; padding: 1.4cqw 2cqw; }
.surprise-icon {
position: absolute; z-index: 100; height: calc(100cqh * 2.5 / 22);
width: auto; aspect-ratio: 269 / 278; pointer-events: none;
transform: translate(-50%, -50%) scale(0);
}
.banner {
position: absolute; left: 50%; top: 61.98cqh; transform: translate(-50%, -50%);
width: max-content; max-width: 80cqw; box-sizing: border-box; z-index: 25; text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 1.5cqw;
font-family: 'Digitalt', sans-serif;
background: var(--panel); border-radius: 3cqw; padding: 2.6cqw 6cqw 3cqw;
box-shadow: 0 1cqw 0 var(--panel-shadow), 0 2cqw 4cqw rgba(0, 0, 0, .25);
animation: pop .3s var(--ease);
}
.banner-title {
flex: none; max-width: 100%; margin: -5.6cqw 0 0;
line-height: 1.2; overflow-wrap: anywhere;
background: linear-gradient(180deg, var(--purple-light), var(--purple)); color: #fff;
border-radius: 99px; padding: 1cqw 4cqw; font-size: 3.6cqw;
box-shadow: 0 .6cqw 0 var(--purple-dark);
}
.banner-title:empty { display: none; }
.banner-text { width: 100%; overflow-wrap: anywhere; font-size: 3.5cqw; line-height: 1.25; text-transform: uppercase; }
.banner-text .count { font-family: 'Digitalt', sans-serif; font-size: 10cqw; color: inherit;  display: block; line-height: 1; margin-top: .5cqw; }
@keyframes pop { from { transform: translate(-50%, -50%) scale(.6); opacity: 0; } }
#action-row {
position: absolute; left: 50%; top: 65.1cqh; transform: translate(-50%, -50%); z-index: 30;
display: flex; align-items: center; justify-content: center; gap: 5cqw;
}
.btn-action {
width: 25.56cqw; height: 11.11cqw; padding: 0;
font-size: 5cqw; border-radius: 3cqw; border-width: .6cqw; box-shadow: 0 1cqw 0 var(--purple-dark);
}
.btn-action:active:not(:disabled) { transform: translateY(.8cqw); box-shadow: 0 .2cqw 0 var(--purple-dark); }
.btn-dong {
background: linear-gradient(180deg, #ff7a6b, var(--red) 60%); border-color: #8c1116;
box-shadow: 0 1cqw 0 #8c1116, 0 0 4cqw rgba(255, 80, 60, .7); text-shadow: 0 .4cqw 0 #8c1116;
animation: pulse-dong 1.2s ease-in-out infinite;
}
.btn-dong:active { transform: translateY(.8cqw); box-shadow: 0 .2cqw 0 #8c1116; }
@keyframes pulse-dong { 50% { transform: scale(1.07); } }
#dong-backdrop { position: fixed; inset: 0; z-index: 45; display: none;
align-items: center; justify-content: center; pointer-events: none;
background: rgba(0, 0, 0, .7); }
#dong-backdrop:has(> .dong-splash:not(.hidden)) { display: flex; }
#dong-backdrop.penalty { display: flex; background: rgba(0, 0, 0, .5); }
.dong-splash { pointer-events: none; }
.dong-splash span { position: absolute; inset: 0; display: grid; place-items: center;
font-size: 13.888889cqw; color: white; line-height: 1; text-shadow: none; }
.dong-line { position: absolute; left: 50%; top: calc(50% + 5.208333cqh);
width: 55.555556cqw; height: 2.604167cqh; background: white;
transform: translate(-50%, -50%); }
.dong-line:nth-child(2) { width: 57.407407cqw; top: calc(50% + 8.854167cqh); }
.modal { position: fixed; inset: 0; z-index: 60; background: rgba(10, 14, 40, .55); display: grid; place-items: center; animation: fade .25s; }
.modal-stage { display: grid; place-items: center; }
.modal.modal-top { z-index: 70; }
.coin-message { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 1.6cqw;
color: var(--navy); font-size: 5cqw; }
.coin-amount { display: inline-flex; align-items: center; gap: 1cqw; font-family: 'Digitalt', sans-serif; font-size: 6.5cqw; color: var(--purple); }
.coin-amount .coin { width: 6cqw; height: 6cqw; }
.balance-change { display: flex; align-items: center; justify-content: center; gap: 2.4cqw; margin-top: 2cqw;
font-family: 'Digitalt', sans-serif; font-size: 5.5cqw; color: var(--navy); }
.balance-change > span { display: inline-flex; align-items: center; gap: 1cqw; }
.balance-change .coin { width: 5.5cqw; height: 5.5cqw; }
.balance-arrow { color: #8a8fb3; }
.balance-negative { color: #e9486b; }
.confirm-avatar.avatar { width: 32cqw; margin: 0 auto 2cqw; background-color: transparent; box-shadow: none; }
@keyframes fade { from { opacity: 0; } }
.modal-card {
font-family: 'Digitalt', sans-serif;
width: 86cqw; background: var(--panel); border-radius: 4cqw; padding: 4cqw;
box-shadow: 0 1.4cqw 0 var(--panel-shadow), 0 3cqw 6cqw rgba(0, 0, 0, .4);
text-align: center; animation: pop-modal .35s var(--ease);
}
@keyframes pop-modal { from { transform: scale(.7); opacity: 0; } }
.modal h2 { margin: 0 0 1cqw; font-size: 7cqw; font-weight: normal; color: var(--purple); text-shadow: 0 .5cqw 0 var(--panel-shadow); }
.modal p { margin: 0 0 3cqw; font-family: inherit; font-size: 3.6cqw; color: #5d6288; }
.modal .actions { display: flex; gap: 3cqw; justify-content: center; margin-top: 4cqw; }
.modal .actions .btn { font-family: inherit; font-size: 4.6cqw; padding: 2cqw 5cqw 2.6cqw; border-radius: 3cqw; border-width: .6cqw; }
.score-table { width: 100%; border-collapse: collapse; }
.rewards { margin-top: 3cqw; padding: 2cqw 3cqw; border-radius: 2.4cqw; background: #eef0fa; }
.rewards-total { display: flex; align-items: center; justify-content: center; gap: 1.4cqw; font-family: 'Digitalt', sans-serif; font-size: 6cqw; color: var(--navy); }
.rewards-total .xp-icon, .rewards-total .coin { width: 6cqw; height: 6cqw; }
.rewards-total .coin { margin-right: 0; }
.rewards-total span + .xp-icon + span { margin-left: 3cqw; }
.rewards-detail { margin-top: .8cqw; font-size: 3cqw; color: #5d6288; }
.modal.finish .modal-stage { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 5cqh; box-sizing: border-box; }
.finish-winner { position: relative; width: 100%; height: 72cqw; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.finish-winner > * { visibility: hidden; }
.finish-winner.shown > * { visibility: visible; }
.modal.finish .modal-stage { overflow: visible; }
.finish-avatar-wrap { position: relative; }
.finish-shine { --shine-size: 110cqw; --shine-x: 0cqw; --shine-y: 0cqw;
position: absolute; left: 50%; top: 50%; width: var(--shine-size); max-width: none; z-index: 0; pointer-events: none;
transform: translate(calc(-50% + var(--shine-x)), calc(-50% + var(--shine-y))); }
.finish-victory { position: relative; z-index: 2; font-family: 'Grobold', sans-serif; font-size: 11cqw; line-height: 1; color: #fff;
text-shadow: 0 .8cqw 0 rgba(0, 0, 0, .35); margin-bottom: 1cqw; }
.finish-avatar.avatar { --aw: 44; position: relative; z-index: 1; background-color: transparent; box-shadow: none; }
.finish-label {
position: relative; z-index: 2; box-sizing: border-box; margin-top: -3cqw;
width: calc(6.03 * 100cqw / 12.375); height: calc(2.13 * 100cqw / 12.375);
display: flex; flex-direction: column; align-items: center; justify-content: center;
background: url('../assets/ui/VictoryLabelBG.webp') center / 100% 100% no-repeat;
color: #010b41; font-family: 'Digitalt', sans-serif; font-size: calc(.7 * 100cqw / 12.375); line-height: 1; white-space: nowrap;
padding-bottom: .6cqw;
}
.finish-label .pts { font-family: 'Grobold', sans-serif; font-size: calc(.7 * .7 * 100cqw / 12.375); }
.finish-label .pts b { font-family: 'Digitalt', sans-serif; font-weight: normal; font-size: calc(.7 * 1.4 * 100cqw / 12.375); }
.modal.finish .modal-card { margin-top: 3cqw; }
.score-table th { font-weight: normal; font-size: 3cqw; color: #8a8fb3; padding: 0 1cqw 1.4cqw; text-align: right; }
.score-table th:first-child { text-align: left; }
.score-table td { padding: 1.4cqw 1cqw; border-top: .3cqw solid #eceef6; font-size: 3.8cqw; text-align: right;
background: var(--panel); }
.score-table td.who { text-align: left; display: flex; align-items: center; gap: 2cqw; }
.score-table td.who .avatar { --aw: 8; background-color: transparent; box-shadow: none; flex: none;
-webkit-mask-image: none; mask-image: none;
filter: drop-shadow(0 .4cqw 1cqw rgba(0, 0, 0, .2)); }
.score-table .num { font-family: 'Digitalt', sans-serif; font-size: 5cqw; }
.score-table tr.me td { background: #fff7d6; }
.tag { display: inline-block; font-size: 2.6cqw; border-radius: 99px; padding: .3cqw 1.6cqw; margin-left: 1cqw; vertical-align: middle; color: #fff; }
.tag.dong { background: var(--purple); }
.tag.penalty { background: var(--red); }
.tag.best { background: var(--green); }
#score-effects { position: fixed; inset: 0; z-index: 46; pointer-events: none;
display: flex; align-items: center; justify-content: center; }
.score-stage { overflow: visible; }
.level-up { position: absolute; left: 50%; top: 45%; display: flex; flex-direction: column; align-items: center;
width: 90cqw; text-align: center; overflow-wrap: break-word;
font-family: 'Digitalt', sans-serif; line-height: 1; color: var(--gold); text-shadow: 0 1cqw 0 rgba(0, 0, 0, .45), 0 0 4cqw rgba(255, 200, 40, .55);
transform: translate(-50%, -50%) scale(0); }
.level-up-title { font-size: 16cqw; line-height: .95; }
.level-up-level { font-size: 8cqw; color: #fff; margin-top: 1.5cqw; }
.score-gain { position: absolute; color: black; font-family: 'Digitalt', sans-serif;
font-size: 18.518519cqw; line-height: 1; white-space: nowrap;
transform: translate(-50%, -50%) scale(0); }