* {
  box-sizing: border-box;
}

:root {
  --bg-black: #050402;
  --bg-brown: #17100a;
  --wood-dark: #241408;
  --wood-mid: #3a2110;
  --wood-light: #5d3516;
  --gold-dark: #8f6524;
  --gold: #c49a42;
  --gold-light: #f2d27a;
  --green-dark: #172816;
  --green: #2f4b25;
  --text-gold: #ead08a;
  --text-soft: #c7b37a;
  --panel-dark: #130d08;
  --panel-mid: #20150b;
  --paper: #d0b06a;
  --paper-light: #e0c17c;
  --danger: #9b2d20;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  color: var(--text-gold);
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 14px;
  background:
    radial-gradient(circle at 50% -10%, rgba(83, 114, 49, .35), transparent 32%),
    radial-gradient(circle at 80% 30%, rgba(104, 69, 22, .18), transparent 34%),
    linear-gradient(180deg, #060503 0%, #120d07 48%, #040302 100%);
}

a {
  color: inherit;
}

button,
input,
select {
  font-family: inherit;
}

.game-root {
  min-height: 100vh;
  padding: 10px;
}

.top-bar {
  height: 54px;
  display: grid;
  grid-template-columns: 270px 1fr 280px;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border: 1px solid #6d4b1d;
  background:
    linear-gradient(180deg, rgba(94, 57, 22, .96), rgba(35, 20, 8, .98)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 18px);
  box-shadow:
    inset 0 1px 0 rgba(255, 222, 141, .25),
    inset 0 -1px 0 rgba(0,0,0,.75),
    0 4px 14px rgba(0,0,0,.65);
}

.logo-block {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.logo-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #f0cd6f;
  background:
    radial-gradient(circle at 50% 35%, rgba(242, 210, 122, .18), rgba(19, 13, 8, .9) 72%);
  box-shadow:
    inset 0 0 8px rgba(0,0,0,.45),
    0 0 8px rgba(196, 154, 66, .2);
}

.logo-mark img {
  width: 34px;
  height: 34px;
  display: block;
  object-fit: contain;
}

.site-title {
  line-height: 1;
  color: #ffe08c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: .5px;
  text-shadow: 1px 1px 0 #000;
}

.site-subtitle {
  margin-top: 3px;
  color: #bfa568;
  font-size: 11px;
  white-space: nowrap;
}

.main-menu {
  display: flex;
  justify-content: center;
  gap: 5px;
}

.main-menu a,
.top-action {
  min-width: 96px;
  padding: 8px 10px;
  color: #e7ca79;
  text-align: center;
  text-decoration: none;
  border: 1px solid #6f4b1c;
  background:
    linear-gradient(180deg, #3b2511, #170d05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 1px 0 rgba(0,0,0,.8);
}

.main-menu a {
  min-width: 116px;
}

.main-menu a.active,
.main-menu a:hover,
.top-action:hover {
  color: #fff2b5;
  border-color: #be8f38;
  background:
    linear-gradient(180deg, #72501f, #271506);
}

.user-panel {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.user-status {
  color: #bfa568;
  font-size: 12px;
  white-space: nowrap;
}

.user-panel button,
.auth-form button,
.table-form button,
.admin-toolbar button {
  padding: 7px 12px;
  color: #f9e6a6;
  cursor: pointer;
  border: 1px solid #a4772e;
  background: linear-gradient(180deg, #4a2b10, #1b0f05);
}

.user-panel button:hover,
.auth-form button:hover,
.table-form button:hover,
.admin-toolbar button:hover {
  border-color: #d0a24c;
  background: linear-gradient(180deg, #6b4519, #241207);
}

.danger-button {
  border-color: #a84a36 !important;
  background: linear-gradient(180deg, #7b2d20, #241007) !important;
}

.inline-form {
  display: inline;
  margin: 0;
}

.main-frame {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.left-menu,
.window-panel {
  border: 1px solid #6d4b1d;
  background:
    linear-gradient(180deg, rgba(31, 20, 10, .98), rgba(11, 8, 5, .98));
  box-shadow:
    inset 0 1px 0 rgba(255, 222, 141, .13),
    0 5px 16px rgba(0,0,0,.6);
}

.left-menu {
  min-height: calc(100vh - 84px);
  padding: 8px;
}

.panel-caption,
.window-title {
  min-height: 31px;
  display: flex;
  align-items: center;
  padding: 7px 10px;
  color: #ffe08c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 700;
  border: 1px solid #744f1f;
  background:
    linear-gradient(180deg, #533216, #231207);
  text-shadow: 1px 1px 0 #000;
}

.left-link {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  padding: 8px 9px;
  color: #d8bd72;
  text-decoration: none;
  border: 1px solid #3a2914;
  background:
    linear-gradient(180deg, rgba(39, 28, 13, .96), rgba(18, 12, 6, .96));
}

.left-link:hover,
.left-link.active {
  color: #fff0af;
  border-color: #8d672a;
  background:
    linear-gradient(180deg, rgba(76, 52, 20, .98), rgba(31, 18, 7, .98));
}

.link-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6d4b1d;
  box-shadow: 0 0 0 1px #1b1005;
}

.left-link.active .link-dot {
  background: #d9b24d;
  box-shadow: 0 0 8px rgba(242, 210, 122, .6);
}

.side-box {
  margin-top: 14px;
  border: 1px solid #4f3718;
  background: rgba(0,0,0,.2);
}

.side-box-title {
  padding: 7px 9px;
  color: #f1d37c;
  border-bottom: 1px solid #4f3718;
  background: rgba(89, 57, 20, .35);
}

.side-box-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  color: #a9955d;
  border-bottom: 1px solid rgba(79,55,24,.55);
}

.side-box-row:last-child {
  border-bottom: 0;
}

.side-box-row b {
  color: #dbc17d;
  font-weight: 400;
}

.content-area {
  min-width: 0;
}

.window-panel {
  min-height: calc(100vh - 84px);
  padding: 8px;
}

.window-title {
  justify-content: space-between;
}

.window-title small {
  color: #ae955e;
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
}

.window-body {
  padding: 12px;
  border: 1px solid #3f2b13;
  border-top: 0;
  background:
    linear-gradient(180deg, rgba(25, 36, 20, .48), rgba(12, 9, 6, .7)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 28px);
}

.welcome-card,
.section-intro,
.auth-panel,
.admin-section {
  padding: 18px;
  color: #2a1a07;
  border: 1px solid #8e6427;
  background:
    linear-gradient(180deg, rgba(226, 193, 119, .95), rgba(169, 124, 52, .95));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.25);
}

.welcome-label {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 9px;
  color: #f7e4a2;
  font-size: 12px;
  border: 1px solid #6b4519;
  background: linear-gradient(180deg, #4d2d10, #1c0f05);
}

h1 {
  margin: 0 0 7px;
  color: #261503;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
  line-height: 1.1;
  text-shadow: 0 1px 0 rgba(255,255,255,.38);
}

p {
  margin: 0;
  line-height: 1.55;
}

.dashboard-grid,
.admin-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.admin-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0;
  margin-bottom: 10px;
}

.info-card,
.stat-card {
  min-height: 116px;
  padding: 12px;
  color: #d6bd78;
  border: 1px solid #5a3d19;
  background:
    linear-gradient(180deg, rgba(36, 24, 12, .96), rgba(13, 9, 5, .98));
}

.stat-card {
  min-height: 88px;
}

.stat-card span {
  display: block;
  color: #a9955d;
  font-size: 12px;
}

.stat-card b {
  display: block;
  margin-top: 10px;
  color: #f0d27d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
}

.card-title,
.admin-section-title {
  margin-bottom: 8px;
  padding-bottom: 6px;
  color: #f0d27d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  border-bottom: 1px solid rgba(139, 101, 39, .7);
}

.admin-section {
  margin-top: 10px;
}

.info-card p {
  color: #ad9963;
  font-size: 13px;
}

.auth-panel {
  max-width: 460px;
}

.auth-form {
  display: grid;
  gap: 12px;
}

.auth-form label {
  display: grid;
  gap: 6px;
  color: #2a1a07;
  font-weight: 700;
}

.auth-form input,
.table-form input,
.table-form select {
  width: 100%;
  min-height: 32px;
  padding: 7px 9px;
  color: #f3dfa2;
  border: 1px solid #6d4b1d;
  background: linear-gradient(180deg, #221508, #0f0904);
}

.auth-note {
  margin-top: 12px;
  color: #2a1a07;
}

.auth-note a {
  color: #2b1905;
  font-weight: 700;
}

.flash {
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid;
}

.flash-ok {
  color: #e8ffd4;
  border-color: #4c7b2a;
  background: rgba(38, 76, 24, .72);
}

.flash-error {
  color: #ffe1d8;
  border-color: #a84a36;
  background: rgba(90, 30, 20, .72);
}

.game-table {
  width: 100%;
  border-collapse: collapse;
  color: #d8bd72;
  background: rgba(0,0,0,.25);
}

.game-table th,
.game-table td {
  padding: 8px;
  border: 1px solid #5a3d19;
  vertical-align: top;
}

.game-table th {
  color: #f0d27d;
  text-align: left;
  background: linear-gradient(180deg, #3b2511, #170d05);
}

.game-table td {
  background: rgba(18, 12, 6, .78);
}

.table-form {
  display: flex;
  gap: 5px;
  margin: 0;
}

.users-table input {
  min-width: 130px;
}

.users-table select {
  min-width: 80px;
}

.admin-hint,
.empty-state {
  margin-top: 10px;
  color: #2a1a07;
  font-size: 13px;
}

.admin-toolbar {
  margin-bottom: 10px;
}

.log-box {
  max-height: 460px;
  overflow: auto;
  margin: 0;
  padding: 12px;
  color: #d8bd72;
  border: 1px solid #5a3d19;
  background: rgba(0,0,0,.55);
  white-space: pre-wrap;
}

@media (max-width: 1100px) {
  .top-bar {
    height: auto;
    grid-template-columns: 1fr;
  }

  .main-menu,
  .user-panel {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .main-menu a,
  .top-action {
    min-width: auto;
  }

  .main-frame {
    grid-template-columns: 1fr;
  }

  .left-menu {
    min-height: auto;
  }

  .dashboard-grid,
  .admin-stats {
    grid-template-columns: 1fr;
  }

  .game-table {
    font-size: 12px;
  }

  .table-form {
    flex-direction: column;
  }
}

.hidden-bot-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.small-note {
  font-size: 12px;
  opacity: .85;
}


/* Patch 0.0.8 — keep real logo inside top menu square */
.logo-mark {
  position: relative;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  flex: 0 0 40px !important;
}

.logo-mark img,
.logo-mark .site-logo-img {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
}


/* Patch 0.0.9 — fantasy-style MLhelp brand text */
.site-title {
  color: #ffe7a2;
  font-family: "Palatino Linotype", "Book Antiqua", Georgia, "Times New Roman", serif;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: .3px;
  line-height: .95;
  text-shadow:
    1px 1px 0 #000,
    0 0 7px rgba(242, 210, 122, .28);
}

.site-title .brand-ml {
  color: #fff0b8;
  font-size: 1.08em;
  letter-spacing: .6px;
}

.site-title .brand-help {
  color: #f1cb72;
  font-size: .96em;
  letter-spacing: .1px;
}


/* Patch 0.0.11 — home page cards */
.home-hero {
  padding: 22px 20px;
  border: 1px solid #8f6524;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 232, 147, .18), transparent 34%),
    linear-gradient(180deg, #d3af62, #a87a32);
  color: #1b0d03;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 12px rgba(0,0,0,.45);
}

.hero-badge {
  display: inline-block;
  padding: 5px 9px;
  color: #ffe7a2;
  font-size: 12px;
  border: 1px solid #7b551f;
  background: #3a210b;
}

.home-hero h1 {
  margin: 14px 0 8px;
  font-family: "Palatino Linotype", Georgia, serif;
  font-size: 34px;
  line-height: 1.1;
}

.home-hero p {
  max-width: 900px;
  margin: 0;
  font-size: 15px;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.home-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  min-height: 150px;
  padding: 14px;
  color: #e9cc7b;
  text-decoration: none;
  border: 1px solid #6d4b1d;
  background: linear-gradient(180deg, rgba(31,20,10,.98), rgba(12,8,4,.98));
}

.home-card:hover {
  color: #fff0b2;
  border-color: #c49a42;
  background: linear-gradient(180deg, rgba(58,35,13,.98), rgba(18,10,4,.98));
}

.card-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #ffe7a2;
  border: 1px solid #8f6524;
  background: #2a1909;
}

.home-card h2 {
  margin: 0 0 8px;
  font-family: Georgia, serif;
  font-size: 19px;
}

.home-card p {
  margin: 0 0 12px;
  color: #c7b37a;
  font-size: 13px;
}

.home-card span {
  color: #9f8a52;
  font-size: 12px;
}

.home-card b {
  grid-column: 2;
  align-self: end;
  color: #f2d27a;
  font-size: 13px;
}

@media (max-width: 980px) {
  .home-grid { grid-template-columns: 1fr; }
}


/* Patch 0.0.12 — calculators page */
.section-hero {
  padding: 18px;
  border: 1px solid #8f6524;
  background: linear-gradient(180deg, rgba(59,37,17,.98), rgba(18,11,5,.98));
  box-shadow: inset 0 1px 0 rgba(255,222,141,.18), 0 4px 12px rgba(0,0,0,.45);
}

.section-hero h1 {
  margin: 12px 0 8px;
  color: #ffe7a2;
  font-family: "Palatino Linotype", Georgia, serif;
  font-size: 30px;
}

.section-hero p {
  max-width: 860px;
  margin: 0;
  color: #c7b37a;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.tool-card {
  min-height: 190px;
  padding: 14px;
  color: #e9cc7b;
  text-decoration: none;
  border: 1px solid #6d4b1d;
  background: linear-gradient(180deg, rgba(31,20,10,.98), rgba(10,7,4,.98));
}

.tool-card:hover {
  color: #fff0b2;
  border-color: #c49a42;
  background: linear-gradient(180deg, rgba(66,42,17,.98), rgba(18,10,4,.98));
}

.tool-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  color: #ffe7a2;
  font-size: 22px;
  border: 1px solid #8f6524;
  background: #2a1909;
}

.tool-card h2 {
  margin: 0 0 8px;
  font-family: Georgia, serif;
  font-size: 18px;
}

.tool-card p {
  margin: 0 0 12px;
  color: #c7b37a;
  font-size: 13px;
}

.tool-card span {
  color: #9f8a52;
  font-size: 12px;
}

@media (max-width: 1100px) {
  .tool-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}

@media (max-width: 700px) {
  .tool-grid { grid-template-columns: 1fr; }
}


/* Patch 0.0.12 — calculators page approved list */
.section-hero {
  padding: 18px;
  border: 1px solid #8f6524;
  background:
    radial-gradient(circle at 18% 20%, rgba(242, 210, 122, .11), transparent 34%),
    linear-gradient(180deg, rgba(59,37,17,.98), rgba(18,11,5,.98));
  box-shadow:
    inset 0 1px 0 rgba(255,222,141,.18),
    0 4px 12px rgba(0,0,0,.45);
}

.section-hero h1 {
  margin: 12px 0 8px;
  color: #ffe7a2;
  font-family: "Palatino Linotype", Georgia, serif;
  font-size: 30px;
  line-height: 1.1;
}

.section-hero p {
  max-width: 900px;
  margin: 0;
  color: #c7b37a;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(210px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.tool-card {
  min-height: 178px;
  padding: 14px;
  color: #e9cc7b;
  text-decoration: none;
  border: 1px solid #6d4b1d;
  background:
    linear-gradient(180deg, rgba(31,20,10,.98), rgba(10,7,4,.98));
  box-shadow:
    inset 0 1px 0 rgba(255,222,141,.08),
    0 3px 10px rgba(0,0,0,.35);
}

.tool-card:hover {
  color: #fff0b2;
  border-color: #c49a42;
  background:
    linear-gradient(180deg, rgba(66,42,17,.98), rgba(18,10,4,.98));
}

.tool-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  color: #ffe7a2;
  font-size: 22px;
  border: 1px solid #8f6524;
  background:
    radial-gradient(circle at 35% 25%, rgba(242,210,122,.16), transparent 38%),
    #2a1909;
}

.tool-card h2 {
  margin: 0 0 8px;
  color: #ffe7a2;
  font-family: Georgia, serif;
  font-size: 18px;
  line-height: 1.12;
}

.tool-card p {
  margin: 0 0 12px;
  color: #c7b37a;
  font-size: 13px;
  line-height: 1.35;
}

.tool-card span {
  display: inline-block;
  padding: 3px 7px;
  color: #9f8a52;
  font-size: 12px;
  border: 1px solid #4f3718;
  background: rgba(19, 13, 8, .7);
}

@media (max-width: 1180px) {
  .tool-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}

@media (max-width: 720px) {
  .tool-grid { grid-template-columns: 1fr; }
}