/*
 * 琪露诺刨冰摊（Cirnos_ShavedIceStand）样式表
 * 路由：/games/cirno
 * 设计约束：
 *  - 页面自上而下为：顶部导航栏 / 居中正方形舞台 / 底部脚注，舞台按剩余空间缩小；
 *  - 导航栏与脚注为独立实现（.crino-nav / .crino-footer），与游戏整体终端风一致；
 *  - 游戏区 : 面板区 = 7 : 3；
 *  - 方块与分隔线为浅灰，背景为低亮近黑（低对比灰调，护眼）；
 *  - 区域划分使用白线，框内上下内边距 1px、左右内边距 2px。
 */

:root {
    --crino-fg: #d8d8d8;
    --crino-bg: #121212;
    --crino-dim: rgba(216, 216, 216, 0.72);
    --crino-faint: rgba(216, 216, 216, 0.26);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--crino-bg);
    color: var(--crino-fg);
    font-family: Consolas, "Courier New", "Microsoft YaHei UI", "Noto Sans SC", monospace;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
    /* clip 彻底禁止程序化滚动：技能提示粒子画布出血会撑出可滚动区域，
       导致 scrollIntoView 类操作把整个页面滚偏（老浏览器忽略 clip 回退到 hidden） */
    overflow: clip;
}

.crino-body {
    display: flex;
    flex-direction: column;
}

/* ==================== 顶部导航栏（独立实现，终端风） ==================== */
.crino-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--crino-fg);
    background: var(--crino-bg);
    font-size: clamp(0.8rem, 2.2vmin, 1.1rem);
}

.crino-nav-brand {
    /* 颜色与右侧导航链接一致 */
    color: var(--crino-dim);
    font-weight: 700;
    letter-spacing: 0.08em;
}

.crino-nav-links {
    display: flex;
    gap: 18px;
}

.crino-nav-links a {
    color: var(--crino-dim);
    text-decoration: none;
    padding: 2px 6px;
}

.crino-nav-links a:hover {
    /* 悬停反色高亮，与游戏内按钮一致 */
    color: var(--crino-bg);
    background: var(--crino-fg);
}

/* 品牌文字拆分：桌面端整行显示「秘封茶话 - 琪露诺刨冰摊(CirnoKakigori)」，
   手机端仅显示站名，游戏名移至右侧汉堡菜单左边（见底部媒体查询） */
.crino-nav-bar {
    /* 桌面端不参与布局，子元素直接并入导航栏弹性排布 */
    display: contents;
}

.crino-nav-game-mobile {
    display: none;
}

