/* Preview-only transforms: the front canvas remains the untouched PNG source. */
.world-ui .share-preview.card-inspector { padding:0; border:0; background:transparent; box-shadow:none; min-width:0; max-width:420px; width:100%; }
.card-stage { position:relative; width:100%; aspect-ratio:4/5; perspective:1100px; overflow:hidden; border-radius:24px; touch-action:none; user-select:none; -webkit-user-select:none; cursor:grab; outline:none; background:radial-gradient(ellipse at 50% 70%,#25375f18,transparent 70%); }
.card-stage:focus-visible { outline:3px solid #778bd0; outline-offset:-3px; }
.card-stage.is-dragging { cursor:grabbing; }
.card-object { position:absolute; inset:0; transform-style:preserve-3d; transform:scale(.88); transform-origin:50% 50%; }
.card-object::before,.card-object::after { content:''; position:absolute; top:var(--card-side-top); height:var(--card-side-height); width:4px; background:linear-gradient(90deg,#7e94b5,#d6e6e9,#324358); }
.card-object::before { left:var(--physical-inset-x); transform-origin:left center; transform:translateZ(2px) rotateY(90deg); }
.card-object::after { right:var(--physical-inset-x); transform-origin:right center; transform:translateZ(-2px) rotateY(90deg); }
.card-stage.is-dragging .card-object { will-change:transform; }
.card-face { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; background:transparent; }
.card-front { transform:translateZ(2px); }
.card-back { transform:rotateY(180deg) translateZ(2px); }
.share-preview.card-inspector .card-face canvas { display:block; width:100%; height:100%; border-radius:0; box-shadow:none; pointer-events:none; }
.card-foil { position:absolute; inset:var(--foil-inset); border-radius:var(--foil-radius); padding:var(--foil-width); pointer-events:none; overflow:hidden; opacity:var(--foil-mix,0); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.card-foil-spectrum { position:absolute; inset:-45%; background:var(--foil-spectrum); transform:rotate(var(--foil-offset,0deg)); }
.card-foil::after { content:''; position:absolute; inset:0; border-radius:inherit; background:repeating-linear-gradient(43deg,#fff7 0 1px,transparent 1px 4px),repeating-linear-gradient(-40deg,#20244b4d 0 1px,transparent 1px 7px); opacity:.2; }
.card-prism-layer { position:absolute; inset:0; background:linear-gradient(var(--holo-angle),transparent 31%,#73edee88 41%,#ffffffe6 49%,#e5b4fb99 54%,transparent 64%),radial-gradient(circle at var(--holo-shift-x) var(--holo-shift-y),#fff 0,transparent 28%); background-size:160% 160%; background-position:var(--holo-shift-x) var(--holo-shift-y); opacity:var(--prism-opacity); }
.card-glow-layer { position:absolute; inset:1%; border-radius:var(--foil-radius); padding:4%; pointer-events:none; background:radial-gradient(ellipse at var(--glow-x) var(--glow-y),#87e6f5cc 0%,#bd8deba6 32%,transparent 70%),var(--foil-spectrum); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; filter:blur(8px); opacity:var(--glow-opacity); }
.card-holo-metal { position:absolute; inset:var(--foil-inset); border-radius:var(--foil-radius); border:1px solid #d6fcffe0; box-shadow:0 0 3px #a5e7f3aa,inset 0 0 2px #dad2ff88,0 15px 22px #11203740; filter:brightness(var(--edge-brightness)); pointer-events:none; }
.card-inner-separator { position:absolute; inset:var(--separator-inset); border-radius:var(--separator-radius); border:1px solid #030815dc; pointer-events:none; }
.card-reflection-layer { position:absolute; inset:var(--separator-inset); border-radius:var(--separator-radius); pointer-events:none; opacity:calc(var(--holo-intensity) * .11); background:linear-gradient(var(--holo-angle),transparent 20%,#7ce5f54d 43%,#e3b4f438 49%,transparent 60%); background-size:160% 160%; background-position:var(--holo-shift-x) var(--holo-shift-y); }
.card-glint { position:absolute; inset:var(--separator-inset); border-radius:var(--separator-radius); pointer-events:none; opacity:var(--card-light-opacity,0); background:radial-gradient(ellipse at var(--card-light-x,50%) var(--card-light-y,50%),#edf5ff,transparent 62%),linear-gradient(var(--card-light-angle,110deg),transparent 28%,#dbeaff55 48%,transparent 67%); }
/* Soft pearl result only; achievement skins retain their existing materials. */
.card-stage[data-kind='result'] .card-inner-separator { border-color:#afa3c55c; box-shadow:0 1px 2px #ffffff88,inset 0 1px 3px #796b981a; }
.card-stage[data-kind='result'] .card-holo-metal { border-color:#ffffffbd; box-shadow:inset 0 1px 2px #ffffff99,0 6px 14px #6b5b8b1a; filter:none; background:none; -webkit-mask:none; mask:none; padding:0; }
.card-stage[data-kind='result'] .card-foil { display:block; opacity:var(--pearl-rim-light,.3); }
.card-stage[data-kind='result'] .card-foil-spectrum { inset:0; transform:none; background:radial-gradient(ellipse 28% 14.56% at var(--pearl-rim-x,86%) var(--pearl-rim-y,3%),#fff 0%,#fffffff0 20%,#c9e7f899 48%,transparent 100%),radial-gradient(ellipse 22% 11.44% at calc(100% - var(--pearl-rim-x,86%)) calc(100% - var(--pearl-rim-y,3%)),#ffffff38 0%,#ffffff20 35%,transparent 100%); }
.card-stage[data-kind='result'] .card-prism-layer { display:none; }
.card-stage[data-kind='result'] .card-glow-layer { display:block; background:radial-gradient(ellipse at var(--pearl-x,62%) var(--pearl-y,35%),#ffffffcc,transparent 45%),linear-gradient(var(--pearl-angle,140deg),#f4deef,#dcecf9,#e5e4f7); filter:blur(5px); opacity:var(--pearl-bloom,.1); }
.card-stage[data-kind='result'] .card-reflection-layer { opacity:var(--pearl-sheen,.23); background:radial-gradient(ellipse 42% 28% at var(--pearl-x,62%) var(--pearl-y,35%),#ffffffd9 0%,#c9e7f8b3 38%,transparent 100%); background-size:100% 100%; mix-blend-mode:normal; }
.card-stage[data-kind='result'] .card-glint { display:block; opacity:var(--pearl-glint,.08); background:linear-gradient(var(--pearl-angle,140deg),transparent 34%,#ffffff00 39%,#ffffffb3 48%,#f3ccdf66 54%,transparent 65%); background-size:160% 160%; background-position:var(--pearl-x,62%) var(--pearl-y,35%); mix-blend-mode:normal; }
.card-stage[data-kind='result'] .card-object::before,.card-stage[data-kind='result'] .card-object::after { background:linear-gradient(90deg,#dbd9ee,#faf6ff,#e1eaf4); }
.card-iq-foil { position:absolute; pointer-events:none; -webkit-mask-image:var(--iq-foil-mask); mask-image:var(--iq-foil-mask); -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; background:var(--iq-ink,#172B55); opacity:1; }
.card-stage[data-kind='result'] .card-foil::after,.card-iq-foil::after { display:none; }
.card-stage[data-kind='result'][data-foil-mask='false'] .card-foil,.card-stage[data-kind='result'][data-foil-mask='false'] .card-glow-layer { display:none; }
.card-stage[data-kind='result'][data-foil-mask='false'] .card-holo-metal { background:none; -webkit-mask:none; mask:none; padding:0; border-color:var(--pearl-edge-color); }
.card-stage[data-kind='result'] .card-iq-fallback { background:none; -webkit-mask:none; mask:none; }
.card-rim-fallback { position:absolute; inset:0; pointer-events:none; opacity:var(--pearl-rim-light,.5); }
.card-stage[data-foil-mask='false'] .card-foil { -webkit-mask:none; mask:none; padding:0; border:2px solid var(--foil-accent); box-shadow:inset 0 0 4px var(--foil-accent); }
.card-stage[data-foil-mask='false'] .card-foil-spectrum,.card-stage[data-foil-mask='false'] .card-foil::after,.card-stage[data-foil-mask='false'] .card-prism-layer { display:none; }
.card-stage[data-foil-mask='false'] .card-glow-layer { -webkit-mask:none; mask:none; background:transparent; padding:0; border:1px solid var(--foil-accent); box-shadow:0 0 14px var(--foil-accent); filter:none; }
.card-stage[data-lightweight='true'] .card-glint { display:none; }
.card-stage[data-lightweight='true'] .card-foil::after { display:none; }
.card-stage[data-lightweight='true'] .card-glow-layer { filter:blur(4px); }
.card-stage[data-lightweight='true'] .card-reflection-layer { display:none; }
.card-stage[data-kind='result'][data-lightweight='true'] .card-reflection-layer,.card-stage[data-kind='result'][data-lightweight='true'] .card-glint { display:block; }
.card-stage[data-kind='result'][data-lightweight='true'] .card-glow-layer,.card-stage[data-kind='result'][data-motion='reduced'] .card-glow-layer { display:none; }
.card-inspect-controls { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:4px 0 10px; }
.card-inspect-controls .ghost { flex:1 1 auto; min-width:0; min-height:44px; padding:11px 10px; font-size:12px; }
.card-lite-toggle { border:0; background:transparent; color:#67799e; font:inherit; font-size:11px; min-height:44px; padding:6px; border-radius:6px; }
.card-lite-toggle[aria-pressed='true'] { color:#364e92; background:#849bd71a; }
.card-inspect-help { font-size:11px; line-height:1.65; color:var(--muted,#6d7d9b); text-align:center; margin:0 5px; }
.card-inspect-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
@media(prefers-reduced-motion:reduce) { .card-stage .card-object { will-change:auto; } .card-foil::after { display:none; } }
@media(max-width:380px) { .card-inspect-controls .ghost { font-size:11px; padding:10px 8px; } }
/* The existing card is now the primary completed-result view. */
.world-ui .result-card-screen { max-width:760px; }
.result-card-layout { display:flex; flex-direction:column; align-items:center; gap:22px; }
.result-card-main { width:100%; max-width:420px; min-width:0; }
.result-card-main .share-preview.card-inspector { margin:0 auto; }
.result-card-details,.result-card-actions { width:100%; max-width:680px; min-width:0; }
.result-card-details { padding:20px 22px; text-align:center; background:var(--world-surface,#ffffffc9); border:1px solid var(--world-border,var(--border)); border-radius:20px; }
.result-card-details h1 { margin:0; font-size:20px; letter-spacing:-.35px; }
.result-card-details .result-lead { max-width:520px; margin:6px auto 0; }
.result-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; margin-top:16px; padding-top:14px; border-top:1px solid var(--world-border,var(--border)); }
.result-metrics.has-timer { grid-template-columns:repeat(3,minmax(0,1fr)); }
.result-card-details .result-stats { display:contents; }
.result-metrics .stat { min-width:0; padding:4px 10px; }
.result-metrics .stat+.stat,.result-card-details .result-timing { border-left:1px solid var(--world-border,var(--border)); }
.result-card-details .result-timing { grid-template-columns:1fr; gap:0; margin:0; padding:4px 10px; border-top:0; font-size:10px; }
.result-card-details .result-timing strong { margin:0 0 5px; font-size:22px; }
.result-card-details .result-timing span { display:flex; flex-direction:column-reverse; }
.result-card-details .unanswered-note { margin:12px 0 0; font-size:10px; line-height:1.6; }
.result-card-details .result-badge-mini { margin-top:12px; }
.result-card-details .rank-note { margin:12px 0 0; }
.result-card-details .achievement-notice { margin:14px 0 0; padding:14px 0 0; gap:12px; border:0; border-top:1px solid var(--world-border,var(--border)); border-radius:0; background:transparent; box-shadow:none; flex-wrap:wrap; text-align:left; }
.result-card-details .achievement-notice img { width:48px; height:50px; }
.result-card-details .achievement-notice button { min-height:44px; margin-left:auto; }
.result-card-exports { grid-template-columns:repeat(2,minmax(0,1fr)); margin:0; gap:10px; }
.result-card-exports button { min-width:0; min-height:48px; }
.result-card-exports .share-help { grid-column:1/-1; text-align:center; }
.result-card-exports .share-help { margin:0; font-size:10px; line-height:1.6; color:var(--world-muted,var(--muted)); }
.result-card-actions .result-secondary { grid-template-columns:1fr; margin:0; }
.result-card-actions .result-secondary .ghost { min-width:0; margin-top:10px; }
@media(max-width:600px) {
  .result-card-layout { gap:18px; }
  .result-card-details { padding:18px 14px; }
  .result-card-exports { grid-template-columns:1fr; }
}
@media(max-width:380px) {
  .result-card-screen .section-note { font-size:8px; }
  .result-metrics .stat,.result-card-details .result-timing { padding:4px; }
  .result-metrics .stat-value,.result-card-details .result-timing strong { font-size:20px; }
  .result-card-details .achievement-notice { gap:8px; }
}