:root {
  --blue-950: #062c66;
  --blue-900: #083d87;
  --blue-800: #0754aa;
  --blue-700: #0875d1;
  --blue-500: #28a9f0;
  --sky: #8edbff;
  --panel: rgba(235, 249, 255, 0.94);
  --panel-strong: #f8fdff;
  --ink: #12345f;
  --muted: #55769e;
  --yellow: #ffc83d;
  --yellow-dark: #e58a00;
  --green: #51c936;
  --red: #ee5f69;
  --purple: #8d65e8;
  --shadow: 0 10px 0 rgba(3, 53, 112, 0.22), 0 20px 40px rgba(3, 50, 102, 0.25);
  --soft-shadow: 0 6px 0 rgba(3, 53, 112, 0.12), 0 12px 24px rgba(3, 50, 102, 0.14);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", system-ui, sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, #0878d9 0%, #3fb7ef 55%, #7fd9ef 100%);
}
button, input { font: inherit; }
button { color: inherit; }

.game-root {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  padding: 14px;
  background:
    radial-gradient(circle at 12% 7%, rgba(255,255,255,.42) 0 7%, transparent 8%),
    radial-gradient(circle at 85% 11%, rgba(255,255,255,.28) 0 9%, transparent 10%),
    linear-gradient(180deg, #0581df 0 35%, #6ac9ee 69%, #92d7b4 100%);
}
.sky-decor { position: fixed; pointer-events: none; filter: blur(1px); opacity: .35; background: white; border-radius: 999px; }
.cloud-one { width: 230px; height: 55px; top: 104px; left: -30px; }
.cloud-two { width: 270px; height: 65px; top: 160px; right: -50px; }

.topbar {
  max-width: 1500px;
  margin: 0 auto 14px;
  min-height: 86px;
  border: 2px solid rgba(255,255,255,.45);
  border-radius: 28px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: linear-gradient(180deg, rgba(5,91,184,.96), rgba(7,63,137,.96));
  box-shadow: var(--shadow);
  position: relative;
  z-index: 2;
}
.logo-button { border: 0; background: transparent; cursor: pointer; text-align: left; padding: 0; display: flex; flex-direction: column; }
.logo-main {
  font-size: clamp(26px, 4vw, 48px);
  line-height: .9;
  font-weight: 1000;
  letter-spacing: -2px;
  color: #ffd53f;
  -webkit-text-stroke: 2px #703b00;
  text-shadow: 0 4px 0 #8c4a00, 0 7px 10px rgba(0,0,0,.2);
}
.logo-sub { color: white; font-size: 12px; text-transform: uppercase; letter-spacing: 1.4px; margin-left: 5px; margin-top: 6px; }
.top-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; justify-content: flex-end; }
.top-nav button, .resource-pill {
  border: 1px solid rgba(255,255,255,.42);
  background: rgba(255,255,255,.14);
  color: white;
  border-radius: 16px;
  padding: 10px 13px;
  font-weight: 900;
  box-shadow: inset 0 1px rgba(255,255,255,.25);
}
.top-nav button { cursor: pointer; }
.top-nav button:hover, .top-nav button.active { background: rgba(255,255,255,.28); transform: translateY(-1px); }
.resource-pill { white-space: nowrap; }

