:root{--panel-bg: rgba(28, 24, 18, .86);--panel-border: rgba(196, 164, 104, .55);--text: #f3e8cf;--muted: #b9a988;--gold: #ffd76a;--font: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;width:100%;height:100%;overflow:hidden;background:#14110d;color:var(--text);font-family:var(--font);-webkit-user-select:none;user-select:none}.panel{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:6px;box-shadow:0 2px 10px #00000073}.game-root{position:relative;width:100%;height:100%}.game-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;cursor:crosshair}.loading{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.loading h1{color:var(--gold);margin:0 0 8px}.loading-bar{width:360px;height:10px;background:#2a241b;border-radius:5px;overflow:hidden}.loading-bar>div{height:100%;background:var(--gold);transition:width .15s}.warn{color:#ff9a7a}.topbar{position:absolute;top:8px;left:8px;right:8px;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;pointer-events:none}.topbar>*{pointer-events:auto}.resource-bar{display:flex;gap:14px;padding:6px 12px}.resource{display:flex;align-items:center;gap:6px;font-size:14px}.resource-label{color:var(--muted)}.resource-value{font-weight:700;min-width:36px}.topbar-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}.hero-tokens{display:flex;gap:3px;padding:4px;flex-wrap:wrap;justify-content:flex-end}.hero-token{padding:0;border:2px solid transparent;border-radius:6px;background:#0000004d;cursor:pointer;line-height:0}.hero-token:hover{border-color:#ffd76a80}.hero-token.selected{border-color:var(--gold)}.hero-token.drafted{box-shadow:0 0 0 2px #ff5a3c inset}.clock{display:flex;gap:10px;padding:4px 12px;font-size:14px}.inspector{position:absolute;left:8px;bottom:70px;width:440px;display:flex;gap:10px;padding:10px}.inspector-empty{flex-direction:column;gap:4px;font-size:14px}.inspector-empty p{margin:0}.hint{color:var(--muted);font-size:12px}.inspector-portrait{position:relative;flex:0 0 120px}.inspector-portrait img{width:120px;height:150px;object-fit:cover;border-radius:4px;border:1px solid var(--panel-border)}.line-badge{position:absolute;top:4px;left:4px;font-size:11px;font-weight:700;padding:1px 6px;border-radius:3px;background:#333}.line-GK{background:#c9a227;color:#1b1405}.line-DF{background:#3d7bd9}.line-MF{background:#3aa45a}.line-FW{background:#d9483d}.inspector-body{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.inspector-title{display:flex;align-items:baseline;gap:8px}.inspector-title strong{font-size:18px;color:var(--gold)}.role,.extra{font-size:12px;color:var(--muted)}.inspector-job{font-size:13px}.drafted-text{color:#ff8a6a}.bar-row{display:flex;align-items:center;gap:6px;font-size:12px}.bar-label{width:28px;color:var(--muted)}.bar{flex:1;height:8px;background:#00000080;border-radius:4px;overflow:hidden}.bar-fill{height:100%}.bar-value{width:26px;text-align:right}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-top:2px}.stat{display:flex;flex-direction:column;align-items:center;font-size:11px;background:#0000004d;border-radius:3px;padding:2px 0}.stat span{color:var(--muted)}.inspector-actions{display:flex;align-items:center;gap:8px;margin-top:4px}.ultimate{display:flex;align-items:center;gap:6px;opacity:.85;min-width:0}.ult-name{font-size:12px;font-weight:700;color:var(--gold)}.ult-desc{font-size:11px;color:var(--muted)}.minimap{position:absolute;right:8px;bottom:70px;padding:4px;line-height:0}.minimap canvas{cursor:pointer;border-radius:3px}.architect-bar{position:absolute;left:8px;right:8px;bottom:8px;display:flex;justify-content:space-between;align-items:flex-end;gap:8px;pointer-events:none}.architect-bar>*{pointer-events:auto}.architect-tabs,.speed-controls{display:flex;gap:2px;padding:4px}.architect-popup{position:absolute;left:0;bottom:58px;display:flex;flex-direction:column;gap:4px;padding:8px 12px;font-size:13px;max-width:560px;margin-left:448px}.architect-popup em{color:var(--muted);font-size:12px}.img-btn{padding:0;border:none;background:none;cursor:pointer;line-height:0}.img-btn img{display:block}.paused-banner{position:absolute;top:60px;left:50%;transform:translate(-50%);padding:4px 14px;background:#a0281ed9;border-radius:4px;font-size:13px;pointer-events:none}@media (max-width: 1100px){.inspector{width:360px}.architect-popup{margin-left:0}}.start{position:relative;height:100%;display:flex;align-items:center;justify-content:center;gap:32px;background-size:cover;background-position:center}.start-shade{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at center,#00000059,#000c)}.start-panel,.release-notes{position:relative;z-index:1}.start-panel{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:320px}.start-panel h1{margin:0;color:var(--gold);font-size:44px;text-shadow:0 2px 12px #000}.start-version{margin:0 0 12px;color:var(--muted)}.env-badge{padding:3px 12px;border-radius:12px;font-weight:700;font-size:13px}.env-badge.dev{background:#3a6ea5;color:#fff}.env-badge.live{background:#3f8f4a;color:#fff}.start-btn{width:240px;padding:12px 0;font-size:18px;font-weight:700;color:#1c1608;background:var(--gold);border:2px solid #7a5f1c;border-radius:6px;cursor:pointer}.start-btn:hover{filter:brightness(1.12)}.start-btn.secondary{background:#14100abf;color:var(--gold);font-size:15px}.start-loading{display:flex;flex-direction:column;align-items:center}.release-notes{width:380px;max-height:70vh;overflow:auto;padding:16px 20px;background:#14100ae0;border:1px solid #7a5f1c;border-radius:8px}.release-notes h2{margin:0 0 8px;color:var(--gold)}.release-notes h3{margin:8px 0 4px;font-size:15px}.release-notes small{color:var(--muted)}.release-notes ul{margin:0;padding-left:20px}.env-chip{position:absolute;top:4px;left:50%;transform:translate(-50%);z-index:5;font-size:11px;padding:2px 8px;border-radius:10px;background:#0009;color:#fff;pointer-events:none}
