:root{--bg:#211f2d;--panel:#302b3d;--line:#554a65;--text:#e7e0f0;--muted:#b3a6c2;--pink:#edb9d3;--mint:#abd9c5}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px Arial,'Noto Sans KR',sans-serif;background-image:radial-gradient(#78628019 1px,transparent 1px);background-size:7px 7px}button,select{font:inherit}button{cursor:pointer;border:1px solid #766080;border-radius:5px;background:#44354f;color:var(--text);padding:10px 13px}button:hover:not(:disabled){background:#60456b;border-color:var(--pink)}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,canvas:focus-visible,select:focus-visible{outline:3px solid var(--mint);outline-offset:3px}header{display:flex;align-items:center;gap:22px;padding:18px 32px;background:#292533;border-bottom:1px solid var(--line)}header>span:nth-child(2){font-size:11px;color:var(--muted)}.brand{font-size:18px;letter-spacing:1px;font-weight:bold}.brand i{font-weight:normal;font-family:Georgia;color:var(--pink)}header button{margin-left:auto;background:none;font-size:11px;padding:7px 10px}main{max-width:1280px;margin:auto;padding:30px}.topline{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.kicker{color:var(--pink);font-size:9px;letter-spacing:2px}h1{font-size:27px;margin:8px 0 0}.clockbox{display:flex;align-items:center;gap:16px;background:#383043;border:1px solid #66516c;border-radius:7px;padding:12px 17px}.clockbox>span{font-size:11px;color:var(--pink)}.clockbox strong{font-size:26px;font-variant-numeric:tabular-nums}.clockbox small{font-size:10px;color:var(--muted)}.layout{display:grid;grid-template-columns:minmax(500px,1fr) 300px;gap:20px}.world-window,.panel{background:var(--panel);border:1px solid #66566f;border-radius:8px;overflow:hidden;box-shadow:0 5px #15121e44}.bar{height:36px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#3b3246;font:11px monospace;color:#d4c6df}.canvas-wrap{position:relative;background:#1d202c;padding:10px}#world{display:block;width:100%;height:auto;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none}#location-hint{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:7px 11px;border:1px solid #736379aa;border-radius:4px;background:#241e32d9;color:#ecd7ed;font-size:11px;pointer-events:none}.world-toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px}.world-toolbar button{background:#73516d;color:#ffe4f2;font-size:12px}.world-toolbar span{font-size:9px;color:var(--muted)}.message{margin:4px 16px 16px;padding:14px;border-left:3px solid var(--pink);background:#3a3043}.message b{color:var(--pink);font-size:11px}.message p{font-size:12px;line-height:1.7;margin:8px 0 0}.destinations{display:flex;gap:7px;flex-wrap:wrap;padding:0 16px}.destinations button{font-size:10px;padding:7px 9px;background:#342c40;color:var(--muted)}.rules{font-size:10px;line-height:1.8;color:var(--muted);padding:0 16px}.touch-pad{display:none;text-align:center;padding:0 0 12px;touch-action:none}.touch-pad button{min-width:48px;padding:12px;margin:2px;user-select:none}.touch-pad>button{display:block;margin:0 auto}.panel+.panel{margin-top:17px}.profile{padding:18px}.money{display:flex;gap:25px;padding-bottom:18px;margin-bottom:17px;border-bottom:1px dashed var(--line)}.money span{font-size:10px;color:var(--muted)}.money strong{display:block;font-size:27px;margin-top:7px;color:var(--text);font-family:Georgia}.stat{margin:12px 0}.stat-label{display:flex;justify-content:space-between;font-size:11px}.track{height:6px;background:#4a4156;border-radius:4px;overflow:hidden;margin-top:7px}.track i{display:block;height:100%;transition:width .3s}.health-box{border:1px solid #596c65;background:#2d3a38;padding:11px;margin-top:20px;border-radius:5px;font-size:11px;line-height:1.7}.health-box.warning{border-color:#c58b9f;background:#4d3041}.health-box strong{display:block;color:var(--pink)}.sleep-info{font-size:10px;line-height:1.9;color:var(--muted);padding-top:14px}#channel{padding:16px}#channel h3{font-size:12px;margin:0 0 9px;color:var(--pink)}#channel p{font-size:10px;color:var(--muted);line-height:1.7}.badges{display:flex;gap:5px;flex-wrap:wrap}.badges span{padding:5px 6px;border:1px solid #5e506c;border-radius:4px;color:#978aa7;font-size:9px}.badges .won{color:#ebcc9a;border-color:#9f8255}.focus-select{width:100%;background:#2d2736;color:var(--text);border:1px solid #71607d;border-radius:4px;padding:9px;margin:6px 0 11px}.bottom{margin-top:22px}.bottom .bar button{padding:4px 9px;font-size:10px;background:none}#log{padding:16px;max-height:180px;overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:13px}.log-item{font-size:11px;border-left:2px solid #92749c;padding-left:10px;line-height:1.7}.log-item small{color:#aa93b8;font-size:9px}.log-item p{margin:2px 0}.log-item em{font-style:normal;color:var(--mint);font-size:10px}footer{display:flex;justify-content:space-between;gap:20px;font-size:9px;color:#9687a4;padding:25px 0}.primary{background:var(--pink);color:#322638;font-weight:bold;border:0}.primary:hover:not(:disabled){background:#f2cde1;color:#322638}dialog{width:min(500px,94vw);max-height:93vh;overflow-y:auto;background:#30263b;color:var(--text);border:1px solid #a58aaf;border-radius:10px;padding:27px;box-shadow:0 20px 80px #0007}dialog::backdrop{background:#14101edb;backdrop-filter:blur(5px)}dialog h2{font-size:24px;margin:14px 0}dialog p,dialog li{font-size:12px;line-height:1.85;color:#cbbcd6}dialog label{display:block;font-size:12px;color:var(--pink);margin:15px 0}dialog select{display:block;width:100%;padding:11px;background:#261f31;color:var(--text);border:1px solid #7b6488;border-radius:4px;margin-top:7px}#modal-close{position:absolute;top:8px;right:10px;background:none;border:0;font-size:23px;padding:4px;color:var(--muted)}#modal-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}#modal-buttons button{flex:1}#progress{text-align:center;width:min(590px,94vw)}#pixels{width:min(100%,320px);height:auto;image-rendering:pixelated;border:1px solid #776080}.progress-meta{display:flex;justify-content:space-between;font-size:11px;margin:18px 0 9px;color:var(--muted)}.progress-meta strong{color:var(--pink)}progress{width:100%;height:7px;accent-color:var(--pink)}.reduce{font-size:10px;display:flex;align-items:center;justify-content:center;gap:6px}.live-choices{display:flex;gap:9px}.live-choices button{flex:1;font-size:12px}.live-meter{font-size:11px;color:var(--mint);margin-top:12px}.effects{background:#3c3046;border:1px solid #6c527b;padding:13px;color:var(--mint);font-size:12px;line-height:1.7}.danger-text{color:#ffc3d0!important}@media(max-width:950px){.layout{grid-template-columns:1fr}aside{display:grid;grid-template-columns:1fr 1fr;gap:15px}.panel+.panel{margin-top:0}.clockbox small{display:none}.touch-pad{display:block}}@media(max-width:600px){header{padding:15px;gap:10px}.brand{font-size:12px}header>span:nth-child(2){display:none}main{padding:20px 12px}.topline{gap:8px}h1{font-size:20px}.kicker{font-size:7px}.clockbox{padding:9px;gap:8px}.clockbox strong{font-size:21px}.clockbox>span{font-size:9px}.layout{gap:13px}.canvas-wrap{padding:3px}#location-hint{font-size:8px;padding:5px;bottom:8px}.world-toolbar{padding:10px;gap:8px}.world-toolbar button{font-size:10px}.world-toolbar span{font-size:8px}aside{display:block}.panel+.panel{margin-top:13px}#log{grid-template-columns:1fr}footer{font-size:8px;flex-direction:column;gap:8px}.live-choices{flex-direction:column}dialog{padding:22px 18px}#pixels{max-height:170px;width:auto;max-width:100%}.destinations button{flex:1;white-space:nowrap}.rules{font-size:9px}}

#studio-art{display:block;width:180px;max-width:45%;height:auto;margin:0 auto 10px;border:1px solid #83698d;border-radius:6px}#studio-art[hidden]{display:none}#progress.streaming #pixels{width:160px}.stat-help{font-size:11px;line-height:1.8;margin-top:15px;color:var(--muted)}.stat-help summary{cursor:pointer;color:var(--mint)}.unlock-list{font-size:10px;line-height:1.8;color:var(--mint)}.comment-card{border:1px solid #6d587a;background:#382e44;border-radius:6px;margin:12px 0;padding:10px}.comment-card p{margin:3px 0}.comment-card button{font-size:10px;padding:7px;margin:3px}.comment-card .resolved{color:var(--mint)}
#progress.streaming #studio-art{display:inline-block;width:180px;vertical-align:middle;margin:0 12px 10px 0}#progress.streaming #pixels{display:inline-block;vertical-align:middle;margin-bottom:10px}@media(max-width:600px){#progress.streaming #studio-art{width:135px;margin-right:7px}#progress.streaming #pixels{width:115px}.comment-card{padding:7px}.comment-card p{font-size:11px}}

/* Capability-aware controls apply on wide touchscreen PCs as well as phones. */
:root{--safe-bottom:env(safe-area-inset-bottom,0px)}body{padding-bottom:var(--safe-bottom)}header{padding-left:max(15px,env(safe-area-inset-left));padding-right:max(15px,env(safe-area-inset-right))}button,select,summary{touch-action:manipulation}.input-mode{margin:0 16px 10px;color:var(--muted);font-size:11px;text-align:center}.touch-pad{display:none}.touch-pad button[data-held]{background:#88637c;border-color:var(--mint)}html[data-input="touch"] .touch-pad{display:block}html[data-input="touch"] button,html[data-input="touch"] select,html[data-input="touch"] summary{min-height:44px}html[data-input="touch"] .touch-pad button{min-width:56px;min-height:52px;touch-action:none}html[data-input="touch"] .destinations button{font-size:12px;min-width:68px}html[data-input="touch"] .comment-card button{min-width:66px;font-size:12px}html[data-input="touch"] #modal-close{min-width:44px}html[data-input="touch"] .focus-select,html[data-input="touch"] dialog select{font-size:16px}dialog{max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overscroll-behavior:contain}#world{touch-action:pan-y}#progress,#modal{scrollbar-width:thin}.touch-pad{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}html[data-input="touch"] .world-toolbar{gap:12px;flex-wrap:wrap}html[data-input="touch"] .world-toolbar #interact{flex:1;min-width:180px;font-size:13px}@media(max-height:500px) and (orientation:landscape){dialog{padding:16px}dialog h2{font-size:19px;margin:8px 0}#progress.streaming #studio-art{width:115px}#progress.streaming #pixels{width:100px}.touch-pad button{padding:8px}main{padding-top:15px}}