/*
Theme Name: Piko Palette
Theme URI: https://basekent.com/
Author: BASE KENT / WEB TARO
Author URI: https://basekent.com/
Description: Y2K個人サイト風のフリーランス・イラストレーター向けサンプルテーマ。蛍光ピンク、マーキー、点滅テキスト、ヒットカウンター、星トレイル、BBSフォーム、Web拍手、シンセBGM、全部入り。2003年の個人ホームページのノリで、現代のイラストレーターのお仕事窓口としても機能。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: piko-palette
Tags: one-page, illustrator, y2k, kawaii, personal, sample
*/

/* ============================================================
   ぴこの☆らくがき☆ぱれっと — STYLE
   Y2K Japanese personal homepage aesthetic
   ============================================================ */

:root {
  --pink:  #ff66cc;
  --pink2: #ff99dd;
  --pink-deep: #c81d8d;
  --magenta: #ff00ff;
  --lime:  #66ff66;
  --lime2: #aaff88;
  --cyan:  #00ffff;
  --cyan2: #aaeeff;
  --yel:   #ffff66;
  --yel2:  #ffea00;
  --purple: #cc66ff;
  --purple2: #aa44dd;
  --orange: #ffaa44;
  --bg-pink: #ffd5ee;
  --bg-lav: #e8d5ff;
  --text: #4a004a;
  --text-dim: #6a006a;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  font-family: "Kosugi Maru", "Comic Sans MS", "MS Pゴシック", sans-serif;
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><text x='0' y='24' font-size='24'>★</text></svg>") 4 4, auto;
}

body {
  background-color: var(--bg-pink);
  /* Heart + Star tiled background using SVG data-uri */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><text x='4' y='22' font-size='18' fill='%23ff66cc'>★</text><text x='44' y='62' font-size='18' fill='%23cc66ff'>♥</text><text x='4' y='62' font-size='14' fill='%2300ffff'>☆</text><text x='48' y='22' font-size='14' fill='%23ffea00'>♪</text></svg>");
  background-repeat: repeat;
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
}

a {
  color: var(--magenta);
  text-decoration: underline;
}

a:hover { color: var(--purple); background: var(--yel); }
a:visited { color: var(--purple2); }

/* ============================================================
   Sparkle layer (mouse trail)
   ============================================================ */

#sparkles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
}

.sparkle {
  position: absolute;
  font-size: 18px;
  pointer-events: none;
  animation: sparkleFade 0.8s ease-out forwards;
}

@keyframes sparkleFade {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(0.6) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -150%) scale(1.4) rotate(360deg); }
}

/* ============================================================
   Banner
   ============================================================ */

.banner {
  background:
    linear-gradient(180deg, var(--pink) 0%, var(--purple) 50%, var(--cyan) 100%);
  border: 4px ridge var(--yel);
  border-top: none;
  padding: 20px 16px;
  text-align: center;
  position: relative;
}

.banner__title {
  font-family: "Yusei Magic", "Comic Sans MS", sans-serif;
  font-size: clamp(28px, 5.6vw, 64px);
  font-weight: 700;
  color: var(--yel);
  -webkit-text-stroke: 2px var(--text);
  text-shadow:
    3px 3px 0 var(--pink-deep),
    6px 6px 0 var(--cyan),
    9px 9px 0 var(--purple),
    12px 12px 0 rgba(0,0,0,0.2);
  letter-spacing: 0.05em;
  line-height: 1.1;
  margin-bottom: 8px;
  animation: rainbowShake 0.3s steps(2) infinite;
}

@keyframes rainbowShake {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-1px, 1px); }
  100% { transform: translate(0, 0); }
}

.banner__sub {
  font-family: "Yusei Magic", serif;
  font-size: 14px;
  color: #fff;
  text-shadow: 1px 1px 0 var(--text);
  margin-bottom: 14px;
}

.banner__marq {
  display: block;
  background: var(--yel);
  border: 3px groove var(--magenta);
  padding: 6px 0;
  font-family: "DotGothic16", monospace;
  font-size: 16px;
  color: var(--pink-deep);
  font-weight: bold;
}

/* ============================================================
   Nav buttons
   ============================================================ */

.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  padding: 12px 8px;
  background: var(--bg-lav);
  border-bottom: 3px ridge var(--pink);
}

