/* One readable preference and one wake target in either scene family. */
@layer sukun-r1108-kandil {
html body #kandilPrefs {
 display:grid!important;grid-template-columns:minmax(0,1fr) minmax(112px,160px)!important;
 gap:8px 12px!important;margin:12px 0!important;padding:14px!important;
 background:#0a202c!important;color:#f8edd6!important;
 border:1px solid #647367!important;border-radius:12px!important;
 font:400 14px/1.55 var(--f-ui,system-ui,sans-serif)!important;
 overflow-wrap:anywhere!important;
}
html body #kandilPrefs label {align-self:center!important;font-weight:650!important;}
html body #kandilPrefs :is(label,p,select,option) {
 color:#f8edd6!important;-webkit-text-fill-color:currentColor!important;
 opacity:1!important;text-shadow:none!important;
}
html body #kandilPrefs select {
 width:100%!important;min-width:0!important;min-height:44px!important;
 padding:9px 12px!important;box-sizing:border-box!important;
 background:#153642!important;background-image:none!important;
 border:1px solid #a5bcb6!important;border-radius:8px!important;
 font:inherit!important;line-height:1.5!important;color-scheme:dark!important;
}
html body #kandilPrefs option {background:#153642!important;}
html body #kandilPrefs p {grid-column:1/-1!important;margin:0!important;font-size:13px!important;}
html body #kandilPrefs #kandilIdleHelp {color:#e0e9e5!important;}
html body #kandilPrefs :focus-visible,html body #kandil #kandilWake:focus-visible {
 outline:2px solid #fff1d5!important;outline-offset:3px!important;
}
html body #kandil #kandilWake {
 width:max-content!important;max-width:calc(100% - 32px)!important;min-height:44px!important;
 padding:11px 18px!important;border:1px solid #c8b88e!important;border-radius:24px!important;
 background:#102c30!important;background-image:none!important;color:#fff1d5!important;
 -webkit-text-fill-color:currentColor!important;opacity:1!important;
 font:500 14px/1.45 var(--f-ui,system-ui,sans-serif)!important;
 letter-spacing:normal!important;text-align:center!important;cursor:pointer!important;
 box-shadow:none!important;text-shadow:none!important;white-space:normal!important;
}
@media(max-width:370px) {
 html body #kandilPrefs {grid-template-columns:minmax(0,1fr)!important;}
}
@media(forced-colors:active) {
 html body :is(#kandilPrefs,#kandilPrefs select,#kandilPrefs option,#kandil #kandilWake) {
  background:Canvas!important;color:CanvasText!important;border-color:ButtonText!important;
 }
 html body #kandilPrefs :is(label,p,select,option) {color:CanvasText!important;}
}
}

