/* 俄罗斯方块专属样式（公共组件、变量见 ../../style.css）
   桌面沿用护眼童趣暖色主题；移动端按设计稿改为糖果蓝天空风 */

/* ===== 移动端设计稿专属类（桌面端隐藏，避免干扰现有布局） ===== */
.ctl-btn-main, .ctl-btn-sub { display: none; }
.ctl-rotate-text { display: none; }
.ctl-rotate-btn { display: none; }   /* 旋转胶囊键仅移动端显示，桌面端隐藏 */
.ctl-down-arrow { display: inline; }
.ctl-svg { display: none; }          /* SVG 图标仅移动端显示，桌面端用文字符号 */
.ctl-glyph { display: inline; }      /* 文字符号仅桌面端显示 */
.ctl-svg-inline { display: none; }

#app {
  display: grid;
  grid-template-columns: 250px auto;
  gap: 20px;
  align-items: start;
  width: 100%;
  max-width: 720px;
}

#sidebar {
  background: var(--panel);
  border-radius: 18px;
  padding: 22px 20px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.actions { display: flex; flex-direction: column; gap: 8px; }

/* 模式切换：分段按钮（复用 code-logic len-btn 视觉） */
.mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: #f0e9d6;
  border-radius: 12px;
  padding: 4px;
}
.mode-btn {
  position: relative;
  display: block;
  cursor: pointer;
}
.mode-btn input { position: absolute; opacity: 0; pointer-events: none; }
.mode-btn span {
  display: block;
  text-align: center;
  padding: 8px 0;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: #7a6f5c;
  transition: background .15s, color .15s;
  user-select: none;
}
.mode-btn input:checked + span {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 6px rgba(61, 101, 148, 0.35);
}

/* Next 预览 */
.next-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.next-box .control-label { align-self: flex-start; }
#next { background: #faf6ea; border-radius: 12px; border: 1px solid var(--border); }

/* 主区 */
#play-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px 18px;
  background: var(--panel);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.status-bar {
  font-size: 15px;
  color: var(--primary);
  font-weight: 600;
  min-height: 1.4em;
}

/* 棋盘：糖果蓝框「屏幕」感，包住 Canvas */
.board-wrap {
  border: 2px solid #b9d4ec;
  border-radius: 14px;
  overflow: hidden;
  line-height: 0;
  box-shadow: inset 0 0 14px rgba(60, 90, 140, 0.12), 0 6px 16px -8px rgba(60, 90, 140, 0.28);
}
#board { display: block; }

/* 触屏/鼠标控制：单行 5 键——左/软降/右 + 旋转/落底
   按钮加高（≥56px）、间距加大、大圆角，拇指盲操友好 */
