* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b0d1a; color: #fff; font-family: 'DotGothic16', 'Hiragino Kaku Gothic ProN', sans-serif; touch-action: manipulation; -webkit-user-select: none; user-select: none; overscroll-behavior: none; }
input { -webkit-user-select: text; user-select: text; font-family: inherit; }
button { font-family: inherit; color: inherit; cursor: pointer; }
.hidden { display: none !important; }
#game-root { position: fixed; inset: 0; }
#map-canvas { position: absolute; inset: 0; image-rendering: pixelated; touch-action: none; -webkit-touch-callout: none; }

/* ---------- HUD ---------- */
#hud { position: absolute; top: calc(env(safe-area-inset-top) + 8px); left: 8px; background: rgba(10, 12, 40, .82); border: 2px solid #fff; border-radius: 8px; padding: 6px 10px; font-size: 13px; min-width: 170px; pointer-events: none; z-index: 5; box-shadow: 0 2px 0 #000; }
.hud-name small { color: #ffe680; }
.hud-bars { display: grid; grid-template-columns: auto 1fr; gap: 2px 6px; align-items: center; font-size: 11px; margin: 3px 0; }
.hud-sub { font-size: 11px; color: #cde; }
.hpbar { display: block; height: 7px; background: #222; border: 1px solid #555; border-radius: 4px; overflow: hidden; min-width: 60px; }
.hpbar i { display: block; height: 100%; background: linear-gradient(#7dff8a, #2fbf4a); transition: width .3s; }
.hpbar.low i { background: linear-gradient(#ff9a7d, #e03a2a); }
.hpbar.mp i { background: linear-gradient(#8ac8ff, #2f7bdf); }
.spark-note { color: #ffe14d; animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .55; } }

/* ---------- コントロール ---------- */
#controls { position: absolute; left: 0; right: 0; bottom: 0; height: 0; z-index: 6; }
#dpad { position: absolute; left: calc(env(safe-area-inset-left) + 14px); bottom: calc(env(safe-area-inset-bottom) + 18px); width: 150px; height: 150px; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); touch-action: none; }
#dpad .dir { background: rgba(255, 255, 255, .18); border: 2px solid rgba(255, 255, 255, .5); border-radius: 10px; font-size: 18px; touch-action: none; }
#dpad .dir.on { background: rgba(255, 230, 128, .5); }
#dpad [data-dir=up] { grid-area: 1 / 2; } #dpad [data-dir=left] { grid-area: 2 / 1; } #dpad [data-dir=right] { grid-area: 2 / 3; } #dpad [data-dir=down] { grid-area: 3 / 2; }
#action-buttons { position: absolute; right: calc(env(safe-area-inset-right) + 16px); bottom: calc(env(safe-area-inset-bottom) + 22px); display: flex; gap: 14px; align-items: flex-end; }
#btn-a { width: 76px; height: 76px; border-radius: 50%; background: rgba(224, 74, 58, .75); border: 3px solid #fff; font-size: 26px; touch-action: none; }
#btn-menu { width: 64px; height: 40px; border-radius: 20px; background: rgba(60, 80, 200, .75); border: 2px solid #fff; font-size: 13px; margin-bottom: 40px; touch-action: none; }
#btn-a:active, #btn-menu:active { transform: scale(.94); }

/* ---------- UI レイヤ ---------- */
#ui-layer { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
#ui-layer > * { pointer-events: auto; }
.msg-window { position: absolute; left: 8px; right: 8px; bottom: calc(env(safe-area-inset-bottom) + 10px); max-width: 720px; margin: 0 auto; min-height: 112px; background: rgba(10, 12, 40, .95); border: 3px solid #fff; border-radius: 10px; padding: 14px 18px 22px; font-size: 17px; line-height: 1.65; box-shadow: 0 0 0 3px #000, 0 6px 20px rgba(0, 0, 0, .5); z-index: 30; }
.msg-window.top { top: 10px; bottom: auto; }
.msg-name { position: absolute; top: -16px; left: 14px; background: #2a3a8a; border: 2px solid #fff; border-radius: 6px; padding: 1px 10px; font-size: 14px; }
.msg-text { margin: 0; white-space: pre-wrap; }
.msg-next { position: absolute; right: 14px; bottom: 6px; opacity: 0; font-size: 12px; }
.msg-window.ready .msg-next { opacity: 1; animation: bob .7s infinite; }
@keyframes bob { 50% { transform: translateY(3px); } }

.choice-window { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 420px); max-height: 80vh; overflow: auto; background: rgba(10, 12, 40, .97); border: 3px solid #fff; border-radius: 10px; padding: 14px; z-index: 40; box-shadow: 0 0 0 3px #000; }
.choice-q { margin: 0 0 10px; line-height: 1.6; }
.choice-list { display: grid; gap: 8px; }
.choice-btn { background: #1d2560; border: 2px solid #8ea0ff; border-radius: 8px; padding: 10px; font-size: 16px; text-align: left; }
.choice-btn:active, .choice-btn:hover { background: #33409a; }
.choice-btn.cancel { margin-top: 8px; width: 100%; border-color: #888; background: #222; }

.panel-wrap { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; z-index: 20; padding: calc(env(safe-area-inset-top) + 8px) 8px calc(env(safe-area-inset-bottom) + 8px); }
.panel { width: min(96vw, 560px); max-height: 100%; display: flex; flex-direction: column; background: #10143a; border: 3px solid #fff; border-radius: 12px; box-shadow: 0 0 0 3px #000; overflow: hidden; }
.panel-wrap.wide .panel { width: min(98vw, 760px); }
.panel-head { display: flex; align-items: center; justify-content: space-between; background: #2a3a8a; padding: 8px 12px; border-bottom: 2px solid #fff; }
.panel-head h2 { margin: 0; font-size: 17px; font-weight: normal; }
.panel-close { background: none; border: 2px solid #fff; border-radius: 6px; width: 34px; height: 34px; font-size: 16px; }
.panel-body { padding: 12px; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.btn { display: block; width: 100%; margin: 6px 0; padding: 11px 12px; font-size: 15px; background: #1d2560; border: 2px solid #8ea0ff; border-radius: 8px; }
.btn small { display: block; font-size: 11px; color: #cde; }
.btn.primary { background: linear-gradient(#e0583a, #b23a22); border-color: #ffd0a0; }
.btn.danger { background: #4a1a1a; border-color: #f88; }
.btn.small { display: inline-block; width: auto; padding: 6px 10px; font-size: 13px; margin: 3px 2px; }
.btn.on { background: #ffe680; color: #222; border-color: #fff; }
.btn:disabled { opacity: .45; }
.btn:active { transform: scale(.98); }
.hint { font-size: 12px; color: #aab; line-height: 1.6; }
.err { color: #ff8a8a; }

.toast { position: absolute; top: 18%; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, .85); border: 2px solid #ffe680; border-radius: 20px; padding: 8px 18px; font-size: 15px; z-index: 60; width: max-content; max-width: calc(100% - 24px); box-sizing: border-box; white-space: normal; overflow-wrap: anywhere; text-align: center; line-height: 1.45; transition: opacity .4s; pointer-events: none !important; }
.toast.out { opacity: 0; }
.flash { position: fixed; inset: 0; z-index: 70; pointer-events: none; animation: flash .45s forwards; }
@keyframes flash { from { opacity: .85; } to { opacity: 0; } }
.fade { position: absolute; inset: 0; background: #000; z-index: 50; animation: fadein .25s; transition: opacity .35s; }
.fade.out { opacity: 0; }
@keyframes fadein { from { opacity: 0; } }

/* ---------- テキスト入力 ---------- */
.text-form { display: flex; gap: 8px; }
.text-input, .lw-input, .dict-q, .want-input, .code-box { flex: 1; width: 100%; font-size: 18px; padding: 10px; border-radius: 8px; border: 2px solid #8ea0ff; background: #fff; color: #111; }
.text-form .btn { width: auto; margin: 0; }
.lw-reason { margin: 0 0 10px; line-height: 1.6; color: #ffe680; }
.lw-label { display: block; font-size: 13px; margin: 6px 0 4px; color: #cde; }
.lw-row { display: flex; gap: 8px; align-items: center; }
.lw-input { font-size: 22px; letter-spacing: 2px; }
.lw-count { font-size: 14px; min-width: 42px; text-align: right; }
.lw-count.over { color: #ff8a8a; }
.lw-loading { padding: 20px; text-align: center; color: #ffe680; }
.spin { display: inline-block; margin-right: 8px; font-size: 22px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.lw-actions { display: flex; gap: 8px; }
.lw-actions .btn { flex: 1; }

/* ---------- 技カード ---------- */
.skill-card { background: linear-gradient(160deg, #1c2468, #12163f); border: 2px solid #8ea0ff; border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.skill-card header { display: flex; justify-content: space-between; align-items: center; }
.sc-word { font-size: 22px; letter-spacing: 1px; color: #fff; text-shadow: 0 0 8px rgba(160, 180, 255, .6); }
.sc-rank { font-size: 15px; padding: 1px 10px; border-radius: 6px; background: #444; border: 1px solid #fff; }
.rank-SS .sc-rank { background: linear-gradient(90deg, #ff5ea0, #ffe14d, #5effc5); color: #222; }
.rank-S .sc-rank { background: #ffd23e; color: #222; }
.rank-A .sc-rank { background: #e0583a; }
.rank-B .sc-rank { background: #3a8ae0; }
.rank-C .sc-rank { background: #3aa060; }
.rank-SS { border-color: #ffe14d; box-shadow: 0 0 12px rgba(255, 225, 77, .4); }
.rank-S { border-color: #ffd23e; }
.sc-read { margin: 2px 0; font-size: 12px; color: #aab; }
.stars { color: #ffe14d; }
.sc-badges { margin: 6px 0; }
.el-badge, .kind-badge, .mp-badge { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 10px; margin-right: 4px; }
.el-badge { background: var(--c); color: #111; }
.kind-badge { background: #333; border: 1px solid #888; }
.k-attack { background: #7a2a1a; } .k-magic { background: #4a2a8a; } .k-heal { background: #1a7a3a; } .k-support { background: #1a5a8a; } .k-hinder { background: #6a1a6a; } .k-special { background: #7a6a1a; }
.mp-badge { background: #1d3a7a; }
.sc-mean { margin: 4px 0; font-size: 13px; color: #dde; }
.sc-desc { margin: 4px 0 0; font-size: 14px; color: #ffe680; line-height: 1.5; }
.sc-src { margin: 6px 0 0; font-size: 11px; color: #9ab; }
.sc-src .new { color: #5effc5; }

/* ---------- メニュー ---------- */
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.menu-btn { position: relative; background: #1d2560; border: 2px solid #8ea0ff; border-radius: 8px; padding: 14px 8px; font-size: 16px; }
.menu-btn .dot { position: absolute; top: 6px; right: 8px; width: 10px; height: 10px; border-radius: 50%; background: #ffe14d; animation: blink 1s infinite; }
.menu-foot { font-size: 13px; color: #cde; margin: 12px 0 0; line-height: 1.7; }
.status-list { display: grid; grid-template-columns: 7em 1fr; gap: 6px 10px; margin: 0; font-size: 15px; }
.status-list dt { color: #aab; }
.status-list dd { margin: 0; }
.sk-info { margin: 0 0 8px; font-size: 14px; }
.skill-item .si-actions { display: flex; justify-content: space-between; align-items: center; margin-top: -4px; font-size: 12px; color: #aab; gap: 6px; }
.skill-item .si-btns { display: flex; gap: 6px; flex-shrink: 0; }
.skill-item .si-btns .mv { min-width: 40px; }
.skill-item .si-btns .mv:disabled { opacity: .3; }
.item-list { display: grid; gap: 6px; }
.item-row { text-align: left; background: #1d2560; border: 2px solid #8ea0ff; border-radius: 8px; padding: 9px 12px; font-size: 15px; }
.item-row small { display: block; font-size: 12px; color: #cde; margin-top: 2px; }
.item-row:disabled { opacity: .45; }
.item-row .price { float: right; color: #ffe680; }
.shop-gold { margin: 0 0 8px; }
.eq-stat { font-size: 13px; color: #ffe680; margin: 0 0 6px; }
.eq-slot h3 { font-size: 14px; margin: 10px 0 4px; color: #aab; font-weight: normal; }
.eq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.eq-btn { background: #1d2560; border: 2px solid #8ea0ff; border-radius: 8px; padding: 8px; font-size: 14px; }
.eq-btn small { display: block; font-size: 11px; color: #cde; }
.eq-btn.on { background: #ffe680; color: #222; }
.eq-btn.on small { color: #444; }
.dict-form { display: flex; gap: 6px; align-items: center; }
.dict-form .btn { margin: 0; }
.dict-tabs { margin: 8px 0; }
.dict-meta { display: block; margin-top: -4px; color: #9ab; font-size: 11px; }
.trade-item { border-bottom: 1px dashed #445; padding-bottom: 8px; margin-bottom: 8px; }
.trade-meta { font-size: 12px; color: #cde; margin: 0 0 4px; line-height: 1.6; }
.cmd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.code-box { font-size: 13px; }
.howto { font-size: 13px; line-height: 1.7; padding-left: 1.2em; }

/* ---------- タイトル ---------- */
#title-screen { position: absolute; inset: 0; z-index: 15; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 30%, #2a2a7a, #0b0d1a 70%); padding: 20px; }
.title-stars { position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 20%, #fff, transparent), radial-gradient(2px 2px at 40% 70%, #ffe680, transparent), radial-gradient(1px 1px at 85% 60%, #fff, transparent), radial-gradient(1px 1px at 10% 80%, #fff, transparent), radial-gradient(2px 2px at 60% 45%, #9ad0ff, transparent); animation: blink 3s infinite; pointer-events: none; }
.title-logo { position: relative; font-size: clamp(30px, 8vw, 52px); margin: 0; font-weight: normal; text-align: center; text-shadow: 0 0 18px #7a8aff, 3px 3px 0 #000; letter-spacing: 2px; }
.title-logo span { display: inline-block; margin-right: 6px; color: #ffe14d; border: 3px solid #ffe14d; border-radius: 10px; padding: 0 6px; animation: bob 2s infinite; }
.title-sub { position: relative; color: #cde; margin: 8px 0 28px; }
.title-menu { position: relative; width: min(86vw, 340px); }
.title-credit { position: relative; color: #99a; font-size: 13px; margin-top: 20px; letter-spacing: .5px; }

/* ---------- バトル ---------- */
#battle-screen { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; background: linear-gradient(#1a1a4a, #3a2a5a 55%, #2a1a2a); padding: calc(env(safe-area-inset-top) + 8px) 8px calc(env(safe-area-inset-bottom) + 8px); }
#battle-screen.shake { animation: shake .3s; }
@keyframes shake { 20% { transform: translate(-6px, 2px); } 40% { transform: translate(6px, -2px); } 60% { transform: translate(-4px, 0); } 80% { transform: translate(4px, 1px); } }
.b-enemies { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4vw; min-height: 150px; }
.b-enemy { position: relative; margin: 0; text-align: center; transition: opacity .5s, filter .5s; }
.b-emoji { display: block; font-size: clamp(56px, 16vw, 96px); line-height: 1.1; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .5)); animation: idle 2.4s ease-in-out infinite; }
.b-enemy.boss .b-emoji { font-size: clamp(96px, 30vw, 170px); }
@keyframes idle { 50% { transform: translateY(-5px); } }
.b-enemy.hit .b-emoji { animation: hit .35s; }
@keyframes hit { 0%, 100% { opacity: 1; } 25%, 75% { opacity: .2; transform: translateX(6px); } 50% { opacity: 1; transform: translateX(-6px); } }
.b-enemy.dead { opacity: 0; filter: blur(4px) brightness(3); pointer-events: none; }
.b-enemy figcaption { font-size: 12px; }
.b-ename { display: block; text-shadow: 1px 1px 0 #000; }
.b-enemy .hpbar { width: 90px; margin: 3px auto; }
.b-st { display: inline-flex; flex-wrap: wrap; gap: 2px; justify-content: center; }
.st { font-style: normal; font-size: 10px; padding: 0 4px; border-radius: 4px; background: #555; }
.st.up { background: #1a6a9a; } .st.dn { background: #8a3a1a; }
.st-poison { background: #7a2a9a; } .st-burn { background: #c04a1a; } .st-sleep { background: #4a4a9a; } .st-paralyze { background: #9a8a1a; } .st-freeze { background: #1a8aaa; } .st-confuse { background: #aa4a8a; } .st-blind { background: #333; } .st-silence { background: #666; }
.b-log { background: rgba(10, 12, 40, .92); border: 3px solid #fff; border-radius: 10px; padding: 10px 14px; min-height: 64px; font-size: 15px; line-height: 1.5; box-shadow: 0 0 0 2px #000; }
.b-log-text { margin: 0; }
.b-hero { position: relative; margin-top: 8px; background: rgba(10, 12, 40, .92); border: 2px solid #8ea0ff; border-radius: 10px; padding: 8px 12px; }
.b-hero-name small { color: #ffe680; }
.b-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 13px; margin-top: 4px; }
.b-bars label { display: block; }
.b-bars .hpbar { height: 9px; margin-top: 2px; }
.b-cmd { margin-top: 8px; min-height: 120px; max-height: 42vh; overflow-y: auto; }
.b-cmd button { background: #1d2560; border: 2px solid #8ea0ff; border-radius: 8px; padding: 12px 6px; font-size: 16px; }
.b-cmd button:disabled { opacity: .4; }
.b-cmd button.back { background: #333; border-color: #888; }
.b-cmd .disabled-look { opacity: .5; }
.cmd-main { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cmd-main button:first-child { grid-column: span 2; background: linear-gradient(#e0583a, #b23a22); border-color: #ffd0a0; }
.cmd-title { margin: 0 0 6px; font-size: 13px; color: #cde; }
.cmd-skills { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sk-btn { text-align: left; padding: 6px 8px !important; position: relative; }
.sk-btn b { display: flex; align-items: center; font-size: 17px; font-weight: normal; white-space: nowrap; overflow: hidden; }
.sk-btn b .sk-w { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sk-btn b .gem, .sk-star { flex: none; }
.sk-btn > span:not(.sk-w) { display: block; font-size: 11px; margin: 2px 0; }
.sk-btn small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 10px; color: #ffe680; line-height: 1.3; }
.cmd-skills .back { grid-column: span 2; }
.pop { position: absolute; left: 50%; top: 20%; transform: translateX(-50%); font-size: 26px; font-weight: bold; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000; animation: pop .9s forwards; pointer-events: none; z-index: 3; white-space: nowrap; }
.pop.heal { color: #7dff8a; }
.pop.dmg { color: #fff; }
.b-hero .pop { top: -10px; }
@keyframes pop { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -10px) scale(1.2); } 100% { opacity: 0; transform: translate(-50%, -40px); } }
.fx { position: absolute; left: 50%; top: 40%; width: 120px; height: 120px; margin: -60px; border-radius: 50%; pointer-events: none; animation: fx .6s forwards; mix-blend-mode: screen; }
.b-hero .fx { top: 50%; }
.fx-none { background: radial-gradient(circle, #fff 0 10%, transparent 60%); }
.fx-fire { background: radial-gradient(circle, #fff6a0, #ff6a3d 40%, transparent 70%); }
.fx-ice { background: radial-gradient(circle, #fff, #7fdcff 40%, transparent 70%); }
.fx-thunder { background: radial-gradient(circle, #fff, #ffe14d 30%, transparent 65%); }
.fx-wind { background: radial-gradient(circle, transparent 30%, #7dffa8 45%, transparent 70%); }
.fx-earth { background: radial-gradient(circle, #e8c08a, #8a5a2a 45%, transparent 70%); }
.fx-water { background: radial-gradient(circle, #cfe6ff, #4d9dff 40%, transparent 70%); }
.fx-light { background: radial-gradient(circle, #fff, #fff7b0 40%, transparent 75%); }
.fx-dark { background: radial-gradient(circle, #e0c0ff, #6a2aaa 40%, transparent 70%); mix-blend-mode: normal; opacity: .8; }
@keyframes fx { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

@media (orientation: landscape) and (max-height: 500px) {
  .b-enemies { min-height: 90px; }
  .b-emoji { font-size: 52px; }
  .b-enemy.boss .b-emoji { font-size: 90px; }
  .b-cmd { max-height: 38vh; min-height: 0; }
  .cmd-main { grid-template-columns: repeat(5, 1fr); }
  .cmd-main button:first-child { grid-column: span 1; }
  #dpad { width: 130px; height: 130px; }
  .msg-window { min-height: 90px; font-size: 15px; }
  .cmd-skills { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cmd-skills .back { grid-column: span 4; }
}

/* =========================================================
   v2: 操作性・ドット絵まわり
   ========================================================= */
:root { --pad: 1; }
#hud { font-size: 12px; min-width: 0; max-width: 54vw; padding: 5px 9px; }
.hud-map { display: block; font-size: 10px; color: #9ad0ff; }
#objective { position: absolute; left: 8px; top: calc(env(safe-area-inset-top) + 96px); max-width: min(62vw, 360px); text-align: left; font-size: 11px; line-height: 1.45; background: rgba(10, 12, 40, .72); border: 1px solid rgba(255, 255, 255, .5); border-radius: 6px; padding: 4px 8px; z-index: 5; color: #e8ecff; }
#objective b { color: #ffe14d; font-weight: normal; margin-right: 4px; }

/* コントロール：サイズ変更・左手モード */
#dpad { transform: scale(var(--pad)); transform-origin: left bottom; }
#action-buttons { transform: scale(var(--pad)); transform-origin: right bottom; }
#controls.left-hand #dpad { left: auto; right: calc(env(safe-area-inset-right) + 14px); transform-origin: right bottom; }
#controls.left-hand #action-buttons { right: auto; left: calc(env(safe-area-inset-left) + 16px); flex-direction: row-reverse; transform-origin: left bottom; }
#controls.stick-mode #dpad { display: none; }
#stick-hint { display: none; position: absolute; left: 12px; bottom: calc(env(safe-area-inset-bottom) + 14px); font-size: 11px; color: rgba(255, 255, 255, .7); margin: 0; pointer-events: none; text-shadow: 1px 1px 0 #000; }
#controls.stick-mode #stick-hint { display: block; }
#controls.left-hand #stick-hint { left: auto; right: 12px; }
#btn-a small, #btn-b small { display: block; font-size: 9px; line-height: 1; margin-top: -2px; }
#btn-a { font-size: 24px; line-height: 1.1; }
#btn-b { width: 58px; height: 58px; border-radius: 50%; background: rgba(60, 160, 100, .7); border: 3px solid #fff; font-size: 19px; line-height: 1.1; touch-action: none; margin-bottom: 4px; }
#btn-b.on { background: rgba(125, 255, 168, .8); color: #123; }
#btn-menu { margin-bottom: 64px; }
#joystick { position: fixed; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .08); pointer-events: none; z-index: 7; opacity: 0; transition: opacity .1s; }
#joystick.on { opacity: 1; }
#joystick .knob { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 230, 128, .65); border: 2px solid #fff; transform: translate(-50%, -50%); }

/* メッセージ */
.msg-shield { position: absolute; inset: 0; z-index: 29; }
.msg-window.has-face { padding-left: 92px; }
.msg-face { position: absolute; left: 12px; top: 14px; width: 68px; height: 68px; image-rendering: pixelated; background: #1d2560; border: 2px solid #8ea0ff; border-radius: 6px; }

/* エンカウント演出 */
.enc-fx { position: absolute; inset: 0; z-index: 55; pointer-events: none; display: grid; grid-template-rows: repeat(8, 1fr); }
.enc-fx i { display: block; background: #000; transform: scaleX(0); transform-origin: calc(var(--i) * 50% - var(--i) * 50% + (var(--i) - 2 * floor(var(--i) / 2)) * 100%) 50%; animation: encbar .45s calc(var(--i) * 25ms) forwards; }
.enc-fx i:nth-child(odd) { transform-origin: left; }
.enc-fx i:nth-child(even) { transform-origin: right; }
@keyframes encbar { to { transform: scaleX(1); } }

/* ドット絵の敵 */
.mon-px { image-rendering: pixelated; display: block; margin: 0 auto; }
.b-enemy .mon-px { width: clamp(84px, 24vw, 128px); height: clamp(84px, 24vw, 128px); filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .35)); animation: idle 2.4s ease-in-out infinite; }
.b-enemies.n3 .b-enemy .mon-px { width: clamp(72px, 21vw, 110px); height: clamp(72px, 21vw, 110px); }
.b-enemy.boss .mon-px { width: clamp(160px, 46vw, 240px); height: clamp(160px, 46vw, 240px); }
.b-enemy.hit .mon-px { animation: hit .35s; }
.b-enemy.acting .mon-px { animation: act .4s; }
@keyframes act { 40% { transform: translateY(10px) scale(1.12); filter: brightness(1.6); } }
.b-enemy.target-pick { cursor: pointer; }
.b-enemy.target-pick .mon-px { animation: pick .6s infinite; }
@keyframes pick { 50% { filter: brightness(1.5) drop-shadow(0 0 6px #ffe14d); } }
.b-enemy .b-lv { color: #9ab; font-size: 10px; margin-left: 4px; }

/* バトル背景（ドット風グラデーション＋地面） */
#battle-screen { background: var(--bg-sky, linear-gradient(#1a1a4a, #3a2a5a)); }
#battle-screen::before { content: ''; position: absolute; left: 0; right: 0; top: 36%; height: 22%; background: var(--bg-ground, #2a1a2a); clip-path: polygon(0 30%, 100% 30%, 100% 100%, 0 100%); image-rendering: pixelated; opacity: .9; pointer-events: none; }
#battle-screen::after { content: ''; position: absolute; left: 10%; right: 10%; top: 50%; height: 4%; border-radius: 50%; background: rgba(0, 0, 0, .3); pointer-events: none; }
#battle-screen > * { position: relative; z-index: 1; }
.bg-field { --bg-sky: linear-gradient(#5aa8f0 0%, #9ad0ff 40%, #b8e0ff 45%); --bg-ground: repeating-linear-gradient(90deg, #4c9f3e 0 16px, #46963a 16px 32px); }
.bg-forest { --bg-sky: linear-gradient(#0e2a1a 0%, #1f5638 45%); --bg-ground: repeating-linear-gradient(90deg, #2f6e2c 0 16px, #2a6428 16px 32px); }
.bg-beach { --bg-sky: linear-gradient(#ff9a6a 0%, #ffd0a0 30%, #2a68c8 40%, #3c80e0 45%); --bg-ground: repeating-linear-gradient(90deg, #ecd89e 0 16px, #e2cc8e 16px 32px); }
.bg-ice { --bg-sky: linear-gradient(#0e1e34 0%, #2c4c6e 45%); --bg-ground: repeating-linear-gradient(90deg, #a4d4f4 0 16px, #c4e8ff 16px 32px); }
.bg-castle, .bg-throne { --bg-sky: linear-gradient(#0a0814 0%, #2c2540 45%); --bg-ground: repeating-linear-gradient(90deg, #5e5470 0 16px, #4a4060 16px 32px); }
.bg-throne { --bg-ground: linear-gradient(90deg, #4a4060 0 35%, #8a1c2c 35% 65%, #4a4060 65%); }
.bg-tower { --bg-sky: linear-gradient(#1a3a3a 0%, #3a6a5a 45%); --bg-ground: repeating-linear-gradient(90deg, #5e5470 0 16px, #6e6482 16px 32px); }
.bg-sky { --bg-sky: linear-gradient(#2a68c8 0%, #9ad0ff 40%, #ffffff 46%); --bg-ground: repeating-linear-gradient(90deg, #6e6482 0 16px, #8e84a2 16px 32px); }
.bg-library { --bg-sky: repeating-linear-gradient(90deg, #4a3020 0 6px, #a83a3a 6px 10px, #3a6aa8 10px 14px, #3a8a4a 14px 18px, #c8a03a 18px 22px, #4a3020 22px 24px); --bg-ground: repeating-linear-gradient(90deg, #7a5a3c 0 16px, #6a4c30 16px 32px); }
.bg-abyss { --bg-sky: radial-gradient(ellipse at 50% 30%, #3a2a6a, #0a0814 70%); --bg-ground: repeating-linear-gradient(90deg, #1a1424 0 16px, #2a2040 16px 32px); }
.bg-library .b-log, .bg-library .b-hero { backdrop-filter: none; }

/* バトルの補助ボタン */
.b-tools { position: absolute; right: 8px; top: calc(env(safe-area-inset-top) + 8px); display: flex; gap: 6px; z-index: 3; }
.b-tools button { background: rgba(10, 12, 40, .8); border: 2px solid #8ea0ff; border-radius: 8px; padding: 4px 8px; font-size: 12px; }
.b-tools button.on { background: #ffe680; color: #222; }
.cmd-main button[data-v=repeat] { font-size: 12px; }
.sk-btn.weak { border-color: #ffe14d !important; box-shadow: 0 0 6px rgba(255, 225, 77, .5); }

/* 図鑑 */
.bestiary { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.best-item { background: #1d2560; border: 2px solid #8ea0ff; border-radius: 8px; padding: 6px; text-align: center; font-size: 11px; }
.best-item .mon-px { width: 56px; height: 56px; }
.best-item.unknown .mon-px { filter: brightness(0); opacity: .5; }
.best-item b { display: block; font-weight: normal; font-size: 12px; }
.best-detail { font-size: 12px; line-height: 1.6; }
.quest-list li { margin-bottom: 8px; line-height: 1.5; }
.quest-list .done { color: #7dffa8; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0; font-size: 14px; }
.set-row .opts { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.set-row .opts .btn { margin: 0; }
.title-hero { width: 96px; height: 96px; image-rendering: pixelated; position: relative; margin-bottom: 8px; }
.obj-box { background: #1d2560; border: 2px solid #ffe14d; border-radius: 8px; padding: 6px 10px; margin-bottom: 8px; }
.obj-box h3 { margin: 0 0 4px; font-size: 14px; color: #ffe14d; font-weight: normal; }
.obj-box p { margin: 4px 0; font-size: 13px; line-height: 1.6; }
.orb { color: #667; } .orb.on { color: #7dffc8; }
h3 { font-weight: normal; }
/* レイアウト修正 */
#btn-menu { position: absolute; right: 4px; bottom: 92px; margin: 0; width: 70px; height: 34px; }
#controls.left-hand #btn-menu { right: auto; left: 4px; }
#action-buttons { align-items: flex-end; }
@media (max-width: 380px) {
  #hud { font-size: 11px; padding: 4px 7px; }
  .hud-bars .hpbar { min-width: 44px; }
  #objective { font-size: 10px; }
  .msg-window.has-face { padding-left: 78px; }
  .msg-face { width: 56px; height: 56px; }
}
/* レアリティ */
.sc-tags { display: flex; gap: 4px; align-items: center; }
.gem { display: inline-block; width: 9px; height: 9px; transform: rotate(45deg); margin: 0 6px 1px 2px; vertical-align: middle; border: 1px solid #fff; flex: none; }
.g-R { background: #4aa0ff; }
.g-SR { background: linear-gradient(135deg, #8a4ae0, #e0b0ff); }
@keyframes lrshine { to { background-position: 200% 0; } }
.g-LR { background: linear-gradient(135deg, #ff5ea0, #ffe14d, #5effc5, #5ea0ff); background-size: 200% 200%; animation: lrshine 2s linear infinite; box-shadow: 0 0 5px #ffe14d; }
.trait .gem { width: 7px; height: 7px; margin: 0 5px 1px 0; }
.t-hid { color: #9a9ab0; border-color: #55557a; background: rgba(40, 40, 70, .5); }
.t-hid.open { color: #9effd8; border-color: #3fbf95; background: rgba(30, 110, 90, .3); }
.hid-ico { font-weight: normal; font-size: 10px; margin-right: 4px; }
.sk-star { position: absolute; top: 3px; right: 6px; font-style: normal; font-size: 10px; color: #ffd84d; line-height: 1; pointer-events: none; }
.skill-card.rar-SR { border-color: #c08aff; box-shadow: 0 0 10px rgba(192, 138, 255, .45); }
.skill-card.rar-LR { border-color: #ffe14d; box-shadow: 0 0 14px rgba(255, 225, 77, .6), inset 0 0 18px rgba(255, 225, 77, .15); }
.sc-traits { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.trait { font-family: inherit; cursor: pointer; line-height: 1.5; color: inherit; font-style: normal; font-size: 11px; padding: 1px 8px; border-radius: 10px; border: 1px solid; }
.t-R { color: #9ad0ff; border-color: #5a9ae0; background: rgba(42, 122, 216, .2); }
.t-SR { color: #e0c0ff; border-color: #b07dff; background: rgba(138, 74, 224, .25); }
.t-LR { color: #fff6b0; border-color: #ffe14d; background: rgba(255, 225, 77, .2); }
.sk-btn.rar-SR { border-color: #b07dff !important; }
.sk-btn.rar-LR { border-color: #ffe14d !important; background: linear-gradient(160deg, #3a2a10, #1d2560) !important; }
.pop.crit { color: #ffe14d; font-size: 32px; }
.pop.info { color: #e0c0ff; font-size: 18px; }
/* 天候 */
#battle-screen[data-weather]::after { content: ''; position: absolute; inset: 0; height: auto; left: 0; right: 0; top: 0; border-radius: 0; pointer-events: none; z-index: 0; }
#battle-screen[data-weather=fire]::after { background: radial-gradient(circle at 80% 0, rgba(255,160,60,.35), transparent 60%); }
#battle-screen[data-weather=water]::after { background: repeating-linear-gradient(100deg, rgba(150,190,255,.18) 0 2px, transparent 2px 14px); }
#battle-screen[data-weather=ice]::after { background: radial-gradient(rgba(255,255,255,.5) 1px, transparent 2px) 0 0/18px 18px; }
#battle-screen[data-weather=thunder]::after { background: linear-gradient(rgba(40,40,80,.45), transparent 50%); animation: thunderflash 3s infinite; }
#battle-screen[data-weather=wind]::after { background: repeating-linear-gradient(170deg, rgba(200,255,220,.12) 0 3px, transparent 3px 26px); }
#battle-screen[data-weather=earth]::after { background: rgba(200,160,90,.18); }
#battle-screen[data-weather=light]::after { background: radial-gradient(circle at 50% 0, rgba(255,250,200,.4), transparent 60%); }
#battle-screen[data-weather=dark]::after { background: rgba(20,0,40,.4); }
@keyframes thunderflash { 0%, 92%, 100% { opacity: 1; } 94% { opacity: .2; background-color: rgba(255,255,200,.5); } }

.sc-tags .gem { margin: 0 4px 0 0; width: 10px; height: 10px; }
.sk-btn > span .gem { margin-left: 8px; }
.trait sup.rand { font-size: 9px; color: #ffe680; margin-left: 2px; }
.trait:active { transform: scale(.95); }
.trait-tip { position: fixed; z-index: 9999; background: rgba(10, 12, 40, .97); border: 2px solid #9ab0ff; border-radius: 10px; padding: 8px 12px; color: #fff; font-size: 13px; line-height: 1.5; box-shadow: 0 4px 16px rgba(0,0,0,.6); animation: tipin .15s ease-out; pointer-events: none; }
.trait-tip b { display: block; color: #ffe680; font-weight: normal; margin-bottom: 2px; }
@keyframes tipin { from { opacity: 0; transform: translateY(4px); } }
.lw-retry small { display: block; font-size: 10px; opacity: .85; margin-top: 2px; }
.lw-retry:disabled { opacity: .45; }

.hpmp-box { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 6px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.25); border-radius: 8px; padding: 6px 10px; margin-bottom: 8px; font-size: 12px; }
.hm-l { color: #ccd; }
.hm-v { font-size: 11px; min-width: 52px; text-align: right; }
.hm-bar { height: 8px; background: rgba(255,255,255,.15); border-radius: 4px; overflow: hidden; min-width: 40px; }
.hm-bar i { display: block; height: 100%; }
.hm-bar.hp i { background: linear-gradient(90deg, #3ac85a, #7dff8a); }
.hm-bar.mp i { background: linear-gradient(90deg, #3a7ad8, #8ac0ff); }
.cmd-grid .it-desc { display: block; font-size: 10px; color: #ffe680; margin-top: 2px; }
.bg-volcano { --bg-sky: linear-gradient(#2a0a08 0%, #7a2a14 35%, #c84a1a 45%); --bg-ground: repeating-linear-gradient(90deg, #4a2a20 0 16px, #3a2018 16px 32px); }
.bg-cave { --bg-sky: linear-gradient(#0a0a10 0%, #2a2420 45%); --bg-ground: repeating-linear-gradient(90deg, #4a3a2c 0 16px, #3e3024 16px 32px); }
.bg-ruins { --bg-sky: linear-gradient(#e8a85a 0%, #f8d8a0 40%, #d8c08a 46%); --bg-ground: repeating-linear-gradient(90deg, #ecd89e 0 16px, #d8c080 16px 32px); }
.bg-valley { --bg-sky: linear-gradient(#3a1a1a 0%, #8a5a3a 40%, #a8946a 46%); --bg-ground: repeating-linear-gradient(90deg, #a8946a 0 16px, #948058 16px 32px); }
.acct-box { border: 2px solid #555a8a; border-radius: 10px; padding: 10px 12px; margin: 10px 0; background: rgba(0,0,0,.25); }
.acct-box.on { border-color: #3fbf95; }
.acct-box p { margin: 0 0 6px; }
.acct-box .btn { margin: 4px 4px 0 0; }
.acct-form { display: flex; flex-direction: column; gap: 10px; }
.acct-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #ccd; }
.acct-form input { font: inherit; font-size: 16px; padding: 10px; border-radius: 8px; border: 2px solid #8a9aff; background: #fff; color: #111; }
.title-menu .btn.small { font-size: 13px; padding: 6px 10px; opacity: .85; }
/* 判定後は入力欄を締める */
.lw-form.locked { opacity: .45; pointer-events: none; }
/* 封印された技 */
.sk-seal { font-style: normal; font-size: 11px; margin-left: 6px; padding: 0 5px; border-radius: 4px; background: #4a2a5a; color: #e0c0ff; flex-shrink: 0; }
/* 覚えずに終える（控えめなテキストボタン） */
.lw-decline { display: block; width: 100%; margin-top: 8px; padding: 6px 0; background: none; border: none; color: #b8b0d0; font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lw-decline small { font-size: 10px; margin-left: 4px; text-decoration: none; opacity: .8; }
.lw-decline:active { color: #fff; }
/* 戦闘ログ */
.b-log { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.b-log:active { filter: brightness(1.15); }
.b-log-hint { position: absolute; right: 8px; bottom: 4px; font-size: 11px; opacity: .55; pointer-events: none; }
#battle-screen > .b-history { position: absolute; inset: 0; z-index: 20; background: rgba(0, 0, 0, .6); display: flex; align-items: center; justify-content: center; padding: calc(env(safe-area-inset-top) + 16px) 12px calc(env(safe-area-inset-bottom) + 16px); }
.bh-panel { width: 100%; max-width: 480px; max-height: 100%; display: flex; flex-direction: column; background: rgba(10, 12, 40, .97); border: 3px solid #fff; border-radius: 10px; box-shadow: 0 0 0 2px #000; }
.bh-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 2px solid #8ea0ff; font-weight: bold; }
.bh-close { background: none; border: 2px solid #8ea0ff; border-radius: 6px; width: 32px; height: 32px; font-size: 14px; }
.bh-list { list-style: none; margin: 0; padding: 6px 12px 10px; overflow-y: auto; -webkit-overflow-scrolling: touch; font-size: 14px; line-height: 1.55; flex: 1; }
.bh-list li { padding: 2px 0; border-bottom: 1px dotted rgba(255, 255, 255, .12); }
.bh-list li.bh-turn { color: #ffe680; font-size: 12px; border-bottom: none; padding-top: 8px; }
.bh-note { margin: 0; padding: 6px 12px 8px; font-size: 11px; opacity: .6; text-align: center; }
/* 長い技名：枠からはみ出さないよう縮小（FitText） */
.sk-btn b .sk-w { flex: 1 1 auto; white-space: nowrap; text-overflow: clip; }
.sk-btn:has(.sk-star) b { padding-right: 20px; }
.skill-card header { gap: 8px; min-width: 0; }
.sc-word { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; }
.sc-tags { flex: none; }
.cmd-skills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sk-btn { min-width: 0; overflow: hidden; }
@media (orientation: landscape) and (max-height: 500px) { .cmd-skills { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* ---- 技の長押し詳細 ---- */
.sk-hint { margin: 4px 0 0; text-align: center; font-size: 10px; opacity: .55; }
.sk-btn { -webkit-touch-callout: none; touch-action: manipulation; }
.sk-btn[aria-disabled="true"] { opacity: .4; }
#battle-screen > .b-skill-detail { position: absolute; inset: 0; z-index: 20; background: rgba(0, 0, 0, .6); display: flex; align-items: center; justify-content: center; padding: calc(env(safe-area-inset-top) + 16px) 12px calc(env(safe-area-inset-bottom) + 16px); }
.bsd-panel { width: 100%; max-width: 440px; max-height: 100%; overflow-y: auto; background: rgba(10, 12, 40, .97); border: 3px solid #fff; border-radius: 10px; box-shadow: 0 0 0 2px #000; padding: 6px 10px 10px; }
.bsd-panel .skill-card { margin: 4px 0 8px; }
.bsd-notes { list-style: none; margin: 0 0 8px; padding: 0; font-size: 13px; }
.bsd-notes li { padding: 3px 8px; border-radius: 6px; margin-bottom: 4px; }
.bsd-notes .ng { background: #4a1a2a; color: #ffb0c0; }
.bsd-notes .ok { background: #3a3a10; color: #ffe680; }
.bsd-close { width: 100%; background: #333; border: 2px solid #888; border-radius: 8px; padding: 10px; font-size: 15px; }
/* ---- どうぐ：カテゴリ ---- */
.item-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 8px; margin-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.item-tabs::-webkit-scrollbar { display: none; }
.it-tab { flex: none; background: #1d2560; border: 2px solid #5a6ab8; border-radius: 16px; padding: 5px 12px; font-size: 13px; white-space: nowrap; }
.it-tab.on { background: #ffe680; color: #222; border-color: #ffe680; }
.item-group { margin-bottom: 10px; }
.item-group-h { margin: 6px 0 6px; font-size: 13px; font-weight: normal; color: #ffe680; border-bottom: 1px dashed rgba(255, 230, 128, .4); padding-bottom: 3px; }
.it-tag { font-style: normal; font-size: 10px; margin-left: 6px; padding: 1px 6px; border-radius: 4px; vertical-align: 2px; }
.it-tag.sp { background: #5a2a7a; color: #f0d0ff; }
.it-tag.key { background: #6a5a1a; color: #ffe680; }
.it-tag.own { background: #2a5a3a; color: #c0ffd0; }
.it-own { font-style: normal; font-size: 11px; margin-left: 8px; color: #aab; }
.item-row.is-key { border-color: #a89040; }
.cmd-grid button.it-special { border-color: #b07dff; }
/* ---- お店 ---- */
.shop-banner { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 2px solid; }
.shop-banner.item { background: linear-gradient(90deg, #1a4a2a, #12301e); border-color: #5ad06a; }
.shop-banner.equip { background: linear-gradient(90deg, #5a2a10, #301a10); border-color: #ff8a3a; }
.shop-ico { font-size: 26px; line-height: 1; }
.shop-txt { flex: 1; font-size: 12px; line-height: 1.4; }
.shop-banner .shop-gold { margin: 0; white-space: nowrap; font-size: 14px; }
.shop-item .panel-head { background: #1f6a32; }
.shop-equip .panel-head { background: #8a3a12; }
.sell-btn { width: 100%; margin-top: 4px; }
/* ---- 図鑑 ---- */
.dict-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 10px; margin: -4px 2px 10px; color: #9ab; font-size: 11px; }
.dm-stats { display: flex; gap: 6px; }
.dm-stat { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px; padding: 1px 8px; color: #dde; white-space: nowrap; }
.dm-stat b { color: #ffe680; font-weight: normal; }
.dict-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
/* 深淵：4体同時 */
.b-enemies.n4 { flex-wrap: wrap; row-gap: 2px; }
.b-enemies.n4 .b-enemy .mon-px { width: clamp(60px, 18vw, 92px); height: clamp(60px, 18vw, 92px); }
.b-enemies.n4 .b-ename { font-size: 11px; }
.set-note { margin: -4px 0 8px; font-size: 11px; opacity: .65; text-align: right; }
.item-row .it-tag.forge { background: #1a4a6a; color: #b0e8ff; }
.b-enemies.n4 { gap: 1vw; }
.it-tag.ban { background: #6a1a2a; color: #ffc0c8; }
.item-row.is-banned { opacity: .55; border-color: #8a4a5a; }
.repel-off { opacity: .5; }
/* ---- アイテムで宿した力（水色＋💠） ---- */
.skill-card.has-forge { box-shadow: inset 0 0 0 1px rgba(96, 208, 255, .35); }
.fg-part { color: #6fe0ff; font-weight: bold; text-shadow: 0 0 6px rgba(96, 208, 255, .5); }
.trait.by-item { border-color: #4fc8f0 !important; background: rgba(30, 110, 160, .45) !important; color: #c8f2ff !important; box-shadow: 0 0 6px rgba(79, 200, 240, .45); }
.trait sup.fg-mark { font-size: 9px; margin-left: 2px; }
.el-badge.by-item, .mp-badge.by-item { outline: 2px solid #4fc8f0; outline-offset: 1px; }
.mp-badge.by-item { color: #c8f2ff; }
.sc-forge { margin-top: 8px; padding: 6px 8px; border-radius: 8px; border: 1px dashed #4fc8f0; background: rgba(20, 70, 110, .35); }
.sc-forge-h { margin: 0; font-size: 12px; color: #9fe6ff; display: flex; justify-content: space-between; align-items: center; }
.fg-count { font-size: 11px; padding: 0 8px; border-radius: 8px; background: #1a4a6a; color: #c8f2ff; }
.fg-count.full { background: #6a3a1a; color: #ffd8a8; }
.sc-forge-list { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.fg-chip { font-size: 11px; padding: 1px 7px; border-radius: 8px; background: rgba(79, 200, 240, .18); border: 1px solid rgba(79, 200, 240, .55); color: #c8f2ff; }

/* ---- 効果図鑑（v9） ---- */
.codex-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.codex-tabs .btn { padding: 4px 8px; font-size: 13px; }
.codex-body { max-height: 60vh; overflow-y: auto; padding-right: 2px; }
.cx-group h4 { margin: 10px 0 4px; font-size: 14px; color: #ffe14d; border-bottom: 1px dashed rgba(255,225,77,.35); padding-bottom: 2px; }
.cx-group h4 small { color: #aab; font-size: 11px; margin-left: 4px; }
.cx-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.cx-item { padding: 6px 8px; border-radius: 6px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); min-width: 0; }
.cx-item.open { grid-column: 1 / -1; }
.cx-item .cx-name { display: inline; font-size: 14px; color: #fff; }
.cx-item .cx-desc { display: block; font-size: 12px; color: #cfd3ea; line-height: 1.45; margin-top: 2px; }
.cx-item.locked { opacity: .55; background: rgba(0,0,0,.25); border-style: dashed; padding: 4px 8px; text-align: center; }
.cx-item.locked .cx-name { color: #889; letter-spacing: 2px; font-size: 13px; }
.cx-item.locked .cx-desc { display: none; }
.cx-new, .cx-tier { font-style: normal; font-size: 10px; color: #0b0d1a; border-radius: 3px; padding: 0 4px; margin-right: 5px; vertical-align: 2px; }
.cx-new { background: #7dd8ff; }
.cx-tier { background: #9fd; } .cx-tier.t-SR { background: #d0b0ff; } .cx-tier.t-LR { background: #ffd36b; }
.sk-btn .mp-cut { font-style: normal; color: #7dffc8; }
/* 強化（砥石・水晶・虹の粉）は覚醒と別枠：緑系 */
.sc-forge.sc-up { border-color: #6fd39a; background: rgba(30, 90, 60, .3); }
.sc-forge.sc-up .sc-forge-h { color: #a8f0c4; }
.sc-forge.sc-up .fg-chip { border-color: #6fd39a; color: #d4ffe4; background: rgba(40, 110, 70, .35); }
.fg-part.up { color: #8ff0b4; text-shadow: 0 0 6px rgba(111, 211, 154, .6); }
.el-badge.by-up, .mp-badge.by-up { outline: 2px solid #6fd39a; outline-offset: 1px; }
.mp-badge.by-up { color: #8ff0b4; }
.el-badge.by-up { box-shadow: 0 0 6px rgba(111, 211, 154, .8); }
/* 個数を選ぶダイアログ */
.qty-window .qty-row { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 10px; }
.qty-b { min-width: 46px; padding: 9px 6px; font-size: 16px; background: #1d2560; border: 2px solid #8ea0ff; border-radius: 8px; }
.qty-b:disabled { opacity: .3; }
.qty-b.small { min-width: 0; padding: 5px 10px; font-size: 13px; }
.qty-n { min-width: 64px; text-align: center; font-size: 28px; color: #ffe680; }
.qty-range { width: 100%; accent-color: #ffd23e; }
.qty-sub { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #aab; margin: 6px 0; }
.qty-total { text-align: center; margin: 8px 0 4px; font-size: 15px; }
.qty-total b { color: #ffe680; font-size: 18px; }
.qty-note { text-align: center; margin: 4px 0; font-size: 13px; color: #cde; }
.qty-act { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.qty-act .choice-btn { text-align: center; margin: 0; }
.qty-act .qty-ok { background: linear-gradient(#e0583a, #b23a22); border-color: #ffd0a0; }
/* 2体のボス（双竜など）は 画面に収まる大きさに */
.b-enemies.n2 .b-enemy.boss .mon-px { width: clamp(110px, 34vw, 180px); height: clamp(110px, 34vw, 180px); }
.b-enemies.n3 .b-enemy.boss .mon-px, .b-enemies.n4 .b-enemy.boss .mon-px { width: clamp(72px, 21vw, 110px); height: clamp(72px, 21vw, 110px); }
/* 真名（一語の長い言葉） */
.skill-card.is-mana { border-color: #ffd86a; box-shadow: 0 0 0 1px rgba(255, 216, 106, .35), 0 0 14px rgba(255, 200, 80, .25); }
.skill-card.is-mana .sc-word { color: #fff2c0; text-shadow: 0 0 8px rgba(255, 210, 90, .55); }
.sc-mana { margin-top: 3px; }
.t-mana { color: #ffe9a8; border-color: #d8a838; background: linear-gradient(180deg, rgba(120, 80, 20, .55), rgba(70, 40, 10, .55)); }
.t-mana.head { color: #2a1a00; background: linear-gradient(180deg, #ffe680, #e8b040); border-color: #fff2b0; font-weight: bold; }
.t-mana.ex { color: #fff; border-color: #ff9a3a; background: linear-gradient(180deg, rgba(200, 80, 30, .7), rgba(120, 30, 10, .7)); }
.t-mana.pre { color: #cbd; border-color: #776; background: rgba(60, 60, 70, .4); border-style: dashed; }
.t-mana sup.ex { font-size: 9px; color: #ffe14d; margin-left: 2px; }
.mana-ico { display: inline-block; font-size: 10px; margin-right: 3px; padding: 0 3px; border-radius: 3px; background: #6a3a00; color: #ffe680; font-weight: normal; }
.mana-tip { border-color: #ffd86a; }
/* 言葉図鑑のいいね */
.dm-like { font-family: inherit; font-size: 12px; cursor: pointer; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 130, 160, .45); border-radius: 12px; padding: 2px 10px; color: #ffc0d0; white-space: nowrap; min-height: 26px; }
.dm-like b { color: #ffd6e0; font-weight: normal; }
.dm-like.on { background: rgba(255, 90, 130, .28); border-color: #ff6a8a; color: #ff8aa8; }
.dm-like.on .lk-ico { animation: likepop .3s ease-out; }
.dm-like:active { transform: scale(.94); }
@keyframes likepop { 0% { transform: scale(.6); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
.dict-tabs { flex-wrap: wrap; }
/* ===== 文字札 ===== */
.r-N { --fc: #d8d8d8; } .r-R { --fc: #5aa8ff; } .r-SR { --fc: #c070ff; } .r-SSR { --fc: #ffcc33; } .r-UR { --fc: #ff5ad0; }
.fd-r { font-style: normal; font-size: 10px; font-weight: bold; padding: 0 5px; border-radius: 4px; color: #111; background: var(--fc); margin-right: 4px; }
.fd-r.r-UR { background: linear-gradient(90deg, #ff5ad0, #ffd23e, #5ad8ff); }
.fd-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 5px; font-weight: normal; color: #2a1a00; background: linear-gradient(180deg, #fff8e0, #e8d8a8); border: 2px solid var(--fc); box-shadow: 0 0 6px var(--fc); margin: 2px; font-size: 14px; cursor: pointer; }
.fd-chip.big { min-width: 44px; height: 44px; font-size: 20px; }
.fd-chip.r-UR { border-image: linear-gradient(45deg, #ff5ad0, #ffd23e, #5ad8ff) 1; }
.sc-fuda { margin: 4px 0; padding: 4px 8px; border-radius: 8px; background: rgba(255, 230, 150, .08); border: 1px dashed rgba(255, 210, 120, .5); font-size: 12px; color: #ffe9b8; cursor: pointer; display: flex; gap: 6px; align-items: baseline; overflow: hidden; }
.sc-fuda .fd-ico { flex: none; font-weight: normal; font-size: 10px; background: #8a5a20; color: #fff2c0; padding: 0 4px; border-radius: 3px; }
.sc-fuda .fd-n { flex: none; color: #ffd27a; }
.sc-fuda .fd-sum { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #f4e6c8; }
.trait sup.fd-mark { font-size: 9px; color: #ffd27a; margin-left: 2px; }
.fuda-tip ul { list-style: none; margin: 4px 0 0; padding: 0; }
.fuda-tip li { display: flex; align-items: center; gap: 4px; font-size: 12px; margin: 3px 0; }
.trait-tip.fuda-tip b.fd-chip { display: inline-flex; margin: 0 2px 0 0; min-width: 24px; height: 24px; font-size: 12px; flex: none; color: #2a1a00; text-shadow: none; opacity: 1; }
.fd-banner { text-align: center; padding: 14px 8px 10px; border-radius: 12px; background: radial-gradient(ellipse at top, rgba(255, 90, 208, .35), rgba(20, 10, 40, .9) 70%); border: 2px solid #ffd23e; box-shadow: 0 0 18px rgba(255, 210, 62, .35); }
.fd-catch { margin: 0; font-size: 22px; color: #fff2c0; text-shadow: 0 0 10px #ff5ad0; letter-spacing: .1em; }
.fd-lead { margin: 4px 0 10px; font-size: 12px; color: #f0e0ff; }
.fd-feature { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; }
.fd-feature.small { margin-top: 6px; font-size: 11px; color: #ccd; align-items: center; }
.fd-feature-note { margin: 4px 0 0; font-size: 11px; color: #ffc0ea; }
.fd-wallet { text-align: center; margin: 10px 0 6px; }
.fd-wallet b { color: #ffe680; }
.fd-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fd-buttons .btn { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; font-size: 16px; }
.fd-buttons .btn small { font-size: 10px; opacity: .85; margin-top: 2px; }
.fd-ten { background: linear-gradient(180deg, #ff7ad8, #b0309a) !important; }
.fd-links { display: flex; gap: 6px; justify-content: center; margin: 8px 0; }
.fd-list { list-style: none; padding: 0; margin: 0; }
.fd-list li { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.fd-list li.none .fd-chip { filter: grayscale(1) brightness(.6); }
.fd-list li .fd-chip { flex: none; }
.fd-unk { color: #889; }
.fd-rate { width: 100%; border-collapse: collapse; font-size: 12px; }
.fd-rate td, .fd-rate th { border-bottom: 1px solid rgba(255,255,255,.12); padding: 4px 3px; text-align: left; }
.fd-rate td:nth-child(-n+4), .fd-rate th:nth-child(-n+4) { white-space: nowrap; }
.fd-duptd { font-size: 10px; color: #cbd; }
/* 演出 */
.fd-reveal { position: fixed; inset: 0; z-index: 9000; background: radial-gradient(circle at center, #1a1030, #000 75%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px; }
.fd-stage { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; transition: opacity .4s; }
.fd-reveal.go .fd-stage { opacity: 0; }
.fd-orb { width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, #fff, var(--orb, #9ab) 55%, transparent 70%); animation: orbPulse 1s ease-in-out infinite; }
.fd-reveal.best-R { --orb: #5aa8ff; } .fd-reveal.best-N { --orb: #bbb; } .fd-reveal.best-SR { --orb: #c070ff; } .fd-reveal.best-SSR { --orb: #ffcc33; }
.fd-reveal.best-UR { --orb: #ff5ad0; animation: urShake .5s 2; }
.fd-reveal.best-UR .fd-orb { background: conic-gradient(#ff5ad0, #ffd23e, #5ad8ff, #7dffc8, #ff5ad0); filter: blur(2px) brightness(1.3); animation: orbSpin 1s linear infinite; }
.fd-msg { color: #dde; margin-top: 14px; font-size: 13px; }
@keyframes orbPulse { 50% { transform: scale(1.18); filter: brightness(1.4); } }
@keyframes orbSpin { to { transform: rotate(360deg) scale(1.1); } }
@keyframes urShake { 25% { transform: translate(3px, -2px); } 75% { transform: translate(-3px, 2px); } }
.fd-grid { display: grid; gap: 8px; opacity: 0; transition: opacity .3s; }
.fd-reveal.go .fd-grid { opacity: 1; }
.fd-grid.n1 { grid-template-columns: 140px; }
.fd-grid.n10 { grid-template-columns: repeat(5, minmax(0, 64px)); }
.fd-card { position: relative; aspect-ratio: 3 / 4; perspective: 600px; }
.fd-grid.n1 .fd-card { height: 190px; }
.fd-face { position: absolute; inset: 0; border-radius: 8px; backface-visibility: hidden; transition: transform .45s; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fd-face.back { background: repeating-linear-gradient(45deg, #3a2a5a, #3a2a5a 6px, #2a1a4a 6px, #2a1a4a 12px); border: 2px solid #8a7ab0; color: #cbb8ff; font-size: 20px; }
.fd-face.front { transform: rotateY(180deg); background: linear-gradient(180deg, #fff8e0, #e8d8a8); border: 3px solid var(--fc); box-shadow: 0 0 14px var(--fc); color: #2a1a00; padding: 2px; text-align: center; }
.fd-card.open .fd-face.back { transform: rotateY(180deg); }
.fd-card.open .fd-face.front { transform: rotateY(360deg); }
.fd-card.r-UR .fd-face.front { background: linear-gradient(160deg, #fff0fb, #fff6d0, #e0f6ff); box-shadow: 0 0 22px #ff5ad0, 0 0 40px #ffd23e; }
.fd-card.r-SSR .fd-face.front { box-shadow: 0 0 18px #ffcc33; }
.fd-c { font-weight: normal; font-size: 22px; line-height: 1.1; word-break: break-all; }
.fd-c.len3 { font-size: 16px; } .fd-c.len4 { font-size: 13px; }
.fd-grid.n1 .fd-c { font-size: 46px; } .fd-grid.n1 .fd-c.len3 { font-size: 34px; } .fd-grid.n1 .fd-c.len4 { font-size: 28px; }
.fd-face .fd-r { position: absolute; top: 3px; left: 3px; }
.fd-new { position: absolute; bottom: 3px; font-style: normal; font-size: 9px; color: #fff; background: #e04a3a; padding: 0 4px; border-radius: 3px; }
.fd-dup { position: absolute; bottom: 2px; left: 2px; right: 2px; font-style: normal; font-size: 8px; color: #5a4a2a; line-height: 1.1; }
.fd-grid.n1 .fd-dup { font-size: 11px; }
.fd-best { color: #fff2c0; text-align: center; font-size: 13px; min-height: 1.2em; margin: 4px 0 0; }
.fd-best b { font-weight: normal; padding: 0 5px; border-radius: 4px; color: #111; background: var(--fc); }
.fd-acts { display: flex; gap: 8px; }
.fd-acts .btn { white-space: nowrap; min-width: 120px; }
.fd-acts [hidden] { display: none !important; }

/* めくった札の効果 */
.fd-card.open { cursor: pointer; }
.fd-card.sel { transform: translateY(-4px) scale(1.04); z-index: 2; }
.fd-card.sel .fd-face.front { box-shadow: 0 0 0 3px #fff, 0 0 16px var(--fc); }
.fd-card { transition: transform .15s; }
.fd-taphint { display: block; margin-top: 2px; font-size: 11px; color: #aab4e0; }
.fd-detail { width: min(420px, 94vw); background: rgba(14, 16, 48, .96); border: 2px solid var(--fc); border-radius: 10px; padding: 8px 12px; box-shadow: 0 0 14px var(--fc); animation: tipin .15s ease-out; }
.fd-detail header { display: flex; align-items: center; gap: 8px; }
.fd-detail header span { font-size: 14px; color: #fff; }
.fd-detail .fd-chip.big { cursor: default; flex: none; }
.fd-d-eff { margin: 6px 0 4px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.fd-d-eff li { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 6px; padding: 2px 7px; font-size: 13px; color: #ffe9a8; }
.fd-d-note { margin: 0; font-size: 11px; color: #aab4e0; }
/* 小さい画面でも札の文字を1行に収める */
.fd-grid.n10 .fd-card { container-type: inline-size; }
.fd-grid.n10 .fd-c { white-space: nowrap; word-break: keep-all; font-size: min(22px, 5vw); font-size: min(22px, 34cqw); margin-top: -6px; }
.fd-grid.n10 .fd-c.len2 { font-size: min(22px, 32cqw); }
.fd-grid.n10 .fd-c.len3 { font-size: min(16px, 26cqw); }
.fd-grid.n10 .fd-c.len4 { font-size: min(13px, 20cqw); }
.fd-grid.n10 .fd-c.len5, .fd-grid.n10 .fd-c.len6 { font-size: min(11px, 16cqw); }
.fd-grid.n10 .fd-dup { white-space: nowrap; overflow: hidden; text-overflow: clip; font-size: min(8px, 13cqw); }
.fd-grid.n1 .fd-c { white-space: nowrap; }
.fd-grid.n1 .fd-c.len5, .fd-grid.n1 .fd-c.len6 { font-size: 22px; }
.fd-long { font-size: 12px; line-height: 1.45; }
.fuda-tip li { align-items: flex-start; }
.fuda-tip .fd-long { font-size: 11px; }
.trait-tip.fuda-tip { max-width: 340px; }
.fg-over { margin: 3px 0 0; font-size: 11px; color: #9fd8ff; line-height: 1.4; }
/* 文字札の内訳：長いときは中でスクロール（タップ・スクロールできるように） */
.trait-tip.fuda-tip { pointer-events: auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.fuda-tip-h { display: flex; align-items: center; justify-content: space-between; position: sticky; top: -8px; margin: -8px -12px 2px; padding: 8px 12px 4px; background: rgba(10, 12, 40, .98); z-index: 1; }
.trait-tip.fuda-tip .fuda-tip-h b { display: inline; margin: 0; }
.fuda-tip-x { background: none; border: 1px solid #9ab0ff; color: #fff; border-radius: 6px; width: 28px; height: 28px; font-size: 14px; line-height: 1; cursor: pointer; }
/* めくった結果も、入りきらないときはスクロール */
.fd-reveal { overflow-y: auto; justify-content: safe center; }

/* ===== DLC 虚音の地 ===== */
.bg-kyoon { --bg-sky: radial-gradient(ellipse at 50% 20%, #6a6480, #24222e 70%); --bg-ground: repeating-linear-gradient(90deg, #4a4c58 0 16px, #5a5c68 16px 32px); }
.ky-settabs { display: flex; gap: 6px; margin-bottom: 6px; }
.ky-settab { flex: 1; background: #1d2560; border: 2px solid #8ea0ff; border-radius: 8px; padding: 7px 4px; font-size: 14px; color: #fff; line-height: 1.25; }
.ky-settab small { display: block; font-size: 10px; color: #cde; }
.ky-settab.on { background: #ffe680; color: #222; }
.ky-settab.on small { color: #555; }
.ky-settab[data-kyset="kyoon"] { border-color: #b8a0ff; }
.ky-settab[data-kyset="kyoon"]:not(.on) { background: #3a2c62; }
.ky-setnote { font-size: 12px; color: #d8d0ff; margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ky-rule { display: flex; flex-direction: column; gap: 2px; background: #2c2448; border: 1px solid #8a74d8; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; font-size: 12px; color: #e4dcff; }
.ky-rule b { color: #fff; }
.ky-rule.small { display: block; }
.kb-ky, .kb-dim { display: inline-block; font-style: normal; font-size: 10px; line-height: 1; padding: 2px 5px; border-radius: 4px; margin-left: 5px; vertical-align: 1px; font-weight: bold; }
.kb-ky { background: #7a4ad8; color: #fff; border: 1px solid #c8b0ff; }
.kb-dim { background: #5a2a2a; color: #ffb0a0; border: 1px solid #c86a5a; }
.eq-btn.on .kb-dim { color: #ffd0c0; }
.ky-shards ul { list-style: none; padding: 0; margin: 4px 0; font-size: 12px; }
.ky-shards li { margin: 3px 0; }
.ky-shards i { font-style: normal; margin-right: 6px; color: #888; }
.ky-shards i.on { color: #c8b0ff; }
.st.ky-st { background: #5a3aa8 !important; color: #fff !important; }
/* DLC 共鳴チップ */
.t-kyres{display:inline-block;padding:0 5px;margin-left:3px;border-radius:6px;font-size:10px;line-height:16px;background:linear-gradient(135deg,#3b2a5c,#6a4fa3);color:#e9ddff;border:1px solid #9b84d6;cursor:pointer}
.t-kyres.off{opacity:.45;filter:grayscale(.6)}
/* 言葉図鑑：文字数の絞り込み（スライダー・1行） */
.dict-lens { display: flex; gap: 10px; align-items: center; flex-wrap: nowrap; margin: 4px 0 0; }
.dict-lens .dl-label { font-size: 13px; color: #cde; white-space: nowrap; flex: none; }
.dict-lens .dl-val { flex: none; min-width: 4.2em; text-align: center; font-size: 14px; font-weight: bold; color: #222; background: #ffe680; border-radius: 6px; padding: 3px 6px; }
.dl-range { flex: 1; min-width: 0; height: 28px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; --pct: 0%; }
.dl-range:focus { outline: none; }
.dl-range::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(to right, #ffe680 0 var(--pct), #34407a var(--pct) 100%); border: 1px solid #8ea0ff; }
.dl-range::-moz-range-track { height: 8px; border-radius: 4px; background: #34407a; border: 1px solid #8ea0ff; }
.dl-range::-moz-range-progress { height: 8px; border-radius: 4px; background: #ffe680; }
.dl-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: #fff; border: 3px solid #ffb84d; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.dl-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid #ffb84d; }
.dl-scale { display: flex; justify-content: space-between; margin: 0 calc(4.2em + 22px) 8px calc(3em + 10px); font-size: 11px; color: #9ab; }
.dict-more { display: block; width: 100%; margin: 8px 0; }
/* 言霊を見る：消費の注意 */
.lw-analyze .lw-cost:empty { display: none; }
.lw-analyze .lw-cost { color: #ffe9a8; }
.lw-retry-note { font-size: 13px; color: #ffe9a8; background: rgba(255, 220, 120, .1); border-radius: 8px; padding: 8px; margin: 6px 0; }
/* 確認・個数の小窓の下の受け皿（裏のボタンを押せなくする） */
.modal-shield { position: absolute; inset: 0; z-index: 39; background: rgba(0, 0, 0, .25); }
/* ===== ユーザーID・メール・問い合わせ・お知らせ (v62) ===== */
.title-uid { position: relative; color: #aab; font-size: 12px; margin: 14px 0 0; letter-spacing: .5px; }
.title-uid b { color: #ffe14d; font-family: ui-monospace, monospace; font-size: 13px; }
.title-menu .t-news { position: relative; }
.title-menu .t-news .dot { position: absolute; top: 6px; right: 8px; width: 10px; height: 10px; border-radius: 50%; background: #ffe14d; }
.dot.hidden { display: none; }
.menu-btn .badge { position: absolute; top: 4px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e5484d; color: #fff; font-size: 11px; font-style: normal; line-height: 18px; text-align: center; }
.uid { font-family: ui-monospace, monospace; color: #ffe14d; letter-spacing: .5px; user-select: all; }
.acct-id { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #ccd; margin: 0; }
.acct-id .uid { font-size: 20px; }
.acct-form textarea { font: inherit; font-size: 16px; padding: 10px; border-radius: 8px; border: 2px solid #8a9aff; background: #fff; color: #111; resize: vertical; }
.cfg-foot { margin-top: 26px; padding-top: 10px; border-top: 1px solid #333a5a; font-size: 11px; color: #667; text-align: right; }
.cfg-foot a { color: #778; text-decoration: none; }
.mail-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.mail-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px; border-radius: 10px; border: 2px solid #3a4070; background: rgba(0,0,0,.25); color: #dde; font: inherit; cursor: pointer; }
.mail-row.unread { border-color: #8a9aff; background: rgba(60,70,160,.3); }
.mail-row.unread b::before { content: '● '; color: #e5484d; font-size: 10px; vertical-align: middle; }
.mr-ic { font-size: 22px; }
.mr-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.mr-main b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-main small { font-size: 11px; color: #99a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-tag { font-style: normal; font-size: 11px; padding: 2px 8px; border-radius: 10px; background: #444a70; white-space: nowrap; }
.mr-tag.gift { background: #d99a1e; color: #111; }
.mr-tag.waiting { background: #3fbf95; color: #111; }
.mr-tag.closed { background: #555; }
.mail-meta { font-size: 12px; color: #99a; margin: 0 0 8px; }
.mail-body { line-height: 1.7; font-size: 14px; padding: 10px; background: rgba(0,0,0,.25); border-radius: 8px; margin-bottom: 10px; word-break: break-word; }
.mail-attach { border: 2px dashed #d99a1e; border-radius: 10px; padding: 8px 10px; margin: 8px 0; font-size: 13px; }
.mail-attach p { margin: 4px 0 8px; }
.inq-thread { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow: auto; margin: 8px 0; }
.inq-msg { max-width: 88%; padding: 8px 10px; border-radius: 10px; font-size: 13px; line-height: 1.6; word-break: break-word; }
.inq-msg p { margin: 2px 0 0; }
.inq-msg small { color: #99a; font-size: 11px; }
.inq-msg.user { align-self: flex-end; background: #2e4a8a; }
.inq-msg.admin { align-self: flex-start; background: #3a3a4a; border: 1px solid #666; }
.news-list { display: flex; flex-direction: column; gap: 6px; }
.news-item { border: 2px solid #3a4070; border-radius: 10px; padding: 8px 10px; background: rgba(0,0,0,.25); }
.news-item.k-maint, .news-item.k-important { border-color: #e5484d; }
.news-item.k-event { border-color: #d99a1e; }
.news-item summary { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; cursor: pointer; }
.news-item summary i { font-style: normal; font-size: 11px; color: #ccd; }
.news-item summary small { margin-left: auto; font-size: 11px; color: #889; }
.news-item div { margin-top: 8px; font-size: 13px; line-height: 1.7; word-break: break-word; }
/* v63: ステータス表示が主人公に重なったら薄く・タイトルの改行 */
#hud, #objective { transition: opacity .25s; }
#hud.faded { opacity: .28; }
#objective.faded { opacity: .28; }
.title-logo { white-space: nowrap; font-size: min(52px, calc((100vw - 32px) / 11)); letter-spacing: 1px; }
.title-logo span { margin-right: .12em; padding: 0 .12em; border-width: max(2px, .06em); }
.title-menu .t-login small { display: block; font-size: 11px; opacity: .8; margin-top: 2px; }
/* 名乗り（主人公の名前を含む言葉） */
.trait.t-nanori { border-color: #ffd36b; color: #fff3c4; background: linear-gradient(90deg, rgba(255, 190, 60, .28), rgba(255, 120, 200, .22)); box-shadow: 0 0 6px rgba(255, 210, 100, .55); }
.trait.t-nanori .hid-ico { color: #ffd36b; margin-right: 3px; }
.code-input { font-family: ui-monospace, monospace; letter-spacing: 1px; text-transform: uppercase; }

/* ---------- v67 閃きの管理・広告で覚える・天井 ---------- */
.learn-btns { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 10px; }
.learn-btns .btn small { display: block; font-size: 11px; opacity: .8; }
.ad-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,.82); display: flex; align-items: center; justify-content: center; }
.ad-box { position: relative; width: min(86vw, 340px); background: #1b1d2b; border: 2px solid #c9b46a; border-radius: 12px; padding: 14px; text-align: center; color: #fff; }
.ad-label { position: absolute; top: 6px; left: 10px; font-size: 11px; background: #c9b46a; color: #222; padding: 0 6px; border-radius: 4px; margin: 0; }
.ad-body { height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: linear-gradient(135deg,#2c3a6a,#5a2c6a); border-radius: 8px; margin: 16px 0 10px; }
.ad-body span { font-size: 12px; opacity: .8; }
.ad-count { font-size: 13px; margin: 6px 0; }
.ad-skip { position: absolute; top: 4px; right: 6px; background: none; border: 0; color: #aaa; font-size: 18px; }
.fd-pity { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 2px; font-size: 11px; opacity: .65; }
.fd-pity .fd-pity-bar { display: inline-block; width: 70px; height: 3px; background: rgba(255,255,255,.15); border-radius: 2px; overflow: hidden; }
.fd-pity .fd-pity-bar i { display: block; height: 100%; background: #c9b46a; }
.fd-pity.ok { opacity: 1; }
.fd-pity .fd-exchange { font-size: 11px; padding: 1px 8px; border-radius: 10px; border: 1px solid #c9b46a; background: transparent; color: #ffe14d; }
.fd-all { margin-top: 10px; }
.fd-all summary { cursor: pointer; font-size: 13px; }
.fd-all table { margin-top: 6px; }
/* くじ：結果が確定するまでの待ち表示（演出ではない） */
.fd-wait { position: fixed; inset: 0; z-index: 9500; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; }
.fd-wait p { background: #141026; border: 1px solid #5a4a8a; border-radius: 8px; padding: 14px 18px; color: #eee; font-size: 13px; max-width: 80%; text-align: center; display: flex; gap: 10px; align-items: center; }
.fd-wait-spin { width: 16px; height: 16px; border: 2px solid #7a6ab0; border-top-color: transparent; border-radius: 50%; animation: fdspin .8s linear infinite; flex: none; }
@keyframes fdspin { to { transform: rotate(360deg); } }
/* 混み合っているときの案内（遊んでいる最中のポップアップ・スタート画面の待ち） */
.busy-popup { position: fixed; inset: 0; z-index: 9800; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 16px; }
.busy-box { width: min(420px, 100%); background: #10142e; border: 3px solid #fff; box-shadow: 0 0 0 3px #000; border-radius: 10px; padding: 16px 18px; color: #eee; font-size: 14px; line-height: 1.6; display: flex; flex-direction: column; gap: 8px; }
.busy-box h3 { margin: 0; font-size: 17px; color: #ffd966; }
.busy-box p { margin: 0; }
.busy-box ul { margin: 0; padding-left: 18px; font-size: 13px; color: #cfd3ff; }
.busy-box .busy-sub, .busy-box .busy-count { font-size: 12px; color: #aab; }
.busy-box .busy-count b { color: #fff; }
.busy-box .btn { width: 100%; }
/* 言葉図鑑：通報ボタン（小さく・控えめに） */
.dm-report { font-family: inherit; font-size: 11px; line-height: 1; cursor: pointer; background: transparent; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: 3px 6px; min-height: 22px; opacity: .45; filter: grayscale(1); margin-left: auto; }
.dm-report:hover, .dm-report:focus-visible { opacity: .9; }
.dm-report.on { opacity: .9; filter: none; border-color: rgba(255,90,90,.6); }
/* 規約などへのリンク */
.cfg-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin: 12px 0 2px; font-size: 11px; }
.cfg-legal a, .title-legal a { color: #9fb6ff; text-decoration: none; }
.title-legal { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 8px); display: flex; justify-content: center; gap: 14px; font-size: 11px; opacity: .7; }
/* くじ：広告で引く */
.fd-ad { display: block; width: 100%; margin: 6px 0 0; font-size: 13px; }
.fd-ad small { display: block; font-size: 10px; opacity: .75; }
/* ストア */
.store-panel .st-wallet { text-align: center; margin: 0 0 6px; }
.st-on { color: #9fe0a8; font-size: 12px; }
.st-web { background: rgba(255, 217, 102, .12); border: 1px solid rgba(255, 217, 102, .4); border-radius: 8px; padding: 6px 10px; font-size: 12px; color: #ffe9a8; margin: 6px 0; }
.st-h { font-size: 15px; color: #ffd966; margin: 14px 0 6px; }
.st-note { font-size: 11px; color: #aab; margin: -2px 0 6px; }
.st-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.st-card { position: relative; background: rgba(20, 24, 60, .9); border: 2px solid #5a6ab0; border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.st-card.st-sub { border-color: #c79bff; background: linear-gradient(160deg, rgba(60, 30, 100, .9), rgba(20, 24, 60, .9)); grid-column: 1 / -1; }
.st-card.st-dlc { grid-column: 1 / -1; }
.st-card.st-dlc { border-color: #6fc7a0; }
.st-card h4 { margin: 0; font-size: 14px; color: #fff; }
.st-card p { margin: 0; font-size: 11px; color: #cfd3ff; line-height: 1.5; flex: 1; }
.st-card .st-hl { flex: none; font-size: 14px; font-weight: bold; color: #ffe14d; text-shadow: 0 0 6px rgba(255, 210, 60, .45); line-height: 1.5; }
.st-card .st-small { display: block; font-size: 10px; color: #9aa0c8; line-height: 1.4; }
.st-card .st-period { flex: none; color: #d9c2ff; }
.st-card .st-buy { margin-top: 6px; width: 100%; }
.st-badge { position: absolute; top: -8px; right: 8px; background: #ff5a7a; color: #fff; font-style: normal; font-size: 10px; padding: 1px 7px; border-radius: 8px; }
.st-foot { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.st-foot .hint { flex-basis: 100%; font-size: 10px; }
/* 深淵の記録（ピラミッド） */
.pyr-box { text-align: center; }
.pyr-top { font-size: 15px; margin: 4px 0 0; }
.pyr-top b { font-size: 34px; color: #ffd27d; text-shadow: 0 0 8px rgba(255, 200, 90, .5); }
.pyr-sub { font-size: 13px; color: #cfd6ff; margin: 4px 0 12px; line-height: 1.6; }
.pyr { list-style: none; padding: 0; margin: 0 auto 10px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pyr-row { width: 100%; display: flex; justify-content: center; position: relative; }
.pyr-bar { width: var(--w); display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 7px 10px; background: linear-gradient(180deg, #3a3f7a, #262a5a); border: 1px solid #6a70c0; border-radius: 4px; font-size: 12px; color: #fff; box-sizing: border-box; }
.pyr-bar small { color: #c8ccff; white-space: nowrap; }
.pyr-row:first-child .pyr-bar { background: linear-gradient(180deg, #8a6a20, #5a4210); border-color: #ffd27d; }
.pyr-row.me .pyr-bar { background: linear-gradient(180deg, #2f8a6a, #1d5a44); border-color: #7dffc8; box-shadow: 0 0 10px rgba(125, 255, 200, .55); }
.pyr-you { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 11px; color: #7dffc8; font-weight: bold; }

/* 戦闘のコマンド：文字を折り返さない（小さい画面では少し小さくする） */
.cmd-main button { white-space: nowrap; overflow: hidden; text-overflow: clip; padding-left: 2px; padding-right: 2px; }
@media (max-width: 380px) { .cmd-main button { font-size: 14px; letter-spacing: -0.5px; } }
@media (max-width: 330px) { .cmd-main button { font-size: 13px; } }
/* 引っ越しのお知らせ */
.busy-popup.moved { z-index: 9900; background: rgba(5,7,20,.92); }
.busy-box .moved-host { text-align: center; font-size: 22px; font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; letter-spacing: .5px; color: #7fe3ff; word-break: break-all; }
.busy-box .moved-err { color: #ff9a9a; }