/* Tactile selector surfaces. Load after lootr.css; no business state is owned here. */
:root{--surface-ease:cubic-bezier(.18,.8,.24,1);--surface-cyan:#75e8ff}
svg.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:none;flex:none}
svg.icon .icon-surface{fill:currentColor;fill-opacity:.24;stroke:none}
svg.icon .icon-face{fill:currentColor;fill-opacity:.43;stroke:none}
svg.icon .icon-depth{fill:#03202d;fill-opacity:.6;stroke:none}
svg.icon .icon-cutout{fill:var(--icon-cutout,#061a26);stroke:none}
svg.icon .icon-outline{fill:none;stroke:currentColor;stroke-width:1.7}
svg.icon .icon-highlight{fill:none;stroke:#e1f8ff;stroke-opacity:.6;stroke-width:.8}
[data-icon]{display:inline-flex;align-items:center;justify-content:center;flex:none}
.desktop-nav svg.icon{width:25px;height:25px;color:#a9c8da}
.desktop-nav .icon-box{width:26px;height:26px}
.desktop-nav button.active .icon,.bottom-nav button.active .icon{color:#9aebff;filter:none}
.desktop-nav button.active .icon-surface,.bottom-nav button.active .icon-surface{fill-opacity:.34}
.desktop-nav button.active .icon-face,.bottom-nav button.active .icon-face{fill-opacity:.58}
.bottom-nav svg.icon{width:24px;height:24px;color:#a2bdcf}
.inventory-shortcut svg.icon,.header-actions .icon-button svg.icon{width:22px;height:22px}
.detail-links svg.icon{width:22px;height:22px;color:#8ce2f5}
.opening-button svg.icon{width:24px;height:24px}
.pink svg.icon{--icon-cutout:#9de5f5}
.pink svg.icon .icon-highlight{stroke:currentColor;stroke-opacity:.38}
.sound-button svg.icon,.preview-opening svg.icon{width:14px;height:14px}
.eligibility-line svg.icon{width:15px;height:15px}
.case-card-bottom svg.icon{width:12px;height:12px}
.app-footer nav{align-items:center}
.app-footer nav svg{display:block;width:17px;height:17px;flex:none}
.app-footer nav :is(button,a){position:relative;transition:color 180ms ease}
.app-footer nav :is(button,a):hover{color:#c1f4ff}
.app-header::after{animation:none;opacity:.55}

#case-grid .case-card{
  isolation:isolate;
  background:
    radial-gradient(ellipse at 25% 72%,color-mix(in srgb,var(--tier,#73dcf5) 16%,transparent),transparent 65%),
    linear-gradient(148deg,#21313d 0%,#101f2c 39%,#071620 100%);
  border-color:#3d5869;
  box-shadow:inset 0 1px #d3eeff1c,inset 0 -1px #010b14,0 7px 18px #00000014;
  transition:transform 240ms var(--surface-ease),border-color 180ms ease,box-shadow 240ms ease;
}
#case-grid .case-card::before{
  content:'';display:block;position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.68;
  background:
    repeating-linear-gradient(112deg,#dbf0ff07 0,#dbf0ff07 1px,transparent 1px,transparent 4px),
    linear-gradient(118deg,transparent 20%,#c9edff0a 39%,#07152200 54%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.74' numOctaves='3' stitchTiles='stitch' seed='19'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.11'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E");
  background-size:auto,auto,160px 160px;
}
#case-grid .case-card::after{
  content:'';position:absolute;z-index:2;left:14%;right:14%;bottom:0;width:auto;height:2px;
  background:linear-gradient(90deg,transparent,#c1f8ff 28%,#69e2ff 72%,transparent);
  box-shadow:0 0 11px #4edcff,0 -2px 15px #59ddff5c;
  transform:scaleX(.38);opacity:0;
  transition:transform 300ms var(--surface-ease),opacity 180ms ease;pointer-events:none;
}
#case-grid .case-card :is(.case-card-top,.case-art,.case-copy,.case-card-bottom){position:relative;z-index:1}
#case-grid .case-card.active,#case-grid .case-card[aria-pressed="true"]{
  border-color:#9fefff;
  background:
    radial-gradient(ellipse at 28% 72%,#37c9f22b,transparent 68%),
    linear-gradient(148deg,#213c4a 0%,#102a38 42%,#071a26 100%);
  box-shadow:inset 0 1px #d8faff70,inset 0 0 0 1px #8cecff16,0 0 20px #43d7ff29,0 8px 20px #0003;
}
#case-grid .case-card:is(.active,[aria-pressed="true"])::after{opacity:1;transform:scaleX(1)}
#case-grid .case-card:focus-visible{outline:2px solid #c5f7ff;outline-offset:4px}
#case-grid .case-card:active:not(:disabled){transform:translateY(0) scale(.985);transition-duration:80ms}
#case-grid .case-art-atlas{transition:transform 340ms var(--surface-ease);transform-origin:50% 70%}
#case-grid .case-card-bottom>span:last-child{display:inline-flex;align-items:center;gap:5px}
#case-grid .case-card:is(.active,[aria-pressed="true"]) .case-card-bottom>span:last-child{color:#a6f1ff}
.surface-light,.surface-sweep{position:absolute;display:block;pointer-events:none;z-index:0}
.surface-light{left:0;top:0;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,#b9f3ff24,transparent 64%);transform:translate3d(calc(var(--surface-x,130px) - 50%),calc(var(--surface-y,80px) - 50%),0);opacity:0;transition:opacity 200ms ease}
.case-card[data-surface-hover] .surface-light{opacity:1}
.surface-sweep{top:-20%;bottom:-20%;left:0;width:40%;background:linear-gradient(90deg,transparent,#d9faff17 48%,#d9faff08 58%,transparent);opacity:0;transform:translate3d(-140%,0,0) skewX(-24deg)}

/* Feedback is tied to hover, selection and first arrival, never an idle loop. */
.opening-button::after{animation:none;opacity:0;transform:translateX(-160%) skewX(-24deg)}
.opening-button:is(:hover,:focus-visible):not(:disabled)::after{animation:surface-action-sweep 720ms var(--surface-ease) both}
@keyframes surface-action-sweep{0%{transform:translateX(-160%) skewX(-24deg);opacity:0}18%{opacity:.8}100%{transform:translateX(640%) skewX(-24deg);opacity:0}}
@media(hover:hover) and (pointer:fine){
  #case-grid .case-card:hover{transform:translateY(-3px);border-color:#7caebf;box-shadow:inset 0 1px #def6ff35,0 11px 25px #0005}
  #case-grid .case-card:is(.active,[aria-pressed="true"]):hover{border-color:#c0f7ff;box-shadow:inset 0 1px #e7fcff80,0 0 24px #51daff38,0 11px 25px #0005}
  #case-grid .case-card:hover .case-art-atlas{transform:translateY(-3px) scale(1.025)}
  #case-grid .case-card:active:not(:disabled){transform:translateY(0) scale(.985)}
}
@media(max-width:600px){
  #case-grid .case-card-bottom>span:last-child{display:none}
  #case-grid .case-card::before{opacity:.56}
  .surface-light{display:none}
  .app-footer nav svg{width:16px;height:16px}
}
@media(hover:none){
  #case-grid .case-card:hover,#case-grid .case-card:hover .case-art-atlas{transform:none}
  #case-grid .case-card:active:not(:disabled){transform:scale(.985)}
}
@media(prefers-reduced-motion:reduce){
  #case-grid .case-card,#case-grid .case-card::after,#case-grid .case-art-atlas{transition:none}
  #case-grid .case-card:hover,#case-grid .case-card:active:not(:disabled),#case-grid .case-card:hover .case-art-atlas{transform:none}
  .surface-light,.surface-sweep{display:none}
  .opening-button::after,.opening-button:is(:hover,:focus-visible):not(:disabled)::after{animation:none;opacity:0}
}