/*
 * Player notification visuals — owner-editable tokens.
 * Keep notification-specific colors, widths, positions and sizing here rather than app.css.
 */
:root{
  --notification-success-bg:#1f7a46;
  --notification-info-bg:#1769aa;
  --notification-error-bg:#7a2730;
  --notification-on-success:#fff;
  --notification-on-info:#fff;
  --notification-on-error:#fff;
  --notification-unread-bg:color-mix(in srgb,var(--accent) 10%,var(--surface));
  --notification-unread-accent:var(--accent);
  --notification-badge-text:#fff;
  --notification-panel-bg:var(--surface);
  --notification-panel-border:var(--border);
  --notification-preview-width:26rem;
  --notification-toast-width:24rem;
  --notification-modal-width:34rem;
  --notification-kind-neutral:var(--muted);
  --notification-kind-commerce:#326b9b;
  --notification-kind-money:#8a6a13;
  --notification-kind-reward:#6f4aa8;
}

.notification-center{position:relative;flex:0 0 auto}.notification-center>summary{list-style:none}.notification-center>summary::-webkit-details-marker{display:none}.notification-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);min-height:var(--tap);padding:0;border:1px solid var(--notification-panel-border);border-radius:999px;background:var(--notification-panel-bg);cursor:pointer;user-select:none}.notification-bell__icon{font-size:1.1rem;line-height:1}.notification-badge{position:absolute;inset-block-start:-.35rem;inset-inline-end:-.45rem;display:inline-flex;align-items:center;justify-content:center;min-width:1.35rem;min-height:1.35rem;padding:0 .3rem;border:2px solid var(--notification-panel-bg);border-radius:999px;background:var(--notification-unread-accent);color:var(--notification-badge-text);font-size:.7rem;font-weight:800;line-height:1}.notification-badge[hidden]{display:none}

.notification-panel{position:absolute;inset-block-start:calc(100% + .55rem);inset-inline-end:0;z-index:80;width:min(var(--notification-preview-width),calc(100vw - 2rem));max-height:min(70vh,36rem);overflow:auto;overscroll-behavior:contain;border:1px solid var(--notification-panel-border);border-radius:.75rem;background:var(--notification-panel-bg);box-shadow:var(--shadow)}.notification-panel__header{position:sticky;top:0;z-index:1;padding:.8rem 1rem;border-bottom:1px solid var(--notification-panel-border);background:var(--notification-panel-bg)}.notification-list{display:grid;gap:0;margin:0;padding:0;list-style:none}.notification-empty{margin:0;padding:1rem;color:var(--muted)}.notification-panel__history{display:flex;align-items:center;justify-content:center;padding:.7rem 1rem;border-top:1px solid var(--notification-panel-border);background:var(--surface-2);font-weight:700;text-align:center;text-decoration:none}

/* Visual-kind ownership: extend or recolor notification kinds here only. */
.notification-item{--notification-kind-accent:var(--notification-kind-neutral);display:grid;grid-template-columns:auto minmax(0,1fr);gap:.75rem;align-items:start;padding:.85rem 1rem;border-inline-start:.25rem solid var(--notification-kind-accent);border-bottom:1px solid var(--notification-panel-border);background:var(--notification-panel-bg)}.notification-item:last-child{border-bottom:0}.notification-item--neutral{--notification-kind-accent:var(--notification-kind-neutral)}.notification-item--commerce{--notification-kind-accent:var(--notification-kind-commerce)}.notification-item--money{--notification-kind-accent:var(--notification-kind-money)}.notification-item--reward{--notification-kind-accent:var(--notification-kind-reward)}.notification-item.is-unread{background:var(--notification-unread-bg)}.notification-item__icon{display:flex;align-items:center;justify-content:center;width:2rem;min-height:2rem;font-size:1.15rem}.notification-item__body{min-width:0}.notification-item__body p{margin:0}.notification-item__body time{display:block;margin-top:.25rem;color:var(--muted);font-size:.75rem}.notification-item.is-unread .notification-item__body p{font-weight:700}

.notification-history{width:100%;max-width:64rem;margin-inline:auto}.notification-history__header h1{margin-bottom:.25rem}.notification-history__list{margin:0;padding:0;list-style:none;border:1px solid var(--notification-panel-border);border-radius:.75rem;overflow:hidden;background:var(--notification-panel-bg)}.notification-history__item:last-child{border-bottom:0}.notification-history__empty{margin:0;padding:1rem;border:1px solid var(--notification-panel-border);border-radius:.75rem;background:var(--notification-panel-bg);color:var(--muted)}

.notification-toast-stack{position:fixed;z-index:95;inset-inline-end:1rem;inset-block-end:1rem;display:grid;gap:.65rem;width:min(var(--notification-toast-width),calc(100vw - 2rem));max-height:min(60vh,32rem);overflow:auto;overscroll-behavior:contain;pointer-events:none}.notification-toast{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.7rem;align-items:center;margin:0;padding:.8rem .9rem;border-radius:.75rem;box-shadow:var(--shadow);pointer-events:auto;animation:notification-toast-enter .18s ease-out both}.notification-toast p{margin:0;overflow-wrap:anywhere}.notification-toast--success{background:var(--notification-success-bg);color:var(--notification-on-success)}.notification-toast--info{background:var(--notification-info-bg);color:var(--notification-on-info)}.notification-toast__icon{font-weight:800}.notification-toast__dismiss{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);min-height:var(--tap);padding:0;border:0;border-radius:999px;background:transparent;color:inherit;font-size:1.25rem;cursor:pointer}.notification-toast__dismiss:hover{background:color-mix(in srgb,currentColor 14%,transparent)}.notification-toast.is-leaving{animation:notification-toast-exit .16s ease-in forwards}
@keyframes notification-toast-enter{from{opacity:0;transform:translateY(.65rem)}to{opacity:1;transform:translateY(0)}}@keyframes notification-toast-exit{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(.45rem)}}


@media(max-width:48rem){.notification-center{position:static}.notification-panel{inset-inline:1rem;width:auto;max-width:none}}

@media(prefers-reduced-motion:reduce){.notification-toast,.notification-toast.is-leaving{animation:none}}

.notification-error-dialog{width:min(var(--notification-modal-width),calc(100vw - 2rem));max-height:min(80vh,40rem);overflow:auto;padding:1rem;border:1px solid color-mix(in srgb,var(--notification-on-error) 22%,transparent);border-radius:.85rem;background:var(--notification-error-bg);color:var(--notification-on-error);box-shadow:var(--shadow)}.notification-error-dialog::backdrop{background:rgba(15,18,24,.62)}.notification-error-dialog__content{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.85rem;align-items:start}.notification-error-dialog__icon{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:2px solid currentColor;border-radius:999px;font-weight:900}.notification-error-dialog h2{margin:0 0 .45rem;color:inherit}.notification-error-dialog p{margin:.25rem 0;overflow-wrap:anywhere}.notification-error-dialog form{display:flex;justify-content:flex-end;margin-top:1rem}.notification-error-dialog button{min-width:5rem;min-height:var(--tap);border:1px solid currentColor;background:transparent;color:inherit;font-weight:800}.notification-error-dialog button:hover{background:color-mix(in srgb,currentColor 14%,transparent)}