#ao-rate-modal { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); z-index: 210; align-items: center; justify-content: center; padding: var(--spacing-md); overflow-y: auto; }

#ao-rate-modal.open { display: flex; animation: ao-modal-fade 0.2s ease; }

.ao-rate-box { display: flex; flex-direction: column; background: hsl(271, 42%, 8%); border: var(--border-normal) solid var(--color-border); border-radius: var(--radius-4xl); width: 100%; max-width: 440px; min-height: 420px; position: relative; box-shadow: var(--shadow-lg); box-sizing: border-box; max-height: 95vh; max-height: 95dvh; overflow: hidden; animation: ao-modal-rise 0.4s cubic-bezier(0.16, 1, 0.3, 1); }



.ao-rate-header { flex-shrink: 0; display: flex; align-items: center; padding: var(--spacing-mlg) 56px var(--spacing-mlg) var(--spacing-mlg); background: hsl(271, 35%, 13%); border-bottom: var(--border-normal) solid var(--color-border); }
.ao-rate-title { margin: 0; font-size: var(--font-size-sm); line-height: normal; font-weight: var(--font-weight-normal); color: var(--pebble); }
.ao-rate-close { position: absolute; top: var(--spacing-smd); right: var(--spacing-smd); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-full); border: none; background: rgba(237, 237, 237, 0.08); color: var(--pebble); cursor: pointer; flex-shrink: 0; z-index: 3; }
.ao-rate-close:hover { background: rgba(237, 237, 237, 0.16); }


.ao-rate-step { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ao-rate-step[hidden] { display: none; }
.ao-rate-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--spacing-md); padding: var(--spacing-mlg) var(--spacing-mlg) var(--spacing-md); }
.ao-rate-footer { position: relative; flex-shrink: 0; display: flex; flex-direction: column; gap: var(--spacing-md); padding: var(--spacing-md) var(--spacing-mlg) var(--spacing-mlg); background: hsl(271, 42%, 8%); }

.ao-rate-footer::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 28px; pointer-events: none; background: linear-gradient(to bottom, transparent, hsl(271, 42%, 8%)); }

@media (max-width: 640px) {
  #ao-rate-modal { align-items: flex-end; padding: 0; }
  .ao-rate-box {
    max-width: none;
    width: 100%;
    min-height: 0;
    height: 90vh;
    height: 90dvh;
    max-height: 90vh;
    max-height: 90dvh;
    border-radius: var(--radius-4xl) var(--radius-4xl) 0 0;
    border-bottom: none;
  }
}


.ao-rate-modes { display: flex; align-items: center; justify-content: center; gap: var(--spacing-md); }

.ao-rate-mode-wrap { display: inline-flex; align-items: center; }

.ao-rate-help {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  padding: var(--spacing-xl) var(--spacing-2xl);
  background: rgba(24, 13, 34, 0.5);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  border-radius: 0 0 var(--radius-4xl) var(--radius-4xl);
  z-index: 6; pointer-events: none;
}
.ao-rate-help[hidden] { display: none; }
.ao-rate-help-card {
  max-width: 320px; padding: 14px 18px;
  background: rgba(237, 237, 237, 0.05);
  border: 1px solid rgba(237, 237, 237, 0.2);
  border-radius: var(--radius-md);
  backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
}
.ao-rate-help-text {
  margin: 0; color: var(--ivory);
  font-size: var(--font-size-md); line-height: 1.55; font-weight: 500; text-align: center;
}

.ao-rate-help-dimmed .ao-rate-scroll > *:not(#ao-rate-modes),
.ao-rate-help-dimmed .ao-rate-footer {
  filter: blur(3px); pointer-events: none; transition: filter 0.2s ease;
}
.ao-rate-mode { display: inline-flex; align-items: center; gap: 10px; border: none; background: none; color: rgba(237, 237, 237, 0.75); font: inherit; font-size: var(--font-size-sm); line-height: 18px; font-weight: var(--font-weight-medium); cursor: pointer; }
.ao-rate-radio { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(237, 237, 237, 0.3); box-sizing: border-box; flex-shrink: 0; position: relative; }
.ao-rate-mode-active { color: var(--pebble); }
.ao-rate-mode-active .ao-rate-radio { background: var(--ivory); border-color: var(--ivory); }
.ao-rate-mode-active .ao-rate-radio::after { content: ""; position: absolute; inset: 0; background: no-repeat center / 70% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23170D21' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); }
.ao-rate-ep-pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 5px 10px; min-width: 44px; border-radius: var(--radius-full); background: rgba(237, 237, 237, 0.06); color: var(--pebble); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); line-height: 18px; }


