/* Dream RPG Reborn v0.51 R7 - compact overflow-safe header and notification centre */
.top.dreamTop041.dreamHeaderUnique041{
  min-height:58px!important;
  height:58px!important;
  width:100%!important;
  box-sizing:border-box!important;
  padding:5px 8px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:6px!important;
  overflow:visible!important;
  background:linear-gradient(180deg,rgba(5,11,27,.98),rgba(8,15,34,.97))!important;
  border-bottom:1px solid rgba(108,220,255,.18)!important;
  box-shadow:0 8px 28px rgba(0,0,0,.34)!important;
}
.topActions041{
  order:1!important;
  flex:0 0 auto!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  gap:4px!important;
}
.topActions041 button,.drrNotificationButtonR5,.dreamSettingsCog041{
  box-sizing:border-box!important;
  width:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  height:38px!important;
  min-height:38px!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:11px!important;
  font-size:17px!important;
  line-height:1!important;
  white-space:nowrap!important;
  flex:0 0 38px!important;
}
.brandCluster041{
  order:2!important;
  flex:1 1 auto!important;
  min-width:48px!important;
  max-width:230px!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  cursor:pointer;
}
.headerLogo041{
  width:min(100%,190px)!important;
  max-width:190px!important;
  height:42px!important;
  margin:0!important;
  object-fit:contain!important;
  animation:none!important;
  filter:drop-shadow(0 0 10px rgba(105,244,255,.22))!important;
}
.brandText041,.crumb{display:none!important}
.drrHeaderRightR5{
  order:3!important;
  flex:0 0 auto!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  gap:4px!important;
}
.drrNotificationButtonR5,.dreamSettingsCog041{
  position:relative;
  background:linear-gradient(180deg,rgba(36,57,104,.96),rgba(12,20,43,.98))!important;
  border:1px solid rgba(126,211,255,.2)!important;
  box-shadow:none!important;
  color:#f4f8ff!important;
}
.drrNotificationLabelR5{display:none!important}
.drrNotificationButtonR5:hover,.dreamSettingsCog041:hover{transform:translateY(-1px)!important}
.drrNotificationIconR5{font-size:18px;line-height:1}
.drrNotificationCountR5{
  position:absolute;
  top:-5px;
  right:-5px;
  min-width:17px;
  height:17px;
  padding:0 3px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#ff5f72;
  color:white;
  font-size:9px;
  font-weight:950;
  border:2px solid #071025;
}
.drrNotificationButtonR5.hasRandomEvent:after{
  content:"";
  position:absolute;
  left:-3px;
  top:-3px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#ffd66d;
  box-shadow:0 0 0 4px rgba(255,214,109,.14),0 0 16px rgba(255,214,109,.75);
  animation:drrEventPulseR5 1.6s ease-in-out infinite;
}
@keyframes drrEventPulseR5{50%{transform:scale(1.3);opacity:.7}}
.drrNotificationPanelR5{
  position:fixed;
  z-index:4000;
  top:72px;
  right:10px;
  width:min(440px,calc(100vw - 20px));
  max-height:min(76vh,720px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(115,216,255,.24);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(8,15,35,.995),rgba(5,10,25,.995));
  box-shadow:0 24px 80px rgba(0,0,0,.62),0 0 40px rgba(88,203,255,.1);
}
.drrNotificationPanelR5[hidden]{display:none!important}
.drrNotificationHeadR5{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.025);
}
.drrNotificationHeadR5 h3{margin:0;font-size:18px}
.drrNotificationHeadR5 .row{gap:5px;flex-wrap:nowrap}
.drrNotificationHeadR5 button{padding:6px 9px!important;min-height:32px!important;font-size:12px!important}
.drrRandomEventSlotR5{padding:10px 12px 0}
.drrRandomEventCardR5{
  border:1px solid rgba(255,215,104,.3);
  border-radius:14px;
  padding:11px 12px;
  background:linear-gradient(135deg,rgba(94,68,16,.33),rgba(25,38,73,.48));
}
.drrRandomEventCardR5 p{margin:5px 0}
.drrRandomEventCardR5 .line{margin:5px 0}
.drrRandomEventCardR5 button{margin-top:6px}
.drrNotificationListR5{
  overflow:auto;
  padding:10px 12px 14px;
  overscroll-behavior:contain;
}
.drrNotificationEmptyR5{padding:24px 12px;text-align:center;color:#aab7d2}
.drrNotificationItemR5{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  gap:9px;
  align-items:start;
  padding:10px 8px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.drrNotificationItemR5:last-child{border-bottom:0}
.drrNotificationItemR5.unread{background:linear-gradient(90deg,rgba(74,178,255,.1),transparent);border-radius:10px}
.drrNotificationItemIconR5{
  width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.07);font-size:17px
}
.drrNotificationItemBodyR5{min-width:0}
.drrNotificationItemBodyR5 b{display:block;color:#f7f9ff;font-size:13px;line-height:1.3}
.drrNotificationItemBodyR5 p{margin:3px 0;color:#c3cee3;font-size:12px;line-height:1.35;overflow-wrap:anywhere}
.drrNotificationTimeR5{white-space:nowrap;color:#8999b8;font-size:10px;padding-top:2px}
.drrNotificationActionR5{grid-column:2/4;justify-self:start;margin-top:-2px;padding:5px 9px!important;min-height:29px!important;font-size:11px!important}
@media(max-width:760px){
  .top.dreamTop041.dreamHeaderUnique041{grid-template-columns:auto minmax(90px,1fr) auto!important;padding:5px 7px!important;gap:5px!important}
  .topActions041{gap:4px!important}
  .topActions041 button{min-width:36px!important;min-height:36px!important;padding:6px 8px!important;font-size:15px!important}
  .headerLogo041{width:clamp(105px,31vw,148px)!important;height:39px!important}
  .brandText041{display:none!important}
  .drrHeaderRightR5{gap:4px}
  .drrNotificationButtonR5{width:38px!important;min-width:38px!important;height:38px!important;min-height:38px!important;padding:0!important;justify-content:center}
  .drrNotificationLabelR5{display:none}
  .dreamSettingsCog041{width:38px!important;min-width:38px!important;height:38px!important;min-height:38px!important;padding:0!important}
  .drrNotificationPanelR5{top:68px;right:5px;width:calc(100vw - 10px);max-height:78vh;border-radius:15px}
}
@media(max-width:430px){
  .topActions041 .backHeaderBtn041{display:none!important}
  .headerLogo041{width:112px!important}
  .drrNotificationItemR5{grid-template-columns:32px minmax(0,1fr);}
  .drrNotificationTimeR5{grid-column:2;justify-self:start;padding-top:0}
  .drrNotificationActionR5{grid-column:2}
}
@media(prefers-reduced-motion:reduce){.drrNotificationButtonR5.hasRandomEvent:after{animation:none}}

@media(max-width:620px){
  .top.dreamTop041.dreamHeaderUnique041{padding:4px 5px!important;gap:3px!important}
  .topActions041,.drrHeaderRightR5{gap:3px!important}
  .topActions041 button,.drrNotificationButtonR5,.dreamSettingsCog041{width:35px!important;min-width:35px!important;max-width:35px!important;height:35px!important;min-height:35px!important;flex-basis:35px!important;font-size:15px!important}
  .headerLogo041{width:min(100%,135px)!important;height:38px!important}
}
@media(max-width:390px){
  .topActions041 .backHeaderBtn041{display:none!important}
  .headerLogo041{width:min(100%,112px)!important}
}