/* アゲアゲ台風コロッケ — about page. The game's dreamy pastel sky, pink hills,
   and its sticker look: thick rounded type with a deep purple outline. Colours
   come from the game (sky palettes, trick tier colours, the side logo). */
:root {
  --ink: #3a2560; --night: #1a1230; --lav: #988ce4; --mint: #96e0d4; --peach: #ffc6b0;
  --hill: #e7a3c8; --hill2: #c97fb0; --cream: #fff7ec; --paper: #fffdf8;
  --gold: #ffd75a; --aqua: #7fd6ec; --pink: #ff8fb1;
  --t-basic: #ffffff; --t-super: #ff9ec4; --t-ultra: #7fd4ff; --t-uc: #ffe36e;
  --round: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', sans-serif;
  --dot: 'DotGothic16', monospace;
  /* Outlines are rings of text-shadow, not -webkit-text-stroke: a thick stroke
     closes the small counters of kanji (間, は…) and leaves white specks in them. */
  --ol-s: 2.5px 0px 0 var(--ink), 2.4px 0.6px 0 var(--ink), 2.2px 1.2px 0 var(--ink), 1.8px 1.8px 0 var(--ink), 1.3px 2.2px 0 var(--ink), 0.6px 2.4px 0 var(--ink), 0px 2.5px 0 var(--ink), -0.6px 2.4px 0 var(--ink), -1.2px 2.2px 0 var(--ink), -1.8px 1.8px 0 var(--ink), -2.2px 1.2px 0 var(--ink), -2.4px 0.6px 0 var(--ink), -2.5px 0px 0 var(--ink), -2.4px -0.6px 0 var(--ink), -2.2px -1.2px 0 var(--ink), -1.8px -1.8px 0 var(--ink), -1.3px -2.2px 0 var(--ink), -0.6px -2.4px 0 var(--ink), 0px -2.5px 0 var(--ink), 0.6px -2.4px 0 var(--ink), 1.3px -2.2px 0 var(--ink), 1.8px -1.8px 0 var(--ink), 2.2px -1.3px 0 var(--ink), 2.4px -0.6px 0 var(--ink), 1.4px 0px 0 var(--ink), 1.2px 0.7px 0 var(--ink), 0.7px 1.2px 0 var(--ink), 0px 1.4px 0 var(--ink), -0.7px 1.2px 0 var(--ink), -1.2px 0.7px 0 var(--ink), -1.4px 0px 0 var(--ink), -1.2px -0.7px 0 var(--ink), -0.7px -1.2px 0 var(--ink), 0px -1.4px 0 var(--ink), 0.7px -1.2px 0 var(--ink), 1.2px -0.7px 0 var(--ink);
  --ol-m: 3.5px 0px 0 var(--ink), 3.4px 0.9px 0 var(--ink), 3.0px 1.7px 0 var(--ink), 2.5px 2.5px 0 var(--ink), 1.8px 3.0px 0 var(--ink), 0.9px 3.4px 0 var(--ink), 0px 3.5px 0 var(--ink), -0.9px 3.4px 0 var(--ink), -1.7px 3.0px 0 var(--ink), -2.5px 2.5px 0 var(--ink), -3.0px 1.7px 0 var(--ink), -3.4px 0.9px 0 var(--ink), -3.5px 0px 0 var(--ink), -3.4px -0.9px 0 var(--ink), -3.0px -1.7px 0 var(--ink), -2.5px -2.5px 0 var(--ink), -1.8px -3.0px 0 var(--ink), -0.9px -3.4px 0 var(--ink), 0px -3.5px 0 var(--ink), 0.9px -3.4px 0 var(--ink), 1.8px -3.0px 0 var(--ink), 2.5px -2.5px 0 var(--ink), 3.0px -1.8px 0 var(--ink), 3.4px -0.9px 0 var(--ink), 1.9px 0px 0 var(--ink), 1.7px 1.0px 0 var(--ink), 1.0px 1.7px 0 var(--ink), 0px 1.9px 0 var(--ink), -1.0px 1.7px 0 var(--ink), -1.7px 1.0px 0 var(--ink), -1.9px 0px 0 var(--ink), -1.7px -1.0px 0 var(--ink), -1.0px -1.7px 0 var(--ink), 0px -1.9px 0 var(--ink), 1.0px -1.7px 0 var(--ink), 1.7px -1.0px 0 var(--ink);
  --ol-l: 4.5px 0px 0 var(--ink), 4.3px 1.2px 0 var(--ink), 3.9px 2.2px 0 var(--ink), 3.2px 3.2px 0 var(--ink), 2.3px 3.9px 0 var(--ink), 1.2px 4.3px 0 var(--ink), 0px 4.5px 0 var(--ink), -1.2px 4.3px 0 var(--ink), -2.2px 3.9px 0 var(--ink), -3.2px 3.2px 0 var(--ink), -3.9px 2.2px 0 var(--ink), -4.3px 1.2px 0 var(--ink), -4.5px 0px 0 var(--ink), -4.3px -1.2px 0 var(--ink), -3.9px -2.2px 0 var(--ink), -3.2px -3.2px 0 var(--ink), -2.3px -3.9px 0 var(--ink), -1.2px -4.3px 0 var(--ink), 0px -4.5px 0 var(--ink), 1.2px -4.3px 0 var(--ink), 2.3px -3.9px 0 var(--ink), 3.2px -3.2px 0 var(--ink), 3.9px -2.3px 0 var(--ink), 4.3px -1.2px 0 var(--ink), 2.5px 0px 0 var(--ink), 2.1px 1.2px 0 var(--ink), 1.2px 2.1px 0 var(--ink), 0px 2.5px 0 var(--ink), -1.2px 2.1px 0 var(--ink), -2.1px 1.2px 0 var(--ink), -2.5px 0px 0 var(--ink), -2.1px -1.2px 0 var(--ink), -1.2px -2.1px 0 var(--ink), 0px -2.5px 0 var(--ink), 1.2px -2.1px 0 var(--ink), 2.1px -1.2px 0 var(--ink);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--cream); }