.ao-rate-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-smd); }
.ao-rate-section-title { font-size: var(--font-size-md); font-weight: var(--font-weight-medium); color: var(--pebble); }
.ao-rate-aspects-title { font-size: var(--font-size-md); font-weight: var(--font-weight-medium); color: var(--pebble); }
.ao-rate-pts-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-max); background: rgba(237, 237, 237, 0.06); color: var(--pebble); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.ao-rate-pts-star { width: 16px; height: 16px; flex-shrink: 0; display: block; object-fit: contain; }


.ao-rate-stars { --rate-pick: 44px; display: inline-flex; justify-content: center; gap: 10px; color: var(--pebble); align-self: center; }
.ao-rate-slot { position: relative; width: var(--rate-pick); height: var(--rate-pick); flex-shrink: 0; }
.ao-rate-slot .ao-rate-star { width: var(--rate-pick); height: var(--rate-pick); display: block; }
.ao-rate-slot .ao-rate-star[fill="none"] { stroke: rgba(237, 237, 237, 0.4); }
.ao-rate-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0; overflow: hidden; transition: width 0.08s ease; }
.ao-rate-fill .ao-rate-star { width: var(--rate-pick); }
.ao-rate-half { position: absolute; top: 0; height: 100%; width: 50%; z-index: 2; cursor: pointer; }
.ao-rate-half-l { left: 0; }
.ao-rate-half-r { left: 50%; }
.ao-rate-score { text-align: center; font-size: var(--font-size-xs); color: var(--color-text-secondary); min-height: 16px; margin-top: calc(-1 * var(--spacing-sm)); }

@keyframes ao-rate-star-blink { 0% { opacity: 1; } 20% { opacity: 0.3; } 40% { opacity: 1; } 60% { opacity: 0.3; } 100% { opacity: 1; } }
.ao-rate-blink { animation: ao-rate-star-blink 500ms ease-in-out; }


.ao-rate-review-box { border: var(--border-normal) solid rgba(237, 237, 237, 0.08); border-radius: var(--radius-xl); padding: 14px 14px 10px; background: rgba(237, 237, 237, 0.04); }
.ao-rate-review { width: 100%; box-sizing: border-box; resize: none; min-height: 96px; border: none; background: none; color: var(--color-text-primary); font: inherit; font-size: var(--font-size-md); line-height: 1.5; }
.ao-rate-review::placeholder { color: var(--color-text-secondary); }
.ao-rate-review:focus { outline: none; }

.ao-rate-review-toolbar { display: flex; align-items: center; justify-content: space-around; gap: var(--spacing-smd); margin-top: var(--spacing-sm); color: var(--color-text-secondary); }
.ao-rate-tool { display: inline-flex; align-items: center; gap: 6px; border: none; background: none; color: inherit; font: inherit; font-size: var(--font-size-sm); cursor: pointer; padding: 0; }
.ao-rate-tool:hover { color: var(--pebble); }
.ao-rate-tool-aa { font-weight: var(--font-weight-semibold); font-size: var(--font-size-md); }
.ao-rate-spoiler-dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(237, 237, 237, 0.45); box-sizing: border-box; }

.ao-rate-spoiler[aria-pressed="true"] .ao-rate-spoiler-dot { background: var(--color-accent); border-color: var(--color-accent); }
.ao-rate-media-list { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); margin-top: var(--spacing-sm); }
.ao-rate-media-thumb { width: 56px; height: 56px; border-radius: var(--radius-md); overflow: hidden; background: rgba(237, 237, 237, 0.05); }
.ao-rate-media-thumb img, .ao-rate-media-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }


.ao-rate-scrollhint { display: flex; flex-direction: column; align-items: center; padding: var(--spacing-xs) 0; pointer-events: none; }
.ao-rate-hint-caret { width: 16px; height: 16px; color: rgba(237, 237, 237, 0.55); animation: ao-rate-hint-cascade 1.4s ease-in-out infinite; transform: rotate(180deg); }
.ao-rate-hint-caret + .ao-rate-hint-caret { margin-top: -7px; }
.ao-rate-hint-1 { animation-delay: 0s; }
.ao-rate-hint-2 { animation-delay: 0.2s; }
.ao-rate-hint-3 { animation-delay: 0.4s; }
.ao-rate-hint-up .ao-rate-hint-caret { transform: rotate(180deg); }
.ao-rate-hint-up .ao-rate-hint-1 { animation-delay: 0.4s; }
.ao-rate-hint-up .ao-rate-hint-3 { animation-delay: 0s; }
@keyframes ao-rate-hint-cascade { 0%, 60%, 100% { opacity: 0.2; } 30% { opacity: 1; } }


