.notification-anchor{position:relative;flex:none}
.notification-checkin-toast{position:fixed;z-index:190;left:50%;bottom:calc(100px + env(safe-area-inset-bottom));transform:translateX(-50%);box-sizing:border-box;display:flex;align-items:center;gap:10px;width:max-content;max-width:calc(100vw - 24px);padding:12px 16px;border:1px solid #e4d9ff;border-radius:16px;background:#fffefa;box-shadow:0 6px 24px #32206330;color:#19164c;font:400 15px/1.5 ClawSystemLocal,sans-serif}
.notification-checkin-toast[hidden]{display:none}
.notification-checkin-toast button{flex:none;min-height:44px;padding:6px 10px;border:1px solid #e4d9ff;border-radius:10px;background:#f4efff;color:#19164c;font:inherit;cursor:pointer}
@media(max-width:480px){.notification-checkin-toast{gap:6px;padding:10px;font-size:13px}.notification-checkin-toast span{min-width:0}.notification-checkin-toast button{padding:6px}}
.claw-platform .notification-bell{position:relative;color:#08085d}
.notification-bell-fallback{width:100%;height:100%;object-fit:contain}
.notification-badge{position:absolute;right:-3px;top:-3px;min-width:20px;height:20px;padding:0 4px;border:2px solid #fff7ec;border-radius:12px;background:#ff3042;color:#fff;font:700 11px/16px system-ui;text-align:center}
.notification-badge[hidden],.claw-notifications [hidden]{display:none!important}
dialog.claw-notifications{box-sizing:border-box;position:fixed;left:50vw;right:auto;top:50dvh;bottom:auto;transform:translate(-50%,-50%);margin:0;width:590px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);padding:20px 28px;border:2px solid #d4cbff;border-radius:23px;background:#fff;color:#08085d;box-shadow:0 14px 45px #17134720;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Microsoft JhengHei",sans-serif;overflow:hidden;text-align:left}
dialog.claw-notifications[open]{display:flex;flex-direction:column}
.claw-notifications .notification-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:3px;margin:-3px}
.claw-notifications .notification-heading,.claw-notifications .notification-toolbar,.claw-notifications .notification-preview{flex:none}
.claw-notifications picture{display:block}
.claw-notifications picture img{display:block;width:100%;height:100%;object-fit:contain}
.claw-notifications .notification-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.claw-notifications::backdrop{background:rgba(25,25,31,.46)}
.claw-notifications *{box-sizing:border-box}
.claw-notifications .notification-heading{display:flex;align-items:center;gap:12px;padding-bottom:19px;border-bottom:1px solid #e5dfff}
.claw-notifications .notification-title-icon{width:38px;height:43px;object-fit:contain;flex:none}
.claw-notifications .notification-title-art{width:127px;height:39px}
.claw-notifications h2{padding:0;margin:0;font-size:29px;font-weight:900;line-height:1.25;letter-spacing:0;color:#08085d}
.claw-notifications .notification-unread{flex:none;border-radius:20px;padding:6px 15px;background:#ffebed;color:#c9192e;font-size:15px;line-height:24px;white-space:nowrap}
.claw-notifications button{width:auto;height:auto;margin:0;font-family:inherit;font-weight:600;line-height:1.4;cursor:pointer;box-shadow:none;text-transform:none;letter-spacing:0}
.claw-notifications button:focus-visible{outline:3px solid #6d5ceb;outline-offset:3px}
.claw-notifications button:disabled{cursor:default;opacity:.5}
.claw-notifications .notification-close{margin-left:auto;flex:none;width:44px;min-height:44px;padding:6px;border:0;border-radius:9px;background:transparent}
.claw-notifications .notification-close-art{width:30px;height:31px}
.claw-notifications .notification-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:45px;color:#636195;font-size:16px}
.claw-notifications .notification-mark-all{padding:8px 0;min-height:44px;border:0;background:transparent;color:#d71930;font-size:16px}
.claw-notifications .notification-status{margin:0;color:#65618d;font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.claw-notifications .notification-status:not(:empty){padding:8px 0}
.claw-notifications .notification-preview{margin:10px 0 0;color:#a6563b;font-size:13px;line-height:1.5}
.claw-notifications .notification-list{display:grid;gap:8px;list-style:none;padding:0;margin:0}
.claw-notifications .notification-row{display:grid;grid-template-columns:12px 68px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:90px;padding:8px 16px 8px 8px;border:1px solid #e4dfff;border-radius:15px;background:#fff}
.claw-notifications .notification-row.unread{background:#fff4ef;border-color:#ffdfd5}
.claw-notifications .notification-dot{width:12px;height:12px;border-radius:50%;background:transparent}
.claw-notifications .notification-row.unread .notification-dot{background:#ff3042;box-shadow:0 0 0 2px #fff}
.claw-notifications .notification-type-icon{display:block;width:68px;height:68px;object-fit:contain}
.claw-notifications .notification-coin-disc{display:grid;place-items:center;border-radius:50%;background:#ffebcb}
.claw-notifications .notification-coin-art{width:40px;height:40px;object-fit:contain}
.claw-notifications .notification-copy{min-width:0}
.claw-notifications .notification-copy strong{display:block;font-size:20px;font-weight:800;line-height:1.35;overflow-wrap:anywhere}
.claw-notifications .notification-copy p{margin:2px 0 0;color:#66628e;font-size:16px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.claw-notifications .notification-copy time{display:block;margin-top:4px;color:#6c6888;font-size:11px;line-height:1.3}
.claw-notifications .notification-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:5px;max-width:112px}
.claw-notifications .notification-copy .notification-unavailable{font-size:12px;color:#6c6888}
.claw-notifications .notification-detail{display:flex;align-items:center;gap:7px;min-height:44px;padding:7px 0 7px 6px;border:0;background:transparent;color:#e51a30;white-space:nowrap;font-size:15px}
.claw-notifications .notification-chevron{width:17px;height:25px;flex:none}
.claw-notifications .notification-settings{min-height:44px;padding:8px 16px;border:1px solid #ff3042;border-radius:12px;background:white;color:#d71930;white-space:nowrap;font-size:15px}
.claw-notifications .notification-more,.claw-notifications .notification-retry{min-height:44px;margin-top:10px;padding:9px 16px;border:1px solid #d4cbff;border-radius:12px;background:#f6f3ff;color:#08085d;font-size:15px}
.claw-notifications .notification-retry{margin:0 0 0 8px}
.claw-notifications .notification-empty{display:grid;align-content:center;justify-items:center;gap:10px;min-height:220px;padding:26px 10px;border:1px solid #ded5ff;border-radius:14px}
.claw-notifications .notification-empty-art{width:152px;height:84px;object-fit:contain}
.claw-notifications .notification-empty p{margin:0;color:#08085d;font-size:20px;font-weight:800}
.playing-view .notification-anchor{display:none!important}
@media(max-width:640px){
 dialog.claw-notifications{inset:0;transform:none;margin:auto;width:calc(100% - 16px);max-width:372px;max-height:calc(100dvh - 32px);padding:14px 16px;border-radius:20px}
 .claw-notifications .notification-heading{gap:10px;padding-bottom:11px}
 .claw-notifications .notification-title-icon{width:34px;height:39px}
 .claw-notifications .notification-title-art{width:104px;height:34px}
 .claw-notifications h2{font-size:23px}
 .claw-notifications .notification-unread{padding:4px 10px;font-size:12px;line-height:22px}
 .claw-notifications .notification-close{width:44px;min-height:44px;padding:6px}
 .claw-notifications .notification-toolbar{font-size:14px;min-height:38px}
 .claw-notifications .notification-mark-all{font-size:14px;min-height:44px}
 .claw-notifications .notification-row{grid-template-columns:9px 58px minmax(0,1fr);gap:3px 10px;padding:10px 12px 7px 7px;border-radius:14px}
 .claw-notifications .notification-dot{width:9px;height:9px}
 .claw-notifications .notification-type-icon{width:58px;height:58px}
 .claw-notifications .notification-copy strong{font-size:18px}
 .claw-notifications .notification-copy p{font-size:14px;line-height:1.5}
 .claw-notifications .notification-actions{grid-column:2/-1;max-width:none}
 .claw-notifications .notification-detail{font-size:14px;min-height:44px;padding:2px 0}
 .claw-notifications .notification-settings{font-size:13px;min-height:44px;padding:6px 13px;border-radius:9px}
}
@media(max-width:350px){
 .claw-notifications .notification-heading{display:grid;grid-template-columns:34px minmax(0,1fr) 44px;gap:7px}
 .claw-notifications h2{font-size:20px}
 .claw-notifications .notification-unread{grid-column:2;grid-row:2;justify-self:start;padding:3px 7px;font-size:11px}
 .claw-notifications .notification-close{grid-column:3;grid-row:1}
 dialog.claw-notifications{padding:12px}
}
/* Match the shared mission header, including its full-width tinted band. */
body.platform-enabled dialog.claw-notifications{--notification-pad-x:28px;--notification-pad-top:20px}
body.platform-enabled dialog.claw-notifications>.notification-heading{margin:calc(-1 * var(--notification-pad-top)) calc(-1 * var(--notification-pad-x)) 0;padding:10px 22px!important;min-height:78px;background:linear-gradient(110deg,#faf3ff,#fffaf4);border-bottom:1px solid #f0e8f6;gap:12px}
body.platform-enabled .claw-notifications .notification-title-icon{width:44px;height:44px}
@media(max-width:1050px){
 body.platform-enabled dialog.claw-notifications>.notification-heading{min-height:60px;padding-block:6px!important;gap:8px}
 body.platform-enabled .claw-notifications .notification-title-icon{width:34px;height:34px}
}
@media(max-width:640px){
 body.platform-enabled dialog.claw-notifications{--notification-pad-x:16px;--notification-pad-top:14px}
 body.platform-enabled dialog.claw-notifications>.notification-heading{padding-inline:12px!important}
}
@media(max-width:350px){body.platform-enabled dialog.claw-notifications{--notification-pad-x:12px;--notification-pad-top:12px}}

body .notification-checkin-toast{width:max-content;max-width:min(520px,calc(100vw - 24px))}
body .notification-checkin-toast>span{flex:1;min-width:100px}
body .notification-checkin-toast>button{width:auto!important;min-width:0!important;max-width:none!important;flex:0 0 auto!important;margin:0!important}

/* Notification cards: quiet surfaces, compact category badge and clear action. */
#platform-notifications .notification-list{gap:8px;padding:2px 0 4px}
#platform-notifications .notification-row{position:relative;grid-template-columns:52px minmax(0,1fr) auto;gap:16px;align-items:center;min-height:94px;padding:12px 16px;border:1px solid #e9e3f3;border-radius:18px;background:#fff;box-shadow:0 3px 12px #30205c06}
#platform-notifications .notification-row.unread{background:linear-gradient(115deg,#faf7ff,#fff 75%);border-color:#dcd1f1}
#platform-notifications .notification-dot{position:absolute;left:58px;top:calc(50% - 24px);width:8px;height:8px;z-index:1}
#platform-notifications .notification-row.unread .notification-dot{background:#ff536b;box-shadow:0 0 0 3px #faf7ff}
#platform-notifications .notification-type-icon{grid-column:1;width:52px;height:52px;padding:9px;border-radius:16px;background:#f0e9ff}
#platform-notifications .notification-copy{grid-column:2}
#platform-notifications .notification-copy strong{font-size:18px;line-height:1.35;color:#19164c}
#platform-notifications .notification-copy p{margin:2px 0 0;font-size:14px;line-height:1.45;color:#77708f}
#platform-notifications .notification-copy time{margin-top:4px;font-size:12px;line-height:1.4;color:#91879f}
#platform-notifications .notification-actions{grid-column:3;max-width:140px;gap:8px}
#platform-notifications .notification-detail{justify-content:center;gap:6px;min-height:44px;padding:9px 13px;border:1px solid #e3dbed;border-radius:12px;background:linear-gradient(#fff,#f8f6fb);color:#282052;font-size:14px;box-shadow:inset 0 1px #fff,0 2px 0 #ded8e7!important;transition:background .15s,border-color .15s,transform .15s}
#platform-notifications .notification-detail:hover:not(:disabled){background:#f0e9ff;border-color:#c8b6eb}
#platform-notifications .notification-detail:active:not(:disabled){transform:translateY(1px)}
#platform-notifications .notification-chevron{width:12px;height:18px}
@media(max-width:640px){
 #platform-notifications .notification-row{grid-template-columns:42px minmax(0,1fr);gap:8px 12px;min-height:0;padding:12px;border-radius:16px}
 #platform-notifications .notification-type-icon{width:42px;height:42px;padding:7px;border-radius:13px;align-self:start}
 #platform-notifications .notification-dot{left:45px;top:13px;width:7px;height:7px}
 #platform-notifications .notification-copy strong{font-size:17px}
 #platform-notifications .notification-copy p{font-size:14px}
 #platform-notifications .notification-actions{grid-column:2;justify-content:flex-start;max-width:none}
 #platform-notifications .notification-detail{min-height:44px;padding:9px 14px}
}

/* Shared message footer artwork and existing lobby button skins. */
.notification-checkin-toast{isolation:isolate;overflow:hidden;background-color:#fffdfa;background-image:radial-gradient(ellipse at 15% 120%,#eee5ff 0 48%,transparent 49%),radial-gradient(ellipse at 95% 160%,#ffe5e8 0 58%,transparent 59%),linear-gradient(180deg,#fffdfa,#fff5f4)}
.notification-checkin-toast button{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 14px;border:1px solid transparent;border-radius:12px;background:transparent;box-shadow:inset 0 1px #ffffffbb,0 3px 0 #77718b22;font-weight:400;line-height:1.2;white-space:nowrap}
.notification-checkin-toast button::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:url(/game/platform-art/local-system-dom-v1/enter-desktop@3x-skin.png) center/100% 100% no-repeat;pointer-events:none}
.notification-checkin-toast button:first-of-type{color:white}
.notification-checkin-toast button:last-of-type{width:44px;min-width:44px;padding:0;color:#060758;font-size:20px}
.notification-checkin-toast button:last-of-type::before{filter:grayscale(1) brightness(2) contrast(.25) brightness(1.6)}
.notification-checkin-toast button:hover{filter:brightness(.97)}
.notification-checkin-toast button:active{transform:translateY(1px)}
.notification-checkin-toast button:focus-visible{outline:3px solid #7863ce;outline-offset:2px}
@media(max-width:640px){.notification-checkin-toast button::before{background-image:url(/game/platform-art/local-system-dom-v1/enter-mobile@3x-skin.png)}}
@media(max-width:480px){.notification-checkin-toast{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:10px;padding:14px;width:calc(100vw - 24px)}.notification-checkin-toast>span{grid-column:1/-1}.notification-checkin-toast button:first-of-type{width:100%}}

body .notification-checkin-toast>button:last-of-type{width:44px!important;min-width:44px!important}

/* Shared lavender modal scrollbar. */
.claw-notifications .notification-scroll{scrollbar-width:thin;scrollbar-color:#b89bdc #f4eafa;scrollbar-gutter:stable}
.claw-notifications .notification-scroll::-webkit-scrollbar{width:8px}
.claw-notifications .notification-scroll::-webkit-scrollbar-track{background:#f4eafa;border-radius:8px}
.claw-notifications .notification-scroll::-webkit-scrollbar-thumb{background:#b89bdc;border-radius:8px}

/* Platform-wide scrollbar theme; does not change scroll ownership or gutters. */
html:has(body.platform-enabled),body.platform-enabled,body.platform-enabled *{scrollbar-width:thin!important;scrollbar-color:#b89bdc #f4eafa!important}
html:has(body.platform-enabled)::-webkit-scrollbar,body.platform-enabled ::-webkit-scrollbar{width:8px;height:8px}
html:has(body.platform-enabled)::-webkit-scrollbar-track,body.platform-enabled ::-webkit-scrollbar-track{background:#f4eafa!important;border-radius:8px}
html:has(body.platform-enabled)::-webkit-scrollbar-thumb,body.platform-enabled ::-webkit-scrollbar-thumb{background:#b89bdc!important;border-radius:8px}
html:has(body.platform-enabled)::-webkit-scrollbar-corner,body.platform-enabled ::-webkit-scrollbar-corner{background:#f4eafa}

#platform-notifications .notification-coin-disc{display:grid;place-items:center;padding:0}
#platform-notifications .notification-coin-art{display:block;width:36px;height:36px;max-width:100%;object-fit:contain;margin:0}
@media(max-width:640px){#platform-notifications .notification-coin-art{width:30px;height:30px}}