:root{ --sea:#0b1420;--fog:#1c2a3a;--mist:#8fa3b8;--paper:#dce6ee; --lantern:#e8a84c;--blood:#c05a5a;--heal:#6fbf9a;--soul:#9a7ac0; } *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation;} html{background:var(--sea);} html,body{height:100%;overflow:hidden;overscroll-behavior:none;} body::before{content:"";position:fixed;inset:0;background:var(--sea);z-index:-1;} body{background:var(--sea);color:var(--paper); font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; display:flex;flex-direction:column;max-width:520px;margin:0 auto;height:100dvh; user-select:none;-webkit-user-select:none;} #status{padding:10px 14px 8px;background:linear-gradient(180deg,#101c2c,var(--sea));border-bottom:1px solid #24354a;} #status .row{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;} .hdrbtns{display:flex;align-items:center;gap:8px;} .mini{min-height:0!important;padding:5px 10px!important;font-size:12px!important;font-weight:600!important;border-radius:9px!important; background:#16273b!important;border:1px solid #2f4763!important;color:var(--mist)!important;box-shadow:none!important;letter-spacing:.05em;} .mini:active{filter:brightness(1.3);} .mini.on{background:#3a3018!important;border-color:#8a6a2e!important;color:var(--lantern)!important;} #depth{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:15px;letter-spacing:.2em;white-space:nowrap;flex-shrink:0;} #souls{font-size:12px;color:var(--soul);letter-spacing:.06em;white-space:nowrap;} #statline{font-size:11px;color:var(--mist);letter-spacing:.06em;margin-bottom:6px;} #zoneline{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:7px;} #zoneline .zb{font-size:10.5px;padding:2px 9px;border-radius:20px;letter-spacing:.04em;border:1px solid;} #zoneline .zb.quest{color:var(--soul);border-color:#4a3b6a;} #zoneline .zb.zone{color:var(--lantern);border-color:#6a5024;} #zoneline .zb.zone.bad{color:var(--blood);border-color:#6a3131;} .barlabel{font-size:10px;color:var(--mist);display:flex;justify-content:space-between;margin-bottom:2px;letter-spacing:.05em;} .bar{height:9px;border-radius:5px;background:#0e1826;overflow:hidden;margin-bottom:5px;} .bar .fill{height:100%;border-radius:5px;transition:width .5s linear;} #hpfill{background:linear-gradient(90deg,#7a3b3b,var(--blood));} #efill{background:linear-gradient(90deg,#4a3b6a,var(--soul));} #relicshelf{flex:0 0 auto;padding:8px 12px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;align-content:flex-start;min-height:44px;max-height:118px;overflow-y:auto;-webkit-overflow-scrolling:touch; background:linear-gradient(180deg,#131f31,#0c1523); border-top:1px solid #24354a;border-bottom:1px solid #2b3d55; box-shadow:inset 0 1px 8px rgba(0,0,0,.45);} #relicshelf .empty{color:#3a4d66;font-size:11px;letter-spacing:.25em;padding:6px 2px;} #relicshelf .chip{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center; font-size:24px;background:#0e1826;border:1px solid #2b3d55;box-shadow:inset 0 1px 4px rgba(0,0,0,.5);cursor:pointer;} #relicshelf .chip:active{transform:scale(.93);} #relicshelf .chip img{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));} #relicshelf .chip.reso{border-color:var(--lantern);box-shadow:0 0 8px rgba(232,168,76,.55),inset 0 1px 4px rgba(0,0,0,.4);} #relicshelf .sep{color:#31465f;padding:0 2px;} /* ---- item popup ---- */ #popup{position:fixed;inset:0;background:rgba(5,10,18,.74);display:flex;align-items:center;justify-content:center;z-index:50;backdrop-filter:blur(3px);} #popup.hidden{display:none;} #pcard{width:min(84vw,340px);background:linear-gradient(180deg,#182741,#0d1726);border:1px solid #3a5273;border-radius:18px; padding:22px 18px 18px;text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.65);animation:pop .18s ease;} @keyframes pop{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}} #pcard img.art{width:120px;height:120px;object-fit:contain;filter:drop-shadow(0 12px 26px rgba(0,0,0,.75));} #pcard .pemoji{font-size:92px;line-height:1.3;} #pcard h3{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:18px;letter-spacing:.15em;margin:10px 0 3px;} #pcard .ptag{font-size:11px;color:var(--mist);letter-spacing:.2em;margin-bottom:8px;} #pcard .pdesc{font-size:13.5px;line-height:1.7;} #pcard .preso{margin-top:12px;padding-top:11px;border-top:1px dashed #3a5273;font-size:12.5px;color:var(--lantern);line-height:1.9;} #pcard .preso img{width:26px;height:26px;object-fit:contain;vertical-align:middle;} #pcard .pclose{margin-top:14px;font-size:11px;color:#3a4d66;letter-spacing:.2em;} /* 演出用ストーリーポップアップ(ぬし撃破/救済・45m帳突破) */ #pcard.story{max-width:min(88vw,384px);} #pcard.story .story-title{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:17px;letter-spacing:.16em;color:var(--lantern);margin:8px 0 14px;line-height:1.5;} #pcard.story .story-body p{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:14px;line-height:2;margin:0 0 11px;color:var(--paper);} #pcard.story .story-reward{margin-top:12px;padding-top:11px;border-top:1px dashed #3a5273;font-size:13px;color:var(--lantern);letter-spacing:.06em;} /* ---- fullscreen picker ---- */ #picker{position:fixed;inset:0;background:linear-gradient(180deg,rgba(7,12,20,.97),rgba(11,20,32,.99));z-index:60; display:flex;flex-direction:column;padding:calc(16px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom)); overflow-y:auto;-webkit-overflow-scrolling:touch;} #picker.hidden{display:none;} #pickerTitle{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;text-align:center;font-size:15px;letter-spacing:.28em;color:var(--lantern);margin:8px 0 16px;flex:0 0 auto;} #pickerGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start;} .ocard{background:linear-gradient(180deg,#1c2c47,#101b2c);border:1px solid #3a5273;border-radius:16px;padding:14px 10px 12px;text-align:center; box-shadow:0 4px 14px rgba(0,0,0,.4);} .ocard:active{transform:scale(.97);border-color:var(--lantern);} .ocard img{height:150px;max-width:100%;object-fit:contain;filter:drop-shadow(0 10px 22px rgba(0,0,0,.7));} .ocard .oemoji{font-size:60px;line-height:150px;display:block;} .ocard h4{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:14.5px;letter-spacing:.1em;margin:9px 0 5px;color:var(--paper);} .ocard p{font-size:11.5px;color:var(--mist);line-height:1.65;} .ocard.small img{height:110px;} .ocard.cancel{grid-column:1/-1;padding:16px;color:var(--mist);} /* ---- loadout screen ---- */ #loadout{position:fixed;inset:0;background:linear-gradient(180deg,rgba(7,12,20,.98),rgba(11,20,32,.99));z-index:62; display:flex;flex-direction:column;padding:calc(14px + env(safe-area-inset-top)) 14px 14px;} #loadout.hidden{display:none;} #loHead{flex:0 0 auto;background:linear-gradient(180deg,#1b2c47,#101b2c);border:1px solid #3a5273;border-radius:16px; padding:16px 18px;display:flex;align-items:center;gap:14px;box-shadow:0 4px 16px rgba(0,0,0,.4);margin-bottom:10px;} #loHead .lolamp{font-size:34px;filter:drop-shadow(0 0 10px rgba(232,168,76,.8));} #loHead h3{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:18px;letter-spacing:.12em;margin-bottom:3px;} #loHead p{font-size:12px;color:var(--mist);line-height:1.5;} #loCap{display:inline-block;margin-top:8px;padding:5px 14px;border:1px solid #8a6a2e;border-radius:20px;color:var(--lantern);font-size:13px;letter-spacing:.08em;} #loCap.over{border-color:var(--blood);color:var(--blood);} #loFore{flex:0 0 auto;text-align:center;font-size:12px;color:var(--soul);letter-spacing:.06em;margin-bottom:10px;} #loList{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:10px;padding:2px 2px 6px;} .mcard{position:relative;display:flex;align-items:center;gap:14px;padding:16px 16px 16px 20px;border-radius:14px;min-height:96px; background:linear-gradient(180deg,#16253b,#0e1927);border:1px solid #263a54;} .mcard.on{border-color:#8a6a2e;box-shadow:inset 4px 0 0 var(--lantern),0 2px 10px rgba(0,0,0,.35);} .mcard .cbox{flex:0 0 auto;width:30px;height:30px;border-radius:8px;border:2px solid #3a5273;display:flex;align-items:center;justify-content:center;font-size:18px;color:transparent;} .mcard.on .cbox{border-color:var(--lantern);color:var(--lantern);} .mcard .mbody{flex:1 1 auto;min-width:0;} .mcard .mtop{display:flex;align-items:center;gap:8px;margin-bottom:6px;} .mcard .mname{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:15.5px;letter-spacing:.04em;} .mcard .lv{margin-left:auto;flex:0 0 auto;font-size:11.5px;color:var(--lantern);border:1px solid #6a5024;border-radius:8px;padding:2px 9px;letter-spacing:.03em;} .mcard .mdesc{font-size:12.5px;color:#c2cfdd;margin-bottom:8px;line-height:1.45;} .mcard .chips{display:flex;gap:6px;flex-wrap:wrap;} .mcard .chiptag{font-size:10.5px;color:var(--mist);border:1px solid #2f4763;border-radius:20px;padding:2px 10px;letter-spacing:.04em;} .mcard.dim{opacity:.45;} #loGo{flex:0 0 auto;margin-top:10px;} #loGo button{width:100%;} #scene{flex:0 0 auto;height:150px;display:flex;align-items:flex-end;justify-content:center;padding:6px 0 0;position:relative;overflow:hidden;} #sprite{font-size:60px;line-height:1;filter:drop-shadow(0 6px 18px rgba(0,0,0,.6));transition:transform .12s ease,opacity .3s ease;position:relative;} #sprite.grounded::after{content:"";position:absolute;left:50%;bottom:2px;transform:translateX(-50%);width:60%;height:14px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 70%);z-index:-1;} #sprite img{height:126px;max-width:76vw;object-fit:contain;display:block;filter:drop-shadow(0 8px 20px rgba(0,0,0,.75));} #sprite img.big{height:140px;max-width:86vw;} #sprite img[data-enemy]{filter:drop-shadow(0 8px 22px rgba(0,0,0,.8));} #sprite.hit{transform:translateX(5px) scale(.96);} #sprite.gone{opacity:0;transform:scale(.6);} #ename{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:11px;color:var(--mist);letter-spacing:.15em;} .fogbank{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 120%,rgba(143,163,184,.10),transparent 65%);} #log{flex:0 0 32dvh;min-height:15dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 16px;font-size:13.5px;line-height:1.8; scroll-behavior:smooth; font-family:"Hiragino Mincho ProN","Yu Mincho",serif; border-top:1px solid #1a2a3d;background:linear-gradient(180deg,rgba(28,42,58,.35),transparent 30%);} body.logS #log{flex:0 0 20dvh;} body.logL #log{flex:0 0 46dvh;} body.logS #scene,body.logL #scene{height:132px;} #log p{margin-bottom:5px;opacity:0;animation:rise .4s ease forwards;} body.en #log p[data-ja]{cursor:pointer;} body.en #log p[data-ja]::after{content:"";} #log p.showja{color:var(--mist)!important;font-size:12px;font-style:italic;} @keyframes rise{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}} .sys{color:var(--mist);font-size:12px;} .dmg{color:var(--blood);} .good{color:var(--heal);} .gold{color:var(--lantern);} .soul{color:var(--soul);} .reso-line{color:var(--lantern);text-shadow:0 0 10px rgba(232,168,76,.5);} #cmds{padding:12px 12px calc(14px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr;align-items:start;row-gap:21px;column-gap:10px;background:linear-gradient(180deg,#0f1c2d,#0b1521);border-top:1px solid #2b3d55;max-height:56dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1 1 0;min-height:0;} #cmds.locked{pointer-events:none;} #cmds.locked button{opacity:.5;} #cmds.stack{grid-template-columns:1fr;} button{font-family:inherit;font-size:15px;font-weight:600;letter-spacing:.04em;min-height:56px;padding:12px 14px;border-radius:14px; border:1px solid #263a54;background:linear-gradient(180deg,#16253b,#0e1927);color:var(--paper);text-align:center; display:flex;flex-direction:column;align-items:center;justify-content:center; overflow-wrap:break-word;word-break:break-word; box-shadow:0 2px 8px rgba(0,0,0,.3);transition:transform .1s ease,filter .1s ease;} body.en #cmds button{font-size:13.5px;letter-spacing:.01em;padding:10px 10px;} body.en #depth{font-size:13px;letter-spacing:.02em;} body.en button .sub{font-size:10px;} button:active{transform:translateY(1px) scale(.99);filter:brightness(1.2);} button .sub{display:block;font-size:11px;font-weight:400;color:var(--mist);letter-spacing:.01em;margin-top:4px;line-height:1.45;} button.wide{grid-column:1/-1;} #gateflash{position:fixed;inset:0;z-index:60;pointer-events:none;background:#0E1130;opacity:0;} #gateflash.show{animation:gateFlashBg 2.6s ease forwards;} #gateflash.hidden{display:none;} #gatetext{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:22px;letter-spacing:.5em; color:var(--lantern);text-shadow:0 0 18px rgba(224,178,90,.8);opacity:0;white-space:nowrap;} #gateflash.show #gatetext{animation:gateTextFade 2.6s ease forwards;} @keyframes gateFlashBg{0%{opacity:0}12%{opacity:.92}55%{opacity:.72}100%{opacity:0}} @keyframes gateTextFade{0%{opacity:0;letter-spacing:.9em}20%{opacity:1;letter-spacing:.5em}70%{opacity:1}100%{opacity:0}} #gateflash.blocked{background:#05060d;} #gateflash.blocked.show{animation:gateBlockBg 2.2s ease forwards;} #gateflash.blocked.show #gatetext{color:#8a97ad;text-shadow:0 0 12px rgba(60,74,96,.7);animation:gateBlockText 2.2s ease forwards;} @keyframes gateBlockBg{0%{opacity:0}18%{opacity:.94}60%{opacity:.86}100%{opacity:0}} @keyframes gateBlockText{0%{opacity:0;letter-spacing:.2em}22%{opacity:1;letter-spacing:.5em}68%{opacity:1;letter-spacing:.5em}100%{opacity:0;letter-spacing:.9em}} #cmds.matrix{grid-template-columns:repeat(4,1fr);gap:10px;} button.memento{aspect-ratio:1;padding:6px;display:flex;align-items:center;justify-content:center;min-height:0;} button.memento img{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6));} button.memento .memoji{font-size:34px;} button.accent{border-color:#8a6a2e;box-shadow:inset 4px 0 0 var(--lantern),0 2px 10px rgba(0,0,0,.35);color:var(--lantern);} button.danger{border-color:#6a3a3a;box-shadow:inset 4px 0 0 var(--blood),0 2px 8px rgba(0,0,0,.3);color:#e0a5a5;} button.event{grid-column:1/-1;border-color:#3a3358;box-shadow:inset 4px 0 0 var(--soul),0 2px 8px rgba(0,0,0,.3);text-align:left;align-items:stretch;padding-left:20px;} .lvb{display:inline-block;font-size:11px;font-weight:400;color:var(--lantern);border:1px solid #6a5024;border-radius:8px;padding:1px 8px;margin-left:6px;vertical-align:middle;letter-spacing:.03em;} .fit{display:inline-block;font-size:10.5px;border-radius:6px;padding:1px 7px;margin-left:6px;letter-spacing:.03em;} .fit.good{color:var(--heal);border:1px solid #2c6e4f;} .fit.bad{color:var(--blood);border:1px solid #6a3131;} .fit.tar{color:#b79cd6;border:1px solid #4a3b6a;} .bimg.mystery{filter:grayscale(1) brightness(.5) blur(1px);opacity:.7;} button .bimg{width:36px;height:36px;object-fit:contain;vertical-align:middle;margin-right:10px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));} /* ================================================================== UI微調整 ── 意図的な見た目変更(リファクタとは別レイヤー) ここを丸ごと消せば従来の見た目に戻せる。 ================================================================== */ /* ① 遺物/仲間/ペット選択ボタン: アイコンと名前を横一列に(縦2段化の解消) */ #cmds button:has(.bimg){display:block;text-align:left;} #cmds button:has(.bimg) .sub{display:block;} /* ① タイトル横のバージョン表示。#depthの見た目・挙動は無変更(単に隣に小さく添えるだけ) */ .titlewrap{display:flex;align-items:baseline;gap:7px;min-width:0;overflow:hidden;} #verbadge{font-size:9.5px;color:#3a4d66;letter-spacing:.04em;white-space:nowrap;flex:0 0 auto;} /* ② 「記憶を継ぐ」ボタンは JS 側で wide 指定に変更(魂の桁あふれ対策)。CSSは不要 */ /* 割り振り等でボタンが少ない時、#cmds(flex:1で縦に伸びる)内でグリッド行が 引き伸ばされて巨大な行間になるのを防ぐ。行は上から自然に並べる。 */ #cmds{align-content:start;} /* バグA: ヘッダー幅が足りない時、×4/JP等のミニボタンや魂表示が縮んで文字が折り返すのを防ぐ。 代わりにタイトル側(titlewrap: min-width:0 & overflow:hidden 済み)が縮む/クリップされる。 */ .hdrbtns{flex-shrink:0;} .hdrbtns .mini{flex-shrink:0;white-space:nowrap;} #souls{flex-shrink:0;} /* バグB(改): 深層で上部が伸びても選択肢がスクロール不能で画面外に出ないよう、 選択肢に「優先的な取り分(basis 30dvh)」を与える。狭い時はログと共に比例して縮み、 必ず画面内に収まる(内部スクロール維持)。min-heightで死守すると画面外へ押し出すので使わない。 浅い時は余白があるので選択肢が伸びて従来通り。 */ #cmds{flex-basis:30dvh;} #log{flex-shrink:1;} body.logS #log{flex-shrink:1;} body.logL #log{flex-shrink:1;} /* ③ 割り振りなど短いボタン一覧をコンパクトに(tight指定時のみ。他画面のボタンは無変更) */ #cmds.tight{row-gap:8px;} #cmds.tight button{min-height:40px;padding:8px 14px;} /* 長い英語名の2列カード(記憶を継ぐ / しおのこ 等)。日本語は名前が短く折り返さない ので2列を維持(密度優先)。英語は名前が2行に折り返し、iOS Safari の