/* Геймификация курса «Менеджмент в медицине». */
.game-hud {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 174px;
  padding: 7px 10px;
  border: 1px solid #cfdcda;
  border-radius: 14px;
  background: #fff;
  color: #12364a;
  cursor: pointer;
  box-shadow: 0 9px 22px -20px #12364a;
}
.game-hud__level { display: grid; width: 34px; height: 34px; place-items: center; flex: none; border-radius: 11px; background: linear-gradient(145deg, #247d71, #12364a); color: #fff; font: 700 .72rem/1 var(--sans); }
.game-hud__body { display: grid; flex: 1; gap: 4px; min-width: 0; text-align: left; }
.game-hud__body b { overflow: hidden; font: 700 .7rem/1 var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.game-hud__track { height: 5px; overflow: hidden; border-radius: 99px; background: #dce6e3; }
.game-hud__track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f2ae7e, #58a497); transition: width .25s; }
.game-hud__xp { color: #698087; font: 600 .58rem/1 var(--sans); }
.game-hud__streak { flex: none; color: #c36b3b; font: 700 .68rem/1 var(--sans); }
.game-show { display: none; padding: 8px 11px; border: 1px solid #cfdcda; border-radius: 12px; background: #fff; color: #275e58; font: 700 .67rem/1 var(--sans); cursor: pointer; }
body.game-hidden .game-hud, body.game-hidden .game-drawer, body.game-hidden .game-lesson, body.game-hidden .game-board, body.game-hidden .mod__gamebar { display: none !important; }
body.game-hidden .game-show { display: inline-flex; align-items: center; gap: 5px; }

.game-drawer { position: fixed; top: 76px; right: 18px; z-index: 40; width: min(360px, calc(100vw - 28px)); padding: 19px; border: 1px solid #cbd9d6; border-radius: 20px; background: #fff; box-shadow: 0 24px 60px -25px #102f40; color: #12364a; }
.game-drawer[hidden] { display: none; }
.game-drawer__top { display: flex; justify-content: space-between; gap: 12px; }
.game-drawer__top small { color: #6a8086; font: 700 .62rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.game-drawer__top b { display: block; margin-top: 5px; font: 600 1.2rem/1.1 var(--serif); }
.game-drawer__top button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: #edf3f1; color: #12364a; cursor: pointer; }
.game-drawer__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 15px; }
.game-drawer__stats div { padding: 10px 8px; border-radius: 11px; background: #eef5f3; text-align: center; }
.game-drawer__stats b { display: block; color: #23776c; font: 700 .95rem/1 var(--sans); }
.game-drawer__stats small { display: block; margin-top: 5px; color: #61777d; font: 600 .58rem/1.2 var(--sans); }
.game-drawer__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.game-drawer__badges span { padding: 6px 8px; border-radius: 999px; background: #f2eadc; color: #755a2d; font: 700 .61rem/1 var(--sans); }
.game-drawer__link { display: block; margin-top: 13px; color: #23776c; font: 700 .72rem/1.2 var(--sans); text-align: center; }
.game-drawer__hide { width: 100%; margin-top: 10px; padding: 9px; border: 1px solid #d7e1df; border-radius: 10px; background: #f6f8f7; color: #5f747a; font: 700 .67rem/1 var(--sans); cursor: pointer; }

.game-lesson {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  margin: 26px 0 14px;
  padding: 14px 16px;
  border: 1px solid #d3dfdc;
  border-radius: 16px;
  background: linear-gradient(110deg, #eff6f3, #fff 62%, #fff0e4);
}
.game-lesson__coin { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; background: linear-gradient(145deg, #f6c48f, #ec9768); color: #6b3d24; font: 800 .68rem/1 var(--sans); box-shadow: inset 0 0 0 2px #fff7; }
.game-lesson small { color: #6a8086; font: 700 .61rem/1.2 var(--sans); letter-spacing: .07em; text-transform: uppercase; }
.game-lesson b { display: block; margin-top: 4px; color: #12364a; font: 600 .86rem/1.25 var(--sans); }
.game-lesson__module { min-width: 95px; text-align: right; }
.game-lesson__module span { display: block; height: 6px; overflow: hidden; margin-top: 6px; border-radius: 99px; background: #dbe6e3; }
.game-lesson__module i { display: block; width: var(--game-module); height: 100%; border-radius: inherit; background: #398a7d; }

.game-board {
  margin: 24px 0 30px;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid #d2dedb;
  border-radius: 24px;
  background: radial-gradient(circle at 91% 4%, #d7ebe5 0, transparent 29%), linear-gradient(145deg, #f8faf8, #edf4f1);
  box-shadow: 0 24px 52px -43px #103448;
  color: #12364a;
}
.game-board__hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 17px; }
.game-board__crest { display: grid; width: 70px; height: 70px; place-items: center; border-radius: 21px; background: linear-gradient(145deg, #2b8376, #12364a); color: #fff; box-shadow: 0 16px 28px -19px #12364a; }
.game-board__crest b { font: 700 1rem/1 var(--sans); }
.game-board__hero small { color: #5f777d; font: 700 .64rem/1.2 var(--sans); letter-spacing: .09em; text-transform: uppercase; }
.game-board__hero h2 { margin: 5px 0 0 !important; font: 600 clamp(1.35rem, 2.6vw, 1.9rem)/1.12 var(--serif) !important; }
.game-board__hero p { margin: 6px 0 0 !important; color: #60777d; font: 400 .8rem/1.4 var(--sans) !important; }
.game-board__score { text-align: right; }
.game-board__score b { display: block; color: #24796e; font: 600 1.45rem/1 var(--serif); }
.game-board__score span { color: #667c82; font: 600 .63rem/1.2 var(--sans); }
.game-board__progress { height: 10px; overflow: hidden; margin-top: 17px; border-radius: 99px; background: #d7e4e0; }
.game-board__progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #efac7b, #3a9082); transition: width .25s; }
.game-board__meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 7px; color: #627980; font: 600 .64rem/1.2 var(--sans); }
.game-board__actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.game-board__hide { padding: 7px 10px; border: 1px solid #d5dfdc; border-radius: 9px; background: #fff; color: #62787e; font: 700 .62rem/1 var(--sans); cursor: pointer; }
.game-board__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 12px; margin-top: 18px; }
.game-card { padding: 17px; border: 1px solid #d4dfdc; border-radius: 16px; background: #fff; }
.game-card h3 { margin: 0 !important; font: 600 1rem/1.15 var(--serif) !important; }
.game-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 14px; }
.game-week span { display: grid; min-height: 51px; place-items: center; border-radius: 10px; background: #edf3f1; color: #71858a; font: 700 .62rem/1 var(--sans); }
.game-week span.is-active { background: #e9f3e7; color: #2b7d5f; box-shadow: inset 0 0 0 2px #72a88e; }
.game-week span.is-today { background: #12364a; color: #fff; }
.game-week span b { font-size: .8rem; }
.game-week span small { font-size: .54rem; }
.game-week__goal { margin: 12px 0 0 !important; color: #5e757b; font: 600 .7rem/1.35 var(--sans) !important; }
.game-missions { display: grid; gap: 8px; margin-top: 12px; }
.game-mission { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: #f3f7f5; color: #12364a; text-decoration: none; }
.game-mission i { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 10px; background: #dcebe6; color: #23786d; font: normal 800 .72rem/1 var(--sans); }
.game-mission b { display: block; font: 700 .7rem/1.25 var(--sans); }
.game-mission small { display: block; margin-top: 3px; color: #6d8186; font: 600 .59rem/1.2 var(--sans); }
.game-mission em { color: #bd683e; font: normal 700 .65rem/1 var(--sans); }
.game-badges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.game-badge { position: relative; min-height: 105px; padding: 12px 9px; border: 1px solid #d8e1df; border-radius: 13px; background: #f6f8f7; text-align: center; filter: grayscale(1); opacity: .55; cursor: help; }
.game-badge.is-unlocked { border-color: #dcc18e; background: linear-gradient(#fffaf0, #f8efdb); filter: none; opacity: 1; }
.game-badge i { display: grid; width: 34px; height: 34px; margin: 0 auto 9px; place-items: center; border-radius: 50%; background: #e5eae8; font: normal 700 1rem/1 var(--sans); }
.game-badge.is-unlocked i { background: #f0cc86; }
.game-badge b { display: block; font: 700 .66rem/1.2 var(--sans); }
.game-badge small { display: block; margin-top: 4px; color: #6f8287; font: 500 .55rem/1.25 var(--sans); }
.game-badge::after { position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 5; width: max-content; max-width: 220px; padding: 8px 10px; border-radius: 9px; background: #12364a; color: #fff; content: attr(data-rarity); font: 600 .61rem/1.3 var(--sans); opacity: 0; pointer-events: none; transform: translate(-50%,5px); transition: .16s; filter: none; }
.game-badge:hover::after, .game-badge:focus::after { opacity: 1; transform: translate(-50%,0); }
.mod.game-complete { border-color: #b8d5cc; background: linear-gradient(90deg, #f2f8f5, #fff); }
.mod__gamebar { grid-column: 2 / -1; height: 5px; overflow: hidden; margin-top: -4px; border-radius: 99px; background: #dce6e3; }
.mod__gamebar i { display: block; height: 100%; border-radius: inherit; background: #3b8e81; }

.game-toast { position: fixed; right: 18px; bottom: 20px; z-index: 60; max-width: min(380px, calc(100vw - 36px)); padding: 14px 17px; border-radius: 15px; background: #12364a; color: #fff; box-shadow: 0 18px 45px -18px #102e3e; animation: game-in .3s ease both; }
.game-toast b { color: #f3ca82; font: 700 .76rem/1.25 var(--sans); }
.game-toast p { margin: 5px 0 0 !important; font: 400 .72rem/1.35 var(--sans) !important; }
.game-confetti { position: fixed; inset: 0; z-index: 59; pointer-events: none; overflow: hidden; }
.game-confetti i { position: absolute; top: -18px; left: var(--x); width: 8px; height: 14px; border-radius: 2px; background: var(--c); transform: rotate(var(--r)); animation: game-fall 1.7s ease-in forwards; animation-delay: var(--d); }
@keyframes game-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes game-fall { to { transform: translate(var(--drift), 105vh) rotate(540deg); opacity: .2; } }

@media (max-width: 900px) { .game-hud { min-width: 135px; } .game-hud__streak { display: none; } }
@media (max-width: 760px) {
  .game-hud { min-width: 0; padding: 6px; }
  .game-hud__body { display: none; }
  .game-board__hero { grid-template-columns: auto 1fr; }
  .game-board__score { grid-column: 1 / -1; text-align: left; }
  .game-board__grid { grid-template-columns: 1fr; }
  .game-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .game-lesson { grid-template-columns: auto 1fr; }
  .game-lesson__module { grid-column: 1 / -1; text-align: left; }
  .game-drawer { top: 68px; right: 14px; }
}
@media (prefers-reduced-motion: reduce) { .game-confetti { display: none; } .game-toast { animation: none; } }