* {
box-sizing: border-box;
}

body {
margin: 0;
padding: 0;
overflow: hidden;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
background-color: #1c0808;
color: #fffbeb;
font-family:
system-ui,
-apple-system,
sans-serif;
}

.app-shell {
position: relative;
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
height: 100dvh;
overflow: hidden;
}

.top-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 14px;
background: #2b0909;
border-bottom: 1px solid
rgba(245, 158, 11, 0.3);
z-index: 20;
flex-shrink: 0;
}

.applause-wrap {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
}

.applause-icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}

.applause-track {
position: relative;
flex: 1;
height: 18px;
background: rgba(0, 0, 0, 0.65);
border-radius: 999px;
overflow: hidden;
border: 1px solid
rgba(245, 158, 11, 0.45);
}

.applause-track.golden {
border-color: #fef08a;
box-shadow: 0 0 12px #facc15;
}

.applause-track.grace {
border-color: #ef4444;
}

.applause-fill {
height: 100%;
width: 40%;
transition:
width 0.14s ease-out,
background-color 0.2s ease;
background: #f97316;
}

.applause-fill.bar-red {
background: #ef4444;
}

.applause-fill.bar-orange {
background: #f97316;
}

.applause-fill.bar-green {
background: #22c55e;
}

.applause-fill.bar-gold {
background: linear-gradient(
90deg,
#fde047,
#f59e0b,
#fef08a
);
}

.top-right-btns {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}

.btn-gear {
width: 36px;
height: 36px;
border-radius: 8px;
border: 1px solid
rgba(245, 158, 11, 0.35);
background: #450a0a;
color: #fde68a;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
padding: 0;
font-size: 16px;
}

.btn-gear:hover {
background: #7f1d1d;
}

.stage-wrap {
position: relative;
flex: 1;
width: 100%;
overflow: hidden;
}

#game-canvas {
display: block;
width: 100%;
height: 100%;
cursor: pointer;
touch-action: none;
}

.stage-banner {
pointer-events: none;
position: absolute;
top: 20px;
left: 0;
right: 0;
display: flex;
justify-content: center;
z-index: 10;
}

.stage-banner-box {
padding: 8px 22px;
background: rgba(69, 10, 10, 0.92);
border: 2px solid #fbbf24;
border-radius: 10px;
color: #fef08a;
font-weight: 800;
font-size: 18px;
}

.overlay-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.78);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
z-index: 25;
}

.modal-card {
max-width: 340px;
width: 100%;
background: #2e0909;
border: 1px solid
rgba(245, 158, 11, 0.45);
border-radius: 14px;
padding: 20px;
text-align: center;
box-shadow: 0 18px 40px
rgba(0, 0, 0, 0.65);
}

.fans-counter-pill {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 16px;
font-weight: 800;
color: #fde047;
margin-bottom: 10px;
font-variant-numeric: tabular-nums;
}

.skin-picker {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin: 8px 0 14px 0;
}

.arrow-disabled {
width: 38px;
height: 38px;
border-radius: 8px;
border: 1px solid
rgba(255, 255, 255, 0.12);
background: rgba(0, 0, 0, 0.25);
color: rgba(255, 255, 255, 0.22);
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
cursor: not-allowed;
flex-shrink: 0;
}

.tiger-preview-svg {
width: 170px;
height: 114px;
display: block;
}

.hint-line {
margin: 0 0 16px 0;
font-size: 15px;
font-weight: 700;
color: #fef3c7;
}

.stack-col {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
}

.btn-primary {
width: 100%;
padding: 11px 16px;
background: #fbbf24;
color: #450a0a;
border: none;
border-radius: 8px;
font-weight: 800;
font-size: 14px;
cursor: pointer;
}

.btn-primary:hover {
background: #fde047;
}

.btn-secondary {
width: 100%;
padding: 10px 16px;
background: #450a0a;
color: #fde68a;
border: 1px solid
rgba(245, 158, 11, 0.35);
border-radius: 8px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
}

.fans-box {
padding: 12px;
border-radius: 8px;
background: rgba(0, 0, 0, 0.4);
border: 1px solid
rgba(245, 158, 11, 0.25);
margin-bottom: 14px;
font-variant-numeric: tabular-nums;
}

.fans-line {
display: flex;
justify-content: space-between;
font-size: 14px;
padding: 4px 0;
}

.drawer-panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: 320px;
background: #260707;
border-left: 1px solid
rgba(245, 158, 11, 0.4);
padding: 16px;
overflow-y: auto;
z-index: 30;
}

.row-between {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 12px;
}

.lang-row {
display: flex;
align-items: center;
gap: 8px;
margin-top: 6px;
}

.lang-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 7px 8px;
border-radius: 8px;
border: 1px solid
rgba(245, 158, 11, 0.3);
background: #3b0a0a;
color: #fde68a;
font-size: 12px;
font-weight: 700;
cursor: pointer;
}

.lang-btn.active {
border-color: #fbbf24;
background: #7f1d1d;
box-shadow: 0 0 8px
rgba(251, 191, 36, 0.35);
}

.flag-box {
width: 24px;
height: 16px;
border-radius: 2px;
overflow: hidden;
display: inline-flex;
flex-shrink: 0;
border: 1px solid
rgba(255, 255, 255, 0.25);
}

.flag-box svg {
width: 100%;
height: 100%;
display: block;
}

.field-group {
display: block;
margin-bottom: 12px;
font-size: 12px;
color: #fde68a;
text-align: left;
}

.field-group input[type="range"],
.field-group input[type="number"],
.field-group input[type="text"] {
width: 100%;
margin-top: 4px;
}

.field-group input[type="number"],
.field-group input[type="text"] {
padding: 6px 8px;
background: rgba(0, 0, 0, 0.45);
border: 1px solid
rgba(245, 158, 11, 0.35);
border-radius: 6px;
color: #fffbeb;
font-size: 12px;
}

.bottom-ad-bar {
width: 100%;
background: #140404;
border-top: 1px solid
rgba(245, 158, 11, 0.3);
padding: 6px 12px;
display: flex;
justify-content: center;
z-index: 20;
flex-shrink: 0;
}

.bottom-ad-link {
position: relative;
max-width: 680px;
width: 100%;
height: 54px;
border-radius: 6px;
overflow: hidden;
border: 1px solid
rgba(251, 191, 36, 0.35);
background: #0056b3;
display: block;
cursor: pointer;
text-decoration: none;
}

.bottom-ad-link img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}

.hidden {
display: none !important;
}