/* =========================================================
   build1453 — お知らせモーダル（#notice-modal）モック準拠の刷新
   ・金の二重枠＋四隅飾り＋上部オーナメント、左上に羅針盤・右上に城の薄い透かし
   ・見出し中央「お知らせ / NOTICE」
   ・フィルター3等分（選択中は金＋✦）、一括ボタン2等分（アイコン付き）
   ・各お知らせ：枠付きカード、日付＋下線、左の金の縦線、羅針盤の透かし
   ・報酬：枠付きボックス、受け取る＝金／受け取り済み＝灰
   既存の inline style（sasaphia-notice-inline-style-v5）より後に読み込み上書きする。
   ========================================================= */

html body #notice-modal.notice-modal{
  padding:calc(env(safe-area-inset-top) + 40px) 12px calc(var(--bottom-nav-h,76px) + 8px) !important;
  background:rgba(40,34,28,.38) !important;
  backdrop-filter:blur(5px) !important;
  -webkit-backdrop-filter:blur(5px) !important;
}
html body #notice-modal.notice-modal .notice-panel{
  width:min(392px,100%) !important;
  height:100% !important;
  min-height:0 !important;
  max-height:680px !important;
  padding:20px 16px 14px !important;
  border:1.5px solid #c9a564 !important;
  border-radius:0 !important;
  overflow:visible !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='' fill='none' stroke='%23b98a3c' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M3 38 V12 Q3 3 12 3 H38'/%3E%3Cpath d='M8 30 V14 Q8 8 14 8 H30' stroke-width='.8' opacity='.8'/%3E%3Cpath d='M3 12 Q10 12 12 3' stroke-width='1'/%3E%3C/g%3E%3Cg transform=''%3E%3Cpath d='M8 8 L11 5 L14 8 L11 11Z' fill='%23b98a3c'/%3E%3C/g%3E%3C/svg%3E") left 6px top 6px / 34px 34px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='translate(40 0) scale(-1 1)' fill='none' stroke='%23b98a3c' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M3 38 V12 Q3 3 12 3 H38'/%3E%3Cpath d='M8 30 V14 Q8 8 14 8 H30' stroke-width='.8' opacity='.8'/%3E%3Cpath d='M3 12 Q10 12 12 3' stroke-width='1'/%3E%3C/g%3E%3Cg transform='translate(40 0) scale(-1 1)'%3E%3Cpath d='M8 8 L11 5 L14 8 L11 11Z' fill='%23b98a3c'/%3E%3C/g%3E%3C/svg%3E") right 6px top 6px / 34px 34px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='translate(0 40) scale(1 -1)' fill='none' stroke='%23b98a3c' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M3 38 V12 Q3 3 12 3 H38'/%3E%3Cpath d='M8 30 V14 Q8 8 14 8 H30' stroke-width='.8' opacity='.8'/%3E%3Cpath d='M3 12 Q10 12 12 3' stroke-width='1'/%3E%3C/g%3E%3Cg transform='translate(0 40) scale(1 -1)'%3E%3Cpath d='M8 8 L11 5 L14 8 L11 11Z' fill='%23b98a3c'/%3E%3C/g%3E%3C/svg%3E") left 6px bottom 6px / 34px 34px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='translate(40 40) scale(-1 -1)' fill='none' stroke='%23b98a3c' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M3 38 V12 Q3 3 12 3 H38'/%3E%3Cpath d='M8 30 V14 Q8 8 14 8 H30' stroke-width='.8' opacity='.8'/%3E%3Cpath d='M3 12 Q10 12 12 3' stroke-width='1'/%3E%3C/g%3E%3Cg transform='translate(40 40) scale(-1 -1)'%3E%3Cpath d='M8 8 L11 5 L14 8 L11 11Z' fill='%23b98a3c'/%3E%3C/g%3E%3C/svg%3E") right 6px bottom 6px / 34px 34px no-repeat,
    linear-gradient(180deg,#fcf9f1 0%,#f6f0e3 55%,#f1e9d8 100%) !important;
  box-shadow:
    inset 0 0 0 5px rgba(255,253,246,.85),
    inset 0 0 0 6px rgba(201,165,100,.55),
    0 16px 46px rgba(30,22,10,.42) !important;
  color:#33271c !important;
}
/* watermarks: compass (top-left) + castle (top-right) */
html body #notice-modal.notice-modal .notice-panel::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:0 !important;
  inset:6px 6px auto 6px !important;
  height:190px !important;
  border:0 !important;
  pointer-events:none !important;
  opacity:1 !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23b98a3c' stroke-width='.8'%3E%3Ccircle cx='100' cy='100' r='46'/%3E%3Ccircle cx='100' cy='100' r='30'/%3E%3C/g%3E%3Cpath d='M100 10 L106 94 L190 100 L106 106 L100 190 L94 106 L10 100 L94 94Z' fill='%23b98a3c'/%3E%3Cpath d='M100 50 L103 97 L150 100 L103 103 L100 150 L97 103 L50 100 L97 97Z' fill='%23b98a3c' transform='rotate(45 100 100)'/%3E%3C/svg%3E") left -30px top -26px / 170px 170px no-repeat,
    url('../images/bg_dairy.webp') right top / 62% auto no-repeat !important;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.14),rgba(0,0,0,0) 100%) !important;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.14),rgba(0,0,0,0) 100%) !important;
  filter:sepia(.3) !important;
}
/* top center ornament */
html body #notice-modal.notice-modal .notice-panel::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:-14px !important;
  width:30px !important;
  height:30px !important;
  transform:translateX(-50%) !important;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0 C10.8 7 13 9.2 20 10 C13 10.8 10.8 13 10 20 C9.2 13 7 10.8 0 10 C7 9.2 9.2 7 10 0Z' fill='%23b98a3c'/%3E%3C/svg%3E") center/contain no-repeat !important;
  filter:drop-shadow(0 0 2px #fffaf0) drop-shadow(0 1px 2px rgba(80,55,20,.3)) !important;
  pointer-events:none !important;
  z-index:3 !important;
}
html body #notice-modal.notice-modal .notice-panel > *{
  position:relative;
  z-index:1;
}

