/* Zadachki.bg mobile result-stage controls v1.4.0-mobile-result2.
   Screen chrome only: no changes to worksheet geometry or print styles. */
.viewer-title-short { display:none; }
.mobile-command-short {display:none!important;}
.viewer-mobile-actions { display:none !important; }

@media screen and (max-width:620px) {
  /* The site header remains sticky; the entire worksheet toolbar scrolls away. */
  body.mode-result #resultStage .result-actions.pro-commandbar {
    position:relative!important;
    top:auto!important;
    bottom:auto!important;
    z-index:5!important;
    overflow:visible!important;
    backdrop-filter:none!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    padding:11px!important;
    margin:0 0 12px!important;
    background:#fff!important;
    box-shadow:0 8px 25px rgba(35,68,106,.055)!important;
  }
  body.mode-result #resultStage .pro-commandbar .workspace-left,
  body.mode-result #resultStage .pro-commandbar .workspace-right {
    display:contents!important;
  }
  /* Short, fully readable labels. The complete game-specific label remains
     available to assistive technologies and on larger screens. */
  body.mode-result #resultStage .pro-commandbar .mobile-command-short {
    display:inline!important;white-space:nowrap!important;
    overflow:visible!important;text-overflow:clip!important;
  }
  body.mode-result #resultStage .pro-commandbar .command-full-label {
    position:absolute!important;width:1px!important;height:1px!important;
    padding:0!important;margin:-1px!important;overflow:hidden!important;
    clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
  }
  /* Exactly four generous primary controls; Save and Print move to the A4 card. */
  body.mode-result #resultStage .pro-commandbar #saveProject,
  body.mode-result #resultStage .pro-commandbar #resultPrintAction,
  body.mode-result #resultStage .pro-commandbar #projectMenu {
    display:none!important;
  }
  body.mode-result #resultStage .pro-commandbar #openWordsDrawer,
  body.mode-result #resultStage .pro-commandbar #openConfig,
  body.mode-result #resultStage .pro-commandbar #again,
  body.mode-result #resultStage .pro-commandbar #resultSolutionButton {
    width:100%!important;
    min-width:0!important;
    min-height:47px!important;
    padding:9px 9px!important;
    border-radius:13px!important;
    font-size:11.5px!important;
    line-height:1.2!important;
    font-weight:800!important;
    color:#244b79!important;
    border:1px solid #d5e3f5!important;
    background:linear-gradient(180deg,#ffffff,#f2f7ff)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 3px 10px rgba(35,77,127,.075)!important;
    transition:background-color .14s ease, box-shadow .14s ease, border-color .14s ease!important;
  }
  /* One visual family rather than four competing pastel colors.
     Only the icon and interaction state communicate emphasis. */
  body.mode-result #resultStage .pro-commandbar #openWordsDrawer,
  body.mode-result #resultStage .pro-commandbar #openConfig,
  body.mode-result #resultStage .pro-commandbar #again,
  body.mode-result #resultStage .pro-commandbar #resultSolutionButton {
    background:linear-gradient(180deg,#fff,#f2f7ff)!important;
    border-color:#d4e2f4!important;
    color:#244c7c!important;
  }
  body.mode-result #resultStage .pro-commandbar #again {
    background:linear-gradient(180deg,#f8fbff,#e8f2ff)!important;
    border-color:#c5d9f8!important;
    color:#215cba!important;
  }
  body.mode-result #resultStage .pro-commandbar #openWordsDrawer .ui-icon,
  body.mode-result #resultStage .pro-commandbar #openConfig .ui-icon,
  body.mode-result #resultStage .pro-commandbar #again .ui-icon,
  body.mode-result #resultStage .pro-commandbar #resultSolutionButton .ui-icon {
    background:rgba(219,234,254,.55)!important;
    box-sizing:content-box!important;
    padding:4px!important;
    border-radius:8px!important;
  }
  body.mode-result #resultStage .pro-commandbar #resultSolutionButton[aria-pressed="true"] {
    background:linear-gradient(145deg,#f6fff9,#e4f8ed)!important;
    color:#206a4e!important;border-color:#9bdaba!important;
  }
  body.mode-result #resultStage .pro-commandbar #openWordsDrawer:hover:not(:disabled),
  body.mode-result #resultStage .pro-commandbar #openConfig:hover:not(:disabled),
  body.mode-result #resultStage .pro-commandbar #again:hover:not(:disabled),
  body.mode-result #resultStage .pro-commandbar #resultSolutionButton:hover:not(:disabled) {
    border-color:#aecbed!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.96),0 5px 14px rgba(38,80,136,.13)!important;
  }
  body.mode-result #resultStage .pro-commandbar .ui-icon {
    width:17px!important;height:17px!important;flex:0 0 17px;
  }
  /* A quiet, single-line history action at the end of the toolbar. */
  body.mode-result #resultStage .pro-commandbar #layoutMenu {
    grid-column:1/-1!important;
    justify-self:end!important;
    width:auto!important;min-width:0!important;max-width:none!important;
    margin:0!important;
    position:relative!important;
    z-index:40!important;
  }
  body.mode-result #resultStage .pro-commandbar #layoutMenu > summary {
    width:auto!important;
    min-height:29px!important;
    padding:3px 9px!important;
    font-size:10.5px!important;
    color:#57708e!important;
    border:1px solid transparent!important;
    background:transparent!important;
    border-radius:9px!important;
    box-shadow:none!important;
  }
  body.mode-result #resultStage .pro-commandbar #layoutMenu > summary:hover,
  body.mode-result #resultStage .pro-commandbar #layoutMenu[open] > summary {
    background:#f1f6fc!important;border-color:#dce7f5!important;
  }
  /* Older max-width:650px CSS makes every command popover position:fixed.
     In that mode top:34px targets the VIEWPORT (under the sticky header),
     not the History trigger. Anchor the menu to its own <details>. */
  body.mode-result #resultStage .pro-commandbar #layoutMenu .command-popover {
    position:absolute!important;
    left:auto!important;right:0!important;
    top:calc(100% + 7px)!important;
    width:min(262px, calc(100vw - 34px))!important;
    min-width:0!important;
    max-width:calc(100vw - 34px)!important;
    z-index:80!important;
    background:#fff!important;
    border:1px solid #d7e4f5!important;
    border-radius:14px!important;
    box-shadow:0 15px 35px rgba(25,59,102,.18)!important;
  }

  /* A4 card: title and 3 square icon actions on the same baseline. */
  body.mode-result #resultStage .result-panel .viewerbar {
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:auto auto!important;
    gap:7px 7px!important;
    align-items:start!important;
    padding:5px 3px 10px!important;
  }
  body.mode-result #resultStage .result-panel .viewer-heading {
    display:flex!important;flex-direction:column!important;align-items:flex-start!important;
    grid-column:1!important;grid-row:1!important;
    margin:0!important;min-width:0!important;gap:4px!important;
  }
  body.mode-result #resultStage .result-panel .viewer-heading > b {
    color:#173b67!important;font-size:13.5px!important;
    line-height:1.22!important;letter-spacing:-.15px!important;
  }
  body.mode-result #resultStage .result-panel .viewer-heading .viewer-copy {
    display:block!important;font-size:9.2px!important;line-height:1.35!important;
    color:#7890a7!important;
  }
  body.mode-result #resultStage .result-panel #summary.viewer-summary {
    display:flex!important;
    grid-column:1/-1!important;grid-row:2!important;
    align-items:center!important;justify-content:flex-start!important;
    width:100%!important;margin:1px 0 0!important;
    padding:2px 0 0!important;text-align:left!important;
    border-top:1px solid #edf2f9!important;
  }
  body.mode-result #resultStage .result-panel .viewer-mobile-actions {
    display:flex!important;
    grid-column:2!important;grid-row:1!important;
    justify-self:end!important;align-self:start!important;
    align-items:center!important;gap:6px!important;
  }
  body.mode-result #resultStage .result-panel .viewer-mobile-actions :is(.viewer-icon-action, #print) {
    display:inline-flex!important;
    align-items:center!important;justify-content:center!important;
    flex:0 0 40px!important;
    width:40px!important;height:40px!important;
    min-width:40px!important;min-height:40px!important;
    max-width:40px!important;max-height:40px!important;
    margin:0!important;padding:0!important;
    border:1px solid #ccdced!important;
    border-radius:12px!important;
    color:#244f88!important;
    background:linear-gradient(145deg,#fff,#eef5ff)!important;
    box-shadow:0 3px 8px rgba(30,72,127,.09)!important;
    cursor:pointer!important;
    transition:background-color .13s ease,box-shadow .13s ease,transform .13s ease!important;
  }
  body.mode-result #resultStage .result-panel .viewer-mobile-actions .viewer-save-action {
    background:linear-gradient(145deg,#eef5ff,#ddeaff)!important;
    color:#1d5bb5!important;border-color:#bfd4fa!important;
  }
  body.mode-result #resultStage .result-panel .viewer-mobile-actions .viewer-save-action.is-saved {
    background:linear-gradient(145deg,#f1fff7,#e1f6ed)!important;
    color:#247c59!important;border-color:#bce4cf!important;
  }
  body.mode-result #resultStage .result-panel .viewer-mobile-actions .viewer-save-action.is-dirty {
    background:linear-gradient(145deg,#fff,#e7efff)!important;
    border-color:#9fbff4!important;
  }
  body.mode-result #resultStage .result-panel .viewer-mobile-actions #print {
    background:linear-gradient(140deg,#ffdb78,#ffc948)!important;
    color:#123a72!important;
    border-color:#e8b43a!important;
    box-shadow:0 3px 8px rgba(199,136,21,.16)!important;
  }
  body.mode-result #resultStage .result-panel .viewer-mobile-actions #print:hover {
    background:#f2b52f!important;color:#123a72!important;border-color:#d39c20!important;
  }
  body.mode-result #resultStage .result-panel .viewer-mobile-actions #mobileSheetZoom {
    background:linear-gradient(140deg,#fff,#e9f9ff)!important;
    color:#216f94!important;
    border-color:#c3e5f2!important;
  }
  body.mode-result #resultStage .result-panel .viewer-mobile-actions #mobileSheetZoom[aria-pressed="true"] {
    background:#dbf3fd!important;
    border-color:#8ad1ed!important;
  }
  body.mode-result #resultStage .result-panel .viewer-mobile-actions :is(.viewer-icon-action, #print):hover:not(:disabled) {
    box-shadow:0 5px 12px rgba(33,82,135,.15)!important;
  }
  body.mode-result #resultStage .result-panel .viewer-mobile-actions :is(.viewer-icon-action, #print) .ui-icon {
    display:block!important;
    width:18px!important;height:18px!important;
    fill:none!important;stroke:currentColor!important;
    stroke-width:1.9!important;stroke-linecap:round;stroke-linejoin:round;
  }
  body.mode-result #resultStage .result-panel .viewer-mobile-actions #mobileSheetZoom .mobile-icon-zoom-out { display:none!important; }
  body.mode-result #resultStage .result-panel .viewer-mobile-actions #mobileSheetZoom[aria-pressed="true"] .mobile-icon-zoom-in { display:none!important; }
  body.mode-result #resultStage .result-panel .viewer-mobile-actions #mobileSheetZoom[aria-pressed="true"] .mobile-icon-zoom-out { display:block!important; }
  .mobile-control-sr {
    position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
    margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;border:0!important;
  }
}
@media screen and (max-width:365px) {
  body.mode-result #resultStage .result-panel .viewer-title-full{display:none!important}
  body.mode-result #resultStage .result-panel .viewer-title-short{display:inline!important}
  body.mode-result #resultStage .result-panel .viewer-mobile-actions {gap:5px!important}
  body.mode-result #resultStage .result-panel .viewer-mobile-actions :is(.viewer-icon-action, #print) {
    width:39px!important;min-width:39px!important;max-width:39px!important;
    height:39px!important;min-height:39px!important;max-height:39px!important;
    flex-basis:39px!important;
  }
}
@media (prefers-reduced-motion:reduce) {
  body.mode-result #resultStage .viewer-icon-action,
  body.mode-result #resultStage .pro-commandbar button {transition:none!important;transform:none!important}
}

