/* 3D-мир хаба: полноэкранная сцена и интерфейс поверх неё в стиле терминала хаба. Только тёмная тема. */
:root {
  --bg: #030704;
  --panel: rgba(4, 12, 7, .86);
  --panel-solid: #06120a;
  --line: #16351f;
  --line-2: #22502f;
  --text: #c7f5d2;
  --dim: #6fa97c;
  --green: #3dff7a;
  --green-ink: #021006;
  --bad: #ff5c6c;
  --gold: #ffd166;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { font: 14px/1.5 var(--mono); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; }
.hidden { display: none !important; }
button, input { font: inherit; color: inherit; }
a { color: var(--green); }
h2, h3 { margin: 0; }

#stage { position: fixed; inset: 0; }
#stage canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#stage canvas:active { cursor: grabbing; }
.w-fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; }

.w-cursor { animation: w-blink 1.1s steps(1) infinite; }
@keyframes w-blink { 50% { opacity: 0; } }

/* ---------- Окно-терминал ---------- */
.w-term { background: var(--panel-solid); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 0 0 1px rgba(61, 255, 122, .08), 0 20px 60px rgba(0, 0, 0, .6); overflow: hidden; }
.w-term-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: #040d07; color: var(--dim); font-size: 12px; }
.w-term-bar i { width: 10px; height: 10px; border-radius: 50%; background: #1d3a25; }
.w-term-bar i:nth-child(1) { background: #ff5f57; } .w-term-bar i:nth-child(2) { background: #febc2e; } .w-term-bar i:nth-child(3) { background: #28c840; }
.w-term-bar span { margin-left: 8px; }
.w-term-body { padding: 18px 20px 20px; }
.w-btn { padding: 9px 16px; border: 1px solid var(--green); border-radius: 8px; background: var(--green); color: var(--green-ink); font-weight: 800; cursor: pointer; }
.w-btn:hover { filter: brightness(1.1); }
.w-btn.ghost { background: transparent; color: var(--green); }

/* ---------- Загрузка ---------- */
.w-loading { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #07160c, #020503 70%); padding: 16px; }
.w-loading .w-term { width: min(520px, 100%); }
.w-boot { margin: 0; padding: 18px 20px; min-height: 150px; color: var(--green); white-space: pre-wrap; font: 13px/1.7 var(--mono); }
.w-boot a { color: var(--gold); }

/* ---------- Шапка ---------- */
.w-top { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; pointer-events: none; background: linear-gradient(rgba(2, 6, 3, .75), rgba(2, 6, 3, 0)); }
.w-top > * { pointer-events: auto; }
.w-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--green); font-weight: 800; letter-spacing: .08em; font-size: 14px; text-shadow: 0 0 12px rgba(61, 255, 122, .45); white-space: nowrap; min-width: 0; }
.w-brand img { height: 30px; width: auto; }
.w-badge.gold { border-color: #ffd166; color: #2a1d00; background: #ffd166; }
body[data-mode="teacher"] .s-only, body[data-mode="student"] .t-only { display: none !important; }
.w-badge { font-size: 10px; letter-spacing: .1em; padding: 2px 7px; border: 1px solid var(--gold); color: var(--gold); border-radius: 999px; text-shadow: none; }
.w-top-right { display: flex; align-items: center; gap: 10px; }
.w-online { padding: 4px 10px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel); color: var(--green); font-size: 12px; }
.w-menu { position: relative; }
.w-menu summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel); cursor: pointer; }
.w-menu summary::-webkit-details-marker { display: none; }
#me-av { font-size: 18px; }
#me-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-caret { color: var(--dim); }
.w-menu-list { position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; display: flex; flex-direction: column; padding: 6px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel-solid); box-shadow: 0 16px 40px rgba(0, 0, 0, .6); }
.w-menu-list button, .w-menu-list a { text-align: left; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text); text-decoration: none; cursor: pointer; }
.w-menu-list button:hover, .w-menu-list a:hover { background: #0b2213; color: var(--green); }

/* ---------- Лента событий и подсказка ---------- */
.w-feed { position: fixed; top: 58px; left: 50%; transform: translateX(-50%); z-index: 9; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; width: min(560px, calc(100% - 32px)); }
.w-feed-item { padding: 7px 14px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line-2); color: var(--text); font-size: 13px; text-align: center; animation: w-in .35s ease-out; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
.w-feed-item.gold { border-color: var(--gold); color: var(--gold); }
.w-feed-item.goal { border-color: #7ad7ff; color: #bfeaff; font-size: 16px; font-weight: 800; }
.w-feed-item.out { opacity: 0; transition: opacity .6s; }
@keyframes w-in { from { opacity: 0; transform: translateY(-8px); } }
.w-prompt { position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%); z-index: 9; padding: 9px 16px; border: 1px solid var(--green); border-radius: 10px; background: var(--panel); color: var(--text); pointer-events: none; white-space: nowrap; box-shadow: 0 0 24px rgba(61, 255, 122, .15); }
.w-prompt kbd { display: inline-block; min-width: 24px; margin-right: 8px; padding: 1px 7px; border: 1px solid var(--green); border-radius: 5px; color: var(--green); font: 800 13px var(--mono); text-align: center; }

/* ---------- Чат ---------- */
.w-chat { position: fixed; left: 16px; bottom: 16px; z-index: 9; width: min(400px, calc(100% - 230px)); pointer-events: none; }
.w-chat-log { display: flex; flex-direction: column; gap: 3px; margin-bottom: 6px; }
.w-chat-line { align-self: flex-start; max-width: 100%; padding: 3px 9px; border-radius: 6px; background: rgba(3, 9, 5, .72); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; transition: opacity .8s; }
.w-chat-line b { font-weight: 700; }
.w-chat-line.sys { color: var(--dim); font-style: italic; }
.w-chat-line.sys.gold { color: var(--gold); font-style: normal; }
.w-chat-line.faded { opacity: 0; }
.w-chat.open .w-chat-line.faded { opacity: .85; }
.w-chat-form { pointer-events: auto; }
.w-chat-form input { width: 100%; padding: 9px 12px; border: 1px solid var(--green); border-radius: 8px; background: var(--panel-solid); outline: none; user-select: text; -webkit-user-select: text; }
.w-chat-hint { margin: 0; font-size: 11px; color: var(--dim); text-shadow: 0 1px 2px #000; }

/* ---------- Карта ---------- */
.w-map { position: fixed; right: 16px; bottom: 16px; z-index: 9; display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
#minimap { width: 180px; height: 180px; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(3, 9, 5, .8); }
.w-map-btns { display: flex; gap: 6px; }
.w-map-btns button { flex: 1; padding: 7px 8px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel); color: var(--text); cursor: pointer; font-size: 12px; }
.w-map-btns button:last-child { flex: none; width: 38px; }
.w-map-btns button:hover { border-color: var(--green); color: var(--green); }

/* ---------- Окна ---------- */
.w-modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgba(1, 4, 2, .6); }
.w-modal .w-term { width: min(520px, 100%); }
.w-modal h2 { color: var(--green); font-size: 18px; margin-bottom: 12px; }
.w-keys { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 18px; font-size: 13px; }
.w-keys dt { color: var(--green); white-space: nowrap; }
.w-keys dd { margin: 0; color: var(--text); }

.w-overlay { position: fixed; inset: 0; z-index: 20; display: flex; padding: 18px; background: rgba(1, 4, 2, .72); }
.w-ov-panel { flex: 1; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel-solid); overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .7); animation: w-zoom .28s ease-out; }
@keyframes w-zoom { from { opacity: 0; transform: scale(.96); } }
.w-ov-bar { display: flex; align-items: center; gap: 14px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: #040d07; }
.w-ov-bar h2 { font-size: 14px; color: var(--green); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-ov-tabs { display: flex; gap: 6px; flex: 1; min-width: 0; }
.w-ov-tabs button { padding: 5px 12px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--dim); cursor: pointer; white-space: nowrap; }
.w-ov-tabs button.active { border-color: var(--tab, var(--green)); color: var(--tab, var(--green)); background: rgba(255, 255, 255, .04); }
.w-ov-bar .w-btn { padding: 6px 14px; white-space: nowrap; }
.w-ov-body { flex: 1; position: relative; min-height: 0; display: flex; }
.w-ov-body iframe { flex: 1; width: 100%; height: 100%; border: 0; background: #0b0d12; }
.w-ov-body iframe.page { background: #fff; }

/* выбор квеста за компьютером */
.w-choose { flex: 1; display: grid; place-content: center; gap: 22px; padding: 24px; background: radial-gradient(circle at 50% 30%, #07170d, #030805 70%); }
.w-choose > p { margin: 0; text-align: center; color: var(--dim); }
.w-choose-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 320px)); gap: 18px; justify-content: center; }
.w-qcard { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 14px; border: 1px solid; text-align: left; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.w-qcard:hover, .w-qcard:focus-visible { transform: translateY(-3px); outline: none; }
.w-qcard b { font-size: 22px; }
.w-qcard small { opacity: .8; font-size: 13px; }
.w-qcard .bar { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.w-qcard .bar i { display: block; height: 100%; border-radius: inherit; background: currentColor; }
.w-qcard.html .bar i { background: #f16529; }
.w-qcard.css .bar i { background: #d6b778; }
.w-qcard.html { color: #ffd9c9; border-color: #e44d26; background: linear-gradient(160deg, #2a1209, #140a07); font-family: system-ui, "Segoe UI", sans-serif; }
.w-qcard.html b { color: #f16529; }
.w-qcard.html:hover { box-shadow: 0 12px 40px rgba(228, 77, 38, .3); }
.w-qcard.css { color: #efe6d8; border-color: #d6b778; background: linear-gradient(160deg, #1d1a2c, #0f1020); font-family: "Cormorant Garamond", Georgia, serif; }
.w-qcard.css b { color: #d6b778; font-style: italic; font-size: 28px; }
.w-qcard.css small { font-family: var(--mono); font-size: 12px; }
.w-qcard.css:hover { box-shadow: 0 12px 40px rgba(214, 183, 120, .25); }

/* работа одноклассника: страница слева, её код справа */
.w-work2 { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; }
.w-work2 iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.w-code { margin: 0; padding: 14px 16px; overflow: auto; background: #050b07; border-left: 1px solid var(--line); color: #c7f5d2; font: 13px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.w-code .tk-t { color: #ff9f6b; } .w-code .tk-p { color: #6fa97c; } .w-code .tk-a { color: #a5d8ff; } .w-code .tk-v { color: #c0eb75; }
.w-code .tk-c { color: #5f7a68; font-style: italic; } .w-code .tk-d { color: #b197fc; } .w-code .tk-e { color: #ffd43b; }
.w-code .tk-sel { color: #ff9fbd; } .w-code .tk-prop { color: #9fd3ff; } .w-code .tk-val { color: #c7f5d2; } .w-code .tk-num { color: #ffd166; }
.w-code .tk-col { color: #7ee2a8; } .w-code .tk-fn { color: #c3a6ff; } .w-code .tk-at { color: #3dff7a; } .w-code .tk-str { color: #ffd166; } .w-code .tk-imp { color: #ff5c6c; }
@media (max-width: 760px) { .w-work2 { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } .w-code { border-left: 0; border-top: 1px solid var(--line); } }
/* работа одноклассника */
.w-work { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.w-work-empty { flex: 1; display: grid; place-content: center; color: var(--dim); text-align: center; padding: 24px; }

/* ---------- Гардероб ---------- */
.w-wardrobe { position: fixed; left: 16px; top: 58px; z-index: 11; width: 318px; max-height: calc(100vh - 80px); overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid #6b5a22; border-radius: 12px; background: rgba(8, 7, 2, .92); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); animation: w-in .25s ease-out; }
.w-wr-head { display: flex; justify-content: space-between; align-items: center; color: #ffd166; margin-bottom: 4px; }
.w-wr-head .w-btn { padding: 5px 14px; }
.w-wardrobe h3 { margin: 6px 0 0; font-size: 12px; color: #c9b67a; letter-spacing: .06em; text-transform: uppercase; }
.w-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.w-swatches button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .15); cursor: pointer; padding: 0; font-size: 12px; color: #fff; text-shadow: 0 1px 2px #000; }
.w-swatches button.active { border-color: #ffd166; box-shadow: 0 0 0 2px rgba(255, 209, 102, .4); transform: scale(1.1); }
.w-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.w-items button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border: 1px solid #4a3f18; border-radius: 8px; background: #141105; color: #f3e6bf; cursor: pointer; font-size: 10px; line-height: 1.2; }
.w-items button span { font-size: 20px; line-height: 1; }
.w-items button.active { border-color: #ffd166; background: #2a2208; }
.w-items button:hover, .w-swatches button:hover { border-color: #ffd166; }

/* ---------- Вход преподавателя ---------- */
.w-tlogin { display: flex; flex-direction: column; gap: 6px; padding: 0 20px 20px; }
.w-tlogin label { font-size: 12px; color: var(--dim); }
.w-tlogin input { padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 8px; background: #030805; outline: none; user-select: text; -webkit-user-select: text; }
.w-tlogin input:focus { border-color: var(--green); }
.w-tlogin .w-btn { margin-top: 8px; }
.w-err { margin: 0; min-height: 1.4em; color: var(--bad); font-size: 13px; }

/* ---------- Пульт преподавателя ---------- */
.w-tpanel { position: fixed; right: 16px; top: 58px; bottom: 262px; z-index: 9; width: 320px; display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid #6b5a22; border-radius: 12px; background: rgba(8, 7, 2, .9); overflow-y: auto; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
.w-tp-head { display: flex; justify-content: space-between; align-items: center; color: #ffd166; }
.w-tp-head button { border: 0; background: transparent; color: var(--dim); cursor: pointer; font-size: 14px; }
.w-tp-row { display: flex; gap: 6px; flex-wrap: wrap; }
.w-tp-row button { flex: 1; padding: 7px 8px; border: 1px solid #4a3f18; border-radius: 8px; background: #141105; color: #f3e6bf; cursor: pointer; font-size: 12px; white-space: nowrap; }
.w-tp-row button:hover { border-color: #ffd166; }
.w-tp-tg.on { background: #ffd166; color: #2a1d00; border-color: #ffd166; font-weight: 700; }
.w-tpanel h3 { margin: 6px 0 0; font-size: 12px; color: #c9b67a; letter-spacing: .06em; text-transform: uppercase; }
.w-tpanel h3 b { color: #ffd166; }
.w-tp-list { display: flex; flex-direction: column; gap: 4px; }
.w-tp-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; padding: 6px 8px; border-radius: 8px; background: rgba(255, 255, 255, .04); font-size: 12px; }
.w-tp-item.hand { background: rgba(255, 209, 102, .12); border: 1px solid rgba(255, 209, 102, .35); }
.w-tp-item .nm { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-tp-item .sub { grid-column: 1; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-tp-item .msg { grid-column: 1 / -1; color: #f3e6bf; font-style: italic; overflow-wrap: anywhere; }
.w-tp-item .acts { grid-row: 1 / span 2; grid-column: 2; display: flex; gap: 4px; }
.w-tp-item .acts button { padding: 3px 7px; border: 1px solid #4a3f18; border-radius: 6px; background: #141105; color: #f3e6bf; cursor: pointer; font-size: 12px; }
.w-tp-item .acts button:hover { border-color: #ffd166; }
.w-tp-item .acts button.on { background: #ff5c6c; border-color: #ff5c6c; color: #fff; }
.w-tp-empty { color: var(--dim); font-size: 12px; padding: 2px 0; }
.w-chat-line.teacher { background: rgba(40, 30, 0, .85); border: 1px solid rgba(255, 209, 102, .5); }
.w-feed-item.teacher { border-color: #ffd166; color: #ffe8a8; font-weight: 700; }

/* ---------- Тост ---------- */
.w-toast { position: fixed; left: 50%; bottom: 170px; transform: translateX(-50%); z-index: 45; padding: 9px 16px; border-radius: 8px; background: var(--panel-solid); border: 1px solid var(--bad); color: #ffd0d5; }

/* ---------- Сенсорное управление ---------- */
.w-touch { position: fixed; inset: auto 0 0 0; z-index: 9; height: 0; }
.w-stick { position: fixed; left: 24px; bottom: 150px; width: 120px; height: 120px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(3, 9, 5, .5); touch-action: none; }
.w-stick i { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(61, 255, 122, .35); border: 1px solid var(--green); }
.w-touch-btns { position: fixed; right: 24px; bottom: 250px; display: flex; flex-direction: column; gap: 10px; }
.w-touch-btns button { width: 58px; height: 58px; border-radius: 50%; border: 1px solid var(--green); background: rgba(3, 9, 5, .6); color: var(--green); font-size: 20px; font-weight: 800; touch-action: none; }

@media (max-width: 760px) {
  .w-brand span, .w-badge { display: none; }
  .w-chat { width: calc(100% - 32px); bottom: 12px; }
  .w-chat-hint { display: none; }
  .w-map { top: 60px; bottom: auto; }
  #minimap { width: 120px; height: 120px; }
  .w-map-btns button:first-child { font-size: 11px; }
  .w-overlay { padding: 0; }
  .w-ov-panel { border-radius: 0; }
  .w-prompt { bottom: 170px; white-space: normal; text-align: center; }
  .w-tpanel { left: 8px; right: 8px; width: auto; top: 190px; bottom: 90px; }
}