/* close: diamond frame */
html body #notice-modal.notice-modal .notice-close{
  position:absolute !important;
  top:16px !important;
  right:16px !important;
  left:auto !important;
  z-index:4 !important;
  width:40px !important;
  height:40px !important;
  min-width:0 !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
  color:#4a3826 !important;
  font:300 26px/40px 'Noto Serif JP',serif !important;
  text-align:center !important;
}
html body #notice-modal.notice-modal .notice-close::before{
  content:"" !important;
  position:absolute !important;
  inset:6px !important;
  z-index:-1 !important;
  border:1px solid #c4a066 !important;
  background:linear-gradient(135deg,#fffdf7,#efe6d3) !important;
  box-shadow:0 0 0 2px rgba(255,253,246,.9),0 0 0 3px rgba(196,160,102,.45),0 2px 5px rgba(80,55,20,.18) !important;
  transform:rotate(45deg) !important;
}

/* ---------- head ---------- */
html body #notice-modal.notice-modal .notice-head{
  display:flex !important;
  justify-content:center !important;
  margin:6px 0 16px !important;
  padding:0 !important;
  text-align:center !important;
}
html body #notice-modal.notice-modal .notice-head > div{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
}
html body #notice-modal.notice-modal .notice-title{
  margin:0 !important;
  font:700 31px/1.25 'Noto Serif JP',serif !important;
  letter-spacing:.1em !important;
  color:#6d4c22 !important;
  background:linear-gradient(180deg,#8a6430 0%,#5a3d18 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  text-shadow:none !important;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.9)) !important;
}
html body #notice-modal.notice-modal .notice-sub{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  margin:6px 0 0 !important;
  font:600 11px/1 'Cinzel',serif !important;
  letter-spacing:.48em !important;
  text-transform:uppercase !important;
  color:#7b6040 !important;
}
html body #notice-modal.notice-modal .notice-sub::before,
html body #notice-modal.notice-modal .notice-sub::after{
  content:"" !important;
  width:66px !important;
  height:7px !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0L10 5L5 10L0 5Z' fill='%23b8955a'/%3E%3C/svg%3E") right center/7px 7px no-repeat,
    linear-gradient(90deg,rgba(184,149,90,0),rgba(184,149,90,.85)) left center/calc(100% - 9px) 1px no-repeat !important;
}
html body #notice-modal.notice-modal .notice-sub::after{ transform:scaleX(-1) !important; }