.ao-rate-more { border: var(--border-normal) solid var(--color-border); border-radius: var(--radius-lg); background: rgba(237, 237, 237, 0.05); }
.ao-rate-more-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-smd); min-height: 50px; padding: var(--spacing-sm) var(--spacing-mlg) var(--spacing-sm) 15px; cursor: pointer; list-style: none; }
.ao-rate-more-summary::-webkit-details-marker { display: none; }
.ao-rate-more-heads { display: flex; flex-direction: column; line-height: 1.25; }
.ao-rate-more-title { font-size: var(--font-size-sm); line-height: 18px; font-weight: var(--font-weight-medium); color: var(--pebble); }
.ao-rate-more-sub { font-size: var(--font-size-xs); line-height: 16px; color: rgba(237, 237, 237, 0.55); }
.ao-rate-more-right { display: inline-flex; align-items: center; gap: var(--spacing-sm); color: var(--color-text-secondary); }

.ao-rate-more-chevron { transition: transform 0.15s ease; transform: rotate(90deg); }
.ao-rate-more[open] .ao-rate-more-chevron { transform: rotate(-90deg); }
.ao-rate-more-body { display: flex; flex-direction: column; gap: var(--spacing-md); padding: 0 var(--spacing-mlg) 15px 15px; }
.ao-rate-field { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-smd); min-height: 36px; padding: var(--spacing-sm) 0; font-size: var(--font-size-md); font-weight: var(--font-weight-medium); color: var(--pebble); }
.ao-rate-field input[type="date"] { padding: 6px var(--spacing-smd); border-radius: var(--radius-max); border: 0; background: rgba(237, 237, 237, 0.06); color: var(--pebble); font: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; color-scheme: dark; }


.ao-rate-radar { display: flex; justify-content: center; }
.ao-rate-radar-svg { width: 140px; height: 140px; }
.ao-rate-radar-grid { fill: none; stroke: rgba(237, 237, 237, 0.15); stroke-width: 0.5; }
.ao-rate-radar-axis { stroke: rgba(237, 237, 237, 0.15); stroke-width: 0.5; }
.ao-rate-radar-data { fill: var(--color-accent); fill-opacity: 0.18; stroke: var(--color-accent); stroke-width: 1.5; }
.ao-rate-radar-label { font-size: 8px; fill: var(--color-text-secondary); }
.ao-rate-attr-row { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); padding: 3px 0; }
.ao-rate-attr-label { font-size: var(--font-size-md); font-weight: var(--font-weight-medium); color: var(--pebble); }
.ao-rate-attr-stars { --attr-star: 32px; display: inline-flex; gap: 6px; color: var(--pebble); flex-shrink: 0; }
.ao-rate-attr-slot { position: relative; width: var(--attr-star); height: var(--attr-star); }
.ao-rate-attr-slot .ao-rate-astar { width: var(--attr-star); height: var(--attr-star); display: block; stroke: rgba(237, 237, 237, 0.4); }
.ao-rate-attr-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0; overflow: hidden; transition: width 0.08s ease; }
.ao-rate-attr-fill .ao-rate-astar { width: var(--attr-star); stroke: none; }
.ao-rate-attr-half { width: 50%; cursor: pointer; }


.ao-rate-progress { display: flex; align-items: center; gap: var(--spacing-smd); }

