/* Original 3D medal imagery within the existing MatchMio component system. */
.medal-art{display:inline-block;width:var(--space-28);height:var(--space-28);flex:none;object-fit:contain;vertical-align:middle}
.medal-art.medal-large{width:var(--space-80);height:var(--space-80)}
.medal-art.medal-hero{width:calc(var(--space-80) * 2);height:calc(var(--space-80) * 2)}
.medal-art.is-locked{filter:grayscale(1);opacity:.55}
.medal-art.is-paused{filter:saturate(.45)}
.medal-art.is-revoked{filter:grayscale(1);opacity:.65}
.medal-fallback{display:inline-flex;align-items:center;justify-content:center;font-size:var(--font-size-hero-mobile)}
.medal-preview{display:inline-flex;align-items:center;justify-content:center;flex:none;border:0;padding:0;background:transparent;border-radius:var(--radius-input);min-width:var(--touch-target-min);min-height:var(--touch-target-min);cursor:pointer;transition:background var(--motion-duration) var(--motion-easing),transform var(--motion-duration) var(--motion-easing)}
.medal-preview:hover{background:var(--brand-soft)}
.medal-preview:active{transform:translateY(var(--press-offset))}
.medal-preview:focus-visible,.medal-chip:focus-visible{outline:var(--focus-width) solid var(--brand);outline-offset:var(--focus-offset)}
.medal-chip{display:inline-flex;align-items:center;gap:var(--space-6);padding:var(--space-2) var(--space-10) var(--space-2) var(--space-6);border:0;min-height:var(--touch-target-min);font:inherit;font-size:var(--font-size-caption);text-align:left;cursor:pointer;transition:background var(--motion-duration) var(--motion-easing),transform var(--motion-duration) var(--motion-easing)}
.medal-chip:hover{background:var(--brand-soft);color:var(--brand)}
.medal-chip:active{transform:translateY(var(--press-offset))}
.ach{border-radius:var(--radius);padding:var(--space-14) var(--space-18);gap:var(--space-14);flex-wrap:wrap}
.ach.locked{opacity:1}
.ach .ach-body{flex:1;min-width:calc(var(--space-60) * 2);overflow-wrap:anywhere}
.ach .pg{white-space:normal;max-width:100%;overflow-wrap:anywhere;color:var(--brand);font-size:var(--font-size-small);font-weight:var(--font-weight-semibold)}
.medal-detail-art{display:flex;align-items:center;justify-content:center;background:var(--bg);border-radius:var(--radius);padding:var(--space-14);margin-bottom:var(--space-18)}
.medal-detail .txt{margin:var(--space-12) 0;color:var(--ink-2);font-size:var(--font-size-small);overflow-wrap:anywhere}
.medal-detail .act-row{margin-top:var(--space-20)}
.medal-admin-label{display:flex;align-items:center;gap:var(--space-8)}
.medal-admin-label .medal-art{width:var(--space-44);height:var(--space-44)}
.medal-order-item{display:inline-flex;align-items:center;gap:var(--space-6);margin:0 var(--space-6) var(--space-10) 0;min-height:var(--touch-target-min)}
.medal-order-item button{min-width:var(--touch-target-min);min-height:var(--touch-target-min)}
.badge-wear-preview{display:flex;align-items:center;gap:var(--space-18);padding:var(--space-16) var(--space-18);margin-bottom:var(--space-18);border-radius:var(--web-surface-radius);background:var(--bg)}
.badge-wear-preview>div:last-child{min-width:0;overflow-wrap:anywhere}
.badge-wear-preview b{font-size:var(--font-size-body)}
.badge-wear-preview .text-link{display:inline-flex;align-items:center;min-height:var(--touch-target-min);min-width:var(--touch-target-min)}
.badge-display-choice,.badge-wear-choice{display:inline-flex;align-items:center;gap:var(--space-6);min-height:var(--touch-target-min);font-size:var(--font-size-caption);color:var(--ink-2);cursor:pointer}
.badge-wear-choice:has(input:checked){color:var(--brand);font-weight:var(--font-weight-semibold)}
@media(max-width:640px){.ach.unlocked>.badge-display-choice{grid-column:1 / -1;grid-row:3;justify-self:start}.ach.unlocked>.badge-wear-choice{grid-column:1 / -1;grid-row:4;justify-self:start}.badge-wear-preview{padding:var(--space-14)}}
@media(max-width:640px){.ach{padding:var(--space-14);gap:var(--space-10)}.ach .medal-large{width:var(--space-60);height:var(--space-60)}.ach .ach-body{min-width:calc(var(--space-60) * 2)}.ach .pg{margin-left:auto}}
@media(max-width:640px){
  .ach.unlocked{display:grid;grid-template-columns:var(--space-60) minmax(0,1fr)}
  .ach.unlocked>.medal-preview{grid-column:1;grid-row:1;align-self:start}
  .ach.unlocked .ach-body{grid-column:2;grid-row:1;min-width:0}
  .ach.unlocked .pg{grid-column:2;grid-row:2;justify-self:start;margin-left:0}
  .ach.unlocked>:last-child:not(.pg){grid-column:1;grid-row:2;justify-self:center}
}
@media(prefers-reduced-motion:reduce){.medal-preview,.medal-chip{transition:none}.medal-preview:active,.medal-chip:active{transform:none}}