/* ---------- toolbar ---------- */
html body #notice-modal.notice-modal .notice-toolbar{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:10px !important;
  margin:0 0 14px !important;
  padding:0 !important;
}
html body #notice-modal.notice-modal .notice-filter-group{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:8px !important;
  width:100% !important;
}
html body #notice-modal.notice-modal .notice-bulk-group{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:12px !important;
  width:100% !important;
  margin:0 !important;
}
html body #notice-modal.notice-modal .notice-filter-btn,
html body #notice-modal.notice-modal .notice-bulk-btn{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  width:100% !important;
  min-width:0 !important;
  height:42px !important;
  margin:0 !important;
  padding:0 6px !important;
  border:1px solid #c7b18a !important;
  border-radius:0 !important;
  background:linear-gradient(180deg,#fdfbf6 0%,#ece6da 100%) !important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.85),inset 0 0 0 3px rgba(199,177,138,.35),0 1px 2px rgba(80,60,30,.12) !important;
  color:#3b2d20 !important;
  font:700 15px/1 'Noto Serif JP',serif !important;
  letter-spacing:.08em !important;
  white-space:nowrap !important;
  transform:none !important;
}
html body #notice-modal.notice-modal .notice-filter-btn{ height:44px !important; font-size:16px !important; }
html body #notice-modal.notice-modal .notice-filter-btn.is-active{
  border-color:#a98447 !important;
  background:
    radial-gradient(ellipse at 50% 20%,rgba(255,246,220,.6),rgba(255,246,220,0) 60%),
    linear-gradient(180deg,#ecdcb2 0%,#d2b06d 55%,#bf9a55 100%) !important;
  box-shadow:inset 0 0 0 2px rgba(255,246,222,.65),inset 0 0 0 3px rgba(169,132,71,.45),0 2px 6px rgba(120,85,30,.25) !important;
  color:#3a2814 !important;
}
html body #notice-modal.notice-modal .notice-filter-btn.is-active::before,
html body #notice-modal.notice-modal .notice-filter-btn.is-active::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  width:14px !important;
  height:14px !important;
  margin-left:-7px !important;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0 C10.8 7 13 9.2 20 10 C13 10.8 10.8 13 10 20 C9.2 13 7 10.8 0 10 C7 9.2 9.2 7 10 0Z' fill='%23b98a3c'/%3E%3C/svg%3E") center/contain no-repeat !important;
  filter:drop-shadow(0 0 1px #fffaf0) !important;
}
html body #notice-modal.notice-modal .notice-filter-btn.is-active::before{ top:-8px !important; }
html body #notice-modal.notice-modal .notice-filter-btn.is-active::after{ bottom:-8px !important; }
html body #notice-modal.notice-modal .notice-bulk-btn::before{
  content:"" !important;
  flex:0 0 auto !important;
  width:17px !important;
  height:17px !important;
  background:center/contain no-repeat !important;
}
html body #notice-modal.notice-modal #notice-mark-all-read::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10.5 L8 15 L17 5' fill='none' stroke='%233b2d20' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; }
html body #notice-modal.notice-modal #notice-claim-all::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%233b2d20'%3E%3Crect x='2' y='7' width='16' height='4' rx='.6'/%3E%3Crect x='3.2' y='11.8' width='13.6' height='7' rx='.6'/%3E%3Crect x='9' y='7' width='2' height='12' fill='%23f5efe2'/%3E%3Cpath d='M10 7 C7 7 4.5 6 5 3.6 C5.5 1.8 8.5 3 10 6.6 C11.5 3 14.5 1.8 15 3.6 C15.5 6 13 7 10 7Z'/%3E%3C/svg%3E") !important; }
html body #notice-modal.notice-modal .notice-bulk-btn:disabled{
  opacity:.55 !important;
  filter:grayscale(.3) !important;
}
html body #notice-modal.notice-modal .notice-filter-btn:active,
html body #notice-modal.notice-modal .notice-bulk-btn:not(:disabled):active{
  transform:translateY(1px) !important;
}