/* 汉堡菜单按钮：仅手机端显示，三横线，展开后变为 X（与主页交互一致） */
.crino-nav-burger {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 6px 4px;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.crino-nav-burger span {
    width: 22px;
    height: 2px;
    background: var(--crino-fg);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.crino-nav-burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.crino-nav-burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.crino-nav-burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* ==================== 舞台（正方形，白线框，导航栏与脚注之间居中） ==================== */
.crino-stage {
    position: relative;
    /* 插入导航栏与脚注后整体缩小：边长按剩余视口高度折减 */
    width: min(94vw, calc(94vh - 152px));
    height: min(94vw, calc(94vh - 152px));
    border: 1px solid var(--crino-fg);
    /* 上下内边距 1px，左右内边距 2px */
    padding: 1px 2px;
    background: var(--crino-bg);
    /* 在导航栏与脚注之间的剩余空间内水平垂直居中 */
    margin: auto;
}

/* 标题页不显示外圈白框（保留边框占位，避免各屏尺寸跳变） */
.crino-stage[data-screen="title"] {
    border-color: transparent;
}

/* 结算页不显示外圈白框（同样保留边框占位，维持各屏尺寸一致） */
.crino-stage[data-screen="result"] {
    border-color: transparent;
}

/* 死亡收场：黑幕掩去游戏画面时，舞台白框同步淡出（黑幕在 screen 内部，覆盖不到舞台自身的边框） */
.crino-stage.stage-veil {
    border-color: transparent;
    transition: border-color 0.6s linear;
}

.crino-screen {
    display: none;
    width: 100%;
    height: 100%;
}

.crino-screen.active {
    display: flex;
}

/* ==================== 底部脚注 ==================== */
.crino-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 14px;
    border-top: 1px solid var(--crino-fg);
    background: var(--crino-bg);
    color: var(--crino-dim);
    font-size: clamp(0.7rem, 1.9vmin, 0.95rem);
}

/* 备案号链接与公安备案图标（格式与主站脚注一致） */
.crino-footer a {
    color: inherit;
    text-decoration: none;
}

.crino-footer a:hover {
    color: var(--crino-fg);
    text-decoration: underline;
}

.crino-footer-beian img {
    height: 1em;
    vertical-align: -0.15em;
    margin: 0 4px 0 8px;
}

/* ==================== 通用按钮 ==================== */
.crino-btn {
    min-width: 132px;
    padding: 8px 22px;
    background: transparent;
    color: var(--crino-fg);
    border: 1px solid var(--crino-fg);
    border-radius: 0;
    font-family: inherit;
    font-size: clamp(0.85rem, 2.2vmin, 1.15rem);
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.crino-btn:hover:not(:disabled) {
    background: var(--crino-fg);
    color: var(--crino-bg);
}

.crino-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* ==================== 标题页 / 结算页（上下两半） ==================== */
#screen-title,
#screen-result {
    flex-direction: column;
}

.crino-half {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    padding: 1px 2px;
}

/* 标题页 / 结算页均不使用白线划分上下区域，此处不再保留分隔线 */

/* 标题 Logo（图片标题，白色线条、透明底，2:1）。
   默认整体隐藏（右缘内缩 100%），由开场动画的碎片粒子自左向右扫过逐渐显现；
   揭示完成由 .reveal 动画的 forwards 保持，JS 重进标题页时移除/重加该类即可重播 */
.crino-logo {
    display: block;
    width: min(80%, 440px);
    height: auto;
    clip-path: inset(0 100% 0 0);
}

/* Logo 揭示的粒子画布：绝对定位于半区中心（与居中 Logo 重叠），
   画幅由 JS 按 Logo 实际尺寸向四周出血设定，承载与消除方块同款的碎片粒子 */
.crino-logo-fx {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* 开场：碎片粒子自左向右扫过（0.9s 线性，与 JS 前沿推进同速），Logo 在线段经过后逐渐显现 */
.crino-logo.reveal {
    animation: crino-logo-reveal 0.9s linear forwards;
}

@keyframes crino-logo-reveal {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

/* “点击屏幕继续”：循环淡入淡出 */
.crino-title-hint {
    font-size: clamp(0.9rem, 2.6vmin, 1.5rem);
    letter-spacing: 0.08em;
    animation: crino-hint-fade 1.8s ease-in-out infinite;
    transition: opacity 0.4s ease;
}

.crino-title-hint.fade-out {
    animation: none;
    opacity: 0;
}

@keyframes crino-hint-fade {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.12;
    }
}

/* 三个按键：与原文字同一位置淡入 */
.crino-title-menu {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease;
}

.crino-title-menu.show {
    opacity: 1;
    visibility: visible;
}

/* 标题页按键不显示边框（保留边框占位，避免尺寸跳变） */
#screen-title .crino-btn {
    border-color: transparent;
}

/* 结算页按键同样不显示边框（保留边框占位） */
#screen-result .crino-btn {
    border-color: transparent;
}

/* 结算页分数 */
.crino-result-score {
    text-align: center;
}

/* 结算页「满目疮痍！」配图（baka.png，1024×1024）与标语：
   两者插在分数上方，分数显示位置随之整体下移 */
.crino-result-baka {
    display: block;
    height: min(20vmin, 180px);
    width: auto;
}

.crino-result-baka-text {
    font-size: clamp(0.9rem, 2.6vmin, 1.5rem);
    font-weight: 700;
    letter-spacing: 0.1em;
}

.crino-result-label {
    font-size: clamp(1rem, 3vmin, 1.8rem);
    letter-spacing: 0.1em;
}

.crino-result-value {
    margin-top: 10px;
    font-size: clamp(1.8rem, 6.5vmin, 3.6rem);
    font-weight: 700;
}

/* ==================== 游戏页（游戏区宽度按 11:22 网格比例自适应） ==================== */
#screen-game {
    flex-direction: column;
    position: relative;   /* 进场过渡的黑幕 / 粒子画布 / 倒计时以它定位 */
    overflow: hidden;     /* 过渡元素不越出舞台（避免遮罩滑出后撑出滚动条） */
}