body { margin: 0; color: var(--ink); background: var(--cream); font: 500 16px/1.9 var(--round); letter-spacing: .02em; }
img { display: block; width: 100%; height: auto; }
a { color: #6a48c8; }
figure { margin: 0; }
.wrap { width: min(1060px, 100% - 40px); margin: 0 auto; }
@media (max-width: 480px) { .wrap { width: calc(100% - 32px); } }

/* sticker type: thick rounded letters with the logo's purple outline */
h2 { font: 900 clamp(26px, 4.4vw, 40px)/1.3 var(--round); margin: 0 0 8px; color: #fff; text-shadow: var(--ol-m); letter-spacing: .03em; }
h2 .y { color: var(--gold); } h2 .b { color: var(--aqua); } h2 .p { color: var(--pink); }
.sub { font-weight: 700; color: #7a62b8; margin: 0 0 28px; }
h3 { font: 800 19px/1.45 var(--round); margin: 0 0 6px; }
p { margin: 0 0 1em; }
section { padding: 80px 0; position: relative; }
.chip { display: inline-block; font: 13px/1 var(--dot); letter-spacing: .14em; color: #fff; background: var(--ink); padding: 6px 10px 5px; border-radius: 999px; margin-bottom: 14px; }

/* cards: a white sticker with a purple outline and a flat drop shadow */
.card { background: var(--paper); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 6px 0 var(--ink); padding: 20px 22px; }
.card p { margin: 0; font-size: 15px; }
.shot { border: 3px solid var(--ink); border-radius: 18px; overflow: hidden; box-shadow: 0 7px 0 var(--ink); background: var(--night); }
.cap { font-size: 12.5px; line-height: 1.7; color: #7a62b8; margin-top: 12px; text-align: center; font-weight: 700; }
kbd { display: inline-block; min-width: 24px; padding: 2px 7px 1px; margin: 0 2px 2px 0; text-align: center; font: 13px/1.5 var(--dot); color: #fff; background: var(--ink); border-radius: 6px; box-shadow: 0 2px 0 #1a1230; }

/* buttons: the game's pill buttons */
.btn { display: inline-block; font: 800 16px/1 var(--round); letter-spacing: .08em; text-decoration: none; padding: 17px 30px 16px; color: var(--ink); background: var(--gold); border: 3px solid var(--ink); border-radius: 999px; box-shadow: 0 5px 0 var(--ink); }
.btn.alt { background: var(--t-ultra); }
.btn:hover { transform: translateY(2px); box-shadow: 0 3px 0 var(--ink); }
.btn:focus-visible, a:focus-visible { outline: 3px solid #6a48c8; outline-offset: 4px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; }

/* ---- hero: stage 1's dreamy sky over pink hills ---- */
.hero { position: relative; padding: 64px 0 120px; background: linear-gradient(var(--lav) 0%, var(--mint) 58%, var(--peach) 100%); overflow: hidden; }
.hero::after { content: ""; position: absolute; left: -5%; right: -5%; bottom: -2px; height: 130px; background: var(--hill);
  -webkit-mask: radial-gradient(120px 90px at 12% 100%, #000 98%, transparent) , radial-gradient(260px 120px at 42% 100%, #000 98%, transparent), radial-gradient(200px 110px at 74% 100%, #000 98%, transparent), radial-gradient(240px 80px at 100% 100%, #000 98%, transparent), linear-gradient(transparent 60%, #000 60%);
          mask: radial-gradient(120px 90px at 12% 100%, #000 98%, transparent) , radial-gradient(260px 120px at 42% 100%, #000 98%, transparent), radial-gradient(200px 110px at 74% 100%, #000 98%, transparent), radial-gradient(240px 80px at 100% 100%, #000 98%, transparent), linear-gradient(transparent 60%, #000 60%); }
.hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center; position: relative; z-index: 1; }
.logo { margin: 0; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.02; filter: drop-shadow(0 6px 0 rgba(26, 18, 48, .45)); }
.logo span { font-family: var(--round); font-weight: 900; text-shadow: var(--ol-l); letter-spacing: .02em; }
.logo .l1 { font-size: clamp(34px, 5vw, 52px); color: var(--gold); }
.logo .l2 { font-size: clamp(64px, 9.4vw, 104px); color: var(--aqua); }
.logo .l3 { font-size: clamp(46px, 7vw, 76px); color: var(--pink); }
.hero .lead { font-size: 17px; font-weight: 700; background: rgba(255, 253, 248, .86); border: 3px solid var(--ink); border-radius: 18px; padding: 16px 18px; margin-top: 26px; box-shadow: 0 5px 0 var(--ink); }
.hero-art { width: min(340px, 100%); justify-self: center; transform: rotate(2deg); }
.hero-art .cap { color: var(--ink); }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; } .hero-art { width: min(280px, 78%); } }

/* ---- layouts ---- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step .n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--gold); border: 3px solid var(--ink); font: 900 18px var(--round); margin-bottom: 10px; }
.split { display: grid; grid-template-columns: 300px 1fr; gap: 42px; align-items: start; }
.split.rev { grid-template-columns: 1fr 300px; }
.split.rev > figure { order: 2; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 880px) { .steps { grid-template-columns: 1fr; } .split, .split.rev { grid-template-columns: 1fr; } .split > figure, .split.rev > figure { order: 0; width: min(300px, 82%); margin: 0 auto; } }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }
section.tint { background: #f1ebff; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }

/* ---- trick encyclopedia: four tiers, one sticker per trick ---- */
.tiers { display: grid; gap: 22px; }
.tier { background: var(--night); color: #fff; border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 6px 0 var(--ink); padding: 20px 22px 22px; }
.tier header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 14px; }
.tier h3 { margin: 0; font-size: 20px; }
.tier .how { font-size: 14px; color: #d9c8ff; }
.tier ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tier li { font: 800 15px/1 var(--round); color: var(--night); padding: 10px 14px; border-radius: 999px; background: var(--c); border: 2px solid rgba(255, 255, 255, .5); }
.tier li small { font: 12px var(--dot); opacity: .8; margin-left: 6px; }
.tier.basic { --c: var(--t-basic); } .tier.basic h3 { color: #fff; }
.tier.super { --c: var(--t-super); } .tier.super h3 { color: var(--t-super); }
.tier.ultra { --c: var(--t-ultra); } .tier.ultra h3 { color: var(--t-ultra); }
.tier.uc { --c: var(--t-uc); } .tier.uc h3 { color: var(--t-uc); }

/* ---- multipliers ---- */
.mults { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mult { text-align: center; padding: 18px 14px; }
.mult b { display: block; font: 900 30px/1.1 var(--round); color: var(--pink); text-shadow: var(--ol-s); margin-bottom: 6px; }
.mult b.g { color: var(--gold); } .mult b.a { color: var(--aqua); }
.mult span { display: block; font-weight: 800; }
.mult small { display: block; font-size: 13px; color: #7a62b8; margin-top: 4px; line-height: 1.6; }
@media (max-width: 760px) { .mults { grid-template-columns: 1fr 1fr; } }

/* ---- five skies: one swatch per stage palette ---- */
.skies { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 8px; }
.sky { border: 3px solid var(--ink); border-radius: 16px; height: 140px; display: flex; align-items: flex-end; padding: 10px; box-shadow: 0 5px 0 var(--ink); }
.sky span { font: 800 13px/1.3 var(--round); background: rgba(255, 253, 248, .9); border-radius: 999px; padding: 5px 10px; }
@media (max-width: 760px) { .skies { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 460px) { .skies { grid-template-columns: repeat(2, 1fr); } }

.tips { list-style: none; margin: 0; padding: 0; }
.tips li { position: relative; padding: 12px 0 12px 32px; border-bottom: 2px dashed #d9c8ff; }
.tips li::before { content: ""; position: absolute; left: 4px; top: 20px; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); border: 2px solid var(--ink); }   /* centred on the first line: 12px + (30.4px - 14px) / 2 */
.faq dt { font-weight: 800; color: #6a48c8; margin-top: 20px; }
.faq dd { margin: 4px 0 0; }

.final { text-align: center; padding: 100px 0 150px; background: linear-gradient(var(--cream), #ffd9e6); overflow: hidden; }
.final::after { content: ""; position: absolute; left: -5%; right: -5%; bottom: -2px; height: 110px; background: var(--hill2);
  -webkit-mask: radial-gradient(220px 100px at 20% 100%, #000 98%, transparent), radial-gradient(280px 110px at 60% 100%, #000 98%, transparent), radial-gradient(200px 90px at 95% 100%, #000 98%, transparent), linear-gradient(transparent 55%, #000 55%);
          mask: radial-gradient(220px 100px at 20% 100%, #000 98%, transparent), radial-gradient(280px 110px at 60% 100%, #000 98%, transparent), radial-gradient(200px 90px at 95% 100%, #000 98%, transparent), linear-gradient(transparent 55%, #000 55%); }
.final .cta-row { justify-content: center; }
.final .wrap { position: relative; z-index: 1; }
.games-nav { margin-top: 26px; font-size: 14px; font-weight: 700; }
footer { background: var(--hill2); color: #fff; padding: 20px 0 36px; font-size: 13px; font-weight: 700; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
footer a { color: #fff; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn:hover { transform: none; } }