/* Styles specific to Şeker Avı; artwork paths resolve from assets/. */
@import url("design-tokens.css");

body.sweets-page { --layout-gap: 2rem; --shell-shadow: 90, 70, 30; }




  h1 {
    font-size: 1.3rem;
    margin: 0 0 0.3rem;
    color: var(--accent-dark);
  }


  p.subtitle {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--muted);
  }


  .stats {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.4rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--panel-border);
  }


  .stat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.4rem;
  }


  .stat .value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-dark);
  }


  .stat .label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
  }


  .controls {
    width: 320px;
    flex: 0 0 320px;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.1rem 1.2rem;
    border-radius: 20px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    box-shadow: 0 12px 30px rgba(90, 70, 30, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    box-sizing: border-box;
  }


  /*
   * The full stats/hint/banner sidebar is hidden for now — kids don't
   * need a moves/time readout mid-game. Its markup and JS wiring stay
   * intact (untouched, off-screen) so it's easy to bring pieces of it
   * back later. The restart icon is the only control kept visible,
   * floated on the board panel itself.
   */
  .controls {
    display: none;
  }


  button {
    font: inherit;
    padding: 0.5rem 0.9rem;
    border-radius: 10px;
    border: 1px solid var(--panel-border);
    background: #fffdf6;
    color: var(--ink);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
  }


  button:hover {
    background: #fff3dc;
  }


  button.primary {
    background: linear-gradient(180deg, #dc9a4c, var(--accent));
    border-color: var(--accent-dark);
    color: #fffaf0;
    font-weight: 600;
  }


  button.primary:hover {
    background: linear-gradient(180deg, #e2a55a, #cf8438);
  }


  #hint {
    min-height: 1.4rem;
    font-size: 0.85rem;
    color: var(--moss-dark);
  }


  .lose-banner {
    display: none;
    background: #fbece2;
    border: 2px solid #c0603a;
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
  }


  .lose-banner.show {
    display: block;
  }


  .lose-banner h2 {
    margin: 0 0 0.3rem;
    color: #a3492a;
  }


  /* Swaps the collectible artwork per theme — these change shape, not
     just color, so each theme provides its own --sweet1/2/3-img. */
  g-chess-board::part(piece-wc) {
    background-image: var(--sweet1-img);
  }


  g-chess-board::part(piece-wd) {
    background-image: var(--sweet2-img);
  }


  g-chess-board::part(piece-wg) {
    background-image: var(--sweet3-img);
  }


  /*
   * Grass wall obstacle. There are 16 variants (customPieceTypes letters
   * a,e,f,h,i,j,m,o,s,t,u,v,w,x,y,z), one per combination of which of the
   * four orthogonal neighbors is also grass, so adjoining walls fuse into
   * one continuous meadow patch instead of 16 separate isolated tufts.
   * The inset/rounding for unconnected edges is baked into each SVG via
   * a clipPath (not CSS padding), so connected edges are pixel-flush
   * against the neighboring tile with no seam.
   */
  g-chess-board::part(piece-wa),
  g-chess-board::part(piece-we),
  g-chess-board::part(piece-wf),
  g-chess-board::part(piece-wh),
  g-chess-board::part(piece-wi),
  g-chess-board::part(piece-wj),
  g-chess-board::part(piece-wm),
  g-chess-board::part(piece-wo),
  g-chess-board::part(piece-ws),
  g-chess-board::part(piece-wt),
  g-chess-board::part(piece-wu),
  g-chess-board::part(piece-wv),
  g-chess-board::part(piece-ww),
  g-chess-board::part(piece-wx),
  g-chess-board::part(piece-wy),
  g-chess-board::part(piece-wz) {
    padding: 0;
    background-size: 100% 100%;
    filter: var(--terrain-filter);
    transition: filter 0.4s ease;
  }


  g-chess-board::part(piece-wa) {
    background-image: url("terrain/grass-a.svg");
  }


  g-chess-board::part(piece-we) {
    background-image: url("terrain/grass-e.svg");
  }


  g-chess-board::part(piece-wf) {
    background-image: url("terrain/grass-f.svg");
  }


  g-chess-board::part(piece-wh) {
    background-image: url("terrain/grass-h.svg");
  }


  g-chess-board::part(piece-wi) {
    background-image: url("terrain/grass-i.svg");
  }


  g-chess-board::part(piece-wj) {
    background-image: url("terrain/grass-j.svg");
  }


  g-chess-board::part(piece-wm) {
    background-image: url("terrain/grass-m.svg");
  }


  g-chess-board::part(piece-wo) {
    background-image: url("terrain/grass-o.svg");
  }


  g-chess-board::part(piece-ws) {
    background-image: url("terrain/grass-s.svg");
  }


  g-chess-board::part(piece-wt) {
    background-image: url("terrain/grass-t.svg");
  }


  g-chess-board::part(piece-wu) {
    background-image: url("terrain/grass-u.svg");
  }


  g-chess-board::part(piece-wv) {
    background-image: url("terrain/grass-v.svg");
  }


  g-chess-board::part(piece-ww) {
    background-image: url("terrain/grass-w.svg");
  }


  g-chess-board::part(piece-wx) {
    background-image: url("terrain/grass-x.svg");
  }


  g-chess-board::part(piece-wy) {
    background-image: url("terrain/grass-y.svg");
  }


  g-chess-board::part(piece-wz) {
    background-image: url("terrain/grass-z.svg");
  }


  /* The dangerous monster chasing the rook, mapped via customPieceTypes letter l (black) */
  g-chess-board::part(piece-bl) {
    background-image: url("monster.svg");
    filter: var(--enemy-filter);
    transition: filter 0.4s ease;
  }
#restart-icon:hover svg { transform: rotate(-25deg); }


/* Time pickups: short-lived collectibles that adjust the countdown timer
   (assets/js/time-pickups.js). Drawn as a light-DOM overlay icon rather than
   a real g-chess-board piece — this page's customPieceTypes letter budget
   (16 grass variants + 3 sweets + monster) already fills all 20 non-FEN
   lowercase letters, so a new piece type isn't available. Each pickup shows
   its own exact value (not a hidden random amount); bonus/penalty are also
   told apart by color. Overlay kept separate from #annotation-overlay, which
   BoardAnnotations clears on every render and would otherwise wipe it out.
   Sized to match the board's content box (board-wrap's padding), not the
   wrap itself. */
.pickups-overlay {
  position: absolute;
  inset: var(--board-inset-y, var(--board-pad)) var(--board-inset-x, var(--board-pad)) var(--board-inset-b, var(--board-inset-y, var(--board-pad)));
  pointer-events: none;
  container-type: size;
}


/* No badge/circle — the numeral itself is the whole sprite, styled to read
   as a glass/crystal object: a light-to-saturated gradient fill (glass's
   top-lit, deeper-at-the-base look), a dark stroke so it stays legible on
   both light and dark squares with no background shape behind it, and
   layered drop-shadows for refraction-like depth. */
.pickup-icon {
  position: absolute;
  width: 12.5%;
  height: 12.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.pickup-icon.pickup-blinking { animation: pickup-blink 0.5s steps(1, start) infinite; }
@keyframes pickup-blink { 50% { opacity: 0; } }

.pickup-value {
  font-weight: 900;
  font-size: 5cqw; /* overlay is 8 squares wide: ~0.4 of a square, so "+10" fits */
  font-variant-numeric: tabular-nums;
  line-height: 1;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Two stacked background-images: a soft, wide bright band (the glass
   "shine"/specular reflection) over the base color gradient. The band's
   stops are spread out and capped well under full opacity so it reads as a
   gentle sheen — narrow, high-contrast stops here look like a scratch
   instead.
   The dark edge is four 1px-offset drop-shadows (not `-webkit-text-stroke`
   — a stroke path self-intersects at a thin glyph like "+"'s crossbar,
   breaking it into visible fragments; stacked drop-shadows are just
   translated copies of the glyph, so they can't self-overlap that way). */
.pickup-icon.positive .pickup-value {
  background-image:
    linear-gradient(125deg, transparent 12%, rgba(255, 255, 255, 0.55) 38%, rgba(255, 255, 255, 0.25) 50%, transparent 74%),
    linear-gradient(165deg, #fffef8 0%, #fff6d8 16%, #ffe18a 38%, #f0a635 66%, #c97a16 88%, #9a5c0f 100%);
  filter:
    drop-shadow(1px 0 0 #6b3f12) drop-shadow(-1px 0 0 #6b3f12)
    drop-shadow(0 1px 0 #6b3f12) drop-shadow(0 -1px 0 #6b3f12)
    drop-shadow(0 2px 1px rgba(255, 255, 255, 0.5))
    drop-shadow(0 4px 3px rgba(90, 50, 5, 0.6))
    drop-shadow(0 0 5px rgba(255, 244, 200, 0.55));
}
.pickup-icon.negative .pickup-value {
  background-image:
    linear-gradient(125deg, transparent 12%, rgba(255, 255, 255, 0.5) 38%, rgba(255, 255, 255, 0.2) 50%, transparent 74%),
    linear-gradient(165deg, #fff8f6 0%, #ffe3dc 16%, #ff9683 38%, #d6462f 66%, #a3301f 88%, #6b190f 100%);
  filter:
    drop-shadow(1px 0 0 #4a140b) drop-shadow(-1px 0 0 #4a140b)
    drop-shadow(0 1px 0 #4a140b) drop-shadow(0 -1px 0 #4a140b)
    drop-shadow(0 2px 1px rgba(255, 255, 255, 0.4))
    drop-shadow(0 4px 3px rgba(60, 10, 5, 0.6))
    drop-shadow(0 0 5px rgba(255, 220, 210, 0.45));
}


.time-delta-float {
  position: absolute;
  width: 12.5%;
  height: 12.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  animation: time-delta-rise 0.9s ease-out forwards;
}
.time-delta-float.positive { color: #ffcf5c; }
.time-delta-float.negative { color: #ff6b57; }
@keyframes time-delta-rise {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-120%); opacity: 0; }
}