/* ==================== 进入游戏过渡（黑幕下滑 + 粒子扫过 + 3·2·1 倒计时） ==================== */
/* 黑幕：开局瞬间盖住游戏页内容，随扫过自上向下退出（clip-path 上缘内收实现下滑，不产生位移溢出） */
.crino-game-cover {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: var(--crino-bg);
    pointer-events: none;
}

.crino-game-cover.slide {
    animation: crino-game-cover-slide 0.6s linear forwards;
}

@keyframes crino-game-cover-slide {
    from {
        clip-path: inset(0 0 0 0);
    }

    to {
        clip-path: inset(100% 0 0 0);
    }
}

/* 死亡收场：黑幕自上向下盖住游戏画面（下缘内收从 100% 收到 0，与 slide 的滑出方向相反） */
.crino-game-cover.veil {
    animation: crino-game-cover-veil 0.6s linear forwards;
}

@keyframes crino-game-cover-veil {
    from {
        clip-path: inset(0 0 100% 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

/* 死亡提示：大号「Ohno！」淡入上浮后淡出（时长与 DEATH_OHNO_MS 保持一致） */
.crino-ohno {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(3rem, 14vmin, 7rem);
    font-weight: 700;
    color: var(--crino-fg);
    opacity: 0;
    pointer-events: none;
}

.crino-ohno.show {
    animation: crino-ohno-float 1.2s ease-out forwards;
}

@keyframes crino-ohno-float {
    0% {
        opacity: 0;
        transform: translateY(24px);
    }

    30% {
        opacity: 1;
    }

    70% {
        opacity: 1;
        transform: translateY(-14px);
    }

    100% {
        opacity: 0;
        transform: translateY(-30px);
    }
}

/* 粒子画布：覆盖整个游戏屏，在黑幕上缘（扫过前沿）喷发与消除方块同款的基础粒子。
   canvas 是替换元素，inset:0 不会拉伸它，必须显式宽高 100% */
.crino-game-fx {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    pointer-events: none;
}

/* 倒计时数字：屏幕中央大号弹出，每个数字独立播放弹出动画 */
.crino-countdown {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(4rem, 20vmin, 10rem);
    font-weight: 700;
    color: var(--crino-fg);
    pointer-events: none;
}

.crino-countdown.pop {
    animation: crino-countdown-pop 0.8s ease-out forwards;
}

@keyframes crino-countdown-pop {
    0% {
        opacity: 0;
        transform: scale(1.6);
    }

    30% {
        opacity: 1;
        transform: scale(1);
    }

    75% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.92);
    }
}

/* ==================== 结算页进场过渡（黑幕扫过 + 配图标语揭示 + 分数滚动 + 按钮淡入） ==================== */
#screen-result {
    position: relative;   /* 黑幕 / 粒子画布以它定位 */
    overflow: hidden;     /* 过渡元素不越出舞台 */
}

/* 进入结算页瞬间的隐藏态：配图与标语整体隐藏（右缘内缩），分数与底部三键透明且不可点 */
#screen-result.rs-intro .crino-half-top {
    clip-path: inset(0 100% 0 0);
}

#screen-result.rs-intro .crino-result-score {
    opacity: 0;
}

#screen-result.rs-intro .crino-half-bottom .crino-btn {
    opacity: 0;
    pointer-events: none;
}

/* 配图与标语：切入结算页后自左向右逐渐显现（0.7s 线性，与粒子前沿同步；不再有黑幕扫过延迟） */
#screen-result.rs-reveal .crino-half-top {
    animation: crino-result-reveal 0.7s linear forwards;
}

@keyframes crino-result-reveal {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

/* 分数：配图揭示完成后快速淡入（数字由 JS 从 0 滚动到最终分）。
   注意 rs-score 规则须位于 rs-intro 之后：两处同特异性，后者按源序覆盖前者 */
#screen-result .crino-result-score {
    transition: opacity 0.35s ease;
}

#screen-result.rs-score .crino-result-score {
    opacity: 1;
}

/* 底部三键：最后淡入；隐藏态不可点击，淡入后恢复可点 */
#screen-result .crino-half-bottom .crino-btn {
    transition: opacity 0.5s ease;
}

