/* The character panel (Settings › Quest Boxes) and the quest-box opening moment. PublicGlobe glass: navy, cyan, amber. */
.ch-card { display: grid; gap: 14px; margin-bottom: 18px; padding: 16px; border: 1px solid #1f6f96; border-radius: 14px;
  background: linear-gradient(160deg, rgba(11, 44, 66, .7), rgba(4, 16, 29, .9)); color: #e8eef5; }
.ch-hero { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.ch-portrait { border: 1px solid rgba(54, 214, 255, .35); border-radius: 12px; overflow: hidden; line-height: 0; box-shadow: 0 0 24px rgba(54, 214, 255, .15); }
.ch-avatar.is-live .ch-figure { animation: ch-breathe 4s ease-in-out infinite; transform-origin: 100px 240px; }
.ch-avatar.is-live .ch-slot-aura, .ch-avatar.is-live .ch-slot-backdrop { animation: ch-shimmer 6s ease-in-out infinite; }
@keyframes ch-breathe { 50% { transform: translateY(-2px) scaleY(1.008); } }
@keyframes ch-shimmer { 50% { opacity: .75; } }
.ch-level { display: flex; align-items: baseline; gap: 10px; font-family: "JetBrains Mono", ui-monospace, monospace; }
.ch-level span { font-size: 11px; letter-spacing: .24em; color: #8cddfb; }
.ch-level strong { font-size: 34px; color: #ffb547; line-height: 1; }
.ch-level small { color: #9fb4c8; font-size: 12px; }
.ch-xp { height: 6px; margin: 8px 0 12px; background: rgba(255, 255, 255, .08); border-radius: 4px; overflow: hidden; }
.ch-xp i { display: block; height: 100%; background: linear-gradient(90deg, #36d6ff, #ffb547); }
.ch-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ch-stats li { display: grid; grid-template-columns: 34px 96px 1fr 30px; gap: 8px; align-items: center; font-size: 12px; }
.ch-stats b { font-family: "JetBrains Mono", ui-monospace, monospace; color: #ffb547; }
.ch-stats span { color: #9fb4c8; }
.ch-stats i { height: 6px; background: rgba(255, 255, 255, .08); border-radius: 3px; overflow: hidden; }
.ch-stats em { display: block; height: 100%; background: #36d6ff; }
.ch-stats strong { text-align: right; }
.ch-note, .ch-empty { margin: 8px 0 0; color: #9fb4c8; font-size: 12px; }
.ch-tabs { display: flex; gap: 6px; border-bottom: 1px solid rgba(54, 214, 255, .2); }
.ch-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; color: #9fb4c8; padding: 8px 10px; font: 600 12px/1 system-ui; letter-spacing: .14em; cursor: pointer; }
.ch-tabs button[aria-selected="true"] { color: #e8eef5; border-color: #36d6ff; }
.ch-tabs b { background: #ffb547; color: #0a1626; border-radius: 9px; padding: 1px 6px; margin-left: 4px; }
.ch-slot-row h4 { margin: 10px 0 6px; font: 600 12px/1 system-ui; letter-spacing: .12em; color: #8cddfb; text-transform: uppercase; }
.ch-slot-row small { color: #9fb4c8; letter-spacing: 0; }
.ch-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.ch-tile { display: grid; justify-items: center; gap: 4px; width: 86px; padding: 6px; border: 1px solid var(--rarity); border-radius: 10px; background: rgba(4, 16, 29, .8); color: #e8eef5;
  font-size: 10px; line-height: 1.2; cursor: pointer; text-align: center; }
.ch-tile.is-on { box-shadow: 0 0 0 2px var(--rarity), 0 0 18px var(--rarity); }
.ch-tile svg { border-radius: 6px; }
.ch-boxes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.ch-boxes li { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; padding: 8px; border: 1px solid rgba(54, 214, 255, .25); border-radius: 10px; }
.ch-boxes img { width: 52px; height: 52px; object-fit: contain; }
.ch-boxes small { display: block; color: #9fb4c8; }
.ch-btn { border: 1px solid #1f6f96; background: #0b2c42; color: #e8eef5; border-radius: 8px; padding: 8px 14px; font: 700 12px/1 system-ui; letter-spacing: .12em; cursor: pointer; }
.ch-btn.ch-primary { background: linear-gradient(180deg, #1f6f96, #0b2c42); border-color: #36d6ff; }
.ch-btn:disabled { opacity: .5; cursor: progress; }
.ch-signin { padding: 16px; border: 1px dashed #1f6f96; border-radius: 12px; margin-bottom: 16px; color: #e8eef5; }
.ch-signin p { color: #9fb4c8; }
.ch-error { color: #ff8a8a; font-size: 12px; }

/* opening */
dialog.ch-open { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; color: inherit; }
dialog.ch-open::backdrop { background: transparent; }
.ch-open { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, rgba(11, 44, 66, .85), rgba(2, 6, 12, .96)); }
.ch-open-stage { position: relative; width: min(420px, 92vw); display: grid; justify-items: center; text-align: center; color: #e8eef5; }
.ch-box { width: 210px; height: 210px; object-fit: contain; filter: drop-shadow(0 0 22px var(--rarity)); transition: transform .4s, opacity .4s; }
.ch-open.is-shaking .ch-box { animation: ch-shake 1.3s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes ch-shake { 10%, 90% { transform: translateX(-2px) rotate(-1deg); } 20%, 80% { transform: translateX(4px) rotate(2deg); }
  30%, 50%, 70% { transform: translateX(-7px) rotate(-4deg) scale(1.03); } 40%, 60% { transform: translateX(7px) rotate(4deg) scale(1.06); } 100% { transform: scale(1.12); } }
.ch-open.is-bursting .ch-box { transform: scale(1.5); opacity: 0; }
.ch-rays { position: absolute; top: 105px; left: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; opacity: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, var(--rarity) 0 6deg, transparent 6deg 20deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 62%); mask: radial-gradient(circle, #000 18%, transparent 62%); }
.ch-open.is-bursting .ch-rays { opacity: .55; animation: ch-spin 12s linear infinite; transition: opacity .3s; }
@keyframes ch-spin { to { transform: rotate(360deg); } }
.ch-burst { position: absolute; top: 105px; left: 50%; pointer-events: none; }
.ch-burst i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--rarity); opacity: 0; }
.ch-open.is-bursting .ch-burst i { animation: ch-spark .9s ease-out forwards; }
@keyframes ch-spark { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--d) - 60px)); } }
.ch-open.is-bursting::after { content: ""; position: fixed; inset: 0; background: #fff; opacity: 0; animation: ch-flash .45s ease-out; pointer-events: none; }
@keyframes ch-flash { 20% { opacity: .55; } 100% { opacity: 0; } }
.ch-reveal { position: relative; display: grid; justify-items: center; gap: 10px; margin-top: -190px; animation: ch-rise .5s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes ch-rise { from { opacity: 0; transform: translateY(30px) scale(.85); } }
.ch-rarity { position: relative; z-index: 1; padding: 4px 10px; border-radius: 12px; background: rgba(2, 6, 12, .85); font: 700 12px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .24em; color: var(--rarity); text-transform: uppercase; }
.ch-item-preview { border: 2px solid var(--rarity); border-radius: 14px; overflow: hidden; line-height: 0; box-shadow: 0 0 40px var(--rarity); }
.ch-item-name { font-size: 22px; }
.ch-dup { color: #9fb4c8; }
.ch-open-actions { display: flex; gap: 8px; margin-top: 6px; }
@media (max-width: 640px) {
  .ch-hero { grid-template-columns: 1fr; justify-items: center; }
  .ch-sheet { width: 100%; }
  .ch-stats li { grid-template-columns: 34px 84px 1fr 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-avatar .ch-figure, .ch-open * { animation: none !important; transition: none !important; }
}

/* rewards */
.ch-title { margin: -6px 0 6px; font: 600 12px/1.2 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .18em; text-transform: uppercase; color: #8cddfb; }
.ch-flame-inline { color: #ffb547; }
.ch-rewards { display: grid; gap: 12px; margin-top: 10px; }
.ch-streak, .ch-next { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid rgba(54, 214, 255, .25); border-radius: 10px; }
.ch-streak strong, .ch-next strong { display: block; font: 700 12px/1 system-ui; letter-spacing: .14em; }
.ch-streak small, .ch-next small { color: #9fb4c8; }
.ch-flame { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font: 700 20px/1 "JetBrains Mono", monospace; color: #9fb4c8;
  background: rgba(255, 255, 255, .06); }
.ch-flame.is-lit { color: #0a1626; background: radial-gradient(circle at 50% 70%, #ffd27a, #ff8a3d); box-shadow: 0 0 18px rgba(255, 138, 61, .6); animation: ch-flicker 1.6s ease-in-out infinite; }
@keyframes ch-flicker { 50% { box-shadow: 0 0 26px rgba(255, 181, 71, .8); transform: scale(1.04); } }
.ch-rewards h4 { margin: 4px 0 0; font: 600 12px/1 system-ui; letter-spacing: .12em; color: #8cddfb; }
.ch-rewards h4 small { color: #9fb4c8; letter-spacing: 0; }
.ch-badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.ch-badge { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; padding: 8px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; opacity: .7; }
.ch-badge.is-earned { opacity: 1; border-color: #ffb547; box-shadow: 0 0 12px rgba(255, 181, 71, .2); }
.ch-badge b { font-size: 20px; color: #ffb547; }
.ch-badge strong { display: block; font-size: 13px; }
.ch-badge small { display: block; color: #9fb4c8; font-size: 11px; }
.ch-badge i { display: block; height: 4px; margin-top: 5px; background: rgba(255, 255, 255, .08); border-radius: 2px; overflow: hidden; }
.ch-badge em { display: block; height: 100%; background: linear-gradient(90deg, #36d6ff, #ffb547); }
.ch-badge > span { font: 600 11px/1 "JetBrains Mono", monospace; color: #9fb4c8; }
@media (prefers-reduced-motion: reduce) { .ch-flame.is-lit { animation: none; } }

/* age question after sign-in (static/age-gate.js) */
dialog.age-gate { max-width: 460px; border: 1px solid #1f6f96; border-radius: 14px; padding: 22px 24px; color: #e8eef5;
  background: linear-gradient(160deg, #0b2c42, #04101d); }
dialog.age-gate::backdrop { background: rgba(2, 6, 12, .8); }
.age-gate h2 { margin: 0 0 10px; font-size: 20px; }
.age-gate p { margin: 0 0 10px; line-height: 1.5; }
.age-gate-note { color: #9fb4c8; font-size: 13px; }
.age-gate-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.age-gate-actions button { border: 1px solid #1f6f96; background: #0b2c42; color: #e8eef5; border-radius: 8px; padding: 10px 14px; font: 600 14px/1 system-ui; cursor: pointer; }
.age-gate-actions .age-gate-yes { background: linear-gradient(180deg, #1f6f96, #0b2c42); border-color: #36d6ff; }
.age-gate-error { color: #ff8a8a; }