/* 果冻罐（/lab/softbox）的样式。
   这一页不加载 site.css —— 实验区的页面各自独立，只需要 _lab.css 那个返回入口。
   纸和墨的两个颜色在这里自己定义一次，和站点保持一致。 */

:root {
  --sb-paper: #f7f3eb;
  --sb-ink: #171411;
  --sb-rule: rgba(23, 20, 17, 0.12);
  --sb-card: #ffffff;
  --sb-sans: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background: var(--sb-paper);
  color: var(--sb-ink);
  font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  -webkit-text-size-adjust: 100%;
}

.sb-shell {
  /* 上一版是 440：罐子在 400 出头，玩家反馈「太小了」。罐子本身没法再窄，
     只能把这一列放宽，让罐子拿到更多屏幕。 */
  max-width: 580px;
  margin: 0 auto;
  /* 底下留出空间：返回入口是浮在页面上的一颗胶囊，不给它留位置就会压到规则那几行 */
  padding: 28px 20px 88px;
}

.sb-head h1 {
  margin: 14px 0 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.sb-lede {
  margin: 8px 0 0;
  color: rgba(23, 20, 17, 0.72);
  font-size: 0.94rem;
  line-height: 1.65;
}

.sb-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 20px 0 12px;
}

.sb-hud__item {
  font-family: var(--sb-sans);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: rgba(23, 20, 17, 0.62);
}

.sb-hud__item b {
  /* 分数要能整体缩一下（见 .sb-pop），transform 对 inline 元素无效 */
  display: inline-block;
  margin-left: 4px;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  color: var(--sb-ink);
}

/* 分数跳一下。合并发生在盒子深处，眼睛多半不在 HUD 上，
   让数字自己动一下是把它拽回来的最省事的办法。 */
.sb-hud__item b.sb-pop {
  animation: sb-pop 0.22s ease-out;
}

@keyframes sb-pop {
  from { transform: scale(1.3); }
  to { transform: scale(1); }
}

.sb-hud__item--dim b {
  font-size: 0.95rem;
  color: rgba(23, 20, 17, 0.72);
}

.sb-hud__gap {
  flex: 1 1 auto;
}

/* 连锁条。窗口只有两秒多，光靠飘字说一句「连锁 ×2」，玩家还是不知道还剩多久，
   所以配一条会走完的细条。
   这个位置一直是占着的、一直写着「连锁 ×1」：一是有连锁就出现、断了就消失的话，
   右边那两个按钮会跟着左右跳；二是平时那句 ×1 正好把「连下去能翻倍」讲清楚了。 */
.sb-chain {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  width: 72px;
  /* 给下面那条进度条让出位置，不然它会压到隔壁的字上 */
  padding-bottom: 5px;
  color: rgba(23, 20, 17, 0.42);
}

.sb-chain--on {
  color: #b4452f;
}

.sb-chain__label {
  font-size: 0.68rem;
  opacity: 0.8;
}

.sb-chain b {
  margin: 0;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: inherit;
}

/* 进度条压在「连锁 ×2.5」这条字的底下。一开始是一条整的，窗口里从右往左走完。
   没有连锁的时候它是不出现的，但位置留着 */
.sb-chain__track {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: rgba(180, 69, 47, 0.16);
  overflow: hidden;
  opacity: 0;
}

.sb-chain--on .sb-chain__track {
  opacity: 1;
}

.sb-chain__track i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: currentColor;
  transform-origin: left center;
  transform: scaleX(1);
}

/* 只给读屏听的字：这一页的视觉全在画布上，得有个地方把「下一个是什么」
   说给屏幕阅读器（画布里的东西它读不到） */
.sb-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sb-btn {
  padding: 7px 13px;
  border: 1px solid rgba(23, 20, 17, 0.3);
  border-radius: 999px;
  background: transparent;
  color: rgba(23, 20, 17, 0.82);
  font-family: var(--sb-sans);
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 0.15s ease, color 0.15s ease;
}

.sb-btn:hover {
  background: rgba(23, 20, 17, 0.05);
}

.sb-btn--primary {
  background: var(--sb-ink);
  border-color: var(--sb-ink);
  color: var(--sb-paper);
}

.sb-btn--primary:hover {
  background: #000;
}