/* Public artwork gallery; these labels describe designs, not ownership. */
.medal-collection-heading,.medal-section-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-14);margin-bottom:var(--space-18)}
.medal-collection-heading h1{font-size:var(--font-size-hero-mobile);font-weight:var(--font-weight-bold)}
.medal-collection-heading p,.medal-group-description{font-size:var(--font-size-small);color:var(--ink-2);margin-top:var(--space-6);overflow-wrap:anywhere}
.medal-section-heading h2{margin:0}
.medal-preview-note{padding:var(--space-12) var(--space-18);margin-bottom:var(--space-20);background:var(--brand-soft);color:var(--brand);border-radius:var(--radius);font-size:var(--font-size-small)}
.medal-collection-filters{gap:var(--space-10);margin-bottom:var(--space-28)}
.medal-collection-filters .chip{display:inline-flex;align-items:center;gap:var(--space-8);min-height:var(--touch-target-min)}
.medal-collection-section+.medal-collection-section{margin-top:var(--space-36)}
.medal-collection-section h2{font-size:var(--font-size-section-title)}
.medal-group-description{margin-bottom:var(--space-18)}
.medal-collection-card{min-width:0;display:flex;flex-direction:column;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--space-20) var(--space-18) var(--space-18);transition:transform var(--motion-duration) var(--motion-easing)}
.medal-collection-card:hover{transform:translateY(var(--card-hover-offset))}
.medal-card-art{display:flex;justify-content:center;align-items:center;margin-bottom:var(--space-12)}
.medal-card-copy{flex:1;overflow-wrap:anywhere}
.medal-design-label{display:inline-block;white-space:nowrap;padding:var(--space-2) var(--space-10);border-radius:var(--radius-pill);background:var(--bg);color:var(--ink-2);font-size:var(--font-size-badge)}
.medal-collection-card h3{font-size:var(--font-size-card-title);margin-top:var(--space-8)}
.medal-art-name{font-size:var(--font-size-small);color:var(--brand);margin-top:var(--space-4)}
.medal-motif{font-size:var(--font-size-small);color:var(--ink-2);margin-top:var(--space-6)}
.medal-collection-card>.btn{align-self:flex-start;margin-top:var(--space-18);min-height:var(--touch-target-min)}
.medal-artwork-detail .medal-hero{width:calc(var(--space-80) * 3);height:calc(var(--space-80) * 3);max-width:100%;object-fit:contain}
@media(max-width:640px){.medal-collection-heading{align-items:flex-start}.medal-collection-filters .chip{padding-inline:var(--space-12)}}
@media(prefers-reduced-motion:reduce){.medal-collection-card{transition:none}.medal-collection-card:hover{transform:none}}

/* Drag interaction belongs to the enlarged medal in its detail dialog. */
html.medal-viewer-open{overflow-y:hidden;scroll-behavior:auto}
.medal-viewer-modal{overscroll-behavior:contain}
.medal-collection-card>.medal-card-art{align-self:stretch;margin-top:0;border:0;border-radius:var(--radius-input);padding:0}
.medal-collection-card>.medal-card-art:active{transform:none}
.medal-viewer{margin-bottom:var(--space-18)}
.medal-viewer [hidden]{display:none!important}
.medal-viewer-stage{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:calc(var(--space-80) * 3 + var(--space-60));overflow:hidden;border-radius:var(--radius);background:var(--bg)}
.medal-viewer-stage:focus-visible{outline:var(--focus-width) solid var(--brand);outline-offset:var(--focus-offset)}
.medal-viewer-stage canvas{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.medal-viewer-stage .medal-viewer-poster{width:calc(var(--space-80) * 3);height:calc(var(--space-80) * 3);max-width:100%;object-fit:contain}
.medal-viewer-stage.is-locked canvas{filter:grayscale(1);opacity:.55}
.medal-viewer-stage.is-paused canvas{filter:saturate(.45)}
.medal-viewer-stage.is-revoked canvas{filter:grayscale(1);opacity:.65}
.medal-viewer[data-viewer-state="ready"] .medal-viewer-stage{cursor:grab;touch-action:none;user-select:none}
.medal-viewer.is-dragging .medal-viewer-stage{cursor:grabbing}
.medal-viewer-status{font-size:var(--font-size-caption);color:var(--ink-2);margin:var(--space-10) 0;overflow-wrap:anywhere}
.medal-viewer-controls{display:flex;gap:var(--space-8);flex-wrap:wrap}
.medal-viewer-controls .btn{min-height:var(--touch-target-min);min-width:var(--touch-target-min);font-size:var(--font-size-small);font-weight:var(--font-weight-regular);padding:var(--space-8) var(--space-14)}
.medal-viewer-controls .btn:disabled{background:var(--bg);border-color:var(--line);color:var(--ink-3);opacity:1;transform:none}
.medal-viewer-modal .modal-close{width:var(--touch-target-min);height:var(--touch-target-min);min-width:var(--touch-target-min)}
.medal-viewer-modal .medal-detail h3{min-height:var(--touch-target-min);display:flex;align-items:center;overflow-wrap:anywhere}
.medal-detail .act-row{justify-content:flex-end}
@media(max-width:640px){.medal-viewer-stage{height:calc(var(--space-80) * 3)}}