:root{color-scheme:light;--ink:#203745;--blue:#245fe5;--muted:#647681;--line:#dce5e9;--green:#e0f4df;font-family:system-ui,-apple-system,"Noto Sans CJK JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;color:var(--ink);background:#f5f8f8;font-synthesis:none}*{box-sizing:border-box}body{margin:0}header{position:fixed;inset:0 0 auto;background:#ffffffed;border-bottom:1px solid var(--line);z-index:5;backdrop-filter:blur(12px)}.header-inner{max-width:560px;margin:auto;padding:19px 20px;display:flex;align-items:center;justify-content:space-between;gap:8px}.brand{font-size:19px;font-weight:850;text-decoration:none;color:var(--ink)}.brand span{color:var(--blue)}.pill{font-size:11px;white-space:nowrap;border:1px solid var(--line);border-radius:30px;padding:5px 9px;color:var(--muted);background:white}main{max-width:520px;margin:auto;padding:90px 20px 126px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:25px}.eyebrow{font-size:10px;letter-spacing:.14em;font-weight:750;color:var(--muted)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:1px solid var(--line);border-radius:12px;background:white;color:var(--ink);padding:12px 16px;font-weight:650}button:hover{filter:brightness(.96)}button:focus-visible,a:focus-visible,textarea:focus-visible{outline:3px solid #ed9c27;outline-offset:4px}button:disabled{cursor:default}a{color:#2456bb}h1{font-size:36px;line-height:1.5;letter-spacing:.02em;margin:16px 0}h2{font-size:15px;margin:0 0 12px}p{line-height:1.85}#title-screen{text-align:center}.hero-tiles{display:flex;justify-content:center;gap:12px;margin:32px 0}.hero-tiles span{width:72px;height:87px;display:grid;place-items:center;font-size:42px;background:var(--green);border:1px solid #b9dbb6;border-radius:15px;transform:rotate(-9deg);box-shadow:0 6px 0 #d1e3d0}.hero-tiles span:nth-child(2){background:var(--blue);color:white;border-color:var(--blue);transform:rotate(5deg);box-shadow:0 6px 0 #d3ddf6}.hero-tiles span:nth-child(3){transform:rotate(12deg)}.intro{font-size:14px;color:var(--muted);margin-bottom:28px}.primary{background:var(--blue);border-color:var(--blue);color:white;box-shadow:0 4px 0 #1646b4}.large{width:100%;padding:17px 20px;margin:10px 0 20px}.subtle{padding:6px 3px;border:0;background:transparent;font-size:12px;color:var(--muted)}.instructions{text-align:left;background:white;border:1px solid var(--line);padding:22px;border-radius:17px;margin:20px 0 28px;font-size:13px}.instructions p:last-child{color:var(--muted);font-size:12px}.stats{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:8px;background:white;border:1px solid var(--line);padding:16px 8px;border-radius:16px;text-align:center}.stats small{display:block;color:var(--muted);font-size:11px;margin-bottom:6px}.stats strong{font-size:27px;font-variant-numeric:tabular-nums}.unit{font-size:15px;color:var(--muted)}.phase{height:30px;text-align:center;font-weight:700;color:var(--blue);margin:16px 0}.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.card{padding:0;aspect-ratio:1/1.12;background:var(--blue);border:1px solid #1e50c2;color:white;border-radius:13px;font-family:"Noto Sans CJK JP","Hiragino Mincho ProN","Yu Mincho",serif;font-size:clamp(28px,9vw,45px);box-shadow:0 4px 0 #cbd6ef;transition:transform .18s,background .18s;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;position:relative}.card.face{background:white;color:var(--ink);border-color:var(--line);transform:translateY(-2px)}.card.matched{background:var(--green);color:#245d30;border-color:#add3a9;box-shadow:0 4px 0 #c6dfc3}.card.matched:after{content:'✓';position:absolute;right:5px;bottom:1px;font:12px system-ui;color:#247437}.actions{display:flex;gap:12px;margin:26px 0}.actions button{flex:1}.records{border-top:1px solid var(--line);padding-top:25px;margin-top:32px}.section-heading{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.records ol{padding:0;list-style:none}.records li{display:flex;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);font-size:13px}.rank{font-size:18px;color:var(--blue);font-weight:800;min-width:25px}.record-detail{margin-left:auto;font-size:11px;color:var(--muted)}.fine,.share p{font-size:11px;color:var(--muted)}.privacy{text-align:center;font-size:11px;margin-top:26px}footer{position:fixed;inset:auto 0 0;background:#fffffff5;border-top:1px solid var(--line);padding:12px 12px calc(12px + env(safe-area-inset-bottom));text-align:center;font-size:11px;z-index:5}footer>a{display:block;margin-bottom:7px}footer div{color:var(--muted);font-size:10px}footer span{margin-left:12px}.notice{padding:12px;border-radius:10px;background:#fff0cf;font-size:12px}.result-card{text-align:center;border:2px solid var(--line);border-radius:20px;padding:25px 12px;background:white}.result-card h1{font-size:25px}.result-card.winner{border:4px solid #df4250}.award{color:#c72f40;font-weight:800}.result-time{font-size:62px;color:var(--blue);font-variant-numeric:tabular-nums}.full{width:100%}.share{margin-top:32px}.share-links{display:flex;flex-wrap:wrap;gap:8px}.share-links a,.share-links button{padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:white;font-size:12px;text-decoration:none}textarea{width:100%;min-height:110px;font:inherit;padding:10px}.share label{font-size:12px}dialog{border:1px solid var(--line);border-radius:20px;text-align:center;max-width:90vw;color:var(--ink)}dialog::backdrop{background:#142b46aa}dialog form{text-align:right}#zoom-character{font-family:"Noto Sans CJK JP","Hiragino Mincho ProN","Yu Mincho",serif;font-size:150px;line-height:1.5;min-width:230px}dialog p{font-size:12px}[hidden]{display:none!important}@media(max-width:360px){main{padding-left:12px;padding-right:12px}.header-inner{padding-left:12px;padding-right:12px}.brand{font-size:16px}.board{gap:7px}h1{font-size:30px}.stats strong{font-size:23px}.record-detail{font-size:10px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* トップページの文字サイズと中央揃え */
body[data-screen="title"] #mode,
body[data-screen="title"] #sound,
body[data-screen="title"] #record-mode { display: none; }
body[data-screen="title"] .header-inner { justify-content: center; text-align: center; }
body[data-screen="title"] .brand { font-size: 24px; }
body[data-screen="title"] .toolbar { justify-content: center; text-align: center; }
body[data-screen="title"] .eyebrow { font-size: 13px; }
body[data-screen="title"] h1 { font-size: 40px; }
body[data-screen="title"] .intro { font-size: 16px; }
body[data-screen="title"] .instructions { font-size: 15px; }
body[data-screen="title"] .instructions h2,
body[data-screen="title"] .records h2 { font-size: 18px; }
body[data-screen="title"] .instructions p:last-child { font-size: 14px; }
body[data-screen="title"] .records { text-align: center; }
body[data-screen="title"] .section-heading { flex-direction: column; align-items: center; }
body[data-screen="title"] .records li { justify-content: center; flex-wrap: wrap; font-size: 15px; }
body[data-screen="title"] .record-detail { margin-left: 0; font-size: 13px; }
body[data-screen="title"] .records .subtle,
body[data-screen="title"] .fine { font-size: 14px; }
body[data-screen="title"] .privacy { font-size: 13px; }
@media (max-width: 360px) {
  body[data-screen="title"] .brand { font-size: 22px; }
  body[data-screen="title"] h1 { font-size: 34px; }
}

/* トップ・結果共通のSNSボタン */
.share h2, .share > p { text-align: center; }
.share-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.share-links a, .share-links button { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 50px; padding: 12px; border: 0; border-radius: 0; font-size: 15px; text-align: center; }
.share-links #copy { grid-column: 1 / -1; }
.share-links a:focus-visible, .share-links button:focus-visible { outline-offset: -4px; }

/* パーソナルベストとリセットボタン */
.records { padding: 24px 20px; border: 1px solid #d5e3f1; border-radius: 24px; background: linear-gradient(145deg, #f0f6ff, #fffdf5); box-shadow: 0 8px 24px #2037450a; text-align: center; }
.records-emblem { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 14px; border: 1px solid #e7c97c; border-radius: 50%; background: linear-gradient(135deg, #fff8dd, #ffe6a1); color: #916515; font-size: 30px; box-shadow: 0 3px 0 #e8d5a2; }
.records .section-heading { justify-content: center; align-items: center; flex-direction: column; gap: 8px; }
.records .section-heading h2 { margin: 0; font-size: 20px; letter-spacing: .04em; }
.records ol { display: grid; gap: 12px; margin: 20px 0; }
.records li.record-entry { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 3px 12px; padding: 16px; border: 1px solid #dce5e9; border-radius: 16px; background: white; box-shadow: 0 3px 8px #20374506; }
.records .record-entry .rank { display: grid; place-items: center; grid-row: 1 / 3; width: 48px; height: 48px; align-self: center; border: 1px solid #d7b65a; border-radius: 50%; background: linear-gradient(135deg, #fff6d3, #f5d575); color: #765111; font-size: 17px; }
.records .record-entry[data-rank="1"] { border-color: #e5c566; background: linear-gradient(110deg, #fff9e7, white); }
.records .record-entry[data-rank="2"] .rank { border-color: #bfcbd9; background: linear-gradient(135deg, #f5f8fc, #d7e0ed); color: #53657b; }
.records .record-entry[data-rank="3"] .rank { border-color: #d4ad90; background: linear-gradient(135deg, #fff1e4, #e7c1a1); color: #825237; }
.records .record-entry strong { font-size: 27px; line-height: 1.35; font-variant-numeric: tabular-nums; text-align: center; }
.records .record-entry .record-detail { margin: 0; font-size: 12px; text-align: center; overflow-wrap: anywhere; }
.records li.record-empty { display: block; padding: 24px 16px; border: 1px dashed #b9cce0; border-radius: 16px; background: #ffffffb3; color: #526b81; line-height: 1.9; font-size: 14px; }
.records .reset-button { min-height: 46px; padding: 12px 24px; border: 1px solid #dcb5b9; border-radius: 12px; background: #fff4f4; color: #99414b; font-size: 14px; font-weight: 700; box-shadow: 0 3px 0 #ecd7d9; }
.records .reset-button:hover { background: #ffe9eb; }
.records .reset-button:active { box-shadow: none; transform: translateY(2px); }
.records .fine { margin-bottom: 0; }
@media (max-width: 360px) {
  .records { padding: 22px 14px; }
  .records li.record-entry { padding: 13px 10px; column-gap: 8px; }
}



/* Google AdSense 広告エリア */
.ad-area {
  display: block;
  width: 100%;
  min-height: 120px;
  margin: 16px 0;
  padding: 20px;
  background-color: #ffffff;
  border: 1px solid #dbe5f0;
  border-radius: 18px;
  box-shadow: 0 4px 18px rgba(21, 44, 75, 0.08);
  box-sizing: border-box;
  overflow: hidden;
}

.ad-area .adsbygoogle {
  display: block;
  width: 100%;
}