.sb-board {
  position: relative;
  border: 1px solid var(--sb-rule);
  border-radius: 10px;
  background: var(--sb-card);
  overflow: hidden;
}

/* 逻辑坐标 460x600 写死在 canvas 的 width/height 属性里，CSS 这层只管铺满容器：
   物理算的是逻辑坐标，屏幕多大都不影响一局的手感。 */
#sb-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 460 / 600;
  touch-action: none;
  cursor: pointer;
}

.sb-over {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(247, 243, 235, 0.86);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* display:grid 会盖掉 hidden 属性的 display:none，得自己兜一句 */
.sb-over[hidden] {
  display: none;
}

.sb-over__card {
  width: 100%;
  max-width: 300px;
  padding: 24px 26px;
  text-align: center;
}

.sb-over__title {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
}

/* 破纪录才出现。红色是站点里「真的发生了什么」的那个颜色（打卡达标、
   番茄钟专注弧线都在用），这里拿来说「这一局比之前任何一局都高」 */
.sb-over__badge {
  display: inline-block;
  margin: 10px 0 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(180, 69, 47, 0.12);
  color: #b4452f;
  font-family: var(--sb-sans);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

.sb-over__badge[hidden] {
  display: none;
}

.sb-over__score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin: 12px 0 16px;
  font-family: var(--sb-sans);
  color: rgba(23, 20, 17, 0.68);
}

.sb-over__score b {
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--sb-ink);
}

.sb-over__score i {
  font-style: normal;
  font-size: 0.8rem;
}

.sb-over__stats {
  display: grid;
  gap: 7px;
  margin: 0 0 20px;
  padding: 14px 0 0;
  border-top: 1px solid var(--sb-rule);
  font-family: var(--sb-sans);
  font-size: 0.76rem;
  color: rgba(23, 20, 17, 0.6);
}

.sb-over__stats > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.sb-over__stats dt {
  color: rgba(23, 20, 17, 0.5);
}

.sb-over__stats dd {
  margin: 0;
  color: var(--sb-ink);
}

.sb-over__stats dd b {
  font-variant-numeric: tabular-nums;
}

.sb-state {
  min-height: 1.2em;
  margin: 10px 0 0;
  font-family: var(--sb-sans);
  font-size: 0.76rem;
  color: rgba(23, 20, 17, 0.55);
}

.sb-rules {
  margin: 16px 0 0;
  padding: 0 0 0 18px;
  font-size: 0.86rem;
  line-height: 1.75;
  color: rgba(23, 20, 17, 0.62);
}

.sb-rules li {
  margin-bottom: 4px;
}

/* 成就 / 配色解锁这类「刚刚发生了什么」的一行短提示。
   它不能借用 .sb-state 那一行：那行是越线警告的地盘，每帧都在重写，
   一次性的好消息放进去会被下一帧抹掉（脚本里 toast() 上面写着这段）。 */
.sb-toast {
  margin: 8px 0 0;
  padding: 5px 10px;
  border-left: 2px solid rgba(180, 69, 47, 0.55);
  background: rgba(180, 69, 47, 0.07);
  font-family: var(--sb-sans);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  color: #b4452f;
}

.sb-toast[hidden] {
  display: none;
}

.sb-toast--in {
  animation: sb-toast-in 0.24s ease-out;
}

