@keyframes dk-pulse{0%{box-shadow:0 0 0 0 rgba(247,215,34,.9)}100%{box-shadow:0 0 0 14px rgba(247,215,34,0)}}
.dk-shade{position:absolute;inset:0;background:rgba(19,17,70,.45);border-radius:12px}
.dk-pop{position:absolute;left:0;right:0;bottom:0;background:#fbf9ef;color:#131146;border:3px solid #131146;border-radius:16px;padding:14px;box-shadow:0 -4px 0 rgba(0,0,0,.1);animation:dk-up .2s ease-out}
@keyframes dk-up{from{transform:translateY(30px);opacity:0}}
.dk-pop p{margin:4px 0 10px;font-size:15px;line-height:1.35}
.dk-nm{font-weight:800;font-size:17px;line-height:1.2}
.dk-btns{display:flex;gap:8px}
.dk-b{flex:1;min-height:56px;border:3px solid #131146;border-radius:12px;font-weight:800;font-size:16px;line-height:1.1;font-family:inherit;cursor:pointer;color:#131146;box-shadow:3px 3px 0 #131146}
.dk-keep{background:#7bd34a}.dk-no{background:#F7D722}
.dk-b:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #131146}
.dk-good{background:#c8f0b0;border-color:#1c6b20}
.dk-wrong{background:#d8142a;border-color:#7a0010;color:#fff}.dk-wrong .btn{background:#fff;color:#131146}
.dk-res{top:50%;bottom:auto;transform:translateY(-50%);text-align:center;background:#F7D722;animation:none}
.dk-big{font-size:56px;font-weight:800;line-height:1}.dk-rt{font-size:20px;font-weight:800;margin-bottom:4px}

.dk{width:100%;--dkh:min(450px,calc(100vh - 360px))}
.dk-wrap{position:relative;display:block;border-radius:14px}
.dk-top{display:flex;align-items:center;gap:10px}.dk-cnt{font:400 13px var(--mono,monospace);white-space:nowrap}.dk-cnt b{font:800 20px Syne,sans-serif}
.dk-bar{flex:1;height:8px;background:rgba(19,17,70,.18);border-radius:4px;overflow:hidden}.dk-bar i{display:block;height:100%;background:#1887F7;transition:width .3s}
.dk-hint{font:400 12px/1.35 var(--mono,monospace);margin:4px 0 8px}
.dk-scene{position:relative;width:min(100%,calc(var(--dkh)*.81));aspect-ratio:358/440;margin:0 auto;border:3px solid var(--navy,#131146);border-radius:10px;overflow:hidden;box-shadow:5px 5px 0 var(--navy,#131146);
 background:
  radial-gradient(ellipse at 50% 40%,rgba(255,235,200,.28),transparent 65%),
  repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 5px),
  repeating-linear-gradient(0deg,rgba(90,45,15,.10) 0 1px,transparent 1px 9px),
  linear-gradient(90deg,transparent 33%,rgba(60,30,10,.35) 33.4%,transparent 34%,transparent 66%,rgba(60,30,10,.35) 66.4%,transparent 67%),
  linear-gradient(180deg,#c98f58,#b97e48 45%,#c58953);
 box-shadow:inset 0 0 70px rgba(50,22,6,.55),5px 5px 0 var(--navy,#131146)}
.dk-scene:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 8%,rgba(255,255,255,.18),transparent 45%);pointer-events:none}
.dk-decor{position:absolute;height:auto;filter:drop-shadow(1px 3px 2px rgba(0,0,0,.4));pointer-events:none}
.dk-it{position:absolute;padding:0;border:0;background:none;cursor:pointer;transform:translate(-50%,-50%) rotate(var(--r,0deg));transition:transform .15s;-webkit-tap-highlight-color:transparent}
.dk-it svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(2px 5px 3px rgba(40,18,4,.55))}
.dk-it:hover,.dk-it:focus-visible{transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(1.07)}
.dk-it:focus-visible{outline:3px solid #fff;outline-offset:4px;border-radius:8px}
.dk-it:not(.dk-ok):not(.dk-bad) svg{animation:dk-glow 1.8s ease-in-out infinite}
.dk-it.dk-ok svg{filter:drop-shadow(0 0 0 #0000) drop-shadow(0 0 5px #3bd14a) drop-shadow(2px 5px 3px rgba(40,18,4,.55))}
.dk-it.dk-bad svg{filter:drop-shadow(0 0 5px #ff2a44) drop-shadow(2px 5px 3px rgba(40,18,4,.55));opacity:.8}
.dk-ic{position:absolute;right:-8px;top:-8px;width:26px;height:26px;border-radius:50%;border:2px solid #131146;display:none;align-items:center;justify-content:center;font:800 15px/1 Syne,sans-serif;color:#fff;transform:rotate(calc(var(--r,0deg)*-1))}
.dk-ok .dk-ic{display:flex;background:#1f9a2e}.dk-bad .dk-ic{display:flex;background:#d8142a}
@keyframes dk-glow{0%,100%{filter:drop-shadow(0 0 0 rgba(247,215,34,0)) drop-shadow(2px 5px 3px rgba(40,18,4,.55))}50%{filter:drop-shadow(0 0 3px #fff3a0) drop-shadow(0 0 9px #f7d722) drop-shadow(2px 5px 3px rgba(40,18,4,.55))}}
@media (prefers-reduced-motion:reduce){.dk-it svg{animation:none!important}}
.dk-shade{position:absolute;inset:0;background:rgba(19,17,70,.45);border-radius:12px;z-index:1}.dk-pop{z-index:2}