#screen-result.rs-btns .crino-half-bottom .crino-btn {
    opacity: 1;
    pointer-events: auto;
}

/* 游戏画面主体：左侧游戏区 + 右侧面板区（手机端媒体查询会将该块整体置于上半部分） */
.crino-game-main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: row;
}

.crino-field {
    /* 宽度由高度与网格比例(11:22)推导，使可移动范围左右不再留多余空白 */
    flex: 0 0 auto;
    height: 100%;
    aspect-ratio: 11 / 22;
    min-width: 0;
    position: relative;
    padding: 1px 2px;
}

/* vivo 专属适配：部分 vivo 自带浏览器内核（Chromium 88 之前）不支持 aspect-ratio，
   游戏区宽度失去推导依据，canvas 被容器拉伸——表现为画面横向变形。
   vivo 环境停用该属性，改由 JS 显式同步尺寸（宽 = 高 × 11/22，
   见 cirno-shaved-ice-stand.js「vivo 浏览器专属适配」）；非 vivo 环境不受影响 */
html.crino-vivo .crino-field {
    aspect-ratio: auto;
}

.crino-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.crino-panel {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--crino-fg);
    padding: 6px 4px;
}

.crino-panel-top {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 下一个冰块预览（位于“收入”上方） */
.crino-next {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--crino-faint);
}

.crino-next-label {
    color: var(--crino-dim);
    font-size: clamp(0.75rem, 2.1vmin, 1.15rem);
}

.crino-next-canvas {
    display: block;
    align-self: center;
    width: 40%;
    max-width: 100px;
    aspect-ratio: 1 / 1;
}

.crino-stat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--crino-faint);
    font-size: clamp(0.75rem, 2.1vmin, 1.15rem);
}

.crino-stat-label {
    color: var(--crino-dim);
    white-space: nowrap;
}

.crino-stat-value {
    font-weight: 700;
    font-size: 1.2em;
}

/* 冰冻冲击提示：右下角操作说明上方，入场为碎片线段自右向左扫过逐渐显现，退场为逆向动画 */
.crino-blast {
    margin-top: auto;
    /* 常驻占位，避免显示/隐藏时操作说明上下跳动 */
    min-height: 1.8em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: clamp(0.75rem, 2.1vmin, 1.15rem);
    font-weight: 700;
    letter-spacing: 0.06em;
}