/* ---------- list ---------- */
html body #notice-modal.notice-modal .notice-list{
  flex:1 1 auto !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
  margin:0 -6px 0 0 !important;
  padding:2px 8px 10px 0 !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
  scrollbar-width:thin !important;
  scrollbar-color:rgba(160,125,70,.7) rgba(200,180,140,.18) !important;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 18px),transparent 100%) !important;
  mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 18px),transparent 100%) !important;
}
html body #notice-modal.notice-modal .notice-list::-webkit-scrollbar{ width:4px; }
html body #notice-modal.notice-modal .notice-list::-webkit-scrollbar-track{ background:rgba(200,180,140,.18); }
html body #notice-modal.notice-modal .notice-list::-webkit-scrollbar-thumb{ background:rgba(160,125,70,.7); border-radius:2px; }

/* ---------- card ---------- */
html body #notice-modal.notice-modal .notice-item{
  position:relative !important;
  flex:0 0 auto !important;
  margin:0 !important;
  padding:16px 16px 18px !important;
  border:1px solid #d5be92 !important;
  border-radius:0 !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' opacity='.16'%3E%3Cg fill='none' stroke='%23b98a3c' stroke-width='2'%3E%3Ccircle cx='100' cy='100' r='60'/%3E%3Ccircle cx='100' cy='100' r='40'/%3E%3C/g%3E%3Cpath d='M100 6 L108 92 L194 100 L108 108 L100 194 L92 108 L6 100 L92 92Z' fill='%23b98a3c'/%3E%3Cpath d='M100 50 L104 96 L150 100 L104 104 L100 150 L96 104 L50 100 L96 96Z' fill='%23b98a3c' transform='rotate(45 100 100)'/%3E%3C/svg%3E") right 10px top 10px / 62px 62px no-repeat,
    linear-gradient(180deg,rgba(255,254,250,.94),rgba(250,246,237,.94)) !important;
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.75),inset 0 0 0 5px rgba(213,190,146,.45),0 2px 8px rgba(90,65,25,.08) !important;
  text-align:left !important;
}
html body #notice-modal.notice-modal .notice-unread-dot{
  position:absolute !important;
  top:12px !important;
  right:12px !important;
  left:auto !important;
  z-index:2 !important;
}
html body #notice-modal.notice-modal .notice-item-head{
  position:relative;
  margin:0 0 8px;
  padding:0 0 2px 16px;
}
/* left gold rule with diamond */
html body #notice-modal.notice-modal .notice-item-head::before{
  content:"";
  position:absolute;
  left:0;
  top:-4px;
  bottom:-4px;
  width:9px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0L10 5L5 10L0 5Z' fill='%23b8955a'/%3E%3C/svg%3E") center 30px/8px 8px no-repeat,
    linear-gradient(180deg,rgba(184,149,90,0),rgba(184,149,90,.85) 18%,rgba(184,149,90,.85) 82%,rgba(184,149,90,0)) center/1px 100% no-repeat;
}
html body #notice-modal.notice-modal .notice-date{
  position:relative !important;
  display:block !important;
  margin:0 0 9px !important;
  padding:0 0 6px !important;
  font:500 12.5px/1.2 'Noto Serif JP',serif !important;
  letter-spacing:.04em !important;
  color:#8a6d43 !important;
}
html body #notice-modal.notice-modal .notice-date::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  bottom:0 !important;
  width:min(68%,240px) !important;
  height:7px !important;
  margin-bottom:-3px !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0L10 5L5 10L0 5Z' fill='%23b8955a'/%3E%3C/svg%3E") right center/6px 6px no-repeat,
    linear-gradient(90deg,rgba(184,149,90,.85),rgba(184,149,90,.6)) left center/calc(100% - 7px) 1px no-repeat !important;
}
html body #notice-modal.notice-modal .notice-item-title{
  margin:0 !important;
  font:700 clamp(19px,5.4vw,22px)/1.35 'Noto Serif JP',serif !important;
  letter-spacing:.08em !important;
  color:#2c2016 !important;
}
html body #notice-modal.notice-modal .notice-body{
  margin:0 !important;
  padding-left:16px !important;
  font:500 clamp(13px,3.6vw,14.5px)/1.75 'Noto Serif JP',serif !important;
  letter-spacing:.02em !important;
  color:#45372a !important;
}

