/* Djeca i ja — v1.8.1. Isključivo ekran lekcije i isključivo telefon. */
.dijedu-mobile-toolbar,.dijedu-mobile-dock { display:none; }
@media (max-width:767px) {
  body.dijedu-mobile-in-lesson { overflow:hidden !important; }
  .dijedu-lesson.dijedu-mobile-mode {
    --mobile-teal:#117e72; --mobile-ink:#153c57;
    position:fixed !important; inset:0 !important; z-index:999999 !important;
    display:flex !important; flex-direction:column !important;
    width:100% !important; max-width:100% !important;
    height:100vh !important; height:100dvh !important;
    min-height:0 !important; margin:0 !important; padding:0 !important;
    overflow:hidden !important; background:#fffdf8 !important;
  }
  .dijedu-mobile-mode *, .dijedu-mobile-mode *::before, .dijedu-mobile-mode *::after { box-sizing:border-box; }
  .dijedu-mobile-mode .dijedu-mobile-toolbar {
    display:flex; align-items:center; justify-content:space-between; flex:none;
    gap:10px; min-height:42px; padding:6px 12px;
    background:#fff; border-bottom:1px solid #e3efeb;
  }
  .dijedu-mobile-mode .dijedu-mobile-exit {
    display:inline-flex; align-items:center; min-height:31px; padding:4px 10px;
    background:#effaf6; border:1px solid #c8e7df; border-radius:11px;
    text-decoration:none !important; color:#0c655b !important;
    font-size:13px; font-weight:850; line-height:1.3;
  }
  .dijedu-mobile-mode .dijedu-mobile-brand { font-size:12px; font-weight:800; color:#54877f; text-align:right; }
  .dijedu-mobile-mode .dijedu-stage {
    display:block !important; flex:1 1 auto !important; min-height:0 !important;
    width:100% !important; max-width:100% !important; height:auto !important;
    overflow-x:hidden !important; overflow-y:auto !important;
    overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    margin:0 !important; padding:8px 12px 20px !important;
    border:0 !important; border-radius:0 !important; box-shadow:none !important;
    background:linear-gradient(150deg,#eaf8ff,#fffaf0 82%) !important;
    line-height:1.3 !important;
  }
  .dijedu-mobile-mode .dijedu-header { margin:0 0 7px !important; }
  .dijedu-mobile-mode .dijedu-headline { gap:6px; margin-bottom:5px; flex-wrap:nowrap; }
  .dijedu-mobile-mode .dijedu-tag { padding:4px 10px; font-size:11px; line-height:1.3; }
  .dijedu-mobile-mode .dijedu-counter { font-size:11px; white-space:nowrap; }
  .dijedu-mobile-mode .dijedu-meter { height:6px; }
  .dijedu-mobile-mode .dijedu-title { font-size:clamp(20px,5.7vw,26px) !important; margin:8px 0 10px !important; line-height:1.18 !important; }
  .dijedu-mobile-mode .dijedu-voice-box {
    display:flex !important; flex-direction:row !important; align-items:center !important;
    gap:10px !important; padding:8px !important;
    min-height:0 !important; border-radius:15px !important;
    border:1px solid #c0dfec !important; box-shadow:0 4px 10px rgba(16,75,115,.06) !important;
  }
  .dijedu-mobile-mode .dijedu-voice-visual {
    display:flex !important; flex:0 0 67px !important; width:67px !important;
    max-width:67px !important; min-width:0 !important;
    min-height:64px !important; height:66px !important;
    padding:4px !important; border-radius:11px !important; gap:2px !important;
    background:#ffe9ba !important;
  }
  .dijedu-mobile-mode .dijedu-voice-visual.dijedu-mobile-video {
    flex-basis:107px !important; width:107px !important; max-width:107px !important;
    min-height:85px !important; height:85px !important;
  }
  .dijedu-mobile-mode .dijedu-esma-image { display:block; max-height:55px !important; max-width:100% !important; object-fit:contain !important; }
  .dijedu-mobile-mode .dijedu-video { max-height:82px; width:100%; object-fit:contain; }
  .dijedu-mobile-mode .dijedu-sun { font-size:29px !important; line-height:1 !important; }
  .dijedu-mobile-mode .dijedu-voice-text { flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
  .dijedu-mobile-mode .dijedu-speaker { font-size:9px !important; letter-spacing:.07em; }
  .dijedu-mobile-mode .dijedu-voice-text p {
    font-size:clamp(15px,4.2vw,19px) !important; line-height:1.28 !important;
    margin:3px 0 !important; font-weight:850 !important;
  }
  .dijedu-mobile-mode .dijedu-audio { max-width:100%; height:29px; }
  .dijedu-mobile-mode .dijedu-audio-tip { font-size:9px; }
  .dijedu-mobile-mode .dijedu-question-image {
    display:block; width:auto !important; max-width:100% !important;
    height:auto !important; max-height:min(22dvh,175px) !important;
    object-fit:contain !important; object-position:center !important;
    border-radius:12px; margin:7px auto !important;
  }
  .dijedu-mobile-mode .dijedu-hint { font-size:12px !important; margin:10px 0 !important; }
  .dijedu-mobile-mode .dijedu-learning-actions { margin:7px 0 5px !important; gap:5px !important; }
  .dijedu-mobile-mode .dijedu-help-button {
    display:inline-flex !important; align-items:center; justify-content:center;
    min-height:36px !important; padding:7px 11px !important;
    font-size:12px !important; line-height:1.2 !important;
    border-radius:11px !important;
  }
  .dijedu-mobile-mode .dijedu-options {
    display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:7px !important; margin-top:8px !important;
  }
  .dijedu-mobile-mode .dijedu-options.dijedu-mobile-medium { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .dijedu-mobile-mode .dijedu-options.dijedu-mobile-long { grid-template-columns:minmax(0,1fr) !important; }
  .dijedu-mobile-mode .dijedu-choice {
    display:flex !important; flex-direction:column !important; justify-content:center !important;
    min-width:0 !important; min-height:92px !important;
    max-width:100% !important; padding:7px 4px !important;
    gap:5px !important; border-width:2px !important;
    border-radius:14px !important; box-shadow:0 3px 7px rgba(13,79,112,.1) !important;
    overflow-wrap:anywhere !important;
  }
  .dijedu-mobile-mode .dijedu-choice--text { min-height:58px !important; }
  .dijedu-mobile-mode .dijedu-options.dijedu-mobile-long .dijedu-choice { min-height:51px !important; }
  .dijedu-mobile-mode .dijedu-color-disc { width:48px !important; height:48px !important; border-width:3px !important; }
  .dijedu-mobile-mode .dijedu-shape-rectangle { width:55px !important; height:34px !important; }
  .dijedu-mobile-mode .dijedu-number { font-size:39px !important; line-height:1 !important; }
  .dijedu-mobile-mode .dijedu-choice-image { height:auto !important; max-height:58px !important; object-fit:contain !important; }
  .dijedu-mobile-mode .dijedu-choice-label,
  .dijedu-mobile-mode .dijedu-choice--text .dijedu-choice-label { font-size:clamp(13px,3.6vw,17px) !important; line-height:1.2 !important; }
  .dijedu-mobile-mode .dijedu-text-mark { font-size:16px !important; }
  .dijedu-mobile-mode .dijedu-feedback { margin-top:7px !important; }
  .dijedu-mobile-mode .dijedu-feedback:not(:empty) {
    gap:6px !important; padding:9px 10px !important;
    border-width:1px !important; border-radius:12px !important;
  }
  .dijedu-mobile-mode .dijedu-feedback p { font-size:14px !important; line-height:1.32 !important; }
  .dijedu-mobile-mode .dijedu-feedback .dijedu-button { padding:9px 13px !important; min-height:40px !important; }
  .dijedu-mobile-mode .dijedu-learning-support { padding:10px !important; margin:8px 0 !important; font-size:13px; line-height:1.35; }
  .dijedu-mobile-mode .dijedu-learning-support h3 { font-size:15px !important; }
  .dijedu-mobile-mode .dijedu-learning-support .dijedu-button { font-size:12px !important; }
  .dijedu-mobile-mode .dijedu-task-tip { font-size:12px !important; margin:8px 0 5px !important; }
  .dijedu-mobile-mode .dijedu-match-grid { gap:7px !important; margin:6px 0 8px !important; }
  .dijedu-mobile-mode .dijedu-match-column { gap:5px !important; }
  .dijedu-mobile-mode .dijedu-match-heading { font-size:12px !important; margin:0 0 3px !important; }
  .dijedu-mobile-mode .dijedu-match-tile { min-height:68px !important; padding:4px !important; border-width:2px !important; border-radius:11px !important; }
  .dijedu-mobile-mode .dijedu-match-picture { min-height:33px !important; }
  .dijedu-mobile-mode .dijedu-match-picture .dijedu-color-disc { width:35px !important; height:35px !important; }
  .dijedu-mobile-mode .dijedu-match-image { max-height:40px !important; }
  .dijedu-mobile-mode .dijedu-match-emoji { font-size:28px !important; }
  .dijedu-mobile-mode .dijedu-match-caption { font-size:12px !important; line-height:1.15 !important; }
  .dijedu-mobile-mode .dijedu-count-grid { gap:5px !important; margin:7px 0 !important; }
  .dijedu-mobile-mode .dijedu-count-tile { min-height:49px !important; font-size:26px !important; border-width:2px !important; border-radius:11px !important; padding:3px !important; }
  .dijedu-mobile-mode .dijedu-count-status { font-size:16px !important; margin:5px 0 !important; }
  .dijedu-mobile-mode .dijedu-trophy { font-size:36px !important; margin:9px 0 !important; }
  .dijedu-mobile-mode .dijedu-finish-copy { font-size:15px !important; }
  .dijedu-mobile-mode .dijedu-mobile-source { display:none !important; }
  .dijedu-mobile-mode .dijedu-mobile-dock {
    display:flex !important; flex:0 0 auto; align-items:center; gap:9px;
    justify-content:space-between; min-height:62px;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));
    border-top:1px solid #deedeb; background:#fff !important;
    box-shadow:0 -7px 16px rgba(15,62,82,.07); z-index:1;
  }
  .dijedu-mobile-mode .dijedu-mobile-prompt { font-size:11px; line-height:1.25; font-weight:750; color:#4f6571; flex:1 1 auto; min-width:0; }
  .dijedu-mobile-mode .dijedu-mobile-advance {
    flex:0 0 auto; min-width:127px; min-height:47px; padding:9px 15px;
    color:#fff !important; background:#0e8375 !important; border:0 !important;
    border-radius:14px !important; line-height:1.2 !important;
    font-family:inherit !important; font-size:16px !important; font-weight:850 !important;
    cursor:pointer; box-shadow:none !important;
  }
  .dijedu-mobile-mode .dijedu-mobile-advance:disabled { background:#b6cbcb !important; color:#344e52 !important; cursor:not-allowed; }
  .dijedu-mobile-mode .dijedu-mobile-advance:focus-visible,
  .dijedu-mobile-mode .dijedu-mobile-exit:focus-visible { outline:3px solid #1f69bc; outline-offset:2px; }
}
@media (max-width:767px) and (max-height:610px) {
  .dijedu-mobile-mode .dijedu-stage { padding-top:5px !important; }
  .dijedu-mobile-mode .dijedu-voice-visual { height:50px !important; min-height:50px !important; }
  .dijedu-mobile-mode .dijedu-voice-visual.dijedu-mobile-video { height:66px !important; min-height:66px !important; }
  .dijedu-mobile-mode .dijedu-voice-text p { font-size:15px !important; }
  .dijedu-mobile-mode .dijedu-question-image { max-height:17dvh !important; }
  .dijedu-mobile-mode .dijedu-choice { min-height:73px !important; }
  .dijedu-mobile-mode .dijedu-color-disc { height:39px !important; width:39px !important; }
  .dijedu-mobile-mode .dijedu-match-tile { min-height:58px !important; }
  .dijedu-mobile-mode .dijedu-count-tile { min-height:39px !important; }
}
@media (prefers-reduced-motion:reduce) {
  .dijedu-mobile-mode * { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* 1.8.1 – stvarni vizuelni odgovori na malim ekranima. */
.dijedu-choice--emoji .dijedu-choice-emoji{display:block;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:clamp(55px,15vw,88px);line-height:1.1;text-align:center;white-space:nowrap}
@media(max-width:767px){
 .dijedu-mobile-mode .dijedu-options:has(.dijedu-choice--emoji){gap:10px!important;margin-top:clamp(12px,4dvh,37px)!important}
 .dijedu-mobile-mode .dijedu-choice--emoji{min-height:clamp(125px,17dvh,162px)!important;padding:12px 4px!important;background:#fff!important}
 .dijedu-mobile-mode .dijedu-choice--emoji .dijedu-choice-emoji{font-size:clamp(57px,16vw,83px)!important;line-height:1.18!important}
 .dijedu-mobile-mode .dijedu-choice--emoji:focus-visible{outline:3px solid #087b95!important;outline-offset:3px}
}
@media(max-width:767px) and (max-height:650px){
 .dijedu-mobile-mode .dijedu-options:has(.dijedu-choice--emoji){margin-top:8px!important}
 .dijedu-mobile-mode .dijedu-choice--emoji{min-height:95px!important}
 .dijedu-mobile-mode .dijedu-choice--emoji .dijedu-choice-emoji{font-size:52px!important}
}


/* 1.8.2 — sadržaj lekcije koristi raspoloživu visinu, bez nasilnog rastezanja teksta. */
@media (max-width: 767px) {
  .dijedu-mobile-mode .dijedu-stage {
    display:flex !important; flex-direction:column !important;
    align-items:stretch !important;
  }
  .dijedu-mobile-mode .dijedu-stage > * { flex-shrink:0 !important; }
  .dijedu-mobile-mode .dijedu-stage > .dijedu-options,
  .dijedu-mobile-mode .dijedu-stage > .dijedu-count-grid,
  .dijedu-mobile-mode .dijedu-stage > .dijedu-match-grid {
    margin-top:auto !important;
  }
  .dijedu-mobile-mode .dijedu-stage > .dijedu-feedback {
    margin-bottom:auto !important;
  }
  /* Eliminira suvišnu ukrasnu tačku iz tekstualnih odgovora. */
  .dijedu-mobile-mode .dijedu-choice--text .dijedu-text-mark { display:none !important; }
  .dijedu-mobile-mode .dijedu-choice--text { justify-content:center !important; padding:10px 8px !important; }
  .dijedu-mobile-mode .dijedu-options.dijedu-mobile-long .dijedu-choice--text { min-height:58px !important; }
  .dijedu-mobile-mode .dijedu-choice--text .dijedu-choice-label { font-size:clamp(14px,3.8vw,17px) !important; }
}
@media (max-width:767px) and (min-height:730px) {
  /* Kada ima prostora, vizuelni odgovori su veći, bez novih elemenata ili skrolanja. */
  .dijedu-mobile-mode .dijedu-choice--visual { min-height:clamp(114px,17dvh,148px) !important; }
  .dijedu-mobile-mode .dijedu-choice--visual .dijedu-color-disc { width:clamp(54px,8dvh,76px) !important; height:clamp(54px,8dvh,76px) !important; }
  .dijedu-mobile-mode .dijedu-choice--visual .dijedu-shape-rectangle { width:clamp(54px,8dvh,76px) !important; height:43px !important; }
  .dijedu-mobile-mode .dijedu-options.dijedu-mobile-long .dijedu-choice--text { min-height:64px !important; }
}
@media (max-width:767px) and (max-height:610px) {
  /* Na niskim telefonima prioritet je čitljiv sadržaj, a ne popunjavanje ekrana. */
  .dijedu-mobile-mode .dijedu-stage > .dijedu-options,
  .dijedu-mobile-mode .dijedu-stage > .dijedu-count-grid,
  .dijedu-mobile-mode .dijedu-stage > .dijedu-match-grid { margin-top:8px !important; }
  .dijedu-mobile-mode .dijedu-stage > .dijedu-feedback { margin-bottom:0 !important; }
}