.ao-rate-progress-track { position: relative; flex: 1; height: 10px; border-radius: var(--radius-max); background: rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.18); }
.ao-rate-progress-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: var(--radius-max) 0 0 var(--radius-max); background: linear-gradient(90deg, #a1862e 0%, #fdd835 5%, #fdd835 100%); transition: width 0.35s ease; }

.ao-rate-progress-mark { position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 1; width: 22px; height: 22px; border-radius: var(--radius-max); background: #463d4e; color: rgba(237, 237, 237, 0.55); font-size: var(--font-size-xs); line-height: 14px; font-weight: var(--font-weight-bold); display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.35s ease, color 0.35s ease; }
.ao-rate-progress-mark-reached { background: #fdd835; color: var(--charcoal); }

.ao-rate-progress-rays { position: absolute; bottom: calc(100% - 2px); left: 50%; width: 26px; height: 10px; transform: translateX(-50%); pointer-events: none; animation: ao-rate-sunshine 1.6s ease-in-out infinite; }
@keyframes ao-rate-sunshine {
  0%, 100% { opacity: 0.75; transform: translateX(-50%) scale(0.96); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.04); }
}

.ao-rate-progress-mark-last { transform: translate(-100%, -50%); }

.ao-rate-progress-verified { position: absolute; bottom: calc(100% + 22px); left: 50%; transform: translateX(-50%); padding: 3px 10px; border-radius: var(--radius-full); background: linear-gradient(180deg, #ffe454 0%, #fdd835 100%); color: var(--charcoal); font-size: 11px; line-height: 1.3; font-weight: 700; letter-spacing: 0.2px; white-space: nowrap; box-shadow: 0 2px 8px rgba(253, 216, 53, 0.35); pointer-events: none; animation: ao-rate-verified-pop 0.4s ease-out; }

.ao-rate-progress-verified[hidden] { display: none; }
@keyframes ao-rate-verified-pop {
  from { opacity: 0; filter: blur(6px); transform: translateX(-50%) translateY(4px) scale(0.85); }
  to { opacity: 1; filter: blur(0); transform: translateX(-50%) translateY(0) scale(1); }
}
.ao-rate-progress-total { flex-shrink: 0; }

.ao-rate-progress-total .ao-rate-pts-pill { background: transparent; padding: 0; gap: var(--spacing-xs); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--pebble); }


.ao-rate-continue { width: 100%; height: 50px; border-radius: var(--radius-full); background: var(--pebble); color: var(--color-button-text); border: none; font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); cursor: pointer; transition: opacity 0.15s ease; }
.ao-rate-continue:hover:not(:disabled) { opacity: 0.85; }
.ao-rate-continue:disabled { opacity: 0.4; cursor: default; }


.ao-rate-captcha-q { margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--pebble); text-align: center; }
.ao-rate-captcha-opts { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.ao-rate-captcha-opt { display: flex; align-items: center; gap: var(--spacing-md); text-align: left; padding: var(--spacing-md); border: var(--border-normal) solid rgba(237, 237, 237, 0.1); border-radius: var(--radius-lg); background: rgba(237, 237, 237, 0.05); color: var(--color-text-primary); font: inherit; font-size: var(--font-size-sm); cursor: pointer; }
.ao-rate-captcha-opt:hover { background: rgba(237, 237, 237, 0.1); border-color: rgba(237, 237, 237, 0.2); }
.ao-rate-captcha-opt-active { background: var(--pebble); border-color: var(--pebble); color: var(--color-button-text); }
.ao-rate-captcha-tag { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-md); background: rgba(0, 0, 0, 0.35); color: var(--pebble); font-weight: var(--font-weight-bold); flex-shrink: 0; }
.ao-rate-captcha-opt-active .ao-rate-captcha-tag { background: var(--charcoal); color: var(--pebble); }

.ao-rate-captcha-status { font-size: var(--font-size-sm); color: #f04141; text-align: center; margin: 0; }
.ao-rate-captcha-status:empty { display: none; }
.ao-rate-captcha-actions { display: flex; align-items: center; gap: var(--spacing-smd); }
.ao-rate-skip { border: none; background: none; color: var(--pebble); font: inherit; font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); cursor: pointer; padding: 0 var(--spacing-md); flex: 3 1 0; min-width: 0; }
.ao-rate-captcha-actions .ao-rate-continue { flex: 7 1 0; min-width: 0; }


.ao-rate-picker { display: flex; flex-direction: column; background: hsl(271, 42%, 8%); border: var(--border-normal) solid rgba(237, 237, 237, 0.1); border-radius: var(--radius-2xl); width: 100%; max-width: 440px; max-height: calc(100vh - 2 * var(--spacing-md)); max-height: calc(100dvh - 2 * var(--spacing-md)); box-shadow: var(--shadow-lg); box-sizing: border-box; overflow: hidden; text-align: left; }

.ao-rate-picker-head { position: relative; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; padding: var(--spacing-md) var(--spacing-mlg); background: hsl(271, 35%, 13%); border-bottom: var(--border-normal) solid var(--color-border); }
.ao-rate-picker-toprow { display: flex; justify-content: center; }
.ao-rate-picker-titlestack { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ao-rate-picker-title { margin: 0; font-size: var(--font-size-base); line-height: 20px; font-weight: var(--font-weight-medium); color: var(--pebble); }
.ao-rate-picker-sub { margin: 0; font-size: var(--font-size-sm); line-height: 18px; font-weight: var(--font-weight-medium); color: rgba(237, 237, 237, 0.8); }
.ao-rate-picker-head .ao-rate-close { position: absolute; top: var(--spacing-sm); right: var(--spacing-md); }

.ao-rate-picker-pills { display: flex; flex-wrap: wrap; gap: 5px; max-height: 74px; overflow-y: auto; overscroll-behavior: contain; }
.ao-rate-picker-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--spacing-sm); border-radius: var(--radius-full); border: 0; background: rgba(237, 237, 237, 0.1); color: var(--pebble); font: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: 16px; white-space: nowrap; cursor: pointer; }
.ao-rate-picker-pill:hover { background: rgba(237, 237, 237, 0.12); }
.ao-rate-picker-pill-active { background: var(--pebble); border-color: var(--pebble); color: var(--color-button-text); }
.ao-rate-picker-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

