:root {
  --shu: #B40000; --shu2: #D0140C; --shuD: #7A0000;
  --ai: #22262E; --tan: #D9BB7B; --tanD: #A88A4E; --chochin: #FF9A3C; --onibi: #6F7CFF;
  --paper: #FBFBF9; --ink: #1C1E24; --frame: #E3EAF0; --frameLine: #9FB0C0;
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --u: min(1vw, 1.78vh);
}
* {
  box-sizing: border-box; margin: 0; padding: 0;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none;
  touch-action: none; -webkit-tap-highlight-color: transparent;
}
html, body { width: 100%; height: 100%; overflow: hidden; background: #05060a; color: #eee; font-family: 'Murecho', sans-serif; }
canvas#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; } /* 100vh は iPhone で実際の画面より短く、下に帯が出た（2026-10-08） */
#touch { position: fixed; inset: 0; z-index: 2; }
.hidden { display: none !important; }
body[data-device="touch"] .kb-only { display: none !important; }
button { font-family: 'Murecho', sans-serif; border: 0; cursor: pointer; outline: none; }

/* ---------- 平たいタイルの部品のボタン ---------- */
.tile {
  --top: #c9b07a; --top2: #d9bb7b; --side: #9c7f45; --txt: #1C1E24;
  position: relative; color: var(--txt); white-space: nowrap; font-weight: 800; letter-spacing: 0.04em;
  background: linear-gradient(165deg, var(--top2) 0%, var(--top) 70%);
  border-radius: 3px; padding: 0.5em 1.1em 0.55em;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.55), inset 1px 0 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 10px 18px -6px rgba(0, 0, 0, 0.55);
  transform: translateY(0); transition: transform 0.07s ease-out;
  margin-bottom: 6px;
}
.tile::before { /* 側面の厚み */
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 6px; border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.3)), var(--side);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: height 0.07s ease-out;
}
.tile::after { /* つやの小さな反射 */
  content: ''; position: absolute; left: 7%; top: 12%; width: 22%; height: 18%; border-radius: 40%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 70%); pointer-events: none;
}
.tile:active, .tile.pressed { transform: translateY(5px); }
.tile:active::before, .tile.pressed::before { height: 1px; }
.tile-shu { --top: #A80000; --top2: #CF1A10; --side: #6A0000; --txt: #FFF6EC; }
.tile-tan { --top: #CDAE6C; --top2: #E0C68C; --side: #8E7038; --txt: #1C1E24; }
.tile-ink { --top: #2A2D35; --top2: #3A3E48; --side: #121318; --txt: #EDE7DA; }
.tile-paper { --top: #E9E6DE; --top2: #F7F6F2; --side: #A9A49A; --txt: #1C1E24; }
.tile.sel { --top: #FF9A3C; --top2: #FFB566; --side: #A65A12; --txt: #1C1E24; transform: translateY(3px); }
.tile.sel::before { height: 3px; }
.tile.big { font-size: clamp(14px, calc(var(--u) * 2.4), 24px); padding: 0.4em 0.9em 0.45em; display: flex; flex-direction: column; align-items: center; gap: 0.05em; min-width: 6.6em; }
.tile.big small { font-size: 0.5em; font-weight: 600; opacity: 0.85; letter-spacing: 0.02em; }
.tile.mid { font-size: clamp(12px, calc(var(--u) * 1.9), 19px); }
.tile.small { font-size: clamp(11px, calc(var(--u) * 1.55), 15px); padding: 0.4em 0.9em 0.45em; }
.tile.sq { width: 44px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; }
.pausebars { display: flex; gap: 5px; }
.pausebars i { display: block; width: 5px; height: 15px; background: #EDE7DA; border-radius: 1px; }

/* ---------- タイトル ---------- */
#title { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#title > * { pointer-events: auto; }
#logoWrap { position: absolute; top: calc(var(--safe-t) + max(10px, 3.2vh)); left: 50%; transform: translateX(-50%); pointer-events: none; }
#logo {
  position: relative; padding: 0.22em 0.75em 0.26em; border-radius: 4px;
  font-family: 'Kaisei Tokumin', serif; font-weight: 800; font-size: clamp(32px, calc(var(--u) * 7.6), 86px); color: #17181C; letter-spacing: 0.22em; white-space: nowrap;
  background: linear-gradient(170deg, #F3F1EA 0%, #E4E0D6 75%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 22px 30px -10px rgba(0, 0, 0, 0.7);
}
#logo::before { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 0.2em; border-radius: 0 0 4px 4px; background: linear-gradient(180deg, #B9B3A6, #8B8578); }
#logo::after { content: ''; position: absolute; left: 4%; top: 10%; width: 14%; height: 22%; border-radius: 40%; background: radial-gradient(ellipse, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 70%); }
#logo span { position: relative; text-shadow: 0 0 0.5px rgba(0, 0, 0, 0.6); }
#menu { position: absolute; left: 50%; bottom: calc(var(--safe-b) + max(6px, 2vh)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: max(4px, 1vh); width: min(96vw, 900px); }
#row1 { display: flex; align-items: flex-end; gap: clamp(14px, 3vw, 40px); }
#row2 { display: flex; align-items: center; gap: clamp(10px, 2vw, 24px); }
#modes { display: flex; gap: clamp(8px, 1.4vw, 18px); }
#diffs { display: flex; gap: clamp(5px, 0.8vw, 10px); align-items: flex-end; }
#diffLine { font-size: clamp(11px, calc(var(--u) * 1.5), 15px); color: #F2D9A8; text-shadow: 0 1px 6px #000; min-height: 1.3em; white-space: nowrap; }
#subs { display: flex; gap: 10px; align-items: center; }
#recLine { font-size: clamp(10px, calc(var(--u) * 1.35), 14px); color: #D9D2C2; text-shadow: 0 1px 4px #000; white-space: nowrap; }
#challenge { font-size: clamp(11px, calc(var(--u) * 1.5), 15px); color: #FFB566; text-shadow: 0 1px 6px #000; white-space: nowrap; }
#enterHint { position: absolute; right: calc(var(--safe-r) + 14px); bottom: calc(var(--safe-b) + 10px); font-size: 12px; color: #B8B2A4; text-shadow: 0 1px 4px #000; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
#hud button { pointer-events: auto; }
#hudTL { position: absolute; left: calc(var(--safe-l) + 12px); top: calc(var(--safe-t) + 10px); display: flex; gap: 10px; align-items: flex-start; }
#objective { position: absolute; top: calc(var(--safe-t) + 10px); left: 50%; transform: translateX(-50%); text-align: center; white-space: nowrap; }
#objLine { font-size: clamp(14px, calc(var(--u) * 2.3), 22px); font-weight: 800; color: #F6EBD2; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.95), 0 0 2px #000; display: flex; gap: 0.5em; align-items: center; justify-content: center; }
#objArrow { display: inline-block; color: #FFC070; text-shadow: 0 0 10px #FF9A3C; font-size: 0.8em; transition: transform 0.15s; }
#objCount { color: #FFC070; font-variant-numeric: tabular-nums; }
#zoneLine { margin-top: 2px; font-size: clamp(10px, calc(var(--u) * 1.4), 14px); color: #8E8A80; text-shadow: 0 1px 4px #000; }
#zoneLine b { color: #F0D9A6; font-weight: 800; }
#bossBar { margin: 6px auto 0; width: clamp(160px, 30vw, 360px); height: 10px; border-radius: 2px; background: #2A1A1A; box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 2px 6px rgba(0,0,0,0.6); display: none; overflow: hidden; }
#bossName { display: none; margin-top: 4px; font-size: clamp(11px, calc(var(--u) * 1.5), 15px); font-weight: 800; letter-spacing: 0.12em; color: #F6EBD2; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9); }
:root[data-look] #bossName { color: #3C3430; text-shadow: 0 1px 0 rgba(255, 250, 240, 0.8); }
#bossFill { height: 100%; width: 100%; background: repeating-linear-gradient(90deg, #C4261C 0 18px, #A81E15 18px 20px); transition: width 0.15s; }
#status { position: absolute; left: calc(var(--safe-l) + 14px); bottom: calc(var(--safe-b) + 12px); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
#hpRow { display: flex; align-items: center; gap: 12px; }
#hp { display: flex; gap: 5px; }
.plate { width: 24px; height: 24px; border-radius: 50%; position: relative; background: radial-gradient(circle at 38% 32%, #F0443A 0, #C8140C 38%, #8E0804 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 3px 0 #5A0000, 0 5px 8px rgba(0,0,0,0.6); transition: transform 0.4s cubic-bezier(.5,-0.4,.8,.6), opacity 0.4s; }
.plate::after { content: ''; position: absolute; left: 30%; top: 30%; width: 40%; height: 40%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #F25A48, #B8120A); box-shadow: 0 1px 1px rgba(0,0,0,0.4); }
.plate.off { transform: translateY(26px) rotate(80deg); opacity: 0; }
.plate.half { filter: saturate(0.4) brightness(0.8); }
#hp.low .plate:not(.off) { animation: pulse 0.6s ease-in-out infinite alternate; }
@keyframes pulse { from { filter: brightness(1); } to { filter: brightness(1.7) drop-shadow(0 0 6px #ff3020); } }
#feet { position: absolute; display: flex; align-items: center; gap: 6px; transform: translate(-50%, 0); }
#feetHp { display: flex; gap: 2px; }
/* 集めた部品の数（増えると小さく弾む） */
.pIcon { display: inline-block; width: 14px; height: 10px; border-radius: 2px; background: linear-gradient(170deg, #E9CF8C, #C9A24E); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 2px 0 #7A5A20; position: relative; margin-top: 3px; }
.pIcon::before { content: ''; position: absolute; left: 3px; top: -3px; width: 8px; height: 4px; border-radius: 50%; background: #F2DCA0; box-shadow: 0 1px 0 #9C7A30; }
#partsN, #feetParts { display: flex; align-items: center; gap: 5px; font-weight: 800; color: #FFE6B0; text-shadow: 0 1px 4px #000, 0 0 2px #000; font-variant-numeric: tabular-nums; white-space: nowrap; }
#partsN b { font-size: clamp(14px, calc(var(--u) * 2.0), 20px); }
#feetParts b { font-size: 11px; }
#feetParts .pIcon { width: 9px; height: 7px; margin-top: 2px; }
#feetParts .pIcon::before { left: 2px; top: -2px; width: 5px; height: 3px; }
.bump { animation: bump 0.22s cubic-bezier(.3,1.8,.5,1); }
@keyframes bump { from { transform: translateY(-4px) scale(1.25); } to { transform: none; } }
#charms { display: flex; gap: 5px; flex-wrap: nowrap; }
.charm { font-size: clamp(10px, calc(var(--u) * 1.25), 12px); font-weight: 800; color: #1C1E24; background: #E9E6DE; border-radius: 2px; padding: 1px 6px; white-space: nowrap; box-shadow: 0 2px 0 #8C877C; }
.charm.g1 { background: #FFD27A; box-shadow: 0 2px 0 #A6741C; }
.charm.g2 { background: #D2B0FF; box-shadow: 0 2px 0 #6A3EA8; }
#feetHp .plate { width: 8px; height: 8px; box-shadow: 0 1px 0 #5A0000; }
#feetHp .plate::after { display: none; }
#ults { position: absolute; right: calc(var(--safe-r) + 12px); top: calc(var(--safe-t) + 10px); display: flex; gap: 8px; }
.ult { position: relative; width: clamp(52px, calc(var(--u) * 7.2), 76px); height: clamp(52px, calc(var(--u) * 7.2), 76px); background: none; padding: 0; }
.ult.empty .ultTop { background: rgba(42, 45, 53, 0.45); box-shadow: inset 0 0 0 1.5px rgba(237, 231, 218, 0.25); }
.ult.empty .ultName { color: rgba(237, 231, 218, 0.5); font-weight: 600; }
.ultLv { position: absolute; right: 3px; top: 2px; font-size: 10px; font-weight: 800; color: #FFD8A0; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.ult.ready .ultLv { color: #2A1600; text-shadow: none; }
.ultTop { position: absolute; inset: 0 0 6px 0; border-radius: 4px; background: linear-gradient(160deg, #3C404A, #2A2D35); box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.3), 0 6px 0 #121318, 0 10px 14px rgba(0,0,0,0.6); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; transition: transform 0.07s; }
.ult:active .ultTop { transform: translateY(4px); box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.3), 0 2px 0 #121318; }
.ult.ready .ultTop { background: linear-gradient(160deg, #FFB566, #FF9A3C); box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.6), 0 6px 0 #A65A12, 0 0 22px rgba(255, 154, 60, 0.75); }
.ultStuds { display: grid; gap: 3px; }
.ultStuds i { display: block; width: clamp(7px, calc(var(--u) * 0.95), 10px); height: clamp(7px, calc(var(--u) * 0.95), 10px); border-radius: 50%; background: #1A1C22; box-shadow: inset 0 1px 1px rgba(0,0,0,0.6); }
.ultStuds i.on { background: radial-gradient(circle at 35% 30%, #FFE6C0, #FFA640 60%, #B86A10); box-shadow: 0 0 6px #FF9A3C, 0 1px 0 #7A4400; }
.ultStuds i.pop { animation: snap 0.28s cubic-bezier(.3,1.6,.5,1); }
@keyframes snap { from { transform: translateY(-7px) scale(1.5); filter: brightness(2); } to { transform: none; filter: none; } }
.ult.ready .ultStuds i.on { background: radial-gradient(circle at 35% 30%, #FFF, #FFD8A8 60%, #D07A20); }
.ultName { font-size: clamp(9px, calc(var(--u) * 1.15), 12px); font-weight: 800; color: #EDE7DA; white-space: nowrap; }
.ult.ready .ultName { color: #2A1600; }
.ult .key { position: absolute; left: 3px; top: 3px; font-size: 11px; font-weight: 800; background: #EDE7DA; color: #1C1E24; width: 17px; height: 17px; border-radius: 2px; display: flex; align-items: center; justify-content: center; }
/* ---------- タッチ端末の操作 ---------- */
#tMove, #tAtk, #tRoll { display: none; }
body[data-device="touch"] #tMove, body[data-device="touch"] #tAtk, body[data-device="touch"] #tRoll { display: block; }
body.onehand #tMove, body.onehand #tAtk, body.onehand #tRoll { display: none !important; }
#tMove { position: absolute; left: calc(var(--safe-l) + 28px); bottom: calc(var(--safe-b) + 26px); width: 120px; height: 120px; pointer-events: none; transition: opacity 0.15s; }
#tMove .tRing { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 220, 170, 0.22); background: radial-gradient(circle, rgba(255,255,255,0.05), rgba(255,255,255,0) 70%); }
#tMove .tRing::after { content: ''; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: rgba(242, 226, 192, 0.18); }
#tMove.active { opacity: 0; }
#tAtk, #tRoll { position: absolute; border-radius: 50%; padding: 0; pointer-events: auto; background: radial-gradient(circle at 40% 32%, #CF1A10, #A80000 70%); box-shadow: inset 0 2px 0 rgba(255,255,255,0.35), 0 5px 0 #5A0000, 0 8px 14px rgba(0,0,0,0.5); transition: transform 0.06s; }
#tAtk { right: calc(var(--safe-r) + 18px); bottom: calc(var(--safe-b) + 20px); width: 84px; height: 84px; }
#tRoll { right: calc(var(--safe-r) + 117px); bottom: calc(var(--safe-b) + 57px); width: 56px; height: 56px; background: radial-gradient(circle at 40% 32%, #4A4E58, #2A2D35 70%); box-shadow: inset 0 2px 0 rgba(255,255,255,0.3), 0 5px 0 #121318, 0 8px 14px rgba(0,0,0,0.5); }
#tAtk.down, #tRoll.down { transform: translateY(4px); }
.tIcon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.tIcon.atk { width: 6px; height: 46px; background: linear-gradient(#F4F6FA, #B8C0CC); border-radius: 2px; transform: translate(-50%, -54%) rotate(35deg); box-shadow: 0 0 0 1px rgba(0,0,0,0.25); }
.tIcon.atk::after { content: ''; position: absolute; left: -6px; bottom: 6px; width: 18px; height: 4px; background: #D9A23A; border-radius: 1px; }
.tIcon.roll { width: 26px; height: 26px; border-radius: 50%; border: 3px solid #EDE7DA; border-right-color: transparent; }
.tIcon.roll::after { content: ''; position: absolute; right: -4px; top: 1px; border: 5px solid transparent; border-left-color: #EDE7DA; transform: rotate(-30deg); }
.tHint { position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); font-size: 11px; font-weight: 800; color: #FFF3DA; text-shadow: 0 1px 4px #000, 0 0 2px #000; white-space: nowrap; pointer-events: none; }
.tOnly { display: none; }
body[data-device="touch"]:not(.onehand) .tOnly { display: block; }
#hAtk { left: auto; top: auto; transform: none; right: calc(var(--safe-r) + 18px); bottom: calc(var(--safe-b) + 112px); }
#hRoll { left: auto; top: auto; transform: translateX(50%); right: calc(var(--safe-r) + 145px); bottom: calc(var(--safe-b) + 38px); }
#hMove { top: 50%; transform: translate(-50%, -50%); }
.tHint.gone { display: none !important; }
/* タッチ：技の4枠は攻撃ボタンの上に弧で */
body[data-device="touch"] #ults { position: absolute; inset: auto; right: 0; bottom: 0; width: 0; height: 0; display: block; }
body[data-device="touch"] .ult { position: absolute; width: 52px; height: 52px; }
body[data-device="touch"] #ult0 { right: calc(var(--safe-r) + 175px); bottom: calc(var(--safe-b) + 85px); }
body[data-device="touch"] #ult1 { right: calc(var(--safe-r) + 134px); bottom: calc(var(--safe-b) + 145px); }
body[data-device="touch"] #ult2 { right: calc(var(--safe-r) + 73px); bottom: calc(var(--safe-b) + 179px); }
body[data-device="touch"] #ult3 { right: calc(var(--safe-r) + 10px); bottom: calc(var(--safe-b) + 182px); }
body[data-device="touch"] .ultStuds i { width: 6px; height: 6px; }
body[data-device="touch"] .ultName { font-size: 9px; }
body.onehand[data-device="touch"] #ult0 { right: calc(var(--safe-r) + 12px); bottom: calc(var(--safe-b) + 12px); }
body.onehand[data-device="touch"] #ult1 { right: calc(var(--safe-r) + 72px); bottom: calc(var(--safe-b) + 12px); }
body.onehand[data-device="touch"] #ult2 { right: calc(var(--safe-r) + 12px); bottom: calc(var(--safe-b) + 72px); }
body.onehand[data-device="touch"] #ult3 { right: calc(var(--safe-r) + 72px); bottom: calc(var(--safe-b) + 72px); }
/* タッチ：体力と部品は左上（一時停止の下） */
body[data-device="touch"] #status { left: calc(var(--safe-l) + 12px); top: calc(var(--safe-t) + 60px); bottom: auto; flex-direction: column-reverse; }
body[data-device="touch"] .plate { width: 16px; height: 16px; }
body[data-device="touch"] #hp { gap: 3px; }
/* 細いキーボード画面：技を2×2に */
@media (max-width: 760px) { body:not([data-device="touch"]) #ults { display: grid; grid-template-columns: repeat(2, auto); gap: 6px; } }
#stick { position: fixed; z-index: 3; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; display: none; pointer-events: none; background: radial-gradient(circle, rgba(255,255,255,0.06), rgba(255,255,255,0.02) 60%, rgba(255,255,255,0) 70%); box-shadow: inset 0 0 0 2px rgba(255, 220, 170, 0.25); }
#knob { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #F2E2C0, #C9A86A); box-shadow: 0 4px 0 #8E7038, 0 6px 10px rgba(0,0,0,0.5); opacity: 0.8; }
#labels { position: fixed; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.lbl3d { position: absolute; transform: translate(-50%, -100%); white-space: nowrap; font-weight: 800; font-size: clamp(12px, calc(var(--u) * 1.8), 18px); color: #FFF3DA; text-shadow: 0 0 10px rgba(255, 154, 60, 0.9), 0 1px 3px #000; transition: opacity 0.2s; }
.lbl3d.net { color: #FFE9B0; font-size: clamp(14px, calc(var(--u) * 2.2), 22px); }
.lbl3d.ouch { color: #FFD0C0; font-size: clamp(11px, calc(var(--u) * 1.5), 15px); text-shadow: 0 0 8px rgba(255, 80, 60, 0.9), 0 1px 3px #000; }
.lbl3d.hint { transform: translate(-50%, 22px); color: #F6EBD2; font-weight: 600; font-size: clamp(11px, calc(var(--u) * 1.55), 15px); text-shadow: 0 1px 6px #000, 0 0 2px #000; }
#fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 30; }

/* ---------- 組立説明書 ---------- */
#manual, #pause, #result { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(4, 5, 8, 0.55); perspective: 1400px; }
.page {
  position: relative; background: var(--paper); color: var(--ink); border-radius: 2px;
  width: min(94vw, 920px); max-height: calc(100vh - 20px - var(--safe-t) - var(--safe-b)); overflow: hidden;
  padding: clamp(10px, 2.2vh, 24px) clamp(12px, 2.4vw, 30px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0,0,0,0.05);
  transform-origin: left center;
}
.page.flipIn { animation: flipIn 0.7s cubic-bezier(.2,.7,.2,1) both; }
.page.flipOut { animation: flipOut 0.45s cubic-bezier(.6,0,.8,.4) both; }
@keyframes flipIn { from { transform: rotateY(-95deg) skewY(4deg); opacity: 0.3; } 60% { opacity: 1; } to { transform: rotateY(0) skewY(0); } }
@keyframes flipOut { from { transform: rotateY(0); } to { transform: rotateY(-100deg) skewY(4deg); opacity: 0; } }
.pageHead { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--ink); padding-bottom: 4px; margin-bottom: clamp(6px, 1.4vh, 12px); }
.bookName { font-family: 'Kaisei Tokumin', serif; font-weight: 800; font-size: clamp(12px, calc(var(--u) * 1.7), 17px); letter-spacing: 0.05em; white-space: nowrap; }
.pageNo { font-weight: 800; font-size: clamp(12px, calc(var(--u) * 1.6), 16px); white-space: nowrap; }
.headR { display: flex; align-items: center; gap: 12px; }
.partsBox { border: 1.5px solid var(--frameLine); background: #fff; border-radius: 3px; padding: 2px 8px; display: flex; gap: 8px; align-items: center; }
.pbTitle { font-size: clamp(9px, calc(var(--u) * 1.2), 12px); font-weight: 800; color: #4A5A6A; white-space: nowrap; }
.pbList { display: flex; gap: 8px; }
.pbItem { display: flex; align-items: center; gap: 2px; font-size: clamp(9px, calc(var(--u) * 1.2), 12px); font-weight: 800; white-space: nowrap; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1.6vw, 18px); margin-top: clamp(6px, 1.6vh, 14px); }
.step { position: relative; background: var(--frame); border: 1.5px solid var(--frameLine); border-radius: 4px; padding: clamp(6px, 1.2vh, 12px); min-width: 0; }
.stepNo { position: absolute; left: 8px; top: 2px; font-family: 'Murecho'; font-weight: 800; font-size: clamp(22px, calc(var(--u) * 4), 40px); color: var(--ink); line-height: 1; }
.stepPic { height: clamp(70px, 22vh, 190px); display: flex; align-items: center; justify-content: center; }
.stepPic svg { height: 100%; width: auto; max-width: 100%; }
.step p { font-size: clamp(10.5px, calc(var(--u) * 1.6), 16px); font-weight: 600; line-height: 1.45; margin-top: 4px; }
.step p.note { color: var(--shu); font-weight: 800; }
.pageFoot { display: flex; justify-content: flex-end; margin-top: clamp(8px, 1.6vh, 14px); }
.sheet { width: min(92vw, 560px); }
.sheet .row { display: flex; align-items: center; gap: 12px; margin: clamp(6px, 1.3vh, 12px) 0; min-height: 34px; }
.sheet .row.btns { justify-content: center; margin-top: clamp(10px, 2vh, 18px); gap: 16px; }
.lbl { width: 4.2em; font-weight: 800; font-size: clamp(12px, calc(var(--u) * 1.7), 16px); white-space: nowrap; }
.lbl2 { font-size: clamp(10px, calc(var(--u) * 1.3), 13px); color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.slider { position: relative; flex: 1; height: 16px; border-radius: 2px; background: #D7DDE3; box-shadow: inset 0 1px 2px rgba(0,0,0,0.25); cursor: pointer; }
.sFill { position: absolute; left: 0; top: 0; bottom: 0; background: repeating-linear-gradient(90deg, #C4261C 0 14px, #A01A12 14px 16px); border-radius: 2px; }
.sKnob { position: absolute; top: 50%; width: 26px; height: 26px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 38% 32%, #F2E2C0, #C9A86A); box-shadow: 0 3px 0 #8E7038, 0 5px 8px rgba(0,0,0,0.4); }
/* 組立所 */
.shopSteps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.shopStep { display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding-top: clamp(30px, calc(var(--u) * 4.6), 46px) !important; }
.shopStep .sName { font-weight: 800; font-size: clamp(11px, calc(var(--u) * 1.6), 16px); white-space: nowrap; }
.shopStep .sLine { font-size: clamp(9.5px, calc(var(--u) * 1.25), 13px); font-weight: 600; color: #3A4250; line-height: 1.3; min-height: 2.6em; }
.pips { display: flex; gap: 3px; }
.pips i { display: block; width: 12px; height: 8px; border-radius: 1px; background: #C9D2DA; box-shadow: inset 0 1px 1px rgba(0,0,0,0.2); }
.pips i.on { background: #B40000; box-shadow: 0 1px 0 #6A0000; }
.shopStep .tile { font-size: clamp(10.5px, calc(var(--u) * 1.4), 14px); padding: 0.35em 0.4em 0.4em; margin-top: 2px; }
.shopStep .tile.off { --top: #C9C5BC; --top2: #D7D3CA; --side: #8E8A80; --txt: #6A6E76; }
.shopStep .done { font-size: clamp(11px, calc(var(--u) * 1.5), 15px); font-weight: 800; color: var(--shu); text-align: center; padding: 0.3em 0; }
#shopPage .pageFoot { align-items: center; justify-content: space-between; gap: 10px; }
#shopLine { font-size: clamp(10px, calc(var(--u) * 1.35), 14px); font-weight: 700; color: #3A4250; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#shop, #sortie { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(4, 5, 8, 0.55); perspective: 1400px; }
/* 組立所・三つの棚（2026-10-04）：紙のページを縦に並べ、棚の中だけ滑らせる。とじるはいつも下に見える */
#shopPage, #sortiePage { display: flex; flex-direction: column; max-height: calc(100vh - 16px - var(--safe-t) - var(--safe-b)); max-height: calc(100dvh - 16px - var(--safe-t) - var(--safe-b)); }
#shopPage > .pageHead, #shopPage > .shelfTabs, #shopPage > .pageFoot, #sortiePage > .pageHead, #sortiePage > .pageFoot { flex: none; }
#shopPage .pageFoot, #sortiePage .pageFoot { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--frameLine); align-items: center; gap: 10px; }
#sortiePage { width: min(94vw, 720px); }
#sortiePage .pageFoot { justify-content: flex-end; }
#sortiePage .pageNo { font-size: clamp(10px, calc(var(--u) * 1.3), 13px); color: #4A5260; }
.shelfTabs { display: flex; align-items: flex-end; gap: 4px; border-bottom: 2px solid var(--ink); margin-bottom: 6px; min-width: 0; }
.shelfTabs button { font-weight: 800; font-size: clamp(12px, calc(var(--u) * 1.75), 17px); padding: 0.35em 0.9em 0.3em; border: 1.5px solid var(--frameLine); border-bottom: 0; border-radius: 5px 5px 0 0; background: #E6E9EC; color: #5A6270; white-space: nowrap; }
.shelfTabs button.on { background: var(--shu); border-color: var(--shu); color: #FFF6EC; padding-bottom: 0.4em; }
#shelfLine { margin-left: auto; align-self: center; font-size: clamp(9.5px, calc(var(--u) * 1.25), 13px); font-weight: 700; color: #4A5260; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; padding-left: 8px; }
.shelfBody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 2px 4px 4px 2px; }
.shelfBody, .shelfBody * { touch-action: pan-y; }
.shGroup { font-weight: 800; font-size: clamp(10px, calc(var(--u) * 1.3), 13px); color: #4A5A6A; margin: 6px 0 3px; border-left: 4px solid var(--tanD); padding-left: 6px; }
.shGroup:first-child { margin-top: 0; }
.stamp { display: inline-block; font-weight: 800; font-size: clamp(10px, calc(var(--u) * 1.35), 14px); color: var(--shu); border: 2px solid var(--shu); border-radius: 3px; padding: 0.1em 0.5em; transform: rotate(-4deg); white-space: nowrap; background: rgba(255, 255, 255, 0.6); }
.stamp.own { color: #2E6A3A; border-color: #2E6A3A; }
.shelfBody .tile { font-size: clamp(10.5px, calc(var(--u) * 1.4), 14px); padding: 0.35em 0.6em 0.4em; margin-bottom: 5px; }
.shelfBody .tile.off { --top: #C9C5BC; --top2: #D7D3CA; --side: #8E8A80; --txt: #6A6E76; }
/* 体の棚：1行に「名前・今の値・段・次と組む」 */
.srow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 4px 12px; background: var(--frame); border: 1.5px solid var(--frameLine); border-radius: 4px; padding: 5px 10px; margin-bottom: 5px; }
.sNo { font-weight: 800; font-size: clamp(16px, calc(var(--u) * 2.6), 26px); line-height: 1; width: 1.1em; }
.sMain { display: flex; flex-direction: column; min-width: 0; }
.sName { font-weight: 800; font-size: clamp(12px, calc(var(--u) * 1.65), 16px); white-space: nowrap; }
.sNow { font-weight: 800; font-size: clamp(11px, calc(var(--u) * 1.5), 15px); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sNow em { font-style: normal; display: inline-block; color: var(--shu); border: 1.5px solid var(--shu); background: #fff; border-radius: 2px; padding: 0 0.3em; margin-right: 0.4em; font-size: 0.85em; line-height: 1.3; }
.sPips { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sPips small { font-size: 10px; font-weight: 700; color: #5A6270; }
.sAct { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 9.5em; }
.sNext { font-size: clamp(9.5px, calc(var(--u) * 1.2), 12px); font-weight: 700; color: #4A5260; white-space: nowrap; }
.sAct .tile { margin-bottom: 4px; }
/* 型の棚：札を並べる */
.kgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 5px; margin-bottom: 4px; }
.kcard { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 8px; background: var(--frame); border: 1.5px solid var(--frameLine); border-radius: 4px; padding: 4px 8px; min-width: 0; }
.kcard > b { grid-column: 1; }
.kcard > .kLine { grid-column: 1; }
.kcard > .tile, .kcard > .stamp { grid-column: 2; grid-row: 1 / span 2; }
.kcard b { font-weight: 800; font-size: clamp(11.5px, calc(var(--u) * 1.55), 15px); }
.kLine { font-size: clamp(9.5px, calc(var(--u) * 1.2), 12px); font-weight: 600; color: #3A4250; line-height: 1.3; flex: 1; }
.kcard.has { background: #EEF6EC; border-color: #7FAE84; }
.kcard .tile, .kcard .stamp { align-self: flex-end; }
/* 選ぶ棚：2つの札を並べ、選んでいる方だけ色付き＋「選択中」 */
.prow { background: var(--frame); border: 1.5px solid var(--frameLine); border-radius: 4px; padding: 4px 8px 6px; margin-bottom: 5px; }
.pHead { display: flex; align-items: baseline; gap: 10px; }
.pHead b { font-weight: 800; font-size: clamp(12px, calc(var(--u) * 1.6), 16px); }
.pHead small { font-size: clamp(9.5px, calc(var(--u) * 1.2), 12px); font-weight: 700; color: #5A6270; }
.pOpts { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 6px; margin-top: 3px; }
.pOr { align-self: center; font-weight: 800; color: #5A6270; font-size: clamp(11px, calc(var(--u) * 1.4), 14px); }
.popt { display: flex; flex-direction: column; gap: 2px; background: #fff; border: 1.5px solid var(--frameLine); border-radius: 4px; padding: 4px 8px; min-width: 0; }
.popt b { font-weight: 800; font-size: clamp(11.5px, calc(var(--u) * 1.5), 15px); }
.pLine { font-size: clamp(9.5px, calc(var(--u) * 1.2), 12px); font-weight: 600; color: #3A4250; line-height: 1.3; flex: 1; }
.popt .tile, .popt .stamp { align-self: flex-end; }
@media (min-width: 900px) {
  .popt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 8px; }
  .popt > b, .popt > .pLine { grid-column: 1; }
  .popt > .tile, .popt > .stamp { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
.popt.sel { background: #FFE7C2; border: 2.5px solid var(--chochin); box-shadow: 0 0 0 2px rgba(255, 154, 60, 0.25); }
.popt.sel b { color: var(--shuD); }
.popt.other { opacity: 0.72; background: #F1F2F3; }
/* 出陣の支度 */
.soRow { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0; }
.soLbl { flex: none; width: 2.6em; font-weight: 800; font-size: clamp(12px, calc(var(--u) * 1.6), 16px); padding-top: 0.35em; }
.soChips { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.chip { font-weight: 800; font-size: clamp(11px, calc(var(--u) * 1.45), 15px); padding: 0.35em 0.75em; border-radius: 4px; background: #E6E9EC; color: #3A4250; border: 1.5px solid var(--frameLine); white-space: nowrap; }
.chip.sel { background: var(--chochin); border-color: #A65A12; color: #1C1E24; box-shadow: 0 2px 0 #A65A12; }
.soNote { margin: 0 0 4px calc(2.6em + 10px); font-size: clamp(9.5px, calc(var(--u) * 1.25), 13px); font-weight: 700; color: #4A5260; }
@media (max-width: 700px) {
  .srow { grid-template-columns: auto minmax(0, 1fr) auto; }
  .sPips { display: none; }
  .sAct { min-width: 0; }
  #shelfLine { display: none; }
}
@media (max-height: 420px) {
  .srow { padding: 3px 8px; margin-bottom: 4px; }
  .kcard, .popt { padding: 3px 6px; }
  .shelfTabs button { padding: 0.25em 0.8em 0.2em; }
  #shopPage .pageFoot, #sortiePage .pageFoot { margin-top: 4px; padding-top: 4px; }
  #shopPage .pageFoot .tile, #sortiePage .pageFoot .tile { margin-bottom: 4px; padding: 0.35em 1em 0.4em; }
  #shopPage > .pageHead, #sortiePage > .pageHead { margin-bottom: 4px; }
}
.bigLbl { font-size: clamp(11px, calc(var(--u) * 1.5), 15px); font-weight: 800; color: #4A5260; }
/* 最終ページ */
.final .finalBody { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(10px, 2vw, 26px); }
.bigStep { font-family: 'Kaisei Tokumin', serif; font-weight: 800; font-size: clamp(34px, calc(var(--u) * 7.5), 80px); line-height: 1.05; color: var(--ink); }
.bigStep.fail { color: #6A6E76; }
.bigStep.best { color: var(--shu); }
.partsList { margin-top: clamp(4px, 1vh, 10px); border: 1.5px solid var(--frameLine); background: var(--frame); border-radius: 4px; padding: 6px 10px; }
#resParts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 10px; margin-top: 4px; }
.pl { display: flex; align-items: center; gap: 6px; font-size: clamp(10px, calc(var(--u) * 1.4), 14px); font-weight: 800; white-space: nowrap; }
.pl svg { width: 22px; height: 18px; flex: none; }
.total { margin-top: 4px; font-weight: 800; font-size: clamp(11px, calc(var(--u) * 1.6), 16px); border-top: 1px dashed var(--frameLine); padding-top: 3px; white-space: nowrap; }
.finalRight { display: flex; flex-direction: column; gap: clamp(2px, 0.7vh, 8px); }
.rec { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid #DDE2E7; padding-bottom: 2px; }
.rec span { font-size: clamp(11px, calc(var(--u) * 1.5), 15px); font-weight: 600; color: #4A5260; white-space: nowrap; }
.rec b { font-size: clamp(16px, calc(var(--u) * 2.7), 28px); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rec.small b { font-size: clamp(12px, calc(var(--u) * 1.7), 17px); }
.rec b.best { color: var(--shu); }
.mark { display: inline-flex; align-items: center; gap: 4px; color: var(--shu); }
.recNote { font-size: clamp(10px, calc(var(--u) * 1.3), 13px); color: var(--shu); font-weight: 800; min-height: 1.2em; white-space: nowrap; }
.finalBtns { display: flex; flex-wrap: wrap; gap: clamp(6px, 1.2vw, 14px); justify-content: center; margin-top: clamp(8px, 1.8vh, 16px); }
#shareLine { text-align: center; font-size: 12px; color: #4A5260; min-height: 1.2em; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 縦向きの案内 ---------- */
#rotate { position: fixed; inset: 0; z-index: 50; background: #0B0C10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; color: #F2E6C8; font-weight: 800; font-size: 18px; }
#rotPic svg { width: 180px; height: 180px; }
.rotPhone { transform-box: fill-box; transform-origin: center; animation: rot 2.4s ease-in-out infinite; }
@keyframes rot { 0%, 25% { transform: rotate(0); } 55%, 100% { transform: rotate(-90deg); } }
#boot { position: fixed; inset: 0; z-index: 60; background: #05060a; display: flex; align-items: center; justify-content: center; color: #8E8A80; font-size: 14px; transition: opacity 0.5s; }
#boot.gone { opacity: 0; pointer-events: none; }

/* 小さな横画面 */
@media (max-height: 400px) {
  .shopStep { padding-top: 30px !important; }
  .shopStep .sLine { min-height: 0; }
  .tile { margin-bottom: 4px; }
  .tile::before { height: 4px; }
  .step p { line-height: 1.3; }
  .stepPic { height: clamp(48px, 20vh, 90px); }
  .page { padding: 8px 12px; }
  .steps { margin-top: 6px; }
}

/* 縦向き（スマホ）では案内だけ */
body.portrait #title, body.portrait #hud, body.portrait #manual, body.portrait #pause, body.portrait #result, body.portrait #shop, body.portrait #sortie, body.portrait #labels, body.portrait #stick { display: none !important; }

/* 今の武器と強さ */
#weaponN { display: flex; align-items: baseline; gap: 6px; font-weight: 800; color: #F6EBD2; text-shadow: 0 1px 4px #000, 0 0 2px #000; white-space: nowrap; }
#weaponN .wIcon { align-self: center; display: inline-block; width: 4px; height: 18px; background: linear-gradient(#F4F6FA, #9AA4B2); transform: rotate(35deg); border-radius: 1px; box-shadow: -3px 7px 0 -1px #D9A23A; }
#weaponN .wName { font-size: clamp(11px, calc(var(--u) * 1.5), 15px); }
#weaponN .wPow { display: inline-block; font-size: clamp(15px, calc(var(--u) * 2.3), 22px); font-variant-numeric: tabular-nums; color: #F2EFE6; }
#weaponN[data-grade="1"] .wPow { color: #FFC040; }
#weaponN[data-grade="2"] .wPow { color: #C9A0FF; }
#weaponN .wRef { font-size: clamp(9.5px, calc(var(--u) * 1.2), 12px); font-weight: 600; color: #A9A497; }
#weaponN .wRef.hi { color: #9FE08A; }
#weaponN .wRef.lo { color: #FF9C8A; }
/* 武器に乗った属性（拾った光る部品）の残り秒 */
#wElem { display: inline-flex; gap: 4px; align-self: center; }
#wElem:empty { display: none; }
.we { font-style: normal; font-weight: 800; font-size: clamp(10.5px, calc(var(--u) * 1.4), 13px); line-height: 1; padding: 3px 6px 2px; border-radius: 3px; font-variant-numeric: tabular-nums; color: #10131A; text-shadow: none; }
.we.rai { background: #A9C0FF; box-shadow: 0 0 9px rgba(110, 150, 255, 0.95), 0 2px 0 #3A52A0; }
.we.hi { background: #FFB46A; box-shadow: 0 0 9px rgba(255, 120, 30, 0.95), 0 2px 0 #A0500A; }
.we.kori { background: #C4F2FF; box-shadow: 0 0 9px rgba(110, 220, 255, 0.95), 0 2px 0 #3C88A0; }
.we.end { opacity: 0.5; }
/* 連鎖×2：たくさん巻き込むと大きく弾む */
.lbl3d.chain { color: #FFF0C8; font-size: clamp(14px, calc(var(--u) * 2.1), 21px); letter-spacing: 0.05em; -webkit-text-stroke: 1px #C07810; paint-order: stroke fill; text-shadow: 0 0 12px rgba(255, 190, 60, 0.95), 0 2px 3px #000; animation: chainPop 0.35s cubic-bezier(.3,1.8,.5,1); }
.lbl3d.chain.big { font-size: clamp(20px, calc(var(--u) * 3.1), 32px); animation: chainBig 0.55s cubic-bezier(.25,2.1,.5,1); }
@keyframes chainPop { from { transform: translate(-50%, -100%) scale(1.5); } to { transform: translate(-50%, -100%) scale(1); } }
@keyframes chainBig { 0% { transform: translate(-50%, -100%) scale(2.4); filter: brightness(2); } 60% { transform: translate(-50%, -100%) scale(0.9); } 100% { transform: translate(-50%, -100%) scale(1); filter: none; } }
#weaponN.up .wPow { animation: powUp 1.1s cubic-bezier(.25,1.6,.5,1); }
@keyframes powUp { 0% { transform: scale(1.9); filter: brightness(2.4) drop-shadow(0 0 10px #FFC040); } 60% { filter: brightness(1.4) drop-shadow(0 0 6px #FFC040); } 100% { transform: none; filter: none; } }
/* 技のLv（5つの目盛り）とLv上げの瞬間 */
.ultPips { display: flex; gap: 2px; }
.ultPips i { display: block; width: 6px; height: 3px; border-radius: 1px; background: rgba(237, 231, 218, 0.22); }
.ultPips i.on { background: #FFD27A; box-shadow: 0 0 3px #FF9A3C; }
.ult.ready .ultPips i { background: rgba(42, 22, 0, 0.25); }
.ult.ready .ultPips i.on { background: #6A3A00; box-shadow: none; }
body[data-device="touch"] .ultPips i { width: 5px; }
.ult.lvup .ultTop { animation: lvUp 1.0s cubic-bezier(.25,1.6,.5,1); }
@keyframes lvUp { 0% { transform: translateY(-10px) scale(1.35); filter: brightness(2.6); box-shadow: 0 0 0 3px #FFE6B0, 0 0 30px #FF9A3C; } 50% { filter: brightness(1.5); } 100% { transform: none; filter: none; } }
.ult.lvup .ultLv { animation: lvTxt 1.0s ease-out; }
@keyframes lvTxt { 0% { transform: scale(2); color: #FFF; } 100% { transform: none; } }
.lbl3d.power { color: #FFE9B0; font-size: clamp(15px, calc(var(--u) * 2.4), 24px); text-shadow: 0 0 12px rgba(255, 192, 64, 0.95), 0 1px 3px #000; }

/* ダメージの数字 */
.dmg { position: absolute; left: 0; top: 0; transform-origin: 50% 100%; white-space: nowrap; pointer-events: none; font-family: 'Murecho', sans-serif; font-weight: 800; font-style: italic; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; font-size: clamp(13px, calc(var(--u) * 1.9), 19px); color: #FFF6E0; text-shadow: 0 0 6px rgba(255, 170, 60, 0.75), 0 2px 2px rgba(0, 0, 0, 0.9); will-change: transform, opacity; }
.dmg.boss { font-size: clamp(15px, calc(var(--u) * 2.2), 22px); }
.dmg.crit { font-size: clamp(20px, calc(var(--u) * 3.1), 32px); color: #FFD24A; text-shadow: 0 0 12px rgba(255, 110, 20, 0.95), 0 0 3px #FF5A00, 0 2px 2px #000; z-index: 2; }
.dmg.crit small { display: block; text-align: center; font-size: 0.42em; font-style: normal; letter-spacing: 0.2em; color: #FFF0C0; margin-bottom: -0.15em; }
.dmg.hurt { color: #FF7A66; font-style: normal; text-shadow: 0 0 8px rgba(255, 40, 20, 0.85), 0 2px 2px #000; }

/* お肉寿司の無敵の残り */
#feetNiku { font-size: 12px; font-weight: 800; color: #FFD27A; text-shadow: 0 0 8px rgba(255, 120, 40, 0.95), 0 1px 2px #000; white-space: nowrap; font-variant-numeric: tabular-nums; }
#feetNiku:empty { display: none; }

/* ---------- ビルド：付与のアイコン・比較カード・属性の数字 ---------- */
#wEnch { display: flex; gap: 4px; flex-wrap: nowrap; }
#wEnch:empty { display: none; }
.en { display: inline-flex; align-items: center; justify-content: center; gap: 1px; min-width: 20px; height: 18px; padding: 0 3px; border-radius: 2px; font-style: normal; font-weight: 800; font-size: 11px; line-height: 1; color: #1C1E24; background: #E9E6DE; box-shadow: 0 2px 0 #8C877C; white-space: nowrap; }
.en small { font-size: 8px; font-weight: 800; opacity: 0.75; }
.en.rai { background: #C9D8FF; box-shadow: 0 2px 0 #5A6EB0; }
.en.hi { background: #FFC890; box-shadow: 0 2px 0 #A65A12; }
.en.kori { background: #C8F0FF; box-shadow: 0 2px 0 #4A90A8; }
.en.t2 { outline: 1.5px solid #FFC040; outline-offset: -1.5px; }
.en.key { background: #D2B0FF; box-shadow: 0 2px 0 #6A3EA8; color: #2A0E50; }

#cmpCard { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 12px); transform: translateX(-50%); width: min(740px, 58vw); background: var(--paper); color: var(--ink); border-radius: 2px; padding: 6px 10px 6px; box-shadow: 0 16px 30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0,0,0,0.06); pointer-events: none; animation: cmpIn 0.22s cubic-bezier(.2,.9,.3,1.2); }
@keyframes cmpIn { from { transform: translateX(-50%) translateY(16px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
#cmpCard button { pointer-events: auto; }
.cmpHead { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1.5px solid var(--ink); padding-bottom: 2px; margin-bottom: 4px; gap: 8px; }
.cmpT { font-family: 'Kaisei Tokumin', serif; font-weight: 800; font-size: 13px; letter-spacing: 0.05em; white-space: nowrap; }
.cmpHint { font-size: 11px; font-weight: 800; color: #4A5260; white-space: nowrap; }
.cmpMain { display: flex; align-items: center; gap: 8px; }
.cmpBody { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; align-items: stretch; }
.cmpArrow { align-self: center; font-size: 14px; color: var(--shu); }
.cmpCol { position: relative; background: var(--frame); border: 1.5px solid var(--frameLine); border-radius: 3px; padding: 3px 6px 4px 26px; min-width: 0; overflow: hidden; }
.cmpCol.new { border-color: #C9A24E; background: #FFF6E2; }
.cmpNo { position: absolute; left: 5px; top: 1px; font-weight: 800; font-size: 20px; line-height: 1; }
.cmpLbl { font-size: 9.5px; font-weight: 800; color: #6A7280; white-space: nowrap; }
.cmpName { font-weight: 800; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmpName small { font-size: 10px; margin-left: 4px; padding: 0 3px; border-radius: 2px; background: #E9E6DE; }
.cmpName small.g1 { background: #FFD27A; }
.cmpName small.g2 { background: #D2B0FF; }
.cmpPow { font-size: 11px; font-weight: 700; white-space: nowrap; }
.cmpPow b { font-size: 14px; font-variant-numeric: tabular-nums; }
.cmpPow em { font-style: normal; font-weight: 800; margin-left: 3px; }
.cmpPow em.up { color: #2E8A2A; } .cmpPow em.dn { color: #B40000; }
.cmpEn { list-style: none; display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.cmpEn li { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 11px; white-space: nowrap; }
.cmpEn li b { font-weight: 800; flex: none; }
.cmpEn li span { font-weight: 600; color: #3A4250; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-size: 10px; }
.cmpEn li.keyRow b { color: #6A3EA8; }
.cmpEn li.none { color: #8A8E96; font-weight: 600; }
#btnSwap { flex: none; min-height: 44px; min-width: 44px; font-size: 13px; padding: 0.4em 0.9em; margin-bottom: 6px; }
/* 細い画面：右下（キーボード）・中央は空ける */
@media (max-width: 900px) { body:not([data-device="touch"]) #cmpCard { left: auto; right: calc(var(--safe-r) + 10px); transform: none; width: min(430px, calc(100vw - 290px)); animation: none; } }
@media (max-width: 600px) and (min-height: 480px) { body:not([data-device="touch"]) #cmpCard { left: calc(var(--safe-l) + 8px); right: calc(var(--safe-r) + 8px); width: auto; bottom: calc(var(--safe-b) + 116px); } }
@media (max-width: 760px) { #cmpCard .cmpEn li span { display: none; } }
/* タッチ：左の輪と右の攻撃ボタンの間に小さく */
body[data-device="touch"] #cmpCard { left: calc(var(--safe-l) + 150px); right: calc(var(--safe-r) + 232px); width: auto; max-width: 560px; transform: none; bottom: calc(var(--safe-b) + 6px); animation: none; }
body.onehand[data-device="touch"] #cmpCard { left: calc(var(--safe-l) + 10px); right: calc(var(--safe-r) + 140px); }
/* 小さい画面のカード：1列＝名前と強さと付与の短い文字だけ。ボタンは下 */
#cmpCard.compact { padding: 3px 5px 2px; }
#cmpCard.compact .cmpHead, #cmpCard.compact .cmpLbl, #cmpCard.compact .cmpEn li b, #cmpCard.compact .cmpEn li span { display: none; }
#cmpCard.compact .cmpMain { flex-direction: column; align-items: stretch; gap: 3px; }
#cmpCard.compact .cmpBody { gap: 3px; }
#cmpCard.compact .cmpCol { padding: 1px 3px 2px 15px; }
#cmpCard.compact .cmpNo { font-size: 13px; left: 3px; top: 2px; }
#cmpCard.compact .cmpName { font-size: 10.5px; }
#cmpCard.compact .cmpName small { font-size: 8.5px; margin-left: 2px; padding: 0 2px; }
#cmpCard.compact .cmpPow { font-size: 9.5px; }
#cmpCard.compact .cmpPow b { font-size: 11px; }
#cmpCard.compact .cmpEn { flex-direction: row; flex-wrap: wrap; gap: 3px; margin-top: 1px; }
#cmpCard.compact .cmpEn li.none { font-size: 9px; }
#cmpCard.compact .en { height: 16px; min-width: 18px; font-size: 10px; }
#cmpCard.compact #btnSwap { width: 100%; margin-bottom: 4px; font-size: 12px; padding: 0.2em 0.6em; }

/* 属性のダメージの数字：雷＝青白・燃焼＝橙・凍み＝水色・反応＝金の縁 */
.dmg.rai { color: #E4EEFF; text-shadow: 0 0 8px rgba(110, 150, 255, 0.95), 0 0 2px #4A6AFF, 0 2px 2px #000; }
.dmg.hi { color: #FFB45A; text-shadow: 0 0 8px rgba(255, 100, 20, 0.9), 0 2px 2px #000; }
.dmg.kori { color: #BFF4FF; text-shadow: 0 0 8px rgba(110, 220, 255, 0.9), 0 2px 2px #000; }
.dmg.react { color: #FFF6DA; font-size: clamp(16px, calc(var(--u) * 2.4), 24px); -webkit-text-stroke: 1px #D89A10; paint-order: stroke fill; text-shadow: 0 0 10px rgba(255, 196, 60, 0.95), 0 2px 2px #000; }
/* 反応・ルール変更の小さな文字 */
.lbl3d.react { font-size: clamp(12px, calc(var(--u) * 1.7), 17px); letter-spacing: 0.04em; }
.lbl3d.react.bakuhatsu { color: #FFD2A0; text-shadow: 0 0 10px rgba(255, 120, 30, 0.95), 0 1px 3px #000; }
.lbl3d.react.kudaku { color: #D6F6FF; text-shadow: 0 0 10px rgba(110, 210, 255, 0.95), 0 1px 3px #000; }
.lbl3d.react.tobihi { color: #E2EAFF; text-shadow: 0 0 10px rgba(110, 140, 255, 0.95), 0 1px 3px #000; }
.lbl3d.keyp { color: #EAD8FF; font-size: clamp(12px, calc(var(--u) * 1.6), 16px); text-shadow: 0 0 10px rgba(170, 110, 255, 0.95), 0 1px 3px #000; }
.lbl3d.keyp { transform: translate(-50%, 40px); }
/* 広い画面のカード：説明は名前の下に1行で */
@media (min-width: 761px) {
  body:not([data-device="touch"]) .cmpEn li { flex-wrap: wrap; row-gap: 0; }
  body:not([data-device="touch"]) .cmpEn li span { flex-basis: 100%; padding-left: 25px; white-space: nowrap; }
}

/* ---------- 第2段階：技の型の2択・技のタイルの型の印 ---------- */
#formCard { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 12px); transform: translateX(-50%); width: min(660px, calc(100vw - 24px - var(--safe-l) - var(--safe-r))); background: var(--paper); color: var(--ink); border-radius: 2px; padding: 6px 10px 8px; box-shadow: 0 16px 30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0,0,0,0.06); pointer-events: auto; animation: fcIn 0.26s cubic-bezier(.2,.9,.3,1.2); z-index: 6; }
@keyframes fcIn { from { transform: translateX(-50%) scale(0.94); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
.fcHead { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1.5px solid var(--ink); padding-bottom: 2px; margin-bottom: 5px; gap: 8px; min-width: 0; }
.fcT { font-family: 'Kaisei Tokumin', serif; font-weight: 800; font-size: 13px; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fcHint { font-size: 10.5px; font-weight: 800; color: #4A5260; white-space: nowrap; flex: none; }
.fcBody { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; align-items: stretch; }
.fcOr { align-self: center; font-family: 'Kaisei Tokumin', serif; font-weight: 800; font-size: 13px; color: var(--shu); }
.fcOpt { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; text-align: left; background: var(--frame); border: 1.5px solid var(--frameLine); border-radius: 3px; padding: 4px 6px 5px 24px; color: var(--ink); box-shadow: 0 3px 0 #9FB0C0; transition: transform 0.06s, background 0.1s; white-space: normal; }
.fcOpt:hover, .fcOpt.sel { background: #FFF6E2; border-color: #C9A24E; box-shadow: 0 3px 0 #A6741C, 0 0 0 2px rgba(255, 154, 60, 0.55); }
.fcOpt:active { transform: translateY(3px); box-shadow: 0 0 0 #9FB0C0; }
.fcNo { position: absolute; left: 5px; top: 2px; font-weight: 800; font-size: 19px; line-height: 1; }
.fcPic { flex: none; width: 44px; height: 38px; display: flex; align-items: center; justify-content: center; }
.fcPic svg { width: 44px; height: 38px; }
.fcTxt { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.fcName { font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fcName i { font-style: normal; font-size: 10px; font-weight: 800; margin-left: 4px; padding: 0 4px; border-radius: 2px; background: #E9E6DE; vertical-align: 1px; }
.fcName i.rai { background: #C9D8FF; } .fcName i.hi { background: #FFC890; } .fcName i.kori { background: #C8F0FF; } .fcName i.yagura { background: #E8D2A0; } .fcName i.buhin { background: #DADDE2; } .fcName i.crit { background: #FFE27A; }
.fcLine { font-size: 11px; font-weight: 600; line-height: 1.3; color: #3A4250; overflow-wrap: anywhere; }
/* 選んでいる間はタッチの操作を隠して、下の帯を使う */
body.picking #cmpCard { display: none !important; }
body.picking[data-device="touch"] #tMove, body.picking[data-device="touch"] #tAtk, body.picking[data-device="touch"] #tRoll, body.picking[data-device="touch"] .tHint, body.picking[data-device="touch"] #ults { display: none !important; }
@media (max-width: 600px), (max-height: 420px) {
  #formCard { padding: 4px 6px 6px; bottom: calc(var(--safe-b) + 6px); }
  .fcT { font-size: 11.5px; } .fcHint { font-size: 9.5px; }
  .fcPic { width: 30px; height: 26px; } .fcPic svg { width: 30px; height: 26px; }
  .fcOpt { padding: 3px 4px 4px 18px; gap: 4px; }
  .fcNo { font-size: 14px; left: 4px; }
  .fcName { font-size: 12px; } .fcLine { font-size: 9.5px; line-height: 1.25; }
}
@media (max-width: 400px) { .fcPic { display: none; } .fcBody { gap: 3px; } .fcOr { font-size: 11px; } }
/* 技のタイル：選んだ型の短い文字（右下） */
.ultForm { position: absolute; right: 2px; bottom: 8px; display: flex; gap: 1px; pointer-events: none; }
.ultForm:empty { display: none; }
.ultForm i { font-style: normal; font-size: 9px; font-weight: 800; line-height: 1; padding: 1px 2px; border-radius: 2px; background: #EDE7DA; color: #1C1E24; box-shadow: 0 1px 0 rgba(0,0,0,0.5); }
.ultForm i.rai { background: #C9D8FF; } .ultForm i.hi { background: #FFC890; } .ultForm i.kori { background: #C8F0FF; } .ultForm i.yagura { background: #E8D2A0; } .ultForm i.crit { background: #FFE27A; } .ultForm i.both { background: #D2B0FF; }
body[data-device="touch"] .ultForm i { font-size: 8px; padding: 0 1px; }
.en.yagura { background: #E8D2A0; box-shadow: 0 2px 0 #8E7038; }
/* 型の発動・櫓の小さな文字 */
.lbl3d.formp { color: #FFF0C8; font-size: clamp(12px, calc(var(--u) * 1.7), 17px); letter-spacing: 0.06em; text-shadow: 0 0 10px rgba(255, 200, 90, 0.95), 0 1px 3px #000; }
.lbl3d.formp.rai { text-shadow: 0 0 10px rgba(110, 150, 255, 0.95), 0 1px 3px #000; }
.lbl3d.formp.hi { text-shadow: 0 0 10px rgba(255, 110, 30, 0.95), 0 1px 3px #000; }
.lbl3d.formp.kori { text-shadow: 0 0 10px rgba(110, 220, 255, 0.95), 0 1px 3px #000; }
.lbl3d.tower { color: #F2DCA0; font-size: clamp(11px, calc(var(--u) * 1.5), 15px); text-shadow: 0 0 8px rgba(255, 170, 60, 0.9), 0 1px 3px #000; }
/* 細い縦画面：体力のプレートと部品の数を折り返す */
@media (max-width: 420px) { #hpRow { flex-wrap: wrap; row-gap: 4px; max-width: calc(100vw - 28px); } #hp { flex-wrap: wrap; } }
.credits{margin:6px 0 2px;font-size:12px;line-height:1.6;opacity:.85}
.credits summary{cursor:pointer;font-weight:700}
.credits p{margin:4px 0 0;max-height:30vh;overflow:auto}

/* =========================================================
   試作の見た目（?look=a｜b｜c）：差し色と文字の影だけを差し替える
   ========================================================= */
:root[data-look] {
  --lk-bg: #E9DFCB; --lk-txt: #3A2A20; --lk-halo: rgba(255, 248, 236, 0.92); --lk-soft: rgba(70, 45, 25, 0.45);
  --lk-shu: #C2492E; --lk-shu2: #D6603F; --lk-shuS: #8A3020;
  --lk-ink: #4E3B2E; --lk-ink2: #634C3B; --lk-inkS: #2E2219; --lk-inkT: #F4EADA;
  --lk-tan: #D9B98C; --lk-tan2: #E8CDA6; --lk-tanS: #A3825A;
  --lk-paper: #F4EFE4; --lk-paper2: #FBF8F1; --lk-paperS: #B9AE9A;
  --lk-sel: #E8A04A; --lk-sel2: #F2B868; --lk-selS: #A06420;
  --lk-crit: #F29A3A; --lk-critGlow: rgba(200, 90, 20, 0.85);
  --lk-veil: rgba(70, 50, 30, 0.32);
  --shu: var(--lk-shu);
}
:root[data-look="b"] {
  --lk-bg: #C98A7A; --lk-txt: #2E2030; --lk-halo: rgba(255, 236, 214, 0.9); --lk-soft: rgba(60, 30, 40, 0.5);
  --lk-shu: #D0502C; --lk-shu2: #E2683E; --lk-shuS: #8E3018;
  --lk-ink: #3E3656; --lk-ink2: #514770; --lk-inkS: #231E34; --lk-inkT: #F6E6D2;
  --lk-tan: #E6C292; --lk-tan2: #F2D4AA; --lk-tanS: #A87E50;
  --lk-paper: #F6E9D6; --lk-paper2: #FCF4E8; --lk-paperS: #B89E86;
  --lk-sel: #FFA552; --lk-sel2: #FFC07A; --lk-selS: #B05E1A;
  --lk-crit: #FFE2A6; --lk-critGlow: rgba(255, 120, 40, 0.95);
  --lk-veil: rgba(50, 30, 50, 0.38);
}
:root[data-look="c"] {
  --lk-bg: #DCC8A8; --lk-txt: #33281F; --lk-halo: rgba(255, 250, 238, 0.92); --lk-soft: rgba(80, 55, 30, 0.45);
  --lk-shu: #B8452E; --lk-shu2: #CC5A3E; --lk-shuS: #82301E;
  --lk-ink: #3F5C8A; --lk-ink2: #4E6E9E; --lk-inkS: #2A3F62; --lk-inkT: #F4ECDC;
  --lk-tan: #E2C49A; --lk-tan2: #EED5B0; --lk-tanS: #B08A5E;
  --lk-paper: #F2EBDC; --lk-paper2: #FAF6EC; --lk-paperS: #B9A88C;
  --lk-sel: #E2A24E; --lk-sel2: #EEBA70; --lk-selS: #9C6624;
  --lk-crit: #EEA846; --lk-critGlow: rgba(190, 90, 20, 0.85);
  --lk-veil: rgba(80, 60, 35, 0.3);
}
:root[data-look] body, :root[data-look] { background: var(--lk-bg); }
:root[data-look] #boot { background: var(--lk-bg); color: var(--lk-txt); }
:root[data-look] #rotate { background: var(--lk-bg); color: var(--lk-txt); }
/* ボタン：木の札・漆喰の板（角は今の小さな丸み、太い枠は付けない） */
:root[data-look] .tile { box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 8px 14px -6px var(--lk-soft); }
:root[data-look] .tile-shu { --top: var(--lk-shu); --top2: var(--lk-shu2); --side: var(--lk-shuS); --txt: #FFF7EC; }
:root[data-look] .tile-tan { --top: var(--lk-tan); --top2: var(--lk-tan2); --side: var(--lk-tanS); --txt: var(--lk-txt); }
:root[data-look] .tile-ink { --top: var(--lk-ink); --top2: var(--lk-ink2); --side: var(--lk-inkS); --txt: var(--lk-inkT); }
:root[data-look] .tile-paper { --top: var(--lk-paper); --top2: var(--lk-paper2); --side: var(--lk-paperS); --txt: var(--lk-txt); }
:root[data-look] .tile.sel { --top: var(--lk-sel); --top2: var(--lk-sel2); --side: var(--lk-selS); --txt: var(--lk-txt); }
:root[data-look] .pausebars i { background: var(--lk-inkT); }
/* 題字の板 */
:root[data-look] #logo { color: var(--lk-txt); background: linear-gradient(170deg, var(--lk-paper2) 0%, var(--lk-paper) 80%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.8), 0 16px 26px -12px var(--lk-soft); }
:root[data-look] #logo::before { background: linear-gradient(180deg, var(--lk-tanS), var(--lk-shuS)); height: 0.14em; }
:root[data-look="a"] #logo::before { background: linear-gradient(180deg, #B4583A, #8C3E28); }
:root[data-look="b"] #logo { background: linear-gradient(170deg, #FFF3E0 0%, #F7DDBA 85%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.8), 0 0 40px rgba(255, 170, 90, 0.55), 0 16px 26px -12px var(--lk-soft); }
:root[data-look="c"] #logo { background: linear-gradient(170deg, #F3DDB6 0%, #E2C49A 85%); }
:root[data-look="c"] #logo::before { background: linear-gradient(180deg, #C29A6A, #A07A4E); }
/* 画面に直接のる文字：暗い字に明るいにじみ（縁取りではなくやわらかい光） */
:root[data-look] #diffLine, :root[data-look] #recLine, :root[data-look] #enterHint, :root[data-look] #zoneLine, :root[data-look] #weaponN, :root[data-look] #partsN, :root[data-look] #feetParts { color: var(--lk-txt); text-shadow: 0 0 6px var(--lk-halo), 0 0 2px var(--lk-halo); }
:root[data-look] #challenge, :root[data-look] #objCount, :root[data-look] #objArrow { color: var(--lk-shu); text-shadow: 0 0 6px var(--lk-halo), 0 0 2px var(--lk-halo); }
:root[data-look] #objLine { color: var(--lk-txt); text-shadow: 0 0 8px var(--lk-halo), 0 0 3px var(--lk-halo); }
:root[data-look] #zoneLine b { color: var(--lk-shu); }
:root[data-look] #weaponN .wPow { color: var(--lk-txt); }
:root[data-look] #weaponN .wRef { color: #7A6A58; }
:root[data-look] #weaponN[data-grade="1"] .wPow { color: #B87414; }
:root[data-look] #weaponN[data-grade="2"] .wPow { color: #7A48C0; }
:root[data-look] .tHint, :root[data-look] .lbl3d.hint { color: var(--lk-txt); text-shadow: 0 0 6px var(--lk-halo), 0 0 2px var(--lk-halo); }
:root[data-look] .lbl3d { color: #FFFBF2; text-shadow: 0 0 8px var(--lk-critGlow), 0 1px 3px var(--lk-soft); }
:root[data-look] .lbl3d.net, :root[data-look] .lbl3d.power { color: #FFF8EA; }
/* 技の札 */
:root[data-look] .ultTop { background: linear-gradient(160deg, var(--lk-ink2), var(--lk-ink)); box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.3), 0 6px 0 var(--lk-inkS), 0 8px 12px var(--lk-soft); }
:root[data-look] .ult.ready .ultTop { background: linear-gradient(160deg, var(--lk-sel2), var(--lk-sel)); box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.6), 0 6px 0 var(--lk-selS), 0 0 18px var(--lk-sel); }
:root[data-look] .ult.empty .ultTop { background: rgba(255, 250, 240, 0.35); box-shadow: inset 0 0 0 1.5px var(--lk-soft); }
:root[data-look] .ult.empty .ultName { color: var(--lk-txt); }
:root[data-look] .ultStuds i { background: rgba(0, 0, 0, 0.28); }
:root[data-look] .ultStuds i.on { background: radial-gradient(circle at 35% 30%, #FFF4E0, var(--lk-sel2) 60%, var(--lk-selS)); box-shadow: 0 0 5px var(--lk-sel); }
/* 体力：朱の漆の札 */
:root[data-look] .plate { background: radial-gradient(circle at 38% 32%, var(--lk-shu2) 0, var(--lk-shu) 45%, var(--lk-shuS) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 2px 0 var(--lk-shuS), 0 4px 6px var(--lk-soft); }
:root[data-look] .plate::after { background: radial-gradient(circle at 40% 35%, var(--lk-shu2), var(--lk-shu)); }
/* タッチの操作 */
:root[data-look] #tAtk { background: radial-gradient(circle at 40% 32%, var(--lk-shu2), var(--lk-shu) 70%); box-shadow: inset 0 2px 0 rgba(255,255,255,0.35), 0 5px 0 var(--lk-shuS), 0 8px 12px var(--lk-soft); }
:root[data-look] #tRoll { background: radial-gradient(circle at 40% 32%, var(--lk-ink2), var(--lk-ink) 70%); box-shadow: inset 0 2px 0 rgba(255,255,255,0.3), 0 5px 0 var(--lk-inkS), 0 8px 12px var(--lk-soft); }
:root[data-look] #tMove .tRing { box-shadow: inset 0 0 0 2px var(--lk-soft); }
/* 説明書・一時停止の下の幕 */
:root[data-look] #manual, :root[data-look] #pause, :root[data-look] #result, :root[data-look] #shop, :root[data-look] #sortie { background: var(--lk-veil); }
:root[data-look] .page { box-shadow: 0 24px 50px var(--lk-soft), 0 0 0 1px rgba(0,0,0,0.05); }
/* ダメージの数字 */
:root[data-look] .dmg { color: #FFFCF4; text-shadow: 0 0 6px var(--lk-critGlow), 0 1px 2px var(--lk-soft), 0 0 1px rgba(60, 30, 10, 0.9); }
:root[data-look] .dmg.crit { color: var(--lk-crit); text-shadow: 0 0 10px var(--lk-critGlow), 0 1px 2px var(--lk-soft), 0 0 1px rgba(60, 30, 10, 0.9); }
:root[data-look] .dmg.crit small { color: #FFF6E6; }
:root[data-look] .dmg.hurt { color: #FFE2D6; text-shadow: 0 0 8px rgba(200, 60, 40, 0.9), 0 1px 2px var(--lk-soft); }
:root[data-look] #bossFill { background: repeating-linear-gradient(90deg, var(--lk-shu) 0 18px, var(--lk-shuS) 18px 20px); }
:root[data-look] #bossBar { background: rgba(60, 40, 30, 0.45); }
:root[data-look] #knob { background: radial-gradient(circle at 38% 32%, var(--lk-paper2), var(--lk-tan)); box-shadow: 0 3px 0 var(--lk-tanS), 0 5px 8px var(--lk-soft); }

/* 敵の状態の札（雷・火・氷）と、初めての説明 */
.stb { position: absolute; left: 0; top: 0; pointer-events: none; display: flex; gap: 2px; z-index: 1; }
.stb i { font-style: normal; font-weight: 800; font-size: clamp(10px, calc(var(--u) * 1.35), 13px); line-height: 1; padding: 3px 4px 2px; border-radius: 6px; color: #fff; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); animation: stbIn 0.18s ease-out; }
.stb i small { font-size: 0.75em; margin-left: 1px; }
.stb i.r { background: #4A78E0; animation: stbIn 0.18s ease-out, stbZap 0.22s steps(2) infinite; }
.stb i.h { background: #E0662A; }
.stb i.k { background: #3AA6C8; }
@keyframes stbIn { from { transform: scale(1.6); } to { transform: scale(1); } }
@keyframes stbZap { 50% { filter: brightness(1.45); } }
.lbl3d.tip { transform: translate(-50%, 48px); white-space: normal; width: max-content; max-width: min(88vw, 30em); text-align: center; font-weight: 700; font-size: clamp(12px, calc(var(--u) * 1.6), 16px); color: #fff; background: rgba(40, 30, 24, 0.82); padding: 6px 12px; border-radius: 10px; text-shadow: none; }
.lbl3d.tip.rai { box-shadow: 0 0 0 2px #6E9CFF; }
.lbl3d.tip.hi { box-shadow: 0 0 0 2px #FF9050; }
.lbl3d.tip.kori { box-shadow: 0 0 0 2px #7FD8F0; }
.lbl3d.tip.react { box-shadow: 0 0 0 2px #FFC850; }
/* 状態の説明（2026-10-04）：その敵の頭の上に、短く */
.lbl3d.tip.near { transform: translate(-50%, -100%); max-width: min(60vw, 19em); font-size: clamp(11px, calc(var(--u) * 1.45), 15px); padding: 4px 9px; }
.stb i.k.f { background: #1E6FA8; box-shadow: 0 0 0 2px #BFEFFF, 0 2px 0 rgba(0, 0, 0, 0.25); }
.dmg.amp small { display: block; text-align: center; font-size: 0.5em; font-style: normal; color: #CFE0FF; margin-bottom: -0.1em; }
.en.proc { animation: enProc 0.45s ease-out; }
@keyframes enProc { 0% { transform: scale(1.45); filter: brightness(1.8); box-shadow: 0 0 14px 4px rgba(255, 220, 120, 0.95); } 100% { transform: scale(1); filter: none; } }

/* ---------- お肉寿司（肉崩し）のボタンと画面の縁の光 ---------- */
.nikuBtn { position: relative; width: clamp(52px, calc(var(--u) * 7.2), 76px); height: clamp(52px, calc(var(--u) * 7.2), 76px); background: none; padding: 0; transition: opacity 0.2s; }
.nkTop { position: absolute; inset: 0 0 6px 0; border-radius: 4px; background: linear-gradient(160deg, #5A2A3A, #3A1C26); box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.3), 0 6px 0 #1E0C12, 0 10px 14px rgba(0,0,0,0.6), 0 0 16px rgba(255, 120, 170, 0.45); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transition: transform 0.07s; }
.nikuBtn:active .nkTop { transform: translateY(4px); box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.3), 0 2px 0 #1E0C12; }
.nkIco { position: relative; width: 30px; height: 18px; }
.nkIco i { position: absolute; display: block; }
.nkRice { left: 3px; right: 3px; bottom: 0; height: 9px; border-radius: 4px; background: linear-gradient(#FFFFFF, #E8E2D4); box-shadow: 0 1px 0 #9A9080; }
.nkMeat { left: 0; right: 0; top: 0; height: 10px; border-radius: 5px 5px 3px 3px; background: linear-gradient(170deg, #FF9AB8, #E0466E 55%, #A8203E); box-shadow: inset 0 1px 0 rgba(255,255,255,0.55); z-index: 1; }
.nkMeat::after { content: ''; position: absolute; left: 6px; right: 6px; top: 4px; height: 2px; border-radius: 1px; background: rgba(255, 230, 236, 0.75); }
.nkNori { left: 12px; width: 6px; top: 2px; bottom: 0; background: #1C2A1E; border-radius: 1px; z-index: 2; }
.nkName { font-size: clamp(9px, calc(var(--u) * 1.15), 12px); font-weight: 800; color: #FFE0EA; white-space: nowrap; }
.nkN { position: absolute; right: 3px; top: 2px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; font-size: 11px; font-weight: 800; color: #3A1400; background: linear-gradient(#FFE89A, #F2B53A); box-shadow: 0 1px 2px #000; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; z-index: 3; }
.nkSec { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); font-size: 11px; font-weight: 800; color: #FFE27A; text-shadow: 0 0 6px rgba(255, 90, 160, 0.95), 0 1px 2px #000; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nkSec:empty { display: none; }
.nikuBtn .key { position: absolute; left: 3px; top: 3px; font-size: 11px; font-weight: 800; background: #EDE7DA; color: #1C1E24; width: 17px; height: 17px; border-radius: 2px; display: flex; align-items: center; justify-content: center; z-index: 3; }
.nikuBtn.none { opacity: 0.38; }
.nikuBtn.none .nkTop { box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.2), 0 6px 0 #1E0C12; filter: saturate(0.4); }
.nikuBtn.on .nkTop { background: linear-gradient(160deg, #FFB0CC, #FFD45A); box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.7), 0 6px 0 #A8406A, 0 0 26px rgba(255, 140, 190, 0.9); animation: nkPulse 0.5s ease-in-out infinite alternate; }
.nikuBtn.on .nkName { color: #4A1020; }
.nikuBtn.got .nkTop { animation: lvUp 0.9s cubic-bezier(.25,1.6,.5,1); }
@keyframes nkPulse { from { filter: brightness(1); } to { filter: brightness(1.25); } }
body[data-device="touch"] .nikuBtn { position: absolute; width: 48px; height: 48px; right: calc(var(--safe-r) + 196px); bottom: calc(var(--safe-b) + 150px); }
body[data-device="touch"] .nkIco { transform: scale(0.8); margin: -2px 0; }
body[data-device="touch"] .nkName { font-size: 9px; }
body.onehand[data-device="touch"] .nikuBtn { right: calc(var(--safe-r) + 132px); bottom: calc(var(--safe-b) + 12px); }
body.picking[data-device="touch"] .nikuBtn { display: none !important; }
#nikuEdge { position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0; transition: opacity 0.25s; box-shadow: inset 0 0 38px 10px rgba(255, 110, 170, 0.75), inset 0 0 90px 30px rgba(255, 200, 70, 0.35); background: radial-gradient(ellipse at center, rgba(255, 140, 190, 0) 62%, rgba(255, 140, 190, 0.12) 100%); }
body.nikuOn #nikuEdge { opacity: 1; animation: nkEdge 0.6s ease-in-out infinite alternate; }
body.nikuOn.nikuEnd #nikuEdge { animation: nkBlink 0.12s steps(2) infinite; }
@keyframes nkEdge { from { box-shadow: inset 0 0 34px 8px rgba(255, 110, 170, 0.7), inset 0 0 80px 26px rgba(255, 200, 70, 0.3); } to { box-shadow: inset 0 0 46px 14px rgba(255, 200, 70, 0.75), inset 0 0 100px 34px rgba(255, 110, 170, 0.35); } }
@keyframes nkBlink { 0% { opacity: 1; } 100% { opacity: 0.25; } }
.dmg.nk, :root[data-look] .dmg.crit.nk { font-size: clamp(26px, calc(var(--u) * 4.0), 42px); color: #FFE34A; -webkit-text-stroke: 1.5px #C2266A; paint-order: stroke fill; text-shadow: 0 0 14px rgba(255, 110, 180, 0.95), 0 0 4px #FFB000, 0 2px 2px #000; z-index: 3; }
.dmg.nk small, :root[data-look] .dmg.crit.nk small { color: #FFE0EC; -webkit-text-stroke: 0; }
#feetNiku.nk { color: #FFE27A; text-shadow: 0 0 8px rgba(255, 90, 160, 0.95), 0 1px 2px #000; }

/* ---------- 属性の見える化（2026-10-04）：昼の明るい画面でも読める色の札と縁取り ---------- */
/* 反応の予告：頭の上の「爆」「飛」「砕」 */
.pvb { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 2; }
.pvb b { display: flex; align-items: center; justify-content: center; width: clamp(22px, calc(var(--u) * 3.0), 32px); height: clamp(22px, calc(var(--u) * 3.0), 32px); border-radius: 50%; font-weight: 900; font-size: clamp(13px, calc(var(--u) * 1.95), 20px); line-height: 1; color: #fff; border: 2.5px solid #1B120C; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 3px 0 rgba(0, 0, 0, 0.35); animation: pvIn 0.22s cubic-bezier(.3,1.9,.5,1), pvBob 0.6s ease-in-out 0.22s infinite alternate; }
.pvb.bakuhatsu b { background: #F0561A; }
.pvb.tobihi b { background: #3A66F0; }
.pvb.kudaku b { background: #2BAFD8; }
@keyframes pvIn { from { transform: scale(0.2); } to { transform: scale(1); } }
@keyframes pvBob { from { transform: translateY(0) scale(1); } to { transform: translateY(-4px) scale(1.08); } }
/* 反応の瞬間の文字：大きく、色の帯つき */
.lbl3d.react, :root[data-look] .lbl3d.react { font-size: clamp(17px, calc(var(--u) * 2.6), 27px); font-weight: 900; letter-spacing: 0.06em; color: #fff; -webkit-text-stroke: 1.5px #1B120C; paint-order: stroke fill; padding: 0 0.35em; border-radius: 0.4em; animation: reactPop 0.42s cubic-bezier(.25,2.0,.5,1); }
.lbl3d.react.bakuhatsu, :root[data-look] .lbl3d.react.bakuhatsu { background: rgba(240, 86, 26, 0.88); text-shadow: 0 2px 0 #7A2400; box-shadow: 0 0 0 2px #1B120C; }
.lbl3d.react.tobihi, :root[data-look] .lbl3d.react.tobihi { background: rgba(58, 102, 240, 0.88); text-shadow: 0 2px 0 #10247A; box-shadow: 0 0 0 2px #1B120C; }
.lbl3d.react.kudaku, :root[data-look] .lbl3d.react.kudaku { background: rgba(43, 175, 216, 0.9); text-shadow: 0 2px 0 #0B5670; box-shadow: 0 0 0 2px #1B120C; }
.lbl3d.react.glow { font-size: clamp(14px, calc(var(--u) * 2.0), 20px); }
@keyframes reactPop { 0% { transform: translate(-50%, -100%) scale(0.3); } 100% { transform: translate(-50%, -100%) scale(1); } }
.lbl3d.tip.pv { box-shadow: 0 0 0 2px #F0561A; }
.lbl3d.tip.bow { box-shadow: 0 0 0 2px #FFC850; }
/* 武器に乗った属性の札：大きく、残り秒の帯つき */
#wElem { gap: 5px; }
.we { position: relative; display: inline-flex; align-items: center; gap: 3px; font-size: clamp(12px, calc(var(--u) * 1.75), 17px); padding: 3px 7px 4px 3px; border-radius: 5px; border: 2px solid #1B120C; overflow: hidden; }
.we b { display: inline-flex; align-items: center; justify-content: center; width: 1.35em; height: 1.35em; border-radius: 50%; background: #1B120C; color: #fff; font-weight: 900; }
.we.rai b { background: #2E56D8; } .we.hi b { background: #D8501A; } .we.kori b { background: #1F8FB8; }
.we s { position: absolute; left: 0; bottom: 0; height: 3px; background: #1B120C; text-decoration: none; }
.we.end { opacity: 1; animation: weEnd 0.16s steps(2) infinite; }
@keyframes weEnd { 50% { opacity: 0.35; } }
/* 技のタイル：撃てば反応が起きる敵がまとまっている */
.ult.pv .ultTop { box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.6), 0 6px 0 #7A2400, 0 0 0 3px #F0561A, 0 0 20px rgba(240, 86, 26, 0.9); animation: ultPv 0.5s ease-in-out infinite alternate; }
.ultPv { position: absolute; right: -6px; top: -8px; display: none; align-items: baseline; gap: 1px; padding: 2px 5px 1px; border-radius: 9px; font-weight: 900; font-size: clamp(12px, calc(var(--u) * 1.7), 17px); line-height: 1; color: #fff; border: 2px solid #1B120C; z-index: 2; pointer-events: none; }
.ultPv small { font-size: 0.7em; }
.ultPv.bakuhatsu, .ultPv.tobihi, .ultPv.kudaku { display: inline-flex; }
.ultPv.bakuhatsu { background: #F0561A; } .ultPv.tobihi { background: #3A66F0; } .ultPv.kudaku { background: #2BAFD8; }
@keyframes ultPv { from { transform: translateY(0); } to { transform: translateY(-3px); } }
/* 半弓の溜め（足元） */
#feetChg { display: none; position: relative; width: 46px; height: 7px; border-radius: 4px; background: rgba(27, 18, 12, 0.75); border: 1.5px solid #1B120C; overflow: hidden; }
#feetChg b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #E8E2D0; }
#feetChg.full b { background: #FFC23A; animation: chgFull 0.12s steps(2) infinite; }
@keyframes chgFull { 50% { background: #FFF2B0; } }
/* 結果の画面：起こした反応 */
.rec.react { flex-wrap: wrap; row-gap: 2px; }
.rec.react b { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 8px; white-space: normal; font-size: clamp(11px, calc(var(--u) * 1.55), 16px); }
.rec.react b i { font-style: normal; white-space: nowrap; }
.rec.react b i.bakuhatsu { color: #C8400C; } .rec.react b i.tobihi { color: #2A50C8; } .rec.react b i.kudaku { color: #1A86AE; } .rec.react b i.chain { color: #A06A00; }
.rec.react b i.none { color: #6A7280; font-weight: 600; }

/* 切／入 の並び：今の方だけ色付き、もう片方は薄く */
.seg { display: inline-flex; gap: 0; flex: none; }
.seg .tile { border-radius: 0; min-width: 3.2em; }
.seg .tile:first-child { border-radius: 8px 0 0 8px; }
.seg .tile:last-child { border-radius: 0 8px 8px 0; }
.seg .tile.dim { opacity: 0.55; }

/* 共通ガード：子要素の長押しも抑止。編集欄は維持。 */
button,button *,#hud,#hud *,#touch,#gl{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none}
input,textarea,[contenteditable="true"]{user-select:text;-webkit-user-select:text;touch-action:auto}
#mOW.tile{color:#fff3dc}
@media(max-height:450px){#modes .big{padding:9px 15px;min-width:128px}#modes .big b{font-size:20px}}

@media(max-width:800px){#row1{gap:10px}#modes{gap:7px}#modes .big{min-width:104px;padding:8px 10px}#modes .big b{font-size:19px}#modes .big small{font-size:10px}#diffs .mid{padding:8px 9px;font-size:15px}}

/* 002 representative prototype: existing warm paper palette, map beside play area. */
#owCorner {position:fixed;right:10px;top:10px;z-index:15;width:112px} #owCorner button{padding:3px;border:2px solid #af9673;border-radius:3px;background:#eee3c8;color:#493e31;box-shadow:0 3px #9e886c;width:100%;font:700 12px Murecho,sans-serif} #owCorner canvas{width:100%;height:80px;display:block} #owCorner span{display:block}
#owMap,#owReward{position:fixed;inset:16px 17%;z-index:70;background:rgba(242,231,205,.98);color:#463d31;border:2px solid #a98659;border-radius:5px;padding:12px;box-shadow:0 8px 50px #171c2588;font-family:Murecho,sans-serif} #owMap[hidden],#owReward[hidden],#owCorner[hidden]{display:none} #owMap header{display:flex;align-items:center;justify-content:space-between;height:44px;gap:8px} #owMap header b{font:800 22px 'Kaisei Tokumin',serif} #owMap button,#owReward button{background:#f6edd8;color:#473d31;border:1px solid #ae946c;border-radius:3px;padding:9px;text-align:left;box-shadow:0 3px #ac9879;font:700 15px Murecho,sans-serif} .owMapBody{display:flex;gap:12px;height:calc(100% - 50px)} .owMapBody>canvas{width:calc(100% - 205px);height:100%;object-fit:contain;background:#c6c998;border:1px solid #ae956a} .owMapBody aside{width:193px;overflow-y:auto;font-size:13px} .owMapBody p{margin:8px 0} .owShrines button{display:block;width:100%;margin:7px 0} .owShrines button:disabled{opacity:.55;box-shadow:none} .owShrines small,#owReward small{display:block;font-size:11px;font-weight:400;margin-top:4px} #owReward{inset:25% 20%;height:max-content} #owReward h2{font-size:20px} .owRewardRow{display:flex;gap:10px}.owRewardRow button{flex:1} body:has(#owCorner:not([hidden])) #ults{top:auto;bottom:14px;right:120px} #owNew{font-size:13px;padding:4px 10px;min-height:30px}
@media(max-height:450px){#owCorner{right:7px;top:7px;width:96px}#owCorner canvas{height:62px}#owMap{inset:8px;padding:8px}#owMap header{height:42px}#owMap header b{font-size:17px}.owMapBody{height:calc(100% - 46px);gap:8px}.owMapBody>canvas{width:calc(100% - 158px)}.owMapBody aside{width:150px;font-size:10px}.owMapBody button{font-size:11px;padding:7px}.owShrines small{font-size:9px}#owReward{inset:21% 14%;padding:10px}#owReward h2{font-size:15px}#owReward button{font-size:12px}.owRewardRow{gap:7px}body:has(#owCorner:not([hidden])):not([data-device='touch']) #ults{bottom:8px;right:8px}}

body[data-device="touch"]:has(#owCorner:not([hidden])) #ults{bottom:0;right:0}

/* 002 HUD addendum: approved map / quests / compact footer. */
.owPlaying #objective{display:none}.owPlaying #feet{display:none}.owPlaying #owCorner{width:154px}#owQuests{background:#302921d9;color:#f2e4c7;padding:8px;font:600 12px Murecho,sans-serif;margin-top:8px;border-left:2px solid #d3ac62;text-shadow:0 1px #000}#owQuests b{display:block;font-size:13px;color:#f4cd7f;margin-bottom:4px}#owQuests .done{opacity:.65;text-decoration:line-through}#owQuests div{margin:4px 0}
#owFooter{position:absolute;left:50%;transform:translateX(-50%);bottom:12px;display:flex;align-items:center;gap:10px;padding:8px 10px;background:#302a22e8;border:1px solid #b89e6a;border-radius:5px;color:#f3e5c7;max-width:calc(100% - 310px)}#owFooter[hidden]{display:none}#owFooter #status{position:static;display:flex;flex-direction:column;min-width:140px;gap:3px;max-width:230px}#owFooter #hpRow{display:flex;gap:6px}#owFooter #hp{gap:3px}#owFooter .plate{width:14px;height:14px}#owFooter #weaponN{font-size:12px;margin:0}#owFooter #charms,#owFooter #wEnch{display:none}#owFooter #ults{position:static!important;inset:auto!important;display:flex!important;gap:6px;width:auto!important;height:auto!important}#owFooter .ult,#owFooter .nikuBtn{position:relative!important;inset:auto!important;width:54px;height:56px;flex:none;margin:0}#owFooter .ultName{font-size:10px}#owFooter .ultLv{font-size:10px}#owFooter .key{font-size:9px}#owEquipBtn{background:#e8dac1;border:1px solid #b39b74;border-radius:3px;min-width:44px;height:44px;font:600 12px Murecho,sans-serif;color:#41382c}#owFooter .wRef{display:none}
#owEquipment{position:fixed;inset:9% 12%;z-index:70;border:2px solid #a98659;border-radius:5px;background:#efe2c4f5;padding:18px;color:#463d31;overflow:auto;font-family:Murecho,sans-serif}#owEquipment[hidden]{display:none}#owEquipment header{display:flex;align-items:center;justify-content:space-between;font:800 24px 'Kaisei Tokumin',serif}#owEquipment button{padding:10px;background:#faf0d9;border:1px solid #a68c62;border-radius:3px;color:#473b2c;font:600 15px Murecho,sans-serif}.owEquipmentCols{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.owEquipmentCols article{padding:12px;border:1px solid #b39e74;background:#f7ebd2}.owEquipmentCols h3{margin:0 0 10px;font-size:16px}.owEquipmentCols p{margin:6px 0;font-size:13px}
@media(max-height:450px){.owPlaying #owCorner{width:110px}.owPlaying #owCorner canvas{height:63px}#owQuests{font-size:10px;padding:5px;margin-top:5px}#owQuests b{font-size:10px}#owFooter{bottom:7px;padding:5px;gap:5px;max-width:calc(100% - 275px);min-width:350px}#owFooter #status{min-width:103px;width:103px;gap:1px}#owFooter .plate{width:9px;height:9px}#owFooter #hp{gap:2px}#owFooter #hpRow{gap:3px}#owFooter #partsN{font-size:9px;gap:2px}#owFooter #weaponN{font-size:10px;gap:2px}#owFooter .wPow{font-size:10px}#owFooter .ult,#owFooter .nikuBtn{width:38px;height:42px}#owFooter #ults{gap:4px}#owFooter .ultTop{padding:4px 2px}#owFooter .ultStuds i{width:3px;height:3px}#owFooter .ultStuds{gap:2px}#owFooter .ultName{font-size:8px}#owFooter .ultLv{font-size:8px}#owFooter .ultPips{display:none}#owFooter .key{font-size:7px}#owFooter .nkName{font-size:8px}#owFooter .nkIco{transform:scale(.7);height:16px}#owFooter .nkN{font-size:10px}#owEquipBtn{min-width:34px;height:40px;padding:1px;font-size:10px}#owEquipment{inset:8px 12%;padding:12px}#owEquipment header{font-size:18px}.owEquipmentCols{grid-template-columns:repeat(3,1fr);gap:7px}.owEquipmentCols article{padding:7px}.owEquipmentCols h3{font-size:12px}.owEquipmentCols p{font-size:10px}body.owPlaying[data-device="touch"] #tMove{left:70px;bottom:72px;top:auto;width:88px;height:88px;transform:none}body.owPlaying[data-device="touch"] #tAtk{right:12px;bottom:68px;width:75px;height:75px}body.owPlaying[data-device="touch"] #tRoll{right:97px;bottom:99px;width:46px;height:46px}body.owPlaying #hMove,body.owPlaying #hRoll,body.owPlaying #hAtk{display:none!important}}
.owPlaying #feet{display:none!important}

#tJump{display:none;position:absolute;right:calc(var(--safe-r) + 185px);bottom:calc(var(--safe-b) + 57px);width:56px;height:56px;border-radius:50%;background:var(--lk-ink,#3e514d);color:var(--lk-paper,#f4e8ce);border:2px solid #d4c2a1;pointer-events:auto;font-size:23px;box-shadow:0 4px 0 #292822}
body.owPlaying[data-device="touch"] #tJump{display:block}body.picking #tJump{display:none!important}
@media(max-height:450px){body.owPlaying[data-device="touch"] #tJump{right:155px;bottom:99px;width:46px;height:46px;font-size:19px}}
/* 005 keeps the approved paper/wood palette and adds the Ki strip and skill desk. */
#owFooter #ults.owOldUlts{display:none!important}.owKi{font-size:11px;color:#c6e6de;margin-top:3px}.owKi>div{height:5px;background:#171f1e;border:1px solid #8b9d8e;border-radius:2px;overflow:hidden}.owKi i{height:100%;display:block;background:#6eccc4;transition:width .1s linear}.owSkillHud{display:flex;gap:5px}.owSkillButton{width:60px;min-height:62px;padding:4px 2px;white-space:pre-line;font:600 11px Murecho,sans-serif;border:1px solid #b4a07e;border-radius:3px;background:#2c302c;color:#f1dfba;line-height:1.35}.owSkillButton.ready{border-color:#c8b573;background:#405447;box-shadow:inset 0 2px #a99c61}.owSkillButton:disabled{opacity:.65}.owSkillLayout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:16px;max-width:970px;margin:auto;height:100%}.owSkillList,.owSkillDetail{overflow:auto;touch-action:pan-y;padding:10px;background:#e9dcc2;border:1px solid #b6a27c;border-radius:3px}.owSkillList h3{font-size:13px;margin:12px 0 5px;color:#665537}.owSkillChoice{display:block;width:100%;text-align:left;margin:4px 0}.owSkillChoice small{display:block;font-size:10px;color:#546845}.owSkillChoice.future{opacity:.65}.owSkillDetail h2{margin:0 0 7px;font-size:23px}.owSkillDetail h3{font-size:14px;margin:14px 0 6px}.owSkillDetail p{font-size:13px;line-height:1.65;margin:8px 0}.owSkillFacts,.owSkillSynergy,.owSkillGlossary{background:#d9ceb5;padding:8px}.owFormChoices{display:flex;gap:8px}.owFormChoices button{flex:1;white-space:pre-line;text-align:left;line-height:1.5}.owSkillEquip{display:flex;flex-wrap:wrap;gap:5px}.owSupportRow{display:grid;grid-template-columns:175px minmax(0,1fr);gap:8px;align-items:center;margin:6px 0}.owSupportRow select{min-height:36px}.owSupportLibrary{display:flex;flex-wrap:wrap;gap:5px}.owSupportLibrary h3{width:100%}.owSkillNotice{color:#795329;border-left:3px solid #997b40;padding:6px}.owSkillSlots{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.owSkillSlot{min-height:48px}.owSkillIntro{margin:0 0 8px;font-size:12px}.owPanel[data-tab='skills'] .owPanelBody{overflow:hidden;display:flex;flex-direction:column}.owPanel[data-tab='skills'] .owSkillLayout{min-height:0;flex:1;width:100%}.owModal .owSkillButton{pointer-events:none}body.owPlaying #owFooter{max-width:calc(100% - 230px)}
@media(max-height:450px){#owFooter{min-width:0!important;gap:4px;padding:4px;bottom:5px}#owFooter #status{width:72px;min-width:72px}#owFooter .owSkillHud{gap:3px}#owFooter .owSkillButton{width:35px;min-height:46px;font-size:8px;line-height:1.4;padding:2px 1px}#owFooter .nikuBtn{width:34px;height:46px}#owFooter #owDogState,#owFooter #owEquipBtn{min-width:30px;width:30px;font-size:9px;padding:2px;height:40px}.owKi{font-size:8px;margin-top:1px}.owKi>div{height:4px}.owSkillLayout{grid-template-columns:158px minmax(0,1fr);gap:7px}.owSkillList,.owSkillDetail{padding:6px}.owSkillDetail h2{font-size:17px}.owSkillDetail p{font-size:10px}.owSkillList h3{font-size:11px;margin:6px 0 4px}.owSkillChoice{font-size:10px;padding:5px}.owSkillDetail h3{font-size:11px;margin-top:9px}.owFormChoices{gap:4px}.owFormChoices button{font-size:10px;padding:5px}.owSupportRow{grid-template-columns:140px minmax(0,1fr);gap:5px}.owSupportRow small{font-size:9px}.owSkillIntro{font-size:10px}.owSkillSlot{font-size:10px;min-height:36px}}

.owSkillSticky{position:sticky;top:-10px;background:#e9dcc2;z-index:2;padding:2px 0 3px;border-bottom:1px solid #c6b28b}.owSkillSticky .owSkillFacts{margin:3px 0}.owSkillSticky p{margin:4px 0}
@media(max-height:450px){#owFooter .owSkillButton{width:44px;min-height:48px;font-size:9px}.owSkillSticky{top:-6px;padding-top:2px}.owSkillSticky p{font-size:10px;line-height:1.3}.owSkillSticky h2{font-size:15px;margin-bottom:2px}}

@media(max-height:450px){.owSkillSticky p:not(.owSkillFacts){display:none}.owSupportRow{scroll-margin-top:65px}#owFooter #hp{display:grid;grid-template-columns:repeat(4,9px);gap:2px}#owFooter #partsN{display:none}}

@media(max-height:450px){#owFooter .owSkillButton{min-height:54px;line-height:1.2}}
/* 2026-10-08 遊んでいる間は、画面のすき間（iPhone の下端など）にベージュが見えないよう暗い色に */
:root[data-look] body.owPlaying, :root[data-look]:has(body.owPlaying) { background: #0b0d0c; }
/* 匿名の記録のお知らせ（2026-10-10 Web公開） */
#privacyLink { position: absolute; left: calc(var(--safe-l, 0px) + 8px); bottom: calc(env(safe-area-inset-bottom, 0px) + 6px); z-index: 5; font-size: 11px; color: rgba(255, 248, 230, .8); text-decoration: underline; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }