*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#000;touch-action:none;overscroll-behavior:none;-webkit-overflow-scrolling:none}#game-container{width:min(100vw,1600px);height:100%;height:100dvh;position:fixed;top:0;left:50%;transform:translate(-50%)}canvas{display:block;image-rendering:pixelated}.chat-panel{position:absolute;left:12px;bottom:96px;width:390px;font-family:monospace;font-size:12px;color:#f2e9d8;background:#0a101cd1;border:1px solid #c9a15a;border-radius:6px;z-index:10;-webkit-user-select:none;user-select:none}.chat-head{display:flex;align-items:center;gap:4px;padding:4px;border-bottom:1px solid rgba(201,161,90,.4)}.chat-panel button{font-family:monospace;font-size:11px;color:#e6f4ff;background:#0d2a55;border:1px solid #2f8bff;border-radius:4px;padding:2px 6px;cursor:pointer}.chat-panel .chat-channel.active{background:#0d3f26;border-color:#3fd17a;color:#e6ffef}.chat-channels{display:flex;gap:4px;flex:1;flex-wrap:nowrap}.chat-status{font-size:10px;color:#8a93a3}.chat-status[data-status=online]{color:#8fffb0}.chat-status[data-status=full]{color:#ff8f8f}.chat-log{height:132px;overflow-y:auto;padding:4px 6px;line-height:1.35;-webkit-user-select:text;user-select:text}.chat-line{word-break:break-word}.chat-line b{color:#ffe066;font-weight:400}.chat-line b.chat-self{color:#8fd9ff}.chat-system{color:#8a93a3;font-style:italic}.chat-announce{font-weight:700}.chat-form{margin:0;padding:4px;border-top:1px solid rgba(201,161,90,.4);display:flex;gap:4px}.chat-input{flex:1;min-width:0;font-family:monospace;font-size:12px;color:#f2e9d8;background:#0b1019;border:1px solid #2a3444;border-radius:4px;padding:4px 6px;outline:none}.chat-input:focus{border-color:#c9a15a}.chat-panel .chat-send{padding:2px 10px;font-size:12px;flex:none}.chat-mobile .chat-send{padding:6px 14px;font-size:13px}.chat-collapsed .chat-body,.chat-collapsed .chat-channels,.chat-collapsed .chat-status{display:none}.chat-collapsed{width:auto}.chat-mobile{left:8px;right:8px;width:auto;bottom:84px}.chat-mobile .chat-log{height:96px}.chat-mobile .chat-status{font-size:0}.chat-mobile .chat-status:before{content:"●";font-size:11px}.chat-mobile.chat-collapsed{right:auto}.cc-screen{--cc-fill: #001935;--cc-deep: #020c1d;--cc-line: #1d4f9a;--cc-border: #2f8bff;--cc-bright: #8fdcff;--cc-title: #dff3ff;--cc-text: #c4d3e8;--cc-hint: #6f8fb8;--cc-gold: #f0b54a;--cc-error: #ff8f9f;position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:16px;font-family:monospace;color:var(--cc-text);background:radial-gradient(ellipse at 50% 40%,#0a1c3859,#050b18d9 75%)}.cc-panel{width:min(800px,100%);max-height:100%;overflow-y:auto;touch-action:pan-y;display:grid;gap:16px;padding:8px 14px;border:30px solid transparent;border-image:url(/assets/ui/ui_panel.png) 40 fill / 30px stretch}.cc-head{display:grid;gap:4px;padding-bottom:10px;border-bottom:1px solid var(--cc-line)}.cc-eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cc-hint)}.cc-head h1{margin:0;font-size:22px;color:var(--cc-title);font-weight:700;letter-spacing:.02em}.cc-notice{margin:0;padding:8px 10px;border:1px solid var(--cc-line);border-radius:4px;color:var(--cc-bright);font-size:13px;background:var(--cc-deep)}.cc-classes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.cc-class{display:grid;justify-items:center;gap:6px;padding:0;font-family:inherit;color:var(--cc-hint);background:none;border:0;cursor:pointer}.cc-card{position:relative;display:block;width:100%;aspect-ratio:337 / 330;container-type:inline-size}.cc-card-img{display:block;width:100%;height:100%;filter:brightness(.62) saturate(.8);transition:filter .15s,transform .15s}.cc-class:hover .cc-card-img{filter:brightness(.85)}.cc-class.cc-selected .cc-card-img{filter:drop-shadow(0 0 8px rgba(47,139,255,.7));transform:translateY(-2px)}.cc-class:focus-visible{outline:none}.cc-class:focus-visible .cc-card-img{outline:2px solid var(--cc-bright);outline-offset:2px}.cc-class-name{font-size:13px;font-weight:700;letter-spacing:.03em}.cc-class.cc-selected .cc-class-name{color:var(--cc-title)}.cc-soon{position:absolute;left:56.4%;top:5.8%;width:33.2%;height:9.4%;display:grid;place-items:center;font-size:6cqw;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cc-gold);white-space:nowrap}.cc-corner{position:absolute;width:14%;aspect-ratio:1;background:url(/assets/ui/ui_corner.png) center / contain no-repeat;opacity:0;transition:opacity .15s;pointer-events:none}.cc-selected .cc-corner{opacity:1}.cc-tl{left:-6%;top:-6%}.cc-tr{right:-6%;top:-6%;transform:scaleX(-1)}.cc-bl{left:-6%;bottom:-6%;transform:scaleY(-1)}.cc-br{right:-6%;bottom:-6%;transform:scale(-1)}.cc-detail{display:grid;grid-template-columns:170px minmax(0,1fr);gap:18px;align-items:center;padding:4px 8px;border:22px solid transparent;border-image:url(/assets/ui/ui_panel.png) 40 fill / 22px stretch}.cc-preview{width:170px;aspect-ratio:337 / 330}.cc-preview .cc-card-img{filter:drop-shadow(0 0 10px rgba(47,139,255,.45));animation:cc-float 3.2s ease-in-out infinite}.cc-preview.cc-locked .cc-card-img{filter:brightness(.75) saturate(.7)}@keyframes cc-float{50%{transform:translateY(-4px)}}@media (prefers-reduced-motion: reduce){.cc-preview .cc-card-img{animation:none}}.cc-info{display:grid;gap:6px;min-width:0}.cc-name{margin:0;font-size:20px;color:var(--cc-title)}.cc-meta{margin:0;font-size:12px;color:var(--cc-gold);letter-spacing:.04em}.cc-desc{margin:0;font-size:13px;line-height:1.45}.cc-attrs{display:grid;gap:5px;margin-top:4px;max-width:340px}.cc-attr{display:grid;grid-template-columns:34px 1fr 22px;gap:8px;align-items:center;font-size:12px}.cc-attr-label{color:var(--cc-hint)}.cc-attr-bar{height:9px;background:#031127;border:1px solid #12407e;border-radius:5px;overflow:hidden}.cc-attr-bar span{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#0a5fd6,#2f8bff 60%,#52c8ff);box-shadow:0 0 6px #2f8bff99}.cc-attr-value{text-align:right;color:var(--cc-title)}.cc-form{display:grid;gap:6px}.cc-label{font-size:12px;color:var(--cc-hint);letter-spacing:.04em}.cc-row{display:flex;gap:10px;align-items:stretch}.cc-input{flex:1;min-width:0;font-family:inherit;font-size:16px;color:var(--cc-title);background:var(--cc-deep);border:1px solid var(--cc-line);border-radius:4px;padding:10px 12px;outline:none}.cc-input:focus{border-color:var(--cc-bright);box-shadow:0 0 8px #2f8bff59}.cc-create{min-width:190px;font-family:inherit;font-size:14px;font-weight:700;letter-spacing:.03em;color:var(--cc-title);background:none;padding:4px 18px;border:14px solid transparent;border-image:url(/assets/ui/ui_button.png) 18 fill / 14px stretch;cursor:pointer;white-space:nowrap}.cc-create:hover:not(:disabled){border-image-source:url(/assets/ui/ui_button_hover.png);color:#fff}.cc-create:focus-visible{outline:2px solid var(--cc-bright);outline-offset:2px}.cc-create:disabled{border-image-source:url(/assets/ui/ui_button_disabled.png);color:#9aa3ad;cursor:default}.cc-hint{margin:0;font-size:11px;color:var(--cc-hint)}.cc-error{margin:0;min-height:1.3em;font-size:12px;color:var(--cc-error)}@media (max-width: 560px){.cc-screen{padding:6px;align-items:flex-start}.cc-panel{padding:4px;gap:10px;border-width:18px;border-image-width:18px}.cc-head{padding-bottom:8px}.cc-head h1{font-size:18px}.cc-classes{gap:5px}.cc-class-name{font-size:10px}.cc-detail{grid-template-columns:100px minmax(0,1fr);gap:10px;padding:2px 4px;border-width:14px;border-image-width:14px;align-items:start}.cc-preview{width:100px}.cc-name{font-size:17px}.cc-desc{font-size:12px}.cc-row{flex-direction:column}.cc-create{min-width:0}}