#dkroot{
  --navy-900: #071428;
  --navy-800: #0b1d3a;
  --navy-700: #12294f;
  --navy-600: #1a3a6b;
  --blue: #2f7cf6;
  --ice: #9be7ff;
  --neon: #39f5a0;
  --neon-dim: #1fbf6b;
  --orange: #ff8a1f;
  --orange-dark: #e06f00;
  --cream: #fff6e6;
  --cream-dim: #d9cfbd;
  --red: #ff5a6e;
  --gold: #ffd23f;
  --c0: #ff8a1f;
  --c1: #39f5a0;
  --c2: #c58bff;
  --radius: 18px;
  --font: 'Nunito', 'Poppins', 'Ubuntu', 'DejaVu Sans', 'Segoe UI', system-ui, sans-serif;
}
:where(#dkroot, #dkroot *){ box-sizing: border-box; }
#dkroot{
  margin: 0;
  
  background: radial-gradient(ellipse at top, var(--navy-700) 0%, var(--navy-800) 45%, var(--navy-900) 100%) fixed;
  color: var(--cream);
  font-family: var(--font);
  font-size: 18px;
  -webkit-tap-highlight-color: transparent;
}
#dkroot{ overflow-x: hidden; }
#dkroot button, #dkroot input{ font-family: inherit; }
#dkroot button{ touch-action: manipulation; cursor: pointer; }
#dkroot .hidden{ display: none !important; }
#dkroot .bg-grid{
  position: fixed;
  top: var(--oyun-ust); bottom: var(--oyun-alt); left: 0; right: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(57, 245, 160, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57, 245, 160, .05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
}
#dkroot .topbar{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  background: rgba(7, 20, 40, .85);
  border-bottom: 2px solid rgba(47, 124, 246, .35);
}
#dkroot .brand{
  display: flex; align-items: center; gap: 10px;
  color: var(--cream); text-decoration: none; font-weight: 800; font-size: 1.05rem;
}
#dkroot .brand img{ height: 38px; width: auto; }
#dkroot .brand b{ color: var(--orange); }
#dkroot .topbar-right{ display: flex; align-items: center; gap: 10px; }
#dkroot .top-btn{
  min-height: 44px; padding: 6px 16px;
  border-radius: 999px; border: 2px solid rgba(155, 231, 255, .35);
  background: var(--navy-700); color: var(--cream);
  font-weight: 800; font-size: .95rem;
}
#dkroot .top-btn:active{ transform: scale(.96); }
#dkroot .net{
  font-size: .8rem; font-weight: 800; padding: 4px 12px; border-radius: 999px;
}
#dkroot .net.online{ background: rgba(57, 245, 160, .15); color: var(--neon); }
#dkroot .net.offline{ background: rgba(255, 90, 110, .18); color: var(--red); }
#dkroot main{ position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 18px 18px 40px; }
#dkroot .screen{ display: none; }
#dkroot .screen.active{ display: block; animation: fadeUp .35s ease both; }
@keyframes fadeUp{ from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
#dkroot .hero{ text-align: center; margin: 8px 0 18px; }
#dkroot .hero-kicker{
  margin: 0; color: var(--neon); font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; font-size: .85rem;
}
#dkroot .hero h1{
  margin: 4px 0 0; font-size: clamp(2.2rem, 5.5vw, 3.6rem); font-weight: 900; line-height: 1.05;
  background: linear-gradient(90deg, var(--ice), var(--cream) 45%, var(--neon));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#dkroot .hero-sub{ margin: 6px 0 0; font-size: clamp(1.2rem, 2.6vw, 1.6rem); font-weight: 800; color: var(--orange); }
