*{box-sizing:border-box;margin:0;padding:0}:root{--character-scale: 1}body{margin:0;height:100vh;width:100vw;background:radial-gradient(circle at top,#222 0,#050505 60%);font-family:system-ui,sans-serif;overflow:hidden}#world{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;background:#00000026;overflow:hidden;transform:translateZ(0);-webkit-transform:translateZ(0)}#label{position:fixed;bottom:8px;right:12px;font-size:10px;color:#bbb;opacity:.8;pointer-events:none;-webkit-user-select:none;user-select:none}.character{position:absolute;width:calc(72px * var(--character-scale));height:calc(96px * var(--character-scale));transform-origin:center;touch-action:none;transition:opacity .2s ease;--skin-color: #d9b28c;z-index:1;will-change:transform;contain:layout style paint;backface-visibility:hidden;-webkit-backface-visibility:hidden}.character.is-hidden{opacity:0;pointer-events:none}.character.was-zapped{filter:grayscale(1) blur(.5px)}.character.is-scared{filter:drop-shadow(0 0 8px rgba(255,96,96,.5))}.character.is-royal{filter:drop-shadow(0 0 8px rgba(255,215,0,.45))}.character.is-royal:after{content:"";position:absolute;top:-16px;left:-16px;width:calc(100% + 32px);height:calc(100% + 32px);border-radius:40%;background:radial-gradient(circle,#ffdf5859,#ffdf5800);animation:royalPulse 2s ease-in-out infinite;pointer-events:none;z-index:-1}@keyframes royalPulse{0%{transform:scale(.95);opacity:.6}50%{transform:scale(1.05);opacity:.9}to{transform:scale(.95);opacity:.6}}.character.is-dragging .person{animation:drag-wobble .22s ease-in-out infinite}.character.is-dragging .arm,.character.is-dragging .leg{animation-duration:.18s}@keyframes drag-wobble{0%{transform:translate(-50%) scale(var(--character-scale)) rotate(-6deg)}to{transform:translate(-50%) scale(var(--character-scale)) rotate(6deg)}}.character.is-scared:not(.is-dragging) .person{animation:scared-lean .18s alternate infinite}.character.is-scared .arm,.character.is-scared .leg{animation-duration:.18s}@keyframes scared-lean{0%{transform:translate(-50%) scale(var(--character-scale)) skew(-4deg)}to{transform:translate(-50%) scale(var(--character-scale)) skew(-8deg)}}.person{position:absolute;bottom:0;left:50%;transform:translate(-50%) scale(var(--character-scale));transform-origin:bottom center}.head{position:relative;width:30px;height:30px;border-radius:50%;background:var(--skin-color, #d9b28c);margin:0 auto 4px}.crown{position:absolute;top:-12px;left:50%;width:26px;height:10px;transform:translate(-50%);background:linear-gradient(180deg,gold,#daa520);border-radius:0 0 3px 3px;box-shadow:0 1px 3px #0000004d;z-index:5}.crown:before{content:"";position:absolute;bottom:0;left:0;right:0;height:4px;background:linear-gradient(180deg,#ffec8b,#daa520);border-radius:0 0 3px 3px;box-shadow:inset 0 1px #fff6}.crown:after{content:"";position:absolute;top:-8px;left:50%;transform:translate(-50%);width:22px;height:10px;background:linear-gradient(135deg,gold 50%,#daa520 50%) no-repeat 9px 0 / 4px 10px,linear-gradient(135deg,gold 50%,#daa520 50%) no-repeat 2px 3px / 4px 7px,linear-gradient(135deg,gold 50%,#daa520 50%) no-repeat 16px 3px / 4px 7px}.crown .jewel{position:absolute;top:2px;left:50%;transform:translate(-50%);width:4px;height:4px;background:radial-gradient(circle,#ff6b6b 30%,#c00);border-radius:50%;box-shadow:-7px 0 0 1px #4169e1,7px 0 0 1px #32cd32,0 -9px #ff69b4;z-index:6}.eye{position:absolute;top:11px;width:6px;height:6px;border-radius:50%;background:#fff;overflow:hidden}.eye:after{content:"";position:absolute;top:1px;left:2px;width:3px;height:3px;border-radius:50%;background:#000}.eye.left{left:7px}.eye.right{right:7px}.body{position:relative;width:40px;height:36px;margin:0 auto}.torso{position:absolute;top:4px;left:50%;transform:translate(-50%);width:32px;height:26px;border-radius:8px;background:currentColor;z-index:1}.name-tag{position:absolute;top:40px;right:2px;padding:1px 4px;font-size:9px;line-height:1.1;color:#f5f5f5;background:#000000a6;border-radius:6px;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.7);pointer-events:none;z-index:2}.arm{position:absolute;top:6px;width:12px;height:6px;border-radius:6px;background:currentColor;transform-origin:0% 50%;animation:swing .4s alternate infinite;z-index:2;will-change:transform;backface-visibility:hidden}.arm.right{right:-4px;transform-origin:100% 50%;animation-delay:.2s}.arm.left{left:-4px}@keyframes swing{0%{transform:rotate(15deg)}to{transform:rotate(-15deg)}}.legs{position:relative;width:30px;height:26px;margin:0 auto}.leg{position:absolute;bottom:0;width:10px;height:22px;border-radius:5px;background:#222;transform-origin:top center;animation:walk .35s alternate infinite;will-change:transform;backface-visibility:hidden}.leg.left{left:3px}.leg.right{right:3px;animation-delay:.175s}@keyframes walk{0%{transform:rotate(10deg)}to{transform:rotate(-10deg)}}.bubble{position:absolute;max-width:260px;background:#000000d9;border-radius:10px;padding:6px 8px;font-size:11px;line-height:1.25;color:#f5f5f5;pointer-events:none;white-space:normal;text-align:center;opacity:0;z-index:10;transform:translate(-50%,-110%);transition:opacity .18s ease-out}.bubble:after{content:"";position:absolute;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid rgba(0,0,0,.85);bottom:-6px}.bubble.visible{opacity:1}.death-bubble{position:absolute;min-width:60px;max-width:160px;transform:translate(-50%,-30%) scale(.9);padding:4px 8px;border-radius:999px;font-size:11px;text-align:center;color:#fff;background:#000c;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:12;box-shadow:0 4px 10px #0006}.death-bubble.visible{opacity:1;transform:translate(-50%,-110%) scale(1)}.death-bubble.cause-royal{background:linear-gradient(135deg,#ffc72cf2,#ff5b35e6);color:#2b1300;font-weight:600}.death-bubble.cause-user{background:#4a90e2f2}.confetti-poof{position:absolute;width:0;height:0;pointer-events:none;z-index:15}.confetti-poof span{position:absolute;width:8px;height:8px;border-radius:50%;background:#ff3b30;opacity:.95;transform:translate(-50%,-50%);animation:confetti-pop .65s ease-out forwards;animation-delay:var(--delay, 0ms)}@keyframes confetti-pop{0%{transform:translate(-50%,-50%) scale(.3);opacity:1}to{transform:translate(calc(-50% + var(--dx, 0)),calc(-50% + var(--dy, 0))) scale(0);opacity:0}}@media (prefers-reduced-motion: reduce){.character,.arm,.leg,.bubble,.confetti-poof span{animation:none!important;transition:none!important}}.character.perf-mode .arm,.character.perf-mode .leg{animation-duration:.6s}#world.perf-mode .character{transition:none}#world.perf-mode .bubble{transition:opacity .1s ease-out}.editor-toggle{position:fixed;top:12px;right:12px;z-index:1000;background:#fffffff2;border:none;border-radius:8px;padding:8px 16px;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 2px 12px #0003;transition:transform .15s,box-shadow .15s}.editor-toggle:hover{transform:translateY(-1px);box-shadow:0 4px 16px #00000040}.editor-panel{position:fixed;top:10%;left:10%;width:380px;max-width:80vw;height:auto;max-height:80vh;background:#1a1a2e;color:#eee;z-index:999;display:flex;flex-direction:column;box-shadow:0 8px 32px #00000080;border-radius:12px;opacity:0;pointer-events:none;transform:scale(.95);transition:opacity .2s ease,transform .2s ease;font-family:system-ui,-apple-system,sans-serif;overflow:hidden}.editor-panel.open{opacity:1;pointer-events:auto;transform:scale(1)}.editor-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#16213e;border-bottom:1px solid #0f3460;cursor:grab;-webkit-user-select:none;user-select:none}.editor-header:active{cursor:grabbing}.editor-header h2{margin:0;font-size:18px;font-weight:700;pointer-events:none}.editor-close{background:none;border:none;color:#888;font-size:24px;cursor:pointer;padding:4px 8px;line-height:1;transition:color .15s}.editor-close:hover{color:#fff}.editor-tabs{display:flex;background:#16213e;border-bottom:1px solid #0f3460}.editor-tab{flex:1;padding:12px 16px;background:transparent;border:none;color:#888;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s,color .15s;border-bottom:2px solid transparent}.editor-tab:hover{color:#ccc;background:#ffffff0d}.editor-tab.active{color:#e94560;border-bottom-color:#e94560;background:#e945601a}.editor-content{flex:1;overflow-y:auto;padding:10%}.tab-panel{display:none}.tab-panel.active{display:block}.editor-section{margin-bottom:20px}.editor-section-title{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#888;margin-bottom:10px}.add-character-form{display:flex;flex-direction:column;gap:10px;padding:14px;background:#16213e;border-radius:10px;margin-bottom:16px}.add-character-form .form-row{display:flex;gap:10px}.add-character-form input,.add-character-form select{flex:1;padding:10px 12px;border:1px solid #0f3460;border-radius:6px;background:#1a1a2e;color:#eee;font-size:14px}.add-character-form input::placeholder{color:#666}.add-character-form input:focus,.add-character-form select:focus{outline:none;border-color:#e94560}.add-character-form input[type=color]{width:50px;padding:4px;cursor:pointer}.add-character-form button{padding:10px 16px;background:#e94560;border:none;border-radius:6px;color:#fff;font-weight:600;cursor:pointer;transition:background .15s}.add-character-form button:hover{background:#ff6b6b}.character-list{display:flex;flex-direction:column;gap:8px}.character-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#16213e;border-radius:8px;transition:background .15s}.character-item:hover{background:#1f2b4a}.character-color{width:24px;height:24px;border-radius:50%;flex-shrink:0;border:2px solid rgba(255,255,255,.2)}.character-info{flex:1;min-width:0}.character-name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.character-role{font-size:11px;color:#888;text-transform:capitalize}.character-role.king{color:gold}.character-actions{display:flex;gap:6px}.character-actions button{background:none;border:none;color:#666;cursor:pointer;padding:4px 6px;font-size:14px;border-radius:4px;transition:background .15s,color .15s}.character-actions button:hover{background:#ffffff1a;color:#fff}.character-actions button.delete:hover{background:#e9456033;color:#e94560}.editor-stats{display:flex;gap:12px;padding:12px;background:#16213e;border-radius:8px;margin-bottom:16px}.stat-item{text-align:center;flex:1}.stat-value{font-size:24px;font-weight:700;color:#e94560}.stat-label{font-size:11px;color:#888;text-transform:uppercase}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.stat-card{background:#16213e;border-radius:10px;padding:16px;text-align:center}.stat-card .stat-value{font-size:32px;font-weight:700;color:#e94560;margin-bottom:4px}.stat-card .stat-label{font-size:12px;color:#888;text-transform:uppercase;letter-spacing:.5px}.stat-card.highlight{background:linear-gradient(135deg,#16213e,#0f3460);border:1px solid #0f3460}.stat-card.highlight .stat-value{color:gold}.editor-footer{padding:16px 20px;background:#16213e;border-top:1px solid #0f3460;display:flex;gap:10px}.editor-footer button{flex:1;padding:12px;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:background .15s}.editor-footer .btn-primary{background:#e94560;color:#fff}.editor-footer .btn-primary:hover{background:#ff6b6b}.editor-footer .btn-secondary{background:#0f3460;color:#eee}.editor-footer .btn-secondary:hover{background:#1a4a7a}.edit-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;z-index:1001;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}.edit-modal-overlay.open{opacity:1;pointer-events:auto}.edit-modal{background:#1a1a2e;border-radius:12px;padding:24px;width:320px;max-width:90vw;box-shadow:0 8px 32px #0006}.edit-modal h3{margin:0 0 20px;font-size:18px}.edit-modal .form-group{margin-bottom:14px}.edit-modal label{display:block;font-size:12px;color:#888;margin-bottom:6px}.edit-modal input,.edit-modal select{width:100%;padding:10px 12px;border:1px solid #0f3460;border-radius:6px;background:#16213e;color:#eee;font-size:14px;box-sizing:border-box}.edit-modal input[type=color]{height:42px;cursor:pointer}.edit-modal .modal-actions{display:flex;gap:10px;margin-top:20px}.edit-modal .modal-actions button{flex:1;padding:10px;border:none;border-radius:6px;font-weight:600;cursor:pointer}.edit-modal .btn-save{background:#e94560;color:#fff}.edit-modal .btn-cancel{background:#0f3460;color:#eee}.search-box{margin-bottom:12px}.search-box input{width:100%;padding:10px 12px;border:1px solid #0f3460;border-radius:6px;background:#16213e;color:#eee;font-size:14px;box-sizing:border-box}.search-box input::placeholder{color:#666}.editor-toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%) translateY(100px);background:#16213e;color:#fff;padding:12px 24px;border-radius:8px;box-shadow:0 4px 20px #0006;z-index:1002;opacity:0;transition:transform .3s,opacity .3s}.editor-toast.show{transform:translate(-50%) translateY(0);opacity:1}.editor-toast.success{border-left:4px solid #2ed573}.editor-toast.error{border-left:4px solid #e94560}body.in-iframe .editor-toggle,body.in-iframe .editor-panel{display:none}.editor-resize-handle{position:absolute;bottom:0;right:0;width:20px;height:20px;cursor:nwse-resize;opacity:.5;transition:opacity .15s}.editor-resize-handle:hover{opacity:1}.editor-resize-handle:before{content:"";position:absolute;bottom:4px;right:4px;width:8px;height:8px;border-right:2px solid #888;border-bottom:2px solid #888}