/* ===== Visual Math — Minecraft-inspired theme ===== */

:root{
  --font-pixel: 'Press Start 2P', monospace;
  --font-mono: 'VT323', monospace;

  --mc-gray: #c6c6c6;
  --mc-gray-dark: #8b8b8b;
  --mc-slot: #8b8b8b;
  --mc-border: #000000;
  --mc-light: #ffffff;
  --mc-shade: #545454;

  --sky-top: #6fb3ee;
  --sky-bottom: #bfe4fb;
  --dirt: #6b4a2b;
  --grass-top: #6cbb3c;

  --green: #4caf3c;
  --green-dark: #2e6e22;
  --red: #d1382b;
  --red-dark: #7a1a12;
  --gold: #e0c23a;
}

*{ box-sizing: border-box; }

html, body{ height: 100%; }

body{
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-mono);
  font-size: 22px;
  color: #1c1c1c;
  background:
    linear-gradient(var(--sky-top), var(--sky-bottom) 60%, var(--dirt) 60%, var(--dirt) 100%);
  background-attachment: fixed;
  display: flex;
  justify-content: center;
  padding: 24px 12px 60px;
}

/* ===== Pixel bevel helpers ===== */
.mc-panel{
  background: var(--mc-gray);
  border: 4px solid var(--mc-border);
  box-shadow:
    inset 3px 3px 0 0 var(--mc-light),
    inset -3px -3px 0 0 var(--mc-shade);
  padding: 20px;
}

.mc-inset{
  background: var(--mc-slot);
  border: 4px solid var(--mc-border);
  box-shadow:
    inset -3px -3px 0 0 var(--mc-light),
    inset 3px 3px 0 0 var(--mc-shade);
}

/* ===== Container ===== */
.mc-container{
  width: 100%;
  max-width: 760px;
  background: var(--mc-gray);
  border: 4px solid var(--mc-border);
  box-shadow:
    inset 3px 3px 0 0 var(--mc-light),
    inset -3px -3px 0 0 var(--mc-shade),
    0 8px 0 rgba(0,0,0,.25);
  padding: 20px;
  height: fit-content;
  position: relative;
}

.mc-title-bar{
  text-align: center;
  margin-bottom: 18px;
}

/* ===== Profile badge (HUD, top-left) ===== */
.profile-badge{
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--mc-slot);
  border: 3px solid #000;
  box-shadow: inset -2px -2px 0 rgba(255,255,255,.4), inset 2px 2px 0 rgba(0,0,0,.4);
  padding: 5px 10px 5px 5px;
  cursor: pointer;
  font-family: var(--font-mono);
  color: #fff;
}
.profile-badge:hover{ filter: brightness(1.1); }
.profile-badge-icon{
  width: 26px;
  height: 26px;
  min-width: 26px;
  border: 2px solid #000;
  display: block;
  background: #e8e8e8;
  padding: 2px;
}
.profile-badge-icon svg, .profile-icon-option svg{
  width: 100%;
  height: 100%;
  display: block;
}
.profile-badge-text{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  font-size: 15px;
}
#profile-badge-points{ color: var(--gold); }

.mc-logo{
  font-family: var(--font-pixel);
  font-size: 22px;
  line-height: 1.6;
  color: #ffffff;
  text-shadow: 3px 3px 0 var(--mc-shade), 3px 3px 0 #000;
  margin: 8px 0 0;
  letter-spacing: 1px;
}
.mc-logo span{ color: var(--gold); }

.mc-subtitle{
  text-align: center;
  font-size: 26px;
  color: #333;
  margin-top: 0;
}

.mc-heading{
  font-family: var(--font-pixel);
  font-size: 15px;
  color: #2b2b2b;
  text-shadow: 1px 1px 0 rgba(255,255,255,.4);
  margin: 6px 0 16px;
}

/* ===== Screens ===== */
.screen{ display: none; }
.screen.active{ display: block; }

/* ===== Operation slots (inventory style) ===== */
.slot-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 10px;
}
@media (max-width: 480px){
  .slot-grid{ grid-template-columns: 1fr; }
}

.op-slot{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 10px;
  cursor: pointer;
  font-family: var(--font-mono);
  background: var(--mc-slot);
  border: 4px solid var(--mc-border);
  box-shadow:
    inset -3px -3px 0 0 rgba(255,255,255,.5),
    inset 3px 3px 0 0 rgba(0,0,0,.45);
}
.op-slot:hover{
  filter: brightness(1.1);
}
.op-slot:active{
  box-shadow:
    inset 3px 3px 0 0 rgba(0,0,0,.45),
    inset -3px -3px 0 0 rgba(255,255,255,.5);
}