#dkroot .name-box{ max-width: 460px; margin: 0 auto 22px; text-align: center; }
#dkroot .name-box label{ display: block; font-weight: 800; margin-bottom: 6px; color: var(--ice); }
#dkroot .name-box input{
  width: 100%; min-height: 58px; padding: 10px 18px;
  font-size: 1.3rem; font-weight: 800; text-align: center;
  color: var(--cream); background: var(--navy-900);
  border: 3px solid var(--navy-600); border-radius: var(--radius); outline: none;
}
#dkroot .name-box input:focus{ border-color: var(--neon); box-shadow: 0 0 0 4px rgba(57, 245, 160, .15); }
#dkroot .name-msg{ min-height: 1.3em; margin: 6px 0 0; color: var(--orange); font-weight: 700; }
#dkroot .chapters{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
#dkroot .chapter-card{
  position: relative; display: flex; flex-direction: column; gap: 8px; text-align: left;
  padding: 22px; min-height: 230px;
  background: linear-gradient(160deg, var(--navy-700), var(--navy-800));
  border: 2px solid rgba(155, 231, 255, .2); border-radius: 22px; color: var(--cream);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  overflow: hidden;
}
#dkroot .chapter-card::after{
  content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(57, 245, 160, .25), transparent 70%);
}
#dkroot .chapter-card:hover, #dkroot .chapter-card:focus-visible{ border-color: var(--neon); transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); outline: none; }
#dkroot .chapter-card:active{ transform: scale(.98); }
#dkroot .ch-num{
  width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: 14px; background: var(--orange); color: var(--navy-900); font-weight: 900; font-size: 1.5rem;
}
#dkroot .ch-title{ font-size: 1.35rem; font-weight: 900; margin: 0; }
#dkroot .ch-code{ font-size: .8rem; font-weight: 800; color: var(--ice); opacity: .8; }
#dkroot .ch-desc{ margin: 0; color: var(--cream-dim); font-weight: 700; font-size: 1rem; flex: 1; }
#dkroot .ch-meta{ display: flex; justify-content: space-between; align-items: center; font-weight: 800; }
#dkroot .ch-meta .stars-line{ color: var(--gold); font-size: 1.15rem; }
#dkroot .ch-meta .time-line{ color: var(--ice); font-size: .95rem; }
#dkroot .ch-play{
  align-self: flex-start; margin-top: 4px; padding: 8px 18px; border-radius: 999px;
  background: var(--neon); color: var(--navy-900); font-weight: 900;
}
#dkroot .menu-footer{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; }
#dkroot .totals{ font-weight: 800; color: var(--cream-dim); }
#dkroot .totals b{ color: var(--gold); }
#dkroot .btn{
  min-height: 60px; padding: 10px 26px; border-radius: 16px; border: 0;
  font-size: 1.15rem; font-weight: 900; letter-spacing: .01em;
  transition: transform .1s ease, filter .15s ease;
}
#dkroot .btn:active{ transform: scale(.96); }
#dkroot .btn-primary{ background: var(--orange); color: var(--navy-900); box-shadow: 0 5px 0 var(--orange-dark); }
#dkroot .btn-primary:active{ box-shadow: 0 2px 0 var(--orange-dark); transform: translateY(3px); }
#dkroot .btn-ghost{ background: transparent; color: var(--cream); border: 3px solid rgba(155, 231, 255, .45); }
#dkroot .btn-neon{ background: var(--neon); color: var(--navy-900); box-shadow: 0 5px 0 var(--neon-dim); }
#dkroot .hud{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
#dkroot .hud-title{ font-size: clamp(1.2rem, 2.6vw, 1.6rem); font-weight: 900; color: var(--ice); }
#dkroot .hud-chips{ display: flex; flex-wrap: wrap; gap: 8px; }
#dkroot .chip{
  padding: 8px 16px; border-radius: 999px; font-weight: 800;
  background: var(--navy-700); border: 2px solid rgba(155, 231, 255, .25);
}
#dkroot .chip b{ font-size: 1.1rem; }
#dkroot .chip-star{ color: var(--gold); }
#dkroot .chip-time b{ font-variant-numeric: tabular-nums; }
#dkroot .star-ic{ color: var(--gold); }
#dkroot .progress{ height: 10px; margin: 12px 0; border-radius: 999px; background: var(--navy-900); overflow: hidden; border: 1px solid rgba(155, 231, 255, .2); }
#dkroot .progress-fill{ height: 100%; width: 0; background: linear-gradient(90deg, var(--blue), var(--neon)); transition: width .6s ease; }
#dkroot .scene{
  height: clamp(110px, 18vh, 170px); border-radius: var(--radius); overflow: hidden;
  border: 2px solid rgba(155, 231, 255, .25); background: var(--navy-900);
}
#dkroot .scene svg{ display: block; width: 100%; height: 100%; }
#dkroot .scene-label{ font: 900 15px var(--font); fill: var(--neon); letter-spacing: .08em; }
#dkroot .scanline{ animation: scan 3.4s linear infinite; }
@keyframes scan{ from { transform: translateX(-20px); } to { transform: translateX(620px); } }
#dkroot .drip{ animation: drip 1.6s ease-in infinite; }
#dkroot .drip:nth-child(2){ animation-delay: .4s; }
#dkroot .drip:nth-child(3){ animation-delay: .8s; }
#dkroot .drip:nth-child(4){ animation-delay: 1.2s; }
@keyframes drip{ 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(34px); opacity: 0; } }
#dkroot .frost{ transition: opacity .8s ease; }
#dkroot .wave{ animation: wave 3s ease-in-out infinite alternate; }
@keyframes wave{ from { transform: translateX(0); } to { transform: translateX(-50px); } }
#dkroot .tree-grow{ transform-box: fill-box; transform-origin: 50% 100%; }
#dkroot .tree-grow.new{ animation: grow .9s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes grow{ from { transform: scale(0); } to { transform: scale(1); } }
#dkroot .seed{ opacity: .35; }
#dkroot .panel{
  margin-top: 14px; padding: 20px; border-radius: 22px;
  background: rgba(18, 41, 79, .82); border: 2px solid rgba(155, 231, 255, .2);
}
#dkroot .panel.enter{ animation: fadeUp .35s ease both; }
#dkroot .prompt{ display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
#dkroot .prompt-tag{
  flex: none; padding: 6px 12px; border-radius: 10px; background: rgba(57, 245, 160, .15);
  color: var(--neon); font-weight: 900; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase;
}
#dkroot .prompt-text{ margin: 0; font-size: clamp(1.1rem, 2.3vw, 1.35rem); font-weight: 800; line-height: 1.35; }
#dkroot .reading{
  margin: 0 0 16px; padding: 16px 20px; border-radius: 16px; text-align: center;
  font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: 900; color: var(--ice);
  background: var(--navy-900); border: 2px dashed rgba(155, 231, 255, .4);
}
#dkroot .slots{ display: grid; gap: 12px; margin-bottom: 18px; }
#dkroot .slots-3{ grid-template-columns: repeat(3, 1fr); }
#dkroot .slot{
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 110px; padding: 10px; border-radius: 16px;
  background: var(--navy-900); color: var(--cream);
  border: 3px dashed rgba(155, 231, 255, .45);
  transition: border-color .15s, background .15s, transform .15s;
}
#dkroot .slot-label{ font-size: .95rem; font-weight: 800; color: var(--ice); }
#dkroot .slot-value{ font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 900; letter-spacing: .08em; color: var(--cream-dim); }
#dkroot .slot.ready{ border-color: var(--orange); background: rgba(255, 138, 31, .08); }
#dkroot .slot.picked{ border-style: solid; border-color: var(--orange); transform: scale(1.03); }
#dkroot .slot.filled{ border-style: solid; border-color: var(--neon); background: rgba(57, 245, 160, .1); cursor: default; }
#dkroot .slot.filled .slot-value{ color: var(--neon); }
#dkroot .slot-name{ min-height: 70px; }
#dkroot .slot-name .slot-value{ font-size: clamp(1rem, 2.2vw, 1.25rem); letter-spacing: 0; }
#dkroot .pool{ display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
#dkroot .card{
  min-width: 96px; min-height: 68px; padding: 10px 20px; border-radius: 16px;
  font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 900; letter-spacing: .06em;
  color: var(--navy-900); background: var(--cream);
  border: 0; box-shadow: 0 5px 0 var(--cream-dim);
  transition: transform .12s, box-shadow .12s, opacity .2s;
}
#dkroot .card.word{ font-size: clamp(1rem, 2.2vw, 1.25rem); letter-spacing: 0; }
#dkroot .card:active{ transform: translateY(3px); box-shadow: 0 2px 0 var(--cream-dim); }
#dkroot .card.selected{ background: var(--orange); box-shadow: 0 0 0 4px rgba(255, 138, 31, .35), 0 5px 0 var(--orange-dark); transform: translateY(-4px); }
#dkroot .card.used{ visibility: hidden; }
#dkroot .shake{ animation: shake .4s ease; }
@keyframes shake{
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px); } 40% { transform: translateX(10px); }
  60% { transform: translateX(-6px); } 80% { transform: translateX(6px); }
}
#dkroot .pop{ animation: pop .35s ease; }
@keyframes pop{ 0% { transform: scale(.8); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
#dkroot .num-groups{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
#dkroot .ngroup{ display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
#dkroot .ngroup-digits{
  text-align: center; padding: 12px 6px; border-radius: 14px;
  font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; letter-spacing: .12em;
  background: var(--navy-900); color: var(--ice); border: 2px solid rgba(155, 231, 255, .3);
}
#dkroot .digit-row{ display: flex; justify-content: center; flex-wrap: nowrap; gap: 6px; margin: 4px 0 20px; }
#dkroot .digit{
  position: relative; width: clamp(34px, 7vw, 64px); height: clamp(52px, 10vw, 84px);
  display: grid; place-items: center; border-radius: 12px;
  font-size: clamp(1.6rem, 4.5vw, 2.8rem); font-weight: 900;
  background: var(--navy-900); color: var(--cream-dim); border: 2px solid rgba(155, 231, 255, .2);
}
#dkroot .digit.gap{ margin-left: clamp(8px, 2vw, 22px); }
#dkroot .digit.target{ color: var(--navy-900); border: 0; }
#dkroot .digit.t0{ background: var(--c0); }
#dkroot .digit.t1{ background: var(--c1); }
#dkroot .digit.t2{ background: var(--c2); }
#dkroot .badge{
  position: absolute; top: -14px; right: -10px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1rem; font-weight: 900;
  background: var(--cream); color: var(--navy-900); border: 2px solid var(--navy-900);
}
#dkroot .slot-rows{ display: grid; gap: 12px; margin-bottom: 18px; }
#dkroot .slot-row{ display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
#dkroot .row-key{
  display: flex; align-items: center; gap: 8px; min-width: 120px;
  font-size: 1.4rem; font-weight: 900;
}
#dkroot .row-key .dot{ width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--navy-900); }
#dkroot .dot.t0{ background: var(--c0); }
#dkroot .dot.t1{ background: var(--c1); }
#dkroot .dot.t2{ background: var(--c2); }
#dkroot .slot-row .slot{ min-height: 70px; flex-direction: row; }
#dkroot .problem-layout{ display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; align-items: start; }
#dkroot .context-card{
  padding: 16px 18px; border-radius: 16px; background: var(--navy-900);
  border-left: 6px solid var(--blue); font-size: clamp(1.05rem, 2.2vw, 1.25rem); font-weight: 700; line-height: 1.45;
}
#dkroot .context-card strong{ color: var(--ice); }
#dkroot .context-card .question{ display: block; margin-top: 8px; color: var(--orange); font-weight: 900; }
#dkroot .steps{ display: flex; gap: 8px; margin: 14px 0 10px; }
#dkroot .step-dot{
  flex: 1; height: 10px; border-radius: 999px; background: var(--navy-900); border: 1px solid rgba(155, 231, 255, .25);
}
#dkroot .step-dot.done{ background: var(--neon); border-color: var(--neon); }
#dkroot .step-dot.now{ background: var(--orange); border-color: var(--orange); }
#dkroot .step-q{ margin: 6px 0 0; font-size: clamp(1.1rem, 2.4vw, 1.35rem); font-weight: 900; line-height: 1.35; }
#dkroot .step-q .hl{ color: var(--neon); }
#dkroot .worksheet{ list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
#dkroot .worksheet li{
  padding: 8px 12px; border-radius: 10px; background: rgba(57, 245, 160, .08);
  border: 1px solid rgba(57, 245, 160, .25); font-weight: 800;
}
#dkroot .worksheet li::before{ content: "✓ "; color: var(--neon); }
#dkroot .worksheet li.revealed{ background: rgba(255, 138, 31, .08); border-color: rgba(255, 138, 31, .35); }
#dkroot .worksheet li.revealed::before{ content: "! "; color: var(--orange); }
#dkroot .keypad{ display: grid; gap: 10px; }
#dkroot .kp-display{
  min-height: 72px; display: flex; align-items: center; justify-content: flex-end; padding: 8px 18px;
  border-radius: 16px; background: var(--navy-900); border: 3px solid var(--blue);
  font-size: clamp(2rem, 5vw, 2.7rem); font-weight: 900; letter-spacing: .04em; color: var(--cream);
  font-variant-numeric: tabular-nums;
}
#dkroot .kp-display.empty{ color: rgba(255, 246, 230, .3); }
#dkroot .kp-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
#dkroot .kp-btn{
  min-height: 64px; border-radius: 14px; border: 0;
  font-size: 1.8rem; font-weight: 900; color: var(--cream);
  background: var(--navy-600); box-shadow: 0 4px 0 var(--navy-900);
}
#dkroot .kp-btn:active{ transform: translateY(3px); box-shadow: 0 1px 0 var(--navy-900); }
#dkroot .kp-btn.kp-del{ background: #3a2a4f; font-size: 1.15rem; }
#dkroot .kp-btn.kp-ok{ background: var(--neon); color: var(--navy-900); font-size: 1.2rem; box-shadow: 0 4px 0 var(--neon-dim); }
#dkroot .kp-btn[disabled]{ opacity: .5; }
#dkroot .feedback{
  min-height: 56px; margin-top: 14px; padding: 12px 18px; border-radius: 14px;
  font-weight: 800; font-size: 1.1rem; line-height: 1.35; opacity: 0; transition: opacity .2s;
}
#dkroot .feedback.show{ opacity: 1; }
#dkroot .feedback.good{ background: rgba(57, 245, 160, .14); color: var(--neon); border: 2px solid rgba(57, 245, 160, .4); }
#dkroot .feedback.bad{ background: rgba(255, 90, 110, .14); color: #ffb3bd; border: 2px solid rgba(255, 90, 110, .45); }
#dkroot .feedback.info{ background: rgba(255, 138, 31, .12); color: #ffd2a6; border: 2px solid rgba(255, 138, 31, .4); }
#dkroot .overlay{
  position: fixed; top: var(--oyun-ust); bottom: var(--oyun-alt); left: 0; right: 0; z-index: 50; display: grid; place-items: center; padding: 16px;
  background: rgba(4, 10, 22, .78);
}
#dkroot .overlay:not(.hidden) .modal{ animation: pop .35s ease both; }
#dkroot .modal{
  width: min(560px, 100%); max-height: 92vh; overflow: auto; padding: 24px; border-radius: 24px; text-align: center;
  background: linear-gradient(170deg, var(--navy-700), var(--navy-800));
  border: 2px solid rgba(57, 245, 160, .4); box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
