@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700;900&display=swap');
:root{font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN",system-ui,sans-serif;color:#293c3b;background:#202a2b;--dark:#243233;--cream:#fff9eb;--peach:#fbd8b3;--ink:#314543;--green:#437c70;--muted:#aab5ad}
*{box-sizing:border-box}html,body{margin:0;height:100%;overscroll-behavior:none}html{touch-action:manipulation}body{min-height:100dvh;overflow:hidden;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button{cursor:pointer;touch-action:manipulation}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ffc981;outline-offset:3px}button:disabled{opacity:.48;cursor:default}
.game{height:100dvh;min-height:490px;display:grid;grid-template-rows:65px minmax(0,1fr) 80px;max-width:1550px;margin:auto;background:#243233;position:relative}
.topbar{height:65px;padding:0 clamp(16px,2.4vw,35px);display:flex;align-items:center;justify-content:space-between;gap:16px;background:#263637;color:#f6f3e8;box-shadow:0 2px 12px #17231c24;z-index:20}.back{display:flex;align-items:center;gap:10px}.back-arrow{font-size:39px;font-weight:300;line-height:.9;transform:translateY(-3px);color:#c5dbcd}.back-label{font-size:11px;line-height:1.2;font-weight:900;letter-spacing:.14em}.back-label small{display:block;color:#9cb0a9;font-size:8px;letter-spacing:.14em;margin-top:4px}.top-title{display:flex;flex-direction:column;align-items:center;gap:0;font-weight:900;font-size:16px;letter-spacing:.03em}.top-title small{font-size:9px;font-weight:400;color:#b9c5bc;letter-spacing:.02em}.top-tools{display:flex;gap:7px}.top-tools button{background:#ffffff12;border:1px solid #ffffff27;color:#edf3e7;border-radius:50%;width:34px;height:34px;font-size:19px;font-weight:700}.top-tools button[aria-pressed="true"]{background:#bbd9b9;color:#25443b}
.main{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,370px)}.world{height:100%;position:relative;overflow:hidden;background:#dfb18d;isolation:isolate;touch-action:manipulation}.room{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:50% 50%;pointer-events:none;filter:saturate(.96)}.room-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 55% 16%,#fff5c622,transparent 43%),linear-gradient(0deg,#835d4936 0%,transparent 29%);mix-blend-mode:screen}.world:before{content:"";position:absolute;inset:0;box-shadow:inset 0 3px 30px #5f3b2819;pointer-events:none;z-index:3}.motes{position:absolute;inset:0;z-index:2;pointer-events:none}.motes span{position:absolute;border-radius:50%;width:4px;height:4px;background:#fff8de;box-shadow:0 0 13px 4px #fff8d85e;animation:drift 8s ease-in-out infinite}.motes span:nth-child(1){top:19%;left:22%}.motes span:nth-child(2){top:38%;left:65%;animation-delay:-3s}.motes span:nth-child(3){top:52%;left:18%;animation-delay:-5s}.motes span:nth-child(4){top:26%;left:75%;animation-delay:-2s}.motes span:nth-child(5){top:44%;left:36%;animation-delay:-6s}.motes span:nth-child(6){top:64%;left:83%;animation-delay:-4s}
.scenebar{position:absolute;z-index:15;top:21px;left:21px;right:21px;display:flex;justify-content:space-between;align-items:start;gap:8px;pointer-events:none}.chapter{display:flex;align-items:center;gap:7px;border:1px solid #ffffff8f;background:#fff9eae0;box-shadow:0 6px 27px #81634a21;backdrop-filter:blur(8px);padding:9px 12px 9px 8px;border-radius:7px 20px 20px 7px;color:#706151;font-size:11px;font-weight:900;letter-spacing:.02em}.chapter-spark{color:#ce875f;font-size:20px;line-height:.7}.world-clock{display:flex;gap:7px;align-items:center;border-radius:25px;padding:10px 11px;background:#263c39bb;border:1px solid #fff6dd55;color:#f9edcf;font:800 11px/1 system-ui;backdrop-filter:blur(9px)}.world-clock i{height:8px;width:8px;background:#e4bf76;border-radius:50%;box-shadow:0 0 0 3px #e4bf7630}
.actors{position:absolute;inset:0;z-index:10;pointer-events:none}.actor{position:absolute;left:50%;top:50%;width:clamp(80px,20%,159px);height:auto;aspect-ratio:160/220;transform:translate(-50%,-91%);background:none;border:0;padding:0;pointer-events:auto;transition:left 1.35s cubic-bezier(.22,.65,.28,1),top 1.35s cubic-bezier(.22,.65,.28,1);filter:drop-shadow(2px 10px 5px #593c3452)}.actor>svg{display:block;width:100%;height:100%;transform-origin:50% 90%;animation:breath 2.7s ease-in-out infinite}.actor.walk>svg{animation:walk .32s ease-in-out infinite alternate}.actor.talking>svg{animation:talk .28s ease-in-out infinite alternate}.actor[aria-pressed="true"]>svg{filter:drop-shadow(0 0 9px #fff6e7)}.actor .actor-label{position:absolute;left:50%;bottom:4%;transform:translate(-50%,95%);background:#fff9eaf2;color:#4b594f;border:1px solid #edddc7;box-shadow:0 3px 10px #6c52442b;padding:4px 10px;border-radius:99px;white-space:nowrap;font-size:10px;font-weight:900;min-width:40px}.actor .speech{position:absolute;bottom:89%;left:50%;transform:translateX(-50%);border-radius:13px;background:#fffdf5;border:2px solid #d0bca5;box-shadow:0 5px 15px #88614745;padding:7px 10px;color:#54483f;font-size:11px;font-weight:900;white-space:nowrap;animation:appear .24s ease-out;pointer-events:none}.actor .speech:after{content:"";position:absolute;width:9px;height:9px;left:calc(50% - 4px);bottom:-7px;transform:rotate(45deg);background:#fffdf5;border-right:2px solid #d0bca5;border-bottom:2px solid #d0bca5}
.effects{position:absolute;inset:0;z-index:16;pointer-events:none}.particle{position:absolute;animation:emote 1.4s ease-out forwards;font-size:26px;color:#ef8f86;text-shadow:0 2px #fff8ed}.scene-flash{position:absolute;inset:0;background:#fff6e9;opacity:0;animation:scene-flash .65s ease-out}
.story-intro{position:absolute;top:21%;left:0;right:0;display:grid;place-items:center;gap:4px;pointer-events:none;z-index:20;animation:intro 3.8s ease-in-out forwards;color:#fff7e6;text-shadow:0 2px 20px #494029b6;text-align:center}.story-intro span{font-size:12px;letter-spacing:.1em;font-weight:700}.story-intro b{font-size:clamp(20px,3.3vw,34px);font-weight:900;letter-spacing:-.03em}
.dialog{position:absolute;z-index:25;bottom:21px;left:clamp(12px,3vw,26px);right:clamp(12px,3vw,26px);min-height:135px;border:2px solid #f7e5cd;background:#fffaf0f5;box-shadow:0 14px 44px #65412a4f,0 0 0 5px #ffffff32;border-radius:21px;display:flex;align-items:center;padding:14px 58px 16px 16px;gap:13px;backdrop-filter:blur(9px);transform:translateY(0);transition:opacity .4s,transform .4s}.dialog.off{opacity:0;transform:translateY(25px);pointer-events:none}.dialog-avatar{height:84px;width:70px;flex:0 0 70px;overflow:hidden;background:#eddbc6;border:2px solid #e6ceb3;border-radius:12px;display:grid;place-items:end center;position:relative}.dialog-avatar svg{height:111px;width:80px;max-width:none;position:absolute;top:-3px}.dialog-avatar.narrator{background:#e8e5d1;color:#c08e72;align-items:center;justify-content:center;font-size:32px}.dialog-body{flex:1;min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center}.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}.dialog-name{font-size:12px;font-weight:900;color:#b07562;letter-spacing:.03em}.dialog-progress{font:800 9px monospace;color:#b8a798}.dialog-line{font-size:clamp(12px,1.5vw,16px);color:#37413a;line-height:1.65;font-weight:800;letter-spacing:.02em;margin:0;min-height:42px;max-height:110px;overflow-y:auto}.next{position:absolute;right:12px;bottom:16px;display:grid;place-items:center;border:0;border-radius:50%;background:#426e67;color:#fff8e6;width:39px;height:39px;box-shadow:0 4px 0 #2d534b;font-size:33px;line-height:0}.next span{transform:translateY(-3px)}.next.pulse{animation:nextpulse 1.3s ease-in-out infinite}.next[hidden]{display:none}.choices{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:7px}.choices:empty{display:none}.choice{background:#fff4df;border:1px solid #d7b796;color:#755c4b;border-radius:10px;text-align:left;padding:9px 10px;font-size:11px;font-weight:900;line-height:1.35}.choice:hover{background:#e3f2df;border-color:#8aaa93}.choice:active{transform:scale(.98)}.dialog.has-choices{padding-right:16px}.dialog.has-choices .next{display:none}
.toast{position:absolute;z-index:30;top:76px;left:50%;transform:translate(-50%,-15px);opacity:0;background:#304e48ed;color:#fff7e6;border-radius:99px;padding:11px 17px;font-size:12px;font-weight:800;white-space:nowrap;pointer-events:none;transition:opacity .3s,transform .3s;box-shadow:0 6px 18px #2e423d5c}.toast.show{opacity:1;transform:translate(-50%,0)}
.side{display:flex;flex-direction:column;gap:17px;min-height:0;overflow:auto;background:#f7f3e9;padding:34px 28px;color:#394b45;border-left:1px solid #87765b44}.side-kicker{font:800 9px system-ui;letter-spacing:.15em;color:#a78a67}.side-head h1{font-size:25px;line-height:1.55;letter-spacing:-.06em;margin:13px 0;color:#3b5149}.side-head h1 em{font-style:normal;color:#c68073}.side-head p{font-size:11px;line-height:2;color:#89958a}.mini-panel{padding:17px 15px;background:#fffdf5;border:1px solid #deded1;border-radius:16px;box-shadow:0 7px 25px #5b574d0b}.mini-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.mini-heading b{font-size:12px}.mini-heading span{font:800 8px system-ui;letter-spacing:.13em;color:#9eae9f}.side-residents{display:grid;grid-template-columns:1fr 1fr;gap:7px}.side-resident{border:1px solid #e7e3d8;background:#f9f5ea;border-radius:11px;display:flex;gap:5px;align-items:center;padding:7px 6px;text-align:left;color:#465e52;font-size:12px;font-weight:900}.side-resident svg{height:48px;width:37px;flex:0 0 37px}.side-resident small{font-size:9px;color:#ac9e8a;font-weight:600;display:block}.side-log{font-size:11px;line-height:1.9;color:#718378;display:grid;gap:8px}.side-log div{border-bottom:1px dashed #eee6d8;padding-bottom:7px}.side-log time{font:700 10px monospace;color:#b69a7c;margin-right:8px}.side-foot{margin-top:auto;border-top:1px dashed #d2cabc;padding-top:16px;color:#8b9c8f;font-size:10px;line-height:1.8}.side-foot a{font-weight:900;text-decoration:underline}
.dock{display:flex;align-items:center;justify-content:center;gap:24px;background:#263637;box-shadow:0 -8px 40px #1b2c2961;position:relative;z-index:35;padding:9px 20px max(10px,env(safe-area-inset-bottom))}.dock-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:none;border:0;color:#c1ccc1;min-width:55px;min-height:53px;padding:0 3px;font-size:10px;font-weight:800;letter-spacing:.05em}.dock-icon{font-size:25px;line-height:1.25;color:#e8d9b9}.dock-btn:hover{color:white}.home-btn{transform:translateY(-10px);min-width:67px;min-height:67px;border:5px solid #243638;background:#e7b58b;color:#fef4df;border-radius:50%;box-shadow:0 3px 0 #b88869,0 7px 12px #19292770}.home-btn span{font-size:40px;line-height:1}
dialog{color:#394b45;max-width:100%;border:0;box-shadow:0 12px 80px #0f302b9a}dialog::backdrop{background:#10272288;backdrop-filter:blur(3px)}.sheet{width:min(520px,100%);max-height:min(81dvh,700px);position:fixed;inset:auto 0 0;margin:auto;border-radius:24px 24px 0 0;padding:14px 20px max(25px,env(safe-area-inset-bottom));background:#fffdf4;overflow:auto}.sheet-handle{width:42px;height:5px;border-radius:10px;margin:0 auto 20px;background:#d6d2c5}.sheet-header{display:flex;align-items:start;justify-content:space-between;gap:14px;margin-bottom:20px}.sheet-eyebrow{display:block;font:800 10px system-ui;letter-spacing:.13em;color:#88a193;margin-bottom:5px}.sheet-header h2{font-size:24px;letter-spacing:-.07em;line-height:1.3;margin:0;color:#2d4841}.close{display:grid;place-items:center;background:#f1efe5;border:1px solid #e3decf;color:#7b8d7e;width:37px;height:37px;border-radius:50%;font-size:23px}.sheet-content{max-height:calc(75dvh - 110px);overflow-y:auto;padding-bottom:15px;scrollbar-width:thin}.sheet-card{width:100%;border-radius:14px;border:1px solid #e7e1d3;background:#fdf9ee;padding:12px;margin-bottom:9px;text-align:left;display:flex;align-items:center;gap:13px}.sheet-card svg{width:59px;height:81px;flex:0 0 59px}.sheet-card .card-info{flex:1}.sheet-card b{display:block;font-size:16px;color:#4b5b4d}.sheet-card small{display:block;color:#9b9f8e;font-size:11px;line-height:1.7}.sheet-card i{font-style:normal;font-size:21px;color:#8aaf9e}.panel-actions{display:flex;gap:9px;margin:15px 0}.panel-actions button{flex:1;background:#d9958a;color:#fffefa;border:0;border-radius:12px;padding:12px;font-size:12px;font-weight:900}.panel-actions button.secondary{background:#e9f1e9;color:#55796b}.log-entry{border-bottom:1px dashed #e6e0d2;padding:13px 4px;font-size:13px;line-height:1.7;color:#556558}.log-entry time{display:inline-block;font:800 11px monospace;margin-right:12px;color:#b7947e}.log-entry strong{color:#b9786f}.bond-entry{padding:12px 2px;border-bottom:1px dashed #e6e0d2;display:grid;grid-template-columns:1fr 100px 29px;align-items:center;gap:9px;font-size:12px;font-weight:900;color:#667d6d}.bond-meter{height:8px;border-radius:99px;background:#efe6db;overflow:hidden}.bond-meter>i{display:block;background:linear-gradient(90deg,#ebc2a7,#d98b83);height:100%;border-radius:99px;transition:width .4s}.bond-heart{color:#e0988b;font-size:16px}.sheet-note{font-size:12px;color:#849486;line-height:1.9;margin:13px 2px}
.editor,.help-dialog{width:min(460px,calc(100% - 24px));max-height:calc(100dvh - 25px);overflow:auto;border-radius:22px;background:#fffdf4;padding:22px}.editor form{display:grid;gap:11px}.edit-preview{background:radial-gradient(circle,#e6ddca,#f9f1df);height:135px;border-radius:13px;display:grid;place-items:center;overflow:hidden}.edit-preview svg{width:120px;height:160px}.editor label{font-size:12px;font-weight:900;color:#728a77}.editor input,.editor select{width:100%;border:1px solid #d9e2d6;background:#fff;border-radius:9px;padding:11px 12px;color:#475c51;display:block;font-size:14px;margin-top:5px}.edit-label{color:#728a77;font-weight:900;font-size:12px}.palette{display:flex;gap:9px}.swatch{width:37px;height:37px;border:3px solid white;border-radius:50%;box-shadow:0 0 0 1px #d6d5c9;color:white;font-weight:900}.swatch[aria-checked=true]{box-shadow:0 0 0 3px #568578}.save{padding:14px 16px;width:100%;border:0;border-radius:12px;background:#4f8074;color:#fff;font-size:13px;font-weight:900;margin-top:12px}.help-dialog{padding:30px 23px}.help-dialog h2{font-size:23px;color:#2f5849;line-height:1.5;max-width:320px}.help-dialog p{font-size:13px;line-height:1.9;color:#6b7a70}.help-close{float:right}.reset{display:block;width:100%;background:none;color:#9c887a;border:0;font-size:11px;margin:19px 0 4px;text-decoration:underline}
@keyframes drift{50%{transform:translate(15px,-21px);opacity:.45}}@keyframes breath{50%{transform:translateY(-3px) scale(1.014)}}@keyframes walk{0%{transform:translateY(0) rotate(-3deg)}100%{transform:translateY(-5px) rotate(3deg)}}@keyframes talk{0%{transform:translateY(0) scale(1)}100%{transform:translateY(-3px) scale(1.012)}}@keyframes appear{0%{opacity:0;transform:translate(-50%,7px) scale(.83)}100%{opacity:1;transform:translate(-50%,0) scale(1)}}@keyframes emote{0%{opacity:1;transform:translate(-50%,0) scale(.7)}100%{opacity:0;transform:translate(-50%,-72px) scale(1.2)}}@keyframes intro{0%{opacity:0;transform:translateY(10px)}15%,65%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-12px)}}@keyframes nextpulse{50%{box-shadow:0 4px 0 #2d534b,0 0 0 5px #e4f4d987}}@keyframes scene-flash{20%{opacity:.45}100%{opacity:0}}
@media(min-width:1050px){.game{grid-template-rows:72px minmax(0,1fr) 80px}.world{box-shadow:inset 0 0 100px #583f3952}.side{padding:37px 30px}.dock{gap:33px}}
@media(max-width:790px){.game{grid-template-rows:55px minmax(0,1fr) calc(72px + env(safe-area-inset-bottom))}.topbar{height:55px;padding:0 14px}.top-title{font-size:13px}.top-title small{font-size:8px}.back-label{font-size:10px}.back-label small{font-size:7px}.top-tools button{height:32px;width:32px}.main{grid-template-columns:1fr}.side{display:none}.world{width:100%;max-width:760px;margin:auto}.room{object-position:center center}.scenebar{top:14px;left:12px;right:12px}.chapter{font-size:10px;padding:8px 11px 8px 7px}.world-clock{font-size:10px;padding:9px}.actor{width:clamp(76px,22%,125px)}.dialog{bottom:15px;left:10px;right:10px;min-height:126px;padding:12px 47px 12px 12px;gap:9px;border-radius:16px}.dialog-avatar{width:60px;flex-basis:60px;height:76px}.dialog-avatar svg{width:75px;height:103px}.dialog-line{font-size:13px;min-height:38px}.dialog-name{font-size:11px}.next{height:34px;width:34px;bottom:13px;right:9px;font-size:31px}.choices{grid-template-columns:1fr 1fr;gap:5px}.choice{padding:8px 7px;font-size:10px}.dock{gap:0;justify-content:space-around;padding:6px 5px max(8px,env(safe-area-inset-bottom))}.dock-btn{min-width:0;width:19%;font-size:9px}.dock-icon{font-size:24px}.home-btn{width:64px;min-height:64px;max-width:64px;transform:translateY(-9px)}}
@media(max-width:390px){.top-title small{display:none}.dialog-avatar{flex-basis:52px;width:52px}.dialog-line{font-size:12px}.dialog{padding-left:9px;gap:7px}.dialog.has-choices .dialog-avatar{display:none}.actor{width:22%}.topbar{gap:6px}.story-intro b{font-size:21px}}
@media(max-height:610px){.dialog{min-height:100px;padding-top:7px;padding-bottom:8px}.dialog-avatar{height:65px}.scenebar{top:8px}.scene-intro{display:none}.dock{padding-top:2px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* An original-character cutout is intentionally displayed in front of the room. */
.actor .custom-art{height:100%;width:100%;object-fit:contain;display:block;filter:drop-shadow(0 8px 4px #5537295c);transform-origin:50% 95%}
.actor.walk .custom-art{animation:walk .34s ease-in-out infinite alternate}
.actor.talking .custom-art{animation:talk .28s ease-in-out infinite alternate}
.dialog-avatar .custom-art{height:100%;width:100%;object-fit:contain}
.side-resident .custom-art{height:48px;width:37px;object-fit:contain;flex:0 0 37px}
.sheet-card .custom-art{height:81px;width:59px;object-fit:contain;flex:0 0 59px}
.edit-preview .custom-art{max-width:170px;height:135px;object-fit:contain}
.file-input{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.image-drop{border:2px dashed #b4caba;display:flex!important;flex-direction:column;gap:2px;align-items:center;justify-content:center;padding:15px 10px;background:#f2f8f0;border-radius:12px;text-align:center;cursor:pointer}
.image-drop span{font-size:22px;line-height:1;color:#7b9c86}.image-drop strong{font-size:12px;color:#5f806b}.image-drop small{max-width:300px;line-height:1.6;color:#839587;font-size:10px;font-weight:500}
.image-action{display:flex;justify-content:space-between;gap:10px;align-items:center;color:#8a998b;font-size:10px;line-height:1.5}
.image-action button{color:#b26b62;font-size:10px;font-weight:800;background:none;border:0;text-decoration:underline;white-space:nowrap}