/* ═══════════════════════════════════════════════════════════════
   shared/game-shell — the chrome a Masa game is allowed to have.

   CONVENTION, for this and every game after it:

   During play a game has NO site header, NO drawer, NO footer and no
   navigation bars. A game is a full-screen thing you are inside; the
   site's furniture belongs outside it. What a game gets instead is one
   quiet utility layer with at most three things — a way out to the
   lobby, where you are in the session, and a way to share the game.

   On the start and result screens the same layer stays available and
   stays quiet: the result is the page, not the chrome. Legal and
   privacy links live on the site around the game, not inside it.

   Everything here is positioned over the game's own surface and drawn
   in currentColor, so a game sets the tone by setting one colour.
   ═══════════════════════════════════════════════════════════════ */

.gs-bar{
  position:absolute; top:0; inset-inline:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right))
          18px calc(10px + env(safe-area-inset-left));
  color:#F9F1DD; pointer-events:none;
}
.gs-bar > *{pointer-events:auto}
.gs-side{display:flex; align-items:center; gap:2px}

.gs-btn{
  width:38px; height:38px; border:0; padding:0; border-radius:50%;
  background:rgba(20,14,9,.34); color:inherit; cursor:pointer;
  display:grid; place-items:center; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  transition:background 150ms ease, transform 150ms cubic-bezier(.22,1,.36,1);
}
.gs-btn:hover{background:rgba(20,14,9,.5)}
.gs-btn:active{transform:scale(.92)}
.gs-btn:focus-visible{outline:2px solid currentColor; outline-offset:2px}
.gs-btn svg{width:19px; height:19px; display:block; fill:none;
  stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}

.gs-progress{
  font:600 14px/1 'Noto Sans Hebrew',system-ui,sans-serif;
  direction:ltr; unicode-bidi:isolate; white-space:nowrap;
  text-shadow:0 1px 4px rgba(0,0,0,.45); padding:0 6px;
}
.gs-bar[data-tone="ink"]{color:#2E2014}
.gs-bar[data-tone="ink"] .gs-btn{background:rgba(46,32,20,.08)}
.gs-bar[data-tone="ink"] .gs-btn:hover{background:rgba(46,32,20,.16)}
.gs-bar[data-tone="ink"] .gs-progress{text-shadow:none}

/* ── the copy-fallback acknowledgement ───────────────────────────── */
.gs-toast{
  position:fixed; z-index:60; inset-inline:0; bottom:calc(22px + env(safe-area-inset-bottom));
  margin-inline:auto; width:max-content; max-width:80vw;
  background:#2E2014; color:#F9F1DD; border-radius:999px;
  padding:10px 18px; font:600 14px/1.3 'Noto Sans Hebrew',system-ui,sans-serif;
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity 200ms ease, transform 200ms cubic-bezier(.22,1,.36,1);
}
.gs-toast.is-on{opacity:1; transform:none}

/* ── the source card ─────────────────────────────────────────────
   A photograph carries obligations. They are met properly, in the
   game's own voice, in a card that covers a corner rather than the
   picture — never a browser tooltip, never a full-screen modal. */
.gs-source[open]{position:static}
dialog.gs-card{
  border:0; padding:0; margin:0; max-width:none; max-height:none;
  position:fixed; inset:auto 0 0 0; width:100%;
  background:transparent; overflow:visible;
}
dialog.gs-card::backdrop{background:rgba(20,14,9,.42)}
.gs-card-in{
  background:#F9F1DD; color:#2E2014;
  border-radius:16px 16px 0 0; box-shadow:0 -8px 30px rgba(46,32,20,.3);
  padding:16px 18px calc(16px + env(safe-area-inset-bottom));
  max-width:520px; margin:0 auto;
  animation:gs-rise 240ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes gs-rise{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.gs-card-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px}
.gs-card-title{font:700 13px/1 'Noto Sans Hebrew',system-ui,sans-serif; color:#6F5A3B; letter-spacing:.02em}
.gs-card-x{width:32px;height:32px;border:0;border-radius:50%;background:rgba(46,32,20,.07);
  color:#2E2014;cursor:pointer;display:grid;place-items:center;padding:0}
.gs-card-x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.gs-row{display:flex; gap:10px; align-items:baseline; padding:5px 0; font-size:15px; line-height:1.4}
.gs-row + .gs-row{border-top:1px solid rgba(196,168,118,.45)}
.gs-k{flex:0 0 auto; min-width:5.5ch; color:#6F5A3B; font-size:13px; font-weight:600}
.gs-v{flex:1 1 auto; min-width:0; overflow-wrap:anywhere}
.gs-link{display:inline-flex; align-items:center; gap:5px; margin-top:12px;
  color:#9C3F16; font-weight:700; font-size:15px; text-decoration:none}
.gs-link svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gs-link:hover{text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  .gs-btn,.gs-toast,.gs-card-in{transition-duration:1ms!important;animation-duration:1ms!important}
}