:root{color-scheme:light;--plum: #4a2c5e;--plum-soft: #6b4b82;--rose: #f26aa0;--rose-deep: #d94e88;--pink: #ff9fc4;--sky: #7fb8e8;--gold: #f4c14e;--glass: rgba(255, 255, 255, .68);--glass-strong: rgba(255, 255, 255, .82);--glass-border: rgba(255, 255, 255, .85);--shadow: 0 10px 30px rgba(74, 44, 94, .22);--text: #3f2a52;--muted: #7c6690}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;width:100%}body{background:#bfe0f2;color:var(--text);font-family:Trebuchet MS,Segoe UI,system-ui,-apple-system,sans-serif;overscroll-behavior:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}.clouds{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden;pointer-events:none}.cloud-layer{position:absolute;top:0;right:0;bottom:0;left:0;width:200%;display:flex;animation-name:cloudDrift;animation-timing-function:linear;animation-iteration-count:infinite;will-change:transform}.cloud-layer>i{flex:0 0 50%;height:100%;background-position:center bottom;background-size:cover;background-repeat:no-repeat;image-rendering:pixelated}@keyframes cloudDrift{0%{transform:translate(0)}to{transform:translate(-50%)}}.app-layer{position:relative;z-index:1;height:100%;display:flex;justify-content:center}.app-frame{position:relative;width:100%;max-width:var(--app-max, 480px);height:100%;overflow:hidden}@media (min-width: 520px){.app-frame{box-shadow:0 0 0 2px #f4c14e66,0 0 40px #00000059}}.screen{min-height:100%;display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;padding:max(24px,env(safe-area-inset-top)) 20px max(24px,env(safe-area-inset-bottom));text-align:center}.center{align-items:center;justify-content:center}.title{margin:0;font-size:clamp(34px,9vw,56px);font-weight:800;letter-spacing:1px;color:#fff;text-shadow:0 2px 0 var(--rose-deep),0 4px 14px rgba(74,44,94,.4)}.title:after{content:" 🐉";filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}.subtitle{margin:0;color:var(--plum);font-weight:600;text-shadow:0 1px 6px rgba(255,255,255,.6)}.footnote{font-size:13px;color:var(--plum-soft);text-shadow:0 1px 6px rgba(255,255,255,.7)}.muted{color:var(--muted)}.error{color:var(--rose-deep);font-weight:600}.panel{background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border:1.5px solid var(--glass-border);border-radius:22px;padding:20px;width:min(440px,92vw);display:flex;flex-direction:column;gap:13px;box-shadow:var(--shadow)}.row{display:flex;gap:8px}.divider{color:var(--muted);font-size:13px;text-align:center}.input{flex:1;padding:13px 15px;border-radius:14px;border:1.5px solid rgba(107,75,130,.25);background:#ffffffe6;color:var(--text);font-size:16px;font-family:inherit}.input::placeholder{color:#b3a3c2}.input:focus{outline:none;border-color:var(--rose);box-shadow:0 0 0 3px #f26aa040}.btn{padding:13px 18px;border-radius:14px;border:1.5px solid rgba(107,75,130,.2);background:#ffffffd9;color:var(--plum);font-size:16px;font-weight:700;font-family:inherit;cursor:pointer;min-height:46px;transition:transform .08s ease,box-shadow .15s ease,filter .15s ease}.btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 16px #4a2c5e2e}.btn:active:not(:disabled){transform:translateY(0)}.btn:disabled{opacity:.5;cursor:default}.btn.primary{background:linear-gradient(180deg,var(--pink),var(--rose-deep));color:#fff;border:none;box-shadow:0 8px 20px #d94e8866;letter-spacing:.3px}.btn.primary:hover:not(:disabled){filter:brightness(1.05)}.btn.ghost{background:#ffffff80}.btn.tiny{min-height:34px;padding:7px 13px;font-size:14px}.roomcode{font-size:34px;font-weight:800;letter-spacing:5px;text-align:center;color:var(--rose-deep);text-shadow:0 1px 0 #fff}.playerlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}.playerlist li{display:flex;justify-content:space-between;font-weight:700}.match{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;overflow:hidden}.topbar{display:flex;align-items:center;gap:8px;padding:max(10px,env(safe-area-inset-top)) 12px 10px}.pill{background:var(--glass-strong);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1.5px solid var(--glass-border);border-radius:999px;padding:6px 13px;font-size:13px;font-weight:700;color:var(--plum);box-shadow:0 3px 10px #4a2c5e26}.topbar .btn{margin-left:auto}.arena-wrap{position:relative;flex:1;min-height:0}.phaser-host{position:absolute;top:0;right:0;bottom:0;left:0}.phaser-host canvas{display:block}.place-hint{position:absolute;top:10px;left:50%;transform:translate(-50%);background:var(--glass-strong);color:var(--plum);padding:7px 14px;border-radius:999px;font-size:13px;font-weight:700;border:1.5px solid var(--glass-border);box-shadow:0 3px 10px #4a2c5e33;pointer-events:none}.hud{padding:10px 12px max(12px,env(safe-area-inset-bottom));background:var(--glass-strong);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1.5px solid var(--glass-border);display:flex;flex-direction:column;gap:9px}.sparkbar{position:relative;height:24px;background:#4a2c5e26;border-radius:999px;overflow:hidden;border:1.5px solid var(--glass-border)}.sparkfill{height:100%;background:linear-gradient(90deg,var(--sky),var(--pink),var(--rose));transition:width .12s linear}.sparktext{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:var(--plum);text-shadow:0 1px 2px rgba(255,255,255,.6)}.hand{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.card{position:relative;aspect-ratio:3 / 4;border-radius:14px;border:2px solid var(--glass-border);background:linear-gradient(180deg,#fffffff2,#ffe0f0e6);color:var(--plum);cursor:pointer;padding:6px;display:flex;align-items:flex-end;font-size:12px;font-weight:800;text-align:left;box-shadow:0 4px 12px #4a2c5e29;transition:transform .08s ease,box-shadow .15s ease}.card:hover{transform:translateY(-2px)}.card.sel{border-color:var(--rose);box-shadow:0 0 0 3px var(--rose),0 6px 16px #d94e8866;transform:translateY(-3px)}.card.poor{opacity:.5}.card-art{position:absolute;top:16px;left:8%;width:84%;height:56%;object-fit:contain;image-rendering:pixelated;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(74,44,94,.3))}.card-cost{position:absolute;top:5px;left:7px;color:var(--rose-deep);z-index:1}.card-slot{position:absolute;top:5px;right:7px;color:var(--muted);font-size:11px}.card-name{line-height:1.1}.next{font-size:12px;color:var(--plum-soft);text-align:center;font-weight:600}@media (prefers-reduced-motion: reduce){.cloud-layer{animation:none}.sparkfill,.card,.btn{transition:none}}@font-face{font-family:KnightWarrior;src:url(/assets/knight-warrior-font/KnightWarrior-w16n8.otf) format("opentype");font-display:swap}:root{--font-display: "KnightWarrior", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;--gold: #f4c14e;--gold-d: #b8862c;--gold-l: #ffe9a8;--frame: #2a1740;--frame-2: #3a2352;--parch-1: #fff6e6;--parch-2: #f0d9b4;--parch-3: #e2bd88}.btn{border:none;border-radius:13px;color:var(--gold-l);font-weight:800;letter-spacing:.4px;background:linear-gradient(180deg,#6a4b82,#47295f 60%,#351f4e);text-shadow:0 1px 2px rgba(0,0,0,.55);box-shadow:0 0 0 2px var(--frame),0 0 0 4px var(--gold),0 0 0 5px var(--gold-d),0 5px #7a5320,0 8px 14px #0006,inset 0 2px #ffffff2e;transition:transform .07s ease,filter .15s ease}.btn:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.06)}.btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 0 0 2px var(--frame),0 0 0 4px var(--gold),0 0 0 5px var(--gold-d),0 1px #7a5320,inset 0 3px 8px #00000073}.btn:disabled{opacity:.45}.btn.primary{background:linear-gradient(180deg,#ffd0e0,#ff9fc4 45%,#e0507f);color:#45102a}.btn.ghost{background:linear-gradient(180deg,#4a3a66,#2f2148)}.btn.tiny{border-radius:10px;box-shadow:0 0 0 2px var(--frame),0 0 0 3px var(--gold),0 3px #7a5320,0 5px 8px #00000059}.pill{border:none;color:var(--gold-l);font-weight:800;background:linear-gradient(180deg,var(--frame-2),var(--frame));box-shadow:0 0 0 2px var(--gold),0 2px 6px #0006,inset 0 1px #ffffff1f}.panel{border:none;background:linear-gradient(180deg,#3a2352d1,#241640e6);color:var(--gold-l);box-shadow:0 0 0 2px var(--frame),0 0 0 4px var(--gold),0 0 0 5px var(--gold-d),0 14px 34px #0006,inset 0 2px #ffffff1a}.subtitle,.footnote,.muted,.divider{color:#d9c6f0;text-shadow:0 1px 3px rgba(0,0,0,.5)}.roomcode{color:var(--gold-l);text-shadow:0 2px 0 var(--gold-d),0 0 12px rgba(244,193,78,.5)}.input{background:#1c1030;color:var(--gold-l);border:2px solid var(--gold-d)}.title{color:var(--gold-l);text-shadow:0 2px 0 var(--gold-d),0 4px 0 #6a3f12,0 6px 16px rgba(0,0,0,.5)}.hud{position:relative;background:linear-gradient(180deg,#3a2352f0,#1e1236fa);border-top:3px solid var(--gold);box-shadow:inset 0 3px 0 var(--gold-d),inset 0 8px 20px #00000059,0 -6px 22px #0006}.hud:before,.hud:after{content:"";position:absolute;top:-14px;width:60px;height:26px;background:radial-gradient(closest-side,#ffffffd9,#fff0 70%);pointer-events:none}.hud:before{left:6px}.hud:after{right:6px}.next{color:var(--gold-l)}.sparkbar{border:none;background:#1a0e2e;box-shadow:0 0 0 2px var(--gold),inset 0 2px 5px #0009}.sparkfill{background:linear-gradient(90deg,#7fb8e8,#b06fe0 55%,#ff9fc4);box-shadow:inset 0 2px #ffffff59,0 0 8px #b06fe099}.sparktext{color:var(--gold-l);text-shadow:0 1px 2px #000}.hand{gap:10px}.card{border:none;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,var(--parch-1),var(--parch-2) 58%,var(--parch-3));box-shadow:0 0 0 2px #6a3f12,0 0 0 4px var(--gold),0 0 0 5px var(--gold-d),0 5px 12px #0006,inset 0 2px #ffffffb3,inset 0 -8px 12px #7a4e2847;touch-action:none}.card:before{content:"";position:absolute;top:-6px;left:10%;right:10%;height:30%;background:radial-gradient(closest-side,#ffffffb3,#fff0 75%);pointer-events:none}.card.sel{box-shadow:0 0 0 2px #6a3f12,0 0 0 4px var(--gold),0 0 0 6px #fff0a0,0 0 18px #f4c14ee6,0 6px 16px #0006;transform:translateY(-4px)}.card.poor{filter:grayscale(.5) brightness(.85);opacity:.75}.card.poor:after{content:"🔒";position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:20px;opacity:.65}.card-art{top:20%;height:50%;filter:drop-shadow(0 2px 3px rgba(74,44,94,.4))}.card-cost{top:4px;left:4px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:#fff;background:radial-gradient(circle at 35% 30%,#ffd0e8,#f26aa0 48%,#93264f);box-shadow:0 0 0 2px var(--gold),0 1px 3px #00000080,inset 0 -2px 3px #00000059}.card-slot{top:4px;right:5px;font-size:10px;color:#7a4e28;font-weight:800}.card-name{position:absolute;bottom:5px;left:5px;right:5px;padding:2px 3px;border-radius:6px;background:linear-gradient(180deg,#5a2f7a,#3a1f52);color:var(--gold-l);border:1px solid var(--gold);font-size:9.5px;font-weight:800;text-align:center;line-height:1.05;box-shadow:0 1px 3px #0006,inset 0 1px #ffffff26}.drag-ghost{position:fixed;transform:translate(-50%,-50%);pointer-events:none;z-index:1000;width:66px;height:66px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55));animation:ghostPulse .6s ease-in-out infinite alternate}.drag-ghost img{width:100%;height:100%;image-rendering:pixelated}@keyframes ghostPulse{0%{transform:translate(-50%,-50%) scale(1)}to{transform:translate(-50%,-50%) scale(1.12)}}.place-hint{background:linear-gradient(180deg,var(--frame-2),var(--frame));color:var(--gold-l);border:none;box-shadow:0 0 0 2px var(--gold),0 3px 10px #0006}@media (prefers-reduced-motion: reduce){.drag-ghost{animation:none}}.title,.btn,.pill,.roomcode,.card-name,.next,.sparktext,.subtitle,.place-hint,.divider{font-family:var(--font-display);letter-spacing:.6px}.title{letter-spacing:1.5px}.card-name{font-size:10.5px;letter-spacing:.3px}.mute-btn{position:absolute;top:max(8px,env(safe-area-inset-top));right:8px;z-index:30;width:40px;height:40px;min-height:0;padding:0;border-radius:11px;font-size:17px;line-height:1}.topbar{padding-right:52px}.love-note{position:absolute;top:8px;left:50%;transform:translate(-50%);max-width:92%;padding:8px 16px;border-radius:14px;background:linear-gradient(180deg,#5a2f7af2,#3a1f52f2);color:var(--gold-l);font-family:var(--font-display);font-size:14px;letter-spacing:.4px;text-align:center;border:none;box-shadow:0 0 0 2px var(--gold),0 6px 16px #00000073;pointer-events:none;z-index:5;animation:loveNoteIn .35s ease-out}.love-note:before{content:"💕 "}.love-note:after{content:" 💕"}@keyframes loveNoteIn{0%{opacity:0;transform:translate(-50%,-8px) scale(.9)}to{opacity:1;transform:translate(-50%) scale(1)}}@media (prefers-reduced-motion: reduce){.love-note{animation:none}}.topbar{gap:6px}.pill{font-size:15px;padding:6px 12px}.place-hint{font-size:15px}.sparkbar{height:26px}.sparktext{font-size:16px}.next{font-size:14px}.card{font-size:13px}.card-cost{width:24px;height:24px;font-size:13px}.card-slot{font-size:12px}.card-name{font-size:12.5px;padding:3px}.love-note{font-size:15px}.pill.urgent{color:#fff;background:linear-gradient(180deg,#ff7a7a,#d63a4e);box-shadow:0 0 0 2px var(--gold),0 0 10px #d63a4eb3,inset 0 1px #fff3;animation:pillPulse .9s ease-in-out infinite alternate}@keyframes pillPulse{0%{transform:scale(1)}to{transform:scale(1.06)}}@media (prefers-reduced-motion: reduce){.pill.urgent{animation:none}}.cast-error{position:absolute;top:48px;left:50%;transform:translate(-50%);max-width:90%;padding:7px 15px;border-radius:12px;background:linear-gradient(180deg,#ff7a7a,#b8283c);color:#fff;font-family:var(--font-display);font-size:14px;letter-spacing:.3px;text-align:center;border:none;box-shadow:0 0 0 2px var(--gold),0 6px 16px #00000073;pointer-events:none;z-index:6;animation:castErrorIn .25s ease-out}@keyframes castErrorIn{0%{opacity:0;transform:translate(-50%,-6px) scale(.94)}to{opacity:1;transform:translate(-50%) scale(1)}}@media (prefers-reduced-motion: reduce){.cast-error{animation:none}}