.ao-rate-picker-sentinel { height: 1px; flex: 0 0 auto; }
.ao-rate-picker-loading { padding: var(--spacing-lg); text-align: center; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.ao-rate-picker-row { display: flex; align-items: center; gap: var(--spacing-md); width: 100%; text-align: left; padding: var(--spacing-sm) var(--spacing-lg); border: none; border-top: var(--border-normal) solid var(--color-border); background: none; color: var(--pebble); font: inherit; font-size: var(--font-size-sm); cursor: pointer; }
.ao-rate-picker-row:hover { background: rgba(237, 237, 237, 0.04); }
.ao-rate-picker-epnum { font-weight: var(--font-weight-medium); min-width: 50px; flex-shrink: 0; }
.ao-rate-picker-eptitle { color: var(--pebble); }
.ao-rate-picker-row-active .ao-rate-picker-eptitle { font-weight: var(--font-weight-bold); }

button.ao-rate-ep-pill { cursor: pointer; }



.ao-cel-overlay {
  --font-display: var(--font-montra), sans-serif;
  --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px;
  --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 30px; --font-size-4xl: 36px;
  --spacing-xs: 5px; --spacing-sm: 8px; --spacing-smd: 12px; --spacing-md: 16px;
  --spacing-mlg: 20px; --spacing-lg: 24px; --spacing-xl: 32px; --spacing-2xl: 40px;
  --radius-2xl: 21px; --radius-new: 10px;
  --color-text-secondary: rgba(237, 237, 237, 0.8); --color-text-tertiary: rgba(237, 237, 237, 0.5);
  --color-border: rgba(237, 237, 237, 0.2); --color-surface: rgba(237, 237, 237, 0.05);
  --gold: hsl(49, 98%, 60%);
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--spacing-md); background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); z-index: 220; opacity: 0; transition: opacity 0.2s ease; overflow-y: auto;
}
.ao-cel-overlay.open { opacity: 1; }