/* ---------- reward box ---------- */
html body #notice-modal.notice-modal .notice-reward{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:12px !important;
  margin:14px 0 0 !important;
  padding:16px 14px 14px !important;
  height:auto !important;
  overflow:visible !important;
  border:1px solid #d8c398 !important;
  border-radius:0 !important;
  background:linear-gradient(180deg,rgba(252,249,241,.95),rgba(246,240,228,.95)) !important;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.75),inset 0 0 0 4px rgba(216,195,152,.4) !important;
}
html body #notice-modal.notice-modal .notice-reward-main{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  padding:0 4px !important;
}
html body #notice-modal.notice-modal .notice-reward-item-icon{
  flex:0 0 auto !important;
  width:clamp(76px,22vw,92px) !important;
  min-width:0 !important;
  max-width:none !important;
  height:clamp(50px,14vw,60px) !important;
  min-height:0 !important;
  max-height:none !important;
  object-fit:contain !important;
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  filter:drop-shadow(0 2px 4px rgba(50,40,80,.2)) !important;
}
html body #notice-modal.notice-modal .notice-reward-character-icon{
  width:60px !important;
  height:60px !important;
  border:1.5px solid #c9a35f !important;
  border-radius:4px !important;
  object-fit:cover !important;
}
html body #notice-modal.notice-modal .notice-reward-label{
  display:block !important;
  margin:0 0 3px !important;
  font:600 12px/1.3 'Noto Serif JP',serif !important;
  letter-spacing:.06em !important;
  color:#5b4630 !important;
}
html body #notice-modal.notice-modal .notice-reward-copy strong{
  display:block !important;
  font:700 clamp(14px,4.1vw,17px)/1.3 'Noto Serif JP',serif !important;
  letter-spacing:.02em !important;
  color:#2c2016 !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
}
html body #notice-modal.notice-modal .notice-reward-copy{
  min-width:0 !important;
  flex:1 1 auto !important;
}
/* bundle rows (スタートボーナス etc.) */
html body #notice-modal.notice-modal .notice-reward-start-bonus .notice-reward-label{ display:none !important; }
html body #notice-modal.notice-modal .notice-reward-start-bundle{ width:100% !important; }
html body #notice-modal.notice-modal .notice-reward-bundle-list{
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  width:100% !important;
}
html body #notice-modal.notice-modal .notice-reward-bundle-item{
  display:grid !important;
  grid-template-columns:52px minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:10px !important;
  min-height:52px !important;
  padding:4px 6px !important;
  border:0 !important;
  background:none !important;
}
html body #notice-modal.notice-modal .notice-reward-bundle-item + .notice-reward-bundle-item{
  border-top:1px dashed rgba(184,149,90,.55) !important;
}
html body #notice-modal.notice-modal .notice-reward-bundle-icon{
  width:44px !important;
  height:44px !important;
  object-fit:contain !important;
  justify-self:center !important;
  filter:drop-shadow(0 2px 3px rgba(60,40,15,.22)) !important;
}
html body #notice-modal.notice-modal .notice-reward-bundle-name{
  font:700 15px/1.3 'Noto Serif JP',serif !important;
  letter-spacing:.1em !important;
  color:#2c2016 !important;
}
html body #notice-modal.notice-modal .notice-reward-bundle-amount{
  font:700 17px/1 'Noto Serif JP',serif !important;
  color:#2c2016 !important;
  white-space:nowrap !important;
}

