:root {
    --bg0: #fcfcfc;
    /* 弹出的易拉罐大小（can.png） */
    --can-size: min(90vmin, 200px);
    /* 弹出上升高度（负数越大越往上） */
    --can-rise: -110px;
    /* 调这里：热点中心位置（百分比，基于背景图容器） */
    --hotspot-x: 50.5%;
    --hotspot-y: 60%;
    /* 热点大小（建议用百分比，随屏幕缩放） */
    --hotspot-size: 4%;
}

* {
    box-sizing: border-box;
}

.counter {
    margin-top: 8px;
    font-size: 13px;
    color: rgba(0, 0, 0, .72);
}

#clickCount {
    font-weight: 700;
    margin-left: 4px;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    color: #fcfcfc;
    background: #fcfcfc;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans";
}

.head {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 3;
    padding: 14px 16px 10px;
}

.title .link {
    margin: 0;
    font-size: 28px;
    letter-spacing: .4px;

}

.sub {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}

.stage {
    position: relative;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(8, 10, 24, .55);
    box-shadow: 0 24px 90px rgba(0, 0, 0, .50);
    overflow: hidden;
}

.stage__bg {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

.spawns {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

/* 透明热点按钮 */
.hotspot {
    position: absolute;
    left: var(--hotspot-x);
    top: var(--hotspot-y);
    width: var(--hotspot-size);
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);

    z-index: 4;

    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* 开发时对齐用：如果你想临时看到热点位置，把下面注释打开 */
/*
.hotspot{
  outline: 2px dashed rgba(47,232,255,.55);
  box-shadow: 0 0 18px rgba(47,232,255,.25);
  border-radius: 999px;
}
*/

.hotspot:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(47, 232, 255, .20), 0 0 0 6px rgba(255, 47, 214, .12);
    border-radius: 999px;
}

.spawn {
    position: absolute;
    width: var(--can-size);
    height: auto;
    transform: translate(-50%, -50%) rotate(var(--r, 0deg));
    will-change: transform, left, top;
}

.foot {
    margin-top: 10px;
    color: rgba(238, 241, 255, .70);
    font-size: 13px;
    line-height: 1.6;
}

.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

@media (prefers-reduced-motion: reduce) {
    .spawn {
        filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .22));
    }
}