.crino-blast-box {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

/* 文字默认整体隐藏（左缘内缩 100%），由线段扫过逐渐显现；
   nowrap：手机端面板较窄，字幕（如 [冷冻爆破]Freeze Blasting!）不允许折成两行 */
.crino-blast-text {
    display: block;
    white-space: nowrap;
    clip-path: inset(0 0 0 100%);
}

/* 粒子画布：叠在文字上方并向四周出血，承载与消除方块同款的碎片粒子 */
.crino-blast-particles {
    position: absolute;
    left: -90px;
    top: -40px;
    width: calc(100% + 180px);
    height: calc(100% + 80px);
    pointer-events: none;
}

/* 入场：碎片粒子自右向左扫过，文字在线段经过后逐渐显现 */
.crino-blast.show .crino-blast-text {
    animation: crino-blast-reveal 0.55s ease-out forwards;
}

@keyframes crino-blast-reveal {
    from {
        clip-path: inset(0 0 0 100%);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

/* 退场：逆向动画，碎片粒子自左向右扫回，文字随之隐去 */
.crino-blast.hide .crino-blast-text {
    animation: crino-blast-conceal 0.55s ease-in forwards;
}

@keyframes crino-blast-conceal {
    from {
        clip-path: inset(0 0 0 0);
    }

    to {
        clip-path: inset(0 0 0 100%);
    }
}

/* ==================== 订单系统 ==================== */
/* 每 30 秒刷新一个订单，完成随机奖励 1~2 点灵力；右上角为下一次刷新倒计时 */
.crino-order {
    position: relative;
    margin: 8px 0;
    padding: 5px 26px 5px 8px;
    border: 1px solid var(--crino-fg);
    font-size: clamp(0.62rem, 1.8vmin, 0.8rem);
    line-height: 1.55;
    pointer-events: none;
}

.crino-order.done {
    border-style: dashed;
}

/* 失效订单（.failed 由 JS 在违反硬性要求时添加）：与完成态同为虚线框，标题加删除线示警 */
.crino-order.failed {
    border-style: dashed;
}

.crino-order.failed .crino-order-title {
    text-decoration: line-through;
    color: var(--crino-dim);
}

.crino-order.failed .crino-order-reward {
    color: var(--crino-dim);
}

/* 新订单切入提示（.intro 由 JS 在提示期间添加）：
   订单文本占位隐藏、栏体尺寸与正式显示保持一致，提示文字由 ::after 在栏中心显示 */
.crino-order.intro .crino-order-title,
.crino-order.intro .crino-order-desc,
.crino-order.intro .crino-order-reward {
    visibility: hidden;
}

.crino-order.intro::after {
    content: '接到新的订单！';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* 失效特写（.failfx 由 JS 在判负瞬间添加，时长与切入提示一致）：
   与 .intro 同款布局——文本占位隐藏、提示文字由 ::after 在栏中心覆盖显示 */
.crino-order.failfx .crino-order-title,
.crino-order.failfx .crino-order-desc,
.crino-order.failfx .crino-order-reward {
    visibility: hidden;
}

.crino-order.failfx::after {
    content: '订单失效！';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.crino-order-timer {
    position: absolute;
    top: 4px;
    right: 6px;
    color: var(--crino-dim);
}

.crino-order-title {
    font-weight: 700;
    color: var(--crino-fg);
}

.crino-order-desc {
    color: var(--crino-dim);
}

.crino-order-reward {
    color: var(--crino-fg);
}

.crino-controls {
    margin-top: 10px;
    text-align: center;
    font-size: clamp(0.7rem, 1.9vmin, 1.05rem);
    line-height: 1.75;
    color: var(--crino-dim);
}

/* ==================== 排行榜页 ==================== */
#screen-leaderboard {
    flex-direction: column;
    padding: 8px 10px;
}

.crino-lb-title {
    text-align: center;
    font-size: clamp(1rem, 3vmin, 1.6rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--crino-fg);
}

.crino-lb-body {
    flex: 1 1 auto;
    overflow-y: auto;
    margin: 8px 0;
    /* 排名信息字号：手机端与电脑端同步加大（vmin 随屏缩放，clamp 兜住两端） */
    font-size: clamp(0.85rem, 2.4vmin, 1.15rem);
    line-height: 1.45;
    /* 数字与汉字混排对齐修复：终端字体栈的 Consolas / monospace 均不含中文字形，
       安卓端数字落等宽字体、汉字经系统逐字回退到另一款 CJK 字体，
       两套字体的字号与基线不一致，表现为汉字向下偏移——
       此处整列改用中英同族的字体栈，数字与汉字逐字同源，基线天然对齐 */
    font-family: "Microsoft YaHei UI", "Noto Sans SC", "PingFang SC", sans-serif;
}

.crino-lb-row {
    display: flex;
    gap: 6px;
    padding: 4px 2px;
    border-bottom: 1px dashed rgba(216, 216, 216, 0.18);
}

.crino-lb-rank {
    flex: 0 0 2.8em;
    text-align: right;
}

.crino-lb-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crino-lb-score {
    flex: 0 0 4.8em;
    text-align: right;
    font-weight: 700;
}

.crino-lb-empty {
    padding: 24px 0;
    text-align: center;
    color: var(--crino-dim);
}

.crino-btn-small {
    align-self: center;
    min-width: 112px;
}

/* ==================== 上传弹窗 ==================== */
.crino-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.78);
}

.crino-modal.show {
    display: flex;
}

.crino-modal-box {
    width: min(84vw, 320px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px;
    background: var(--crino-bg);
    border: 1px solid var(--crino-fg);
}

.crino-modal-label {
    font-size: clamp(0.85rem, 2.2vmin, 1.1rem);
}

/* 弹窗底部按键行：取消与确定并排 */
.crino-modal-actions {
    display: flex;
    gap: 10px;
}

.crino-modal-actions .crino-btn {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 8px;
    padding-right: 8px;
}

.crino-modal-input {
    padding: 8px;
    background: transparent;
    color: var(--crino-fg);
    border: 1px solid var(--crino-fg);
    border-radius: 0;
    outline: none;
    font-family: inherit;
    font-size: clamp(0.85rem, 2.2vmin, 1.1rem);
}

.crino-upload-msg {
    min-height: 1.4em;
    font-size: clamp(0.7rem, 1.9vmin, 0.95rem);
    line-height: 1.4;
    word-break: break-word;
}

.crino-upload-msg.error {
    color: #ff8080;
}

.crino-upload-msg.ok {
    color: #80ff80;
}

/* ==================== 暂停弹窗（ESC） ==================== */
.crino-pause-box {
    align-items: stretch;
    gap: 14px;
    text-align: center;
}

.crino-pause-title {
    padding-bottom: 4px;
    font-size: clamp(1.2rem, 3.4vmin, 2rem);
    font-weight: 700;
    letter-spacing: 0.12em;
}

.crino-pause-box .crino-btn {
    width: 100%;
    min-width: 0;
}

/* 开始确认弹窗中的操作说明文字 */
.crino-start-help {
    line-height: 1.75;
    font-size: clamp(0.85rem, 2.3vmin, 1.25rem);
    color: var(--crino-dim);
}

/* 技能介绍行：小一号浅色，作为主说明的补充说明层级 */
.crino-start-help-sub {
    color: rgba(216, 216, 216, 0.5);
    font-size: 0.82em;
    letter-spacing: 0.03em;
}

/* 核心提示行：粗体主色，强调“必须用技能破坏冰块”的核心玩法 */
.crino-start-help-bold {
    font-weight: 700;
    color: var(--crino-fg);
}

/* 特殊方块说明（坚冰 / 智慧冰块）：贴图图标 + 描述文字，与上方操作说明用虚线分隔 */
.crino-help-blocks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(216, 216, 216, 0.3);
}

.crino-help-block-row {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    line-height: 1.5;
}

.crino-help-block-icon {
    display: block;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
}

.crino-help-block-text {
    font-size: clamp(0.8rem, 2.1vmin, 0.95rem);
    color: var(--crino-dim);
}

.crino-help-block-text b {
    font-weight: 700;
    color: var(--crino-fg);
}

/* ==================== 手机端虚拟按键（默认隐藏，触屏/窄屏时显示） ==================== */
.crino-touch {
    display: none;
}

/*
 * 手机端适配（触屏设备或窄屏窗口）：
 *  - 游戏屏时舞台拉伸为导航栏与脚注之间的整块区域，外框隐藏（导航栏与脚注保持原位不动）；
 *  - 保留电脑端样式的游戏画面（左棋盘 + 右面板），整体等比贴齐导航栏置于上半部分，
 *    并以白线正方形边框框出（宽随屏幕、高随宽 1:1，高度上限防止过大）；
 *  - 订单板由脚本搬移为画面方框与虚拟按键之间的独立弹性项（随方框贴齐导航栏一同上移）；
 *  - 虚拟按键整体紧跟订单栏下方显示，与键盘共用同一套输入逻辑；
 *    按键区保留内容最小高度，竖向空间不足时由画面方框收缩让位，互不重叠。
 */
@media (max-width: 820px), (pointer: coarse) {

    /* ==================== 导航栏（手机端：汉堡菜单） ==================== */
    .crino-nav {
        position: relative;
    }

    /* 品牌仅保留站名「秘封茶话」独占一行，分隔符与游戏名隐藏 */
    .crino-nav-sep,
    .crino-nav-game {
        display: none;
    }

    .crino-nav-bar {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .crino-nav-game-mobile {
        display: inline;
        color: var(--crino-dim);
        letter-spacing: 0.03em;
    }

    .crino-nav-burger {
        display: flex;
    }

    /* 链接收进汉堡菜单：展开时在导航栏下方铺满一行的终端风下拉层 */
    .crino-nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        padding: 2px 14px 6px;
        background: var(--crino-bg);
        border-bottom: 1px solid var(--crino-fg);
        z-index: 50;
    }

    .crino-nav-links.show {
        display: flex;
    }

    .crino-nav-links a {
        padding: 10px 2px;
        border-bottom: 1px dashed var(--crino-faint);
    }

    .crino-nav-links a:last-child {
        border-bottom: none;
    }

    /* ==================== 脚注（手机端：两行居中，避让手势条安全区） ==================== */
    .crino-footer {
        flex: 0 0 auto;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 6px 4px;
        padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
        text-align: center;
        /* 与主站其他页面脚注的移动端字号（12px）保持一致；
           窄于 390px 的设备按视口宽度微缩，避免合并单行后左右裁字 */
        font-size: min(12px, 3.1vw);
        line-height: 1.5;
        white-space: nowrap;
    }

    .crino-footer-beian {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 4px;
    }

    .crino-footer-beian img {
        margin: 0 2px;
    }

    /* 游戏屏：舞台填满导航栏与脚注之间，外框隐藏，由游戏画面块自带正方形边框 */
    .crino-stage[data-screen="game"] {
        flex: 1 1 auto;
        width: auto;
        height: auto;
        min-height: 0;
        margin: 0;
        border-color: transparent;
    }

    #screen-game {
        flex-direction: column;
    }

    /* 电脑端样式的游戏画面整体置于上半部分：正方形白线边框，宽随屏幕、高随宽 1:1，
       高度上限 min(62%, 520px) 防止在宽屏设备上过大；
       画面方框贴齐导航栏（无顶部留白），为下方的订单板与虚拟按键腾出空间；
       订单板由脚本搬移为本方框之后的独立弹性项（见 .crino-order 手机端规则），
       竖向空间不足时方框先收缩让位（overflow: hidden 裁切面板溢出内容），
       订单板与虚拟按键均不会与画面相互重叠 */
    .crino-game-main {
        position: relative;
        flex: 0 1 auto;
        width: auto;
        height: auto;
        max-height: min(62%, 520px);
        min-height: 0;
        aspect-ratio: 1 / 1;
        border: 1px solid var(--crino-fg);
        padding: 1px 2px;
        overflow: hidden;
    }

    /* vivo 专属适配：同上，画面方框正方形改由 JS 维护（高 = 宽，含边框）；
       max-height 上限保留，矮屏收缩让位的既有行为不变 */
    html.crino-vivo .crino-game-main {
        aspect-ratio: auto;
    }

    /* 订单板为画面方框与虚拟按键之间的独立弹性项
       （由脚本在媒体查询切换时搬移 DOM 位置），不拦截按键点击；
       窄屏时字号微缩避免换行溢出 */
    .crino-order {
        flex: 0 0 auto;
        margin: 6px 2px 0;
        pointer-events: none;
        font-size: min(12px, 3.1vw);
    }

    /* 加大右侧面板的文字（手机端基础字号随 vmin 缩得偏小，这里固定放大） */
    .crino-next-label,
    .crino-stat {
        font-size: 0.95rem;
    }

    /* 冰冻冲击提示占位与操作说明在手机端不再贴面板底部：
       紧跟「灵力」统计行排布（桌面端仍由 margin-top: auto 贴底）；
       字幕整句在一行内显示：字号微缩 + 收紧字间距，配合 .crino-blast-text 的 nowrap，
       保证 [冷冻爆破]Freeze Blasting! 等最长字幕在窄面板（约 180px）内不折行 */
    .crino-blast {
        margin-top: 2px;
        min-height: 1.4em;
        font-size: 0.68rem;
        letter-spacing: 0.02em;
    }

    /* 操作说明略小于统计行，保证面板内容不溢出正方形边框 */
    .crino-controls {
        margin-top: 2px;
        font-size: 0.8rem;
    }

    /* ==================== 虚拟按键区（订单栏下方，手柄式左右分区） ==================== */
    .crino-touch {
        display: flex;
        flex: 1 1 auto;
        /* 不设 min-height: 0：保留内容最小高度，按键永远不会被压矮或向上溢出；
           竖向空间不足时由上方画面方框（flex-shrink）收缩让位 */
        flex-direction: row;
        /* 按键整体上移：紧跟订单栏下方显示（靠近订单栏），
           按键区与画面方框 / 订单板均为文档流内弹性项，任意屏幕比例下互不重叠 */
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 12px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        touch-action: none;
        /* 长按防选中/复制：部分安卓浏览器（vivo 等）长按按键会选中文字并弹出复制菜单，
           pointerdown 的 preventDefault 在这些内核上拦不住长按选择，须显式禁用文本选择；
           连同子元素（按键文字 / small 标注）一起生效 */
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }

    /* 左侧技能区（2×2）、右侧方向键区（T 形 3×2 网格）；按比例占宽，保证拇指按击面积 */
    .crino-touch-group {
        display: grid;
        gap: 8px;
        align-content: center;
    }

    .crino-touch-skills {
        flex: 0 0 43%;
        grid-template-columns: repeat(2, 1fr);
    }

    .crino-touch-dpad {
        flex: 0 0 47%;
        grid-template-columns: repeat(3, 1fr);
    }

    .crino-dpad-cell {
        display: block;
    }

    .crino-key {
        width: 100%;
        min-width: 0;
        min-height: 52px;
        padding: 4px 2px;
        background: transparent;
        color: var(--crino-fg);
        border: 1px solid var(--crino-fg);
        border-radius: 0;
        font-family: inherit;
        font-size: 1.2rem;
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: 0.04em;
        cursor: pointer;
        touch-action: none;
        /* 长按防选中/复制（与 .crino-touch 同款：旧内核对容器级禁用落实不到按钮时兜底） */
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }

    .crino-key small {
        display: block;
        margin-top: 2px;
        font-size: 0.58rem;
        font-weight: 400;
        letter-spacing: 0.06em;
        color: var(--crino-dim);
        /* 旧引擎对 user-select 的 auto 继承落实不一，按键标注文字显式禁用 */
        -webkit-user-select: none;
        user-select: none;
    }

    /* 按下反色高亮，与站内按钮一致 */
    .crino-key:active {
        background: var(--crino-fg);
        color: var(--crino-bg);
    }

    .crino-key:active small {
        color: var(--crino-bg);
    }

    /* 技能按键使用虚线边框，呼应游戏内的技能框选虚线框 */
    .crino-key-skill {
        border-style: dashed;
    }

    /* 方向键十字中心的取消键：正方形——高度随网格行撑满（与 ←/→ 等高），
       宽度按 aspect-ratio 1:1 推导，在较宽的中列内水平居中；
       max-width 兜底：极窄屏幕上中列不足正方形边长时收缩为撑满单元格，
       避免横向溢出压到相邻的 ←/→ 按键；
       字号微缩避免「取消」二字在正方形内换行溢出 */
    .crino-key-square {
        width: auto;
        min-height: 0;
        max-width: 100%;
        aspect-ratio: 1 / 1;
        justify-self: center;
        padding: 2px 4px;
        font-size: 1rem;
    }

    .crino-key-square small {
        margin-top: 1px;
        font-size: 0.5rem;
    }

    /* vivo 专属适配：旧内核不支持 aspect-ratio，取消键的 width:auto 会塌缩为文字宽度——
       改为与方向键行高一致的固定正方形（52px = .crino-key 的 min-height），
       在中列内水平居中；max-width: 100% 仍兜底极窄屏（此时退化为矩形，不压相邻按键） */
    html.crino-vivo .crino-key-square {
        width: 52px;
        height: 52px;
        min-height: 52px;
        aspect-ratio: auto;
        align-self: center;
    }
}

/* ==================== 灵力点飞行动画（纯视觉） ==================== */
/* 破坏方块时在方块处刷新的 power 点（<img>，由 JS 创建）：
   固定定位 + transform 居中，飞行路径由 JS 逐帧改写 left / top */
.crino-power-fly {
    position: fixed;
    z-index: 40;
    pointer-events: none;
    transform: translate(-50%, -50%);
    image-rendering: pixelated;
}

/* ==================== 设置弹窗（音乐 / 音效开关） ==================== */
.crino-settings-title {
    text-align: center;
    font-weight: 700;
    font-size: clamp(1rem, 3vmin, 1.3rem);
    letter-spacing: 0.3em;
    margin-bottom: 14px;
}

.crino-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 8px 2px;
}

.crino-settings-label {
    letter-spacing: 0.2em;
}

.crino-settings-toggle {
    min-width: 72px;   /* 开 / 关切换时不因文字宽度变化而跳动 */
}

/* ==================== 分享图弹窗（成绩卡片预览 / 保存 / 系统分享） ==================== */
.crino-share-box {
    max-width: min(86vw, 430px);
}

.crino-share-preview {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--crino-fg);
}

.crino-share-msg {
    min-height: 1.4em;
    margin-top: 6px;
    font-size: 0.85em;
    color: var(--crino-dim);
    text-align: center;
}