/* r1153: the idle display uses the original transparent Sükûn mark. */
@layer sukun-r1108-kandil {
html body #kandil {
 box-sizing:border-box!important; gap:clamp(6px,1.3vh,12px)!important;
 padding:calc(104px + env(safe-area-inset-top)) 16px calc(70px + env(safe-area-inset-bottom))!important;
 background:radial-gradient(ellipse at 50% 44%,#15352e 0%,#071713 47%,#010806 100%)!important;
}
html body #kandil::before {
 content:''!important;position:absolute!important;inset:14px!important;pointer-events:none!important;
 border:1px solid #bb93565c!important;border-radius:20px!important;
 box-shadow:inset 0 0 0 5px #b8914b12,inset 0 0 0 7px #b8914b35!important;
 background:repeating-linear-gradient(135deg,transparent 0 23px,#d2ac6b09 24px 25px,transparent 26px 48px)!important;
}
html body #kandil .kFlame {
 box-sizing:border-box!important; width:min(66vw,290px,32vh)!important;height:min(66vw,290px,32vh)!important;
 flex:0 0 auto!important; margin:0!important;
 opacity:var(--kandil-logo-opacity,1)!important;
 background:url('../assets/branding/sukun-frameless-logo-r1029.png') center/contain no-repeat!important;
}
html body #kandil .kFlame>span {display:none!important;animation:none!important}
html body #kandil.on:not([data-power="saving"]) .kFlame {animation:sukun-saver-glow 8s ease-in-out infinite!important}
@keyframes sukun-saver-glow {0%,100%{transform:scale(.98)}50%{transform:scale(1.025)}}
html body #kandil .kSaat {font-size:clamp(31px,7vh,58px)!important;line-height:1!important}
html body #kandil .kTarih {font-size:11px!important;letter-spacing:.12em!important;text-align:center!important}
html body #kandil .kEsma .ar {font-size:clamp(22px,4.5vh,30px)!important;line-height:1.25!important}
html body #kandil .kEsma .tr {font-size:11px!important}
html body #kandil #kandilPowerWrap {
 position:absolute!important;top:calc(15px + env(safe-area-inset-top))!important;right:20px!important;
 display:grid!important;grid-template-columns:auto auto!important;align-items:center!important;gap:4px 6px!important;z-index:2!important;
 color:#e5d3ad!important;font:600 12px/1.3 system-ui,sans-serif!important;
}
html body #kandil #kandilPowerWrap select {
 box-sizing:border-box!important;min-height:40px!important;max-width:180px!important;padding:6px 24px 6px 9px!important;
 border:1px solid #c1a76f!important;border-radius:8px!important;background:#102921!important;color:#fff4dc!important;
 -webkit-text-fill-color:currentColor!important;font:500 12px/1.3 system-ui,sans-serif!important;color-scheme:dark!important;
}
html body #kandil #kandilWake {bottom:calc(14px + env(safe-area-inset-bottom))!important}
html body #kandil[data-power="saving"] {background:#000!important}
html body #kandil[data-power="saving"]::before {background:none!important;box-shadow:none!important;border-color:#79644144!important}
html body #kandil[data-power="saving"] .kFlame {animation:none!important;opacity:var(--kandil-logo-opacity,1)!important}
@media (prefers-reduced-motion:reduce) {html body #kandil.on .kFlame {animation:none!important}}
@media (max-height:600px) {html body #kandil {gap:4px!important} html body #kandil .kFlame {width:min(50vw,25vh)!important;height:min(50vw,25vh)!important}}
}

/* r1154: an unobtrusive, friendly settings gear opens the saver controls. */
@layer sukun-r1149-berhet-hero {
html body #kandil #kandilSettingsButton {
 position:absolute!important;top:calc(18px + env(safe-area-inset-top))!important;right:20px!important;z-index:3!important;
 box-sizing:border-box!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;
 width:116px!important;min-width:0!important;max-width:calc(100% - 40px)!important;min-height:72px!important;height:auto!important;
 margin:0!important;padding:4px!important;border:0!important;border-image:none!important;border-radius:12px!important;
 background:transparent!important;background-image:none!important;box-shadow:none!important;filter:none!important;
 color:#e9c984!important;-webkit-text-fill-color:currentColor!important;text-shadow:0 1px 3px #000!important;
 font:600 10px/1.2 system-ui,sans-serif!important;letter-spacing:0!important;text-align:center!important;white-space:normal!important;
 opacity:0!important;pointer-events:none!important;transition:opacity .35s ease!important;cursor:pointer!important;
}
html body #kandil:is(.k-settings-active,.k-settings-peek) #kandilSettingsButton,
html body #kandil #kandilSettingsButton:focus-visible,
html body #kandil #kandilSettingsButton[aria-expanded="true"] {opacity:1!important;pointer-events:auto!important}
html body #kandil #kandilSettingsButton svg.kSettingsCog {
 display:block!important;position:static!important;flex:0 0 40px!important;width:40px!important;height:40px!important;
 fill:currentColor!important;filter:drop-shadow(0 2px 4px #0009)!important;
}
html body #kandil #kandilSettingsLabel {display:block!important;position:static!important;width:100%!important;color:inherit!important;font:inherit!important;white-space:normal!important}
html body #kandil #kandilPowerWrap {
 top:calc(95px + env(safe-area-inset-top))!important;right:20px!important;
 width:min(290px,calc(100% - 40px))!important;box-sizing:border-box!important;
 padding:12px!important;border:1px solid #c6a868a6!important;border-radius:12px!important;
 background:#0b211bf2!important;box-shadow:0 6px 18px #0009!important;
 grid-template-columns:minmax(0,1fr) minmax(100px,145px)!important;gap:8px!important;
}
html body #kandil #kandilPowerWrap[hidden] {display:none!important}
html body #kandil #kandilPowerWrap label {color:#f0dfbc!important;white-space:normal!important;overflow-wrap:break-word!important}
html body #kandil #kandilPowerWrap select {width:100%!important;min-width:0!important;max-width:100%!important;border-image:none!important;background-image:none!important}
html body #kandil :is(#kandilSettingsButton,#kandilPowerSel,#kandilOpacitySel):focus-visible {outline:2px solid #fff1d5!important;outline-offset:3px!important}
@media(prefers-reduced-motion:reduce) {html body #kandil #kandilSettingsButton {transition:none!important}}
@media(forced-colors:active) {
 html body #kandil #kandilSettingsButton {color:ButtonText!important}
 html body #kandil #kandilPowerWrap,html body #kandil #kandilPowerWrap select {background:Canvas!important;color:CanvasText!important;border-color:ButtonText!important}
}
}

