/* Čarovná dedinka – match-3 board (engine view). All classes are prefixed dkm-. */
@font-face{font-family:'Titan One';src:url(../fonts/titan-one.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC;font-display:swap}
@font-face{font-family:'Titan One';src:url(../fonts/titan-one-ext.woff2) format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF;font-display:swap}
@font-face{font-family:'Nunito';src:url(../fonts/nunito.woff2) format('woff2');font-weight:200 1000;font-display:swap}
.dkm{--ink:#4A3220;--ink2:#8A6A4E;--cs:40px;position:relative;max-width:480px;margin:0 auto;padding:8px 12px 10px;display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden;font-family:'Nunito',ui-rounded,system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
 --noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .15 0 0 0 .10 0'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>")}
.dkm *{box-sizing:border-box}
.dkm-panel{background:var(--noise),linear-gradient(180deg,#FFFBF2,#FBEFD8);border-radius:20px;border:3px solid #fff;box-shadow:0 0 0 2.5px #E7C68E,0 3px 0 2.5px #C9965A,0 12px 24px rgba(70,40,10,.26),inset 0 2px 0 rgba(255,255,255,.9)}
.dkm-btn3d{position:relative;border-radius:16px;color:#fff;font-family:'Titan One',ui-rounded,sans-serif;display:flex;align-items:center;justify-content:center;overflow:hidden;text-shadow:0 2px 0 rgba(0,0,0,.22)}
.dkm-btn3d:before{content:'';position:absolute;left:4px;right:4px;top:2px;height:46%;border-radius:12px 12px 40% 40%/12px 12px 10px 10px;background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.08));pointer-events:none}
.dkm-btn3d.pink{background:linear-gradient(180deg,#FFA3C6,#F2719F 55%,#DA4F84);box-shadow:inset 0 -3px 0 rgba(140,20,70,.3),0 3px 0 #A93163,0 6px 12px rgba(170,40,90,.3);border:2px solid #FFD3E4}
.dkm-btn3d.green{background:linear-gradient(180deg,#8EE35A,#5DBB3F 55%,#46A02C);box-shadow:inset 0 -3px 0 rgba(30,90,10,.35),0 3px 0 #2F7A1A;border:2px solid #C8F5A6}
/* sprite from atlas (8x5 grid) */
.dkm-spr{display:inline-block;width:38px;height:38px;background:var(--atlas) no-repeat;background-size:800% 600%;background-position:calc(var(--sx)*100%/7) calc(var(--sy)*100%/5)}
/* header */
.dkm-hud{display:flex;gap:8px;align-items:stretch;flex:none}
.dkm-lvl{width:86px;flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}
.dkm-pill{padding:3px 10px 4px;font-family:'Nunito',ui-rounded,system-ui,sans-serif;font-weight:900;font-size:14px;letter-spacing:0;white-space:nowrap;text-shadow:0 1px 0 rgba(120,20,60,.35)}
.dkm-medal{position:relative;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle at 40% 30%,#FFFDF4,#F7E6C2 70%);box-shadow:0 0 0 4px #F7D27A,0 0 0 6.5px #A8691F,0 5px 0 6px #7A4517,0 12px 20px rgba(60,30,0,.35),inset 0 -5px 8px rgba(160,100,30,.25);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;margin-top:4px}
.dkm-medal b{font-family:'Titan One',sans-serif;font-weight:400;font-size:29px;color:#D24F80;text-shadow:0 2px 0 #fff,0 3px 0 rgba(160,40,80,.25)}
.dkm-medal span{font-size:12px;font-weight:900;color:#7A4A22;margin-top:0;letter-spacing:0;max-width:66px;text-align:center;line-height:1.05}
.dkm-medal span.long{font-size:12px;letter-spacing:0}
.dkm-medal.low{animation:dkm-low 1s ease-in-out infinite}
.dkm-medal.low b{color:#E0302F}
@keyframes dkm-low{50%{transform:scale(1.08)}}
.dkm-hard{position:absolute;bottom:-12px;font-size:9.5px;font-weight:900;color:#fff;background:linear-gradient(#9C5CF0,#6E3FC8);border:1.5px solid #E8D8FF;border-radius:9px;padding:1px 7px;white-space:nowrap;box-shadow:0 2px 4px rgba(50,20,90,.4);z-index:2}
.dkm-goal{flex:1;min-width:0;padding:5px 8px 6px}
.dkm-goal h3{font-family:'Nunito',ui-rounded,system-ui,sans-serif;font-weight:900;font-size:16px;letter-spacing:0;color:#8A5226;text-align:center;margin:0 0 2px}
.dkm-gitems{display:flex;justify-content:space-around;gap:4px}
.dkm-gi{display:flex;flex-direction:column;align-items:center;font-weight:900;min-width:0;position:relative}
.dkm-ic{width:48px;height:48px;border-radius:15px;background:radial-gradient(circle at 50% 35%,#fff,#F2DFBC);box-shadow:inset 0 -3px 4px rgba(150,100,40,.22),0 2px 0 #E2C38C;display:flex;align-items:center;justify-content:center}
.dkm-ic img{width:34px;height:34px;object-fit:contain;transform:rotate(-30deg);filter:drop-shadow(0 2px 2px rgba(80,40,0,.35))}
.dkm-ic.bump{animation:dkm-bump .3s}
@keyframes dkm-bump{40%{transform:scale(1.18)}}
.dkm-gstar svg{width:32px;height:32px;fill:#FFC93C;stroke:#B97408;stroke-width:1.2}
.dkm-n{font-family:'Titan One',sans-serif;font-weight:400;font-size:14.5px;margin-top:1px;line-height:1.15;white-space:nowrap}
.dkm-n small{color:var(--ink2);font-size:10.5px}
.dkm-t{font-size:10px;color:var(--ink2);font-weight:800;margin-top:-1px;white-space:nowrap;max-width:96px;overflow:hidden;text-overflow:ellipsis}
.dkm-gi.done .dkm-ic{background:radial-gradient(circle at 50% 35%,#EFFFE0,#B9EB8F)}
.dkm-gi.done .dkm-ic:after{content:'✓';position:absolute;top:-4px;right:-6px;width:20px;height:20px;border-radius:50%;background:#5DBB3F;color:#fff;font-weight:900;font-size:13px;line-height:20px;text-align:center;border:2px solid #fff}
/* score */
.dkm-score{display:flex;align-items:center;margin:12px 2px 4px 6px;height:30px;flex:none}
.dkm-track{flex:1;height:13px;border-radius:8px;position:relative;background:linear-gradient(#6E3F1A,#8A5226);box-shadow:0 0 0 2px #F7D27A,0 0 0 3.5px #8A5226,0 4px 8px rgba(60,30,0,.3)}
.dkm-fill{position:absolute;left:2px;top:2px;bottom:2px;width:0;max-width:calc(100% - 4px);border-radius:6px;background:linear-gradient(#FFE88A,#FFC93C 60%,#E9A320);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 0 8px rgba(255,210,90,.8);transition:width .25s}
.dkm-st{position:absolute;top:-8px;width:24px;height:24px;margin-left:-12px}
.dkm-st svg{width:100%;height:100%;fill:#9B8C7C;stroke:#5E4A36;stroke-width:1.4;filter:drop-shadow(0 2px 1px rgba(60,30,0,.4))}
.dkm-st.on svg{fill:#FFD23C;stroke:#B97408;animation:dkm-star .5s}
@keyframes dkm-star{40%{transform:scale(1.6) rotate(20deg)}}
.dkm-pts{position:relative;z-index:2;margin-left:-14px;height:28px;min-width:74px;padding:0 10px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-family:'Titan One',sans-serif;font-size:15px;color:#fff;text-shadow:0 2px 0 #5E3416;background:linear-gradient(#8A5226,#6E3F1A);box-shadow:0 0 0 2px #F7D27A,0 0 0 3.5px #8A5226,0 4px 8px rgba(60,30,0,.35),inset 0 2px 0 rgba(255,220,170,.35);white-space:nowrap}
/* board frame */
.dkm-mid{flex:1 1 0;min-height:0;display:flex;align-items:center;justify-content:center}
.dkm-frame{position:relative;margin:0 auto;width:max-content;border-radius:28px;padding:11px;
 background:repeating-linear-gradient(92deg,rgba(255,255,255,.05) 0 3px,rgba(0,0,0,.05) 3px 7px,rgba(255,255,255,0) 7px 13px),linear-gradient(160deg,#D2914F,#A8682F 45%,#7E4519);
 box-shadow:inset 0 3px 0 rgba(255,220,170,.55),inset 0 -5px 0 rgba(60,25,0,.4),0 9px 0 #5E3416,0 20px 30px rgba(50,25,0,.45)}
.dkm-trim{position:absolute;inset:6px;border-radius:22px;border:2.5px solid #FFD873;box-shadow:0 0 0 1.5px #9B5E1C,inset 0 0 0 1.5px #9B5E1C,0 0 6px rgba(255,210,100,.5);pointer-events:none}
.dkm-orn{position:absolute;width:19px;height:19px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#FFF6C8,#FFC93C 50%,#B97408);box-shadow:0 0 0 2px #7A4517,0 2px 3px rgba(0,0,0,.4);z-index:3}
.dkm-orn:after{content:'';position:absolute;inset:6px;border-radius:50%;background:radial-gradient(circle,#C6EBFF,#4DA8FF);box-shadow:0 0 4px #9AD4FF}
.dkm-orn.tl{left:-6px;top:-6px}.dkm-orn.tr{right:-6px;top:-6px}.dkm-orn.bl{left:-6px;bottom:-6px}.dkm-orn.br{right:-6px;bottom:-6px}
.dkm-inner{position:relative;border-radius:16px;padding:0;background:linear-gradient(#5B3214,#6E3F1A);box-shadow:0 0 0 7px #62381A,inset 0 4px 10px rgba(0,0,0,.55);margin:7px}
.dkm-cv{display:block;touch-action:none;position:relative;z-index:1}
.dkm-fxl{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:visible}
.dkm-combo{position:absolute;left:50%;top:38%;font-family:'Titan One',sans-serif;font-size:calc(var(--cs)*.95);color:#FFE76A;-webkit-text-stroke:calc(var(--cs)*.17) #7A3300;paint-order:stroke fill;text-shadow:0 5px 0 #4E2000,0 0 18px rgba(255,200,80,.8);white-space:nowrap;transform:translate(-50%,-50%) rotate(-6deg);animation:dkm-word 1.25s cubic-bezier(.2,1.4,.4,1) forwards}
.dkm-combo.t2{color:#B9F3FF;text-shadow:0 5px 0 #4E2000,0 0 22px rgba(120,220,255,.9)}
.dkm-combo.t3{color:#FFB3E0;font-size:calc(var(--cs)*1.15);text-shadow:0 5px 0 #4E2000,0 0 26px rgba(255,140,220,.95)}
@keyframes dkm-word{0%{transform:translate(-50%,-50%) rotate(-6deg) scale(.2);opacity:0}18%{transform:translate(-50%,-50%) rotate(-6deg) scale(1.15);opacity:1}30%{transform:translate(-50%,-50%) rotate(-6deg) scale(1)}80%{opacity:1}100%{transform:translate(-50%,-80%) rotate(-6deg) scale(1);opacity:0}}
.dkm-banner{position:absolute;left:50%;top:45%;z-index:6;pointer-events:none;font-family:'Titan One',sans-serif;font-size:calc(var(--cs)*.78);color:#fff;-webkit-text-stroke:calc(var(--cs)*.15) #6E3FC8;paint-order:stroke fill;text-shadow:0 4px 0 #3B1A7A,0 0 24px rgba(200,160,255,.9);white-space:nowrap;opacity:0;transform:translate(-50%,-50%) scale(.5)}
.dkm-banner.on{animation:dkm-ban 1.4s ease forwards}
@keyframes dkm-ban{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}25%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-60%) scale(1)}}
.dkm.oom .dkm-cv{filter:saturate(.45) brightness(.8);transition:filter .5s}
.dkm.oom .dkm-banner.on{animation:dkm-ban-stay 1s ease forwards}
@keyframes dkm-ban-stay{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}45%,100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.dkm-fly{position:absolute;z-index:30;pointer-events:none;background-size:800% 600%}
/* bottom: boosters + witch */
.dkm-bottom{display:flex;flex-direction:column;align-items:center;gap:4px;flex:none;padding-top:4px}
.dkm-boost{display:flex;gap:26px;justify-content:center;flex:none;padding:10px 0 2px}
.dkm-bt{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:0;padding:0;cursor:pointer;font:inherit}
.dkm-o{position:relative;width:50px;height:50px;border-radius:50%;background:radial-gradient(circle at 45% 32%,#FFFDF4,#F3DDB4 75%);box-shadow:0 0 0 3.5px #F7D27A,0 0 0 6px #A8691F,0 5px 0 6px #6E3F1A,0 10px 16px rgba(50,25,0,.4),inset 0 -4px 6px rgba(150,100,40,.25);display:flex;align-items:center;justify-content:center;transition:transform .15s}
.dkm-o img{max-width:34px;max-height:34px;filter:drop-shadow(0 3px 2px rgba(60,30,0,.35))}
.dkm-o.metla img{max-height:44px;transform:rotate(38deg)}
.dkm-cnt{position:absolute;right:-10px;top:-10px;min-width:23px;height:23px;border-radius:12px;font-size:12px;padding:0 5px}
.dkm-bt label{font-family:'Nunito',ui-rounded,system-ui,sans-serif;font-weight:900;font-size:12px;line-height:1.2;color:#5E3416;text-shadow:none;margin-top:8px;padding:2px 9px 3px;border-radius:10px;background:linear-gradient(#FFFBF2,#FBEFD8);box-shadow:0 0 0 1.5px #E7C68E,0 2px 0 1.5px #C9965A,0 4px 8px rgba(40,20,0,.25);cursor:pointer;white-space:nowrap}
.dkm-bt:active .dkm-o{transform:scale(.92)}
.dkm-bt.armed .dkm-o{box-shadow:0 0 0 3.5px #fff,0 0 0 6px #F2719F,0 0 18px 8px rgba(255,140,200,.8),0 5px 0 6px #A93163;animation:dkm-low .8s infinite}
.dkm-tip{display:flex;align-items:flex-end;justify-content:center;width:100%;min-height:58px;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s;pointer-events:none}
.dkm-tip.on{opacity:1;transform:none}
.dkm-tip img{width:46px;flex:none;filter:drop-shadow(0 5px 5px rgba(40,20,0,.4));margin-right:-2px}
.dkm-bb{position:relative;padding:6px 10px 7px;font-size:11.5px;font-weight:800;line-height:1.28;margin-bottom:6px;border-radius:14px;max-width:290px}
.dkm-bb b{color:#C2410C}
@media (min-width:420px){.dkm-tip img{width:52px}.dkm-bb{font-size:12px}}
@media (prefers-reduced-motion:reduce){.dkm-medal.low,.dkm-bt.armed .dkm-o{animation:none}.dkm-combo{animation-duration:.01s;opacity:1}}
/* ===== v5 compact HUD (Royal-Match style): one slim strip – moves · goals · score bar; the level number is a small tag.
   The host may reserve room at the strip's ends with --dkm-hud-pad (the shell's ✕ / ♪ sit there). The board takes the rest. ===== */
.dkm{--dkm-hud-pad:12px;max-width:var(--dkm-maxw,480px);padding:12px 10px 8px}
.dkm::before{content:'';position:absolute;left:10px;right:10px;top:12px;height:96px;z-index:0;pointer-events:none;border-radius:18px;background:var(--noise),linear-gradient(180deg,#FFFBF2,#FBEFD8);border:2.5px solid #fff;box-shadow:0 0 0 2px #E7C68E,0 3px 0 2px #C9965A,0 8px 16px rgba(70,40,10,.24)}
.dkm-hud{position:relative;z-index:1;height:70px;gap:8px;align-items:flex-end;padding:0 var(--dkm-hud-pad) 2px}
.dkm-lvl{width:auto;flex:none;flex-direction:row;gap:0;position:static}
.dkm-pill{position:absolute;left:50%;top:3px;transform:translateX(-50%);z-index:3;padding:0 10px 1px;font-size:12px;line-height:1.3;border-width:1.5px;border-radius:10px;box-shadow:inset 0 -2px 0 rgba(140,20,70,.3),0 2px 0 #A93163}
.dkm-pill:before{display:none}
.dkm-medal{width:46px;height:46px;margin:0;box-shadow:0 0 0 2.5px #F7D27A,0 0 0 4px #A8691F,0 3px 0 4px #7A4517,0 6px 10px rgba(60,30,0,.25),inset 0 -3px 5px rgba(160,100,30,.22)}
.dkm-medal b{font-size:20px;line-height:1}
.dkm-medal span,.dkm-medal span.long{font-size:12px;margin-top:0;letter-spacing:0;text-transform:none;max-width:44px;overflow:hidden}
.dkm-hard{top:3px;bottom:auto;left:calc(50% + 2px);font-size:12px;line-height:1.3;padding:0 8px 1px;border-radius:10px;z-index:3}
.is-hard .dkm-pill{transform:translateX(calc(-100% - 2px))}
.dkm-goal{flex:1;min-width:0;padding:0;background:none;border:0;box-shadow:none;border-radius:0}
.dkm-goal h3{display:none}
.dkm-gitems{justify-content:center;gap:10px;flex-wrap:nowrap}
.dkm-gi{flex-direction:column;align-items:center;gap:0}
.dkm-ic{width:30px;height:30px;border-radius:10px;box-shadow:inset 0 -2px 3px rgba(150,100,40,.22),0 1.5px 0 #E2C38C}
.dkm-ic img{width:22px;height:22px}
.dkm-ic .dkm-spr{width:26px;height:26px}
.dkm-gstar svg{width:22px;height:22px}
.dkm-n{font-size:14px;margin:0;line-height:1}
.dkm-n small{font-size:12px}
.dkm-t{display:none}
.dkm-gi.done .dkm-ic:after{top:-5px;right:-7px;width:16px;height:16px;line-height:16px;font-size:11px;border-width:1.5px}
.dkm-score{position:relative;z-index:1;height:26px;margin:0 14px 4px 18px}
.dkm-track{height:10px}
.dkm-st{top:-6px;width:20px;height:20px;margin-left:-10px}
.dkm-pts{height:22px;min-width:58px;font-size:14px;margin-left:-10px;border-radius:11px}
/* the board: slimmer wooden frame so the tiles get the width */
.dkm-mid{padding-top:8px}
.dkm-frame{padding:7px;border-radius:22px}
.dkm-trim{inset:3px;border-radius:19px}
.dkm-inner{margin:5px;box-shadow:0 0 0 5px #62381A,inset 0 4px 10px rgba(0,0,0,.55)}
.dkm-orn{width:16px;height:16px}.dkm-orn:after{inset:5px}
.dkm-orn.tl{left:-5px;top:-5px}.dkm-orn.tr{right:-5px;top:-5px}.dkm-orn.bl{left:-5px;bottom:-5px}.dkm-orn.br{right:-5px;bottom:-5px}
/* the hint: one small line above the boosters, hides itself (engine timer) */
.dkm-bottom{gap:0;padding-top:2px}
.dkm-tip{min-height:42px;align-items:center}
.dkm-tip img{width:34px;margin-right:2px}
.dkm-bb{padding:5px 10px 6px;margin:0;font-size:14px;line-height:1.25;max-width:min(300px,calc(100% - 44px));border-radius:12px}
.dkm-boost{padding:8px 0 2px;gap:28px}
@media (max-height:700px){.dkm-o{width:44px;height:44px}.dkm-o img{max-width:30px;max-height:30px}.dkm-o.metla img{max-height:38px}.dkm-tip{min-height:38px}}
/* ===== v6 engine: callout tiers, calm mode, one-time tutorial card ===== */
.dkm-combo.t1{font-size:calc(var(--cs)*.8)}
.dkm-combo.t4{color:#FFF1A8;font-size:calc(var(--cs)*1.25);text-shadow:0 5px 0 #4E2000,0 0 26px rgba(255,120,220,.95),0 0 44px rgba(140,200,255,.7)}
.dkm.calm .dkm-combo,.dkm.calm .dkm-card{animation:none}
.dkm.calm .dkm-banner.on{animation:none;opacity:1;transform:translate(-50%,-50%)}
.dkm-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:40;width:min(300px,calc(100% - 40px));padding:18px 16px 16px;text-align:center;animation:dkm-card .35s cubic-bezier(.2,1.4,.4,1)}
.dkm-card-new{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(#9C5CF0,#6E3FC8);color:#fff;font-weight:900;font-size:12px;line-height:1.4;padding:1px 12px 2px;border-radius:10px;border:1.5px solid #E8D8FF;white-space:nowrap}
.dkm-card-ic{width:76px;height:76px;margin:2px auto 8px;border-radius:20px;background:radial-gradient(circle at 50% 35%,#fff,#F2DFBC);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 -3px 4px rgba(150,100,40,.22),0 2px 0 #E2C38C}
.dkm-card-ic .dkm-spr{width:62px;height:62px}.dkm-card-ic img{width:58px;height:58px;object-fit:contain}
.dkm-card h4{font-family:'Nunito',ui-rounded,system-ui,sans-serif;font-weight:900;font-size:19px;margin:0 0 4px;color:#8A5226}
.dkm-card p{font-size:14px;font-weight:700;line-height:1.35;margin:0 0 14px}
.dkm-card-ok{margin:0 auto;padding:7px 24px 9px;font-family:'Nunito',ui-rounded,system-ui,sans-serif;font-weight:900;font-size:15px;cursor:pointer}
@keyframes dkm-card{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
/* v7: booster info — the small "i" (or a long press) opens the booster card; armed boosters get a Cancel in the hint bar */
.dkm-bt{position:relative;-webkit-touch-callout:none;user-select:none}
.dkm-i{position:absolute;left:-4px;top:-2px;width:20px;height:20px;border-radius:50%;background:linear-gradient(#FFFFFF,#EADBC3);border:1.5px solid #B98A4E;color:#8A5226;font:900 12px/17px Nunito,ui-rounded,system-ui,sans-serif;font-style:italic;text-align:center;box-shadow:0 2px 0 rgba(90,50,10,.35);cursor:pointer}
.dkm-i::after{content:"";position:absolute;inset:-10px}   /* a 40 px touch target */
.dkm-tip .dkm-cancel{pointer-events:auto;display:inline-block;margin:4px 0 0 6px;padding:2px 12px 4px;font:900 13px/1.3 Nunito,ui-rounded,system-ui,sans-serif;cursor:pointer;vertical-align:middle}
.dkm-bocard .dkm-card-ic img{width:54px;height:54px}
/* v7: "Kúzlo dedinky" — each move left leaves the counter as "+N" and flies to the board */
.dkm-mvfly{position:absolute;z-index:45;pointer-events:none;transform:translate(-50%,-50%);font:400 20px/1 'Titan One',sans-serif;color:#FFE27A;-webkit-text-stroke:1.5px #8A3B12;text-shadow:0 2px 0 #8A3B12,0 0 10px rgba(255,210,90,.9);white-space:nowrap}
.dkm-medal.tick{animation:dkm-tick .32s ease-out}
@keyframes dkm-tick{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.dkm.calm .dkm-medal.tick{animation:none}
.dkm-banner small{display:block;text-align:center;font-size:.55em;margin-top:.15em;-webkit-text-stroke-width:calc(var(--cs)*.09)}
/* ===== v10: Ruta reacts (beside the boosters), the 5-moves warning, the opening card, the area frames ===== */
.dkm-bottom{position:relative}
.dkm-ruta{position:absolute;left:4px;bottom:2px;width:40px;height:75px;z-index:2;pointer-events:none;transform-origin:50% 100%}
.dkm-ruta img{display:block;width:40px;height:75px;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 4px 4px rgba(40,20,0,.4))}
.dkm-ruta .dkm-drop{position:absolute;right:-2px;top:8px;width:8px;height:11px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(circle at 40% 35%,#fff,#8FD4FF 60%,#3E9BE0);opacity:0}
.dkm-ruta[data-m=idle]{animation:dkm-r-idle 3.2s ease-in-out infinite}
.dkm-ruta[data-m=cheer]{animation:dkm-r-cheer .55s cubic-bezier(.3,1.6,.5,1) 2}
.dkm-ruta[data-m=worry]{animation:dkm-r-worry 1.6s ease-in-out infinite}
.dkm-ruta[data-m=worry] .dkm-drop{animation:dkm-r-drop 1.6s ease-in infinite}
.dkm-ruta[data-m=sad]{transform:translateY(3px) rotate(-4deg) scaleY(.94);filter:saturate(.7)}
.dkm-ruta[data-m=dance]{animation:dkm-r-dance .7s ease-in-out infinite}
@keyframes dkm-r-idle{50%{transform:translateY(-2px)}}
@keyframes dkm-r-cheer{40%{transform:translateY(-16px) scale(1.08)}}
@keyframes dkm-r-worry{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
@keyframes dkm-r-drop{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
@keyframes dkm-r-dance{0%,100%{transform:rotate(-7deg) translateY(0)}25%{transform:rotate(0) translateY(-8px)}50%{transform:rotate(7deg) translateY(0) scaleX(-1)}75%{transform:rotate(0) translateY(-8px) scaleX(-1)}}
@media (max-width:370px){.dkm-ruta{width:34px;height:64px}.dkm-ruta img{width:34px;height:64px}}
.dkm-medal.low5 b{color:#E07A1F}
.dkm-medal.warn{animation:dkm-warn .55s ease-in-out 3}
@keyframes dkm-warn{0%,100%{transform:scale(1)}40%{transform:scale(1.28);box-shadow:0 0 0 2.5px #FFB347,0 0 0 4px #E0302F,0 0 18px 6px rgba(255,120,60,.75)}}
.dkm-goal.dkm-wait .dkm-ic{visibility:hidden}
.dkm-intro{position:absolute;inset:0;z-index:35;display:flex;align-items:center;justify-content:center;pointer-events:none;background:radial-gradient(closest-side,rgba(40,20,0,.28),rgba(40,20,0,0));animation:dkm-fade .25s ease both}
.dkm-intro.out{opacity:0;transition:opacity .25s}
.dkm-intro-c{padding:14px 18px 16px;text-align:center;min-width:220px;max-width:calc(100% - 32px);animation:dkm-ipop .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes dkm-ipop{0%{opacity:0;transform:scale(.8)}100%{opacity:1;transform:none}}
.dkm-intro-c.fly{background:none;border-color:transparent;box-shadow:none;transition:background .3s,box-shadow .3s,border-color .3s}
.dkm-intro-c.fly .dkm-intro-l,.dkm-intro-c.fly b,.dkm-intro-c.fly small,.dkm-intro-c.fly .dkm-intro-ws{opacity:0;transition:opacity .2s}
.dkm-intro-l{font-family:'Titan One',sans-serif;font-size:22px;color:#D24F80;text-shadow:0 2px 0 #fff;margin-bottom:8px}
.dkm-intro-g{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.dkm-intro-i{display:flex;flex-direction:column;align-items:center;min-width:56px}
.dkm-intro-i .dkm-ic{width:56px;height:56px;border-radius:17px}
.dkm-intro-i .dkm-ic img{width:40px;height:40px}.dkm-intro-i .dkm-ic .dkm-spr{width:46px;height:46px}.dkm-intro-i .dkm-gstar svg{width:40px;height:40px}
.dkm-intro-i b{font-family:'Titan One',sans-serif;font-weight:400;font-size:18px;margin-top:4px;color:#5E3416}
.dkm-intro-i small{font-size:12px;font-weight:800;color:#8A6A4E;max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dkm-intro-ws{margin-top:10px;font-size:13px;font-weight:900;color:#fff;background:linear-gradient(#FF9A5A,#F2603A);border-radius:10px;padding:3px 10px;display:inline-block}
@keyframes dkm-fade{from{opacity:0}}
.dkm.calm .dkm-ruta,.dkm.calm .dkm-ruta .dkm-drop,.dkm.calm .dkm-medal.warn,.dkm.calm .dkm-intro,.dkm.calm .dkm-intro-c{animation:none}
@media (prefers-reduced-motion:reduce){.dkm-ruta,.dkm-ruta .dkm-drop,.dkm-medal.warn{animation:none!important}}
/* the area frames: the same wooden frame, its trim, corner ornaments and a light garland in the season's colours */
.dkm-frame::before{content:'';position:absolute;left:18px;right:18px;top:-5px;height:10px;z-index:3;pointer-events:none;opacity:.95;background-size:22px 10px;background-repeat:repeat-x}
.area-s .dkm-trim{border-color:#B6E58A;box-shadow:0 0 0 1.5px #4E8A22,inset 0 0 0 1.5px #4E8A22,0 0 6px rgba(160,230,110,.5)}
.area-s .dkm-frame::before{background-image:radial-gradient(circle at 5px 5px,#FFF 0 1.6px,#FF8FB5 2px 4px,transparent 4.5px),radial-gradient(circle at 16px 6px,#FFF4A0 0 1.4px,#FFD23C 1.8px 3.4px,transparent 3.8px)}
.area-s .dkm-orn{background:radial-gradient(circle,#FFE36A 0 26%,transparent 28%),conic-gradient(from 0deg,#FF9AC0 0 12%,#FFC2D8 0 25%,#FF9AC0 0 37%,#FFC2D8 0 50%,#FF9AC0 0 62%,#FFC2D8 0 75%,#FF9AC0 0 87%,#FFC2D8 0);box-shadow:0 0 0 2px #C94D7E,0 2px 3px rgba(0,0,0,.35)}
.area-s .dkm-orn:after{display:none}
.area-a .dkm-frame{background:repeating-linear-gradient(92deg,rgba(255,255,255,.05) 0 3px,rgba(0,0,0,.05) 3px 7px,rgba(255,255,255,0) 7px 13px),linear-gradient(160deg,#D8823F,#A7521F 45%,#74320F)}
.area-a .dkm-trim{border-color:#FFB45A;box-shadow:0 0 0 1.5px #8A3A0E,inset 0 0 0 1.5px #8A3A0E,0 0 6px rgba(255,160,70,.5)}
.area-a .dkm-frame::before{background-image:radial-gradient(ellipse 4px 3px at 6px 5px,#E8661E 90%,transparent),radial-gradient(ellipse 4px 3px at 16px 5px,#F2B33C 90%,transparent)}
.area-a .dkm-orn{border-radius:2px 60% 2px 60%;transform:rotate(45deg);background:linear-gradient(135deg,#FFB347,#E8661E 55%,#A33A0A);box-shadow:0 0 0 2px #6E2A08,0 2px 3px rgba(0,0,0,.35)}
.area-a .dkm-orn:after{inset:auto;left:50%;top:15%;bottom:15%;width:1.5px;border-radius:1px;background:#7A2E08;box-shadow:none;transform:translateX(-50%) rotate(-45deg)}
.area-w .dkm-frame{background:repeating-linear-gradient(92deg,rgba(255,255,255,.07) 0 3px,rgba(0,0,0,.04) 3px 7px,rgba(255,255,255,0) 7px 13px),linear-gradient(160deg,#B9C9DA,#7F96B0 45%,#55688A);box-shadow:inset 0 3px 0 rgba(255,255,255,.7),inset 0 -5px 0 rgba(20,30,60,.35),0 9px 0 #3A4866,0 20px 30px rgba(20,30,60,.45)}
.area-w .dkm-trim{border-color:#F2FBFF;box-shadow:0 0 0 1.5px #5B7BA6,inset 0 0 0 1.5px #5B7BA6,0 0 8px rgba(200,235,255,.85)}
.area-w .dkm-inner{background:linear-gradient(#3C4A66,#4A5A7A);box-shadow:0 0 0 5px #4A5A7A,inset 0 4px 10px rgba(0,0,0,.5)}
.area-w .dkm-frame::before{top:-4px;height:9px;background-size:16px 9px;background-image:linear-gradient(180deg,#FFF 0 3px,transparent 3px),radial-gradient(ellipse 3px 6px at 8px 3px,#E8F7FF 85%,transparent)}
.area-w .dkm-orn{border-radius:0;background:#fff;clip-path:polygon(50% 0,60% 38%,100% 50%,60% 62%,50% 100%,40% 62%,0 50%,40% 38%);box-shadow:none;filter:drop-shadow(0 0 3px #9FD8FF)}
.area-w .dkm-orn:after{display:none}
.area-p .dkm-frame{background:repeating-linear-gradient(92deg,rgba(255,255,255,.06) 0 3px,rgba(0,0,0,.04) 3px 7px,rgba(255,255,255,0) 7px 13px),linear-gradient(160deg,#E2A87E,#B97752 45%,#8A4F33)}
.area-p .dkm-trim{border-color:#FFD3E6;box-shadow:0 0 0 1.5px #B0587E,inset 0 0 0 1.5px #B0587E,0 0 6px rgba(255,190,220,.6)}
.area-p .dkm-frame::before{background-image:radial-gradient(circle at 5px 5px,#FFF8FB 0 1.4px,#FFB8D6 1.8px 3.8px,transparent 4.2px),radial-gradient(circle at 16px 5px,#FFF 0 1.2px,#F7D9FF 1.6px 3.2px,transparent 3.6px)}
.area-p .dkm-orn{background:radial-gradient(circle,#FFF2A8 0 22%,transparent 24%),conic-gradient(#FFFFFF 0 10%,#FFC3DD 0 20%,#FFFFFF 0 30%,#FFC3DD 0 40%,#FFFFFF 0 50%,#FFC3DD 0 60%,#FFFFFF 0 70%,#FFC3DD 0 80%,#FFFFFF 0 90%,#FFC3DD 0);border-radius:50%;box-shadow:0 0 0 2px #C9799B,0 2px 3px rgba(0,0,0,.3)}
.area-p .dkm-orn:after{display:none}