*{box-sizing:border-box}body{margin:0;background:#08131a;color:#e6efed;font:16px/1.6 system-ui,sans-serif;height:100dvh;overflow:hidden}#model{position:fixed;inset:0;border:0;pointer-events:none}header{position:fixed;left:24px;top:14px;width:43vw;max-height:112px;padding:8px 16px;background:#08131ae8;border-left:2px solid #9ac6c5}.eyebrow{font-size:14px;letter-spacing:.08em;margin:0}h1{word-break:keep-all;font-size:22px;line-height:1.35;margin:4px 0}#status{margin:0;font-size:14px}#model-space{position:fixed;pointer-events:none}#battle{position:fixed;aspect-ratio:8/7;background:#071016;outline:2px solid #9ac6c5;box-shadow:0 10px 45px #0009}canvas,#battle iframe{width:100%;height:100%;image-rendering:pixelated;display:block}#veil{position:absolute;inset:0;display:grid;place-items:center;background:#08131a;text-align:center;padding:16px}#veil[hidden]{display:none}#cast{position:fixed;display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;align-items:stretch;padding:3px 0}#cast[hidden]{display:none}.cast-card{display:flex;flex:none;align-items:center;gap:8px;max-width:100%;padding:6px 10px;background:#08131af5;border:1px solid #739293;border-radius:4px}.cast-card img{width:66px;height:76px;object-fit:contain;background:#101d25;border-radius:2px}.cast-copy{display:flex;flex-direction:column;justify-content:center;gap:2px}.cast-copy strong{font-size:16px;font-weight:600;white-space:nowrap}.cast-copy small{font-size:14px;white-space:nowrap}.cast-card.speaking{border:2px solid #f4d791;background:#25312ef5;box-shadow:inset 0 0 0 1px #f4d791}.speaker-mark{color:#f4d791;font-size:14px;white-space:nowrap}nav{position:fixed;display:flex;align-items:center;justify-content:center;gap:8px;background:#08131af2;padding:8px;overflow-x:auto;white-space:nowrap;scrollbar-width:thin}button,select{font:inherit;background:#0c2835;border:1px solid #729fa5;color:#edf6f4;border-radius:5px;padding:7px 10px;min-height:44px}button{cursor:pointer;touch-action:manipulation;flex:none}button:disabled,select:disabled{opacity:.5}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #f4d791;outline-offset:3px}label{display:flex;align-items:center;gap:8px}select{max-width:260px}footer{position:fixed;bottom:10px;left:24px;font-size:14px;text-shadow:0 2px 6px #000}a{color:#bce7e5;margin-left:8px}#start[hidden]{display:none}body.complete #battle,body.complete #cast{opacity:0;pointer-events:none;transition:opacity 2s}#performance{position:fixed;right:5px;top:5px;font:12px/1.5 monospace;background:#08131aee;white-space:pre-line}.portrait header{left:12px;top:8px;width:calc(100vw - 24px);height:82px;padding:4px 12px}.portrait .eyebrow{font-size:12px}.portrait h1{font-size:18px;margin:0}.portrait #status{font-size:12px}.portrait nav{justify-content:flex-start;padding:5px;gap:6px;font-size:14px}.portrait nav label{font-size:0;gap:0}.portrait select{max-width:180px;font-size:14px}.portrait footer{display:none}.portrait .cast-card{padding:3px 7px;gap:6px}.portrait .cast-card img{width:46px;height:60px}.portrait .cast-copy strong{font-size:16px}.portrait .cast-copy small,.portrait .speaker-mark{font-size:12px}

/* Order94 typography also applies to the external character labels. */
.cast-copy{gap:8px}.cast-copy canvas{display:block;image-rendering:pixelated;max-width:none}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* 10-24 始める前は物語の窓を出さない */
#battle{transition:opacity .6s ease}body.home #battle{opacity:0;visibility:hidden}

/* 10-24 さとるん「左上、ユグドラシルエッダ - 世界樹をめぐる物語 - の一行にする。黒い帯は不要」 */
header,body.portrait header{background:none;border:0;padding:0;max-height:none;height:auto;width:auto!important}
header h1{white-space:nowrap;margin:0;text-shadow:0 1px 3px #000c,0 0 8px #0008}
#status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* 10-24 さとるん「22の場面を、自動でたどります。出典　これも不要。みぎうえに出典とだけもっと小さく置く」 */
footer,body.portrait footer{display:block;position:fixed;top:10px;right:16px;left:auto;bottom:auto;margin:0;padding:0;background:none;font-size:11px;line-height:1;z-index:20}
footer a{color:#cfe0df;text-shadow:0 1px 2px #000c}

/* 10-24 さとるん「大きすぎる。ゴールドを感じる文字で、もっと厳かに」 */
header h1{font-family:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;font-weight:600;font-size:15px;letter-spacing:.18em;background:linear-gradient(180deg,#fbf0c8 0%,#e2c172 45%,#b08a3c 70%,#e9d08c 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 1.5px #000) drop-shadow(0 1px 4px #000d)}

/* 10-24 さとるん「前、次の場面は不要」「場面を選ぶなどのテキストも不要」 */

/* 10-24 さとるん「シーンの選択と再生ボタン、また、戻る、進むを示すボタンの最小構成」 */
#playback{justify-content:center;gap:10px}
#playback .icon{width:34px;height:34px;padding:0;font-size:13px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
#playback .icon[hidden]{display:none}
#playback select{height:34px}

/* 10-24 さとるん「下の黒い帯も不要」 */
#playback{background:none!important;border:0!important;box-shadow:none!important}

/* 10-24 さとるん「選択の矢印の位置が微妙」「高さをもう少しおさえて」 */
#playback select{appearance:none;-webkit-appearance:none;padding:0 34px 0 12px;font-size:14px;line-height:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23cfe0df' stroke-width='1.4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:10px 6px}
#playback .icon,#playback select{min-height:34px}
#playback select{background-color:#0c2835}
/* 10-24 さとるん「縁が安っぽいので、伝説のオーガバトルや、タクティクスオウガのような縁を」：くすんだ金の二重の縁・内側の暗い線・四隅の飾り */
#battle{outline:0;border:0;box-shadow:0 0 0 1px #1a1206,0 0 0 3px #b8954f,0 0 0 4px #4a3a1c,0 0 0 6px #d9bd7a,0 0 0 7px #5a4520,0 0 0 8px #1a1206,0 12px 48px #000b,inset 0 0 0 1px #000}
#battle::before,#battle::after{content:"";position:absolute;inset:-12px;pointer-events:none;z-index:2;background:
 radial-gradient(circle at 12px 12px,#f3dea0 0 2.5px,#9c7a3a 2.6px 4px,transparent 4.2px),
 radial-gradient(circle at calc(100% - 12px) 12px,#f3dea0 0 2.5px,#9c7a3a 2.6px 4px,transparent 4.2px),
 radial-gradient(circle at 12px calc(100% - 12px),#f3dea0 0 2.5px,#9c7a3a 2.6px 4px,transparent 4.2px),
 radial-gradient(circle at calc(100% - 12px) calc(100% - 12px),#f3dea0 0 2.5px,#9c7a3a 2.6px 4px,transparent 4.2px)}
#battle::after{inset:-12px;background:
 conic-gradient(from 45deg at 12px 12px,transparent 0 0) ,
 linear-gradient(#d9bd7a,#d9bd7a) 4px 4px/16px 1px no-repeat,linear-gradient(#d9bd7a,#d9bd7a) 4px 4px/1px 16px no-repeat,
 linear-gradient(#d9bd7a,#d9bd7a) calc(100% - 4px) 4px/16px 1px no-repeat,linear-gradient(#d9bd7a,#d9bd7a) calc(100% - 4px) 4px/1px 16px no-repeat,
 linear-gradient(#d9bd7a,#d9bd7a) 4px calc(100% - 4px)/16px 1px no-repeat,linear-gradient(#d9bd7a,#d9bd7a) 4px calc(100% - 4px)/1px 16px no-repeat,
 linear-gradient(#d9bd7a,#d9bd7a) calc(100% - 4px) calc(100% - 4px)/16px 1px no-repeat,linear-gradient(#d9bd7a,#d9bd7a) calc(100% - 4px) calc(100% - 4px)/1px 16px no-repeat}

/* 10-24 さとるん「ストーリー全部なし。あまりにもよくない」：物語の窓と再生のボタンを出さない。島だけ。戻すときはこの 2 行を消す（控え saved/before_story_off_1024/） */
#cast{display:none!important}

/* 10-24 3D の動きだけ：枠は着いたらフェードで出て、次の場面を選ぶとフェードで消える。中は空 */
#battle{opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s linear .9s;background:#071016}
#battle.shown{opacity:1;visibility:visible;transition:opacity .9s ease}
#playback{justify-content:center}
#model{width:100%;height:100%}

/* 10-24 案B：光に包まれて、画面いっぱいの背景の世界へ。背景はゆっくり少し寄る */
#scenebg{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transform:scale(1.08);transform-origin:50% 60%}
#scenebg.shown{opacity:1;animation:scenedrift 16s ease-out forwards}
@keyframes scenedrift{from{transform:scale(1.08)}to{transform:scale(1.0)}}
#flash{position:fixed;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 55%,#fffaf0 0%,#ffe9b8 40%,#f2c879 75%,#c99a4a 100%)}

/* 10-24 半透明の黒い大きな枠：左に回る 3D の主役、右に解説の文 */
#stagepanel{position:fixed;left:5vw;right:5vw;top:13vh;bottom:118px;display:flex;gap:2vw;padding:2.2vw 2.6vw;background:rgba(4,8,12,.52);border:1px solid rgba(217,189,122,.55);border-radius:6px;box-shadow:0 0 0 1px rgba(0,0,0,.4),0 18px 60px rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s linear .9s}
#stagepanel.shown{opacity:1;visibility:visible;transition:opacity .9s ease}
#stagepanel .sp-figure{flex:0 0 40%;position:relative;min-width:0}
#stagepanel .sp-figure canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#stagepanel .sp-text{flex:1;min-width:0;position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent);font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:clamp(17px,1.55vw,26px);line-height:2;color:#f1ede4;letter-spacing:.04em;word-break:keep-all;line-break:strict;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.portrait #stagepanel{flex-direction:column;top:10vh}.portrait #stagepanel .sp-figure{flex:0 0 42%}

/* 10-24 文は下から上へ流れる。最初は箱の下の外から */
#stagepanel .sp-roll{position:absolute;left:0;right:0;top:62%;display:flex;flex-direction:column;gap:9vh}
#stagepanel .sp-roll p{margin:0}
/* 黒い枠の後ろのドット絵：ぼかさず整数倍に近い大きさで。出し入れは層ごとのフェード（JS で opacity） */
#pixstage{position:fixed;left:50%;bottom:118px;transform:translateX(-50%);width:min(960px,90vw);height:auto;aspect-ratio:16/9;image-rendering:pixelated;pointer-events:none;opacity:0}

/* 10-24 話の終わり：黒い枠ごとゆっくり消す */
#stagepanel.shown.ending{opacity:0;transition:opacity 2s ease}

/* 10-24 もう一度見る */
#stagepanel .sp-again{position:absolute;right:14px;bottom:12px;width:40px;height:40px;min-height:0;padding:0;border-radius:50%;font-size:20px;line-height:1;display:grid;place-items:center;background:rgba(12,40,53,.85);border:1px solid rgba(217,189,122,.7);color:#f1ede4;cursor:pointer}
#stagepanel .sp-again[hidden]{display:none}

/* 10-24 光の中から場面の世界が出てくる：場面の絵は丸い窓（mask）の中だけ見せ、ふちに光の輪。まぶしい光は重ねると明るくなる合成で */
#scenewrap{position:fixed;inset:0;pointer-events:none;overflow:hidden}
#scenewrap #scenebg{position:absolute}
#lightrim{position:fixed;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen}
#flash{background:none;mix-blend-mode:screen}

/* 10-24 さとるん「スマホだと、上下にならべて、上に3Dがくるくるして、下から文字が流れてきて、3Dのところまでは上がりきらない」：縦長の画面では枠の中を上に 3D・下に文。文は文の箱の中だけを流れる（上のぼかしで消える）。ドット絵は文の箱の真ん中（stage-panel.mjs の placePix） */
#stagepanel.vert{left:3vw;right:3vw;top:max(64px,8vh);bottom:78px;flex-direction:column;gap:6px;padding:12px 14px}
#stagepanel.vert .sp-figure{flex:0 0 40%}
#stagepanel.vert .sp-text{flex:1;font-size:16px;line-height:1.85;-webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
#stagepanel.vert .sp-roll{gap:4.5vh}

/* 10-24 さとるん「みどがるずおるむだけはおもいっきりはみ出せててもいい」：場面の spill:true で、3D を描く板を枠の外（左・上・下）と文の後ろ（右）まで広げる */
#stagepanel.spill .sp-figure canvas{inset:auto;left:var(--spl,-45%);top:-45%;width:220%;height:190%}


/* 10-24 横に長い 2 体の場面（竜・翼を広げた鷲）は、場面の figure で左の 3D の場所を広げる（ふつうは 40%） */
#stagepanel:not(.vert) .sp-figure{flex:0 0 var(--fig,40%)}
/* 10-24 はみ出す板（大蛇）のはしで体が一直線に切れないよう、下と右のはしをぼかして消す */
/* 10-24 右は文とドット絵の所（枠の右側）にかからないよう、手前で消す（さとるん「ヨルムンガンドのとき、sfcアニメーションがでてない」）。さとるん「上側と左端がブツっと切れてるから下側、右側のように段々透明に」：4 方向とも、はしへ向けてだんだん透明に */
#stagepanel.spill .sp-figure canvas{-webkit-mask-image:linear-gradient(to bottom,transparent 2%,#000 22%,#000 72%,transparent 97%),linear-gradient(to right,transparent 2%,#000 20%,#000 62%,transparent 78%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 2%,#000 22%,#000 72%,transparent 97%),linear-gradient(to right,transparent 2%,#000 20%,#000 62%,transparent 78%);mask-composite:intersect}
#stagepanel.vert.spill .sp-figure canvas{left:-25%;top:-45%;width:150%;height:180%;-webkit-mask-image:linear-gradient(to bottom,transparent 2%,#000 22%,#000 66%,transparent 95%),linear-gradient(to right,transparent 0%,#000 14%,#000 86%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 2%,#000 22%,#000 66%,transparent 95%),linear-gradient(to right,transparent 0%,#000 14%,#000 86%,transparent 100%);mask-composite:intersect}

/* 10-24 3D の板の左右のはしをぼかす（長い魔物が真横を向いて板のはしにかかっても、ぷつっと切れずに消える） */
/* 10-24 さとるん「端が透明になってしまっている」で、左右のぼかしはやめた */

/* 10-24 語りの言葉ごとの文字：中国語は字の間で折り返す・韓国語は語の切れ目で折る・ラテン文字は語の切れ目で折る */
#stagepanel:not(:lang(ja)) .sp-text{word-break:normal;overflow-wrap:break-word;letter-spacing:.01em}
#stagepanel:lang(ko) .sp-text{word-break:keep-all;font-family:"AppleMyungjo","Nanum Myeongjo","Noto Serif KR",serif}
#stagepanel:lang(zh-Hant) .sp-text{font-family:"Songti TC","Noto Serif TC",serif}
#stagepanel:lang(zh-Hans) .sp-text{font-family:"Songti SC","Noto Serif SC",serif}
#stagepanel:is(:lang(en),:lang(sv),:lang(no),:lang(da),:lang(is),:lang(de),:lang(non)) .sp-text{font-family:"Iowan Old Style","Palatino","Georgia",serif;hyphens:auto}

/* 10-24 さとるん「グローバルマーク（地球のマーク）の横に Japanese を初期にして選べるように」：右上、出典の左。金の細いふち・暗い青の地 */
footer,body.portrait footer{display:flex;align-items:center;gap:14px;top:8px}
#langbar{position:fixed;top:8px;right:16px;z-index:20}
.langpick{position:relative;font:12px/1 system-ui,sans-serif;letter-spacing:.04em}
.langpick-btn{display:inline-flex;align-items:center;gap:6px;min-height:0;height:26px;padding:0 9px 0 8px;background:#08131ad9;border:1px solid #b8954f;border-radius:4px;color:#ecd9a4;font:inherit;cursor:pointer;box-shadow:0 0 0 1px #000a,0 2px 8px #0008}
.langpick-btn:hover,.langpick-btn[aria-expanded="true"]{border-color:#d9bd7a;color:#f6e7bd;background:#0c2835e6}
.langpick-globe{flex:none;color:#d9bd7a}
.langpick-caret{flex:none;opacity:.8;transition:transform .15s}
.langpick-btn[aria-expanded="true"] .langpick-caret{transform:rotate(180deg)}
.langpick-name{white-space:nowrap}
.langpick-list{position:absolute;top:calc(100% + 6px);right:0;margin:0;padding:4px;list-style:none;min-width:100%;width:max-content;max-height:calc(100dvh - 60px);overflow:auto;background:#08131af2;border:1px solid #b8954f;border-radius:4px;box-shadow:0 0 0 1px #000a,0 0 0 3px #4a3a1c55,0 12px 32px #000c;z-index:40}
.langpick-list[hidden]{display:none}
.langpick-list li{padding:7px 12px 7px 26px;border-radius:3px;color:#dfe9e6;white-space:nowrap;cursor:pointer;position:relative}
.langpick-list li:hover,.langpick-list li:focus{background:#13384a;color:#fbf0c8;outline:none}
.langpick-list li:focus-visible{outline:2px solid #f4d791;outline-offset:-2px}
.langpick-list li[aria-selected="true"]{color:#f3dea0}
.langpick-list li[aria-selected="true"]::before{content:"";position:absolute;left:10px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#d9bd7a}
/* 10-24 スマホの縦持ち：題名が画面の幅からはみ出し、右上の言葉の選択と出典に重なっていた。題名の字間を少しつめて幅に収め、言葉の選択と出典は題名の下の行へ */
@media (orientation:portrait) and (max-width:640px){header h1{font-size:14px;letter-spacing:.03em}footer,body.portrait footer{top:40px;right:12px}#langbar{right:12px}}
/* 10-24 さとるん「ヨルムンガンドの章を選んでる時、メニューが選べません」：枠の外まで広げた 3D の板が下のボタンの上にかぶさっていた。板は押せないようにする */
#stagepanel .sp-figure,#stagepanel .sp-figure canvas{pointer-events:none}

/* 10-25 開いたときの読み込みの画面（COSMOGRAPH と同じ作り）。全景が出たら tour.mjs が .hide をつける */
#load{position:fixed;inset:0;z-index:60;will-change:opacity;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#16221e 0%,#04080a 72%);transition:opacity .9s ease}
#load.hide{opacity:0;pointer-events:none}
#load .in{text-align:center;padding:0 16px}
#load .name{font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",Georgia,serif;font-weight:300;font-size:clamp(30px,6.4vw,64px);letter-spacing:.32em;text-indent:.32em;white-space:nowrap;background:linear-gradient(180deg,#fbf0c8 0%,#e2c172 45%,#b08a3c 70%,#e9d08c 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 24px rgba(226,193,114,.45))}
#load .sub{margin:16px 0 0;font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;font-size:12px;letter-spacing:.22em;text-indent:.22em;color:#c9b27a}
html:not(:lang(ja)):not(.menu-l10n) #load .sub,html:not(:lang(ja)):not(.menu-l10n) #load .msg{display:none}
#load .bar{position:relative;width:160px;height:1px;margin:30px auto 0;background:rgba(226,193,114,.18);overflow:hidden}
/* 10-25 さとるん「ローディングの挙動が毎回カクついて見える」：位置（left）ではなく transform で動かす（3D の準備で忙しいあいだも止まらない） */
#load .bar i{position:absolute;top:0;left:0;width:40%;height:100%;background:linear-gradient(to right,rgba(240,214,150,0),rgba(240,214,150,.9),rgba(240,214,150,0));transform:translateX(-100%);will-change:transform;animation:loadslide 1.6s ease-in-out infinite}
@keyframes loadslide{to{transform:translateX(250%)}}
#load .msg{margin:18px 0 0;font-size:11px;letter-spacing:.2em;text-indent:.2em;color:#8f9c94}
/* 10-25 さとるん「言語選択を左に寄せて、コンテンツ枠と被らないように」：スマホの縦持ちは、言葉の選択を左はし・出典を右はしにして、文の枠をその下まで下げる */
@media (orientation:portrait) and (max-width:640px){footer,body.portrait footer{left:12px;right:12px;justify-content:space-between}#stagepanel.vert{top:max(76px,8vh)}.langpick-list{left:0;right:auto}}

/* 10-25 右上の「詳細解説」：出典の左に、出典と同じ大きさで。スマホは言葉の選択を左はし、詳細解説と出典を右はしに */
#detail-link{margin-left:auto}