.touch-controls {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 8px;
  width: 100%;
  max-width: 420px;
}
.ctl-btn {
  min-height: 56px;
  padding: 0 4px;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  transition: transform .08s, background .15s, box-shadow .15s;
  box-shadow: 0 2px 6px rgba(140, 100, 40, 0.10);
}
/* 长按禁弹「复制/选择」菜单：连子元素（SVG/label 文字）一起禁止选择与系统呼出 */
#touch-controls, .touch-controls,
.touch-controls * {
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-touch-callout: none !important;
}
/* 按钮内文字层不接收事件，长按目标始终是按钮本身（选择手柄/放大镜无从附着） */
.touch-controls .ctl-btn-main,
.touch-controls .ctl-btn-sub,
.touch-controls .ctl-label,
.touch-controls .ctl-glyph {
  pointer-events: none;
}
@media (hover: hover) {
  .ctl-btn:hover { background: #f4ecda; }
}
.ctl-btn:active {
  transform: scale(0.94);
  background: #efe6cf;
  box-shadow: inset 0 2px 6px rgba(140, 100, 40, 0.15);
}
.ctl-rotate, .ctl-tap { font-size: 22px; }
.ctl-drop {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 3px 8px rgba(61, 101, 148, 0.35);
}
.ctl-drop:active { background: var(--primary-dark); }
.ctl-btn { white-space: nowrap; }

/* 移动端顶栏「开始/暂停」单按钮：桌面端默认隐藏，移动端媒体查询内显示 */
.btn-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(180deg, #ffffff, #d8e8f7);
  border: 1px solid #bcd3e9;
  box-shadow: 0 4px 10px -4px rgba(40, 80, 140, 0.30);
  font-size: 16px; color: #2b3a55; cursor: pointer;
  padding: 0; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}

/* 小屏：字号收缩，控制区撑满可用宽度 */
@media (max-width: 480px) {
  .touch-controls { max-width: none; }
  .ctl-btn { font-size: 17px; border-radius: 13px; }
  .ctl-rotate, .ctl-tap { font-size: 19px; }
}

/* 结束弹窗记录行 */
.modal-content .win-record { color: var(--primary); font-size: 15px; min-height: 1.2em; }

/* ===== 桌面端控制区：HTML 为移动端嵌套结构，桌面用 CSS 拍平回单行 4 键 ===== */
@media (min-width: 721px) {
  /* 桌面：Next 预览放棋盘右侧上方空白区（玩家一眼可见） */
  #play-area {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      ". board next"
      ". ctl .";
    align-items: start;
    column-gap: 24px;
    row-gap: 14px;
    padding: 20px 24px;
  }
  .board-wrap { grid-area: board; }
  .next-box {
    grid-area: next;
    align-self: start;              /* 自然高度，顶部与棋盘对齐 */
    display: flex;
    flex-direction: column;
    align-items: flex-start;        /* Next 文字与方块左对齐 */
    gap: 10px;
    padding: 2px 0 0;
    min-width: 90px;
  }
  .next-box .control-label { font-size: 13px; align-self: flex-start; }
  #next { width: 72px !important; height: 72px !important; }

  /* 面板底部键位速查（伪元素，不进 DOM） */
  .next-box::after {
    white-space: pre;
    font-size: 11.5px;
    line-height: 1.9;
    color: #9a8d76;
    text-align: center;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
    width: 100%;
  }
  .touch-controls {
    grid-area: ctl;
    justify-self: start;
    display: flex;
    gap: 8px;
    width: 300px;
    max-width: none;
  }
  .ctl-side { display: contents; }        /* 去掉移动端的竖排容器 */
  .ctl-label { display: none; }           /* 桌面无文字标签 */
  .ctl-rotate, .ctl-round, .ctl-down-btn {
    flex: 1;
    min-height: 54px;
    border-radius: 13px;
    font-size: 20px;
  }
  .ctl-round {
    background: var(--panel);
    color: var(--text);
    border: 1.5px solid var(--border);
    box-shadow: none;
  }
  .ctl-down-btn {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: none;
  }
  .ctl-down-btn:active { background: var(--primary-dark); }

  /* 桌面第 4 键恢复为旋转；加速键恢复纯图标 ↓（主文字/小字均隐藏） */
  .ctl-down-btn .ctl-btn-main, .ctl-down-btn .ctl-btn-sub { display: none; }
  .ctl-down-btn .ctl-down-arrow { display: inline; font-size: 20px; }

  /* 桌面 4 键排序：左 / 加速下落 / 右 / 旋转（DOM 顺序不变，仅用 order 重排） */
  #ctl-left   { order: 1; }
  #ctl-down   { order: 2; flex: 1.25; }
  #ctl-right  { order: 3; }
  #ctl-rotate { order: 4; }
}