#dkroot .modal-wide{ width: min(760px, 100%); }
#dkroot .modal h2{ margin: 0 0 10px; font-size: 1.7rem; font-weight: 900; }
#dkroot .big-stars{ font-size: 3.4rem; letter-spacing: .1em; margin: 4px 0 10px; }
#dkroot .big-stars .on{ color: var(--gold); display: inline-block; animation: starIn .5s ease both; }
#dkroot .big-stars .on:nth-child(2){ animation-delay: .15s; }
#dkroot .big-stars .on:nth-child(3){ animation-delay: .3s; }
#dkroot .big-stars .off{ color: rgba(255, 246, 230, .2); }
@keyframes starIn{ from { transform: scale(0) rotate(-90deg); } to { transform: scale(1) rotate(0); } }
#dkroot .pts-list{ list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; text-align: left; }
#dkroot .pts-list li{ display: flex; justify-content: space-between; padding: 8px 14px; border-radius: 10px; background: var(--navy-900); font-weight: 800; }
#dkroot .pts-list li.total{ background: rgba(255, 138, 31, .16); color: var(--orange); font-size: 1.15rem; }
#dkroot .modal-note{ margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: rgba(155, 231, 255, .08); font-weight: 700; line-height: 1.4; }
#dkroot .strat-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
#dkroot .strat-btn{
  min-height: 110px; padding: 14px; border-radius: 16px; text-align: left;
  background: var(--navy-900); color: var(--cream); border: 3px solid rgba(155, 231, 255, .3);
  display: flex; flex-direction: column; gap: 6px;
}
#dkroot .strat-btn b{ font-size: 1.1rem; color: var(--ice); }
#dkroot .strat-btn span{ font-size: .92rem; font-weight: 700; color: var(--cream-dim); }
#dkroot .strat-btn:hover, #dkroot .strat-btn:focus-visible{ border-color: var(--orange); outline: none; }
#dkroot .bars{ display: grid; gap: 10px; margin: 14px 0; text-align: left; }
#dkroot .bar-row{ display: grid; gap: 4px; }
#dkroot .bar-head{ display: flex; justify-content: space-between; font-weight: 800; }
#dkroot .bar-head .mine{ color: var(--orange); }
#dkroot .bar-track{ height: 18px; border-radius: 999px; background: var(--navy-900); overflow: hidden; }
#dkroot .bar-fill{ height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--blue), var(--neon)); transition: width 1s ease; }
#dkroot .bar-row.me .bar-fill{ background: linear-gradient(90deg, var(--orange-dark), var(--orange)); }
#dkroot .small-note{ font-size: .85rem; color: var(--cream-dim); font-weight: 700; margin: 0 0 12px; }
#dkroot .tabs{ display: flex; gap: 8px; justify-content: center; margin-bottom: 10px; }
#dkroot .tab{
  min-height: 48px; padding: 6px 18px; border-radius: 999px; font-weight: 900; font-size: 1rem;
  background: var(--navy-900); color: var(--cream); border: 2px solid rgba(155, 231, 255, .3);
}
#dkroot .tab.active{ background: var(--orange); color: var(--navy-900); border-color: var(--orange); }
#dkroot .leader-status{ min-height: 1.2em; margin: 0 0 8px; font-weight: 700; color: var(--orange); font-size: .95rem; }
#dkroot .table-wrap{ max-height: 52vh; overflow: auto; margin-bottom: 14px; border-radius: 14px; }
#dkroot .leader-table{ width: 100%; border-collapse: collapse; font-weight: 800; }
#dkroot .leader-table th{ position: sticky; top: 0; background: var(--navy-600); padding: 10px 8px; font-size: .95rem; }
#dkroot .leader-table td{ padding: 10px 8px; border-bottom: 1px solid rgba(155, 231, 255, .12); }
#dkroot .leader-table tr:nth-child(1) td:first-child{ color: var(--gold); }
#dkroot .leader-table tr:nth-child(2) td:first-child{ color: #d8e3ef; }
#dkroot .leader-table tr:nth-child(3) td:first-child{ color: #e8a36b; }
#dkroot .leader-table td.st{ color: var(--gold); }
#dkroot .leader-table tr.me td{ background: rgba(255, 138, 31, .12); }
#dkroot .leader-table .empty{ text-align: center; color: var(--cream-dim); padding: 24px; }
#dkroot .result-card{
  max-width: 640px; margin: 20px auto; padding: 28px; border-radius: 26px; text-align: center;
  background: linear-gradient(170deg, var(--navy-700), var(--navy-800)); border: 2px solid rgba(57, 245, 160, .4);
}
#dkroot .result-card h2{ margin: 6px 0; font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 900; }
#dkroot .result-stars{ font-size: 3rem; color: var(--gold); margin: 6px 0 14px; }
#dkroot .result-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
#dkroot .result-grid div{ padding: 14px 8px; border-radius: 14px; background: var(--navy-900); }
#dkroot .result-grid span{ display: block; font-weight: 800; color: var(--cream-dim); font-size: .9rem; }
#dkroot .result-grid b{ font-size: 1.6rem; font-weight: 900; color: var(--cream); }
#dkroot .result-note{ min-height: 1.2em; font-weight: 700; color: var(--ice); }
#dkroot .result-actions{ display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
@media (max-width: 860px){#dkroot .problem-layout{ grid-template-columns: 1fr; }

}
@media (max-width: 600px){#dkroot{ font-size: 16px; }
#dkroot main{ padding: 12px 10px 30px; }
#dkroot .panel{ padding: 14px; }
#dkroot .brand span{ display: none; }
#dkroot .slots-3, #dkroot .num-groups{ gap: 8px; }
#dkroot .slot{ min-height: 92px; }
#dkroot .slot-label{ font-size: .8rem; text-align: center; }
#dkroot .strat-grid{ grid-template-columns: 1fr; }
#dkroot .row-key{ min-width: 90px; font-size: 1.1rem; }
#dkroot .result-grid b{ font-size: 1.25rem; }

}
@media (prefers-reduced-motion: reduce){:where(#dkroot, #dkroot *), #dkroot *::before, #dkroot *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }

}


/* ---------- Ortak kabuğa oturma (oyun_header.php / oyun_footer.php) ---------- */
#dkroot{ position:fixed; top:var(--oyun-ust); bottom:var(--oyun-alt); left:0; right:0; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; }
#dkroot .topbar{ justify-content:flex-end; padding:6px 14px; }
#dkroot main{ padding-top:10px; }
#dkroot .end-name{ margin:12px 0 4px; text-align:left; }
#dkroot .end-name[hidden]{ display:none; }
#dkroot .rank-note{ font-weight:800; color:var(--neon); min-height:1.3em; margin:6px 0 10px; }
#dkroot .mklb,#dkroot .end-name{ --lb-ink:var(--cream); --lb-muted:var(--cream-dim); --lb-line:rgba(155,231,255,.25); --lb-glass:var(--navy-900); --lb-accent:var(--orange); --lb-on:var(--blue); --lb-on2:var(--navy-600); --lb-bg:var(--navy-600); --lb-row:rgba(155,231,255,.08); }
@media (max-width:520px){ #dkroot{ font-size:16px; } #dkroot main{ padding:10px 12px 28px; } }