/* 《烏鴉攻塔》畫面：依 design/agy/style.md（和風神社：木構五重塔、繪馬、御守、和紙）重做 */
* { box-sizing: border-box; }
:root {
  --vermilion: #c83c23; --vermilion-dk: #8f2716;
  --wood: #2b1b17; --wood-dk: #1d1412; --wood-btn: #6d4c41; --wood-btn-dk: #4e342e; --wood-edge: #a1887f;
  --gold: #f5c842; --gold-dk: #e5a823;
  --washi: #faf6ed; --washi-dk: #f0eae1; --ink-dark: #3e2723;
  --win: #ffffff; --danger: #ff4d4f; --buff-add: #52c41a; --buff-mul: #faad14; --trap: #b37feb;
  --glow: #8a4fd0; --bg-img: url(../img/bg-forest.webp);
  --num-font: "Fredoka", "LXGW WenKai TC", system-ui, sans-serif;
}
body[data-seg="kuu"]    { --bg-img: url(../img/bg-forest.webp); --glow: #6a994e; }
body[data-seg="stella"] { --bg-img: url(../img/bg-night.webp);  --glow: #818cf8; }
body[data-seg="aity"]   { --bg-img: url(../img/bg-neon.webp);   --glow: #e879f9; }
body[data-seg="gaiden"] { --bg-img: url(../img/bg-forest.webp); --glow: #f5c842; } /* 外傳：塔擦乾淨了，回到白天的森林 */

html, body { margin: 0; height: 100%; }
body {
  background: #1a1626; color: var(--washi);
  font-family: "LXGW WenKai TC", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  overflow: hidden; user-select: none; -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }
[hidden] { display: none !important; }

.screen { height: 100dvh; position: relative; }

/* 木質按鈕（上方列、面板、劇情跳過） */
header { display: flex; align-items: center; gap: 6px; padding: 10px 10px; position: relative; z-index: 1; }
header h2 { flex: 1; margin: 0; font-size: 1.15rem; white-space: nowrap; }
header button { white-space: nowrap; }
header button, #story-skip {
  background: linear-gradient(180deg, var(--wood-btn), var(--wood-btn-dk)); border: 2px solid var(--wood-edge); color: #fff8e1;
  border-radius: 12px; padding: 6px 10px; font-weight: 700; box-shadow: 0 3px 0 var(--wood-dk), 0 4px 10px #0006;
}
@media (max-width: 400px) { header button { padding: 6px 8px; font-size: .9rem; } #game > header h2 { padding: 4px 10px; font-size: 1rem; } }
header button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--wood-dk); }

/* ---------- 標題 ---------- */
#title {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 16px;
  background: linear-gradient(#0000 40%, #0009), url(../img/bg-night.webp) center / cover;
}
.title-okami { width: min(220px, 52vw); aspect-ratio: 4 / 5; object-fit: cover; border-radius: 50% 50% 18px 18px; border: 4px solid var(--gold); background: #ffffff18; box-shadow: 0 8px 30px #000a; }
h1 { font-size: clamp(2.6rem, 11vw, 4rem); margin: 10px 0 0; letter-spacing: .12em; color: #fff; text-shadow: 0 3px 0 var(--vermilion-dk), 0 0 18px #000, 0 0 2px #000; }
.sub { color: #f0eae1; margin: 0 0 18px; text-shadow: 0 1px 4px #000; }
.cta {
  font-size: 1.4rem; font-weight: 700; padding: 12px 56px; border-radius: 14px; border: 2px solid #f3b7a8; color: #fff;
  background: linear-gradient(180deg, #d9533b, var(--vermilion-dk)); box-shadow: 0 5px 0 #5c170c, 0 8px 18px #000a;
}
.cta:active { transform: translateY(3px); box-shadow: 0 2px 0 #5c170c; }

/* ---------- 選關：和遊戲同一套（夜景背景、木匾、章節場景卡、繪馬按鈕） ---------- */
#select {
  display: flex; flex-direction: column; color: #fff8e1;
  background: linear-gradient(#0c0a12cc, #0c0a12ee), url(../img/bg-night.webp) center / cover;
}
#select > header { background: linear-gradient(180deg, #3b2620, var(--wood)); box-shadow: 0 3px 10px #0008; border-bottom: 2px solid #5a3828; }
#select > header h2.plaque {
  flex: 0 1 220px; margin: 0 auto; padding: 8px 0 10px; text-align: center; color: var(--ink-dark); font-size: 1.3rem; letter-spacing: .3em;
  background: url(../img/ui-plaque.webp) center / 100% 100% no-repeat;
}
#daily {
  display: block; width: calc(100% - 32px); max-width: 528px; margin: 14px auto 2px; padding: 16px 12px 18px; border: 0;
  color: #fff8e1; font-size: 1.08rem; font-weight: 700; text-shadow: 0 1px 2px #000;
  background: url(../img/ui-btn-wood.webp) center / 100% 100% no-repeat; filter: drop-shadow(0 4px 8px #000a);
}
#daily:not(:disabled):active, #climb:not(:disabled):active { transform: translateY(2px); }
#climb {
  display: block; width: calc(100% - 32px); max-width: 528px; margin: 8px auto 2px; padding: 14px 12px 16px; border: 0;
  color: #fff8e1; font-size: 1.02rem; font-weight: 700; text-shadow: 0 1px 2px #000;
  background: url(../img/ui-btn-wood.webp) center / 100% 100% no-repeat; filter: drop-shadow(0 4px 8px #000a) hue-rotate(-12deg) saturate(1.2);
}
#climb:disabled, #daily:disabled { filter: grayscale(.8) brightness(.7); }
#level-grid { display: flex; flex-direction: column; gap: 16px; padding: 12px 16px 28px; max-width: 560px; width: 100%; margin: 0 auto; overflow-y: auto; }
.chapter {
  position: relative; flex: none; border-radius: 14px; padding: 10px 10px 22px; overflow: hidden; isolation: isolate; /* flex: none：不要被壓扁，超出就捲動 */
  border: 2px solid #ffffff33; box-shadow: 0 6px 18px #000a;
}
.chapter::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(#000a, #0006 40%, #000b), var(--bg-img) center 60% / cover; }
.chapter.seg-kuu    { --bg-img: url(../img/bg-forest-wide.webp); border-color: #8fbf6f88; }
.chapter.seg-stella { --bg-img: url(../img/bg-night-wide.webp);  border-color: #a5b4fc88; }
.chapter.seg-aity   { --bg-img: url(../img/bg-neon-wide.webp);   border-color: #e879f988; }
.chapter.seg-gaiden { --bg-img: url(../img/bg-forest-wide.webp); border-color: #f5c84288; }
.chapter.closed { filter: grayscale(.7) brightness(.7); }
.chapter h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 2px 4px 10px; font-size: 1.15rem; text-shadow: 0 2px 4px #000; }
.chapter h3 small { font-size: .8rem; color: #e8dccf; font-weight: 400; }
.chapter h3 span { margin-left: auto; font-family: var(--num-font); font-size: .9rem; color: var(--gold); }
.emas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px 8px; }
.lv {
  position: relative; aspect-ratio: 160 / 149; padding: 18% 0 0; border: 0; color: var(--ink-dark);
  background: url(../img/ui-ema.webp) center / contain no-repeat; filter: drop-shadow(0 3px 4px #000c);
  display: flex; align-items: center; justify-content: center;
}
.lv:not(:disabled):active { transform: translateY(2px) scale(.96); }
.lv b { font-family: var(--num-font); font-size: 1.3rem; font-weight: 700; text-shadow: 0 1px 0 #fff9; }
.lv small { position: absolute; bottom: -1.25em; left: 0; right: 0; text-align: center; color: var(--gold); font-size: .72rem; letter-spacing: -.05em; text-shadow: 0 1px 2px #000; }
.lv.boss::before { content: "👑"; position: absolute; top: -.55em; right: -.15em; font-size: 1.05rem; transform: rotate(18deg); }
.lv:disabled { filter: grayscale(1) brightness(.45) drop-shadow(0 3px 4px #000c); }

/* ---------- 遊戲版面 ---------- */
#game { isolation: isolate; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-areas: "head" "tower" "side" "crows"; }
#game::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(#0000 55%, #000a), var(--bg-img) center bottom / cover; }
#game > header { grid-area: head; }
#game > header h2 {
  flex: 0 1 auto; margin: 0 auto; padding: 4px 18px; text-align: center; color: var(--ink-dark); font-size: 1.15rem; font-weight: 700;
  background: var(--washi); border-left: 5px solid var(--vermilion); border-right: 5px solid var(--vermilion); border-radius: 4px; box-shadow: 0 3px 8px #0006;
}
#tower { grid-area: tower; }
#side { grid-area: side; }
#crows { grid-area: crows; }
@media (orientation: landscape) {
  #game { grid-template-columns: 1fr minmax(280px, 34vw); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "head head" "tower side" "tower crows"; } /* 小烏鴉放右欄，塔拿到整個高度 */
  #side { flex-direction: column; justify-content: center; }
  #talk { flex-direction: column; text-align: center; }
  #portrait { width: 180px !important; height: 225px !important; }
  #target { font-size: .95rem; max-width: 260px; }
}

/* ---------- 塔（木構五重塔） ---------- */
#tower { display: flex; flex-direction: column; align-items: center; padding: 4px 12px 0; min-height: 0; overflow-y: auto; }
.floor:first-child { margin-top: auto; }
.floor { display: flex; flex-direction: column; align-items: center; filter: drop-shadow(0 6px 10px #0008); }
/* 屋簷：9-slice，兩端翹角不拉伸（t-eave 590×110，左右各 70px） */
.roof {
  position: relative; z-index: 1; box-sizing: border-box;
  width: calc((var(--room) + 6px) * var(--n) + var(--room) * 1.9); height: calc(var(--room) * .46); margin-bottom: calc(var(--room) * -.14);
  border-style: solid; border-width: 0 calc(var(--room) * .62); border-image: url(../img/t-eave.webp) 0 70 fill / 0 calc(var(--room) * .62) stretch;
}
.floor.top .roof { width: calc(var(--room) * 2.9); height: calc(var(--room) * 1.48); margin-bottom: calc(var(--room) * -.2); border: 0; background: url(../img/t-top-roof.webp) center bottom / contain no-repeat; }
/* 一層樓＝左柱＋可重複的迴廊（橫樑、欄杆、地板）＋右柱；房間站在橫樑下、欄杆前 */
.rooms {
  display: flex; align-items: flex-start; gap: 6px; box-sizing: border-box;
  height: calc(var(--room) * 1.5); padding: calc(var(--room) * .34) 0 0;
  background: url(../img/t-floor-mid.webp) center / auto 100% repeat-x;
}
.rooms::before, .rooms::after { content: ""; flex: none; align-self: stretch; width: calc(var(--room) * .62); margin-top: calc(var(--room) * -.34); background: center / auto 100% no-repeat; }
.rooms::before { background-image: url(../img/t-floor-left.webp); background-position: right center; }
.rooms::after { background-image: url(../img/t-floor-right.webp); background-position: left center; }
/* 被墨染黑的塔（tools/ink-tower.py）：一層的房間全部清掉，那層就恢復朱紅；打倒 Boss 整座塔回來。外傳的塔已經擦乾淨了，不染 */
.floor.inked .roof { border-image-source: url(../img/t-eave-ink.webp); }
.floor.top.inked .roof { background-image: url(../img/t-top-roof-ink.webp); }
.floor.inked .rooms { background-image: url(../img/t-floor-mid-ink.webp); }
.floor.inked .rooms::before { background-image: url(../img/t-floor-left-ink.webp); }
.floor.inked .rooms::after { background-image: url(../img/t-floor-right-ink.webp); }
.floor.inked { filter: drop-shadow(0 6px 10px #0008) drop-shadow(0 0 6px color-mix(in srgb, var(--glow) 55%, transparent)); }
.floor.restore { animation: restore 1s ease-out; }
@keyframes restore {
  0% { filter: drop-shadow(0 6px 10px #0008) brightness(2.2) drop-shadow(0 0 18px #ffd27a); }
  100% { filter: drop-shadow(0 6px 10px #0008) brightness(1) drop-shadow(0 0 0 #ffd27a00); }
}
.base { width: calc(var(--room) * 4.6); max-width: 100%; height: calc(var(--room) * .95); margin-top: -2px; background: url(../img/t-base.webp) center top / 100% auto no-repeat; flex: none; }

.room {
  position: relative; width: var(--room); height: var(--room); padding: 0; border: 0; border-radius: 6px;
  background: var(--room-img) center / 100% 100% no-repeat, #1a1210;
  display: flex; align-items: flex-end; justify-content: center; transition: opacity .3s, transform .15s;
}
/* 房間內部（Blender 算的，tools/blender-rooms.py）：發光紙門前的黑剪影就是敵人；墨從上角滲下來，清掉後換成乾淨的房間 */
.room { --room-img: url(../img/t-room-kuu.webp); }
.room.boss { --room-img: url(../img/t-room-kuu-boss.webp); }
.room.cleared, .room.purified { --room-img: url(../img/t-room-kuu-clean.webp); }
.room.boss.cleared, .room.boss.purified { --room-img: url(../img/t-room-kuu-clean-boss.webp); }
body[data-seg="stella"] .room { --room-img: url(../img/t-room-stella.webp); }
body[data-seg="stella"] .room.boss { --room-img: url(../img/t-room-stella-boss.webp); }
body[data-seg="stella"] .room.cleared, body[data-seg="stella"] .room.purified { --room-img: url(../img/t-room-stella-clean.webp); }
body[data-seg="stella"] .room.boss.cleared, body[data-seg="stella"] .room.boss.purified { --room-img: url(../img/t-room-stella-clean-boss.webp); }
body[data-seg="aity"] .room { --room-img: url(../img/t-room-aity.webp); }
body[data-seg="aity"] .room.boss { --room-img: url(../img/t-room-aity-boss.webp); }
body[data-seg="aity"] .room.cleared, body[data-seg="aity"] .room.purified { --room-img: url(../img/t-room-aity-clean.webp); }
body[data-seg="aity"] .room.boss.cleared, body[data-seg="aity"] .room.boss.purified { --room-img: url(../img/t-room-aity-clean-boss.webp); }
body[data-seg="gaiden"] .room { --room-img: url(../img/t-room-gaiden.webp); }
body[data-seg="gaiden"] .room.boss { --room-img: url(../img/t-room-gaiden-boss.webp); }
body[data-seg="gaiden"] .room.cleared, body[data-seg="gaiden"] .room.purified { --room-img: url(../img/t-room-gaiden-clean.webp); }
body[data-seg="gaiden"] .room.boss.cleared, body[data-seg="gaiden"] .room.boss.purified { --room-img: url(../img/t-room-gaiden-clean-boss.webp); }
.room:not(:disabled):active { transform: scale(.94); }
.room .num {
  position: absolute; top: 3%; left: 50%; transform: translateX(-50%); z-index: 1; white-space: nowrap;
  font-family: var(--num-font); font-weight: 700; font-size: calc(var(--room) * .23); line-height: 1.15; color: var(--win);
  padding: 0 .35em; border-radius: 999px; background: #2b1b17dd; box-shadow: 0 0 0 1.5px var(--gold-dk);
}
.room.strong .num { color: var(--danger); box-shadow: 0 0 0 1.5px var(--vermilion), 0 0 8px #a8071a; }
.room.cleared { opacity: .5; pointer-events: none; } /* 清掉的房間換成乾淨的房間圖，淡一點表示已經走過 */
.room.cleared > * { display: none; }
.room.locked .mascot { filter: grayscale(.6) brightness(.8); }
.room.locked { cursor: not-allowed; }
.room.locked .num { color: #eee !important; }
.room.locked .num::before { content: "⏳"; font-size: .75em; } /* 塔頂等其他房清完；🔒 只給鑰匙門 */
.room.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.room.selecting { outline: 3px dashed var(--gold); outline-offset: -2px; }
.room.hint, .crow.hint { animation: hint .8s ease-in-out infinite alternate; }
@keyframes hint { from { box-shadow: 0 0 0 2px var(--gold); } to { box-shadow: 0 0 20px 7px var(--gold); } }

.mascot { position: relative; display: block; width: 56%; height: 56%; margin-bottom: 9%; }
.mascot.mid { width: 64%; height: 64%; }
.mascot.big, .mascot.boss { width: 78%; height: 70%; margin-bottom: 7%; }
.mascot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated;
  filter: brightness(.12) saturate(0) drop-shadow(0 0 3px var(--glow)); transition: filter 1.2s; }
.room.purified { opacity: 1 !important; }
.room.purified > .mascot { display: block !important; }
.room.purified .mascot img { filter: none; }
.room.boss { width: calc(var(--room) * 1.3); }
.room.giant { width: calc(var(--room) * 1.6); }
.room.giant .mascot { width: 96%; height: 88%; margin-bottom: 2%; }

/* 外傳：鑰匙、上鎖的門、會長大的 59。鑰匙和門用同一色配對 */
.room[data-pair="1"] { --pair: #f5c842; } .room[data-pair="2"] { --pair: #5ff0ff; }
.key-badge { position: absolute; right: 2%; bottom: 4%; font-size: calc(var(--room) * .28); filter: drop-shadow(0 0 4px var(--pair)) drop-shadow(0 0 2px var(--pair)); }
.room.keyholder { box-shadow: inset 0 0 0 3px var(--pair); }
.key-icon { align-self: center; font-size: calc(var(--room) * .42); filter: drop-shadow(0 0 6px var(--pair)); }
.room.key { box-shadow: inset 0 0 0 3px var(--pair); }
.room.barred { box-shadow: inset 0 0 0 4px var(--pair), 0 0 8px var(--pair); }
.room.barred::after { content: "🔒"; position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--room) * .38); background: #1a1626aa; border-radius: 6px; text-shadow: 0 0 8px var(--pair); }
.grow-tag { position: absolute; left: 4%; bottom: 6%; font-family: var(--num-font); font-weight: 700; font-size: max(12px, calc(var(--room) * .24)); color: #95de64; background: #1a2e12dd; border-radius: 6px; padding: 0 .25em; }
.grow-tag.down { color: #ffd591; background: #3a2410dd; }
.room.grow .mascot img { filter: brightness(.12) saturate(0) drop-shadow(0 0 4px #95de64); }

/* 吞噬特效 */
.mascot.eaten { animation: eaten .38s ease-in forwards; }
@keyframes eaten { to { transform: scale(.1) rotate(200deg); opacity: 0; } }
.spark { position: absolute; left: 50%; top: 55%; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; z-index: 2; box-shadow: 0 0 6px currentColor; animation: spark .55s ease-out forwards; }
@keyframes spark { from { transform: translate(-50%, -50%) scale(1); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mascot.eaten, .spark { animation: none; } .spark { display: none; } }

/* 藥水瓶：綠（+）、金（×）、紫黑毒瓶（陷阱） */
.bottle { width: 34%; height: 44%; margin-bottom: 12%; border-radius: 30% 30% 45% 45% / 20% 20% 55% 55%; position: relative; border: 2px solid #fffc; box-shadow: inset -3px -3px 0 #0003; }
.bottle::before { content: ""; position: absolute; top: -30%; left: 30%; width: 40%; height: 30%; background: #8d6e63; border-radius: 3px; }
.add .bottle { background: linear-gradient(#fff6 35%, var(--buff-add) 35%); box-shadow: 0 0 10px #52c41a88; }
.mul .bottle { background: linear-gradient(#fff6 35%, var(--buff-mul) 35%); box-shadow: 0 0 10px #faad1488; }
.sub .bottle, .div .bottle { background: linear-gradient(#fff4 35%, #3a1a5a 35%); box-shadow: 0 0 10px #9254de; }
.add .num { color: #95de64; } .mul .num { color: #ffd666; }
.sub .num, .div .num { color: var(--trap); }
.div .num { font-weight: 900; -webkit-text-stroke: .5px currentColor; font-family: system-ui, sans-serif; font-size: 1.08em; } /* ÷ 在小字下容易看成 +：換成點比較清楚的系統字 */

/* ---------- 歐咖咪：繪馬戰力、對話 ---------- */
#side { display: flex; align-items: center; gap: 10px; padding: 4px 12px; min-height: 0; }
#hero { position: relative; display: flex; flex-direction: column; align-items: center; flex: none; }
#power {
  font-family: var(--num-font); font-size: 1.9rem; font-weight: 700; color: var(--ink-dark); min-width: 76px; text-align: center;
  padding: 12px 12px 4px; background: linear-gradient(135deg, #ffe082, #ffb300);
  clip-path: polygon(0 28%, 50% 0, 100% 28%, 100% 100%, 0 100%); /* 繪馬的五角形 */
  filter: drop-shadow(0 3px 0 #8d6e63); text-shadow: 0 1px 0 #fff8;
}
#power.pop { animation: pop .35s; }
#combo { position: absolute; margin-top: -2.6em; margin-left: 5.5em; font-family: var(--num-font); font-weight: 700; color: #ffe58f; text-shadow: 0 2px 0 #8a4b00, 0 0 8px #000; opacity: 0; pointer-events: none; white-space: nowrap; }
#combo.show { animation: combo .9s ease-out; }
@keyframes combo { 0% { opacity: 0; transform: scale(.6); } 20% { opacity: 1; transform: scale(1.25); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: translateY(-14px); } }
#tower.quake { animation: quake .4s; }
@keyframes quake { 20% { transform: translate(-4px, 2px); } 40% { transform: translate(4px, -2px); } 60% { transform: translate(-3px, 1px); } 80% { transform: translate(2px, 0); } }
@media (prefers-reduced-motion: reduce) { #tower.quake, #combo.show, #power.pop, #hero.hop #hero-sprite { animation: none; } #combo.show { opacity: 1; } }
#target { font-family: var(--num-font); font-size: .78rem; color: #fff8e1; text-shadow: 0 1px 2px #000; white-space: pre-line; text-align: center; max-width: 170px; }
#preview { min-height: 1.4em; margin-top: 2px; font-family: var(--num-font); font-weight: 700; font-size: 1.05rem; text-shadow: 0 1px 3px #000, 0 0 2px #000; }
#preview.up { color: #b7eb8f; } #preview.down { color: #ffd591; } #preview.bad { color: var(--danger); }
@keyframes pop { 40% { transform: scale(1.3); } }
#hero-sprite { position: relative; width: 84px; height: 88px; }
#hero-sprite img, .crow-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
#hero.hop #hero-sprite { animation: hop .45s; }
@keyframes hop { 40% { transform: translateY(-18px); } }
#talk { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
#talk[hidden] { display: flex !important; visibility: hidden; } /* 保留位置，塔才不會跳動 */
#portrait { width: 72px; height: 90px; object-fit: cover; flex: none; border-radius: 12px; border: 3px solid var(--gold); background: var(--washi-dk); box-shadow: 0 3px 8px #0006; }
#line {
  margin: 0; background: var(--washi); color: var(--ink-dark); border: 2px solid #8d6e63; border-radius: 14px;
  padding: 8px 12px; font-size: 1rem; line-height: 1.45; box-shadow: 0 4px 10px #0005;
}

/* ---------- 小烏鴉：御守 ---------- */
#crows { display: flex; justify-content: center; gap: 12px; padding: 8px 12px calc(12px + env(safe-area-inset-bottom)); min-height: 12px; }
.crow {
  position: relative; display: flex; flex-direction: column; align-items: center; width: 78px; padding: 16px 4px 6px; border: 0; color: #fff;
  font-weight: 700; font-size: .92rem; text-shadow: 0 1px 2px #0008;
  clip-path: polygon(18% 0, 82% 0, 100% 14%, 100% 100%, 0 100%, 0 14%); /* 御守的斜肩 */
  box-shadow: inset 0 0 0 3px #ffd66666; transition: transform .1s;
}
.crow::before { content: ""; position: absolute; top: 3px; left: 50%; width: 18px; height: 9px; transform: translateX(-50%); border: 2px solid #fff; border-bottom: 0; border-radius: 9px 9px 0 0; } /* 繩結 */
.crow[data-crow="peek"]   { background: linear-gradient(180deg, #7361b0, #5b4b8a); }
.crow[data-crow="skip"]   { background: linear-gradient(180deg, #3a9a84, #2a7b68); }
.crow[data-crow="double"] { background: linear-gradient(180deg, #e0553b, var(--vermilion)); }
.crow:active:not(:disabled) { transform: translateY(3px); }
.crow.active { box-shadow: inset 0 0 0 3px var(--gold); filter: brightness(1.15); }
.crow-img { position: relative; width: 50px; height: 50px; }
.crow-left { position: absolute; top: -4px; right: -6px; z-index: 2; color: #fff; font-style: normal; font-family: var(--num-font); font-size: .8rem; background: #000a; border-radius: 6px; padding: 0 4px; }

/* ---------- 數字飛行 / 結算面板 ---------- */
.fly { position: fixed; z-index: 10; pointer-events: none; font-family: var(--num-font); font-weight: 700; font-size: 1.9rem; color: #fff; text-shadow: 0 0 4px #000, 0 2px 0 #000; }
.fly.sub, .fly.div { color: var(--trap); }
#panel { position: fixed; inset: 0; z-index: 20; background: #000a; display: flex; align-items: center; justify-content: center; padding: 16px; }
#panel.low { background: #0005; align-items: flex-end; }  /* 失敗面板縮小放在下方，看得到塔 */
#panel.low #panel-portrait { width: 96px; height: 120px; }
.card {
  background: var(--washi); color: var(--ink-dark); border: 3px solid var(--vermilion); outline: 2px solid var(--gold-dk); outline-offset: 3px;
  border-radius: 18px; padding: 16px 20px 20px; text-align: center; width: min(340px, 100%); animation: pop .3s; box-shadow: 0 10px 30px #000a;
}
#panel-portrait { width: 160px; height: 200px; object-fit: cover; border-radius: 14px; border: 3px solid var(--gold); background: var(--washi-dk); }
.card h3 { margin: 8px 0 4px; font-size: 1.6rem; color: var(--vermilion-dk); }
.card p { margin: 0 0 6px; white-space: pre-line; font-size: .95rem; }
#panel-stars { color: var(--gold-dk); font-size: 2rem; letter-spacing: .1em; text-shadow: 0 2px 0 #8d6e63; }
#panel-buttons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 10px; }
#panel-buttons button {
  border: 2px solid #f3b7a8; border-radius: 12px; padding: 9px 20px; font-weight: 700; color: #fff;
  background: linear-gradient(180deg, #d9533b, var(--vermilion-dk)); box-shadow: 0 3px 0 #5c170c;
}
#panel:not(.choices) #panel-buttons button:last-child:not(:first-child) { background: linear-gradient(180deg, var(--wood-btn), var(--wood-btn-dk)); border-color: var(--wood-edge); box-shadow: 0 3px 0 var(--wood-dk); }

/* ---------- 劇情（和紙捲軸） ---------- */
#story { position: fixed; inset: 0; z-index: 30; background: linear-gradient(#0000 30%, #000c); display: flex; align-items: flex-end; justify-content: center; padding: 16px; cursor: pointer; }
#story-skip { position: absolute; top: 12px; right: 12px; }
.story-box {
  display: flex; align-items: flex-end; gap: 14px; width: min(720px, 100%); color: var(--ink-dark); padding: 14px 18px;
  background: var(--washi); border: 3px solid var(--vermilion); border-left-width: 10px; border-right-width: 10px; border-radius: 10px;
  box-shadow: 0 0 0 3px var(--wood), 0 10px 30px #000c; margin-bottom: env(safe-area-inset-bottom);
}
#story-portrait { width: 144px; height: 180px; object-fit: cover; flex: none; border-radius: 10px; border: 3px solid var(--gold); background: var(--washi-dk); margin-top: -64px; box-shadow: 0 4px 12px #0006; }
#story-portrait.sprite { object-fit: contain; image-rendering: pixelated; }
#story-portrait.dark { filter: brightness(.22) saturate(0) drop-shadow(0 0 6px var(--glow)); }
.story-words { flex: 1; min-width: 0; padding-bottom: 6px; }
.story-words b { color: var(--vermilion); font-size: 1.15rem; border-bottom: 2px solid #c83c2344; }
.story-words p { margin: 6px 0; font-size: 1.15rem; line-height: 1.55; }
.story-words small { color: #8d6e63; }
.story-words small::after { content: " ▼"; }
@media (max-width: 500px) { #portrait { display: none; } /* 直式手機：左邊已有歐咖咪小人，讓卷軸寬一點 */ #story-portrait { width: 96px; height: 120px; margin-top: -44px; } .story-words p { font-size: 1.02rem; } }

/* ---------- 第 2 輪 UI 素材（design/agy2）：木牌按鈕、匾額、繪馬、御守、捲軸 ---------- */
header button, #story-skip {
  background: none; border-style: solid; border-width: 6px 9px; border-image: url(../img/t-btn-wood.webp) 30 40 fill / 6px 9px stretch;
  border-radius: 0; box-shadow: none; filter: drop-shadow(0 3px 3px #000a); padding: 2px 3px; min-width: 0;
}
header button:disabled { filter: grayscale(.6) brightness(.75); opacity: 1; }
#game > header h2 {
  background: url(../img/ui-plaque.webp) center / 100% 100% no-repeat; border: 0; border-radius: 0; box-shadow: none;
  padding: 8px 18px 10px; filter: drop-shadow(0 3px 3px #0009); min-width: 0;
}
#power {
  clip-path: none; background: url(../img/ui-ema.webp) center / 100% 100% no-repeat; filter: drop-shadow(0 3px 4px #000a);
  min-width: 84px; padding: 22px 14px 8px; text-shadow: 0 1px 0 #fff9;
}
.crow {
  clip-path: none; box-shadow: none; width: 62px; height: 89px; padding: 22px 2px 8px; font-size: .8rem; /* 寬高固定（御守圖 196×283）；padding 不用 %，% 會照整列寬度算 */ background: center / 100% 100% no-repeat; filter: drop-shadow(0 3px 4px #000a);
  color: #3e2723; text-shadow: none; justify-content: flex-end;
}
.crow::before { content: none; }
.crow[data-crow] { background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } /* 蓋過舊的漸層 shorthand */
.crow[data-crow="peek"]   { background-image: url(../img/t-omamori-purple.webp); }
.crow[data-crow="skip"]   { background-image: url(../img/t-omamori-green.webp); }
.crow[data-crow="double"] { background-image: url(../img/t-omamori-red.webp); }
.crow .crow-img { width: 34px; height: 34px; }
#game > header { overflow: hidden; } /* 不讓頂部列把頁面撐寬 */
.crow.active { box-shadow: none; filter: drop-shadow(0 0 8px var(--gold)) brightness(1.1); }
.crow:disabled { filter: grayscale(.8) brightness(.7); opacity: 1; }
#line, .story-box {
  background: none; border-style: solid; border-width: 16px; border-radius: 0; box-shadow: none;
  border-image: url(../img/t-scroll.webp) 70 60 fill / 16px stretch; filter: drop-shadow(0 4px 8px #0009); /* 切在內框紅線外側，紅線就不會被拉到字上 */
}
.story-box { border-width: 26px 40px; border-image-width: 26px 40px; outline: 0; }
#line { padding: 4px 6px; white-space: pre-line; }
.credit { position: absolute; bottom: calc(8px + env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; font-size: .72rem; color: #fff9; text-shadow: 0 1px 2px #000; }

/* ---------- 閃亮粉絲：墨沒染全，帶金光；右上角倒數步數 ---------- */
.room.shiny .mascot img { filter: drop-shadow(0 0 1px #7a4a00) drop-shadow(0 0 1px #7a4a00) drop-shadow(0 0 7px #ffb300); }
.room.shiny { animation: shiny 1.2s ease-in-out infinite alternate; }
@keyframes shiny { to { box-shadow: 0 0 16px 4px #ffd66699; } }
.shiny-tag { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); z-index: 2; padding: 0 4px; white-space: nowrap; border-radius: 8px; background: #fff3c4; color: #8a5a00; font: 700 .72rem var(--num-font); box-shadow: 0 1px 3px #0006; }
@media (prefers-reduced-motion: reduce) { .room.shiny { animation: none; box-shadow: 0 0 12px 3px #ffd66699; } }
.head-btns { display: flex; gap: 6px; }

/* 桌機／橫向：用 Antigravity 第 3 輪畫的寬背景（左半邊留給塔，比較安靜） */
@media (orientation: landscape) and (min-width: 700px) {
  body[data-seg="kuu"], body[data-seg="gaiden"] { --bg-img: url(../img/bg-forest-wide.webp); }
  body[data-seg="stella"] { --bg-img: url(../img/bg-night-wide.webp); }
  body[data-seg="aity"]   { --bg-img: url(../img/bg-neon-wide.webp); }
  #title { background-image: linear-gradient(#0000 40%, #0009), url(../img/bg-night-wide.webp); }
}
#panel-buttons button.bet { background: linear-gradient(#5b3a8c, #3b2363); color: #ffe9a8; border-color: #ffd666; }
.room.shiny .mascot { background: radial-gradient(circle, #ffd666cc 0%, #ffb30066 45%, transparent 72%); border-radius: 50%; } /* 白色的粉絲在白房間也看得出在發光 */
/* 預覽泡泡：直接顯示在房間上方 */
.room[data-tip]::after {
  content: attr(data-tip); position: absolute; top: -1.5em; left: 50%; transform: translateX(-50%); z-index: 5; pointer-events: none;
  padding: 1px 8px; border-radius: 10px; white-space: nowrap; font: 700 .85rem var(--num-font); color: #fff; background: #2b1d14e6; box-shadow: 0 2px 6px #0008;
}
.room[data-tip-kind="up"]::after { color: #b7eb8f; } .room[data-tip-kind="down"]::after { color: #ffd591; } .room[data-tip-kind="bad"]::after { color: #ff7875; }
.room.review-bad { outline: 3px solid #ff4d4f; outline-offset: 2px; }
.today-shiny { margin: 2px 4px 10px; color: #ffe58f; font-size: .9rem; text-shadow: 0 1px 3px #000; }
.lv.glow { filter: drop-shadow(0 0 8px #ffd666) drop-shadow(0 3px 4px #000c); }
/* 御守上的字：深色底的小牌子，壓在花紋上也看得清楚（使用者回報字太不明顯） */
.crow .crow-name { display: block; margin-top: 2px; padding: 1px 7px; border-radius: 8px; background: #2b1d14e8; color: #fff6e0; font-size: .9rem; font-weight: 700; letter-spacing: .05em; white-space: nowrap; box-shadow: 0 1px 3px #0008; }
.crow.active .crow-name { background: #8a5a00; }

/* 圖鑑格 */
.dex-grid { margin-top: 10px; text-align: left; white-space: normal; }
.dex-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.dex-row > b { width: 100%; font-size: .9rem; color: #8d6e63; }
.dex-cell { display: flex; flex-direction: column; align-items: center; width: 64px; padding: 4px 2px; border-radius: 10px; background: #efe3cf; border: 2px solid #d8c6a8; }
.dex-cell img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; filter: brightness(0) opacity(.35); }
.dex-cell.got img { filter: none; }
.dex-cell.gold { border-color: #e0a800; box-shadow: 0 0 8px #ffd666; background: #fff6d6; }
.dex-cell small { font-size: .68rem; line-height: 1.2; text-align: center; color: #5d4037; }
.lv small .old { font-style: normal; font-size: .62rem; margin-left: 2px; padding: 0 3px; border-radius: 4px; background: #5d4037; color: #ffe0b2; }

/* 選關最下面：試玩紀錄、快速演出 */
.select-tools { display: flex; gap: 10px; justify-content: center; margin: 14px 0 24px; }
.select-tools button { padding: 6px 14px; border-radius: 10px; border: 2px solid #8d6e63; background: #3e2723cc; color: #ffe0b2; font: inherit; font-size: .9rem; }
/* 試玩紀錄表 */
table.stats { margin: 10px auto 0; border-collapse: collapse; font-family: var(--num-font); font-size: .78rem; color: #3e2723; }
table.stats th, table.stats td { white-space: nowrap; padding: 2px 5px; border-bottom: 1px solid #d7ccc8; text-align: right; }
table.stats th { color: #8d6e63; font-weight: 700; }
table.stats tr.worst td { background: #ffccbc; }

/* 面板太高（結算＋捕獲台詞＋下一層預告＋御守）時可以捲動，短手機也點得到最下面的按鈕 */
#panel { overflow-y: auto; align-items: safe center; }
#panel > .card { max-height: none; margin: auto 0; }
@supports not (align-items: safe center) { #panel { align-items: flex-start; } }
#step-count { font-family: var(--num-font); font-size: .78rem; color: #ffe58f; text-shadow: 0 1px 2px #000; text-align: center; }
.stats-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* 手機上表格太寬：左右滑 */
.dex-note { margin: 8px 0 0; font-size: .78rem; color: #8d6e63; text-align: center; }

/* 手機：連點房間不要被當成雙擊放大 */
html, body, button { touch-action: manipulation; }
/* 存檔匯出／匯入 */
#save-code { width: 100%; box-sizing: border-box; margin-top: 8px; font: .75rem/1.3 monospace; border: 2px solid #d7ccc8; border-radius: 8px; padding: 6px; background: #fffaf2; color: #3e2723; user-select: text; }
#stale-tab { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 60; padding: 10px 12px; border-radius: 10px; background: #3e2723f2; color: #ffe0b2; font-size: .9rem; box-shadow: 0 4px 12px #000a; }
#stale-tab button { margin-left: 8px; padding: 2px 10px; border-radius: 8px; border: 1px solid #ffe0b2; background: #8d6e63; color: #fff; font: inherit; }
.select-tools { flex-wrap: wrap; }