/* r1155: the jewel gear sits immediately above the return control. */
@layer sukun-r1149-berhet-hero {
 html body #kandil {
  padding-top:calc(20px + env(safe-area-inset-top))!important;
  padding-bottom:calc(160px + env(safe-area-inset-bottom))!important;
 }
 html body #kandil #kandilSettingsButton {
  top:auto!important;right:auto!important;left:50%!important;
  bottom:calc(68px + env(safe-area-inset-bottom))!important;transform:translateX(-50%)!important;
  width:138px!important;min-height:70px!important;padding:3px 4px!important;gap:2px!important;
  color:#eacb86!important;font-size:10px!important;
 }
 html body #kandil #kandilSettingsButton svg.kSettingsCog {
  flex-basis:46px!important;width:46px!important;height:46px!important;
  filter:drop-shadow(0 2px 3px #000b) drop-shadow(0 0 3px #c18d3d55)!important;
 }
 html body #kandil #kandilPowerWrap {
  top:auto!important;right:auto!important;left:50%!important;
  bottom:calc(145px + env(safe-area-inset-bottom))!important;transform:translateX(-50%)!important;
  max-height:min(44vh,175px)!important;overflow-y:auto!important;
 }
 @media(max-height:600px) {
  html body #kandil {gap:4px!important;padding-top:calc(12px + env(safe-area-inset-top))!important;}
  html body #kandil .kFlame {width:min(50vw,24vh)!important;height:min(50vw,24vh)!important}
  html body #kandil .kSaat {font-size:clamp(27px,6vh,40px)!important}
  html body #kandil .kEsma .ar {font-size:clamp(20px,4vh,26px)!important}
 }
 @media(max-height:380px) {
  html body #kandil .kFlame {width:min(40vw,20vh)!important;height:min(40vw,20vh)!important}
  html body #kandil .kEsma .ar {font-size:18px!important;margin-bottom:0!important}
  html body #kandil .kTarih {font-size:10px!important}
 }
 @media(max-height:320px) {
  html body #kandil {padding-top:calc(8px + env(safe-area-inset-top))!important;padding-bottom:calc(146px + env(safe-area-inset-bottom))!important;gap:2px!important}
  html body #kandil .kFlame {width:min(36vw,16vh)!important;height:min(36vw,16vh)!important}
  html body #kandil .kSaat {font-size:22px!important}
  html body #kandil .kEsma .ar {font-size:16px!important}
  html body #kandil .kEsma .tr {font-size:9px!important}
 }
 @media(forced-colors:active) {
  html body #kandil #kandilSettingsButton svg.kSettingsCog {filter:none!important}
 }
}

/* A friendly, brief response for the screensaver settings mascot. */
@layer sukun-r1149-berhet-hero {
 html body #kandil #kandilSettingsButton svg .kGearSmile {opacity:0!important}
 html body #kandil #kandilSettingsButton:is(:hover,:focus-visible,.k-is-happy) svg .kGearSmile {opacity:1!important}
 html body #kandil #kandilSettingsButton:is(:hover,:focus-visible,.k-is-happy) svg .kGearMouth {opacity:0!important}
 html body #kandil:not([data-power="saving"]) #kandilSettingsButton.k-is-happy svg.kSettingsCog {
  transform-origin:50% 50%!important;
  animation:kandil-gear-greeting 850ms cubic-bezier(.22,.7,.26,1) 1!important;
 }
 @keyframes kandil-gear-greeting {
  0%,100% {transform:translateY(0) rotate(0deg)}
  38% {transform:translateY(-10px) rotate(180deg)}
  72% {transform:translateY(-4px) rotate(360deg)}
 }
 @media (prefers-reduced-motion:reduce) {
  html body #kandil #kandilSettingsButton.k-is-happy svg.kSettingsCog {animation:none!important}
 }
}

/* Preserve the rectangular transparent Berhetiyye brand on short screens.
   This lives in the earlier important layer that owns saver responsive sizing. */
@layer sukun-r1149-berhet-hero {
 @media(max-height:600px) {
  html[data-r1074-theme="berhet"] body #kandil .kFlame {
   width:min(78vw,420px,46vh)!important;height:auto!important;aspect-ratio:31/20!important;
  }
 }
 @media(prefers-reduced-motion:reduce) {
  html[data-r1074-theme="berhet"] body #kandil.on:not([data-power="saving"]) .kFlame {animation:none!important}
 }
}

/* Keep the return control clear of the lower decorative frame in both themes.
   Move its associated settings controls by the same amount to retain spacing. */
@layer sukun-r1149-berhet-hero {
 html body #kandil {
  padding-bottom:calc(172px + env(safe-area-inset-bottom))!important;
 }
 html body #kandil #kandilWake {
  bottom:calc(26px + env(safe-area-inset-bottom))!important;
 }
 html body #kandil #kandilSettingsButton {
  bottom:calc(80px + env(safe-area-inset-bottom))!important;
 }
 html body #kandil #kandilPowerWrap {
  bottom:calc(157px + env(safe-area-inset-bottom))!important;
 }
 @media(max-height:320px) {
  html body #kandil {
   padding-bottom:calc(158px + env(safe-area-inset-bottom))!important;
  }
 }
}