*{box-sizing:border-box}html,body{color:#e8eef7;background:#0a1a2e;height:100%;margin:0;padding:0;font-family:system-ui,-apple-system,Apple SD Gothic Neo,sans-serif;overflow:hidden}#app{justify-content:center;align-items:center;width:100%;height:100%;display:flex}#game-canvas{aspect-ratio:16/9;image-rendering:auto;background:#cfe6ff;border-radius:8px;width:auto;max-width:100%;height:auto;max-height:100%;box-shadow:0 10px 40px #00000080}.title-root{color:#1e3a66;z-index:10;background:linear-gradient(#cfe6ff 0%,#a7d2ff 100%);flex-direction:column;justify-content:center;align-items:center;gap:18px;padding:40px;display:flex;position:absolute;inset:0}.title-big{letter-spacing:-1px;margin:0;font-size:56px;font-weight:800}.title-sub{margin:0 0 8px;font-size:22px}.title-hint{opacity:.7;margin-top:8px;font-size:14px}.mode-btn{color:#1e3a66;cursor:pointer;background:#fff;border:3px solid #1e3a66;border-radius:14px;align-items:center;gap:14px;min-width:360px;padding:16px 22px;font-family:inherit;font-size:22px;font-weight:600;transition:transform 80ms,background .12s;display:flex}.mode-btn:hover:not(.btn-disabled){background:#eef5ff;transform:translateY(-2px)}.mode-btn:active:not(.btn-disabled){transform:translateY(0)}.mode-btn .mode-emoji{font-size:34px}.btn-disabled{opacity:.45;cursor:not-allowed!important}.step-title{margin:0;font-size:32px;font-weight:800}.step-hint{opacity:.7;margin:-8px 0 8px;font-size:16px}.char-grid{grid-template-columns:repeat(4,1fr);gap:18px;max-width:720px;display:grid}.char-btn{cursor:pointer;background:#fff;border:3px solid #1e3a66;border-radius:16px;flex-direction:column;align-items:center;min-width:140px;padding:16px 10px;font-family:inherit;display:flex}.char-btn:hover{background:#eef5ff;transform:translateY(-3px)}.char-btn .char-emoji{font-size:56px;line-height:1}.char-btn .char-name{color:#1e3a66;margin-top:6px;font-size:20px;font-weight:700}.color-row{gap:28px;display:flex}.color-btn{cursor:pointer;color:#fff;text-shadow:0 2px 4px #0000004d;border:6px solid #1e3a66;border-radius:90px;width:180px;height:180px;font-family:inherit;font-size:28px;font-weight:800;transition:transform 80ms}.color-btn:hover:not(.btn-disabled){transform:scale(1.05)}.matchup{align-items:center;gap:40px;font-size:64px;display:flex}.matchup .side{flex-direction:column;align-items:center;display:flex}.matchup .side-emoji{filter:drop-shadow(0 4px 6px #00000026);font-size:96px;line-height:1}.matchup .side-name{margin-top:4px;font-size:22px;font-weight:700}.matchup .vs{color:#d8453b;font-size:44px;font-weight:900}.countdown{color:#1e3a66;font-size:120px;font-weight:900}.difficulty-row{gap:24px;display:flex}.difficulty-btn{cursor:pointer;color:#1e3a66;background:#fff;border:3px solid #1e3a66;border-radius:18px;flex-direction:column;align-items:center;min-width:180px;padding:22px 18px;font-family:inherit;display:flex}.difficulty-btn:hover{background:#eef5ff;transform:translateY(-3px)}.difficulty-btn .difficulty-emoji{font-size:52px;line-height:1}.difficulty-btn .difficulty-label{margin-top:8px;font-size:22px;font-weight:800}.difficulty-btn .difficulty-sub{opacity:.7;margin-top:2px;font-size:13px}.room-code-input{text-align:center;letter-spacing:6px;color:#1e3a66;background:#fff;border:3px solid #1e3a66;border-radius:12px;width:280px;padding:14px 20px;font-family:ui-monospace,Consolas,monospace;font-size:36px;font-weight:800}.room-code-input:focus{outline-offset:2px;outline:3px solid #3b7dd8}.room-code-display{letter-spacing:10px;color:#1e3a66;-webkit-user-select:all;user-select:all;background:#fff;border:4px solid #1e3a66;border-radius:16px;padding:16px 28px;font-family:ui-monospace,Consolas,monospace;font-size:72px;font-weight:900}.touch-pad{pointer-events:none;z-index:20;position:fixed;inset:0}.touch-dpad{pointer-events:none;width:180px;height:180px;position:absolute;bottom:24px;left:24px}.touch-dpad .dpad-btn{color:#1e3a66;cursor:pointer;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:#ffffffd1;border:3px solid #1e3a66bf;border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;font-family:inherit;font-size:28px;font-weight:900;display:flex;position:absolute}.touch-dpad .dpad-btn.active{color:#fff;background:#3b7dd8;transform:scale(.94)}.touch-dpad .up{top:0;left:58px}.touch-dpad .down{bottom:0;left:58px}.touch-dpad .left{top:58px;left:0}.touch-dpad .right{top:58px;right:0}.touch-action{color:#1e3a66;cursor:pointer;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:#ffffffeb;border:4px solid #1e3a66cc;border-radius:50%;justify-content:center;align-items:center;width:118px;height:118px;font-family:inherit;display:flex;position:absolute;bottom:48px;right:32px;box-shadow:0 6px 16px #0003}.touch-action .touch-action-label{font-size:34px;font-weight:900}.touch-action.active{color:#fff;background:#d8453b;transform:scale(.94)}.portrait-warn{color:#e8eef7;z-index:100;text-align:center;background:#0a1a2e;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:32px;font-size:22px;font-weight:600;display:none;position:fixed;inset:0}.portrait-warn .rotate-icon{font-size:72px;animation:2s ease-in-out infinite rotate-hint}@keyframes rotate-hint{0%,to{transform:rotate(0)}50%{transform:rotate(-90deg)}}@media (orientation:portrait) and (width<=900px){.portrait-warn{display:flex}}