/* ============================================================
   Shared styles for every page (index.html, play.html).
   Tile sizes are driven by --cell / --gap so all pages match (Poki grid):
     small  = 1x1 cell   (94 x 94 on desktop)
     wide   = 2x1 cells  (204 x 94)  horizontal rectangle
     medium = 2x2 cells  (204 x 204)
     big    = 3x3 cells  (314 x 314)
   ============================================================ */

:root {
  --cell: min(94px, calc((100vw - 56px) / 3)); /* 3 columns (a big tile) always fit on phones */
  --gap: 16px;
  --navy: #002b50;
  --blue: #009cff;
  --soft: #f0f4f8;
  --radius: 16px;
  --ease: cubic-bezier(.25, .1, .25, 1);
  --shadow-tile: 0 5px 0 rgba(0, 43, 80, 0.18), 0 10px 18px rgba(0, 43, 80, 0.12);
  --shadow-hover: 0 10px 0 rgba(0, 43, 80, 0.14), 0 18px 28px rgba(0, 43, 80, 0.22);
  --shadow-nav: 0 8px 24px rgba(0, 43, 80, 0.12), 0 2px 6px rgba(0, 43, 80, 0.08);
}

body {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #1dd6c3;
  background-image: url('../images/bg-tropical.svg');
  background-position: center;
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: 400px 400px;
  min-height: 100vh;
  color: #1e293b;
  -webkit-tap-highlight-color: transparent;
}
/* One-line category strip (play page, above "more games") */
.cat-strip { display: flex; gap: 8px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.cat-strip::-webkit-scrollbar { display: none; }
.cat-strip a {
  flex-shrink: 0; padding: 7px 16px; border-radius: 999px; white-space: nowrap;
  background: rgba(255,255,255,.92); color: var(--navy); font-size: 13px; font-weight: 900;
  box-shadow: 0 2px 6px rgba(0, 43, 80, .12);
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.cat-strip a:hover { background: #fff; transform: translateY(-1px); }
.cat-strip a.is-current { background: var(--navy); color: #fff; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #17bead; }
::-webkit-scrollbar-thumb { background: var(--navy); border-radius: 6px; }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ---------------- Header ---------------- */
.site-header { position: sticky; top: 12px; z-index: 50; padding: 0 12px; }
.site-header__bar {
  max-width: 1160px; margin: 0 auto;
  background: #fff; border-radius: 999px; box-shadow: var(--shadow-nav);
  padding: 8px; display: flex; align-items: center; gap: 10px;
}
.hdr-btn {
  flex-shrink: 0; height: 40px; min-width: 40px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 999px; background: var(--soft); color: var(--navy);
  font-weight: 900; font-size: 13px; transition: background .15s, color .15s;
}
.hdr-btn:hover { background: var(--navy); color: #fff; }
.hdr-btn svg { width: 18px; height: 18px; }
.hdr-logo { flex-shrink: 0; display: flex; align-items: center; padding: 0 6px 0 0; }

/* Brand: toucan icon + "Play" (navy) "Toucan" (orange) */
.brand { display: inline-flex; align-items: center; gap: 4px; }
.brand__icon { width: 44px; height: 44px; margin: -4px 0; transition: transform .3s var(--ease); }
.brand:hover .brand__icon { transform: rotate(-6deg) scale(1.06); }
.brand__word { font-weight: 1000; font-size: 24px; line-height: 1; letter-spacing: -0.5px; white-space: nowrap; }
.brand__a { color: var(--navy); }
.brand__b { color: #f77f00; }
.brand--sm .brand__icon { width: 32px; height: 32px; margin: 0; }
.brand--sm .brand__word { font-size: 18px; }
.hdr-search { position: relative; flex: 1; min-width: 0; }
.hdr-search input {
  width: 100%; height: 40px; border: 0; border-radius: 999px; background: var(--soft);
  color: var(--navy); font-weight: 800; font-size: 14px; padding: 0 16px 0 40px; outline: none;
}
.hdr-search input:focus { box-shadow: 0 0 0 2px var(--blue); }
.hdr-search > svg { position: absolute; left: 13px; top: 11px; width: 18px; height: 18px; color: #94a3b8; }
.hdr-crumb {
  flex-shrink: 1; min-width: 0; display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 900; color: var(--navy); white-space: nowrap; padding: 0 6px;
}
.hdr-crumb a:hover { color: var(--blue); }
.hdr-crumb .sep { color: #94a3b8; }
.hdr-crumb .current { color: var(--blue); overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.hdr-fav { color: #f59e0b; }
.hdr-fav .count {
  background: var(--navy); color: #fff; font-size: 10px; border-radius: 999px;
  padding: 1px 6px; line-height: 16px;
}
.hdr-fav:hover .count { background: #fff; color: var(--navy); }

/* Dropdown panels (search results + favorites) */
.hdr-panel {
  position: absolute; top: calc(100% + 10px); z-index: 60;
  background: #fff; border-radius: 20px; box-shadow: var(--shadow-nav); padding: 12px;
}
.hdr-panel[hidden] { display: none; }
.search-results { left: 0; right: 0; max-height: 70vh; overflow: auto; }
.search-row { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 12px; font-weight: 800; color: var(--navy); font-size: 13px; }
.search-row:hover, .search-row.is-active { background: var(--soft); }
.search-row img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.search-row small { display: block; color: #64748b; font-size: 11px; }
.fav-panel { right: 0; width: calc(2 * var(--cell) + var(--gap) + 24px); }
.panel-title { font-size: 13px; font-weight: 900; color: var(--navy); margin: 0 2px 10px; }
.panel-empty { font-size: 12px; font-weight: 700; color: #64748b; padding: 4px 2px; }

@media (max-width: 767px) {
  .hdr-crumb, .hdr-btn .label { display: none; }
  .brand__icon { width: 36px; height: 36px; }
  .brand__word { font-size: 19px; }
  .hdr-btn { padding: 0 10px; }
}
@media (max-width: 420px) {
  .hdr-logo .brand__icon { width: 30px; height: 30px; }
  .hdr-logo .brand__word { font-size: 15px; letter-spacing: -0.3px; }
  .site-header__bar { gap: 6px; }
}


/* ---------------- Tile grid ---------------- */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--cell));
  grid-auto-rows: var(--cell);
  grid-auto-flow: dense;
  gap: var(--gap);
  justify-content: center;
}
.tile-grid--1 { grid-template-columns: var(--cell); }
.tile-grid--2 { grid-template-columns: repeat(2, var(--cell)); }
.tile-grid--3 { grid-template-columns: repeat(3, var(--cell)); }

.t-small  { grid-column: span 1; grid-row: span 1; }
.t-wide   { grid-column: span 2; grid-row: span 1; }
.t-medium { grid-column: span 2; grid-row: span 2; }
.t-big    { grid-column: span 3; grid-row: span 3; }

/* One tile look for every page: 2px white border, rounded, soft shadow.
   Hover = one smooth scale (no bounce, no second image zoom) like Poki. */
.g-tile {
  position: relative; display: block; overflow: hidden;
  width: 100%; height: 100%;
  border: 2px solid #fff; border-radius: var(--radius); background: #fff;
  box-shadow: 0 6px 12px rgba(0, 43, 80, .14);
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.g-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.g-tile__shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0) 60%);
  opacity: 0; transition: opacity .3s var(--ease);
}
.g-tile__title {
  position: absolute; left: 8px; right: 8px; bottom: 6px;
  color: #fff; font-weight: 900; font-size: 11px; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.t-medium .g-tile__title, .t-big .g-tile__title { font-size: 15px; left: 12px; bottom: 10px; }
.g-tile__badge {
  position: absolute; top: 8px; left: 8px;
  padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.95);
  color: var(--navy); font-size: 10px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.t-small .g-tile__badge, .t-wide .g-tile__badge { display: none; }

@media (hover: hover) {
  .g-tile:hover { transform: scale(1.04) translateZ(0); box-shadow: 0 12px 24px rgba(0, 43, 80, .28); z-index: 2; }
  .g-tile:hover .g-tile__shade { opacity: 1; }
  .g-tile:hover .g-tile__title { opacity: 1; transform: none; }
}
/* Touch screens have no hover: keep titles visible */
@media (hover: none) {
  .g-tile__shade { opacity: 1; }
  .g-tile__title { opacity: 1; transform: none; }
}
.g-tile:active { transform: scale(.97) translateZ(0); transition-duration: .12s; }

@media (max-width: 639px) {
  :root { --gap: 12px; --cell: min(94px, calc((100vw - 48px) / 3)); }
  .g-tile__title { font-size: 10px; left: 6px; bottom: 4px; }
  .t-medium .g-tile__title, .t-big .g-tile__title { font-size: 13px; }
}

/* ---------------- Ad slots ---------------- */
.ad-slot {
  display: flex; flex-direction: column; overflow: hidden;
  background: rgba(255,255,255,.9); border: 2px solid #fff; border-radius: var(--radius);
  box-shadow: 0 6px 12px rgba(0, 43, 80, .14); padding: 6px;
}
.ad-slot__label {
  display: flex; justify-content: space-between; font: 700 10px/1 ui-monospace, monospace;
  color: #64748b; text-transform: uppercase; margin-bottom: 4px; padding: 0 4px;
}
.ad-slot__body {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: #f1f5f9; border: 1px dashed #cbd5e1; border-radius: 10px;
  color: #475569; font-size: 12px; font-weight: 800; padding: 6px;
}
/* 3x3 cells (314 x 314 on desktop) — holds a 300x250 unit */
.ad-big { width: calc(3 * var(--cell) + 2 * var(--gap)); height: calc(3 * var(--cell) + 2 * var(--gap)); }

/* ---------------- Play page layout ----------------
   desktop:  [2 tile cols] [big 16:9 game + info bar] [300x250 ad + 3 tile cols]
   The game grows with the screen (like Poki) but never taller than the window.
   play.html shows only as many side tiles as fit next to the game. */
.play-layout {
  --left: calc(2 * var(--cell) + var(--gap));
  --right: calc(3 * var(--cell) + 2 * var(--gap));
  display: grid;
  grid-template-columns: var(--left) minmax(0, 1fr) var(--right);
  grid-template-areas: "left center right";
  gap: var(--gap);
  max-width: 1640px;
  margin: 0 auto;
  align-items: start;
}
.play-left   { grid-area: left; }
.play-center { grid-area: center; display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.play-right  { grid-area: right; display: flex; flex-direction: column; gap: var(--gap); }

.theater {
  position: relative;
  width: min(100%, calc((100vh - 190px) * 16 / 9));
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  background: #000; border: 2px solid #fff; border-radius: 20px;
  overflow: hidden; box-shadow: 0 10px 24px rgba(0, 43, 80, .22);
}
.theater iframe { display: block; width: 100%; height: 100%; border: 0; }
.theater-controls {
  position: absolute; top: 10px; right: 10px; z-index: 5; display: flex; gap: 8px;
}
.theater-btn {
  width: 38px; height: 38px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0, 43, 80, .75); color: #fff; backdrop-filter: blur(4px);
  border: 2px solid rgba(255,255,255,.85); transition: background .2s var(--ease), transform .2s var(--ease);
}
.theater-btn:hover { background: var(--blue); transform: scale(1.08); }
.theater-btn svg { width: 18px; height: 18px; }
.theater .only-fs { display: none; }
.theater.is-fs .only-fs { display: inline-flex; }
.theater.is-fs .no-fs { display: none; }

.theater:fullscreen, .theater.is-pseudo-fs {
  width: 100vw; height: 100vh; max-width: none; aspect-ratio: auto; border: 0; border-radius: 0;
}
.theater:-webkit-full-screen { width: 100vw; height: 100vh; max-width: none; border: 0; border-radius: 0; }
.theater.is-pseudo-fs { position: fixed; inset: 0; z-index: 100; }

.game-bar {
  width: 100%; margin: 0 auto;
  background: #fff; border-radius: 20px; box-shadow: 0 6px 12px rgba(0, 43, 80, .14);
  padding: 10px 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
}
.bar-btn {
  height: 34px; padding: 0 12px; border-radius: 999px; background: var(--soft); color: var(--navy);
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 900;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.bar-btn:hover { background: #e2e8f0; }
.bar-btn.is-on { background: var(--navy); color: #fff; }
.bar-btn--primary { background: var(--blue); color: #fff; }
.bar-btn--primary:hover { background: #0086dc; }
.bar-btn svg { width: 16px; height: 16px; }
.info-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--soft); color: var(--navy); font-size: 11px; font-weight: 800; }

/* Medium screens: left tiles move under the game */
@media (max-width: 1099px) {
  .play-layout {
    grid-template-columns: minmax(0, 1fr) var(--right);
    grid-template-areas: "center right" "left left";
  }
  .play-left { grid-template-columns: repeat(auto-fill, var(--cell)); }
}
/* Tablets / phones: single column */
@media (max-width: 799px) {
  .play-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "center" "right" "left";
  }
  .theater { width: 100%; }
  .play-right { align-items: center; }
  .play-right .tile-grid--3 { grid-template-columns: repeat(auto-fill, var(--cell)); width: 100%; }
}

/* ---------------- Info pages (About, Contact, Privacy, Terms) ---------------- */
.doc-card {
  max-width: 860px; margin: 0 auto; background: rgba(255,255,255,.97);
  border-radius: 24px; padding: 32px 36px; box-shadow: 0 6px 18px rgba(0, 43, 80, .14);
  color: #334155; font-size: 15px; line-height: 1.7;
}
.doc-card h1 { font-size: 30px; line-height: 1.2; font-weight: 900; color: var(--navy); margin-bottom: 4px; }
.doc-card .doc-updated { font-size: 13px; color: #64748b; font-weight: 700; margin-bottom: 20px; }
.doc-card .doc-lead { font-size: 16px; color: #1e293b; margin-bottom: 8px; }
.doc-card h2 { font-size: 19px; font-weight: 900; color: var(--navy); margin: 28px 0 8px; }
.doc-card h3 { font-size: 15px; font-weight: 900; color: var(--navy); margin: 16px 0 4px; }
.doc-card p { margin: 8px 0; }
.doc-card ul { list-style: disc; padding-left: 22px; margin: 8px 0; }
.doc-card ul li { margin: 4px 0; }
.doc-card a { color: #0077cc; font-weight: 700; }
.doc-card a:hover { text-decoration: underline; }
.doc-card strong { color: #1e293b; }
.doc-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 4px; }
.doc-toc a { font-size: 12px; font-weight: 800; padding: 4px 12px; border-radius: 999px; background: var(--soft); color: var(--navy); }
.doc-toc a:hover { background: var(--navy); color: #fff; text-decoration: none; }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 16px 0; }
.doc-box { background: var(--soft); border-radius: 16px; padding: 16px; }
.doc-box h3 { margin-top: 0; }
.doc-form { display: grid; gap: 12px; margin-top: 12px; }
.doc-form label { font-size: 13px; font-weight: 800; color: var(--navy); }
.doc-form input, .doc-form select, .doc-form textarea {
  width: 100%; margin-top: 4px; padding: 10px 14px; border-radius: 12px;
  border: 2px solid #e2e8f0; background: #fff; font: inherit; font-size: 14px; outline: none;
}
.doc-form input:focus, .doc-form select:focus, .doc-form textarea:focus { border-color: var(--blue); }
.doc-btn {
  justify-self: start; padding: 10px 22px; border-radius: 999px; background: var(--blue); color: #fff;
  font-weight: 900; font-size: 14px; transition: background .2s var(--ease);
}
.doc-btn:hover { background: #0086dc; }
.credit-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.credit-table th, .credit-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #e2e8f0; vertical-align: top; }
.credit-table th { color: var(--navy); font-weight: 900; background: var(--soft); }
@media (max-width: 639px) {
  .doc-card { padding: 22px 18px; border-radius: 18px; font-size: 14px; }
  .doc-card h1 { font-size: 24px; }
}