/* Gallery V1 presentation only. Existing editor and desktop styles are retained. */
@media(max-width:899px){
  /* Paint the document canvas too: iOS can use this surface behind its safe area. */
  html:has(body[data-screen="gallery"]){
    background-color:#b5310d;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M15 18h6m-3-3v6' stroke='%23fff4d9' stroke-opacity='.36' stroke-width='.7'/%3E%3C/svg%3E");
    background-position:0 calc(-1 * env(safe-area-inset-top,0px));
  }
  body[data-screen="gallery"]{background:#b5310d;}
  .screen-gallery{isolation:isolate;min-height:100svh;}
  .screen-gallery::before,.screen-gallery::after{
    content:"";position:fixed;inset:0;
    top:calc(-1 * env(safe-area-inset-top,0px));
    bottom:calc(-1 * env(safe-area-inset-bottom,0px));
    pointer-events:none;z-index:-1;
  }
  .screen-gallery::before{
    background:
      linear-gradient(to bottom,#b5310d 0,transparent calc(env(safe-area-inset-top,0px) + 110px)),
      radial-gradient(ellipse at 14% 6%,#8c1904a6 0,transparent 40%),
      radial-gradient(ellipse at 80% 12%,#fc8a35a3 0,transparent 32%),
      radial-gradient(ellipse at 15% 55%,#ec6418ad 0,transparent 36%),
      radial-gradient(ellipse at 88% 74%,#8a1706b8 0,transparent 40%),
      radial-gradient(ellipse at 42% 100%,#f07924c9 0,transparent 42%),
      linear-gradient(118deg,#a92309,#d94c0f 44%,#af2b0b 78%,#d75517);
  }
  .screen-gallery::after{
    opacity:.36;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M15 18h6m-3-3v6' stroke='%23fff4d9' stroke-width='.7'/%3E%3C/svg%3E"),
      linear-gradient(129deg,transparent 38.95%,#fff0cf80 39%,transparent 39.1%),
      linear-gradient(113deg,transparent 67.95%,#ffebc838 68%,transparent 68.1%),
      linear-gradient(147deg,transparent 78.95%,#ffebc838 79%,transparent 79.1%);
    background-position:0 0,0 0,0 0,0 0;
  }
  .screen-gallery .topbar,.gallery-intro,.gallery-heading,.gallery-filter,
  .screen-gallery .swipe,.screen-gallery .sep,#viewBtn{display:none!important;}
  .screen-gallery .grid{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px 18px;max-width:680px;margin:0 auto;
    padding:calc(env(safe-area-inset-top) + 26px) 18px calc(env(safe-area-inset-bottom) + 116px);
  }
  .screen-gallery .cover{
    min-width:0;aspect-ratio:4/5;border:0;border-radius:7px;
    background:#1e2025;display:block;
    box-shadow:0 3px 5px #4b160a26,0 12px 22px -7px #43110461;
    transition:transform 180ms cubic-bezier(.2,.75,.25,1),box-shadow 180ms ease;
    touch-action:pan-y;outline-offset:4px;
  }
  .screen-gallery .cover .art{object-fit:cover;background:transparent;}
  .screen-gallery .cover > :not(.art):not(.gallery-index){display:none;}
  .screen-gallery .gallery-index{
    position:absolute;right:7px;bottom:7px;z-index:2;pointer-events:none;
    padding:3px 5px;border-radius:3px;background:rgba(0,0,0,.42);color:#ffffff;
    font:500 10px/1.1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.02em;
  }
  .screen-gallery .cover:focus-visible{outline:2px solid #fff4df;}
  .screen-gallery .cover:active{
    transform:scale(.975);box-shadow:0 2px 8px #43110438;
  }
  .screen-gallery .cover-ready .art{animation:gallery-reveal 420ms cubic-bezier(.2,.7,.3,1) both;}
  .screen-gallery .dock{
    left:50%;right:auto;bottom:calc(env(safe-area-inset-bottom) + 18px);
    padding:0;transform:translateX(-50%);width:54px;height:54px;
  }
  .screen-gallery .dock-inner{
    border:0;padding:0;background:none;box-shadow:none;backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .screen-gallery #addBtn{
    position:relative;isolation:isolate;width:54px;height:54px;
    background:#fff3dd;color:#86300f;border:1px solid #fff8ec;
    border-radius:50%;box-shadow:0 4px 8px #52200a2e,0 10px 28px #4716044d;
    animation:gallery-button-in 500ms cubic-bezier(.2,.7,.3,1) both;
  }
  .screen-gallery #addBtn::before{
    content:"";position:absolute;inset:-1px;border:1px solid #fff2d9;
    border-radius:50%;pointer-events:none;animation:gallery-pulse 3.8s ease-out infinite;
  }
  .screen-gallery #addBtn svg{width:25px;height:25px;stroke-width:1.7;animation:gallery-plus 3.8s ease-in-out infinite;}
  .screen-gallery #addBtn:active{transform:scale(.92);background:#ffe7c3;opacity:1;}
  .screen-gallery #addBtn:focus-visible{outline:2px solid #fff7e7;outline-offset:5px;}
  @keyframes gallery-reveal{from{opacity:0;transform:translateY(6px) scale(.99);}to{opacity:1;transform:none;}}
  @keyframes gallery-button-in{from{opacity:0;translate:0 8px;}to{opacity:1;translate:0 0;}}
  @keyframes gallery-pulse{0%,18%{opacity:0;transform:scale(1);}22%{opacity:.45;}65%,100%{opacity:0;transform:scale(1.42);}}
  @keyframes gallery-plus{0%,18%,65%,100%{transform:scale(1);}36%{transform:scale(1.06);}}
}
@media(max-width:359px){
  .screen-gallery .grid{padding-inline:14px;column-gap:14px;row-gap:18px;}
}
@media(prefers-reduced-motion:reduce){
  .screen-gallery .cover,.screen-gallery .cover .art,.screen-gallery #addBtn,
  .screen-gallery #addBtn::before,.screen-gallery #addBtn svg{animation:none!important;transition:none!important;}
  .screen-gallery #addBtn::before{display:none;}
}

/* Two requested color trials share the existing Gallery and controls. */
@media(max-width:899px){
  html:is([data-gallery-theme="red"],[data-gallery-theme="green-orange"],[data-gallery-theme="orange-mono"]){
    --variant-board:#0E3B2B;
    --variant-gradient:linear-gradient(155deg,#0E3B2B 0%,#176347 100%);
    --variant-grid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M15 18h6m-3-3v6' stroke='%23ffffff' stroke-opacity='.3' stroke-width='.7'/%3E%3C/svg%3E");
    --variant-line:rgba(255,255,255,.18);
  }
  html[data-gallery-theme="light"]{
    --variant-board:#EAEFF5;
    --variant-gradient:linear-gradient(155deg,#EAEFF5 0%,#CCCFD1 100%);
    --variant-grid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M15 18h6m-3-3v6' stroke='%2359626c' stroke-opacity='.23' stroke-width='.7'/%3E%3C/svg%3E");
    --variant-line:rgba(70,80,90,.13);
  }
  html:is([data-gallery-theme="red"],[data-gallery-theme="light"],[data-gallery-theme="green-orange"],[data-gallery-theme="orange-mono"]):has(body[data-screen="gallery"]){
    background-color:var(--variant-board);background-image:var(--variant-grid);
  }
  html:is([data-gallery-theme="red"],[data-gallery-theme="light"],[data-gallery-theme="green-orange"],[data-gallery-theme="orange-mono"]) body[data-screen="gallery"]{
    background:var(--variant-board);
  }
  html:is([data-gallery-theme="red"],[data-gallery-theme="light"],[data-gallery-theme="green-orange"],[data-gallery-theme="orange-mono"]) .screen-gallery::before{
    background:linear-gradient(to bottom,var(--variant-board) 0,transparent calc(env(safe-area-inset-top,0px) + 110px)),var(--variant-gradient);
  }
  html:is([data-gallery-theme="red"],[data-gallery-theme="light"],[data-gallery-theme="green-orange"],[data-gallery-theme="orange-mono"]) .screen-gallery::after{
    opacity:.8;
    background-image:var(--variant-grid),
      linear-gradient(129deg,transparent 38.95%,var(--variant-line) 39%,transparent 39.1%),
      linear-gradient(113deg,transparent 67.95%,var(--variant-line) 68%,transparent 68.1%),
      linear-gradient(147deg,transparent 78.95%,var(--variant-line) 79%,transparent 79.1%);
  }
  html:is([data-gallery-theme="red"],[data-gallery-theme="green-orange"],[data-gallery-theme="orange-mono"]) .screen-gallery .grid{
    position:relative;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 12px;
  }
  html:is([data-gallery-theme="red"],[data-gallery-theme="green-orange"],[data-gallery-theme="orange-mono"]) .screen-gallery .cover{
    background:#171717;box-shadow:0 3px 5px #17000026,0 12px 22px -7px #17000070;
  }
  html:is([data-gallery-theme="red"],[data-gallery-theme="green-orange"],[data-gallery-theme="orange-mono"]) .screen-gallery #addBtn{
    background:#ffffff;color:var(--variant-board);border-color:#ffffff;
    box-shadow:0 4px 8px #1c00002e,0 10px 28px #1c00004d;
  }
  html:is([data-gallery-theme="red"],[data-gallery-theme="green-orange"],[data-gallery-theme="orange-mono"]) .screen-gallery #addBtn::before{border-color:#ffffff;}
  html:is([data-gallery-theme="red"],[data-gallery-theme="green-orange"],[data-gallery-theme="orange-mono"]) .screen-gallery #addBtn:active{background:#f4e8e8;}
  html:is([data-gallery-theme="red"],[data-gallery-theme="green-orange"],[data-gallery-theme="orange-mono"]) .screen-gallery .cover:focus-visible{outline-color:#ffffff;}
  html[data-gallery-theme="light"] .screen-gallery .cover{
    background:#FC5611;box-shadow:0 3px 5px #29313b14,0 12px 22px -7px #29313b3d;
  }
  html[data-gallery-theme="light"] .screen-gallery .gallery-index{
    background:rgba(255,255,255,.65);color:#000000;
  }
  html[data-gallery-theme="light"] .screen-gallery #addBtn{
    background:#FC5611;color:#000000;border-color:#FC5611;
    box-shadow:0 4px 8px #29313b1f,0 10px 28px #29313b33;
  }
  html[data-gallery-theme="light"] .screen-gallery #addBtn::before{border-color:#FC5611;}
  html[data-gallery-theme="light"] .screen-gallery #addBtn:active{background:#ef4c08;}
  html[data-gallery-theme="light"] .screen-gallery #addBtn:focus-visible,
  html[data-gallery-theme="light"] .screen-gallery .cover:focus-visible{outline-color:#111111;}
}

/* A complete regular + field on the fixed board, independent of card layout. */
@media(max-width:899px){
  html:is([data-gallery-theme="red"],[data-gallery-theme="green-orange"],[data-gallery-theme="orange-mono"]):has(body[data-screen="gallery"]){
    background-image:var(--variant-grid);background-position:6px calc(-1 * env(safe-area-inset-top,0px));
  }
  html:is([data-gallery-theme="red"],[data-gallery-theme="green-orange"],[data-gallery-theme="orange-mono"]) .screen-gallery::after{
    background-image:var(--variant-grid),
      linear-gradient(129deg,transparent 38.95%,var(--variant-line) 39%,transparent 39.1%),
      linear-gradient(113deg,transparent 67.95%,var(--variant-line) 68%,transparent 68.1%),
      linear-gradient(147deg,transparent 78.95%,var(--variant-line) 79%,transparent 79.1%);
    background-size:36px 36px,auto,auto,auto;
    background-position:6px 0,0 0,0 0,0 0;
  }
  html:is([data-gallery-theme="red"],[data-gallery-theme="green-orange"],[data-gallery-theme="orange-mono"]) .screen-gallery .cover{z-index:1;transition:none;transform-origin:50% 50%;backface-visibility:hidden;}
  html:is([data-gallery-theme="red"],[data-gallery-theme="green-orange"],[data-gallery-theme="orange-mono"]) .screen-gallery .cover:active{transform:none;box-shadow:0 3px 5px #17000026,0 12px 22px -7px #17000070;}
  html:is([data-gallery-theme="red"],[data-gallery-theme="green-orange"],[data-gallery-theme="orange-mono"]) .screen-gallery .cover-ready .art{animation:none;}
  html:is([data-gallery-theme="red"],[data-gallery-theme="green-orange"],[data-gallery-theme="orange-mono"]) .screen-gallery #addBtn,
  html:is([data-gallery-theme="red"],[data-gallery-theme="green-orange"],[data-gallery-theme="orange-mono"]) .screen-gallery #addBtn::before,
  html:is([data-gallery-theme="red"],[data-gallery-theme="green-orange"],[data-gallery-theme="orange-mono"]) .screen-gallery #addBtn svg{animation:none;}
}

@supports(animation-timeline:view()){
  @media(max-width:899px) and (prefers-reduced-motion:no-preference){
    html:is([data-gallery-theme="red"],[data-gallery-theme="green-orange"],[data-gallery-theme="orange-mono"]) body[data-screen="gallery"] #grid[data-motion-engine="native"] .cover{
      animation:gallery-scroll-3d auto linear both;animation-timeline:view();
    }
  }
}
@keyframes gallery-scroll-3d{
  0%{transform:perspective(900px) rotateX(28deg) rotateY(var(--card-yaw,0deg)) translateZ(-32px);}
  42%,58%{transform:perspective(900px) rotateX(0deg) rotateY(0deg) translateZ(0px);}
  100%{transform:perspective(900px) rotateX(-28deg) rotateY(calc(-1 * var(--card-yaw,0deg))) translateZ(-32px);}
}
@media(max-width:899px) and (prefers-reduced-motion:reduce){
  html:is([data-gallery-theme="red"],[data-gallery-theme="green-orange"],[data-gallery-theme="orange-mono"]) .screen-gallery .cover{transform:none!important;animation:none!important;}
}

@media(max-width:899px){
  html[data-gallery-theme="green-orange"] .screen-gallery .cover{background:#FC5611;}
}

@media(max-width:899px){
  html[data-gallery-theme="orange-mono"]{
    --variant-board:#b5310d;
    --variant-gradient:linear-gradient(118deg,#a92309,#d94c0f 44%,#af2b0b 78%,#d75517);
  }
  html[data-gallery-theme="orange-mono"] .screen-gallery::before{
    background:
      linear-gradient(to bottom,#b5310d 0,transparent calc(env(safe-area-inset-top,0px) + 110px)),
      radial-gradient(ellipse at 14% 6%,#8c1904a6 0,transparent 40%),
      radial-gradient(ellipse at 80% 12%,#fc8a35a3 0,transparent 32%),
      radial-gradient(ellipse at 15% 55%,#ec6418ad 0,transparent 36%),
      radial-gradient(ellipse at 88% 74%,#8a1706b8 0,transparent 40%),
      radial-gradient(ellipse at 42% 100%,#f07924c9 0,transparent 42%),
      linear-gradient(118deg,#a92309,#d94c0f 44%,#af2b0b 78%,#d75517);
  }
}