@keyframes sb-toast-in {
  from { transform: translateY(-3px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* 成就和配色平时折起来：它们是「想看看进度」才打开的东西，
   常驻展开会把规则那几行挤到屏幕外，而规则是新玩家真正需要的 */
.sb-panel {
  margin: 14px 0 0;
  border: 1px solid var(--sb-rule);
  border-radius: 10px;
  font-family: var(--sb-sans);
}

.sb-panel summary {
  padding: 10px 14px;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: rgba(23, 20, 17, 0.72);
  cursor: pointer;
  list-style: none;
}

.sb-panel summary::-webkit-details-marker {
  display: none;
}

/* 自己画那个三角：默认的 ▶ 在 Safari 和 Chrome 里长得不一样，
   而这一个的位置要跟右边那行字对齐 */
.sb-panel summary::before {
  content: '▸';
  display: inline-block;
  width: 1em;
  color: rgba(23, 20, 17, 0.4);
  transition: transform 0.15s ease;
}

.sb-panel[open] summary::before {
  transform: rotate(90deg);
}

.sb-panel__body {
  padding: 0 14px 14px;
  border-top: 1px solid var(--sb-rule);
}

.sb-panel__label {
  margin: 12px 0 8px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: rgba(23, 20, 17, 0.5);
}

.sb-panel__hint {
  margin-left: 8px;
  letter-spacing: 0;
  color: rgba(23, 20, 17, 0.38);
}

/* 一套配色就是一颗按钮：上面十个色块（就是那一套的十档颜色），下面是名字。
   没开的那套灰下去、名字换成还差几个成就 —— 这一条比一个锁头图标有用得多 */
.sb-palettes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sb-pal {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 7px 9px 6px;
  border: 1px solid var(--sb-rule);
  border-radius: 9px;
  background: transparent;
  font-family: var(--sb-sans);
  font-size: 0.7rem;
  color: rgba(23, 20, 17, 0.6);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sb-pal span {
  line-height: 1;
}

.sb-pal__row {
  display: flex;
  gap: 1px;
}

.sb-pal i {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
}

/* 十个色块一排。flex 的间隙就是它们之间的分界，不加边框不加阴影 ——
   这一页是平涂风，一旦给色块加上描边，整块看着就像色卡而不是配色 */
.sb-pal i:first-child {
  border-radius: 3px 2px 2px 3px;
}

.sb-pal i:last-child {
  border-radius: 2px 3px 3px 2px;
}

.sb-pal:hover:not(:disabled) {
  border-color: rgba(23, 20, 17, 0.34);
}

.sb-pal--on {
  border-color: var(--sb-ink);
  color: var(--sb-ink);
}

.sb-pal--lock {
  cursor: default;
  opacity: 0.42;
  border-style: dashed;
}

.sb-achv {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sb-achv__item {
  display: grid;
  gap: 2px;
  padding-left: 16px;
  position: relative;
  font-size: 0.74rem;
  line-height: 1.5;
  color: rgba(23, 20, 17, 0.45);
}

/* 达成和没达成只差两样：那个点实不实、字深不深。
   不加勾选图标、不加背景块 —— 十条并排，加装饰会糊成一片 */
.sb-achv__item::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 0.52em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  border: 1px solid rgba(23, 20, 17, 0.3);
}

.sb-achv__item--on {
  color: rgba(23, 20, 17, 0.8);
}

.sb-achv__item--on::before {
  background: #b4452f;
  border-color: #b4452f;
}

.sb-achv__item b {
  font-weight: 600;
  color: inherit;
}

.sb-achv__item span {
  color: rgba(23, 20, 17, 0.5);
}

.sb-achv__item--on span {
  color: rgba(23, 20, 17, 0.62);
}

/* 这一局新解锁的成就。放在结算卡片里而不是飘一下就没了的地方：
   「刚才那一手干成了一件之前没干成的事」值得在结算时再说一遍 */
.sb-over__new {
  margin: 0 0 16px;
  font-family: var(--sb-sans);
  font-size: 0.74rem;
  line-height: 1.6;
  color: #b4452f;
}

.sb-over__new[hidden] {
  display: none;
}

/* 系统的「减少动态效果」打开时，HUD 上那个数字弹一下也不要。
   （画布那边还有一套：抖动、碎屑、回弹、数字滚动、飘字上飞，
   都在脚本里按同一个开关停掉） */
@media (prefers-reduced-motion: reduce) {
  .sb-hud__item b.sb-pop {
    animation: none;
  }

  .sb-toast--in {
    animation: none;
  }

  .sb-panel summary::before {
    transition: none;
  }

  .sb-btn {
    transition: none;
  }
}

/* 手机上把画布压得高一点的欲望要克制：盒子的比例是游戏的一部分，
   改比例等于改了难度，所以这里只缩字号和留白 */
@media (max-width: 480px) {
  .sb-shell {
    padding: 22px 14px 84px;
  }

  .sb-head h1 {
    font-size: 1.3rem;
  }

  .sb-lede {
    font-size: 0.88rem;
  }

  .sb-hud {
    margin-top: 16px;
  }
}