.block{
  position: relative;
  width: 64px;
  height: 64px;
  border: 3px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.op-symbol{
  font-family: var(--font-pixel);
  font-size: 22px;
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0,0,0,.6);
}

.block-grass{
  background: linear-gradient(to bottom, #7ccf46 0%, #7ccf46 32%, #7a5230 32%, #7a5230 100%);
  box-shadow: inset -4px -4px 0 rgba(0,0,0,.3), inset 3px 3px 0 rgba(255,255,255,.3);
}
.block-stone{
  background: linear-gradient(to bottom, #b0b0b0 0%, #b0b0b0 32%, #7f7f7f 32%, #7f7f7f 100%);
  box-shadow: inset -4px -4px 0 rgba(0,0,0,.3), inset 3px 3px 0 rgba(255,255,255,.3);
}
.block-diamond{
  background: linear-gradient(to bottom, #8fe9e2 0%, #8fe9e2 32%, #2fa9a0 32%, #2fa9a0 100%);
  box-shadow: inset -4px -4px 0 rgba(0,0,0,.3), inset 3px 3px 0 rgba(255,255,255,.3);
}
.block-redstone{
  background: linear-gradient(to bottom, #e8584a 0%, #e8584a 32%, #7a1a12 32%, #7a1a12 100%);
  box-shadow: inset -4px -4px 0 rgba(0,0,0,.3), inset 3px 3px 0 rgba(255,255,255,.3);
}
.block-lapis{
  background: linear-gradient(to bottom, #5b7fe0 0%, #5b7fe0 32%, #1e3a8f 32%, #1e3a8f 100%);
  box-shadow: inset -4px -4px 0 rgba(0,0,0,.3), inset 3px 3px 0 rgba(255,255,255,.3);
}
.block-gold{
  background: linear-gradient(to bottom, #fff3a0 0%, #fff3a0 32%, #d8901a 32%, #d8901a 100%);
  box-shadow: inset -4px -4px 0 rgba(0,0,0,.3), inset 3px 3px 0 rgba(255,255,255,.3);
}
.op-label{
  font-size: 22px;
  color: #222;
}

/* ===== Buttons ===== */
.mc-btn{
  font-family: var(--font-mono);
  font-size: 24px;
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0,0,0,.6);
  padding: 12px 18px;
  cursor: pointer;
  border: 3px solid #000;
  box-shadow:
    inset -3px -3px 0 0 rgba(0,0,0,.4),
    inset 3px 3px 0 0 rgba(255,255,255,.35);
  transition: filter .1s ease;
}
.mc-btn:hover{ filter: brightness(1.12); }
.mc-btn:focus{
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
.mc-btn:active{
  transform: translateY(2px);
  box-shadow:
    inset 3px 3px 0 0 rgba(0,0,0,.4),
    inset -3px -3px 0 0 rgba(255,255,255,.35);
}
.mc-btn:disabled{
  opacity: .5;
  cursor: not-allowed;
  filter: grayscale(60%);
}

.mc-btn-primary{ background: var(--green); }
.mc-btn-secondary{ background: var(--mc-gray-dark); color:#222; text-shadow: 1px 1px 0 rgba(255,255,255,.4); }

.mc-back{
  font-family: var(--font-mono);
  font-size: 20px;
  background: var(--mc-gray-dark);
  color: #222;
  border: 3px solid #000;
  box-shadow: inset -2px -2px 0 rgba(0,0,0,.35), inset 2px 2px 0 rgba(255,255,255,.4);
  padding: 6px 12px;
  cursor: pointer;
  margin-bottom: 14px;
}
.mc-back:hover{ filter: brightness(1.1); }

/* ===== Mode cards ===== */
.mode-cards{
  display: grid;
  gap: 14px;
}
.mc-card{
  text-align: left;
  font-family: var(--font-mono);
  background: var(--mc-slot);
  border: 3px solid #000;
  box-shadow: inset -3px -3px 0 rgba(255,255,255,.45), inset 3px 3px 0 rgba(0,0,0,.4);
  padding: 16px;
  cursor: pointer;
  color: #fff;
}
.mc-card:hover{ filter: brightness(1.1); }
.mc-card-title{ font-size: 24px; margin-bottom: 4px; }
.mc-card-desc{ font-size: 19px; color: #ddd; }
.mc-card-badge{
  display: inline-block;
  margin-top: 6px;
  font-family: var(--font-pixel);
  font-size: 10px;
  color: #2b2b2b;
  background: var(--gold);
  padding: 4px 8px;
  border: 2px solid #000;
}
.mc-card-disabled{
  cursor: not-allowed;
  filter: grayscale(70%);
  opacity: .75;
}

/* ===== Decimal (kommatal) toggle ===== */
.mc-toggle-wrap{
  margin-bottom: 16px;
}
.mc-toggle{
  display: flex;
  border: 3px solid #000;
}
.mc-toggle button{
  flex: 1;
  font-family: var(--font-mono);
  font-size: 20px;
  padding: 8px 10px;
  background: var(--mc-gray-dark);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: inset -2px -2px 0 rgba(0,0,0,.35), inset 2px 2px 0 rgba(255,255,255,.3);
}
.mc-toggle button + button{ border-left: 3px solid #000; }
.mc-toggle button.active{
  background: var(--green);
}
.mc-hint{
  font-size: 18px;
  color: #444;
  margin: 8px 0 14px;
}
.mc-label{
  font-size: 20px;
  color: #222;
  margin: 4px 0 6px;
}

/* ===== Form ===== */
.input-fields{
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
}
.field label{
  display: block;
  font-size: 20px;
  margin-bottom: 4px;
  color: #222;
}
.field input{
  width: 100%;
  font-family: var(--font-mono);
  font-size: 26px;
  padding: 8px 10px;
  background: #fff;
  border: 3px solid #000;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.25);
}
.mc-error{
  color: #7a1a12;
  font-size: 20px;
  min-height: 1.4em;
  margin-bottom: 10px;
}

/* ===== XP bar ===== */
.xp-bar-wrap{
  height: 18px;
  background: #1c1c1c;
  border: 3px solid #000;
  margin-bottom: 16px;
  padding: 2px;
}
.xp-bar-fill{
  height: 100%;
  width: 0%;
  background: var(--green);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.4);
  transition: width .3s ease;
}

/* ===== Visual canvas ===== */
.visual-canvas{
  margin-bottom: 16px;
  overflow-x: auto;
}
.visual-canvas table{
  border-collapse: collapse;
  margin: 0 auto;
  font-family: var(--font-mono);
  font-size: 32px;
}
.visual-canvas td{
  width: 46px;
  height: 46px;
  text-align: center;
  vertical-align: middle;
}
.vc-small{ font-size: 18px; color: #7a1a12; height: 22px; }
.vc-op{ text-align: left !important; font-size: 32px; }
.vc-line td{ border-top: 3px solid #000; }
.vc-current{ background: var(--gold); box-shadow: inset 0 0 0 3px #000; }
.vc-empty{ color: #999; }
.vc-comma{ width: 18px !important; font-weight: bold; }

.borrow-cell{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  padding: 4px 0;
}
.borrow-strike{
  font-size: 16px;
  color: #7a1a12;
  text-decoration: line-through;
}
.borrow-new{
  font-size: 28px;
  color: #1c1c1c;
  font-weight: bold;
}
.vc-title{
  text-align: center;
  font-size: 26px;
  margin-bottom: 10px;
  color: #222;
}

/* grid method (multiplication) */
.grid-table td{
  width: 90px;
  height: 60px;
  border: 3px solid #000;
  background: #fff;
  font-size: 24px;
}
.grid-table td.grid-head{
  background: var(--mc-gray-dark);
  color: #fff;
  font-weight: normal;
}
.grid-table td.grid-head-frac{
  background: #2fa9a0;
  color: #fff;
}
.grid-table td.vc-current{ background: var(--gold); }
.grid-sum{
  text-align: center;
  font-size: 22px;
  margin-top: 10px;
  color: #222;
}
.grid-legend{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 18px;
  color: #444;
  margin-bottom: 8px;
}
.grid-legend-swatch{
  display: inline-block;
  width: 16px;
  height: 16px;
  background: #2fa9a0;
  border: 2px solid #000;
}

/* equations: balance scale */
.balance-scale{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.balance-beam{
  display: flex;
  align-items: stretch;
  gap: 16px;
  width: 100%;
  max-width: 480px;
}
.balance-pan{
  flex: 1;
  text-align: center;
  font-size: 28px;
  padding: 18px 10px;
  background: var(--mc-slot);
  color: #fff;
  border: 3px solid #000;
  box-shadow: inset -3px -3px 0 rgba(255,255,255,.4), inset 3px 3px 0 rgba(0,0,0,.4);
  min-width: 0;
  overflow-wrap: break-word;
}
.balance-pending-op{
  color: var(--gold);
  font-weight: bold;
}
.balance-equals{
  font-size: 28px;
  font-family: var(--font-pixel);
  display: flex;
  align-items: center;
  color: #222;
}
.balance-fulcrum{
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-bottom: 26px solid var(--mc-border);
  margin-top: 6px;
}

/* grouping: highlight-and-collapse expression */
.group-expression{
  text-align: center;
  font-size: 32px;
  color: #222;
  padding: 20px 10px;
  word-spacing: 4px;
}
.group-active{
  background: var(--gold);
  padding: 4px 10px;
  border: 3px solid #000;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.4);
}

/* shared own-task template picker (equations, grouping) */
.task-template-list{
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}
.task-template-option{
  text-align: left;
  font-family: var(--font-mono);
  font-size: 24px;
  background: var(--mc-slot);
  color: #fff;
  border: 3px solid #000;
  box-shadow: inset -2px -2px 0 rgba(0,0,0,.35), inset 2px 2px 0 rgba(255,255,255,.35);
  padding: 10px 14px;
  cursor: pointer;
}
.task-template-option:hover{ filter: brightness(1.1); }
.task-template-option.selected{
  background: var(--green);
}

/* division: open area model (partial quotients) */
.div-header{
  text-align: center;
  font-size: 30px;
  margin-bottom: 6px;
}
.area-total-label{
  text-align: center;
  font-size: 20px;
  color: #444;
  margin-bottom: 10px;
}
.area-bars{
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.area-bar{
  min-width: 15%;
  padding: 8px 10px;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 20px;
  text-shadow: 1px 1px 0 rgba(0,0,0,.5);
  border: 3px solid #000;
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.3), inset 3px 3px 0 rgba(255,255,255,.3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.area-bar-pending{
  background: repeating-linear-gradient(45deg, #d8b03a, #d8b03a 10px, #c49f2e 10px, #c49f2e 20px);
  color: #2b2b2b;
  text-shadow: none;
  border: 3px dashed #000;
}
.area-remaining, .area-quotient{
  text-align: center;
  font-size: 22px;
  color: #222;
  margin-top: 4px;
}
.area-quotient{
  color: var(--green-dark);
}

/* ===== Step card ===== */
.step-prompt{
  font-size: 24px;
  color: #222;
  margin-top: 0;
}
.step-inputs{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.step-inputs input[type="number"],
.step-inputs input[type="text"]{
  width: 170px;
  font-family: var(--font-mono);
  font-size: 26px;
  padding: 6px 8px;
  background: #fff;
  border: 3px solid #000;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.25);
  appearance: textfield;
  -moz-appearance: textfield;
}
.step-inputs input[type="number"]::-webkit-outer-spin-button,
.step-inputs input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.choice-group{ display: flex; gap: 10px; }
.choice-btn{
  font-family: var(--font-mono);
  font-size: 20px;
  padding: 8px 16px;
  background: var(--mc-gray-dark);
  color: #fff;
  border: 3px solid #000;
  box-shadow: inset -2px -2px 0 rgba(0,0,0,.35), inset 2px 2px 0 rgba(255,255,255,.4);
  cursor: pointer;
}
.choice-btn.selected{
  background: var(--green);
}
.step-feedback{
  min-height: 1.4em;
  font-size: 20px;
  margin-bottom: 8px;
}
.step-feedback.ok{ color: var(--green-dark); }
.step-feedback.bad{ color: var(--red-dark); }
.step-actions{ display: flex; gap: 10px; flex-wrap: wrap; }

/* ===== History ===== */
.step-history{
  font-size: 19px;
  max-height: 220px;
  overflow-y: auto;
  color: #333;
}
.step-history .hist-item{
  padding: 4px 0;
  border-bottom: 2px dashed #9a9a9a;
}
.step-history .hist-item:last-child{ border-bottom: none; }
.step-history .hist-revealed{ color: #7a1a12; }
.step-history-empty{ color: #666; }

/* ===== Achievement / done screen ===== */
.achievement-banner{
  display: flex;
  align-items: center;
  gap: 14px;
  background: #2b2b2b;
  border: 3px solid var(--gold);
  box-shadow: inset 0 0 0 2px #000;
  padding: 16px;
  margin-bottom: 20px;
}
.achievement-icon{
  width: 48px;
  height: 48px;
  min-width: 48px;
  background: var(--green);
  border: 3px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #fff;
}
.achievement-title{
  font-family: var(--font-pixel);
  font-size: 13px;
  color: var(--gold);
  margin-bottom: 6px;
}
.achievement-desc{
  font-size: 22px;
  color: #fff;
}
.achievement-points{
  font-size: 22px;
  color: var(--gold);
  margin-top: 4px;
}
.done-actions{ display: flex; gap: 10px; flex-wrap: wrap; }

/* ===== Profile screen ===== */
.profile-name-input{
  width: 100%;
  font-family: var(--font-mono);
  font-size: 26px;
  padding: 8px 10px;
  background: #fff;
  border: 3px solid #000;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.25);
}
.profile-icon-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
@media (max-width: 480px){
  .profile-icon-grid{ grid-template-columns: repeat(3, 1fr); }
}
.profile-icon-option{
  aspect-ratio: 1;
  min-width: 0;
  min-height: 0;
  border: 3px solid #000;
  cursor: pointer;
  padding: 6px;
  background: #e8e8e8;
  box-shadow: inset -2px -2px 0 rgba(0,0,0,.25), inset 2px 2px 0 rgba(255,255,255,.5);
  overflow: hidden;
}
.profile-icon-option:hover{ filter: brightness(1.05); }
.profile-icon-option.selected{
  background: #fff9dd;
  box-shadow: 0 0 0 3px var(--gold), inset -2px -2px 0 rgba(0,0,0,.2), inset 2px 2px 0 rgba(255,255,255,.6);
}
.profile-points-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.profile-points-label{ font-size: 22px; color: #222; }
.profile-points-value{
  font-family: var(--font-pixel);
  font-size: 24px;
  color: var(--green-dark);
}
.profile-stats{
  display: grid;
  gap: 6px;
  font-size: 20px;
  color: #222;
}
.profile-stats .stat-row{
  display: flex;
  justify-content: space-between;
  border-bottom: 2px dashed #9a9a9a;
  padding-bottom: 3px;
}
.profile-stats .stat-total{
  font-weight: bold;
  border-bottom: none;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 2px solid #000;
}

/* ===== Toasts ===== */
.toast-container{
  position: fixed;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 999;
}
.toast{
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(20,20,20,.95);
  border: 2px solid var(--gold);
  box-shadow: inset 0 0 0 2px #000;
  padding: 10px 14px;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 19px;
  min-width: 220px;
  animation: toast-in .25s ease, toast-out .3s ease 2.2s forwards;
}
.toast-icon{
  width: 28px;
  height: 28px;
  min-width: 28px;
  background: var(--green);
  border: 2px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.toast-title{
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--gold);
  display: block;
  margin-bottom: 4px;
}
@keyframes toast-in{
  from{ transform: translateX(40px); opacity: 0; }
  to{ transform: translateX(0); opacity: 1; }
}
@keyframes toast-out{
  from{ opacity: 1; }
  to{ opacity: 0; transform: translateX(40px); }
}

/* division: ladder method */
.ladder-intro{
  text-align: center;
  font-size: 19px;
  color: #444;
  margin-bottom: 10px;
}
.ladder-layout{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.ladder-helper{
  background: var(--mc-slot);
  color: #fff;
  border: 3px solid #000;
  box-shadow: inset -2px -2px 0 rgba(0,0,0,.35), inset 2px 2px 0 rgba(255,255,255,.35);
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 20px;
  min-width: 150px;
}
.ladder-helper-title{ margin-bottom: 4px; color: var(--gold); }
.ladder-helper-row{ display: flex; justify-content: space-between; gap: 14px; }
.ladder-helper-big{ opacity: .5; }
.ladder-table{
  flex: 1;
  min-width: 260px;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 24px;
}
.ladder-table th{
  font-size: 16px;
  text-align: left;
  color: #555;
  border-bottom: 3px solid #000;
  padding: 2px 8px;
}
.ladder-table td{ padding: 3px 8px; vertical-align: middle; }
.ladder-table td:first-child{ border-right: 3px solid #000; width: 50%; text-align: right; }
.ladder-start td:first-child, .ladder-rest td:first-child{ border-top: 0; font-weight: bold; }
.ladder-rest td:first-child{ border-top: 3px solid #000; }
.ladder-note{ font-size: 16px; color: #666; }
.ladder-rung{
  min-width: 36px;
  padding: 2px 8px;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0,0,0,.5);
  border: 3px solid #000;
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.3), inset 3px 3px 0 rgba(255,255,255,.3);
}
.ladder-pending td:first-child{ color: #8a6d00; }
.ladder-sum{
  text-align: center;
  font-size: 22px;
  color: var(--green-dark);
  margin-top: 10px;
}
.ladder-guide{
  margin-top: 12px;
  padding: 10px 12px;
  background: #fff8d6;
  border: 3px solid #000;
  font-size: 20px;
  color: #222;
}