/*
 * 公共样式：全屏画布、防误触、儿童友好配色变量
 * 所有游戏页面共用这一份
 */

:root {
    /* 柔和马卡龙配色，避免高饱和刺眼色 */
    --bg-top: #cdeafd;
    --bg-bottom: #fef6e4;
    --ink: #3d3d5c;
    --ink-soft: #7a7a99;
    --orange: #ff9f43;
    --teal: #4ecdc4;
    --blue: #5b8def;
    --yellow: #ffd93d;
    --pink: #ff8fa3;
    --green: #7bc86c;
    --panel: #fffaf3;
    --shadow: rgba(61, 61, 92, 0.18);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--ink);
    /* 禁止长按选中、拖拽、系统菜单，避免小孩乱按触发浏览器行为 */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
    /* 优先使用系统中文字体，保证各平台都清晰 */
    font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
}

body {
    /* 用动态视口高度，避免移动端地址栏伸缩导致画面跳动 */
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
}

canvas#stage {
    display: block;
    /* 关掉浏览器默认触摸手势（滚动、双指缩放），全部交给游戏自己处理 */
    touch-action: none;
    image-rendering: auto;
}

/* 横屏提示遮罩：竖屏游戏在横屏时提醒转回来 */
#rotate-tip {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 24px;
    background: var(--panel);
    color: var(--ink);
    font-size: 24px;
    z-index: 100;
}

#rotate-tip .icon {
    font-size: 72px;
    animation: rotate-hint 2s ease-in-out infinite;
}

@keyframes rotate-hint {

    0%,
    40%,
    100% {
        transform: rotate(0deg);
    }

    60%,
    90% {
        transform: rotate(-90deg);
    }
}

/* 屏幕比例过于扁平时才提示（平板竖屏不提示） */
@media (orientation: landscape) and (max-aspect-ratio: 21/9) and (max-height: 500px) {
    #rotate-tip {
        display: flex;
    }
}