/* ================= 《同一块石头》（DESIGN.md）=================
   UI 与世界同材质：深石板 + 衬线碑文 + 青光唯一强调（声音在场才发光）。
   承放声音的东西一律是圆凹槽：合成槽 = 物品栏石格 = 回声条 = 世界里的合成台。 */

:root{
  --ink:#E9E4D5;                                    /* 羊皮纸白 */
  --dim:#9AA3B2;                                    /* 石色系次级文字（对深石底 ≥4.5:1） */
  --teal:#54E0C8;                                   /* 唯一强调：声音在场 */
  --gold:#FFD166; --vowel:#FFD166; --cons:#8FC3FF;  /* 金=元音 蓝=辅音（只用于音素石） */
  --stone:#181B23; --stone-hi:#242835; --stone-lo:#0D0F14;
  --edge:rgba(233,228,213,.10);                     /* 刻痕 */
  --font:"Songti SC","Noto Serif SC","Source Han Serif SC","STSong","SimSun",serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:#07080B;font-family:var(--font);color:var(--ink);overflow:hidden;user-select:none}
#stage{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
#game{width:100%;height:100%;display:block;border-radius:4px;touch-action:none}
.hidden{display:none!important}

/* 浏览器表面：选区 / 焦点环 / 滚动条与设计同源 */
::selection{background:rgba(84,224,200,.28);color:var(--ink)}
:focus-visible{outline:1px solid var(--teal);outline-offset:2px}

/* 石板（原玻璃退役） */
.slab{background:linear-gradient(180deg,var(--stone-hi),var(--stone) 34%,var(--stone-lo));
  border:1px solid var(--edge);border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -1px 0 rgba(0,0,0,.40),0 2px 8px rgba(0,0,0,.45)}

/* 全屏幕布：不做浮卡，文字直接落在暗幕上（单一光源的克制） */
.screen{position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:rgba(8,9,13,.78)}
.center{text-align:center}
h1{font-size:58px;font-weight:600;letter-spacing:.34em;text-indent:.34em;color:var(--ink)}
h2{font-size:30px;font-weight:600;letter-spacing:.14em}
.sub{color:var(--dim);letter-spacing:.5em;text-indent:.5em;font-size:13px}
.rune-float{font-size:118px;color:var(--teal);text-shadow:0 0 44px rgba(84,224,200,.55),0 0 90px rgba(84,224,200,.22);animation:floatRune 4.2s ease-in-out infinite}
@keyframes floatRune{0%,100%{transform:translateY(-8px) rotate(-2.5deg)}50%{transform:translateY(10px) rotate(2.5deg)}}
#prologue p{font-size:22px;line-height:2.2;letter-spacing:.12em}
#prologue .tap{color:var(--dim);font-size:13px;letter-spacing:.3em;margin-top:26px;animation:breath 2s ease-in-out infinite}
@keyframes breath{0%,100%{opacity:.4}50%{opacity:1}}

/* 石刻按钮：主按钮 = 亮着的符文（青底光）；按下下沉，不弹跳 */
.btn{border:1px solid var(--edge);cursor:pointer;font-family:var(--font);font-size:16px;letter-spacing:.18em;text-indent:.18em;
  color:var(--ink);padding:13px 30px;border-radius:6px;
  background:linear-gradient(180deg,#20242F,#171A22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 1px 4px rgba(0,0,0,.40);
  transition:background .15s,box-shadow .15s,transform .06s}
.btn:hover{background:linear-gradient(180deg,#262B38,#1B1F29)}
.btn:active{transform:translateY(1px);box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.btn.primary{border-color:rgba(84,224,200,.45);color:#D8F7EF;
  box-shadow:inset 0 0 0 1px rgba(84,224,200,.28),inset 0 1px 0 rgba(255,255,255,.05),0 0 16px rgba(84,224,200,.20),0 1px 4px rgba(0,0,0,.40)}
.btn.primary:hover{box-shadow:inset 0 0 0 1px rgba(84,224,200,.42),0 0 22px rgba(84,224,200,.30),0 1px 4px rgba(0,0,0,.40)}
.btn.small{padding:8px 16px;font-size:13px}
.btn.ghost{background:transparent;box-shadow:none;color:var(--dim)}
.btn.ghost:hover{color:var(--ink);background:rgba(233,228,213,.04)}
.row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.day{color:var(--dim);letter-spacing:.5em;text-indent:.5em}
#summary-icons{display:flex;gap:16px;margin:10px 0}
#summary-icons img{width:64px;height:64px;border-radius:10px;background:rgba(233,228,213,.05);border:1px solid var(--edge);padding:8px;animation:popIn .5s ease backwards}
#summary-icons img:nth-child(2){animation-delay:.08s}#summary-icons img:nth-child(3){animation-delay:.16s}
#summary-icons img:nth-child(4){animation-delay:.24s}#summary-icons img:nth-child(5){animation-delay:.32s}#summary-icons img:nth-child(6){animation-delay:.4s}
@keyframes popIn{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.next{color:var(--dim);font-size:14px;letter-spacing:.1em}
.notes-body{max-width:620px;text-align:left;line-height:2.1;font-size:17px;letter-spacing:.04em}
.notes-body p{margin-bottom:12px}

/* 文本提示：不装盒子，悬浮文字 + 深投影 */
#hintbar{position:absolute;left:50%;bottom:104px;transform:translateX(-50%);z-index:30;
  font-size:15px;letter-spacing:.1em;color:#DFD9C6;max-width:72%;text-align:center;
  text-shadow:0 1px 2px #000,0 0 12px rgba(0,0,0,.85);animation:slideUp .45s ease}
#toast{position:absolute;left:50%;top:26px;transform:translateX(-50%);z-index:60;
  font-size:15px;letter-spacing:.1em;color:#DFD9C6;
  text-shadow:0 1px 2px #000,0 0 12px rgba(0,0,0,.85);animation:slideDown .35s ease}
@keyframes slideUp{from{transform:translate(-50%,24px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@keyframes slideDown{from{transform:translate(-50%,-30px);opacity:0}to{transform:translate(-50%,0);opacity:1}}

/* 工具栏：石托盘，承声的格位全是圆凹槽 */
#hotbar{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:30;display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px;animation:slideUp .5s ease}
#bar-row{display:flex;align-items:center;gap:8px}
#stone-cells,#item-cells{display:flex;gap:8px}
.bar-sep{width:1px;height:40px;background:var(--edge)}
.cell{position:relative;width:52px;height:52px;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#12151C,#0B0D12 78%);
  border:1px solid rgba(233,228,213,.10);
  box-shadow:inset 0 3px 6px rgba(0,0,0,.55),inset 0 -1px 0 rgba(255,255,255,.04);
  display:flex;align-items:center;justify-content:center;cursor:grab;transition:transform .12s}
.cell:hover{transform:translateY(-2px)}
.cell .glyph{font-size:21px;font-weight:700}
.cell.stone-v .glyph{color:var(--vowel)}.cell.stone-c .glyph{color:var(--cons)}
/* 圆凹槽的"放上石头发光"（DESIGN.md）：洞本身亮起来——元音金、辅音蓝，只给承放声音的洞 */
.cell.stone-v{border-color:rgba(255,209,102,.32);box-shadow:inset 0 3px 6px rgba(0,0,0,.55),inset 0 0 16px rgba(255,209,102,.20)}
.cell.stone-c{border-color:rgba(143,195,255,.32);box-shadow:inset 0 3px 6px rgba(0,0,0,.55),inset 0 0 16px rgba(143,195,255,.20)}
.cell img{width:38px;height:38px;pointer-events:none}
.cell .count{position:absolute;right:1px;bottom:1px;font-size:10px;line-height:14px;color:var(--ink);
  padding:0 4px;border-radius:6px;background:rgba(8,9,13,.88);border:1px solid var(--edge);text-shadow:0 1px 2px #000}
.cell.empty{opacity:.35;cursor:default}
.rune-btn{width:52px;height:52px;border-radius:50%;border:1px solid rgba(233,228,213,.10);cursor:pointer;
  background:radial-gradient(circle at 50% 38%,#12151C,#0B0D12 78%);
  box-shadow:inset 0 3px 6px rgba(0,0,0,.55);color:var(--teal);font-size:22px;font-family:var(--font);
  transition:box-shadow .15s,transform .06s}
.rune-btn:active{transform:translateY(1px)}
.rune-btn.armed{box-shadow:inset 0 3px 6px rgba(0,0,0,.55),0 0 18px rgba(84,224,200,.55);border-color:rgba(84,224,200,.60)}

/* 合成槽：与世界合成台同款的圆凹槽 */
/* 合成槽不是浮盒，是石板上凿出的一条凹槽（材质统一，禁第二物质） */
#craft-row{display:flex;gap:8px;padding:6px 12px;border-radius:10px;margin-left:18px;
  background:rgba(8,9,13,.42);border:1px solid transparent;
  box-shadow:inset 0 2px 7px rgba(0,0,0,.55),inset 0 -1px 0 rgba(255,255,255,.04)}
#craft-row .slot{position:relative;width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(233,228,213,.10);
  background:radial-gradient(circle at 50% 38%,#101319,#090B0F 80%);
  box-shadow:inset 0 3px 6px rgba(0,0,0,.60);
  display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:var(--ink)}
#craft-row .slot.filled{border-color:rgba(233,228,213,.18);
  background:radial-gradient(circle at 50% 35%,#2A303D,#171B23 82%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -2px 4px rgba(0,0,0,.35)}
#craft-row .slot.g1{box-shadow:inset 0 3px 6px rgba(0,0,0,.60),0 0 10px rgba(84,224,200,.30);border-color:rgba(84,224,200,.50)}
#craft-row .slot.g2{box-shadow:inset 0 3px 6px rgba(0,0,0,.60),0 0 18px rgba(84,224,200,.55);border-color:rgba(84,224,200,.70)}
#craft-row .slot.g3{box-shadow:inset 0 3px 6px rgba(0,0,0,.60),0 0 26px rgba(84,224,200,.80);border-color:var(--teal)}
#drag-ghost{position:fixed;z-index:99;pointer-events:none;width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:21px;font-weight:700;color:var(--ink);background:radial-gradient(circle at 50% 35%,#2A303D,#171B23 82%);
  border:1px solid rgba(233,228,213,.18);box-shadow:0 4px 10px rgba(0,0,0,.5);transform:translate(-50%,-50%) scale(1.12)}

/* 析声录 */
#journal{z-index:50;background:rgba(8,9,13,.84)}
.journal-head{position:absolute;top:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;padding:10px 16px}
.j-name{font-size:14px;letter-spacing:.34em;text-indent:.34em;color:var(--dim)}
.seg{display:flex;background:rgba(11,13,18,.70);border:1px solid var(--edge);border-radius:8px;padding:3px}
.seg-btn{border:none;background:transparent;color:var(--dim);font-family:var(--font);font-size:14px;letter-spacing:.14em;padding:8px 18px;border-radius:6px;cursor:pointer}
.seg-btn.active{background:rgba(84,224,200,.12);color:#D8F7EF;box-shadow:inset 0 0 0 1px rgba(84,224,200,.30)}
.seg-btn i{font-style:normal;opacity:.75;font-size:13px;margin-left:4px}
#rune-count{color:var(--dim);font-size:14px;letter-spacing:.14em}
.journal-body{position:absolute;top:96px;bottom:26px;left:50%;transform:translateX(-50%);width:min(1080px,92%);
  display:grid;gap:16px;overflow-y:auto;padding:6px 10px;align-content:start}
.journal-body::-webkit-scrollbar{width:6px}
.journal-body::-webkit-scrollbar-track{background:transparent}
.journal-body::-webkit-scrollbar-thumb{background:#242835;border-radius:3px}
.word-card{display:flex;align-items:center;gap:22px;padding:18px 24px;
  background:linear-gradient(180deg,var(--stone-hi),var(--stone) 40%,var(--stone-lo));
  border:1px solid var(--edge);border-radius:12px;animation:popIn .4s ease backwards}
.word-card img{width:72px;height:72px}
.word-card .wc-mid{flex:1}
.word-card canvas{width:100%;height:56px;display:block}
.ipa{color:var(--dim);font-size:17px;letter-spacing:.16em;margin-top:6px}
.ipa b{color:var(--gold)}
.rune-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:12px}
.rune-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;border-radius:12px;
  background:rgba(233,228,213,.03);border:1px solid var(--edge);cursor:pointer}
.rune-card:not(.lit){cursor:default}
.rune-card.lit canvas{animation:runeBreathC 2.6s ease-in-out infinite}
@keyframes runeBreathC{0%,100%{filter:drop-shadow(0 0 5px rgba(84,224,200,.45))}50%{filter:drop-shadow(0 0 16px #54E0C8)}}
.rune-card.lit img{width:26px;height:26px}
.rune-card .ipa{font-size:13px;margin:0}
.rune-card .sleep{font-size:11px;color:rgba(233,228,213,.26);letter-spacing:.08em}
.rune-endcard{grid-column:1/-1;text-align:center;color:var(--dim);padding:20px;font-size:14px;letter-spacing:.12em}

/* 揭示卡：全章唯一的英文拼写时刻，做成铭刻 */
#reveal{z-index:55}
#reveal-stones{display:flex;gap:14px}
#reveal-stones span{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:700;
  background:radial-gradient(circle at 50% 35%,#2A303D,#171B23 82%);border:1px solid rgba(233,228,213,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 6px rgba(0,0,0,.4);animation:popIn .5s ease backwards}
#reveal-stones span:nth-child(2){animation-delay:.15s}#reveal-stones span:nth-child(3){animation-delay:.3s}#reveal-stones span:nth-child(4){animation-delay:.45s}
#reveal-word{font-size:84px;font-weight:700;letter-spacing:.30em;text-indent:.30em;color:var(--gold);text-shadow:0 0 40px rgba(255,209,102,.45);animation:wordPop .8s .8s ease backwards}
@keyframes wordPop{0%{transform:scale(2.4);opacity:0}60%{transform:scale(.95);opacity:1}100%{transform:scale(1)}}

/* 左上小人面板（头像 + 手持槽） */
#hud-avatar{position:absolute;left:22px;top:20px;z-index:30;display:flex;align-items:center;gap:10px;padding:8px 12px}
#avatar-fig{width:56px;height:64px}
.hand-slot{width:42px;height:42px;border-radius:50%;border:1px solid rgba(233,228,213,.12);
  background:radial-gradient(circle at 50% 38%,#101319,#090B0F 80%);box-shadow:inset 0 3px 6px rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center}
.hand-slot .glyph{font-size:15px;font-weight:700}
.hand-slot.stone-v .glyph{color:var(--vowel)}
.hand-slot.stone-c .glyph{color:var(--cons)}
.hand-slot.item{border-color:rgba(233,228,213,.20);background:radial-gradient(circle at 50% 35%,#2A303D,#171B23 82%);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.hand-slot.item img{width:32px;height:32px}

/* 回声条：悬浮的音素石与念白，不装盒子 */
#echo-strip{position:absolute;left:50%;bottom:170px;transform:translateX(-50%);z-index:35;display:flex;align-items:center;gap:8px;animation:slideUp .45s ease}
#echo-strip .es-stone{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;
  background:radial-gradient(circle at 50% 35%,#2A303D,#171B23 82%);border:1px solid rgba(233,228,213,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 6px rgba(0,0,0,.45);text-shadow:0 1px 2px #000}
#echo-strip .es-stone.v{color:var(--vowel)}
#echo-strip .es-stone.c{color:var(--cons)}
#echo-strip .es-new{font-size:12px;color:var(--teal);letter-spacing:.16em;margin-left:6px;text-shadow:0 1px 2px #000}
@keyframes esMerge{30%{box-shadow:0 0 16px var(--teal);border-color:var(--teal);transform:scale(1.12)}}

/* 触摸加固：拖拽禁浏览器手势 + 禁过度滚动 */
#hotbar .cell,#craft-row .slot{touch-action:none}
body{overscroll-behavior:none}

/* 触屏跳键：右下 64px 圆钮（unlocked 同拍显示；图标 = jump，由 ch2.js 装） */
#btn-jump{position:absolute;right:28px;bottom:32px;z-index:30;width:64px;height:64px;
  display:flex;align-items:center;justify-content:center;touch-action:none}
#btn-jump img{width:42px;height:42px;pointer-events:none}

/* 旅途回顾走马灯（第三关收尾）：与结算同族；词只出图标不写字 */
#recap{gap:12px;text-align:center;cursor:pointer}
#recap .rc-day{font-size:34px;letter-spacing:.22em;text-indent:.22em;color:var(--ink);margin:0}
#recap .rc-place{color:var(--dim);letter-spacing:.18em;margin:2px 0 8px}
#recap .rc-icons{display:flex;gap:18px;justify-content:center;align-items:center;min-height:56px}
#recap .rc-icons img{width:56px;height:56px;image-rendering:pixelated;animation:wordPop .6s ease backwards}
#recap .rc-end{font-size:19px;color:var(--ink);letter-spacing:.1em;margin:0}
#recap .rc-dots{display:flex;gap:8px;justify-content:center;margin-top:12px}
#recap .rc-dots i{width:6px;height:6px;border-radius:50%;background:rgba(233,228,213,.22)}
#recap .rc-dots i.on{background:var(--teal);box-shadow:0 0 8px rgba(84,224,200,.6)}

/* 旅途完成撒花：像素小方块落下（金/青/羊皮纸/辅音蓝，与全剧同一像素语言） */
.cf-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.cf-layer i{position:absolute;top:-12px;width:6px;height:6px;border-radius:1px;animation:cfFall 2.6s linear forwards}
@keyframes cfFall{0%{transform:translateY(-10px) rotate(0deg);opacity:1}100%{transform:translateY(78vh) rotate(540deg);opacity:0}}

/* 屏级元素是暗幕不是石板：透出底下的房间，石板只给内容盒子 */
.screen.slab{background:rgba(8,9,13,.82);border:none;border-radius:0;box-shadow:none}

/* 拼词栏精修：音序线（相邻有石即连，序列感）+ 落槽轻弹 + 书钮拉开 */
#craft-row .slot.seq::after{content:'';position:absolute;right:-9px;top:50%;transform:translateY(-50%);width:8px;height:2px;
  background:rgba(84,224,200,.45);box-shadow:0 0 6px rgba(84,224,200,.40)}
#craft-row .slot.pop{animation:slotPop .32s ease}
@keyframes slotPop{0%{transform:scale(.55)}55%{transform:scale(1.14)}100%{transform:scale(1)}}
#bar-row .rune-btn{margin-left:12px}