/* StikDex v0.04 Part 4 — mobile real Binder page and Gesture Card Viewer.
   The National Dex pocket model and desktop Binder remain unchanged. */
.binder-card-viewer{display:none}
.binder-final-artwork-badge{display:none}

@media (max-width:760px), (pointer:coarse) and (max-width:960px) and (max-height:600px){
  /* Binder contents are the primary mobile surface. Controls stay available but compact. */
  #binderView{padding-top:8px!important;padding-bottom:calc(var(--pocket-nav-height) + 22px + env(safe-area-inset-bottom))!important}
  #binderView>.section-head{margin:0 0 7px!important;align-items:center!important}
  #binderView>.section-head>div:first-child p,#binderView>.section-head .section-eyebrow{display:none!important}
  #binderView>.section-head h2{font-size:20px!important;line-height:1.05!important}
  #binderView .binder-head-actions{display:block!important}
  #binderView #binderBadge{font-size:7px!important;padding:5px 7px!important}
  #binderView .binder-toolbar{display:grid!important;gap:7px!important;margin:0 0 7px!important;padding:8px!important;border-radius:15px!important}
  #binderView .binder-page-controls{display:grid!important;grid-template-columns:1fr auto 1fr!important;gap:6px!important}
  #binderView .binder-page-controls button{min-height:42px!important;padding:6px!important;font-size:8px!important}
  #binderView .binder-page-readout strong{font-size:10px!important}
  #binderView .binder-search-controls,#binderView .binder-jump-controls{display:none!important}
  #binderView .binder-stats{display:none!important}

  /* A real sixteen-pocket page: four columns by four rows inside one page surface. */
  #binderView .binder-page-shell{position:relative!important;margin:0!important;padding:9px 7px 10px!important;overflow:hidden!important;border:1px solid rgba(130,169,207,.32)!important;border-radius:18px!important;background:linear-gradient(135deg,#0a1725,#111f31)!important;box-shadow:0 16px 38px rgba(0,0,0,.24)!important;touch-action:pan-y!important;overscroll-behavior-x:contain!important}
  #binderView .binder-page-shell::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:linear-gradient(transparent,rgba(179,208,235,.18) 12%,rgba(179,208,235,.18) 88%,transparent);pointer-events:none}
  #binderView .binder-page-header{position:relative!important;z-index:1!important;display:flex!important;align-items:center!important;justify-content:space-between!important;min-height:34px!important;padding:0 3px 7px!important}
  #binderView .binder-page-header strong{font-size:12px!important}
  #binderView .binder-page-header small{font-size:7px!important}
  #binderView .binder-page-key{display:none!important}
  #binderView .binder-grid{--binder-mobile-pocket-height:clamp(108px,28vw,132px);position:relative!important;z-index:1!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-template-rows:repeat(4,var(--binder-mobile-pocket-height))!important;grid-auto-rows:var(--binder-mobile-pocket-height)!important;gap:5px!important;min-height:0!important;align-items:stretch!important}
  #binderView .binder-pocket{box-sizing:border-box!important;position:relative!important;display:grid!important;grid-template-rows:auto minmax(0,1fr)!important;width:100%!important;height:var(--binder-mobile-pocket-height)!important;min-width:0!important;min-height:var(--binder-mobile-pocket-height)!important;max-height:var(--binder-mobile-pocket-height)!important;overflow:hidden!important;padding:0!important;border:1px solid rgba(137,181,214,.24)!important;border-radius:8px!important;background:#07111c!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)!important;aspect-ratio:auto!important;touch-action:manipulation!important}
  #binderView .binder-pocket.green{border-color:rgba(66,217,139,.55)!important}#binderView .binder-pocket.yellow{border-color:rgba(245,207,74,.56)!important}#binderView .binder-pocket.none{border-color:rgba(255,102,117,.44)!important}
  #binderView .binder-pocket-header{position:relative!important;z-index:2!important;inset:auto!important;display:block!important;width:auto!important;height:auto!important;min-height:0!important;max-height:none!important;grid-template-columns:none!important;grid-template-rows:none!important;align-content:normal!important;gap:0!important;padding:3px 3px 0!important;pointer-events:none!important}
  #binderView .binder-pocket-header>div:first-child{display:block!important;min-width:0!important}
  #binderView .binder-pocket-header strong{display:block!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;padding:3px 4px!important;border-radius:5px!important;background:rgba(3,10,17,.72)!important;color:#f4f8fc!important;font-size:clamp(5.5px,1.75vw,7.2px)!important;line-height:1.15!important}
  #binderView .binder-pocket-header small,#binderView .binder-slot,#binderView .binder-pocket-footer{display:none!important}
  /* Restore the proven v0.03 Binder fitting path: the media stage is a real
     grid row and the image keeps its intrinsic ratio in normal flow. Avoid an
     absolute + percentage-height chain; Samsung Internet can paint that
     replaced element as only its bottom strip after mobile compositing. */
  #binderView .binder-image-wrap{box-sizing:border-box!important;position:relative!important;inset:auto!important;width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;margin:0 3px 3px!important;padding:2px!important;overflow:hidden!important;display:grid!important;place-items:center!important;align-self:stretch!important;flex:none!important;border-radius:5px!important;background:#030a12!important;aspect-ratio:auto!important}
  #binderView .binder-image{box-sizing:border-box!important;position:static!important;inset:auto!important;display:block!important;width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;max-width:100%!important;max-height:100%!important;margin:auto!important;padding:0!important;object-fit:contain!important;object-position:center!important;align-self:center!important;justify-self:center!important}
  #binderView .binder-pocket[data-has-binder-image="true"] .binder-image-wrap{background:#020810!important}
  #binderView .binder-final-artwork-badge{position:absolute;z-index:4;top:3px;right:3px;display:inline-flex;align-items:center;justify-content:center;color:#ffe47a;font-size:clamp(13px,3.8vw,17px);font-weight:950;line-height:1;text-shadow:0 1px 3px #000,0 0 5px rgba(255,211,70,.44);pointer-events:none}
  #binderView .binder-placeholder{box-sizing:border-box!important;width:100%!important;height:100%!important;min-height:0!important;padding:20px 3px 4px!important;text-align:center!important}
  #binderView .binder-placeholder-ball{width:18px!important;height:18px!important}
  #binderView .binder-photo-placeholder strong{font-size:5.5px!important;line-height:1.15!important}#binderView .binder-photo-placeholder small{font-size:5px!important}
  #binderView .binder-pocket::after{content:"";position:absolute;z-index:3;right:5px;bottom:5px;width:6px;height:6px;border:1px solid rgba(255,255,255,.7);border-radius:50%;background:#ff6675;box-shadow:0 1px 3px rgba(0,0,0,.6);pointer-events:none}
  #binderView .binder-pocket.green::after{background:#42d98b}#binderView .binder-pocket.yellow::after{background:#f5cf4a}
  #binderView .binder-pocket-manage{position:absolute;z-index:4;left:1px;bottom:1px;min-width:44px;min-height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:9px;background:transparent;color:#f3f8fc;font-size:0;font-weight:950;line-height:1;touch-action:manipulation}
  #binderView .binder-pocket-manage::after{content:"+";display:grid;place-items:center;width:24px;height:24px;border:1px solid rgba(255,255,255,.42);border-radius:8px;background:rgba(3,10,17,.9);font-size:12px;box-shadow:0 2px 8px rgba(0,0,0,.48)}
  #binderView .binder-pocket-manage.has-image::after{content:"Edit";width:auto;min-width:30px;padding:0 5px;border-color:rgba(102,216,255,.48);color:#9ce9ff;font-size:7px;letter-spacing:.02em}
  #binderView .binder-page-bottom-nav{position:relative!important;z-index:1!important;margin-top:8px!important;padding-top:8px!important;gap:6px!important;border-top-color:rgba(137,181,214,.16)!important}
  #binderView .binder-page-bottom-nav button{width:auto!important;min-width:92px!important;min-height:42px!important;padding:6px!important;font-size:7.5px!important}
  #binderView .binder-page-bottom-nav .binder-page-readout{min-width:68px!important}
  #binderView .binder-filter-empty{grid-column:1/-1!important;min-height:220px!important}

  body.binder-card-viewer-open{overflow:hidden!important;overscroll-behavior:none!important}
  .binder-card-viewer{position:fixed;z-index:540;inset:0;display:grid;place-items:center;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));visibility:hidden;pointer-events:none}
  .binder-card-viewer.show{visibility:visible;pointer-events:auto}
  .binder-card-viewer-backdrop{position:absolute;inset:0;border:0;background:rgba(0,5,11,.94)}
  .binder-card-viewer-panel{position:relative;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;width:min(100%,580px);height:min(94dvh,900px);overflow:hidden;border:1px solid rgba(137,181,214,.32);border-radius:23px;background:#07121e;color:#f1f7fc;box-shadow:0 24px 70px rgba(0,0,0,.55)}
  .binder-card-viewer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px 8px 14px;border-bottom:1px solid rgba(137,181,214,.2)}
  .binder-card-viewer-head>div{display:grid;min-width:0;gap:1px}.binder-card-viewer-head small{color:#66d8ff;font-size:7px;font-weight:950;letter-spacing:.13em}.binder-card-viewer-head strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}.binder-card-viewer-head span{color:#8fa4b9;font-size:8px;font-weight:800}
  .binder-card-viewer-identity{display:flex!important;align-items:center;gap:6px;min-width:0}
  .binder-card-viewer-identity strong{min-width:0}
  .binder-card-viewer-head .binder-card-viewer-final-artwork{display:inline-flex;flex:0 0 auto;align-items:center;color:#ffe47a;font-size:14px!important;font-weight:950;line-height:1;text-shadow:0 1px 3px #000,0 0 5px rgba(255,211,70,.4)}
  .binder-card-viewer-final-artwork[hidden]{display:none!important}
  .binder-card-viewer-head button{width:44px;height:44px;border:1px solid rgba(137,181,214,.28);border-radius:13px;background:#142538;color:#fff;font-size:24px}
  .binder-card-viewer-head .binder-card-viewer-head-actions{display:flex;grid-template:none;flex:0 0 auto;align-items:center;gap:6px}
  .binder-card-viewer-head .binder-card-viewer-manage{width:auto;min-width:88px;padding:0 12px;border-color:rgba(102,216,255,.38);color:#86e4ff;font-size:9px;font-weight:950}
  .binder-card-viewer-actions{display:grid;grid-template-columns:1fr 1fr auto;gap:7px;padding:8px 10px;border-bottom:1px solid rgba(137,181,214,.18);background:#0a1827}
  .binder-card-viewer-actions[hidden]{display:none}
  .binder-card-viewer-actions button{min-width:0;min-height:44px;padding:7px 10px;border:1px solid rgba(137,181,214,.28);border-radius:11px;background:#132538;color:#eef6fc;font-size:9px;font-weight:950;touch-action:manipulation}
  .binder-card-viewer-actions .binder-card-viewer-final-artwork-action{grid-column:1/-1;min-height:44px;border-color:rgba(255,218,82,.38);background:rgba(255,205,52,.08);color:#ffe47a}
  .binder-card-viewer-actions .binder-card-viewer-final-artwork-action.active{border-color:rgba(255,218,82,.62);background:rgba(255,205,52,.14)}
  .binder-card-viewer-actions .binder-card-viewer-remove{border-color:rgba(255,102,117,.46);background:rgba(255,102,117,.1);color:#ff9aa6}
  .binder-card-viewer-stage{position:relative;display:grid;place-items:center;min-height:0;overflow:hidden;background:radial-gradient(circle at 50% 46%,rgba(66,151,213,.16),transparent 54%),#020912;touch-action:none;overscroll-behavior:contain;user-select:none;-webkit-user-select:none}
  .binder-card-viewer-stage img{display:block;width:min(88%,440px);height:88%;object-fit:contain;transform:translate3d(var(--binder-viewer-x,0px),var(--binder-viewer-y,0px),0) scale(var(--binder-viewer-scale,1));transform-origin:center;transition:transform .16s ease;pointer-events:none;-webkit-user-drag:none}
  .binder-card-viewer-stage.gesturing img{transition:none}.binder-card-viewer-loading{position:absolute;color:#9bb0c4;font-size:10px;font-weight:850}.binder-card-viewer-stage.ready .binder-card-viewer-loading{display:none}
  .binder-card-viewer-pager{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;padding:9px 10px calc(9px + env(safe-area-inset-bottom));border-top:1px solid rgba(137,181,214,.2)}
  .binder-card-viewer-pager button{min-height:44px;border:1px solid rgba(137,181,214,.27);border-radius:12px;background:#132538;color:#eef6fc;font-size:9px;font-weight:950}.binder-card-viewer-pager button:disabled{opacity:.34}.binder-card-viewer-pager span{color:#74899d;font-size:7px;text-align:center}
  body.binder-card-viewer-open .stikdex-toast.clean-core-binder-media-success{position:fixed;top:calc(env(safe-area-inset-top) + 68px);right:12px;bottom:auto;left:12px;width:auto;min-height:0;padding:8px 11px;border-radius:11px;font-size:10px;line-height:1.2}
}

@media (pointer:coarse) and (max-width:960px) and (max-height:600px){
  .binder-card-viewer-panel{height:calc(100dvh - 16px)}
  .binder-card-viewer-actions{grid-template-columns:1fr 1fr auto;padding-top:6px;padding-bottom:6px}
  .binder-card-viewer-actions button{min-height:44px}
}

.binder-choice-remove{grid-column:1/-1;border-color:rgba(255,102,117,.42)!important;background:rgba(255,102,117,.09)!important}.binder-choice-remove>span{background:rgba(255,102,117,.14)!important;color:#ff8b99!important}

@media (max-width:350px){
  #binderView .binder-grid{gap:4px!important}#binderView .binder-page-shell{padding-inline:5px!important}#binderView .binder-pocket-header strong{font-size:5.5px!important}
}

@media (prefers-reduced-motion:reduce){
  .binder-card-viewer-stage img{transition:none!important}
}

.ios-webkit .binder-card-viewer-panel,.ios-webkit .binder-card-viewer-stage{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;will-change:auto!important}
.ios-webkit .binder-card-viewer-stage img{transform:translate(var(--binder-viewer-x,0px),var(--binder-viewer-y,0px)) scale(var(--binder-viewer-scale,1));will-change:auto!important}