.ao-cel-box { position: relative; background: hsl(271, 40%, 11%); border: var(--border-normal) solid rgba(237, 237, 237, 0.1); border-radius: var(--radius-2xl); padding: var(--spacing-mlg); width: 100%; max-width: 440px; box-shadow: var(--shadow-lg); text-align: center; box-sizing: border-box; max-height: calc(100vh - 2 * var(--spacing-md)); max-height: calc(100dvh - 2 * var(--spacing-md)); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.ao-cel-close { position: absolute; top: var(--spacing-md); right: var(--spacing-md); z-index: 2; width: 30px; height: 30px; border-radius: var(--radius-full); border: none; background: rgba(237, 237, 237, 0.08); color: var(--pebble); font-size: 15px; line-height: 1; cursor: pointer; }
.ao-cel-close:hover { background: rgba(237, 237, 237, 0.16); }

.ao-cel-hero { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-xl); }
.ao-cel-emoji { width: 100px; height: 100px; object-fit: contain; display: block; }
.ao-cel-title { font-family: var(--font-display); font-size: var(--font-size-3xl); line-height: 1; text-transform: uppercase; letter-spacing: 1px; margin: 0; color: var(--pebble); }
.ao-cel-oshi { display: flex; align-items: center; gap: var(--spacing-smd); min-height: 86px; padding: var(--spacing-md); border: 2px solid var(--color-border); border-radius: var(--radius-lg); box-sizing: border-box; }
.ao-cel-oshi-icon { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; }
.ao-cel-oshi-left { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.ao-cel-oshi-label { font-size: var(--font-size-md); line-height: 20px; font-weight: var(--font-weight-medium); color: var(--gold); }
.ao-cel-oshi-total { font-family: var(--font-display); font-size: var(--font-size-3xl); line-height: 30px; text-transform: uppercase; color: var(--pebble); }
.ao-cel-oshi-plus { margin-left: auto; padding-left: var(--spacing-sm); font-family: var(--font-display); font-size: var(--font-size-3xl); line-height: 30px; text-transform: uppercase; color: var(--gold); }
.ao-cel-bonus { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin: var(--spacing-sm) 0 0; }

.ao-cel-crest { display: flex; align-items: center; gap: var(--spacing-mlg); width: 100%; box-sizing: border-box; margin-top: var(--spacing-md); padding: var(--spacing-md); border: var(--border-normal) solid var(--color-border); border-radius: var(--radius-2xl); text-align: left; }
.ao-cel-crest-img { flex-shrink: 0; width: 48px; height: 56px; object-fit: contain; }
.ao-cel-crest-body { display: flex; flex-direction: column; gap: var(--spacing-smd); flex: 1 1 auto; min-width: 0; }
.ao-cel-crest-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: center; }
.ao-cel-crest-name { font-family: var(--font-display); font-size: var(--font-size-xl); line-height: 26px; color: var(--pebble); }
.ao-cel-crest-msg { font-family: var(--font-body); font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); line-height: 18px; color: var(--color-text-secondary); }
.ao-cel-crest-track { position: relative; width: 100%; padding: 0 var(--spacing-sm); box-sizing: border-box; }
.ao-cel-crest-bar { position: relative; height: 6px; border-radius: var(--radius-full); background: rgba(237, 237, 237, 0.15); }
.ao-cel-crest-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: var(--radius-full); background: var(--pebble); width: 0; transition: width 1s cubic-bezier(0.16, 1, 0.3, 1); }
.ao-cel-crest-node { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box; background: var(--charcoal); border: 2px solid rgba(237, 237, 237, 0.15); transform: translate(-50%, -50%); transition: background 0.3s ease, border-color 0.3s ease; }
.ao-cel-crest-node-on { background: var(--pebble); border-color: var(--pebble); }
.ao-cel-crest-labels { display: flex; justify-content: space-between; width: 100%; margin-top: var(--spacing-sm); }
.ao-cel-crest-label { font-family: var(--font-body); font-weight: var(--font-weight-medium); font-size: var(--font-size-xs); line-height: 14px; color: var(--color-text-tertiary); }
.ao-cel-crest-label-on { color: var(--pebble); }
.ao-cel-foot { margin: var(--spacing-lg) 0 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--pebble); }
.ao-cel-continue { margin-top: var(--spacing-sm); width: 100%; height: 50px; border-radius: var(--radius-full); background: var(--pebble); color: var(--color-button-text); border: none; font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); cursor: pointer; }
.ao-cel-continue:hover { opacity: 0.85; }

@media (max-width: 640px) {
  
  .ao-cel-overlay { padding: 0; align-items: stretch; }
  .ao-cel-box {
    max-width: none;
    width: 100%;
    max-height: none;
    border: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing-md);
  }
}


