@font-face { font-family: "EC Game UI"; src: url("assets/fonts/noto-sans-sc-regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "EC Game UI"; src: url("assets/fonts/noto-sans-sc-medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }

.ec-experience-page { height: 100svh; overflow: hidden; background: #0b0c10; }
.ec-experience-page [hidden] { display: none !important; }
.ec-world { position: relative; width: 100%; height: 100svh; overflow: hidden; isolation: isolate; }
#ec-canvas { display: block; width: 100%; height: 100%; outline: none; touch-action: none; cursor: grab; }
.ec-world-toolbar { position: absolute; z-index: 2; top: 20px; right: 24px; left: 24px; display: flex; align-items: center; gap: 16px; pointer-events: none; transition-property: none; }
.ec-world-toolbar > * { pointer-events: auto; transition-property: background, border-color; }
.ec-world-toolbar .brand { gap: 0; }
.ec-world-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ec-world-actions button, .ec-ui-exit { min-height: 40px; padding: .5rem .8rem; color: #e6e0e9; border: 1px solid rgba(220,205,255,.2); border-radius: 9px; background: rgba(20,18,24,.85); font-size: .76rem; cursor: pointer; transition: background .2s, border-color .2s; }
.ec-world-actions button:hover, .ec-ui-exit:hover { border-color: #d0bcff; background: #2b2930; }
.ec-world-actions .ec-open-panel { background: #4a4458; }
.ec-world-state { position: absolute; top: 80px; left: 24px; display: grid; gap: 5px; color: #b8b6c0; font-family: Consolas, monospace; font-size: .7rem; pointer-events: none; }
.ec-world-notice { position: absolute; z-index: 3; bottom: 76px; left: 50%; translate: -50% 0; max-width: calc(100% - 32px); margin: 0; color: #eaddff; font-size: .8rem; text-align: center; pointer-events: none; }
.ec-experience-page:has(.ec-ui-dialog[open]) :is(.ec-world-toolbar, .ec-world-state, .ec-hotbar) { visibility: hidden; }
.ec-no-script { position: absolute; inset: 40% 1rem auto; text-align: center; }

/* Logical coordinates and Graphite palette follow the current Fabric FixedPanelLayout / MD3Theme. */
.ec-ui-dialog { position: fixed; inset: 0; width: 100%; height: 100svh; max-width: none; max-height: none; padding: 0; margin: 0; overflow: hidden; color: #e6e0e9; border: none; background: transparent; }
.ec-ui-dialog::backdrop { background: rgba(0,0,0,.60); }
.ec-ui-exit { position: absolute; top: 20px; right: 24px; z-index: 3; }
.ec-ui-exit span { margin-left: .5rem; color: #a69bb6; font-size: .65rem; }
.ec-ui-help { position: absolute; right: 16px; bottom: 18px; left: 16px; margin: 0; color: #bdb3ca; font-size: .72rem; text-align: center; }
.ec-panel { --rail-width: 108px; --ui-scale: 1; --panel-width: 584px; --panel-height: 324px; --ec-ink: #ecedea; --ec-secondary: #a6aea9; --ec-accent: #d8cbae; --ec-line: #9ba6a030; position: absolute; top: 50%; left: 50%; translate: -50% -50%; scale: var(--ui-scale); isolation: isolate; display: grid; grid-template-columns: var(--rail-width) minmax(0, 1fr); gap: 12px; width: var(--panel-width); height: var(--panel-height); padding: 8px; color: var(--ec-ink); border-radius: 8px; background: #17191cb8; backdrop-filter: blur(8px); box-shadow: 0 8px 32px #00000038; font-family: "EC Game UI", "Microsoft YaHei", sans-serif; font-size: 10.25px; font-weight: 400; line-height: 1.25; transition: opacity .18s ease, transform .18s ease; }
.ec-panel::before { position: absolute; z-index: -1; inset: 0; border-radius: inherit; content: ''; pointer-events: none; background: linear-gradient(125deg, #4a5b6555, #7c746140); background-size: 180% 180%; }
.ec-panel button, .ec-panel input { font: inherit; }
.ec-panel button { color: inherit; cursor: pointer; }
.ec-panel button:focus-visible, .ec-panel input:focus-visible { outline: 1.5px solid var(--ec-accent); outline-offset: 1px; }
.ec-panel.is-closing { opacity: 0; transform: translateY(8px) scale(.98); }
.ec-rail, .ec-module-column, .ec-detail-column { position: relative; min-width: 0; height: 100%; }
.ec-rail { overflow: hidden; border-radius: 6px; background: #2a2e3136; }
.ec-rail-brand { position: absolute; top: 11px; left: 8px; display: flex; align-items: baseline; gap: 1px; color: #d0bcff; font-size: 16px; font-weight: 500; line-height: 1; white-space: nowrap; }
.ec-rail-brand small { color: #fff; font-size: 10.5px; font-weight: 500; }
.ec-rail-divider { position: absolute; top: 40px; left: 4px; right: 4px; height: 1px; background: var(--ec-line); }
.ec-module-nav { position: absolute; top: 48px; right: 4px; bottom: 76px; left: 4px; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #78857d88 transparent; }
.ec-panel .ec-rail-button { position: relative; display: flex; align-items: center; flex-shrink: 0; gap: 8px; width: 100%; height: 30px; padding: 0 8px; overflow: hidden; color: var(--ec-secondary); border: none; border-radius: 4px; background: transparent; text-align: left; font-size: 11.5px; transition: background .12s, color .12s, transform .08s; }
.ec-rail-button img { flex: 0 0 14px; width: 14px; height: 14px; object-fit: contain; }
.ec-rail-button span { white-space: nowrap; }
.ec-rail-button:hover { background: #d8cbae10; }
.ec-panel .ec-rail-button[aria-pressed="true"] { color: var(--ec-ink); background: #d8cbae24; }
.ec-rail-button[aria-pressed="true"]::before { position: absolute; top: 7px; bottom: 7px; left: 2px; width: 2px; border-radius: 1px; content: ''; background: var(--ec-accent); }
.ec-panel button:active { transform: scale(.97); }
.ec-rail-account { position: absolute; bottom: 8px; left: 8px; right: 8px; display: flex; align-items: center; gap: 6px; height: 22px; font-size: 9.75px; }
.ec-rail-account::before { position: absolute; top: -46px; left: -4px; right: -4px; height: 1px; content: ''; background: var(--ec-line); }
.ec-avatar { display: grid; flex: 0 0 22px; place-items: center; height: 22px; border-radius: 50%; color: var(--ec-ink); background: #d8cbae26; font-weight: 500; }
.ec-workspace { min-width: 0; display: grid; grid-template-rows: 40px minmax(0, 1fr); gap: 8px; }
.ec-module-column { border-bottom: 1px solid var(--ec-line); }
.ec-feature-nav { display: flex; gap: 6px; height: 40px; padding-top: 2px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #d8cbae88 transparent; }
.ec-feature-group { position: relative; display: flex; align-items: center; flex-shrink: 0; min-width: 64px; height: 32px; border-radius: 4px; transition: background .12s; }
.ec-feature-group:has(.ec-switch) { min-width: 74px; padding-right: 6px; }
.ec-feature-group:hover { background: #d8cbae10; }
.ec-feature-group:has([aria-pressed="true"]) { background: #d8cbae24; }
.ec-feature-group:has([aria-pressed="true"])::after { position: absolute; bottom: 1px; left: 8px; right: 8px; height: 1px; content: ''; background: var(--ec-accent); }
.ec-panel .ec-feature-row { display: flex; flex: 1; align-items: center; height: 32px; padding: 0 10px; color: var(--ec-secondary); border: none; border-radius: 4px; background: transparent; white-space: nowrap; }
.ec-panel .ec-feature-row[aria-pressed="true"] { color: var(--ec-ink); }
.ec-switch { position: relative; flex: 0 0 26px; width: 26px; height: 16px; padding: 0; border: 1px solid #9ba6a0; border-radius: 8px; background: #292f33; transition: background .15s, border-color .15s; }
.ec-switch-thumb { position: absolute; top: 3px; left: 3px; width: 8px; height: 8px; border-radius: 50%; background: #9ba6a0; transition: left .15s, top .15s, width .15s, height .15s, background .15s; }
.ec-switch[aria-checked="true"] { border-color: transparent; background: var(--ec-accent); }
.ec-switch[aria-checked="true"] .ec-switch-thumb { top: 1px; left: 11px; width: 12px; height: 12px; background: #242821; }
.ec-detail-controls { position: absolute; top: 8px; right: 6px; bottom: 4px; left: 4px; overflow: auto; scrollbar-width: thin; scrollbar-color: #78857d88 transparent; }
.ec-parameter-notice { margin: 0; color: var(--ec-secondary); font-size: 10.25px; line-height: 1.6; }
.ec-module-enable:disabled { cursor: default; opacity: .4; }
.ec-hotbar { position: absolute; left: 50%; bottom: 16px; translate: -50% 0; display: grid; grid-template-columns: repeat(9, 1fr); width: min(396px, calc(100% - 28px)); pointer-events: none; }
.ec-hotbar-slot { position: relative; aspect-ratio: 1; border: 1px solid #ffffff9c; background: transparent; }
.ec-hotbar-slot + .ec-hotbar-slot { border-left: 0; }
.ec-hotbar-slot.is-selected::after { position: absolute; content: ""; inset: -3px; border: 1px solid #fff; }
.ec-hotbar-sword { position: absolute; width: 80%; height: 80%; top: 10%; left: 10%; overflow: visible; }
.ec-hotbar-sword path { fill: none; stroke: #fff; stroke-width: .45; stroke-linejoin: miter; }
@media (prefers-reduced-motion: no-preference) {
  .ec-panel::before { animation: ec-panel-gradient 18s ease-in-out infinite; }
  @keyframes ec-panel-gradient { 0%, 100% { background-position: 0% 20%; } 50% { background-position: 100% 80%; } }
  .ec-ui-dialog[open] .ec-panel:not(.is-closing) { animation: ec-panel-enter .18s ease-out; }
  @keyframes ec-panel-enter { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
}
@media (max-width: 720px) {
  .ec-world-toolbar { top: 12px; left: 14px; right: 14px; gap: 8px; }
  .ec-world-actions { gap: 5px; }
  .ec-world-actions button { min-height: 38px; padding: .45rem .55rem; font-size: .7rem; }
  .ec-world-state { top: 67px; left: 14px; }
  .ec-ui-exit { top: 12px; right: 14px; }
}