/* Floating navigation, quiet collection cards and generous unboxing controls. */
html{scroll-behavior:smooth;scroll-padding-top:106px}
*,html,body{scrollbar-width:none!important;-ms-overflow-style:none}
*::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
body{overflow-x:hidden}
button,a,input,select{touch-action:manipulation}
:focus-visible{outline:2px solid #d9e5f0;outline-offset:4px}
.experience-studio .studio-header{position:fixed;top:18px;left:50%;width:calc(100% - 64px);max-width:1400px;height:58px;padding:0 18px;transform:translate(-50%,0);border:1px solid #ffffff1c;border-radius:14px;background:#191919ee;backdrop-filter:blur(18px);box-shadow:0 8px 32px #0004;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .22s ease,visibility .3s;z-index:40}
.experience-studio .studio-header nav{align-self:center;align-items:center;gap:4px}
.experience-studio .studio-header nav button{border:0;border-radius:8px;padding:10px 17px;font-size:13px;min-height:40px;transition:background .18s,color .18s}
.experience-studio .studio-header nav button.active{background:#303030;color:#f6f6f6}
.experience-studio .header-utilities .quiet{min-height:40px;font-size:12px;padding:8px 12px}
.experience-studio.is-unboxing>.studio-header,.experience-studio.is-transitioning>.studio-header{opacity:0;transform:translate(-50%,-22px);pointer-events:none;visibility:hidden}
.experience-studio .studio-main{padding-top:116px;padding-bottom:64px}
.record-experience{inset:94px 0 0}
.record-experience.is-unboxing{inset:0}
.collection-toolbar{flex-wrap:wrap;gap:18px 24px;padding-bottom:23px;margin-bottom:28px;align-items:flex-end}
.collection-search{display:flex;flex:1 1 220px;min-width:180px;margin:0;align-items:flex-start;flex-direction:column;gap:8px}
.collection-search>span,.collection-filters label>span{display:block!important;font-size:12px;color:#aaa}
.collection-search input{width:100%;min-height:42px;font-size:13px;padding:10px 12px;border-radius:6px}
.collection-filters{display:flex;flex:2 1 460px;gap:14px}
.collection-filters label{display:flex;flex:1;min-width:0;flex-direction:column;align-items:stretch;gap:8px}
.collection-filters select{width:100%;max-width:none;min-height:42px;padding:9px 10px;background:#1b1b1b;color:#ddd;border:1px solid #3a3a3a;border-radius:6px;font-size:12px}
.collection-count{display:flex;flex-basis:100%;align-items:center;gap:18px;justify-content:space-between;font-size:12px;color:#939393}
.collection-count .quiet{font-size:12px}
.experience-studio .inventory-grid{grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:30px 24px}
.inventory-album{--rarity-color:#81878c}
.inventory-album[data-rarity=uncommon]{--rarity-color:#78bc8d}
.inventory-album[data-rarity=rare]{--rarity-color:#77aef0}
.inventory-album[data-rarity=epic]{--rarity-color:#b693eb}
.inventory-album[data-rarity=mythic]{--rarity-color:#e397b7}
.inventory-album[data-rarity=legendary]{--rarity-color:#e4b568}
.inventory-album[data-rarity=prismatic]{--rarity-color:#a0d8d1}
.inventory-album[data-rarity=grail]{--rarity-color:#ded3a3}
.inventory-album[data-rarity=secret]{--rarity-color:#edb4f5}
.collection-art{background:radial-gradient(ellipse at 50% 37%,#25272a,#171819 75%);border:1px solid color-mix(in srgb,var(--rarity-color) 65%,#242424);border-radius:9px;box-shadow:none;transition:border-color .2s,box-shadow .2s;isolation:isolate}
.inventory-album:hover .collection-art,.inventory-album:focus-visible .collection-art{border-color:var(--rarity-color);box-shadow:0 5px 24px #0004}
.thumbnail-frame{width:100%;height:100%;transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.record-thumbnail{background:transparent;width:100%;height:100%;object-fit:contain}
.inventory-album:hover .thumbnail-frame{transform:translateY(-2px) scale(1.018)}
.thumbnail-frame.is-pending{padding:22% 15% 15%;box-sizing:border-box}
.thumbnail-frame .album-cover{height:100%;width:100%;aspect-ratio:1;box-shadow:0 10px 20px #0005}
.card-badges{position:absolute;top:12px;left:12px;right:12px;display:flex;gap:6px;align-items:center;justify-content:space-between;pointer-events:none}
.card-badges>span{font-size:11px;line-height:1.25;border-radius:4px;padding:5px 7px;letter-spacing:.01em}
.card-badges .rarity-tag{border-color:#ffffff25!important}
.new-tag{color:#f0f0f0;background:#202225e8;border:1px solid #ffffff28}
.sealed-tag{color:#b7b7b7;background:#232323;border:1px solid #414141}
.experience-studio .inventory-album strong{font-size:13px;line-height:1.55;display:block}
.experience-studio .inventory-album>span{font-size:12px;line-height:1.5}
.experience-studio .inventory-album>small{font-size:11px;line-height:1.6;color:#a5a5a5;margin-top:6px;display:block}
.inspect-affordance{font-size:11px;border-radius:5px}
.unboxing-guide{position:absolute;inset:0;pointer-events:none;z-index:5}
.unboxing-guide[hidden],.unboxing-tip[hidden]{display:none!important}
.unboxing-handle{position:absolute;transform:translate(-50%,-50%);width:48px;height:48px;padding:0;display:grid;place-items:center;border:0;border-radius:6px;background:transparent;color:#c7cdca;box-shadow:none;pointer-events:auto;touch-action:none;cursor:grab;user-select:none;transition:color .18s,opacity .18s}
.unboxing-handle:before{content:'';position:absolute;inset:11px 5px;border:1px solid #ffffff32;border-radius:5px;background:#242726e8;backdrop-filter:blur(8px);transition:background .18s,border-color .18s}
.unboxing-handle:after{content:'';position:relative;width:16px;height:16px;background:currentColor;mask:url('./icons/move-horizontal.svg') center/contain no-repeat;-webkit-mask:url('./icons/move-horizontal.svg') center/contain no-repeat;pointer-events:none}
.unboxing-handle[data-step=pull]:before{inset:8px 9px}
.unboxing-handle[data-step=pull]:after{mask-image:url('./icons/arrow-right.svg');-webkit-mask-image:url('./icons/arrow-right.svg')}
.unboxing-handle:hover,.unboxing-handle:focus-visible{color:#fff}
.unboxing-handle:hover:before,.unboxing-handle:focus-visible:before{background:#333936f5;border-color:#ffffff65}
.unboxing-handle:active{cursor:grabbing}
.unboxing-handle.is-busy{opacity:0;pointer-events:none}
.unboxing-tip{position:absolute;box-sizing:border-box;background:#202323f5;border:1px solid #dce4e337;border-radius:9px;padding:14px 16px;box-shadow:0 12px 30px #0004;backdrop-filter:blur(12px);color:#d3d8d7;animation:tip-arrive .28s ease both}
.unboxing-tip strong{display:block;font-size:12px;font-weight:500;color:#f1f4f2;margin-bottom:8px}
.unboxing-tip span{display:block;font-size:12px;line-height:1.6}
.unboxing-gesture{bottom:26px;gap:12px;flex-direction:column;white-space:normal;width:calc(100% - 32px)}
.unboxing-gesture p{font-size:11px;margin:0;color:#949b97}
.unboxing-gesture-actions{display:flex;gap:10px;align-items:center;justify-content:center}
.unboxing-gesture button{min-height:40px;font-size:12px;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-color:#ffffff1b;background:#191c1b;color:#c9cfcb;padding:8px 12px}
.unboxing-gesture button:hover{border-color:#ffffff40;background:#252927;color:#eee}
.unboxing-gesture .unboxing-help{border-color:transparent;background:transparent;color:#929b95;padding:8px 10px}
.interaction-icon{display:inline-block;flex:none;width:14px;height:14px;background:currentColor;mask:center/contain no-repeat;-webkit-mask:center/contain no-repeat}
.peel-icon{mask-image:url('./icons/move-horizontal.svg');-webkit-mask-image:url('./icons/move-horizontal.svg')}
.pull-icon{mask-image:url('./icons/arrow-right.svg');-webkit-mask-image:url('./icons/arrow-right.svg')}
.help-icon{mask-image:url('./icons/info.svg');-webkit-mask-image:url('./icons/info.svg')}
.sleeve-grab-cue{box-shadow:none;opacity:.65}
.inspection-gesture-hint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-size:11px;color:#929694;pointer-events:none;white-space:nowrap;margin:0}
.record-experience .unboxing-header{padding-top:20px}
.fullscreen-prompt-body{display:flex;flex-direction:column;gap:22px;margin-top:20px}
.fullscreen-prompt [data-slot=dialog-description]{font-size:14px!important;line-height:1.8;color:#a7abaa}
.fullscreen-prompt-body .setting-toggle{justify-content:flex-start;gap:12px;font-size:13px!important;cursor:pointer}
.fullscreen-prompt-body input{width:17px;height:17px;accent-color:#e0e7e3}
.fullscreen-prompt-body .dialog-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.studio-dialog .settings-body>.secondary{min-height:42px}
.crate-pile,.record-details,.unboxing-result,.studio-dialog{scroll-behavior:smooth}
@keyframes tip-arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){
  .experience-studio .studio-header{top:12px;width:calc(100% - 32px);padding:0 10px;height:56px;border-radius:12px}
  .experience-studio .studio-main{padding-top:99px}
  .record-experience{top:82px}
  .collection-filters{flex-basis:100%;gap:10px}
  .collection-search{flex-basis:100%}
  .experience-studio .inventory-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 16px}
  .inspection-gesture-hint{left:40%;font-size:10px}
}
@media(max-width:520px){
  .experience-studio .studio-header{width:calc(100% - 24px);top:10px}
  .experience-studio .studio-header nav button{font-size:12px;padding:10px 12px}
  .experience-studio .header-utilities .quiet{font-size:11px;padding:8px}
  .experience-studio .studio-main{padding-top:94px}
  .experience-studio .inventory-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
  .collection-filters{flex-wrap:wrap}
  .collection-filters label{flex:1 1 calc(50% - 10px)}
  .collection-filters label:last-child{flex-basis:100%}
  .collection-filters select{font-size:12px;max-width:none}
  .card-badges{top:8px;left:8px;right:8px;gap:4px}
  .card-badges>span{font-size:10px;padding:4px 5px}
  .experience-studio .inventory-album strong{font-size:12px}
  .experience-studio .inventory-album>span{font-size:11px}
  .experience-studio .inventory-album>small{font-size:10px}
  .inspect-affordance{font-size:10px;padding:5px 7px;opacity:0}
  .unboxing-tip strong,.unboxing-tip span{font-size:12px}
  .unboxing-gesture{bottom:18px}
  .unboxing-gesture p{font-size:11px}
  .unboxing-gesture button{font-size:11px}
  .inspection-gesture-hint{display:none}
}
@media(prefers-reduced-motion:reduce){
  html,.crate-pile,.record-details,.unboxing-result,.studio-dialog{scroll-behavior:auto}
  .experience-studio .studio-header,.thumbnail-frame,.collection-art,.unboxing-handle{transition:none!important}
  .unboxing-tip{animation:none}
}