/* claim button */
html body #notice-modal.notice-modal .notice-reward-btn{
  align-self:center !important;
  flex:0 0 auto !important;
  width:min(210px,80%) !important;
  min-width:0 !important;
  max-width:none !important;
  height:44px !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 10px !important;
  border:1px solid #a98447 !important;
  border-radius:0 !important;
  background:
    radial-gradient(ellipse at 50% 15%,rgba(255,246,220,.6),rgba(255,246,220,0) 60%),
    linear-gradient(180deg,#ecdcb2 0%,#d2b06d 55%,#bf9a55 100%) !important;
  box-shadow:inset 0 0 0 2px rgba(255,246,222,.6),inset 0 0 0 3px rgba(169,132,71,.4),0 2px 6px rgba(120,85,30,.25) !important;
  color:#3a2814 !important;
  font:700 16px/1 'Noto Serif JP',serif !important;
  letter-spacing:.12em !important;
}
html body #notice-modal.notice-modal .notice-reward-btn:disabled,
html body #notice-modal.notice-modal .notice-reward-btn.claimed{
  border-color:#b9b2a6 !important;
  background:linear-gradient(180deg,#eeebe6 0%,#d9d4cb 100%) !important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.6),inset 0 0 0 3px rgba(185,178,166,.4) !important;
  color:#857c70 !important;
  opacity:1 !important;
}
html body #notice-modal.notice-modal .notice-reward-btn:not(:disabled):active{ transform:translateY(1px) !important; }

html body #notice-modal.notice-modal .notice-filter-empty{
  margin:auto !important;
  padding:30px 10px !important;
  font:500 13px/1.6 'Noto Serif JP',serif !important;
  color:#7b6648 !important;
  text-align:center !important;
}

/* ---------- compact ---------- */
@media (max-width:365px){
  html body #notice-modal.notice-modal .notice-panel{ padding:18px 12px 12px !important; }
  html body #notice-modal.notice-modal .notice-title{ font-size:26px !important; }
  html body #notice-modal.notice-modal .notice-filter-btn{ font-size:14px !important; height:40px !important; }
  html body #notice-modal.notice-modal .notice-bulk-btn{ font-size:13px !important; height:38px !important; gap:6px !important; }
  html body #notice-modal.notice-modal .notice-item{ padding:14px 12px 14px !important; }
  html body #notice-modal.notice-modal .notice-reward{ padding:12px 10px 12px !important; }
  html body #notice-modal.notice-modal .notice-reward-main{ gap:10px !important; }
}
@media (max-height:700px){
  html body #notice-modal.notice-modal{ padding-top:calc(env(safe-area-inset-top) + 24px) !important; }
  html body #notice-modal.notice-modal .notice-head{ margin:2px 0 10px !important; }
  html body #notice-modal.notice-modal .notice-title{ font-size:26px !important; }
  html body #notice-modal.notice-modal .notice-toolbar{ gap:8px !important; margin-bottom:10px !important; }
  html body #notice-modal.notice-modal .notice-filter-btn{ height:38px !important; }
  html body #notice-modal.notice-modal .notice-bulk-btn{ height:36px !important; }
}