.game-panel {
  border: 2px solid rgba(255,255,255,.7);
  border-radius: 26px;
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.map-screen {
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 260px minmax(520px, 1fr) 260px;
  gap: 14px;
  align-items: stretch;
}
.player-panel, .map-info { padding: 16px; }
.player-card { display: flex; align-items: center; gap: 11px; background: rgba(255,255,255,.75); border: 1px solid #b7e4f8; padding: 10px; border-radius: 18px; }
.avatar { width: 58px; height: 58px; display: grid; place-items: center; font-size: 38px; border-radius: 18px; background: linear-gradient(145deg, #ffd66a, #ff9c3d); border: 3px solid white; box-shadow: 0 5px 0 #cf7420; }
.player-card div:last-child { display: flex; flex-direction: column; }
.player-card small, .player-card span { color: var(--muted); font-size: 12px; }
.player-card strong { font-size: 19px; }
.xp-bar, .overall-bar, .node-progress { background: #c7e4ef; border-radius: 999px; overflow: hidden; box-shadow: inset 0 2px 4px rgba(0,0,0,.15); }
.xp-bar { height: 12px; margin: 10px 4px 4px; }
.xp-bar span, .overall-bar span, .node-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #9cea3d, #35bc3b); }
.robot { height: 210px; position: relative; margin: 8px auto -2px; width: 210px; animation: hoverRobot 3s ease-in-out infinite; }
.robot-small { transform: scale(.72); transform-origin: center bottom; margin: -25px auto -35px; }
@keyframes hoverRobot { 0%,100%{ transform: translateY(0)}50%{ transform: translateY(-7px)} }
.robot-body { position: absolute; width: 118px; height: 102px; left: 46px; top: 62px; border-radius: 34px 34px 42px 42px; background: linear-gradient(145deg, #f8fdff, #a8cfe5 55%, #6c96b5); border: 5px solid #295c85; box-shadow: inset 0 5px white, 0 10px 0 rgba(10,70,115,.25); }
.robot-screen { position: absolute; inset: 17px 14px 29px; border-radius: 22px; background: linear-gradient(180deg,#041c3b,#063d63); border: 4px solid #67dfff; display: flex; align-items: center; justify-content: center; gap: 13px; color: #4af2ff; font-weight: 1000; }
.robot-eye { width: 9px; height: 17px; border-radius: 50%; background: #44f4ff; box-shadow: 0 0 10px #44f4ff; }
.robot-smile { font-size: 24px; margin-top: 10px; }
.robot-badge { position: absolute; width: 28px; height: 28px; border-radius: 50%; background: #ffc52b; border: 3px solid #aa6000; color: #623700; display: grid; place-items: center; left: 43px; bottom: -6px; font-weight: 1000; }
.robot-antenna { position: absolute; width: 7px; height: 34px; background: #345d7b; left: 102px; top: 36px; border-radius: 6px; }
.robot-antenna:before { content:""; position:absolute; width:16px; height:16px; border-radius:50%; background:#ffd23d; left:-4px; top:-8px; border:3px solid #7d5300; }
.propeller { position:absolute; top:38px; width:66px; height:16px; border-radius:50%; background:#466f8c; border:4px solid #183e5d; }
.propeller span { position:absolute; width:76px; height:5px; background:#b7e7f4; top:2px; left:-9px; border-radius:999px; animation: spinBlade .7s linear infinite; }
.propeller-left { left:0; } .propeller-right { right:0; }
@keyframes spinBlade { to { transform: rotate(360deg);} }
.robot-arm { position:absolute; width:58px; height:18px; top:111px; border-radius:999px; background:linear-gradient(180deg,#dcebf2,#6e98b5); border:4px solid #295c85; }
.arm-left { left:7px; transform:rotate(-30deg); } .arm-right { right:7px; transform:rotate(30deg); }
.robot-jet { position:absolute; left:93px; bottom:20px; color:#ffcf31; font-size:28px; filter:drop-shadow(0 5px 4px #ff7b00); }
.robot-dialog { border-radius: 18px; background: white; border: 2px solid #a4d9ed; padding: 12px; position: relative; box-shadow: var(--soft-shadow); }
.robot-dialog:before { content:""; position:absolute; width:16px; height:16px; background:white; border-left:2px solid #a4d9ed; border-top:2px solid #a4d9ed; transform:rotate(45deg); top:-10px; left:45px; }
.robot-dialog strong { color: var(--blue-800); }
.robot-dialog p { margin: 4px 0 0; font-size: 14px; line-height: 1.35; }
.resource-list { margin-top: 12px; display: grid; gap: 7px; }
.resource-list div { display:flex; justify-content:space-between; background:rgba(255,255,255,.65); border:1px solid #c5e6f2; border-radius:12px; padding:8px 10px; font-size:13px; }
.teacher-toggle { display:flex; gap:8px; align-items:flex-start; font-size:12px; color:var(--muted); margin-top:12px; }

.city-map {
  min-height: 760px;
  position: relative;
  background:
    linear-gradient(rgba(11, 105, 164, .13), rgba(12, 88, 69, .2)),
    url('./assets/city-map-v4.jpg') center/cover no-repeat;
}
.city-map:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(7,55,82,.22)); pointer-events:none; }
.map-title { position:relative; z-index:2; margin:12px auto 0; width:max-content; max-width:90%; text-align:center; padding:10px 48px; border-radius:15px 15px 28px 28px; color:white; background:linear-gradient(180deg,#2296ef,#0755ae); border:2px solid #b7e7ff; box-shadow:0 6px 0 #053e86; }
.map-title span { display:block; font-size:25px; font-weight:1000; }
.map-title small { opacity:.9; }
.city-nodes { position:relative; z-index:2; min-height:690px; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(3,1fr); gap:22px; padding:35px 28px 28px; align-items:center; }
.city-node { --lesson-color:#26a9e0; cursor:pointer; border:3px solid white; border-radius:20px; padding:10px 9px; background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(220,244,252,.94)); box-shadow:0 7px 0 color-mix(in srgb, var(--lesson-color) 65%, #123 35%), 0 14px 20px rgba(0,39,84,.3); display:flex; flex-direction:column; align-items:center; min-height:142px; transition:.2s ease; position:relative; }
.city-node:hover:not(:disabled) { transform:translateY(-5px) scale(1.02); }
.city-node.complete { outline:4px solid #6ee43b; }
.city-node.locked { filter:grayscale(.7); opacity:.72; cursor:not-allowed; }
.node-number { position:absolute; left:-9px; top:-12px; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--lesson-color); border:3px solid white; color:white; font-weight:1000; box-shadow:0 4px 0 rgba(0,0,0,.25); }
.node-building { font-size:43px; filter:drop-shadow(0 5px 2px rgba(0,0,0,.18)); }
.city-node strong { font-size:13px; line-height:1.05; text-align:center; min-height:29px; display:grid; place-items:center; }
.node-progress { width:100%; height:8px; margin-top:8px; }
.city-node small { font-size:11px; margin-top:4px; color:var(--muted); }

.map-info h2 { margin:0 0 12px; }
.big-progress { width:130px; height:130px; margin:10px auto; border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; background:conic-gradient(#55cd39 calc(var(--progress, 0) * 1%), #d6edf4 0); border:10px solid white; box-shadow:0 7px 0 #8ebdca; }
.big-progress strong { font-size:32px; } .big-progress span { font-size:12px; color:var(--muted); }
.overall-bar { height:15px; margin:14px 0; }
.map-info ul { list-style:none; padding:0; display:grid; gap:9px; font-size:13px; }
.map-info li { padding:8px; border-radius:10px; background:rgba(255,255,255,.62); }
.primary-button, .secondary-button, .concept-button {
  border:0; border-radius:16px; padding:12px 18px; font-weight:1000; cursor:pointer; transition:.15s ease; }
.primary-button { color:#173b00; background:linear-gradient(180deg,#9af153,#4fc12f); border:2px solid #e6ffd7; box-shadow:0 5px 0 #27931e, 0 9px 15px rgba(38,120,24,.25); }
.primary-button:hover { transform:translateY(-2px); }
.secondary-button { color:#0e4b85; background:linear-gradient(180deg,#fff,#d9eff7); border:2px solid #9ed5e9; box-shadow:0 4px 0 #78b5cb; }
.concept-button { color:white; background:linear-gradient(180deg,#6d8ee8,#4c5ab9); border:2px solid #b6c7ff; box-shadow:0 4px 0 #303b8e; width:100%; margin-top:12px; }
.wide { width:100%; }

.lesson-screen {
  max-width:1500px;
  margin:0 auto;
  display:grid;
  grid-template-columns:260px minmax(0,1fr) 260px;
  gap:14px;
  align-items:stretch;
}
.task-sidebar, .helper-panel { min-height:780px; }
.back-map { border:0; width:100%; padding:12px; background:linear-gradient(180deg,#167ed0,#0754a5); color:white; font-weight:900; cursor:pointer; text-align:left; }
.lesson-heading { display:flex; gap:10px; align-items:center; padding:14px; border-bottom:1px solid #b6dce9; background:white; }
.lesson-heading > span { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font-size:27px; border:3px solid white; box-shadow:0 4px 0 rgba(0,0,0,.18); }
.lesson-heading div { display:flex; flex-direction:column; }
.lesson-heading small { color:var(--muted); }
.lesson-heading strong { line-height:1.05; }
.lesson-task-list { padding:9px; display:grid; gap:6px; max-height:690px; overflow:auto; }
.lesson-task-list button { display:flex; align-items:center; gap:8px; text-align:left; width:100%; border:1px solid #b8dfec; background:rgba(255,255,255,.7); border-radius:12px; padding:7px; cursor:pointer; }
.lesson-task-list button > span { flex:0 0 28px; height:28px; border-radius:50%; display:grid; place-items:center; background:#cfe8f2; font-size:12px; font-weight:900; }
.lesson-task-list button div { min-width:0; display:flex; flex-direction:column; }
.lesson-task-list button strong { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lesson-task-list button small { font-size:10px; color:var(--muted); }
.lesson-task-list button.active { border-color:#1987db; background:#dff4ff; box-shadow:inset 4px 0 #1682d6; }
.lesson-task-list button.done > span { background:#65ce42; color:white; }

.task-stage { min-height:780px; }
.task-stage-header { padding:12px 16px; background:linear-gradient(180deg,#167bd1,#0756a9); color:white; display:flex; justify-content:space-between; gap:15px; align-items:center; }
.task-stage-header > div:first-child { display:flex; align-items:center; gap:10px; }
.category-badge { background:#ffd344; color:#5c3a00; border-radius:999px; padding:5px 10px; font-size:11px; border:2px solid #fff0a8; }
.lesson-progress-dots { display:flex; flex-wrap:wrap; gap:5px; justify-content:flex-end; }
.lesson-progress-dots span { width:18px; height:8px; border-radius:999px; background:rgba(255,255,255,.32); }
.lesson-progress-dots span.done { background:#8be842; }
.lesson-progress-dots span.current { outline:2px solid white; }
.task-content { padding:24px clamp(16px,4vw,44px) 28px; }
.task-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.task-title-row small { color:var(--muted); text-transform:uppercase; letter-spacing:.8px; }
.task-title-row h1 { margin:4px 0 0; font-size:clamp(25px,3.6vw,42px); color:#103b72; }
.task-icon { font-size:54px; background:white; border:2px solid #bbe3f1; width:78px; height:78px; display:grid; place-items:center; border-radius:22px; box-shadow:var(--soft-shadow); }
.task-prompt { font-size:19px; line-height:1.45; max-width:860px; margin:18px 0 24px; }
.interaction-stack { display:grid; gap:16px; }
.microcopy { margin:0; color:var(--muted); font-size:13px; }
.answer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.concept-models { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.concept-model { border:3px solid #82c9df; border-radius:22px; padding:16px; background:linear-gradient(180deg,#f8fdff,#dff5fb); box-shadow:0 6px 0 #9bc9d7; }
.concept-model-title { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; margin-bottom:12px; }
.concept-model-title strong { color:#14558c; font-size:17px; }
.concept-model-title span { color:#496f8f; font-size:13px; text-align:right; }
.concept-groups { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:8px 0 14px; }
.concept-group { min-width:72px; min-height:64px; padding:8px; display:flex; flex-wrap:wrap; justify-content:center; align-content:center; gap:3px; border:3px solid #f0a227; border-radius:16px; background:linear-gradient(180deg,#fff5b7,#ffd75d); box-shadow:0 4px 0 #c57a0d; }
.concept-group span { font-size:24px; }
.concept-equations { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:9px; border-radius:14px; background:white; border:2px solid #b9dfeb; padding:10px; }
.concept-equations span, .concept-equations strong { font-size:19px; }
.concept-equations b { color:#2b86c9; font-size:22px; }
.concept-question { margin:2px 0 0; font-weight:1000; color:#173f6b; }
.answer-card { min-height:62px; border:2px solid #9fd5e9; border-radius:16px; background:linear-gradient(180deg,#fff,#e9f8fd); box-shadow:0 5px 0 #a2cedd; cursor:pointer; padding:12px; font-weight:900; }
.answer-card:hover { transform:translateY(-2px); }
.answer-card.selected { border-color:#2d8fe0; background:linear-gradient(180deg,#d9f5ff,#a8e3fb); box-shadow:0 5px 0 #3a9bd2; }
.multi-card { display:flex; align-items:center; gap:10px; text-align:left; }
.check-square { width:26px; height:26px; border-radius:8px; border:2px solid #8dc9dd; display:grid; place-items:center; background:white; flex:none; }
.multi-card.selected .check-square { background:#48c63a; color:white; border-color:#2b9a22; }
.check-button { justify-self:center; min-width:190px; margin-top:5px; }
.input-interaction { max-width:480px; }
.input-interaction label { font-weight:900; }
.input-interaction input { width:100%; border:3px solid #9bcfe2; border-radius:18px; padding:16px 18px; font-size:22px; outline:none; background:white; box-shadow:inset 0 3px 8px rgba(0,64,94,.1); }
.input-interaction input:focus { border-color:#298ed7; box-shadow:0 0 0 4px rgba(41,142,215,.15); }
.sort-list { display:grid; gap:8px; }
.sort-item { display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:10px; background:white; border:2px solid #add9e8; border-radius:14px; padding:9px; cursor:grab; box-shadow:0 4px 0 #bfdae4; }
.sort-number { width:29px; height:29px; border-radius:50%; display:grid; place-items:center; background:#257fd0; color:white; font-weight:900; }
.sort-controls { display:flex; gap:4px; }
.sort-controls button { border:1px solid #9bcfe0; background:#edfaff; border-radius:8px; width:30px; height:30px; cursor:pointer; }
.match-board { display:grid; grid-template-columns:1fr 40px 1fr; gap:10px; align-items:center; }
.match-column { display:grid; gap:10px; }
.match-card { border:2px solid #a7d8e8; border-radius:14px; background:white; padding:12px; cursor:pointer; min-height:55px; font-weight:900; }
.match-card small { display:block; color:#3d9e43; margin-top:4px; }
.match-card.active { background:#fff2b9; border-color:#f2b830; }
.match-card.paired { background:#e3f9dc; border-color:#68c94c; }
.match-card.right { background:#eef5ff; }
.match-lines { text-align:center; font-size:24px; color:#4b8cc2; }
.loose-items { display:flex; flex-wrap:wrap; gap:9px; min-height:60px; border:2px dashed #9fcce0; border-radius:16px; padding:10px; background:rgba(255,255,255,.45); }
.loose-card { border:2px solid #8ac4dd; border-radius:12px; padding:9px 12px; background:white; cursor:grab; }
.loose-card.selected { background:#fff2ad; border-color:#f1b62a; }
.bucket-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.bucket-zone { min-height:120px; border:3px dashed #76b8d2; border-radius:18px; padding:14px; background:rgba(222,247,255,.7); cursor:pointer; text-align:left; }
.bucket-zone strong { display:block; font-size:16px; margin-bottom:10px; }
.bucket-zone span { color:var(--muted); font-size:13px; }
.groups-board { display:grid; grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); gap:12px; }
.group-platform { min-height:145px; border:3px solid #91c7d8; border-radius:20px; background:linear-gradient(180deg,#fff,#e4f7fb); padding:12px; text-align:center; box-shadow:0 6px 0 #95bfcc; }
.group-platform strong { display:block; font-size:12px; }
.group-items { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; align-content:center; min-height:80px; font-size:24px; }
.group-platform > span { font-size:12px; color:var(--muted); }
.counter-control { display:flex; align-items:center; justify-content:center; gap:16px; }
.counter-control button { width:48px; height:48px; border-radius:50%; border:2px solid white; background:#ffbd2e; box-shadow:0 5px 0 #c47d05; font-size:28px; cursor:pointer; }
.grid-visual-wrap { display:grid; justify-items:center; gap:12px; }
.array-grid { display:grid; gap:7px; transition:.3s ease; padding:16px; border:3px solid #8dbbd1; border-radius:22px; background:linear-gradient(145deg,#c9effa,#eafaff); box-shadow:inset 0 4px 9px rgba(0,80,120,.15); }
.array-cell { width:44px; height:44px; display:grid; place-items:center; border-radius:10px; background:linear-gradient(145deg,#ffd55b,#ff9c37); border:2px solid #d57512; color:#7a3b00; box-shadow:0 4px 0 #b85e0d; }
.array-rotated { transform:rotate(2deg); }
.path-board { display:flex; flex-wrap:wrap; gap:8px; align-items:stretch; }
.path-cell { min-height:88px; flex:1 1 125px; border:3px solid #8cc6d9; border-radius:18px; background:linear-gradient(180deg,#fff,#dff4f8); box-shadow:0 5px 0 #92bfcf; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; font-weight:900; }
.path-cell span { font-size:24px; }
.path-cell.selected { background:linear-gradient(180deg,#d4ffb6,#80df56); border-color:#48aa2d; box-shadow:0 5px 0 #2c8d20; }
.build-line { min-height:76px; border:3px dashed #80bfd7; border-radius:18px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:12px; background:white; }
.build-line > span { color:var(--muted); }
.build-line button, .token-bank button { border:2px solid #75b8d4; border-radius:12px; padding:10px 14px; background:#effaff; font-size:20px; font-weight:1000; cursor:pointer; box-shadow:0 3px 0 #86bacc; }
.token-bank { display:flex; flex-wrap:wrap; gap:8px; }
.token-bank button { background:linear-gradient(180deg,#fff5b6,#ffd44e); border-color:#dd9b18; box-shadow:0 4px 0 #bf7910; }
.table-scroller { overflow:auto; border-radius:18px; border:2px solid #8fc8dc; background:white; padding:8px; }
.pythagoras-table { border-collapse:separate; border-spacing:3px; margin:auto; }
.pythagoras-table th { background:#166fb8; color:white; min-width:36px; height:36px; border-radius:8px; }
.pythagoras-table td button { width:38px; height:38px; border:0; border-radius:8px; background:#e7f6fb; cursor:pointer; font-weight:900; color:#173d67; }
.pythagoras-table td button:hover { background:#bfe9f9; }
.pythagoras-table td button.selected { background:#ffd341; outline:3px solid #e78f00; color:#623500; }
.memory-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(105px,1fr)); gap:10px; }
.memory-grid-large { grid-template-columns:repeat(4,minmax(0,1fr)); }
.memory-grid-large .memory-card { min-height:88px; font-size:18px; padding:8px; }
.memory-status { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.memory-shuffle { padding:8px 12px; font-size:12px; }
.memory-card { min-height:76px; border:3px solid #4477c1; border-radius:17px; background:linear-gradient(145deg,#536dd4,#6739a6); color:white; font-size:23px; cursor:pointer; box-shadow:0 6px 0 #313c8f; }
.memory-card.open { background:linear-gradient(180deg,#fff,#dff4ff); color:#123b68; border-color:#65b4dc; }
.memory-card.matched { background:linear-gradient(180deg,#e1ffd1,#87dd5e); border-color:#4dad33; color:#164f0e; }
.hint-box { margin-top:18px; border:2px solid #f2bf3c; background:#fff7cf; border-radius:16px; padding:13px; color:#684900; }
.task-footer-actions { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:18px; }

.helper-panel { padding:14px; }
.helper-robot { height:170px; overflow:hidden; }
.helper-dialog { margin-top:0; }
.lesson-metrics { display:grid; gap:9px; margin-top:13px; }
.lesson-metrics div { background:white; border:1px solid #b9e1ee; border-radius:13px; padding:10px; display:flex; flex-direction:column; }
.lesson-metrics span { color:var(--muted); font-size:11px; text-transform:uppercase; }
.lesson-metrics strong { font-size:14px; }
.card-preview { margin-top:14px; border-radius:18px; background:linear-gradient(145deg,#6448c7,#8b67e6); color:white; padding:14px; border:3px solid #c8baff; box-shadow:0 6px 0 #3c2a8e; }
.card-preview span { font-size:11px; opacity:.8; }
.card-preview strong { display:block; font-size:18px; margin:5px 0; }
.card-preview p { font-size:12px; margin:0; opacity:.9; }

.feedback-overlay, .intro-overlay { position:fixed; inset:0; z-index:30; display:grid; place-items:center; padding:20px; background:rgba(4,25,66,.72); backdrop-filter:blur(8px); }
.feedback-card { max-width:480px; width:100%; text-align:center; background:white; border-radius:28px; border:4px solid #a8dded; padding:25px; box-shadow:0 12px 0 rgba(3,47,97,.4),0 30px 60px rgba(0,0,0,.35); }
.feedback-card.success { border-color:#8fe06e; }
.feedback-card.retry { border-color:#ffcf57; }
.feedback-icon { font-size:65px; animation:pop .35s ease; }
@keyframes pop { from{transform:scale(.4)}to{transform:scale(1)} }
.feedback-card h2 { margin:4px 0 8px; font-size:28px; }
.feedback-card p { line-height:1.45; color:var(--muted); }
.feedback-actions { display:flex; gap:10px; justify-content:center; }
.intro-card { max-width:1100px; width:100%; border-radius:30px; overflow:hidden; background:#effaff; border:4px solid white; box-shadow:0 16px 0 rgba(0,36,85,.42),0 35px 80px rgba(0,0,0,.35); display:grid; grid-template-columns:1.45fr .75fr; }
.intro-card img { width:100%; height:100%; min-height:420px; object-fit:cover; object-position:center; }
.intro-copy { padding:32px; display:flex; flex-direction:column; justify-content:center; background:linear-gradient(180deg,#effaff,#c5edf9); }
.intro-tag { align-self:flex-start; background:#ffd347; color:#623c00; border-radius:999px; padding:7px 12px; font-size:12px; font-weight:900; }
.intro-copy h1 { font-size:clamp(28px,4vw,46px); line-height:1; margin:18px 0; color:#0c4c91; }
.intro-copy p { line-height:1.5; color:#486f96; }
.intro-copy .primary-button { align-self:flex-start; margin-top:12px; }

@media (max-width: 1160px) {
  .map-screen { grid-template-columns:220px 1fr; }
  .map-info { grid-column:1/-1; display:grid; grid-template-columns:130px 1fr 220px; gap:15px; align-items:center; }
  .map-info h2 { display:none; }
  .map-info ul { grid-template-columns:repeat(2,1fr); }
  .lesson-screen { grid-template-columns:220px minmax(0,1fr); }
  .helper-panel { grid-column:1/-1; min-height:auto; display:grid; grid-template-columns:170px 1fr 1fr 1fr; gap:12px; align-items:center; }
  .helper-robot { height:130px; }
  .helper-panel .robot-dialog:before { display:none; }
  .lesson-metrics { margin-top:0; }
  .card-preview { margin-top:0; }
}

@media (max-width: 820px) {
  .game-root { padding:8px; }
  .topbar { border-radius:19px; min-height:auto; align-items:flex-start; }
  .logo-sub { display:none; }
  .top-nav .resource-pill { display:none; }
  .map-screen, .lesson-screen { display:block; }
  .player-panel { display:none; }
  .city-map { min-height:auto; }
  .city-nodes { min-height:auto; grid-template-columns:repeat(2,1fr); grid-template-rows:auto; padding:25px 14px 22px; }
  .map-info { display:block; margin-top:12px; }
  .map-info ul { grid-template-columns:1fr; }
  .task-sidebar { min-height:auto; margin-bottom:10px; }
  .lesson-task-list { display:flex; overflow:auto; max-height:none; }
  .lesson-task-list button { min-width:150px; }
  .task-stage { min-height:auto; }
  .helper-panel { display:none; }
  .task-stage-header { align-items:flex-start; flex-direction:column; }
  .lesson-progress-dots { justify-content:flex-start; }
  .answer-grid { grid-template-columns:1fr; }
  .memory-grid-large { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .match-board { grid-template-columns:1fr 24px 1fr; }
  .intro-card { grid-template-columns:1fr; max-height:90vh; overflow:auto; }
  .intro-card img { min-height:250px; max-height:42vh; }
}

@media (max-width: 520px) {
  .logo-main { font-size:26px; -webkit-text-stroke:1px #703b00; }
  .top-nav button { padding:8px; font-size:0; }
  .top-nav button::first-letter { font-size:18px; }
  .city-nodes { gap:14px; }
  .city-node { min-height:130px; }
  .map-title { padding:9px 20px; }
  .map-title span { font-size:20px; }
  .task-content { padding:17px 13px 22px; }
  .task-title-row h1 { font-size:27px; }
  .task-icon { width:58px; height:58px; font-size:39px; }
  .task-prompt { font-size:17px; }
  .match-board { grid-template-columns:1fr; }
  .match-lines { transform:rotate(90deg); }
  .groups-board { grid-template-columns:repeat(2,1fr); }
  .memory-grid-large { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .concept-model-title { flex-direction:column; }
  .concept-model-title span { text-align:left; }
  .array-cell { width:32px; height:32px; }
  .feedback-card { padding:20px 14px; }
}

.icon-button{font-size:18px}.hidden{display:none!important}.feedback-inline{margin-top:12px}.answer-card[aria-pressed="true"]{border-color:#2d8fe0;background:linear-gradient(180deg,#d9f5ff,#a8e3fb)}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* ===== Version 3: roles, growing city, clearer learning support ===== */
.profile-chip { color:white; font-weight:900; padding:8px 10px; border-radius:14px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.32); }
.auth-screen { max-width:1180px; min-height:calc(100vh - 28px); margin:0 auto; display:grid; grid-template-columns:1.15fr .85fr; gap:20px; align-items:center; }
.auth-hero, .auth-card { padding:28px; }
.auth-hero { min-height:650px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(180deg,rgba(11,100,190,.96),rgba(13,65,135,.98)); color:white; }
.auth-logo { text-align:center; margin-bottom:8px; }
.auth-logo span { display:block; font-size:clamp(44px,8vw,78px); font-weight:1000; color:#ffd23f; -webkit-text-stroke:2px #703b00; text-shadow:0 6px 0 #8a4a00; }
.auth-logo small { text-transform:uppercase; letter-spacing:2px; font-weight:900; }
.auth-card { background:rgba(247,253,255,.97); }
.auth-card h1 { margin:12px 0 20px; font-size:34px; }
.auth-card > label { display:grid; gap:7px; font-weight:900; }
.auth-card input[type="text"], .auth-card input:not([type]) { width:100%; border:2px solid #9bcee4; border-radius:14px; padding:13px; background:white; color:var(--ink); }
.auth-card fieldset { border:0; padding:0; margin:20px 0; display:grid; gap:10px; }
.auth-card legend { font-weight:1000; margin-bottom:8px; }
.role-option { display:grid; grid-template-columns:auto 42px 1fr; grid-template-rows:auto auto; gap:2px 10px; align-items:center; border:2px solid #b7dce9; border-radius:16px; padding:12px; background:white; cursor:pointer; }
.role-option input { grid-row:1 / 3; }
.role-option span { grid-row:1 / 3; font-size:30px; }
.role-option strong { font-size:17px; }
.role-option small { color:var(--muted); }
.saved-profiles { margin-top:20px; padding-top:16px; border-top:1px solid #badbe8; display:grid; gap:8px; }
.saved-profiles p { margin:0 0 5px; font-weight:900; }
.saved-profiles button { display:flex; justify-content:space-between; gap:10px; border:1px solid #acd4e4; border-radius:12px; padding:10px; background:white; cursor:pointer; }
.saved-profiles small { color:var(--muted); }

.city-map { min-height:760px; background:
  radial-gradient(circle at 20% 20%, rgba(255,255,255,.26) 0 7%, transparent 8%),
  radial-gradient(circle at 72% 68%, rgba(255,255,255,.18) 0 8%, transparent 9%),
  linear-gradient(112deg, transparent 0 42%, rgba(64,170,224,.78) 43% 48%, transparent 49%),
  repeating-linear-gradient(35deg, transparent 0 70px, rgba(225,235,210,.68) 72px 88px, transparent 90px 150px),
  linear-gradient(145deg,#8fd07c,#5dae74 52%,#76c990); }
.city-map:after { background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(13,76,77,.16)); }
.city-map.city-complete { background:
  radial-gradient(circle at 18% 20%, rgba(255,241,130,.7) 0 2%, transparent 3%),
  radial-gradient(circle at 78% 18%, rgba(255,255,255,.62) 0 2%, transparent 3%),
  linear-gradient(112deg, transparent 0 42%, rgba(64,170,224,.78) 43% 48%, transparent 49%),
  repeating-linear-gradient(35deg, transparent 0 70px, rgba(225,235,210,.68) 72px 88px, transparent 90px 150px),
  linear-gradient(145deg,#9ed985,#62b97a 52%,#82d49b); }
.city-node.construction .node-building { filter:grayscale(.2) drop-shadow(0 4px 2px rgba(0,0,0,.18)); }
.city-node.locked .node-building { opacity:.45; }
.node-status { font-size:10px; color:var(--muted); min-height:24px; display:grid; place-items:center; text-align:center; }
.city-finale-banner { position:absolute; z-index:3; left:50%; bottom:18px; transform:translateX(-50%); padding:12px 24px; border-radius:999px; background:#fff5b9; border:3px solid #f4b725; font-weight:1000; box-shadow:0 6px 0 #ca8b12; white-space:nowrap; }
.teacher-note, .student-note { margin-top:12px; border-radius:13px; padding:10px; font-size:12px; line-height:1.4; background:#e8f4ff; border:1px solid #a7d4eb; }

.rating-screen { max-width:950px; margin:0 auto; padding:24px; }
.rating-header { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.rating-header h1 { margin:8px 0; }
.rating-header p { color:var(--muted); }
.rating-cup { font-size:84px; }
.rating-list { display:grid; gap:10px; margin:24px 0; }
.rating-row { display:grid; grid-template-columns:48px 52px 1fr auto; align-items:center; gap:12px; background:white; border:2px solid #b6dce9; border-radius:17px; padding:12px 16px; box-shadow:0 4px 0 #bad7e1; }
.rating-row.current { border-color:#ffbf2f; background:#fff7cc; }
.rating-place { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:#1f84d2; color:white; font-weight:1000; }
.rating-avatar { font-size:32px; }
.rating-note { margin-bottom:18px; }

.lesson-explain-button { width:calc(100% - 18px); margin:9px; border:2px solid #d3a432; border-radius:13px; padding:10px; background:#fff4b5; font-weight:900; cursor:pointer; }
.algorithm-panel { margin:14px 0 18px; padding:14px; border:2px solid #8fc6df; border-radius:18px; background:linear-gradient(180deg,#effbff,#dff4fb); }
.algorithm-panel > div { display:flex; align-items:center; gap:8px; }
.algorithm-panel h2 { margin:0; font-size:18px; }
.algorithm-panel ol { margin:10px 0 0; padding-left:26px; display:grid; gap:7px; }
.algorithm-panel li { line-height:1.35; }
.orientation-label { font-weight:900; color:#174f7e; text-align:center; padding:8px 12px; background:#e5f5fb; border-radius:12px; }
.array-grid { width:min(100%,620px); margin:0 auto; transform:none !important; }
.array-cell { min-width:24px; min-height:30px; }
.rotation-note { margin:0; padding:10px 12px; border-radius:12px; background:#fff8d9; border:1px solid #efc74b; font-size:13px; line-height:1.4; }
.reference-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.reference-table .highlight-row td, .reference-table tr.highlight-row th { background:#fff1a8; }
.reference-table .square-cell { outline:2px solid #9b67e4; outline-offset:-3px; }
.compact-table { max-height:430px; margin-top:12px; }
.table-mission { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:11px 14px; border-radius:14px; background:#fff3a7; border:2px solid #f1bb31; }
.table-message { min-height:22px; color:#286180; font-weight:900; }
.pythagoras-table button.hit { background:#72d44c; color:#123c14; }

.visual-hint { margin-top:14px; border:2px solid #8d69d4; background:#f2edff; border-radius:18px; padding:14px; }
.visual-hint > p { margin:0 0 12px; font-weight:900; }
.hint-groups { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.hint-group { min-width:70px; border:2px dashed #6fa7bd; background:white; border-radius:14px; padding:9px; display:flex; flex-wrap:wrap; gap:5px; justify-content:center; align-content:center; }
.hint-group strong { width:100%; font-size:11px; text-align:center; color:var(--muted); }
.hint-group span, .hint-array span { display:grid; place-items:center; min-width:16px; min-height:16px; }
.hint-array { display:grid; gap:5px; max-width:470px; margin:0 auto; padding:10px; background:white; border:2px dashed #6fa7bd; border-radius:14px; }
.hint-multi-arrays { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:center; }
.hint-multi-arrays > div { flex:1 1 220px; text-align:center; }
.hint-number-total { display:flex; gap:12px; align-items:center; justify-content:center; }
.hint-number-total strong { font-size:44px; }
.mirror-arrow { font-size:34px; }
.energy-hint { border-color:#8c6ee3; }

.lesson-intro-overlay { align-items:flex-start; padding:24px; overflow:auto; }
.lesson-intro-card { width:min(960px,96vw); margin:auto; border-radius:25px; background:#f7fdff; border:3px solid #b9e3f3; box-shadow:var(--shadow); padding:24px; position:relative; }
.intro-robot-row { display:grid; grid-template-columns:180px 1fr; align-items:center; gap:18px; }
.intro-robot-row .robot-small { margin:-35px auto -50px; }
.intro-robot-row h1 { margin:8px 0; }
.intro-robot-row p { line-height:1.5; }
.intro-steps { display:grid; gap:8px; padding-left:28px; }
.intro-steps li { padding:8px; border-radius:10px; background:#eaf7fc; }
.intro-note { padding:12px; border-radius:13px; background:#fff3bd; border:1px solid #edbd32; }
.pyhagoras-mini, .pythagoras-mini { display:grid; grid-template-columns:130px 1fr auto; gap:14px; align-items:center; border:2px solid #c7b2e7; background:#f5f0ff; border-radius:18px; padding:12px; }
.pythagoras-mini img { width:120px; height:120px; object-fit:contain; }
.mnemonic-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:14px 0; }
.mnemonic-grid span { border:2px solid #d4a52e; background:#fff4b5; border-radius:13px; padding:10px; font-weight:900; }
.modal-close { position:absolute; right:12px; top:10px; width:38px; height:38px; border-radius:50%; border:0; background:#e7f2f6; font-size:24px; cursor:pointer; }
.pythagoras-card { width:min(900px,94vw); display:grid; grid-template-columns:260px 1fr; gap:24px; align-items:center; background:#f8fdff; border:3px solid #c4e5f2; border-radius:26px; padding:28px; position:relative; box-shadow:var(--shadow); }
.pythagoras-card img { width:100%; max-height:330px; object-fit:contain; }
.pythagoras-card p { line-height:1.55; }
.collection-card, .resource-help-card { width:min(960px,94vw); max-height:88vh; overflow:auto; background:#f8fdff; border:3px solid #c4e5f2; border-radius:26px; padding:28px; position:relative; box-shadow:var(--shadow); }
.collection-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:20px 0; }
.strategy-card { min-height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:7px; border:2px solid #aed6e7; border-radius:17px; padding:12px; background:white; }
.strategy-card > span { font-size:34px; }
.strategy-card small { color:var(--muted); }
.strategy-card.locked { filter:grayscale(.8); opacity:.65; }
.resource-explain { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.resource-explain > div { border:2px solid #b7ddec; border-radius:18px; padding:18px; background:white; }
.resource-explain > div > span { font-size:42px; }
.resource-explain h2 { margin:8px 0; }
.city-finish { max-width:640px; }

.empty-groups { width:100%; padding:25px; text-align:center; color:var(--muted); border:2px dashed #9fcbdc; border-radius:14px; }
.memory-status { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.node-progress { display:block; }

@media (max-width: 980px) {
  .auth-screen { grid-template-columns:1fr; }
  .auth-hero { min-height:auto; }
  .pythagoras-card { grid-template-columns:1fr; }
  .pythagoras-card img { max-height:220px; }
  .collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .resource-explain { grid-template-columns:1fr; }
  .intro-robot-row { grid-template-columns:1fr; }
  .pythagoras-mini { grid-template-columns:100px 1fr; }
  .pythagoras-mini button { grid-column:1 / -1; }
}
@media (max-width: 620px) {
  .auth-hero, .auth-card { padding:18px; }
  .rating-row { grid-template-columns:38px 42px 1fr; }
  .rating-row > span:last-child { grid-column:3; }
  .collection-grid, .mnemonic-grid { grid-template-columns:1fr; }
  .city-finale-banner { white-space:normal; width:90%; text-align:center; }
  .reference-actions { display:grid; }
  .pythagoras-mini { grid-template-columns:1fr; text-align:center; }
  .pythagoras-mini img { margin:auto; }
}

/* =========================================================
   UMNOGRAD V4 — GAME DASHBOARD MAP
   The map screen follows the approved dark-blue game layout.
   ========================================================= */
.game-dashboard {
  width: min(1536px, 100%);
  min-height: calc(100vh - 8px);
  margin: 0 auto;
  padding: 10px 12px 0;
  display: grid;
  grid-template-columns: 300px minmax(650px, 1fr) 300px;
  grid-template-rows: minmax(0, 1fr) 76px 32px;
  gap: 10px 12px;
  color: #fff;
  background:
    radial-gradient(circle at 50% -20%, rgba(44,142,255,.28), transparent 45%),
    linear-gradient(180deg,#062969 0%,#041d51 62%,#03163d 100%);
  border-radius: 28px;
  box-shadow: inset 0 0 0 2px rgba(91,167,255,.18), 0 20px 50px rgba(1,15,49,.42);
}
.dashboard-left,
.dashboard-right,
.dashboard-main { min-width: 0; }
.dashboard-left,
.dashboard-right { display: flex; flex-direction: column; gap: 10px; }
.dashboard-main { display: grid; grid-template-rows: 70px minmax(0,1fr); gap: 8px; }
.dashboard-card {
  background: linear-gradient(180deg,rgba(14,66,145,.96),rgba(7,45,105,.98));
  border: 2px solid rgba(80,164,255,.55);
  border-radius: 18px;
  box-shadow: inset 0 1px rgba(255,255,255,.14), 0 6px 16px rgba(0,12,50,.32);
}
.dashboard-logo {
  height: 104px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.dashboard-logo span {
  font-size: 47px;
  line-height: .9;
  font-weight: 1000;
  letter-spacing: -2px;
  color: #ffd23c;
  -webkit-text-stroke: 2px #6d3300;
  text-shadow: 0 5px 0 #a65300, 0 8px 10px rgba(0,0,0,.5);
}
.dashboard-logo small {
  margin-top: 9px;
  padding: 3px 14px;
  border-radius: 999px;
  background: rgba(0,13,52,.78);
  color: #fff;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.dashboard-player { display: grid; grid-template-columns: 86px 1fr; gap: 12px; padding: 12px; align-items: center; }
.dashboard-player img { width: 80px; height: 80px; object-fit: cover; border-radius: 20px; border: 3px solid #fff; background: #9bd6ff; }
.dashboard-player > div { display: flex; flex-direction: column; min-width: 0; }
.dashboard-player small { color: #c8ddff; font-size: 12px; }
.dashboard-player strong { font-size: 23px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-player span { color: #fff; font-size: 14px; }
.mini-xp { margin-top: 8px; height: 15px; border-radius: 999px; background: #062657; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.32); }
.mini-xp i { display: block; height: 100%; background: linear-gradient(90deg,#ffd233,#ff9d16); }
.mini-xp b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; color: #fff; text-shadow: 0 1px #000; }
.resource-stack { display: grid; gap: 8px; }
.resource-card {
  min-height: 58px;
  width: 100%;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 8px;
  border: 2px solid rgba(78,156,255,.4);
  border-radius: 15px;
  padding: 8px 10px;
  color: #fff;
  background: linear-gradient(180deg,#0e4a9d,#083773);
  cursor: pointer;
  text-align: left;
  box-shadow: inset 0 1px rgba(255,255,255,.14);
}
.resource-card > span { font-size: 31px; }
.resource-card b { font-size: 15px; }
.resource-card strong { font-size: 22px; }
.resource-card > i { width: 29px; height: 29px; border-radius: 9px; display: grid; place-items: center; background: #7fd42d; color: #fff; font-size: 22px; font-style: normal; box-shadow: 0 3px 0 #2c861e; }
.resource-card small { grid-column: 2 / 4; color: #d8e4ff; line-height: 1.25; font-size: 11px; }
.resource-card.hints { background: linear-gradient(180deg,#36319b,#272477); }
.umnodel-card { flex: 1; min-height: 390px; padding: 12px 14px; overflow: hidden; }
.umnodel-card h2 { margin: 0; font-size: 22px; }
.umnodel-card .robot { margin-top: -7px; margin-bottom: -20px; transform: scale(.96); }
.umnodel-card .robot-dialog { color: #12345f; padding: 11px; }
.umnodel-card .robot-dialog p { margin: 0; font-size: 13px; }
.dashboard-help,
.rating-mini > button,
.teacher-mode-button {
  width: 100%;
  border: 1px solid rgba(164,215,255,.8);
  border-radius: 13px;
  padding: 9px 12px;
  color: #fff;
  background: linear-gradient(180deg,#178bd9,#0a5aac);
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 0 #063d83;
}
.dashboard-tabs { display: flex; justify-content: center; align-items: stretch; gap: 8px; }
.dashboard-tabs button {
  min-width: 180px;
  border: 1px solid rgba(74,145,237,.38);
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(180deg,#0c397b,#092c62);
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,.08);
}
.dashboard-tabs button.active { border-color: #6dc0ff; background: linear-gradient(180deg,#1455ae,#0b3e88); box-shadow: inset 0 0 0 2px rgba(111,194,255,.45), 0 4px 0 #052e69; }
.game-dashboard .city-map {
  position: relative;
  min-height: 720px;
  height: 100%;
  border-radius: 20px;
  border: 4px solid #2778cf;
  overflow: hidden;
  background: url('./assets/city-map-v4.jpg') center / cover no-repeat;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 8px 22px rgba(0,13,57,.45);
}
.game-dashboard .city-map::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg,rgba(32,153,242,.06),rgba(1,27,65,.08));
  pointer-events: none;
}
.game-dashboard .city-map::after { display: none; }
.map-slogan { position: absolute; left: 34px; top: 18px; z-index: 5; display: flex; flex-direction: column; text-shadow: 0 2px 3px rgba(0,46,85,.75); }
.map-slogan strong { font-size: 21px; }
.map-slogan span { font-size: 13px; }
.city-progress-box {
  position: absolute;
  right: 18px;
  top: 14px;
  z-index: 6;
  width: 188px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 9px;
  align-items: center;
  padding: 8px 11px;
  border-radius: 13px;
  color: #143769;
  background: rgba(238,249,255,.92);
  border: 2px solid #fff;
  box-shadow: 0 3px 9px rgba(0,38,89,.25);
}
.city-progress-box > span { grid-column: 1 / -1; font-size: 12px; }
.city-progress-box > div { height: 13px; border-radius: 999px; overflow: hidden; background: #b4c8d7; box-shadow: inset 0 2px 3px rgba(0,0,0,.2); }
.city-progress-box > div i { display: block; height: 100%; background: linear-gradient(90deg,#7fdb2e,#42ae22); }
.city-progress-box strong { font-size: 12px; }
.city-progress-box small { grid-column: 2; font-size: 9px; text-align: right; }
.game-dashboard .city-nodes { position: absolute; inset: 0; z-index: 4; min-height: 0; display: block; padding: 0; }
.game-dashboard .city-node {
  position: absolute;
  width: 148px;
  min-height: 84px;
  padding: 14px 10px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px solid #fff;
  border-radius: 13px;
  color: #152f5b;
  background: rgba(249,249,246,.94);
  box-shadow: 0 5px 12px rgba(0,31,71,.3);
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}
.game-dashboard .city-node:hover:not(:disabled) { transform: translateY(-4px) scale(1.03); z-index: 8; }
.game-dashboard .city-node strong { min-height: 36px; font-size: 12px; line-height: 1.15; }
.game-dashboard .node-number {
  left: -12px;
  top: -15px;
  width: 42px;
  height: 42px;
  font-size: 21px;
  background: var(--lesson-color);
}
.node-stars { display: flex; gap: 2px; margin-top: 4px; }
.node-stars i { color: #a9afb8; font-size: 19px; font-style: normal; text-shadow: 0 1px #fff; }
.node-stars i.earned { color: #ffb51a; -webkit-text-stroke: 1px #d57900; }
.node-mini-progress { width: 100%; height: 5px; margin-top: 3px; border-radius: 999px; overflow: hidden; background: #d8e2e8; }
.node-mini-progress i { display: block; height: 100%; background: linear-gradient(90deg,#6ad333,#32a927); }
.game-dashboard .city-node.complete { outline: 3px solid #67d23a; }
.game-dashboard .city-node.locked { opacity: .82; filter: grayscale(.95) brightness(.66); }
.game-dashboard .city-node.locked .node-number { font-size: 16px; background: #4c5666; }
.game-dashboard .node-1 { left: 5%; top: 14%; }
.game-dashboard .node-2 { left: 28%; top: 14%; }
.game-dashboard .node-3 { left: 51%; top: 14%; }
.game-dashboard .node-4 { left: 75%; top: 15%; }
.game-dashboard .node-5 { left: 10%; top: 39%; }
.game-dashboard .node-6 { left: 34%; top: 40%; }
.game-dashboard .node-7 { left: 59%; top: 45%; }
.game-dashboard .node-8 { left: 78%; top: 49%; }
.game-dashboard .node-9 { left: 6%; top: 69%; }
.game-dashboard .node-10 { left: 31%; top: 72%; }
.game-dashboard .node-11 { left: 57%; top: 72%; }
.game-dashboard .node-12 { left: 80%; top: 72%; }
.map-legend {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 30px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 13px;
  padding: 6px 13px;
  border-radius: 999px;
  color: #26395c;
  background: rgba(255,255,246,.92);
  border: 1px solid #d8e2c6;
  font-size: 10px;
}
.map-legend span { display: flex; align-items: center; gap: 5px; }
.map-legend i { width: 10px; height: 10px; border-radius: 50%; }
.map-legend .green { background: #53b42d; }.map-legend .blue { background: #1997d0; }.map-legend .purple { background: #8d3ab3; }.map-legend .orange { background: #e79908; }.map-legend .pink { background: #eb4e7f; }
.dashboard-right { padding-top: 78px; }
.next-lesson-panel { padding: 13px; }
.next-lesson-panel h2,
.rating-mini h2 { margin: 0 0 10px; font-size: 20px; }
.next-lesson-picture { height: 132px; display: grid; place-items: center; overflow: hidden; border-radius: 14px 14px 0 0; background: linear-gradient(145deg,#99dcff,#2e8bd1); border: 2px solid #cdeeff; }
.next-lesson-picture.warehouse { background: url('./assets/lesson-warehouse.jpg') center / cover no-repeat; }
.next-lesson-picture span { font-size: 70px; filter: drop-shadow(0 6px 4px rgba(0,0,0,.25)); }
.next-lesson-title { display: grid; grid-template-columns: 38px 1fr; gap: 8px; align-items: center; margin: 9px 0; }
.next-lesson-title span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #62bd32; border: 2px solid #fff; font-size: 18px; font-weight: 1000; }
.next-lesson-title strong { line-height: 1.1; }
.next-lesson-panel p { min-height: 62px; margin: 0 0 8px; color: #e5efff; font-size: 12px; line-height: 1.35; }
.next-lesson-progress { height: 9px; margin-bottom: 12px; border-radius: 999px; overflow: hidden; background: #062a62; }
.next-lesson-progress i { display: block; height: 100%; background: #69d037; }
.rating-mini { padding: 13px; }
.rating-mini-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; font-size: 12px; }
.rating-mini-row:nth-child(even) { background: rgba(70,145,231,.28); }
.rating-mini-row.current { background: rgba(84,178,255,.48); }
.rating-mini-row > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #5585bc; font-weight: 900; }
.rating-mini-row:first-of-type > span { background: #e5a11a; }
.rating-mini > button { margin-top: 9px; }
.teacher-card { margin-top: auto; padding: 11px; display: grid; grid-template-columns: 72px 1fr; gap: 10px; align-items: center; background: linear-gradient(180deg,#393290,#26236c); }
.teacher-card img { width: 68px; height: 68px; object-fit: cover; border-radius: 50%; border: 2px solid #fff; }
.teacher-card h2 { margin: 0 0 4px; font-size: 17px; }
.teacher-card p { margin: 0 0 8px; color: #dfdcff; font-size: 11px; line-height: 1.25; }
.teacher-mode-button { background: linear-gradient(180deg,#a74bd7,#7130af); box-shadow: 0 4px 0 #431d72; }
.teacher-mode-button.active { background: linear-gradient(180deg,#5fbd47,#338d2b); box-shadow: 0 4px 0 #215f1d; }
.dashboard-bottom {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(8, minmax(0,1fr));
  border: 2px solid #174d9d;
  border-radius: 18px 18px 8px 8px;
  overflow: hidden;
  background: linear-gradient(180deg,#0e448f,#082f6a);
}
.dashboard-bottom button { display: flex; justify-content: center; align-items: center; gap: 10px; border: 0; border-right: 1px solid rgba(104,173,255,.25); color: #fff; background: transparent; font-size: 25px; cursor: pointer; }
.dashboard-bottom button span { font-size: 13px; font-weight: 900; }
.dashboard-bottom button.active { background: linear-gradient(180deg,#155aa9,#0c3b7d); box-shadow: inset 0 0 0 2px #51a5ef; }
.dashboard-footer { grid-column: 1 / -1; display: grid; place-items: center; font-weight: 900; color: #fff; font-size: 13px; }

@media (max-width: 1220px) {
  .game-dashboard { grid-template-columns: 250px minmax(560px,1fr); }
  .dashboard-right { display: none; }
  .dashboard-bottom { grid-column: 1 / -1; }
  .dashboard-footer { grid-column: 1 / -1; }
  .game-dashboard .city-node { width: 130px; }
}
@media (max-width: 850px) {
  .game-dashboard { display: block; padding: 8px; }
  .dashboard-left { display: grid; grid-template-columns: 1fr 1fr; }
  .dashboard-logo { grid-column: 1 / -1; }
  .umnodel-card { min-height: 330px; }
  .dashboard-main { margin-top: 10px; }
  .dashboard-tabs button { min-width: 0; flex: 1; font-size: 13px; }
  .game-dashboard .city-map { min-height: 720px; }
  .dashboard-bottom { margin-top: 10px; grid-template-columns: repeat(4,1fr); }
  .dashboard-bottom button { min-height: 66px; }
  .dashboard-footer { min-height: 34px; }
}
@media (max-width: 620px) {
  .dashboard-left { display: block; }
  .resource-stack { margin: 8px 0; }
  .dashboard-tabs { height: 58px; }
  .dashboard-tabs button { padding: 6px; }
  .game-dashboard .city-map { min-height: 840px; background-position: center; }
  .game-dashboard .city-node { width: 115px; min-height: 78px; }
  .game-dashboard .city-node strong { font-size: 10px; }
  .game-dashboard .node-1 { left: 2%; }.game-dashboard .node-2 { left: 35%; }.game-dashboard .node-3 { left: 67%; }
  .game-dashboard .node-4 { left: 3%; top: 29%; }.game-dashboard .node-5 { left: 35%; top: 29%; }.game-dashboard .node-6 { left: 67%; top: 29%; }
  .game-dashboard .node-7 { left: 3%; top: 48%; }.game-dashboard .node-8 { left: 35%; top: 48%; }.game-dashboard .node-9 { left: 67%; top: 48%; }
  .game-dashboard .node-10 { left: 3%; top: 68%; }.game-dashboard .node-11 { left: 35%; top: 68%; }.game-dashboard .node-12 { left: 67%; top: 68%; }
  .map-slogan { left: 14px; top: 12px; }
  .map-slogan span { display: none; }
  .city-progress-box { right: 8px; top: 8px; width: 150px; }
  .map-legend { border-radius: 15px; width: calc(100% - 20px); }
  .dashboard-bottom { grid-template-columns: repeat(2,1fr); }
}

/* V4 map alignment fixes for the approved city artwork */
.game-root { padding: 8px; }
.game-dashboard { min-height: calc(100vh - 16px); }
.game-dashboard .city-map { background-image: url('./assets/city-map-v4.jpg'); }
.map-slogan {
  left: 18px;
  top: 10px;
  min-width: 430px;
  padding: 9px 14px;
  border: 2px solid rgba(184,229,255,.8);
  border-radius: 14px;
  background: linear-gradient(180deg,rgba(18,113,197,.97),rgba(9,73,148,.97));
  box-shadow: 0 4px 0 rgba(4,52,111,.7);
}
.city-progress-box { right: 9px; top: 8px; width: 210px; min-height: 84px; }
.game-dashboard .city-node { width: 170px; min-height: 96px; background: #f7f7f3; }
.game-dashboard .city-node.locked { opacity: 1; filter: none; background: #aeb3b5; color: #3e4448; border-color: #d9dddf; }
.game-dashboard .city-node.locked::after { content:"🔒"; position:absolute; inset:0; display:grid; place-items:center; font-size:35px; color:#40474e; background:rgba(78,85,91,.12); border-radius:11px; }
.game-dashboard .city-node.locked .node-stars,
.game-dashboard .city-node.locked .node-mini-progress { opacity:.45; }
.game-dashboard .node-1 { left: 3.2%; top: 12.8%; }
.game-dashboard .node-2 { left: 27.0%; top: 12.8%; }
.game-dashboard .node-3 { left: 50.5%; top: 12.8%; }
.game-dashboard .node-4 { left: 75.4%; top: 13.8%; }
.game-dashboard .node-5 { left: 9.7%; top: 38.8%; }
.game-dashboard .node-6 { left: 36.2%; top: 39.6%; }
.game-dashboard .node-7 { left: 57.8%; top: 45.2%; }
.game-dashboard .node-8 { left: 76.4%; top: 48.2%; }
.game-dashboard .node-9 { left: 3.0%; top: 63.8%; }
.game-dashboard .node-10 { left: 28.7%; top: 67.2%; }
.game-dashboard .node-11 { left: 54.5%; top: 70.2%; }
.game-dashboard .node-12 { left: 80.0%; top: 70.3%; }
.map-legend { bottom: 2px; min-width: 690px; background:#f6f8e9; }
.umnodel-card { min-height: 345px; }
@media (max-width: 1220px) {
  .game-dashboard .city-node { width: 145px; }
}

/* Preserve the reference map geometry so dynamic lesson cards cover the artwork labels exactly. */
.game-dashboard .city-map { background-size: 100% 100%; background-position: center; }
.game-dashboard .city-node { width: 158px; min-height: 90px; }
.game-dashboard .node-1 { left: 3.2%; top: 12.8%; }
.game-dashboard .node-2 { left: 27.1%; top: 12.8%; }
.game-dashboard .node-3 { left: 50.5%; top: 13.0%; }
.game-dashboard .node-4 { left: 75.9%; top: 13.7%; }
.game-dashboard .node-5 { left: 10.5%; top: 39.3%; }
.game-dashboard .node-6 { left: 37.6%; top: 39.9%; }
.game-dashboard .node-7 { left: 58.0%; top: 45.6%; }
.game-dashboard .node-8 { left: 76.5%; top: 48.1%; }
.game-dashboard .node-9 { left: 3.4%; top: 64.1%; }
.game-dashboard .node-10 { left: 29.3%; top: 67.3%; }
.game-dashboard .node-11 { left: 54.9%; top: 70.4%; }
.game-dashboard .node-12 { left: 80.9%; top: 70.6%; }
@media (min-width: 851px) {
  .game-dashboard { height: calc(100vh - 16px); min-height: 720px; overflow: hidden; }
  .dashboard-left, .dashboard-main, .dashboard-right { min-height: 0; }
  .umnodel-card { min-height: 0; }
}
@media (min-width: 1221px) {
  .dashboard-right { padding-top: 68px; gap: 8px; }
  .next-lesson-panel { padding: 10px; }
  .next-lesson-picture { height: 108px; }
  .next-lesson-panel p { min-height: 48px; font-size: 11px; }
  .next-lesson-title { margin: 6px 0; }
  .next-lesson-panel .primary-button { padding: 9px 12px; }
  .rating-mini { padding: 10px; }
  .rating-mini h2 { margin-bottom: 6px; }
  .rating-mini-row { padding: 4px 7px; }
  .rating-mini > button { margin-top: 6px; padding: 7px 10px; }
  .teacher-card { margin-top: 0; padding: 8px; grid-template-columns: 58px 1fr; }
  .teacher-card img { width: 54px; height: 54px; }
  .teacher-card p { font-size: 10px; margin-bottom: 5px; }
  .teacher-mode-button { padding: 6px 8px; font-size: 11px; }
}

/* =========================================================
   UMNOGRAD V5 — CLEAN, FULLY VISIBLE COURSE DASHBOARD
   Only implemented course sections remain in the interface.
   ========================================================= */
.game-root {
  min-height: 100vh;
  padding: 8px;
  overflow-x: auto;
  overflow-y: auto;
  background: linear-gradient(180deg,#071f55 0%,#07397d 55%,#0a5594 100%);
}
.game-dashboard {
  width: min(1540px, 100%);
  min-height: 0;
  height: auto;
  overflow: visible;
  grid-template-columns: 285px minmax(640px, 1fr) 285px;
  grid-template-rows: 700px 58px 25px;
  gap: 8px 10px;
  padding: 8px 10px 0;
  border-radius: 24px;
}
.dashboard-main { grid-template-rows: 52px 640px; gap: 8px; }
.dashboard-left,
.dashboard-right { gap: 8px; }
.dashboard-logo { height: 78px; }
.dashboard-logo span { font-size: 40px; }
.dashboard-logo small { margin-top: 6px; font-size: 10px; }
.dashboard-player { grid-template-columns: 64px 1fr; min-height: 82px; padding: 8px 10px; }
.dashboard-player img { width: 60px; height: 60px; border-radius: 16px; }
.dashboard-player strong { font-size: 19px; }
.dashboard-player span { font-size: 12px; }
.resource-stack { gap: 6px; }
.resource-card { min-height: 48px; grid-template-columns: 36px 1fr auto 25px; padding: 6px 8px; }
.resource-card > span { font-size: 25px; }
.resource-card b { font-size: 13px; }
.resource-card strong { font-size: 19px; }
.resource-card > i { width: 25px; height: 25px; font-size: 18px; }
.resource-card small { font-size: 10px; }
.umnodel-card {
  flex: 1;
  min-height: 302px;
  overflow: visible;
  padding: 9px 12px 10px;
  display: flex;
  flex-direction: column;
}
.umnodel-card h2 { font-size: 19px; }
.umnodel-card .robot {
  flex: 0 0 auto;
  height: 178px;
  width: 210px;
  margin: -16px auto -22px;
  transform-origin: center center;
  animation: dashboardRobot 3s ease-in-out infinite;
}
@keyframes dashboardRobot {
  0%,100% { transform: scale(.78) translateY(0); }
  50% { transform: scale(.78) translateY(-7px); }
}
.umnodel-card .robot-dialog { margin-top: 0; padding: 9px 10px; }
.umnodel-card .robot-dialog p { font-size: 11px; }
.dashboard-help { margin-top: auto; padding: 7px 9px; font-size: 11px; }
.dashboard-tabs { gap: 7px; }
.dashboard-tabs button { min-width: 0; flex: 1; font-size: 15px; border-radius: 12px; }
.game-dashboard .city-map {
  min-height: 640px;
  height: 640px;
  background-size: 100% 100%;
  background-position: center;
}
/* The artwork already contains the lesson plaques. Buttons are clean hotspots,
   so plaques are not drawn twice. */
.game-dashboard .city-node {
  width: 158px;
  height: 92px;
  min-height: 0;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 15px;
  color: transparent;
  background: transparent;
  box-shadow: none;
}
.game-dashboard .city-node:hover:not(:disabled),
.game-dashboard .city-node:focus-visible {
  transform: translateY(-2px);
  border-color: #fff;
  outline: 3px solid rgba(68,201,255,.88);
  background: rgba(67,180,255,.08);
  box-shadow: 0 0 0 5px rgba(4,60,125,.36);
}
.game-dashboard .city-node.complete { outline: none; }
.game-dashboard .city-node.complete::before {
  content: "✓";
  position: absolute;
  right: -7px;
  top: -8px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #4fbe2f;
  border: 2px solid #fff;
  box-shadow: 0 3px 0 #287a1d;
  font-weight: 1000;
}
.game-dashboard .city-node.next-node:not(.complete):not(.locked) {
  border-color: #ffe35f;
  box-shadow: 0 0 0 4px rgba(255,203,39,.38);
}
.game-dashboard .city-node.locked {
  opacity: 1;
  filter: none;
  border-color: rgba(255,255,255,.42);
  background: rgba(21,31,42,.48);
  cursor: not-allowed;
}
.game-dashboard .city-node.locked::after {
  content: "🔒";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: rgba(35,42,50,.28);
  font-size: 30px;
  text-shadow: 0 2px 3px #000;
}
.node-state-icon {
  position: absolute;
  right: 5px;
  bottom: 4px;
  min-width: 25px;
  height: 22px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: rgba(3,61,124,.9);
  border: 1px solid #fff;
  font-size: 10px;
  font-weight: 1000;
}
.city-progress-box {
  right: 9px;
  top: 8px;
  width: 210px;
  min-height: 72px;
  background: #effaff;
  opacity: 1;
}
.map-slogan,
.map-legend { display: none !important; }
.dashboard-right { padding-top: 60px; gap: 7px; }
.next-lesson-panel { padding: 9px; }
.next-lesson-panel h2,
.rating-mini h2 { margin-bottom: 6px; font-size: 18px; }
.next-lesson-picture { height: 96px; }
.next-lesson-picture span { font-size: 54px; }
.next-lesson-title { margin: 5px 0; }
.next-lesson-panel p { min-height: 44px; margin-bottom: 6px; font-size: 10px; }
.next-lesson-progress { margin-bottom: 8px; }
.next-lesson-panel .primary-button { padding: 8px 10px; }
.rating-mini { padding: 9px; }
.rating-mini-row { padding: 4px 6px; }
.rating-mini > button { margin-top: 5px; padding: 6px 8px; }
.teacher-card { margin-top: 0; padding: 7px; grid-template-columns: 52px 1fr; }
.teacher-card img { width: 48px; height: 48px; }
.teacher-card h2 { font-size: 15px; }
.teacher-card p { margin-bottom: 5px; font-size: 9px; }
.teacher-mode-button,
.teacher-mode-status {
  width: 100%;
  padding: 6px 8px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(180deg,#7548c8,#4f2d9a);
  border: 1px solid rgba(255,255,255,.45);
  font-size: 10px;
  font-weight: 900;
  text-align: center;
}
.teacher-mode-status { background: linear-gradient(180deg,#57bd43,#318c2a); }
.dashboard-bottom {
  grid-template-columns: repeat(4, minmax(0,1fr));
  min-height: 58px;
}
.dashboard-bottom button { min-height: 54px; font-size: 21px; }
.dashboard-bottom button span { font-size: 12px; }
.dashboard-footer { min-height: 25px; font-size: 12px; }

@media (min-width: 851px) {
  .game-dashboard { height: auto; min-height: 0; overflow: visible; }
  .dashboard-left, .dashboard-main, .dashboard-right { min-height: 0; }
}
@media (max-width: 1220px) {
  .game-dashboard { grid-template-columns: 245px minmax(590px,1fr); grid-template-rows: auto 58px 25px; }
  .dashboard-right { display: none; }
  .dashboard-main { grid-template-rows: 52px 640px; }
  .umnodel-card { min-height: 302px; }
  .game-dashboard .city-node { width: 142px; }
}
@media (max-width: 850px) {
  .game-dashboard { display: block; min-width: 0; }
  .dashboard-left { display: grid; grid-template-columns: 1fr 1fr; }
  .dashboard-logo { grid-column: 1 / -1; }
  .umnodel-card { min-height: 310px; }
  .dashboard-main { display: grid; grid-template-rows: 52px 680px; }
  .game-dashboard .city-map { min-height: 680px; height: 680px; }
  .dashboard-bottom { display: grid; grid-template-columns: repeat(2,1fr); margin-top: 9px; }
  .dashboard-footer { min-height: 34px; }
}

/* V5 compact fit: the complete dashboard remains visible on ordinary laptop screens. */
.game-dashboard {
  grid-template-rows: 590px 50px 22px;
  gap: 7px 10px;
}
.dashboard-main { grid-template-rows: 46px 537px; gap: 7px; }
.dashboard-logo { height: 64px; }
.dashboard-logo span { font-size: 35px; }
.dashboard-logo small { margin-top: 4px; padding: 2px 11px; font-size: 9px; }
.dashboard-player { min-height: 70px; grid-template-columns: 55px 1fr; padding: 6px 8px; }
.dashboard-player img { width: 51px; height: 51px; }
.dashboard-player small { font-size: 10px; }
.dashboard-player strong { font-size: 17px; }
.dashboard-player span { font-size: 11px; }
.mini-xp { height: 12px; margin-top: 5px; }
.resource-card { min-height: 42px; grid-template-columns: 31px 1fr auto; padding: 4px 7px; }
.resource-card > span { font-size: 22px; }
.resource-card b { font-size: 12px; }
.resource-card strong { font-size: 17px; }
.resource-card > i { width: 22px; height: 22px; font-size: 16px; }
.resource-card small { font-size: 9px; line-height: 1.15; }
.umnodel-card { min-height: 268px; padding: 7px 10px 8px; }
.umnodel-card h2 { font-size: 17px; }
.umnodel-card .robot { height: 158px; margin: -21px auto -30px; }
@keyframes dashboardRobot {
  0%,100% { transform: scale(.70) translateY(0); }
  50% { transform: scale(.70) translateY(-6px); }
}
.umnodel-card .robot-dialog { padding: 7px 8px; }
.umnodel-card .robot-dialog p { font-size: 10px; }
.dashboard-help { padding: 5px 7px; font-size: 10px; }
.dashboard-tabs button { font-size: 13px; }
.game-dashboard .city-map { min-height: 537px; height: 537px; }
.city-progress-box { min-height: 62px; width: 190px; padding: 6px 9px; }
.game-dashboard .city-node { width: 143px; height: 77px; }
.game-dashboard .node-1 { left: 3.2%; top: 12.8%; }
.game-dashboard .node-2 { left: 27.1%; top: 12.8%; }
.game-dashboard .node-3 { left: 50.5%; top: 13.0%; }
.game-dashboard .node-4 { left: 75.9%; top: 13.7%; }
.game-dashboard .node-5 { left: 10.5%; top: 39.3%; }
.game-dashboard .node-6 { left: 37.6%; top: 39.9%; }
.game-dashboard .node-7 { left: 58.0%; top: 45.6%; }
.game-dashboard .node-8 { left: 76.5%; top: 48.1%; }
.game-dashboard .node-9 { left: 3.4%; top: 64.1%; }
.game-dashboard .node-10 { left: 29.3%; top: 67.3%; }
.game-dashboard .node-11 { left: 54.9%; top: 70.4%; }
.game-dashboard .node-12 { left: 80.9%; top: 70.6%; }
.dashboard-right { padding-top: 46px; gap: 5px; }
.next-lesson-panel { padding: 7px; }
.next-lesson-panel h2, .rating-mini h2 { font-size: 16px; margin-bottom: 4px; }
.next-lesson-picture { height: 78px; }
.next-lesson-picture span { font-size: 44px; }
.next-lesson-title { grid-template-columns: 31px 1fr; gap: 5px; margin: 4px 0; }
.next-lesson-title span { width: 29px; height: 29px; font-size: 15px; }
.next-lesson-title strong { font-size: 13px; }
.next-lesson-panel p { min-height: 34px; font-size: 9px; line-height: 1.2; }
.next-lesson-progress { height: 7px; margin-bottom: 6px; }
.next-lesson-panel .primary-button { padding: 6px 8px; font-size: 13px; }
.rating-mini { padding: 7px; }
.rating-mini-row { grid-template-columns: 25px 1fr auto; gap: 5px; padding: 2px 5px; font-size: 10px; }
.rating-mini-row > span { width: 21px; height: 21px; }
.rating-mini > button { margin-top: 3px; padding: 5px 7px; font-size: 10px; }
.teacher-card { padding: 5px; grid-template-columns: 41px 1fr; gap: 6px; }
.teacher-card img { width: 38px; height: 38px; }
.teacher-card h2 { margin: 0 0 2px; font-size: 13px; }
.teacher-card p { margin: 0 0 3px; font-size: 8px; line-height: 1.1; }
.teacher-mode-button, .teacher-mode-status { padding: 4px 6px; font-size: 9px; }
.dashboard-bottom { min-height: 50px; }
.dashboard-bottom button { min-height: 46px; font-size: 18px; }
.dashboard-bottom button span { font-size: 11px; }
.dashboard-footer { min-height: 22px; font-size: 10px; }
@media (max-width: 1220px) {
  .game-dashboard { grid-template-rows: auto 50px 22px; }
  .dashboard-main { grid-template-rows: 46px 537px; }
}

/* =========================================================
   UMNOGRAD V6 — PROPORTIONAL DASHBOARD SCALING
   Layout/content are unchanged. The complete desktop scene is
   scaled as one 1540×990 canvas, preserving all proportions.
   ========================================================= */
.dashboard-viewport {
  position: relative;
  margin: 0 auto;
  overflow: visible;
}

.dashboard-viewport > .game-dashboard {
  --dashboard-scale: 1;
  width: 1540px;
  height: 990px;
  min-height: 990px;
  margin: 0;
  padding: 10px;
  overflow: hidden;
  transform: scale(var(--dashboard-scale));
  transform-origin: top left;
  grid-template-columns: 300px 900px 300px;
  grid-template-rows: 870px 58px 22px;
  column-gap: 10px;
  row-gap: 10px;
}

.dashboard-viewport .dashboard-left,
.dashboard-viewport .dashboard-right {
  gap: 10px;
}

.dashboard-viewport .dashboard-main {
  grid-template-rows: 60px 802px;
  gap: 8px;
}

.dashboard-viewport .dashboard-logo {
  height: 98px;
}
.dashboard-viewport .dashboard-logo span {
  font-size: 47px;
}
.dashboard-viewport .dashboard-logo small {
  margin-top: 8px;
  padding: 3px 14px;
  font-size: 11px;
}

.dashboard-viewport .dashboard-player {
  min-height: 94px;
  grid-template-columns: 78px 1fr;
  padding: 10px 12px;
}
.dashboard-viewport .dashboard-player img {
  width: 72px;
  height: 72px;
  border-radius: 18px;
}
.dashboard-viewport .dashboard-player small { font-size: 12px; }
.dashboard-viewport .dashboard-player strong { font-size: 22px; }
.dashboard-viewport .dashboard-player span { font-size: 13px; }
.dashboard-viewport .mini-xp { height: 14px; margin-top: 7px; }

.dashboard-viewport .resource-stack { gap: 8px; }
.dashboard-viewport .resource-card {
  min-height: 58px;
  grid-template-columns: 42px 1fr auto 29px;
  padding: 8px 10px;
}
.dashboard-viewport .resource-card > span { font-size: 30px; }
.dashboard-viewport .resource-card b { font-size: 14px; }
.dashboard-viewport .resource-card strong { font-size: 21px; }
.dashboard-viewport .resource-card > i { width: 28px; height: 28px; font-size: 20px; }
.dashboard-viewport .resource-card small { font-size: 10px; line-height: 1.25; }

.dashboard-viewport .umnodel-card {
  min-height: 0;
  flex: 1;
  padding: 12px 14px;
  overflow: hidden;
}
.dashboard-viewport .umnodel-card h2 { font-size: 22px; }
.dashboard-viewport .umnodel-card .robot {
  height: 218px;
  width: 220px;
  margin: 0 auto -10px;
  animation: dashboardRobotV6 3s ease-in-out infinite;
}
@keyframes dashboardRobotV6 {
  0%,100% { transform: scale(.94) translateY(0); }
  50% { transform: scale(.94) translateY(-7px); }
}
.dashboard-viewport .umnodel-card .robot-dialog { padding: 11px 12px; }
.dashboard-viewport .umnodel-card .robot-dialog p { font-size: 12px; line-height: 1.35; }
.dashboard-viewport .dashboard-help { padding: 8px 10px; font-size: 11px; }

.dashboard-viewport .dashboard-tabs { gap: 8px; }
.dashboard-viewport .dashboard-tabs button {
  min-width: 0;
  flex: 1;
  font-size: 17px;
}

.dashboard-viewport .game-dashboard .city-map {
  width: 900px;
  height: 802px;
  min-height: 802px;
  background-size: 900px 802px;
  background-position: center;
  background-repeat: no-repeat;
}
.dashboard-viewport .city-progress-box {
  width: 210px;
  min-height: 72px;
  padding: 8px 11px;
}
.dashboard-viewport .game-dashboard .city-node {
  width: 158px;
  height: 90px;
}

.dashboard-viewport .dashboard-right {
  padding-top: 60px;
  gap: 8px;
}
.dashboard-viewport .next-lesson-panel { padding: 11px; }
.dashboard-viewport .next-lesson-panel h2,
.dashboard-viewport .rating-mini h2 { margin-bottom: 8px; font-size: 19px; }
.dashboard-viewport .next-lesson-picture { height: 118px; }
.dashboard-viewport .next-lesson-picture span { font-size: 62px; }
.dashboard-viewport .next-lesson-title {
  grid-template-columns: 36px 1fr;
  gap: 8px;
  margin: 8px 0;
}
.dashboard-viewport .next-lesson-title span { width: 34px; height: 34px; font-size: 17px; }
.dashboard-viewport .next-lesson-title strong { font-size: 15px; }
.dashboard-viewport .next-lesson-panel p {
  min-height: 58px;
  margin-bottom: 8px;
  font-size: 11px;
  line-height: 1.35;
}
.dashboard-viewport .next-lesson-progress { height: 9px; margin-bottom: 10px; }
.dashboard-viewport .next-lesson-panel .primary-button { padding: 9px 11px; font-size: 14px; }
.dashboard-viewport .rating-mini { padding: 11px; }
.dashboard-viewport .rating-mini-row {
  grid-template-columns: 28px 1fr auto;
  gap: 7px;
  padding: 5px 7px;
  font-size: 11px;
}
.dashboard-viewport .rating-mini-row > span { width: 24px; height: 24px; }
.dashboard-viewport .rating-mini > button { margin-top: 7px; padding: 7px 9px; font-size: 11px; }
.dashboard-viewport .teacher-card {
  margin-top: auto;
  padding: 9px;
  grid-template-columns: 58px 1fr;
  gap: 8px;
}
.dashboard-viewport .teacher-card img { width: 54px; height: 54px; }
.dashboard-viewport .teacher-card h2 { font-size: 16px; }
.dashboard-viewport .teacher-card p { margin-bottom: 6px; font-size: 10px; line-height: 1.25; }
.dashboard-viewport .teacher-mode-button,
.dashboard-viewport .teacher-mode-status { padding: 6px 8px; font-size: 10px; }

.dashboard-viewport .dashboard-bottom {
  min-height: 58px;
  grid-template-columns: repeat(4, minmax(0,1fr));
}
.dashboard-viewport .dashboard-bottom button {
  min-height: 54px;
  font-size: 22px;
}
.dashboard-viewport .dashboard-bottom button span { font-size: 12px; }
.dashboard-viewport .dashboard-footer { min-height: 22px; font-size: 11px; }

/* On narrow screens the dashboard returns to a normal stacked responsive flow. */
@media (max-width: 900px) {
  .dashboard-viewport {
    width: 100% !important;
    height: auto !important;
  }
  .dashboard-viewport > .game-dashboard {
    width: 100%;
    height: auto;
    min-height: 0;
    transform: none;
    display: block;
    padding: 8px;
    overflow: visible;
  }
  .dashboard-viewport .dashboard-left {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .dashboard-viewport .dashboard-logo { grid-column: 1 / -1; }
  .dashboard-viewport .dashboard-main {
    display: grid;
    grid-template-rows: 58px auto;
    margin-top: 10px;
  }
  .dashboard-viewport .game-dashboard .city-map {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 899 / 802;
    background-size: 100% 100%;
  }
  .dashboard-viewport .dashboard-right { display: none; }
  .dashboard-viewport .dashboard-bottom {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    margin-top: 10px;
  }
  .dashboard-viewport .dashboard-footer { min-height: 34px; }
}


/* V14: student avatars, rewards and cleaner resource cards */
.dashboard-player .student-profile-avatar {
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  border: 3px solid #fff;
  background: linear-gradient(145deg,#bde7ff,#68b4ec);
  font-size: 55px;
  line-height: 1;
  box-shadow: inset 0 2px rgba(255,255,255,.55);
}
.resource-card > i { display: none !important; }
.reward-card {
  margin-top: auto;
  min-height: 116px;
  padding: 12px;
  display: grid;
  grid-template-columns: 68px 1fr;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg,#5b369f,#342476);
}
.reward-card.complete { background: linear-gradient(180deg,#a66b12,#6f4006); }
.reward-icon {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.45);
  font-size: 38px;
}
.reward-card h2 { margin: 0 0 4px; font-size: 17px; }
.reward-card p { margin: 0 0 7px; color: #eee8ff; font-size: 10px; line-height: 1.25; }
.reward-card strong { color: #fff6a8; font-size: 10px; }
.reward-progress { height: 8px; margin: 4px 0 5px; overflow: hidden; border-radius: 999px; background: rgba(5,20,70,.55); }
.reward-progress i { display: block; height: 100%; background: linear-gradient(90deg,#ffd84d,#ff9e1a); }
.rating-avatar { display: grid; place-items: center; }
@media (max-width: 1220px) {
  .dashboard-player .student-profile-avatar { width: 51px; height: 51px; font-size: 37px; }
}


/* V15.1: clear return path from course to the main teacher cabinet */
.dashboard-tabs .teacher-dashboard-tab {
  border-color: #b9f58a;
  background: linear-gradient(180deg,#73c947,#3a942d);
  box-shadow: inset 0 1px rgba(255,255,255,.25), 0 4px 0 #23651d;
}
.teacher-cabinet-nav {
  border: 1px solid #b9f58a;
  border-radius: 12px;
  padding: 9px 13px;
  color: #fff;
  background: linear-gradient(180deg,#73c947,#3a942d);
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 3px 0 #23651d;
}
.teacher-cabinet-nav:hover,
.dashboard-tabs .teacher-dashboard-tab:hover {
  filter: brightness(1.07);
}
@media (max-width: 900px) {
  .teacher-cabinet-nav { padding: 7px 9px; font-size: 12px; }
  .dashboard-tabs .teacher-dashboard-tab { min-width: 150px; }
}

/* v16.0 — дополнительные алгоритмы */
.lesson-task-list button.optional-task { border-style:dashed; }
.lesson-task-list button.optional-task small { color:#7a5a00; font-weight:800; }
.optional-badge { background:#fff2b8 !important; color:#6e5200 !important; border-color:#e8c756 !important; }
.optional-task-note { margin:14px 0 18px; padding:14px 16px; border:2px dashed #e1bd45; border-radius:18px; background:linear-gradient(180deg,#fffbea,#fff4c7); }
.optional-task-note > div { display:flex; align-items:flex-start; gap:10px; }
.optional-task-note span { font-size:24px; line-height:1; }
.optional-task-note strong { display:block; margin-bottom:4px; color:#684d00; }
.optional-task-note p { margin:0; line-height:1.45; color:#5e5335; }
.optional-skip-button { margin-left:auto; border-style:dashed !important; }
.algorithm-bonus-done { margin:12px 0 0; padding:9px 12px; border-radius:12px; background:#e9f8e8; font-weight:800; color:#2f6b31; }