*{box-sizing:border-box}html,body{margin:0;height:100%;background:#05060d;color:#f4f0e8;overflow:hidden}body{font-family:DotGothic16,monospace;-webkit-font-smoothing:none}button{font:inherit}.stage{height:100vh;height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.screen{position:relative;width:512px;height:448px;transform:scale(var(--k, 1));transform-origin:top left;margin-right:calc(var(--sw) - 512px);margin-bottom:calc(var(--sh) - 448px);flex:none;overflow:hidden;background:#000;box-shadow:0 0 0 2px #1a1c30,0 10px 40px #000}.screen canvas{position:absolute;inset:0;width:512px;height:448px;image-rendering:pixelated}#ui,#fx{position:absolute;inset:0}#dof,#glow{position:absolute;inset:0;width:512px;height:448px;pointer-events:none}#glow{image-rendering:auto;filter:blur(6px) brightness(.75) contrast(3.2) saturate(1.5);mix-blend-mode:screen;opacity:.26}#dof{image-rendering:auto;filter:blur(1.8px) saturate(1.1);-webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 24%,transparent 76%,#000 100%);mask-image:linear-gradient(to bottom,#000 0%,transparent 24%,transparent 76%,#000 100%)}#vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 75% 70% at 50% 48%,transparent 55%,rgba(4,2,16,.55) 100%)}.screen[data-fx=battle] #dof,.screen[data-fx=none] #dof,.screen[data-fx=none] #glow{display:none}.screen[data-fx=battle] #glow{opacity:.45}.screen[data-fx=title] #glow{opacity:.55}.face{position:absolute;left:4px;bottom:120px;width:176px;height:176px;object-fit:cover;object-position:top;pointer-events:none;filter:drop-shadow(0 4px 0 #05060d) drop-shadow(0 0 10px rgba(0,0,0,.6));-webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent 100%);mask-image:linear-gradient(to bottom,#000 78%,transparent 100%)}.face.in{animation:facein .25s ease-out}@keyframes facein{0%{opacity:0;translate:-14px 0}to{opacity:1;translate:0 0}}.msg.withface{padding-left:176px}.msg.withface .tag{left:182px}#fx{pointer-events:none}#fade{position:absolute;inset:0;background:#000;opacity:1;pointer-events:none}.shake{animation:shake .28s linear}.shake-big{animation:shake .6s linear}@keyframes shake{0%,to{translate:0 0}20%{translate:-6px 2px}40%{translate:5px -2px}60%{translate:-4px 1px}80%{translate:3px 0}}.win{position:absolute;padding:10px 16px;font-size:18px;line-height:28px;color:#f6f2ea;white-space:pre-wrap;background:linear-gradient(180deg,#1a2468,#0e1440);border:3px solid #f4f0e8;border-radius:6px;box-shadow:0 0 0 2px #0a0e2a,0 0 0 4px #8a7a4a,0 4px 0 4px #05060d;text-shadow:2px 2px 0 #05082a}.msg{height:132px}.pstat,.stats,.party,.names,.info,.namebox,.credits{white-space:normal}.info{white-space:pre-line}.msg .tag{position:absolute;top:-18px;left:14px;padding:0 10px;font-size:15px;line-height:24px;background:#8a2a3a;border:2px solid #f4f0e8;border-radius:4px;box-shadow:0 0 0 2px #0a0e2a}.msg .txt{min-height:84px}.msg .more{position:absolute;right:16px;bottom:6px;animation:blink .8s steps(1) infinite;font-size:14px;color:#f0d070}.msg.log .line{height:28px;overflow:hidden}@keyframes blink{50%{opacity:0}}.choose .ttl{font-size:14px;color:#f0d890;margin:-4px 0 2px}.choose .opt{position:relative;padding-left:22px;display:flex;justify-content:space-between;gap:12px}.choose .opt.off{color:#6a6a98}.choose .opt.sel:before{content:"▶";position:absolute;left:0;font-size:14px;color:#f0d070;animation:blink .9s steps(1) infinite}.choose .opt .pr{color:#f0d890}.choose .opt.off .pr{color:#6a6a98}.choose.grid{display:grid;column-gap:4px}.choose.grid .ttl{grid-column:1 / -1}.choose.grid .opt{padding-left:18px;white-space:nowrap;line-height:27px}.choose.grid .opt:has(.wide){grid-column:span 2}.gold,.info{font-size:16px}.info .eqp{display:flex;flex-wrap:wrap;gap:4px 18px}.info .off,.eqp .off{color:#6a6a98}.up{color:#8af08a;font-weight:400}.down{color:#f08a8a;font-weight:400}.names .row{display:flex;justify-content:space-between;line-height:28px}.pstat{padding:6px 10px;font-size:15px;line-height:22px;transition:transform .1s}.pstat .nm{display:flex;justify-content:space-between;color:#fff}.pstat .nm span{font-size:13px;color:#c8c0e8}.pstat .row{display:flex;align-items:center;gap:6px;white-space:pre}.pstat .row b{font-weight:400;color:#c8c0e8;width:12px}.pstat .bar{flex:1;height:6px;background:#05082a;border:1px solid #3a4080}.pstat .bar i{display:block;height:100%;background:#6ae06a}.pstat .bar.mp i{background:#6ab0f0}.pstat.act{border-color:#f0d070;transform:translateY(4px)}.pstat.low{color:#ffc060}.pstat.low .bar.hp i{background:#f0a040}.pstat.dead{color:#f06060;filter:grayscale(.6)}.pstat.dead .bar.hp i{width:0!important}.party .row{display:flex;gap:16px;line-height:26px;font-size:16px;white-space:pre}.party .row .nm{min-width:80px}.party .row.dead{color:#f06060}.party .row.gold{justify-content:space-between;color:#f0d890}.stats .row{display:flex;gap:24px}.stats .row span{min-width:130px}.stats .row.small{font-size:14px;color:#c8c0e8}.pop{position:absolute;font-size:26px;color:#fff;text-shadow:2px 2px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000;animation:pop .9s ease-out forwards;white-space:nowrap}.pop.fdmg{color:#fff}.pop.crit{color:#ffe040;font-size:32px}.pop.dmg{color:#ff7070}.pop.heal{color:#8af08a}@keyframes pop{0%{transform:translateY(8px) scale(.6);opacity:0}15%{transform:translateY(-14px) scale(1.15);opacity:1}30%{transform:translateY(-8px) scale(1)}75%{opacity:1}to{transform:translateY(-22px);opacity:0}}.banner{position:absolute;left:50%;top:28px;translate:-50% 0;padding:6px 28px;font-size:20px;letter-spacing:.2em;color:#fff8e0;background:linear-gradient(90deg,transparent,rgba(10,14,50,.85) 18%,rgba(10,14,50,.85) 82%,transparent);text-shadow:2px 2px 0 #000;animation:banner 2.4s ease forwards;white-space:nowrap}@keyframes banner{0%{opacity:0;translate:-50% -8px}15%,75%{opacity:1;translate:-50% 0}to{opacity:0}}.namebox{text-align:center}.namebox .ttl{font-size:15px;color:#f0d890}.namebox .nm{font-size:30px;line-height:44px;letter-spacing:.15em}.title{position:absolute;inset:0;text-align:center;padding-top:168px;text-shadow:3px 3px 0 #000}.title .sub{font-size:14px;color:#a8a8e0;letter-spacing:.4em}.title h1{margin:4px 0 0;font-size:60px;font-weight:400;letter-spacing:.12em;color:#fff0b8;text-shadow:0 0 18px rgba(255,220,120,.55),4px 4px 0 #2a1430,-2px -2px 0 #2a1430}.title .ch{margin-top:6px;font-size:16px;color:#e8d8f8;letter-spacing:.25em}.title .press{margin-top:74px;font-size:18px;animation:blink 1.2s steps(1) infinite}.card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#f8f0d8;letter-spacing:.3em;text-shadow:0 0 14px rgba(255,220,140,.4)}.card div{font-size:20px;color:#c8b8e8}.card h2{margin:12px 0 0;font-size:38px;font-weight:400}.credits{position:absolute;inset:0;overflow:hidden;color:#fff8e8;text-shadow:2px 2px 0 #10082a;text-align:center}.credits .roll{position:absolute;left:0;right:0;top:448px;animation:roll 11s linear forwards}.credits h2{font-size:32px;font-weight:400;margin:0;letter-spacing:.15em}.credits h3{font-size:24px;font-weight:400;margin:0 0 12px;color:#fff0b8}.credits .done{font-size:22px;color:#f0d890;letter-spacing:.3em}.credits p{margin:6px;font-size:20px}.credits .sp{height:34px}.credits .small{font-size:15px;opacity:.85}@keyframes roll{to{top:70px}}.help{margin:0;font-size:13px;color:#7880a8}.pad{display:none;width:min(100vw,520px);justify-content:space-between;align-items:center;padding:0 20px}.dpad{position:relative;width:140px;height:140px}.dpad button,.ab button{position:absolute;width:48px;height:48px;border-radius:10px;border:2px solid #3a4070;background:#1a2050;color:#c8d0f0;font-size:18px;touch-action:none}.dpad .u{left:46px;top:0}.dpad .d{left:46px;bottom:0}.dpad .l{left:0;top:46px}.dpad .r{right:0;top:46px}.ab{position:relative;width:140px;height:110px}.ab button{width:60px;height:60px;border-radius:50%;font-size:22px;background:#6a1e2a;border-color:#a83a4a;color:#fff}.ab .a{right:0;top:0}.ab .b{left:0;bottom:0}@media(pointer:coarse){.pad{display:flex}.help{display:none}}
