:root{--otto-ink: #2e2442;--otto-ink-soft: #5d506f;--otto-cream: #fff8dc;--otto-paper: #fffdf0;--otto-panel: rgba(255, 250, 222, .9);--otto-blue-panel: rgba(239, 250, 255, .9);--otto-gold: #f6c85f;--otto-mint: #77d2b9;--otto-coral: #ee7f6d;--otto-grass: #a8df72;--otto-lilac: #bca7ff;--otto-pink: #ff9ac7;--otto-sky: #87cfe3;--otto-border: 3px solid var(--otto-ink);--otto-radius: 10px;--otto-shadow: 0 7px 0 var(--otto-ink), 0 18px 32px rgba(46, 36, 66, .22);--otto-soft-shadow: 0 4px 0 rgba(46, 36, 66, .34), 0 13px 22px rgba(46, 36, 66, .18);--otto-press-shadow: 0 2px 0 rgba(46, 36, 66, .36), 0 8px 16px rgba(46, 36, 66, .16);--otto-motion: .18s cubic-bezier(.2, .8, .2, 1);font-family:Trebuchet MS,Segoe UI,Arial,sans-serif;color:var(--otto-ink);background:#6fb7c7;text-rendering:optimizeLegibility}*{box-sizing:border-box}html,body,#game-root,.otto-rpg-shell{width:100%;height:100%;margin:0}body{min-width:320px;min-height:100vh;overflow:hidden}button,input,textarea{font:inherit}button{border:0;cursor:pointer}.otto-rpg-shell{position:relative;display:grid;place-items:center;background:linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px) 0 0 / 54px 54px,linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px) 0 0 / 54px 54px,radial-gradient(circle at 15% 18%,rgba(255,248,179,.65),transparent 22rem),radial-gradient(circle at 82% 24%,rgba(119,210,185,.48),transparent 20rem),linear-gradient(145deg,#72c7d1,#f8d46b 52%,#f09170)}.game-root{position:absolute;inset:0}.game-root canvas{display:block;image-rendering:auto}.hud-root{position:absolute;left:clamp(.75rem,2vw,1.25rem);top:clamp(.75rem,2vw,1.25rem);width:min(22rem,calc(100vw - 1.5rem));z-index:10;pointer-events:none}.system-panel{pointer-events:auto;border:var(--otto-border);border-radius:var(--otto-radius);background:linear-gradient(180deg,rgba(255,255,255,.42),transparent 2.3rem),var(--otto-panel);box-shadow:var(--otto-shadow);-webkit-backdrop-filter:blur(7px) saturate(1.08);backdrop-filter:blur(7px) saturate(1.08);padding:.85rem;transition:transform var(--otto-motion),box-shadow var(--otto-motion)}.system-panel:hover{transform:translateY(-1px);box-shadow:0 8px 0 var(--otto-ink),0 20px 34px #2e24423d}.system-panel__top{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.65rem}.system-panel__title{margin:0;font-size:1rem;line-height:1.1}.system-panel__mood{margin:.15rem 0 0;color:var(--otto-ink-soft);font-size:.73rem;font-weight:800;line-height:1.2}.mode-badge,.status-chip,.quest-status,.room-pill{display:inline-flex;align-items:center;min-height:1.45rem;border:2px solid var(--otto-ink);border-radius:6px;padding:.12rem .45rem;background:#fff;color:var(--otto-ink);font-size:.72rem;font-weight:800;letter-spacing:0;text-transform:uppercase;white-space:nowrap;box-shadow:0 2px #2e244238}.mode-badge[data-mode=mock]{background:var(--otto-gold)}.mode-badge[data-mode=demo]{background:linear-gradient(180deg,#fffbcc,var(--otto-gold))}.mode-badge[data-mode=live]{background:var(--otto-mint)}.system-panel__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem}.stat-tile{position:relative;min-width:0;border:2px solid rgba(46,36,66,.72);border-radius:6px;background:linear-gradient(135deg,rgba(255,255,255,.66),transparent 42%),var(--otto-paper);padding:.4rem;transition:transform var(--otto-motion),box-shadow var(--otto-motion),background-color var(--otto-motion)}.stat-tile:before{display:inline-grid;width:1.05rem;height:1.05rem;place-items:center;float:right;border:2px solid rgba(46,36,66,.72);border-radius:999px;background:var(--otto-gold);color:var(--otto-ink);content:"";font-size:.54rem;font-weight:900;line-height:1}.stat-tile[data-icon=moon]:before{background:var(--otto-lilac)}.stat-tile[data-icon=spark]:before,.stat-tile[data-icon=glow]:before{background:var(--otto-gold)}.stat-tile[data-icon=signal]:before{background:var(--otto-coral)}.stat-tile[data-icon=seal]:before{background:var(--otto-pink)}.stat-tile[data-icon=crew]:before,.stat-tile[data-icon=avatar]:before{background:var(--otto-mint)}.stat-tile[data-icon=quests]:before,.stat-tile[data-icon=room]:before{background:var(--otto-sky)}.stat-tile[data-icon=trophy]:before{background:var(--otto-grass)}.stat-tile:hover{transform:translateY(-1px);box-shadow:0 3px #2e24422e}.stat-label{display:block;color:#65567c;font-size:.68rem;font-weight:700;text-transform:uppercase}.stat-value{display:block;overflow:hidden;color:var(--otto-ink);font-size:1rem;font-weight:900;line-height:1.1;text-overflow:ellipsis;white-space:nowrap}.system-panel__hint{margin:.65rem 0 0;color:#5d506f;font-size:.76rem;line-height:1.25}.system-panel__hint--next{border:2px solid rgba(246,200,95,.62);border-radius:8px;background:#fffbcc94;padding:.38rem .48rem;color:#3b3150;font-weight:900}.system-panel__hint--daily{border-left:4px solid var(--otto-mint);background:#effaff8f;padding:.34rem .48rem;font-weight:800}.system-panel__hint--presence{border-left:4px solid var(--otto-lilac);background:#fffdf094;padding:.34rem .48rem;font-weight:800}.quest-root{position:absolute;right:clamp(.75rem,2vw,1.25rem);top:clamp(.75rem,2vw,1.25rem);width:min(24rem,calc(100vw - 1.5rem));z-index:12;pointer-events:none}.quest-log{display:none;max-height:min(78vh,42rem);overflow:auto;border:var(--otto-border);border-radius:var(--otto-radius);background:linear-gradient(180deg,rgba(255,255,255,.42),transparent 2rem),var(--otto-blue-panel);box-shadow:var(--otto-shadow);-webkit-backdrop-filter:blur(7px) saturate(1.08);backdrop-filter:blur(7px) saturate(1.08);padding:.85rem;pointer-events:auto}.quest-log.is-open{display:block;animation:panel-pop .17s ease-out}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.7rem}.panel-header h2,.panel-header h3{margin:0;font-size:1rem}.panel-header h2:before,.panel-header h3:before{display:inline-block;width:.7rem;height:.7rem;margin-right:.38rem;border:2px solid var(--otto-ink);border-radius:999px;background:var(--otto-gold);box-shadow:inset 0 2px #ffffff8c;content:"";vertical-align:-.04rem}.icon-button{display:inline-grid;width:2rem;height:2rem;place-items:center;border:2px solid var(--otto-ink);border-radius:6px;background:#fffbcc;color:var(--otto-ink);font-weight:900;line-height:1;transition:transform var(--otto-motion),box-shadow var(--otto-motion),background-color var(--otto-motion)}.quest-list{display:grid;gap:.55rem}.quest-card{border:2px solid var(--otto-ink);border-radius:var(--otto-radius);background:linear-gradient(90deg,rgba(246,200,95,.18),transparent 35%),var(--otto-paper);padding:.65rem;box-shadow:0 3px #2e24423d;transition:transform var(--otto-motion),box-shadow var(--otto-motion)}.quest-card:hover{transform:translateY(-1px);box-shadow:0 4px #2e24423d}.quest-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem}.quest-title{margin:0;font-size:.95rem;line-height:1.15}.quest-meta,.empty-copy{margin:.35rem 0 0;color:#5d506f;font-size:.78rem;line-height:1.3}.quest-status[data-status=active]{background:var(--otto-mint)}.quest-status[data-status="waiting approval"]{background:var(--otto-gold)}.quest-status[data-status=completed]{background:var(--otto-grass)}.quest-status[data-status=failed]{background:var(--otto-coral)}.dialogue-root,.action-root{position:absolute;left:50%;bottom:clamp(.75rem,3vw,1.4rem);z-index:20;width:min(48rem,calc(100vw - 1.5rem));transform:translate(-50%);pointer-events:none}.dialogue-box,.action-panel{display:none;border:var(--otto-border);border-radius:var(--otto-radius);background:linear-gradient(180deg,rgba(255,255,255,.5),transparent 2rem),var(--otto-panel);box-shadow:var(--otto-shadow);-webkit-backdrop-filter:blur(7px) saturate(1.08);backdrop-filter:blur(7px) saturate(1.08);pointer-events:auto}.dialogue-box.is-open,.action-panel.is-open{display:block;animation:panel-rise .18s ease-out}.dialogue-box__speaker{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:2px solid rgba(46,36,66,.22);padding:.75rem .9rem .55rem}.dialogue-box__speaker h2{margin:0;font-size:1.05rem}.dialogue-box__body{padding:.8rem .9rem .95rem}.dialogue-text{margin:0 0 .75rem;color:#3b3150;font-size:.94rem;line-height:1.45}.choice-grid,.action-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.5rem}.choice-button,.action-button,.form-button{min-height:2.35rem;border:2px solid var(--otto-ink);border-radius:8px;background:linear-gradient(180deg,#fff,#fff7d8);color:var(--otto-ink);padding:.45rem .7rem;font-weight:800;text-align:left;box-shadow:0 3px #2e244242;transition:transform var(--otto-motion),box-shadow var(--otto-motion),background-color var(--otto-motion),filter var(--otto-motion)}.choice-button:hover,.choice-button:focus-visible,.action-button:hover,.action-button:focus-visible,.form-button:hover,.form-button:focus-visible,.icon-button:hover,.icon-button:focus-visible{outline:3px solid var(--otto-gold);outline-offset:1px;transform:translateY(-1px);filter:saturate(1.08)}.choice-button:active,.action-button:active,.form-button:active,.icon-button:active{transform:translateY(2px);box-shadow:var(--otto-press-shadow)}.action-panel{padding:.85rem;background:linear-gradient(180deg,rgba(255,255,255,.5),transparent 2rem),var(--otto-blue-panel)}.action-panel__body{display:grid;gap:.65rem}.task-form{display:grid;gap:.55rem}.task-form label{display:grid;gap:.24rem;color:#3b3150;font-size:.75rem;font-weight:800;text-transform:uppercase}.task-form input,.task-form textarea{width:100%;border:2px solid var(--otto-ink);border-radius:6px;background:var(--otto-paper);color:var(--otto-ink);padding:.5rem .6rem;resize:vertical}.result-list{display:grid;max-height:min(46vh,24rem);gap:.5rem;overflow:auto}.result-item{border:2px solid rgba(46,36,66,.65);border-radius:8px;background:linear-gradient(90deg,rgba(119,210,185,.14),transparent 42%),#fff;padding:.55rem;transition:transform var(--otto-motion),box-shadow var(--otto-motion)}.result-item:hover{transform:translateY(-1px);box-shadow:0 3px #2e244229}.result-item h4{margin:0 0 .25rem;font-size:.9rem}.result-item p{margin:0;color:#5d506f;font-size:.78rem;line-height:1.35}.result-item__preview{display:block;width:min(100%,14rem);max-height:9rem;margin-top:.55rem;border:2px solid rgba(46,36,66,.66);border-radius:8px;background:linear-gradient(45deg,rgba(46,36,66,.08) 25%,transparent 25% 75%,rgba(46,36,66,.08) 75%) 0 0 / 18px 18px,linear-gradient(45deg,transparent 25%,rgba(46,36,66,.08) 25% 75%,transparent 75%) 9px 9px / 18px 18px,#fffdf0;object-fit:contain;padding:.4rem;box-shadow:0 3px #2e24422e}.room-title-root{position:absolute;left:50%;top:1.05rem;z-index:14;transform:translate(-50%);pointer-events:none}.room-title-card{opacity:0;transform:translateY(-.5rem);transition:opacity .18s ease,transform .18s ease;border:var(--otto-border);border-radius:var(--otto-radius);background:#fffdf0e8;-webkit-backdrop-filter:blur(6px) saturate(1.08);backdrop-filter:blur(6px) saturate(1.08);box-shadow:var(--otto-soft-shadow);padding:.55rem .9rem;text-align:center}.room-title-card.is-visible{opacity:1;transform:translateY(0);animation:room-card-glow .42s ease-out}.room-title-card h2{margin:0;font-size:1rem}.room-title-card p{margin:.18rem 0 0;color:#5d506f;font-size:.76rem}.toast-root{position:absolute;left:50%;top:clamp(5rem,12vh,7rem);z-index:30;width:min(26rem,calc(100vw - 1.5rem));transform:translate(-50%);pointer-events:none}.onboarding-root{position:absolute;inset:0;z-index:35;pointer-events:none}.intro-overlay{position:absolute;inset:0;display:none;place-items:center;padding:1rem;background:#2e244257;pointer-events:auto}.intro-overlay.is-open{display:grid;animation:panel-pop .18s ease-out}.intro-card{width:min(34rem,calc(100vw - 2rem));border:var(--otto-border);border-radius:var(--otto-radius);background:linear-gradient(180deg,rgba(255,255,255,.52),transparent 2.6rem),var(--otto-panel);box-shadow:var(--otto-shadow);padding:1rem}.intro-card__eyebrow,.guide-chip__badge{display:inline-flex;align-items:center;min-height:1.35rem;border:2px solid var(--otto-ink);border-radius:6px;background:var(--otto-gold);padding:.08rem .45rem;color:var(--otto-ink);font-size:.68rem;font-weight:900;text-transform:uppercase}.intro-card h2{margin:.55rem 0 0;font-size:clamp(1.35rem,4vw,2rem)}.intro-card p{margin:.55rem 0 0;color:#3b3150;font-size:.94rem;line-height:1.45}.intro-steps{display:grid;gap:.4rem;margin:.85rem 0;padding:0;list-style:none}.intro-steps li{border:2px solid rgba(46,36,66,.48);border-radius:8px;background:#fffdf0b8;padding:.46rem .6rem;color:#3b3150;font-size:.86rem;font-weight:800}.intro-start{width:100%;text-align:center}.guide-chip{position:absolute;left:50%;bottom:clamp(5.2rem,13vh,7.25rem);display:none;width:min(25rem,calc(100vw - 1.5rem));transform:translate(-50%);border:2px solid var(--otto-ink);border-radius:var(--otto-radius);background:linear-gradient(180deg,rgba(255,255,255,.46),transparent 1.6rem),#fffdf0f5;box-shadow:var(--otto-soft-shadow);padding:.55rem .7rem}.guide-chip.is-visible{display:block;animation:toast-drop .18s ease-out}.guide-chip p{margin:.35rem 0 0;color:#3b3150;font-size:.82rem;font-weight:800;line-height:1.3}.toast{display:none;border:2px solid var(--otto-ink);border-radius:var(--otto-radius);background:linear-gradient(90deg,var(--otto-mint),#a8df72);box-shadow:var(--otto-soft-shadow);padding:.55rem .75rem;color:#2e2442;font-size:.82rem;font-weight:800}.toast.is-visible{display:block;animation:toast-drop .18s ease-out}@keyframes panel-rise{0%{opacity:0;transform:translateY(.55rem) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes panel-pop{0%{opacity:0;transform:translateY(-.35rem) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toast-drop{0%{opacity:0;transform:translateY(-.4rem)}to{opacity:1;transform:translateY(0)}}@keyframes room-card-glow{0%{box-shadow:0 2px #2e244257,0 0 #f6c85f00}60%{box-shadow:0 4px #2e244257,0 0 22px #f6c85f6b}to{box-shadow:var(--otto-soft-shadow)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:1ms!important}}@media(max-width:760px){.hud-root{width:min(18.5rem,calc(100vw - 1.5rem))}.system-panel__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.quest-root{top:auto;bottom:8.3rem}.quest-log{max-height:42vh}.dialogue-root,.action-root{bottom:.75rem}}