/* The お知らせボックス: the bell opposite the menu button, and its box in the points dialog's
   frame (.study-points-dialog), which gives the buttons, borders and gold numbers. */
.header-notices{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid #d5bf8640;border-radius:8px;background:rgba(255,255,255,.05);color:#d5bf86;cursor:pointer;}
.header-notices:focus-visible{outline:2px solid #e3cc8c;outline-offset:2px;}
.notice-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:9px;background:#c9483f;color:#fff;font:700 11px/18px system-ui,sans-serif;text-align:center;box-shadow:0 0 0 2px #0f172a;}
.notice-badge[hidden]{display:none;}
@media(max-width:360px){html body .app-header .header-notices{right:8px;width:30px;}}
@media(prefers-reduced-motion:no-preference){.notice-badge:not([hidden]){animation:notice-badge-in .4s cubic-bezier(.3,1.6,.5,1) both;}}
@keyframes notice-badge-in{from{transform:scale(0)}to{transform:none}}

.notices-dialog h2{text-transform:none;letter-spacing:0;}
.notices-body{margin-top:14px;}
.notices-dialog [hidden]{display:none!important;}
.notice-bonus{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid #d5bf8640;border-radius:16px;background:linear-gradient(135deg,#d5bf861a,#ffffff05);}
.notice-bonus.is-ready{border-color:#d5bf86a0;}
.notice-bonus > div{flex:1;min-width:0;}
.notice-bonus strong{display:block;font-size:15px;color:#f4eddf;}
.notice-bonus small{display:block;font-size:12px;color:#cfc8ba;line-height:1.5;}
.notice-bonus-mark{flex:none;width:38px;height:38px;border-radius:50%;background:conic-gradient(#d5bf86 0 60deg,#22324c 0 120deg,#b98a4a 0 180deg,#2c4466 0 240deg,#e6d29a 0 300deg,#1b2a40 0);box-shadow:0 0 0 2px #d5bf8680;}
.notices-dialog .notice-primary{flex:none;border-color:#d5bf86;background:#d5bf862e;color:#f4eddf;font-weight:700;min-width:72px;}
.notice-list{list-style:none;margin:0;padding:0;}
.notice-list li{padding:12px 0;border-bottom:1px solid #ffffff14;}
.notice-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0;}
.notice-head strong{font-size:15px;overflow-wrap:anywhere;}
.notice-head time{flex:none;font-size:11px;color:#c1c6ce;}
.notice-list li.is-new .notice-head strong::before{content:"新着";display:inline-block;margin-right:6px;padding:0 6px;border-radius:6px;background:#c9483f;color:#fff;font-size:10px;line-height:17px;vertical-align:2px;}
.notice-text{margin:6px 0 0;font-size:13px;color:#d9dbe2;white-space:pre-wrap;overflow-wrap:anywhere;}
.notice-empty{font-size:13px;color:#c1c6ce;}

/* The wheel: a pointer at the top, a disc that turns and slows to a stop. */
.notice-wheel{position:relative;width:min(70vw,250px);aspect-ratio:1;margin:6px auto 4px;}
.notice-wheel-disc{width:100%;height:100%;border-radius:50%;box-shadow:0 10px 30px #0008,0 0 0 4px #d5bf8666;will-change:transform;}
.notice-wheel-disc svg{display:block;width:100%;height:100%;}
.notice-wheel-rim{fill:#0d1626;stroke:#d5bf86;stroke-width:2;}
.notice-wheel-hub{fill:#111c2c;stroke:#d5bf86;stroke-width:3;}
.notice-wheel text{font:800 8px system-ui,sans-serif;text-anchor:start;dominant-baseline:middle;}
.notice-wheel-slice{stroke:#0d1626;stroke-width:.4;}
.notice-wheel text.is-light{fill:#1b2333;}.notice-wheel text.is-dark{fill:#f4eddf;}
.notice-wheel-pointer{position:absolute;z-index:1;top:-8px;left:50%;width:0;height:0;margin-left:-11px;border:11px solid transparent;border-top:22px solid #f4eddf;border-bottom:0;filter:drop-shadow(0 2px 3px #0009);transform-origin:50% 0;}
.notice-wheel.is-won .notice-wheel-pointer{border-top-color:#e6d29a;}
.notice-wheel-status{min-height:1.6em;margin:10px 0;text-align:center;font-size:13px;color:#d9dbe2;}
.notice-won{font-size:22px;color:#e6d29a;font-variant-numeric:tabular-nums;}
.notices-dialog .notice-spin{display:block;width:100%;}
.notices-dialog .notice-back{display:block;margin:10px 0 0;}
.notice-odds{margin-top:10px;font-size:12px;color:#c1c6ce;}
.notice-odds summary{cursor:pointer;}
.notice-odds p{margin:6px 0 0;line-height:1.6;}
@media(prefers-reduced-motion:no-preference){
.notice-wheel.is-won{animation:notice-won .5s cubic-bezier(.3,1.5,.5,1);}
.notice-won{display:inline-block;animation:notice-won .5s cubic-bezier(.3,1.5,.5,1);}
}
@keyframes notice-won{0%{transform:scale(.9)}60%{transform:scale(1.05)}100%{transform:none}}

/* Admin: writing a notice. */
.admin-notice-form{display:grid;gap:10px;}
.admin-notice-form label{display:grid;gap:4px;font-size:12px;}
.admin-notice-form textarea{min-height:120px;resize:vertical;font:inherit;}
.admin-notice-list{list-style:none;margin:12px 0 0;padding:0;}
.admin-notice-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid #ffffff14;}
.admin-notice-list li span{min-width:0;overflow-wrap:anywhere;}
.admin-players-dialog textarea{box-sizing:border-box;width:100%;border:1px solid var(--border);border-radius:9px;background:#111827;color:#fff;padding:8px;font-size:16px;}
.admin-players-dialog .admin-notices-button{border-color:#d5bf8680;color:#f4eddf;}