/* Shared chrome for the sailing's two discovery surfaces.
   The palette, borders and radii are the sailing page's own, so arriving here from it does not
   feel like leaving. Two panes side by side where there is room, stacked on a phone with the
   viewer first - the thing you came to look at - and the inventory under it. */
*{box-sizing:border-box}
body{margin:0;background:#06101f;color:#f4f5ff;
  font:15px system-ui,-apple-system,"Segoe UI",Arial,sans-serif;line-height:1.45;
  overflow-x:hidden;-webkit-text-size-adjust:100%}
a{color:#ffd45c}
.jwrap{max-width:1180px;margin:0 auto;padding:16px 15px 34px}

.jtop{display:flex;align-items:center;gap:11px;margin-bottom:4px}
.jtop img{width:42px;height:42px;border-radius:11px;flex:none;object-fit:contain}
.jtop .t{min-width:0}
.jtop h1{margin:0;font-size:19px;line-height:1.2;color:#ffd35d}
.jtop small{display:block;font-size:11.5px;color:#9fb0cb;margin-top:2px}
.jback{display:inline-block;margin:10px 0 2px;font-size:13px;font-weight:700;text-decoration:none}
.jback:hover{text-decoration:underline}

.jlede{font-size:13px;color:#c6d2e5;margin:9px 2px 0}

/* THE SELECTED DUCK, ABOVE THE COMPOSITION.
   The frame holds the duck's real Deck Journey. It is given generous height because what is
   inside it is a whole page - identity, zone, tokens, reveal - and a cramped frame would turn
   a working control into one nobody can reach. "Open full page" is there for exactly the
   moments a frame is the wrong shape. */
.jduck{margin:14px 0 4px;border:1.5px solid #85488c;border-radius:18px;overflow:hidden;
  background:linear-gradient(120deg,#332039,#1b2644 90%)}
.jduck[hidden]{display:none}
.jduck-bar{display:flex;align-items:center;gap:10px;padding:9px 12px;background:#241a35}
.jduck-bar strong{flex:1;min-width:0;font-size:13px;color:#ffd35d;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jduck-open{font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap}
.jduck-x{font:inherit;font-size:19px;line-height:1;cursor:pointer;color:#e3d7e8;
  background:none;border:0;padding:0 2px}
.jduck-x:hover{color:#fff}
/* THE FRAME IS BOXED, AND THE BOX IS WHAT HAS THE HEIGHT.
   Mobile browsers - iOS Safari especially - expand an iframe to the height of its content
   and ignore the height set on the element, which is how a tall embedded page in portrait
   ends up painted across whatever follows it while landscape, where the same page is short
   enough to fit, looks correct. Giving the frame a wrapper that owns the height and scrolls
   is the standard remedy, and it changes nothing inside the embedded page. */
.jduck-view{height:74vh;min-height:460px;overflow:auto;-webkit-overflow-scrolling:touch;
  background:#eef2f4}
.jduck iframe{display:block;width:100%;height:100%;min-height:100%;border:0;background:#eef2f4}
@media(max-width:640px){.jduck-view{height:78vh;min-height:420px}}
/* and the panel is its own stacking context, above the composition, in every engine */
.jduck{position:relative;z-index:2}
.jcompose{position:relative;z-index:0}


.jpanes{display:grid;gap:16px;margin-top:15px}
@media(min-width:900px){.jpanes{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}}

.jpane{border:1.5px solid #5158a9;border-radius:20px;padding:13px;
  background:linear-gradient(120deg,#1c2d52,#171b39)}
.jpane.left{border-color:#85488c;background:linear-gradient(120deg,#332039,#1b2644 90%)}
.jpane h2{margin:0 0 4px;font-size:15px;color:#ffd35d}
.jpane .sub{margin:0 0 11px;font-size:11.5px;color:#9fb0cb;line-height:1.4}

/* ---- THE ARTWORK IS THE CONTROL ----
   Each approved sticker is a real button and nothing else: no pill behind it, no slab, no
   second copy of the word already lettered into the picture. The button is stripped to
   nothing so the artwork is the entire visible control, and everything that makes it feel
   like a button is done with filter and transform, which paint without reflowing - so
   hovering, pressing or selecting never moves the row. */
.art-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.art-row.tabs{gap:8px}
.art-btn{appearance:none;background:none;border:0;padding:0;margin:0;cursor:pointer;
  line-height:0;border-radius:14px;
  transition:transform .18s ease,filter .18s ease;
  filter:saturate(.78) brightness(.82) drop-shadow(0 2px 5px #0006)}
.art-btn img{display:block;width:124px;height:auto;pointer-events:none}
.art-row.tabs .art-btn img{width:108px}
.aboard-row .art-btn img{width:150px}
.art-btn:hover{transform:scale(1.06);filter:saturate(1) brightness(1.04) drop-shadow(0 4px 12px #0007)}
.art-btn:active{transform:scale(.97)}
/* the chosen one stays lit, and says so to a screen reader as well as to an eye */
.art-btn[aria-pressed="true"]{filter:saturate(1.06) brightness(1.1)
  drop-shadow(0 0 10px rgba(255,211,93,.5)) drop-shadow(0 3px 9px #0007)}
.art-btn:focus-visible{outline:3px solid #ffd35d;outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .art-btn{transition:none}
  .art-btn:hover,.art-btn:active{transform:none}
}
@media(max-width:420px){
  .art-btn img{width:104px}
  .art-row.tabs .art-btn img{width:92px}
  .aboard-row .art-btn img{width:132px}
}
/* a name for the control that only a screen reader needs - the eye already has the lettering */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}


/* ---- Coming Aboard: the owner's own entry ---- */
.aboard-add{margin:2px 0 12px}
.aboard-label{display:block;font-size:12.5px;color:#c6d2e5;margin-bottom:6px}
.aboard-field{display:flex;gap:8px}
.aboard-field input{flex:1;min-width:0;font:inherit;font-size:14px;color:#fff;
  background:#111b31;border:1.5px solid #3b4780;border-radius:12px;padding:10px 12px}
.aboard-field input:focus-visible{outline:2px solid #ffd35d;outline-offset:1px}
.aboard-field button{font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;color:#0a1628;
  background:#ffd35d;border:0;border-radius:12px;padding:10px 16px}
.aboard-field button:hover{filter:brightness(1.08)}
.aboard-said{min-height:17px;font-size:12px;margin-top:7px;color:#9fb0cb}
.aboard-said.good{color:#7ee0a8}
.aboard-said.bad{color:#ffab9a}
.aboard-off{font-size:12.5px;color:#9fb0cb;margin:0;line-height:1.45}
.inv-list{display:grid;gap:8px;max-height:60vh;overflow:auto;padding-right:2px}
@media(min-width:900px){.inv-list{max-height:68vh}}
.inv-card{display:flex;align-items:center;gap:10px;padding:8px 10px;text-decoration:none;
  color:#fff;border:1px solid #38344f;border-radius:14px;background:#141d33}
.inv-card:hover{border-color:#85488c}
.inv-card img{width:46px;height:46px;flex:none;border-radius:10px;object-fit:cover;background:#0b1526}
.inv-noart{width:46px;height:46px;flex:none;border-radius:10px;background:#0b1526;
  display:flex;align-items:center;justify-content:center;font-size:23px}
.inv-meta{min-width:0}
.inv-meta strong{display:block;font-size:14px;color:#ffd35d;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inv-meta small{display:block;font-size:11px;color:#b9c6da;margin-top:2px;text-transform:lowercase}
.inv-empty{padding:16px 10px;text-align:center;font-size:12.5px;color:#9fb0cb}
.inv-note{font-size:11px;color:#8fa0bb;margin-top:9px;line-height:1.4}

/* The deck picker and the map both bring their own styles; these only give them a box. */
#viewer{min-height:220px}


/* The composition, the Ducks on Board rows and the deck rail moved to
   /assets/deck-board.css when the duck's own Deck Journey began showing the same three
   areas. Linked ahead of this sheet, so anything here still overrides them. */