/* MOBILE RESULT3 — two balanced toolbar rows, four matching A4 actions.
   Only on screen/phone: the desktop toolbar and printable worksheet are untouched. */
@media screen and (max-width:620px) {
  body.mode-result #resultStage .pro-commandbar #resultSolutionButton {
    display:none!important;
  }
  /* Row 1: Content | Sheet layout. Row 2: New variant | History. */
  body.mode-result #resultStage .pro-commandbar #layoutMenu {
    grid-column:auto!important;
    justify-self:stretch!important;
    align-self:stretch!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
  }
  body.mode-result #resultStage .pro-commandbar #layoutMenu > summary {
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    min-height:47px!important;
    padding:9px!important;
    justify-content:center!important;
    gap:6px!important;
    font-size:11.5px!important;
    font-weight:800!important;
    line-height:1.2!important;
    color:#244c7c!important;
    border:1px solid #d4e2f4!important;
    background:linear-gradient(180deg,#fff,#f2f7ff)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 3px 10px rgba(35,77,127,.075)!important;
    border-radius:13px!important;
  }
  body.mode-result #resultStage .pro-commandbar #layoutMenu > summary .ui-icon {
    width:17px!important;height:17px!important;
    flex:0 0 17px!important;
    padding:4px!important;
    box-sizing:content-box!important;
    border-radius:8px!important;
    background:rgba(219,234,254,.55)!important;
  }
  body.mode-result #resultStage .pro-commandbar #layoutMenu > summary:hover,
  body.mode-result #resultStage .pro-commandbar #layoutMenu[open] > summary {
    border-color:#aecbed!important;
    background:linear-gradient(180deg,#fff,#eaf3ff)!important;
    box-shadow:0 5px 14px rgba(38,80,136,.13)!important;
  }
  body.mode-result #resultStage .pro-commandbar #layoutMenu .command-popover {
    right:0!important;left:auto!important;
    top:calc(100% + 7px)!important;
  }
  body.mode-result #resultStage .result-panel .viewer-mobile-actions .viewer-solution-action {
    color:#6959a6!important;
    border-color:#d8d1f4!important;
    background:linear-gradient(145deg,#fff,#f0ecff)!important;
  }
  body.mode-result #resultStage .result-panel .viewer-mobile-actions .viewer-solution-action[aria-pressed="true"] {
    background:linear-gradient(145deg,#f1fff7,#e1f6ed)!important;
    color:#247c59!important;
    border-color:#a9dcc2!important;
  }
  body.mode-result #resultStage .result-panel .viewer-mobile-actions {
    gap:5px!important;
  }
}
@media screen and (max-width:365px) {
  body.mode-result #resultStage .result-panel .viewer-mobile-actions {gap:4px!important}
  body.mode-result #resultStage .result-panel .viewer-mobile-actions :is(.viewer-icon-action, #print) {
    width:37px!important;min-width:37px!important;max-width:37px!important;
    height:37px!important;min-height:37px!important;max-height:37px!important;
    flex-basis:37px!important;
  }
}