/* ===== 移动端竖屏适配（按设计稿：糖果蓝天空主题 + 顶栏/统计条/棋盘/三行按键布局） ===== */
@media (max-width: 720px) {
  html, body { overflow-x: hidden; }
  body {
    align-items: flex-start;
    padding: 6px 6px max(6px, env(safe-area-inset-bottom));
    background:
      radial-gradient(120% 60% at 50% 0%, #e8f4fd 0%, rgba(232, 244, 253, 0) 60%),
      linear-gradient(180deg, #dff0fb 0%, #cfe7f8 46%, #ffffff 78%, #ffffff 100%);
  }
  #app {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: none;
    align-items: stretch;
  }

  /* sidebar 在移动端重排成：顶栏（返回/模式/切换按钮）+ 统计条 */
  #sidebar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 8px;
    width: 100%;
    padding: 8px;
    background: transparent;
    border-radius: 16px;
    box-shadow: none;
  }
  .title, .hints-tip, #sidebar .control-label, .actions { display: none; }

  .back-link { grid-area: 1 / 1; align-self: center; font-size: 13px; padding: 6px 2px; white-space: nowrap; color: #3d6594; }
  #sidebar .control-group { grid-area: 1 / 2; justify-self: center; min-width: 0; }
  /* 模式分段：设计稿白底胶囊 + 蓝色选中态 */
  .mode-switch {
    background: #ffffff;
    border-radius: 999px;
    padding: 3px;
    box-shadow: 0 2px 8px rgba(61, 101, 148, 0.12);
  }
  .mode-btn span {
    padding: 6px 12px;
    font-size: 12px;
    white-space: nowrap;
    color: #7a8aa5;
    border-radius: 999px;
  }
  .mode-btn input:checked + span {
    background: linear-gradient(135deg, #5a9cf8, #3d7ef0);
    color: #fff;
    box-shadow: 0 2px 6px rgba(61, 126, 240, 0.35);
  }

  #btn-toggle {
    grid-area: 1 / 3;
    align-self: center;
    justify-self: end;
    display: inline-flex !important;
    width: 38px; height: 38px;
    font-size: 15px;
  }

  /* 统计条：设计稿白卡、无格子底色，4 列间用竖直细线分割
     （table-layout: fixed 确保真窄屏也不被挤掉） */
  .stats {
    grid-area: 2 / 1 / 3 / 4;
    display: table;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    background: #ffffff;
    border-radius: 18px;
    padding: 10px 0;
    box-shadow: 0 3px 10px rgba(61, 101, 148, 0.10);
  }
  .stat {
    display: table-cell;
    width: 25%;
    vertical-align: middle;
    padding: 2px 4px;
    background: transparent;
    text-align: center;
  }
  .stat + .stat { border-left: 1px solid #e8edf4; }
  .stat-label { display: block; font-size: 11px; line-height: 1.2; text-align: center; color: #8d95a5; }
  .stat-value { display: block; font-size: 17px; font-weight: 800; word-break: break-all; text-align: center; margin-top: 3px; }

  /* 主区：棋盘独占整行使深蓝屏视口居中；Next 改为悬浮在棋盘卡右上角；
     控制区仍独占整行（分数栏/Next/控制区样式均不变） */
  #play-area {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    gap: 8px;
    background: transparent;
    border-radius: 16px;
    box-shadow: none;
  }
  /* 棋盘卡：白底圆角大留白（效果图中深蓝屏居中在浅色卡内），横跨整行 */
  .board-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: linear-gradient(180deg, #e3eef8 0%, #d3e6f6 100%);
    border: none;
    border-radius: 20px;
    overflow: visible;
    padding: 12px;
    box-shadow: 0 10px 24px -10px rgba(32, 60, 94, 0.35);
  }
  .touch-controls { width: 100%; }

  /* Next：悬浮在棋盘卡右上角（覆盖在棋盘卡上方，不占布局列） */
  .next-box {
    position: absolute;
    top: 0;
    right: 0;
    width: 58px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    margin-top: 0;
    padding: 2px 5px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(61, 101, 148, 0.10);
    z-index: 2;
  }
  .next-box .control-label {margin-top: 4px; display: block; font-size: 12px; font-weight: 800; color: #2f3e5c; align-self: flex-start; }
  #next {width: 40px !important; height: 40px !important; border-radius: 9px; background: #ffffff; border: none; align-self: center; }

  /* 棋盘宽度：屏宽与剩余高度双约束（窄屏取屏宽，矮屏按高度收缩）
     预留 316px = 顶栏+统计+棋盘卡留白+控制区+页边；下限 120px 保极矮屏不溢出 */
  #board {
    width: min(100%, max(120px, calc((100vh - 316px) * 0.5))) !important;
    width: min(100%, max(120px, calc((100dvh - 316px) * 0.5))) !important;
    height: auto !important;
    border-radius: 4px;
  }

  /* 控制区：2×2 布局
     行1 左移/右移蓝色胶囊 + 下方文字标签 · 行2 橙黄「快速下落」/ 紫色「旋转」
     （桌面端第 4 键是旋转 .ctl-rotate，移动端隐藏） */
  .touch-controls {
    max-width: none;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "left right"
      "down drop";
    gap: 14px 14px;
    padding: 2px 12px 0;
  }
  .ctl-btn { min-height: 48px; border-radius: 999px; font-size: 18px; }
  /* 移动端显示旋转胶囊键（桌面端全局隐藏）；SVG 图标替代文字符号（各机型渲染一致） */
  .ctl-rotate-btn { display: flex; }
  #ctl-rotate { display: none; }
  .ctl-down-arrow { display: none; }
  .ctl-glyph { display: none; }
  .ctl-svg { display: block; width: 26px; height: 26px; }
  .ctl-svg-inline { display: inline-block; width: 20px; height: 20px; vertical-align: -4px; margin-right: 6px; }

  /* 左右：蓝色胶囊钮 + 下方文字标签（左移钮靠左对齐、右移钮靠右对齐，文字随钮同侧） */
  .ctl-side { display: flex; flex-direction: column; gap: 5px; }
  .ctl-side--left { grid-area: left; align-items: flex-start; }
  .ctl-side--right { grid-area: right; align-items: flex-end; }
  .ctl-round {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 94px;
    height: 56px;
    min-height: 56px;
    border-radius: 999px;
    background: linear-gradient(180deg, #64b4f6, #3d8ff2);
    color: #fff;
    border: none;
    box-shadow: 0 6px 14px rgba(61, 143, 242, 0.42);
  }
  .ctl-round:active { background: #3480e8; }
  .ctl-label { font-size: 13px; color: #3c4a63; font-weight: 700; }

  /* 行2 通用：双色胶囊（主文字 + 括号小字两行居中） */
  .ctl-down-btn, .ctl-rotate-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-height: 58px;
    padding: 6px 8px;
    border-radius: 999px;
    line-height: 1.15;
    border: none;
  }
  .ctl-btn-main { display: block; font-size: 16px; font-weight: 800; }
  .ctl-btn-sub { display: block; font-size: 10.5px; font-weight: 600; opacity: 0.92; }

  /* 快速下落：橙黄渐变胶囊（效果图配色），按住软降 */
  .ctl-down-btn {
    grid-area: down;
    background: linear-gradient(180deg, #ffd44f, #f8a825);
    color: #fff;
    box-shadow: 0 6px 14px rgba(248, 168, 37, 0.45);
  }
  .ctl-down-btn:active { background: #ee9a18; }

  /* 旋转：紫色胶囊（效果图配色），点击顺时针旋转 90° */
  .ctl-rotate-btn {
    grid-area: drop;
    background: linear-gradient(180deg, #9c7df6, #7b5ce9);
    color: #fff;
    box-shadow: 0 6px 14px rgba(123, 92, 233, 0.45);
  }
  .ctl-rotate-btn:active { background: #6a4cd8; }

  /* 统计条文字色（设计稿：数值深蓝，最高分金色） */
  .stat-value { color: #2e3a59; }
  .stat:nth-child(2) .stat-value { color: #e2a422; }
  .stat:nth-child(2) .stat-label::before { content: '👑'; font-size: 10px; margin-right: 2px; }

  /* 主题底色需求：全页避开米黄，游戏内容区透明融入天空渐变 */
  #play-area, #sidebar { background: transparent; }
}