*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;background:linear-gradient(180deg,#1a1530,#2a1f4a);color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;overscroll-behavior:none;user-select:none;-webkit-user-select:none;touch-action:none}#app{max-width:min(720px,96vw);margin:0 auto;min-height:100vh;padding:clamp(10px,2vw,20px);display:flex;flex-direction:column;gap:clamp(10px,2vw,18px);position:relative}#app.shake{animation:screen-shake .4s ease}@keyframes screen-shake{0%,to{transform:none}15%{transform:translate(-5px,-3px) rotate(-.5deg)}30%{transform:translate(5px,3px) rotate(.5deg)}45%{transform:translate(-4px,4px) rotate(-.3deg)}60%{transform:translate(4px,-4px) rotate(.3deg)}75%{transform:translate(-2px,2px)}90%{transform:translate(2px,-2px)}}.enemy-area{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;background:#ffffff0d;border-radius:12px;border:1px solid rgba(255,255,255,.1)}.stage-label{font-size:clamp(12px,1.6vw,17px);font-weight:700;color:#fff9;letter-spacing:.08em;text-transform:uppercase}.enemy-emoji{font-size:clamp(60px,10vw,96px);line-height:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));transition:transform .2s ease}.enemy-emoji.hit{animation:shake .4s ease}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-8px) scale(1.05)}40%{transform:translate(8px) scale(1.05)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}.hp-bar{width:100%;height:clamp(22px,3vw,34px);background:#0006;border-radius:12px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.2)}.hp-fill{height:100%;background:linear-gradient(90deg,#f44,#f84);transition:width .5s ease;width:100%}.player-hp .hp-fill{background:linear-gradient(90deg,#4f6,#4dd)}.hp-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:clamp(12px,1.6vw,16px);font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.8);z-index:1}.message-log{min-height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.message{font-size:clamp(16px,2.5vw,26px);font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.8);animation:message-pop .4s ease}.message.combo{color:#ffe44d;font-size:clamp(20px,3.2vw,32px)}.message.damage{color:#f66}.message.heal{color:#6f9}.message.enemy{color:#f84}@keyframes message-pop{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.15)}to{transform:scale(1);opacity:1}}.player-area{display:flex;flex-direction:column;gap:6px}.timer-bar{width:100%;height:6px;background:#0006;border-radius:3px;overflow:hidden}.timer-fill{height:100%;background:linear-gradient(90deg,#ffe44d,#f84);width:0%;transition:width .1s linear}.board{--bp: clamp(5px, 1vw, 10px);--cg: clamp(3px, .6vw, 6px);display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(5,1fr);gap:var(--cg);aspect-ratio:6 / 5;background:#0000004d;padding:var(--bp);border-radius:12px;position:relative;touch-action:none;transition:box-shadow .4s ease}.board.player-turn{box-shadow:0 0 0 2px #64c8ff80,0 0 24px #64c8ff59;animation:board-glow 1.8s ease-in-out infinite}@keyframes board-glow{0%,to{box-shadow:0 0 0 2px #64c8ff66,0 0 20px #64c8ff40}50%{box-shadow:0 0 0 3px #64c8ffcc,0 0 40px #64c8ff8c}}.cell{background:#ffffff0a;border-radius:8px}.drop{position:absolute;width:calc((100% - var(--bp) * 2 - var(--cg) * 5) / 6);aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:clamp(26px,7vw,54px);border-radius:8px;background:#ffffff14;transition:transform .18s ease,opacity .25s ease,filter .15s ease;pointer-events:none;z-index:2;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}.drop.dragging{z-index:10;filter:drop-shadow(0 8px 16px rgba(0,0,0,.6)) brightness(1.15);transition:none}.drop.matched{animation:match-flash .25s ease forwards;z-index:5}@keyframes match-flash{0%{filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));background:#ffffff14}40%{filter:drop-shadow(0 0 14px rgba(255,230,80,.9)) brightness(1.8) saturate(1.5);background:#ffe65040;transform:scale(1.12)}to{filter:drop-shadow(0 0 20px rgba(255,255,255,.8)) brightness(2);background:#ffffff4d;transform:scale(1.08)}}.drop.clearing{animation:drop-burst .35s ease forwards;z-index:6}@keyframes drop-burst{0%{opacity:1;transform:scale(1.08);filter:brightness(2)}30%{opacity:1;transform:scale(1.4);filter:brightness(2.5) saturate(2)}60%{opacity:.6;transform:scale(.9)}to{opacity:0;transform:scale(0) rotate(30deg);filter:brightness(3)}}.combo-display{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:900;text-align:center;pointer-events:none;z-index:20;white-space:nowrap;text-shadow:0 4px 16px rgba(0,0,0,.7),0 0 30px currentColor;animation:combo-float 1s ease forwards;line-height:1.1}@keyframes combo-float{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.35)}30%{transform:translate(-50%,-50%) scale(.95)}45%{transform:translate(-50%,-50%) scale(1.1)}60%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-90%) scale(.8)}}.combo-display.lv1{font-size:32px;color:#ffe44d}.combo-display.lv2{font-size:40px;color:#fa3}.combo-display.lv3{font-size:50px;color:#f63}.combo-display.lv4{font-size:60px;background:linear-gradient(135deg,#f48,#f80,#ff4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.turn-banner{position:absolute;top:35%;left:50%;transform:translate(-50%);background:linear-gradient(135deg,#3ca0ffe6,#783cffe6);border:2px solid rgba(255,255,255,.4);border-radius:16px;padding:10px 28px;font-size:20px;font-weight:700;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.5);box-shadow:0 8px 32px #3ca0ff66;white-space:nowrap;pointer-events:none;z-index:30;animation:turn-banner-anim 1.6s ease forwards}@keyframes turn-banner-anim{0%{opacity:0;transform:translate(-50%) scale(.6) translateY(10px)}15%{opacity:1;transform:translate(-50%) scale(1.05) translateY(0)}25%{transform:translate(-50%) scale(1) translateY(0)}70%{opacity:1}to{opacity:0;transform:translate(-50%) scale(.95) translateY(-12px)}}.result-overlay{position:fixed;inset:0;background:#000000bf;display:none;align-items:center;justify-content:center;flex-direction:column;gap:24px;z-index:100}.result-overlay.show{display:flex}.result-text{font-size:56px;font-weight:700;text-shadow:0 4px 12px rgba(0,0,0,.8)}.result-text.win{color:#ffe44d}.result-text.lose{color:#f66}.restart-btn{font-size:18px;padding:14px 32px;background:linear-gradient(135deg,#f84,#f48);color:#fff;border:none;border-radius:12px;font-weight:700;cursor:pointer;box-shadow:0 4px 12px #0006}.restart-btn:active{transform:translateY(2px);box-shadow:0 2px 6px #0006}
