@charset "UTF-8";
/* ============================================================
   biteplay.win — ad slots on the game pages
   ------------------------------------------------------------
   The eight games each own their style.css and never load
   site.css, so this is the smallest shared layer that makes an
   ad slot look deliberate inside any of them. It deliberately
   sets no colour of its own: the label inherits whatever the
   surrounding game already uses, which keeps eight different
   palettes happy without eight sets of overrides.

   .ad-slot stays hidden until ads.js confirms a network is live
   AND has filled that particular slot. The :not([hidden]) is
   load-bearing — this rule is author-origin and would otherwise
   beat the browser's [hidden] rule, revealing unfilled slots as
   blank gaps.
   ============================================================ */
.ad-slot{display:none;}
body.ads-on .ad-slot:not([hidden]){
  display:block;max-width:100%;margin:1.5rem auto 0;
  text-align:initial;
}
.ad-label{
  display:block;margin-bottom:.3rem;text-align:center;
  font-size:.6rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:inherit;opacity:.55;
}
.ad-slot iframe{border:0;display:block;margin:0 auto;max-width:100%;}

/* Inside the end-of-run panel: tighter, and set off by a hairline so it
   reads as an advertisement rather than as part of your result. */
body.ads-on .ad-slot.ad-overlay:not([hidden]){
  /* The negative side margins cancel the panel's own 1.75rem padding, which
     is the same in all eight games. Without them the content box on a 375px
     phone is ~279px and a 320px banner gets clipped. Pulling the slot out to
     the panel's padding edge does not create horizontal overflow, because it
     ends up exactly as wide as the panel itself. */
  margin:1.25rem -1.75rem 0;
}
/* Padding and divider only once ads.js has actually put something in the slot —
   otherwise an open panel shows a stray rule with nothing beneath it. */
body.ads-on .ad-slot.ad-overlay[data-ad-filled]{
  padding:1rem 0 0;
  border-top:1px solid rgba(125,100,85,.18);
}

/* ============================================================
   Collapsed "How to play" on each game's menu
   ------------------------------------------------------------
   The games each style the .rules-card box themselves, so this
   only adds the disclosure behaviour and leaves every game's own
   colours and spacing alone. Closed by default: the rules are
   there for anyone who wants them without being the first thing
   between a player and the game.
   ============================================================ */
.rules-card > summary{
  cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  font-size:.76rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  opacity:.7;transition:opacity .12s ease;
}
.rules-card > summary::-webkit-details-marker{display:none;}
.rules-card > summary::after{
  content:'';flex:0 0 auto;width:7px;height:7px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);margin-bottom:3px;transition:transform .18s ease;
}
.rules-card[open] > summary::after{transform:rotate(-135deg);margin-bottom:0;margin-top:3px;}
.rules-card > summary:hover{opacity:1;}
.rules-card > summary:focus-visible{outline:3px solid currentColor;outline-offset:3px;}
.rules-card[open] > ul{margin-top:.8rem;}

/* ============================================================
   Footer on each game's menu
   ------------------------------------------------------------
   Sits inside .menu-inner, which scrolls, so it costs the game
   screen nothing. Before this, a game page had exactly one
   outbound link and the legal pages could not be reached from
   inside a game at all. Colour is inherited and dimmed rather
   than fixed, so it suits eight different palettes.
   ============================================================ */
.game-foot{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.1rem;
  margin:1.7rem 0 0;padding-top:1.2rem;
  border-top:1.5px solid rgba(125,100,85,.16);
}
.game-foot a{
  font-size:.78rem;font-weight:700;text-decoration:none;color:inherit;
  opacity:.55;padding:.3rem .62rem;border-radius:999px;
  transition:opacity .12s ease;
}
.game-foot a:hover{opacity:1;}
.game-foot a:focus-visible{outline:2px solid currentColor;outline-offset:2px;}

/* ============================================================
   Touch behaviour on the play screens
   ------------------------------------------------------------
   A game screen is not a document, and browsers treat it like one
   by default: a long press selects text or raises the copy/define
   callout, and a double tap zooms.

   `user-scalable=no` in the viewport tag does NOT stop the zoom.
   iOS Safari has ignored it since iOS 10, deliberately, because
   sites used it to block people from zooming text they could not
   read. `touch-action` is the only thing that actually works, and
   it is honoured precisely because it is per-element: the menu
   above still scrolls and still zooms.

   Scoped to #game throughout. #menu must keep panning and pinching
   — it is a page of text with a scrollbar.
   ============================================================ */
#game, #game *{
  -webkit-user-select:none; -moz-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}
/* manipulation keeps scrolling and pinch, drops the double-tap zoom
   and the 300ms click delay that comes with it */
#game{touch-action:manipulation;}

/* The play surface takes every gesture itself: no pan, no zoom, no
   callout. Anything the game reads as a drag has to start here. */
#game #board,
#game #grid,
#game #mine,
#game canvas,
#game .padbar, #game .touchpad, #game .touchbar,
#game #playArea, #game #boardArea, #game #stageArea,
#game #mineArea, #game #skyArea, #game #boardWrap{
  touch-action:none;
}

/* Pointer events only; a phantom mouse event after a touch can fire a
   second action a moment later. */
#game button{touch-action:manipulation;}