.nav__btn {
  display: inline-block;
  padding: 10px 14px;
  font-family: "Kosugi Maru", sans-serif;
  font-weight: bold;
  font-size: 14px;
  text-decoration: none;
  color: var(--text);
  border: 3px outset;
  text-shadow: 1px 1px 0 #fff;
  transition: transform 0.08s;
}

.nav__btn:hover {
  border-style: inset;
  transform: translate(1px, 1px);
  animation: jiggle 0.3s infinite;
}

.nav__btn:visited { color: var(--text); }
.nav__btn:hover { background: var(--yel); color: var(--magenta); }

.nav__btn--1 { background: var(--pink); border-color: var(--pink2) var(--pink-deep) var(--pink-deep) var(--pink2); }
.nav__btn--2 { background: var(--pink2); border-color: #ffccee var(--pink) var(--pink) #ffccee; }
.nav__btn--3 { background: var(--cyan); border-color: var(--cyan2) #0099aa #0099aa var(--cyan2); }
.nav__btn--4 { background: var(--lime); border-color: var(--lime2) #339933 #339933 var(--lime2); }
.nav__btn--5 { background: var(--purple); border-color: #ddaaff var(--purple2) var(--purple2) #ddaaff; }
.nav__btn--6 { background: var(--orange); border-color: #ffcc88 #cc7722 #cc7722 #ffcc88; }
.nav__btn--7 { background: var(--yel); border-color: #ffffaa #cccc00 #cccc00 #ffffaa; }
.nav__btn--8 { background: #ff8888; border-color: #ffaaaa #cc4444 #cc4444 #ffaaaa; }

@keyframes jiggle {
  0%   { transform: translate(1px, 1px) rotate(-1deg); }
  50%  { transform: translate(0, 2px) rotate(1deg); }
  100% { transform: translate(1px, 1px) rotate(-1deg); }
}

/* ============================================================
   Main grid (2-column)
   ============================================================ */

.main {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 14px;
  padding: 14px;
  max-width: 1100px;
  margin: 0 auto;
}

.col--main { display: flex; flex-direction: column; gap: 14px; }
.col--side { display: flex; flex-direction: column; gap: 14px; }

/* ============================================================
   Box (the universal content card)
   ============================================================ */

.box {
  background: #fff;
  border: 3px ridge var(--pink);
  box-shadow: 4px 4px 0 var(--purple);
  position: relative;
}

.box__head {
  background: linear-gradient(180deg, var(--pink) 0%, var(--pink-deep) 100%);
  color: #fff;
  font-family: "Yusei Magic", "Comic Sans MS", sans-serif;
  font-weight: 700;
  font-size: 17px;
  padding: 8px 14px;
  text-shadow: 1px 1px 0 var(--text), 2px 2px 0 rgba(0,0,0,0.3);
  border-bottom: 2px solid var(--text);
  letter-spacing: 0.05em;
}

.box__head--cyan   { background: linear-gradient(180deg, var(--cyan), #0099bb); color: #fff; }
.box__head--lime   { background: linear-gradient(180deg, var(--lime), #229933); color: #fff; }
.box__head--purple { background: linear-gradient(180deg, var(--purple), var(--purple2)); }
.box__head--orange { background: linear-gradient(180deg, var(--orange), #dd7700); }
.box__head--pink   { background: linear-gradient(180deg, var(--pink2), var(--pink)); }
.box__head--pink2  { background: linear-gradient(180deg, #ffaaee, var(--pink-deep)); }

.box__body { padding: 14px 18px; }
.box__body p { margin-bottom: 10px; }

/* ============================================================
   Welcome box
   ============================================================ */

.rainbow {
  font-weight: bold;
  background: linear-gradient(90deg, var(--magenta), var(--orange), var(--yel), var(--lime), var(--cyan), var(--purple), var(--magenta));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbowSlide 4s linear infinite;
  font-size: 16px;
}

@keyframes rainbowSlide {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.blink {
  animation: blink 0.7s steps(1) infinite;
  color: var(--magenta);
  font-weight: bold;
}

.blink-slow {
  animation: blink 1.2s steps(1) infinite;
  color: var(--magenta);
  font-weight: bold;
}

@keyframes blink {
  50% { opacity: 0; }
}

.hl-y { background: var(--yel); padding: 0 4px; font-weight: bold; }
.hl-p { background: var(--pink2); padding: 0 4px; font-weight: bold; }

/* Environment table */
.env {
  margin-top: 14px;
  border-collapse: collapse;
  border: 2px solid var(--text);
  width: 100%;
}

.env th, .env td {
  padding: 6px 10px;
  border: 1px solid var(--text);
  text-align: left;
  font-family: "DotGothic16", monospace;
}

.env th {
  background: var(--lime);
  width: 100px;
  white-space: nowrap;
  font-weight: bold;
}

.env td { background: #fffbe8; }

/* Hit counter LED-style */
.counter {
  display: inline-block;
  background: #000;
  color: var(--lime);
  padding: 2px 8px;
  font-family: "DotGothic16", monospace;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.15em;
  border: 2px inset #666;
  text-shadow: 0 0 8px var(--lime);
  vertical-align: middle;
}

.counter--mini { font-size: 14px; padding: 1px 6px; }

/* ============================================================
   Diary entries
   ============================================================ */

.entry {
  background: #fff5f0;
  border: 2px dotted var(--pink);
  padding: 10px 14px;
  margin-bottom: 12px;
  position: relative;
}

.entry h3 {
  font-family: "Yusei Magic", sans-serif;
  font-size: 16px;
  color: var(--pink-deep);
  margin-bottom: 6px;
  border-bottom: 2px dashed var(--pink);
  padding-bottom: 4px;
}

.entry p {
  font-size: 14px;
}

.entry__mood {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  background: var(--yel);
  padding: 2px 8px;
  border: 1px solid var(--text);
  font-weight: bold;
}

.entry__more {
  text-align: right;
  font-size: 13px;
  margin-top: 12px;
}

/* ============================================================
   Pixel Gallery
   ============================================================ */

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 12px;
}

.art {
  background: #fff;
  border: 3px ridge var(--lime);
  padding: 8px;
  text-align: center;
  transition: transform 0.2s;
}

.art:hover { transform: scale(1.04) rotate(-1deg); }

.art__img {
  width: 100%;
  aspect-ratio: 1;
  image-rendering: pixelated;
  border: 2px solid var(--text);
  margin-bottom: 6px;
}

/* ぴこのドット絵作品（実画像差し替え） */
.art__img--1 { background: url("images/art-01-cat.webp") center/cover no-repeat, #ffd5ee; }
.art__img--2 { background: url("images/art-02-palette.webp") center/cover no-repeat, #e8d5ff; }
.art__img--3 { background: url("images/art-03-rabbit.webp") center/cover no-repeat, #1a0044; }
.art__img--4 { background: url("images/art-04-busstop.webp") center/cover no-repeat, #335577; }
.art__img--5 { background: url("images/art-05-home.webp") center/cover no-repeat, #ffcc99; }

.art__img--construction {
  background: repeating-linear-gradient(45deg, var(--yel) 0 16px, var(--text) 16px 32px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.construct {
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid var(--text);
  padding: 8px 12px;
  font-family: "DotGothic16", monospace;
  font-weight: bold;
  color: var(--text);
  font-size: 14px;
  text-align: center;
  animation: blink 0.8s steps(1) infinite;
}

.art figcaption {
  font-family: "Kosugi Maru", sans-serif;
  font-size: 13px;
  font-weight: bold;
  color: var(--purple2);
}

.art figcaption small {
  display: block;
  font-weight: normal;
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* ============================================================
   Games table
   ============================================================ */

.games {
  width: 100%;
  margin-top: 12px;
  border-collapse: collapse;
  border: 3px ridge var(--purple);
  font-size: 13px;
}

.games th, .games td {
  border: 1px solid var(--text);
  padding: 6px 8px;
  text-align: left;
}

.games thead th {
  background: linear-gradient(180deg, var(--purple), var(--purple2));
  color: #fff;
  font-weight: bold;
  font-family: "Yusei Magic", sans-serif;
}

.games tbody tr:nth-child(odd)  { background: #f5e8ff; }
.games tbody tr:nth-child(even) { background: #fff; }
.games tbody tr:hover { background: var(--yel) !important; }

.games .stars { color: var(--orange); font-weight: bold; font-size: 14px; }

.memo {
  font-size: 12px !important;
  color: var(--text-dim);
  margin-top: 10px !important;
  text-align: right;
}

/* ============================================================
   Links banners
   ============================================================ */

.banners {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.bnr {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 50px;
  text-align: center;
  border: 2px solid var(--text);
  text-decoration: none;
  font-family: "DotGothic16", monospace;
  color: var(--text) !important;
  transition: transform 0.15s;
}

.bnr:hover { transform: rotate(-2deg) scale(1.05); animation: jiggle 0.3s infinite; }

.bnr__name { font-size: 13px; font-weight: bold; }
.bnr__url { font-size: 10px; opacity: 0.8; }

.bnr--1 { background: linear-gradient(90deg, var(--pink2), var(--pink)); color: #fff !important; }
.bnr--2 { background: linear-gradient(90deg, var(--lime), var(--cyan)); }
.bnr--3 { background: var(--yel); border-style: dashed; }
.bnr--4 { background: linear-gradient(180deg, #2a0066, #6600aa); color: var(--yel) !important; }
.bnr--5 { background: var(--orange); color: var(--text) !important; }
.bnr--6 { background: repeating-linear-gradient(45deg, var(--cyan) 0 6px, var(--purple) 6px 12px); color: #fff !important; }

.bnr:visited { color: inherit; }

/* Webring */
.webring {
  margin-top: 14px;
  padding: 10px;
  border: 3px dashed var(--orange);
  background: #fff8dd;
  text-align: center;
}

.webring p {
  font-weight: bold;
  color: var(--orange);
  margin-bottom: 6px !important;
}

.webring a {
  margin: 0 6px;
  font-size: 13px;
}

/* ============================================================
   BBS
   ============================================================ */

.bbs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.bbs label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}

.bbs label span {
  font-weight: bold;
  color: var(--pink-deep);
}

.bbs label:has(textarea),
.bbs__color { grid-column: 1 / -1; }

.bbs input,
.bbs textarea,
.bbs select {
  border: 2px inset #ccc;
  padding: 6px 8px;
  font-family: "Kosugi Maru", sans-serif;
  font-size: 13px;
  background: #fff;
}

.bbs textarea { resize: vertical; }

.bbs__submit {
  grid-column: 1 / -1;
  padding: 12px;
  font-family: "Yusei Magic", sans-serif;
  font-weight: bold;
  font-size: 16px;
  background: linear-gradient(180deg, var(--pink2), var(--pink-deep));
  color: #fff;
  border: 3px outset var(--pink);
  cursor: pointer;
  text-shadow: 1px 1px 0 var(--text);
  letter-spacing: 0.1em;
  transition: transform 0.1s;
}

.bbs__submit:hover { animation: jiggle 0.3s infinite; }
.bbs__submit:active { border-style: inset; transform: translate(1px, 1px); }

.bbs__hr {
  margin: 18px 0;
  border: none;
  border-top: 3px dashed var(--pink);
}

.bbs__posts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.post {
  background: #fff5f8;
  border: 2px solid var(--pink);
  border-left: 8px solid var(--pink-deep);
  padding: 8px 12px;
}

.post__head {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.post__no {
  background: var(--text);
  color: var(--yel);
  padding: 1px 6px;
  font-family: "DotGothic16", monospace;
  font-weight: bold;
}

.post strong { color: var(--pink-deep); font-size: 14px; }

.post__date { color: var(--text-dim); font-family: "DotGothic16", monospace; }

/* ============================================================
   Sidebar boxes (mini)
   ============================================================ */

.box--mini .box__head {
  font-size: 14px;
  padding: 6px 10px;
}

.box__body--mini {
  padding: 10px;
  font-size: 12px;
}

.box__body--mini p { margin-bottom: 6px; }

.profile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.profile__icon {
  width: 100px;
  height: 100px;
  background: url("images/profile-piko.webp") center/cover no-repeat, #ffd5ee;
  border: 3px solid var(--text);
  border-radius: 50%;
  image-rendering: pixelated;
}

.profile__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.profile__table th, .profile__table td {
  padding: 4px 6px;
  border-bottom: 1px dotted var(--pink);
  font-family: "DotGothic16", monospace;
  vertical-align: top;
}

.profile__table th {
  background: var(--pink2);
  color: var(--text);
  text-align: left;
  width: 40px;
  font-weight: bold;
}

.mood p {
  background: #fff;
  border: 1px solid var(--cyan2);
  padding: 4px 8px;
  font-size: 12px;
}

.my-banner {
  width: 100%;
  height: 40px;
  background: linear-gradient(90deg, var(--pink), var(--purple), var(--cyan));
  border: 2px solid var(--text);
  color: var(--yel);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Yusei Magic", sans-serif;
  font-weight: bold;
  text-shadow: 1px 1px 0 var(--text);
  font-size: 13px;
  margin-bottom: 8px;
}

.my-banner small {
  font-size: 9px;
  font-family: "DotGothic16", monospace;
  letter-spacing: 0.1em;
  margin-top: 2px;
}

.mini { font-size: 11px; line-height: 1.5; }

.bgm-btn {
  width: 100%;
  background: linear-gradient(180deg, var(--lime), #228833);
  color: var(--text);
  border: 2px outset var(--lime);
  padding: 8px;
  font-family: "Yusei Magic", sans-serif;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  text-shadow: 1px 1px 0 #fff;
  margin-bottom: 6px;
}

.bgm-btn[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--pink), var(--pink-deep));
  color: var(--yel);
  border-style: inset;
  animation: jiggle 0.4s infinite;
}

/* ============================================================
   Footer
   ============================================================ */

.foot {
  background: linear-gradient(180deg, var(--purple) 0%, var(--pink) 100%);
  border-top: 4px ridge var(--yel);
  margin-top: 20px;
  padding: 0 0 20px;
  color: #fff;
}

.foot__marq {
  display: block;
  background: var(--text);
  color: var(--yel);
  font-family: "DotGothic16", monospace;
  font-size: 16px;
  padding: 6px 0;
  font-weight: bold;
}

.foot__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

.foot__h3 {
  font-family: "Yusei Magic", sans-serif;
  color: var(--yel);
  text-shadow: 2px 2px 0 var(--text);
  font-size: 18px;
  margin-bottom: 8px;
}

.foot__col p { font-size: 13px; line-height: 1.6; }

.foot__col a { color: var(--yel); }
.foot__col a:visited { color: var(--yel2); }

.foot__mail {
  font-family: "DotGothic16", monospace;
  background: var(--text);
  display: inline-block;
  padding: 4px 8px;
  margin-top: 4px;
}

.clap {
  background: #fff;
  color: var(--pink-deep);
  border: 3px outset var(--yel);
  padding: 10px 16px;
  font-family: "Yusei Magic", sans-serif;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.clap small { font-family: "DotGothic16", monospace; color: var(--text); }

.clap:hover { animation: jiggle 0.25s infinite; background: var(--yel); }
.clap:active { border-style: inset; }

.foot__copy {
  text-align: center;
  padding: 14px 20px 0;
  border-top: 2px dashed var(--yel);
  margin: 0 20px;
}

.foot__copy p {
  font-size: 12px;
  margin-bottom: 4px;
  color: var(--yel);
  font-family: "DotGothic16", monospace;
}

/* ============================================================
   Toast (BBS / clap confirmation)
   ============================================================ */

.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.4);
  background: #fff;
  border: 5px ridge var(--pink);
  box-shadow: 6px 6px 0 var(--purple), 0 0 80px rgba(255, 100, 200, 0.5);
  padding: 30px 40px 24px;
  text-align: center;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s;
  min-width: 300px;
}

.toast.is-open {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.toast__star {
  display: block;
  font-size: 36px;
  color: var(--yel);
  text-shadow: 2px 2px 0 var(--pink), 4px 4px 0 var(--purple);
  margin-bottom: 6px;
  animation: spin 1.5s linear infinite;
}

@keyframes spin {
  0%   { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

.toast strong {
  display: block;
  font-family: "Yusei Magic", sans-serif;
  font-size: 22px;
  color: var(--pink-deep);
  margin-bottom: 8px;
  text-shadow: 1px 1px 0 var(--yel);
}

.toast p {
  font-size: 14px;
  color: var(--text);
  margin-bottom: 16px;
}

.toast button {
  background: linear-gradient(180deg, var(--pink), var(--pink-deep));
  color: #fff;
  border: 3px outset var(--pink);
  padding: 10px 24px;
  font-family: "Yusei Magic", sans-serif;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  text-shadow: 1px 1px 0 var(--text);
}

.toast button:active { border-style: inset; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 800px) {
  .main { grid-template-columns: 1fr; }
  .col--side { order: 2; }
  .gallery, .banners { grid-template-columns: 1fr 1fr; }
  .bbs { grid-template-columns: 1fr; }
  .foot__row { grid-template-columns: 1fr; }
  .games { font-size: 11px; }
  .games th, .games td { padding: 4px; }
  .banner__title { letter-spacing: 0; }
  .nav__btn { padding: 8px 10px; font-size: 12px; }
}