.ao-cel-tone-2x { --cel-bonus-grad: linear-gradient(129.52deg, #eb0901 -20%, #f97316 18%, #fdd835 72%); }
.ao-cel-tone-3x { --cel-bonus-grad: linear-gradient(105.98deg, #fb06f5 0%, #fdd835 145.59%); }
.ao-cel-bonusv .ao-cel-box { background: var(--black); }

.ao-cel-star-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(140px, 28dvh, 260px);
  margin-bottom: var(--spacing-md);
}
.ao-cel-star-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  max-width: none;
  object-fit: contain;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}
.ao-cel-star-img {
  position: relative;
  width: auto;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  animation: aoCelStarFloat 4.5s ease-in-out infinite;
}
@keyframes aoCelStarFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.ao-cel-bonus-card {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(var(--black), var(--black)) padding-box,
    var(--cel-bonus-grad) border-box;
}
.ao-cel-bonus-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-md) 0;
  background: var(--cel-bonus-grad);
}
.ao-cel-bonus-mult,
.ao-cel-bonus-unit {
  font-family: var(--font-body);
  font-size: clamp(52px, 26cqi, 100px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--charcoal);
}
.ao-cel-bonus-mult { font-weight: 800; }
.ao-cel-bonus-unit { font-weight: 200; }
.ao-cel-bonus-strip {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-mlg);
  width: 100%;
  box-sizing: border-box;
  padding: var(--spacing-smd) var(--spacing-smd) var(--spacing-md);
}
.ao-cel-bonus-delta {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-left: auto;
  padding-left: var(--spacing-sm);
}
.ao-cel-bonus-delta-val {
  font-family: var(--font-display);
  font-size: var(--font-size-3xl);
  line-height: 30px;
  text-transform: uppercase;
  color: var(--gold);
}
.ao-cel-bonus-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  border-radius: var(--radius-max);
  background: var(--gold);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--font-size-xl);
  line-height: 1;
  color: var(--charcoal);
}


@keyframes aoCelBoxIn { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes aoCelHeroIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes aoCelStarIn { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: scale(1); } }
@keyframes aoCelRiseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

.ao-cel-points .ao-cel-box { animation: aoCelBoxIn 0.5s cubic-bezier(0.22, 1.12, 0.36, 1) both; }
.ao-cel-points .ao-cel-hero { animation: aoCelHeroIn 0.4s ease-out both; }
.ao-cel-points .ao-cel-star-stage { animation: aoCelStarIn 0.5s ease-out both; }
.ao-cel-points .ao-cel-oshi,
.ao-cel-points .ao-cel-bonus-card { animation: aoCelRiseIn 0.4s ease-out both; animation-delay: 0.45s; }
.ao-cel-points .ao-cel-crest { animation: aoCelRiseIn 0.4s ease-out both; animation-delay: 1.6s; }

@media (prefers-reduced-motion: reduce) {
  .ao-cel-points .ao-cel-box,
  .ao-cel-points .ao-cel-hero,
  .ao-cel-points .ao-cel-star-stage,
  .ao-cel-points .ao-cel-oshi,
  .ao-cel-points .ao-cel-bonus-card,
  .ao-cel-points .ao-cel-crest { animation: none; }
}


.ao-share-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: rgba(237, 237, 237, 0.05); margin-bottom: var(--spacing-lg); }
.ao-share-cover { width: 100%; height: 160px; object-fit: cover; display: block; opacity: 0.6; }
.ao-share-logo { position: absolute; top: var(--spacing-md); left: var(--spacing-md); width: 96px; height: auto; }
.ao-share-body { padding: var(--spacing-lg); text-align: left; }
.ao-share-overline { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 1px; color: var(--color-text-secondary); margin: 0 0 4px; }
.ao-share-titleline { font-family: var(--font-display); font-size: var(--font-size-lg); margin: 0 0 var(--spacing-sm); color: var(--pebble); }
.ao-share-review { font-size: var(--font-size-sm); color: var(--pebble); margin: 0 0 var(--spacing-md); line-height: 1.5; }
.ao-share-stars { display: inline-flex; gap: 2px; color: var(--pebble); margin-bottom: var(--spacing-md); }
.ao-share-stars .ao-rate-attr-slot { width: 24px; height: 24px; }
.ao-share-stars .ao-rate-astar { width: 24px; height: 24px; }
.ao-share-stars .ao-rate-attr-fill .ao-rate-astar { width: 24px; }
.ao-share-cta { display: inline-block; font-size: var(--font-size-sm); color: var(--color-primary, #ffc300); text-decoration: none; }
.ao-share-actions { display: flex; gap: var(--spacing-md); }
.ao-share-skip, .ao-share-btn { flex: 1; height: 44px; border-radius: var(--radius-full); font: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); cursor: pointer; }
.ao-share-skip { background: transparent; border: var(--border-normal) solid var(--color-border); color: var(--color-text-primary); }
.ao-share-btn { background: var(--pebble); border: none; color: var(--color-button-text); }
.ao-share-snooze { display: flex; align-items: center; gap: var(--spacing-sm); justify-content: center; margin-top: var(--spacing-md); font-size: var(--font-size-xs); color: var(--color-text-secondary); cursor: pointer; }