:root{--gold:#f2c46d;--gold-dim:#f2c46d59;--cyan:#9be8ff;--bg1:#0a0518;--bg2:#241238;--text:#f4efe6;--muted:#c9b8e8;--panel:#140a28b8;--danger:#ff7d93;--ok:#7de0a6}*,:before,:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;margin:0}body{background:radial-gradient(circle at 50% 18%, var(--bg2), var(--bg1) 80%) fixed, var(--bg1);color:var(--text);-webkit-user-select:none;user-select:none;overscroll-behavior:none;font-family:Hiragino Mincho ProN,Yu Mincho,Noto Serif JP,serif}#app{max-width:480px;height:100dvh;padding:calc(6px + env(safe-area-inset-top,0px)) 10px calc(10px + env(safe-area-inset-bottom,0px));flex-direction:column;gap:8px;margin:0 auto;display:flex}#topbar{align-items:center;gap:6px;min-height:44px;display:flex}.brand{color:var(--gold);letter-spacing:.18em;font-size:1rem}.spacer{flex:1}button{font:inherit;color:var(--text);border:1px solid var(--gold-dim);cursor:pointer;touch-action:manipulation;background:#f2c46d1f;border-radius:999px;min-width:44px;min-height:44px;padding:10px 20px}button.primary{background:var(--gold);color:#1a0f2e;border-color:var(--gold);font-weight:700}button.ghost{background:0 0}button.icon{width:44px;padding:0;font-size:1.1rem}button:disabled{opacity:.4;cursor:default}button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.screen{background:var(--panel);border:1px solid var(--gold-dim);border-radius:18px;flex-direction:column;flex:1;align-items:center;gap:10px;min-height:0;padding:12px;display:flex;position:relative;overflow:hidden;box-shadow:0 0 34px #5a28a04d}.hidden{display:none!important}h1{letter-spacing:.2em;color:var(--gold);text-shadow:0 0 18px var(--gold-dim), 0 2px 6px #000;margin:0;font-size:2.2rem}h2{color:var(--gold);letter-spacing:.12em;margin:4px 0;font-size:1.4rem}.lead{color:var(--muted);text-align:center;text-shadow:0 1px 4px #000;margin:0;font-size:.9rem;line-height:1.8}.record{color:var(--gold);text-shadow:0 1px 4px #000;min-height:1.2em;font-size:.85rem}.title-bg,.over-bg{z-index:0;background:radial-gradient(circle at 50% 30%,#3a1d52 0%,#150a26 55%,#07030f 100%) 50%/cover;position:absolute;top:0;bottom:0;left:0;right:0}.title-bg.has-image:after,.over-bg.has-image:after{content:"";background:linear-gradient(#05030f1a 0%,#05030f0d 45%,#05030fd9 100%);position:absolute;top:0;bottom:0;left:0;right:0}.title-body,.over-body{z-index:1;flex-direction:column;flex:1;align-items:center;gap:14px;width:100%;display:flex;position:relative}.title-body{justify-content:space-between;padding:7vh 0 8px}.title-buttons{flex-direction:column;gap:10px;width:min(280px,100%);display:flex}.title-buttons .row{gap:10px;display:flex}.title-buttons .row button{flex:1}.over-body{justify-content:center}.hud{width:100%;color:var(--muted);justify-content:space-between;font-size:.85rem;display:flex}.viewwrap{aspect-ratio:3/4;border:1px solid var(--gold-dim);touch-action:none;background:#05030f;border-radius:12px;flex:0 auto;width:100%;min-height:200px;position:relative;overflow:hidden}#view3d{width:100%;height:100%;display:block}.minimap-btn{border:1px solid var(--gold-dim);background:#05030fb8;border-radius:8px;width:96px;height:96px;padding:0;position:absolute;top:8px;right:8px}.minimap-btn canvas{width:100%;height:100%;display:block}.viewmsg{text-align:center;color:var(--gold);text-shadow:0 0 8px #000,0 0 3px #000;pointer-events:none;min-height:1.2em;font-size:.9rem;position:absolute;bottom:10px;left:0;right:0}.pad{justify-content:space-between;align-items:flex-end;gap:8px;width:100%;margin-top:auto;display:flex}.pad.left-hand{flex-direction:row-reverse}.pad-cluster{grid-template-rows:60px 52px;grid-template-columns:repeat(3,68px);gap:6px;display:grid}.pad-cluster [data-move=back]{grid-column:2}.padbtn{border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:0;padding:0;font-size:1.15rem;line-height:1.1;display:flex}.padbtn span{color:var(--muted);font-size:.68rem}.padbtn:active{background:#f2c46d4d}.padaux{border-radius:14px;height:52px}.battle-stage{border:1px solid var(--gold-dim);border-radius:12px;flex-direction:column;flex:1;justify-content:flex-end;align-items:center;width:100%;min-height:150px;display:flex;position:relative;overflow:hidden}.battle-bg{background-position:50% 35%;background-size:cover;position:absolute;top:0;bottom:0;left:0;right:0}.monster{opacity:0;flex:1;justify-content:center;align-items:center;width:100%;min-height:0;transition:opacity .45s;animation:3.4s ease-in-out infinite float;display:flex;position:relative}.monster.shown{opacity:1}.monster svg,.monster img{object-fit:contain;max-width:80%;height:100%;max-height:200px;display:block}.monster.boss svg,.monster.boss img{max-height:250px;transform:scale(1.25)}@keyframes float{0%,to{transform:translateY(-4px)}50%{transform:translateY(6px)}}.battle-stage.hit .monster{animation:.32s shake}.battle-stage .flash{pointer-events:none;animation:.35s forwards fadeout;position:absolute;top:0;bottom:0;left:0;right:0}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-10px)}40%{transform:translate(9px)}60%{transform:translate(-6px)}80%{transform:translate(4px)}}.battle-stage.dying .monster{animation:.7s forwards vanish}@keyframes vanish{to{opacity:0;filter:blur(6px);transform:scale(.4)translateY(-20px)}}.monster-meta{text-shadow:0 1px 4px #000;align-items:center;gap:10px;padding:4px 12px 6px;font-size:.92rem;display:flex;position:relative}.pips{letter-spacing:2px;font-size:.8rem}.spell-head{text-align:center;flex-direction:column;align-items:center;gap:2px;display:flex}#spellName{color:var(--gold);letter-spacing:.1em;font-size:1.1rem}#spellDesc{color:var(--muted);font-size:.8rem}.spell-canvas{aspect-ratio:1;touch-action:none;cursor:crosshair;flex-shrink:0;width:min(100%,44dvh,340px);display:block}.status-line{min-height:1.4em;color:var(--cyan);text-align:center;font-size:.95rem}.status-line.bad{color:var(--danger)}.score-big{color:var(--gold);font-size:2rem}.rank{color:var(--muted);font-size:1rem}.stairs-overlay{z-index:30;background:#000;justify-content:center;align-items:center;animation:1.2s ease-in-out forwards stairs;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.stairs-overlay div{color:var(--gold);letter-spacing:.3em;text-shadow:0 0 16px var(--gold-dim);font-size:1.6rem}@keyframes stairs{0%{opacity:0}25%,75%{opacity:1}to{opacity:0}}.modal{z-index:20;background:#05030fd1;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.modal-body{border:1px solid var(--gold-dim);background:#160a2c;border-radius:16px;flex-direction:column;gap:12px;width:min(440px,100%);max-height:86dvh;padding:18px;display:flex;overflow:auto}.modal-body h3{color:var(--gold);margin:0}.modal-body ul{color:var(--muted);margin:0;padding-left:1.1em;font-size:.86rem;line-height:1.8}.map-body{align-items:center}#fullmap{aspect-ratio:1;background:#05030fe6;border-radius:10px;width:100%}.setting{border:none;justify-content:space-between;align-items:center;gap:12px;min-height:44px;margin:0;padding:0;font-size:.92rem;display:flex}fieldset.setting{flex-wrap:wrap;justify-content:flex-start}fieldset.setting legend{width:100%;margin-bottom:4px}fieldset.setting label{align-items:center;gap:6px;min-height:44px;margin-right:16px;display:flex}.setting input[type=checkbox],.setting input[type=radio]{width:22px;height:22px;accent-color:var(--gold)}.setting input[type=range]{max-width:200px;accent-color:var(--gold);flex:1}table.forms{border-collapse:collapse;width:100%;color:var(--muted);font-size:.82rem}table.forms td{vertical-align:middle;border-top:1px solid #f2c46d26;padding:4px 6px}table.forms svg{width:40px;height:40px;display:block}.damage-flash{pointer-events:none;z-index:15;background:#c8282873;animation:.45s forwards fadeout;position:fixed;top:0;bottom:0;left:0;right:0}@keyframes fadeout{to{opacity:0}}@media (prefers-reduced-motion:reduce){.monster{animation:none}.battle-stage.hit .monster{animation:.32s shake-soft}.damage-flash{background:#c828282e}.battle-stage .flash{opacity:.35}}@keyframes shake-soft{0%,to{transform:translate(0)}50%{transform:translate(-3px)}}.title-logo{text-align:center;flex-direction:column;align-items:center;gap:6px;display:flex}.title-logo h1{letter-spacing:.14em;font-size:2rem;line-height:1.35}.subtitle{color:var(--cyan);letter-spacing:.3em;margin:0;font-size:.9rem}.test-badge{color:var(--muted);border:1px solid var(--gold-dim);border-radius:999px;margin:8px 0 0;padding:2px 12px;font-size:.75rem}.pick-row{flex:1;gap:12px;width:100%;min-height:0;display:flex}.pick{background:#f2c46d0f;border-radius:16px;flex-direction:column;flex:1;align-items:center;gap:4px;min-height:0;padding:8px;display:flex}.pick img{object-fit:contain;opacity:.55;flex:1;width:100%;min-height:0;transition:opacity .2s}.pick.picked{border-color:var(--gold);background:#f2c46d2e}.pick.picked img{opacity:1}.name-row{gap:10px;width:100%;display:flex}.name-row label{flex:1;align-items:center;gap:6px;font-size:.9rem;display:flex}.name-row input{min-width:0;min-height:44px;font:inherit;color:var(--text);border:1px solid var(--gold-dim);-webkit-user-select:text;user-select:text;background:#05030f99;border-radius:10px;flex:1;padding:6px 10px;font-size:1rem}.screen.adv{cursor:pointer;padding:0}.adv-bg{background-position:50%;background-size:cover;position:absolute;top:0;bottom:0;left:0;right:0}.adv-bg-label{letter-spacing:.2em;color:#f4efe6bf;text-shadow:0 1px 4px #000;font-size:.85rem;position:absolute;top:12px;left:14px}.adv-portrait{object-fit:contain;object-position:bottom;filter:drop-shadow(0 0 12px #00000080);pointer-events:none;max-width:110%;height:92%;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.adv-box{border:1px solid var(--gold-dim);background:#0c061ae0;border-radius:14px;min-height:120px;padding:18px 16px 14px;position:absolute;bottom:10px;left:10px;right:10px}.adv-box.system{background:#0a1e28e6;border-color:#9be8ff73}.adv-box.system .adv-text{color:var(--cyan);font-size:.9rem}.adv-name{border:1px solid var(--gold-dim);color:var(--gold);background:#2a1646;border-radius:999px;padding:2px 14px;font-size:.85rem;position:absolute;top:-14px;left:14px}.adv-text{white-space:pre-wrap;font-size:1rem;line-height:1.75}.adv-next{color:var(--gold);font-size:.8rem;animation:1s ease-in-out infinite float;position:absolute;bottom:6px;right:14px}.adv-menu{border:1px solid var(--gold-dim);cursor:default;background:#0c061ae6;border-radius:16px;flex-direction:column;gap:10px;padding:14px;display:flex;position:absolute;bottom:14px;left:14px;right:14px}.adv-menu-title{color:var(--gold);text-align:center;font-size:.9rem}.adv-menu-list{flex-direction:column;gap:8px;display:flex}.pad-side{grid-template-columns:repeat(2,minmax(56px,auto));gap:6px;display:grid}.pad-side .padaux{padding:0 10px;font-size:.85rem}.adv-menu-title{white-space:pre-line;line-height:1.6}.flee{position:absolute;bottom:12px;right:14px}#screenBattle{position:relative}.name-row label{min-width:0}#screenLesson{justify-content:center}.monster-weak{color:var(--gold);text-shadow:0 1px 4px #000;padding-bottom:6px;font-size:.8rem;position:relative}.spell-area{justify-content:center;width:100%;display:flex;position:relative}.spell-choice{background:#0a05188c;flex-direction:column;justify-content:center;gap:10px;padding:0 12%;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.spell-choice button.slot{border-color:var(--cyan);color:var(--cyan)}.adv-menu-list button.spent{opacity:.45}.adv-menu-list button.spent:after{content:" ・もう変化なし";font-size:.75rem}#feedbackText{width:100%;font:inherit;color:var(--text);border:1px solid var(--gold-dim);resize:vertical;-webkit-user-select:text;user-select:text;background:#05030f99;border-radius:10px;padding:10px;font-size:.95rem}.modal-body .row{gap:10px;display:flex}.modal-body .row button{flex:1}