*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{background:#f2c98b;height:100%;margin:0;font-family:-apple-system,system-ui,Segoe UI,Roboto,sans-serif;overflow:hidden}.stage{touch-action:none;-webkit-user-select:none;user-select:none;position:fixed;inset:0}.stage.haram{background:#0d1a35}.canvas{position:absolute;inset:0}.info,.topRight,.hint,.bar,.joyBase{position:absolute}.info{top:calc(env(safe-area-inset-top) + 12px);color:#fff;background:#142826a6;border-radius:14px;flex-direction:column;gap:2px;padding:10px 12px;font-size:16px;display:flex;left:12px}.info span{color:#9fe3c0;font-size:12px}.topRight{top:calc(env(safe-area-inset-top) + 12px);flex-direction:column;align-items:flex-end;gap:6px;display:flex;right:12px}.row{gap:6px;display:flex}.row.wrap{flex-wrap:wrap}button{font:inherit;cursor:pointer;border:0}.chip{color:#fff;background:#142826a6;border-radius:16px;padding:8px 12px;font-size:12px;font-weight:600}.chip.on{color:#222;background:#d9b44a}.panel{color:#fff;background:#142826e6;border-radius:14px;width:220px;max-height:60vh;padding:12px;overflow-y:auto}.panel label{color:#9fe3c0;margin:6px 0 4px;font-size:11px;display:block}.opt{color:#fff;background:#ffffff26;border-radius:12px;padding:6px 10px;font-size:12px;font-weight:600}.opt.on{color:#222;background:#d9b44a}.swatch{border:2px solid #0000;border-radius:50%;width:30px;height:30px}.swatch.on{border-color:#fff}.joyBase{pointer-events:none;background:#ffffff40;border:2px solid #fff9;border-radius:50%;width:104px;height:104px;display:none}.joyKnob{background:#ffffffd9;border-radius:50%;width:44px;height:44px;position:absolute;top:30px;left:30px}.hint{left:50%;bottom:calc(env(safe-area-inset-bottom) + 84px);color:#fff;white-space:nowrap;pointer-events:none;background:#14282699;border-radius:14px;padding:5px 12px;font-size:11px;transform:translate(-50%)}.bar{padding:14px 12px calc(env(safe-area-inset-bottom) + 14px);background:#142826cc;gap:8px;display:flex;bottom:0;left:0;right:0;overflow-x:auto}.act{color:#222;background:#d9b44a;border-radius:18px;flex:none;padding:12px 16px;font-size:14px;font-weight:700}.info span.warn{color:#ffcf8a}.nameInput{color:#fff;width:100%;font:inherit;background:#ffffff26;border:0;border-radius:10px;padding:6px 8px;font-size:13px}.tag{color:#fff;white-space:nowrap;background:#142826bf;border-radius:10px;padding:2px 8px;font-size:12px}.tag.self{color:#222;background:#d9b44ae6;font-weight:700}