@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=Noto+Serif+JP:wght@500;600;700&display=swap");

:root {
  --paper: #f6f0e3;
  --paper-deep: #eee3d0;
  --ink: #202b2e;
  --muted: #716c63;
  --wood: #7a421d;
  --wood-light: #b98555;
  --lantern: #d59b4a;
  --line: #cbbca4;
  --danger: #8a3828;
  --white: #fffdf8;
  --shadow: 0 10px 30px rgba(65, 43, 25, 0.08);
}
html {
  background: var(--paper);
  color-scheme: light;
}
body {
  font-family:
    "Noto Sans JP",
    system-ui,
    -apple-system,
    sans-serif;
  background:
    radial-gradient(
      circle at 15% 0,
      rgba(255, 255, 255, 0.75),
      transparent 32rem
    ),
    var(--paper);
  color: var(--ink);
  letter-spacing: 0.015em;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  z-index: 100;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
}
h1,
h2,
h3,
.brand {
  font-family: "Noto Serif JP", serif;
  letter-spacing: 0.04em;
}
a {
  color: var(--wood);
}
button,
input,
textarea,
select {
  font: inherit;
}
input,
textarea,
select {
  font-size: 16px;
}
:focus-visible {
  outline: 3px solid var(--lantern);
  outline-offset: 3px;
}
.settings-switch input:focus-visible {
  outline: 0;
}
.settings-switch input:focus-visible + span {
  outline: 3px solid var(--lantern);
  outline-offset: 3px;
}
header {
  background: rgba(246, 240, 227, 0.94);
  border-color: var(--line);
  padding: 13px 18px;
  backdrop-filter: blur(12px);
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 21px;
  font-weight: 700;
}
.brand-mark {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid var(--wood);
  color: var(--wood);
  font:
    700 15px/1 "Noto Serif JP",
    serif;
}
#logoutTop {
  min-height: 44px !important;
  border-color: var(--line) !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--wood) !important;
}
.network-banner {
  top: 71px;
  background: #f4e5c7;
  color: #694b20;
  border-color: var(--line);
}
main {
  max-width: 680px;
  padding: 22px 18px 104px;
}
.card {
  background: rgba(255, 253, 248, 0.88);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.hero {
  background: linear-gradient(
    145deg,
    rgba(255, 253, 248, 0.96),
    rgba(238, 227, 208, 0.78)
  );
  border-left: 4px solid var(--wood);
}
.small,
label,
.sake-sub,
.sake-meta {
  color: var(--muted);
}
label {
  font-size: 13px;
  font-weight: 600;
  margin-top: 14px;
}
input,
textarea {
  min-height: 48px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(255, 253, 248, 0.92);
  color: var(--ink);
}
input:focus,
textarea:focus {
  outline: 2px solid rgba(213, 155, 74, 0.42);
  outline-offset: 1px;
  border-color: var(--wood);
}
.btn {
  min-height: 48px;
  padding: 12px 15px;
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: 0.025em;
  transition:
    transform 0.16s ease,
    filter 0.16s ease,
    background 0.16s ease;
}
.btn:active {
  transform: translateY(1px);
}
.primary {
  background: var(--wood);
  color: var(--white);
}
.secondary {
  background: var(--paper-deep);
  color: var(--wood);
  border: 1px solid var(--wood-light);
}
.outline {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
}
.danger {
  background: #f3e4de;
  color: var(--danger);
  border-color: #d7aaa0;
}
.msg {
  border-radius: 5px;
}
.ok {
  background: #e8ede2;
  color: #3f6045;
}
.err {
  background: #f3e4de;
  color: var(--danger);
}
.info {
  background: #e9e8df;
  color: #42545a;
}
.preview,
.sake-thumb,
.detail-photo {
  border-radius: 5px;
  background: var(--paper-deep);
}
.sake-card,
.top-sake,
.complete-sake {
  border-color: var(--line);
  border-radius: 6px;
  background: var(--white);
}
.tag {
  background: var(--paper-deep);
  color: var(--wood);
  border-radius: 3px;
}
.sake-comment,
.detail-info > div,
.detail-comment,
.stat-card,
.rank-row {
  background: #f1eadc;
  border-radius: 5px;
}
.complete-mark {
  background: var(--paper-deep);
  color: var(--wood);
}
nav {
  background: rgba(246, 240, 227, 0.97);
  border-color: var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  backdrop-filter: blur(14px);
}
.navin {
  grid-template-columns: repeat(3, 1fr);
}
.navbtn {
  min-height: 64px;
  padding: 8px 4px 7px;
  color: var(--muted);
  font-size: 11px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  position: relative;
}
.navbtn svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
}
.navbtn.active,
.navbtn.is-active {
  color: var(--wood);
  font-weight: 700;
}
.navbtn.active::before,
.navbtn.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  width: 38px;
  height: 2px;
  background: var(--lantern);
}
.v2-deferred {
  display: none !important;
}
.capture-screen {
  min-height: calc(100dvh - 95px);
  margin: -22px -18px -104px;
  padding: 18px 20px 32px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #151512, #24211b 58%, #171713);
  color: #fff;
}
.capture-topbar {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  text-align: center;
}
.capture-topbar span {
  font-size: 11px;
  color: #d7c5aa;
  letter-spacing: 0.12em;
}
.capture-topbar h2 {
  margin: 2px 0 0;
  font-size: 18px;
  font-weight: 600;
}
.capture-icon-btn {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: #fff;
}
.capture-icon-btn svg {
  width: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.capture-copy {
  text-align: center;
  margin: 25px 0 18px;
  font:
    500 16px/1.8 "Noto Serif JP",
    serif;
  letter-spacing: 0.06em;
}
.label-viewfinder {
  width: min(76vw, 310px);
  height: min(110vw, 440px);
  max-height: 48dvh;
  margin: 0 auto;
  position: relative;
  background: radial-gradient(
    ellipse at 50% 45%,
    rgba(185, 133, 76, 0.22),
    rgba(0, 0, 0, 0.46)
  );
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.viewfinder-corner {
  position: absolute;
  width: 32px;
  height: 32px;
  border-color: var(--lantern);
}
.corner-tl {
  top: -1px;
  left: -1px;
  border-top: 3px solid;
  border-left: 3px solid;
}
.corner-tr {
  top: -1px;
  right: -1px;
  border-top: 3px solid;
  border-right: 3px solid;
}
.corner-bl {
  bottom: -1px;
  left: -1px;
  border-bottom: 3px solid;
  border-left: 3px solid;
}
.corner-br {
  bottom: -1px;
  right: -1px;
  border-bottom: 3px solid;
  border-right: 3px solid;
}
.bottle-guide {
  position: absolute;
  inset: 9% 26% 5%;
  border: 2px dashed rgba(255, 255, 255, 0.36);
  border-radius: 42% 42% 10% 10%/15% 15% 5% 5%;
}
.bottle-guide::before {
  content: "";
  position: absolute;
  width: 34%;
  height: 14%;
  left: 33%;
  top: -9%;
  border: 2px dashed rgba(255, 255, 255, 0.36);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
}
.bottle-guide span {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 40%;
  height: 30%;
  border: 1px solid rgba(213, 155, 74, 0.72);
}
.capture-note {
  max-width: 330px;
  margin: 16px auto 12px;
  text-align: center;
  color: #d4c7b7;
  font-size: 12px;
  line-height: 1.7;
}
.capture-controls {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 96px 1fr;
  align-items: center;
  gap: 10px;
}
.capture-side-action {
  min-height: 58px;
  border: 0;
  background: transparent;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11px;
}
.capture-side-action svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
.capture-shutter {
  width: 82px;
  height: 82px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: transparent;
  padding: 6px;
  justify-self: center;
}
.capture-shutter span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--lantern);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2);
}
body:has(#captureView:not(.hidden)) > header,
body:has(#captureView:not(.hidden)) > nav {
  display: none;
}
body:has(#captureView:not(.hidden)) main {
  padding-top: 22px;
}
.photo-confirm-screen{min-height:calc(100dvh - 95px);max-width:520px;margin:0 auto;padding:4px 0 32px}.confirm-heading{text-align:center;margin-bottom:18px}.confirm-heading span{font-size:11px;color:var(--wood);letter-spacing:.14em}.confirm-heading h2{font-size:22px;margin:4px 0 0}.confirm-photo-wrap{width:min(72vw,330px);aspect-ratio:3/4;margin:0 auto;padding:8px;background:#322116;border:1px solid var(--wood-light);box-shadow:var(--shadow)}.confirm-photo-wrap img{display:block;width:100%;height:100%;object-fit:cover}.photo-confirm-screen>p{max-width:330px;margin:18px auto;text-align:center;color:var(--muted);font-size:13px;line-height:1.75}.photo-confirm-screen>.btn{max-width:390px;display:block;margin:10px auto 0}.confirm-text-button{display:block;min-height:44px;margin:10px auto 0;padding:8px 18px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--wood);font-weight:600}
body:has(#frontConfirmView:not(.hidden))>nav{display:none}
.back-text-guide{position:absolute;inset:18% 12%;padding:18% 10%;border:1px solid rgba(213,155,74,.7);display:flex;flex-direction:column;gap:13%}.back-text-guide span{display:block;height:2px;background:rgba(255,255,255,.5)}.back-text-guide span:nth-child(2){width:78%}.back-text-guide span:nth-child(3){width:91%}.back-text-guide span:nth-child(4){width:62%}
body:has(#backCaptureView:not(.hidden))>header,body:has(#backCaptureView:not(.hidden))>nav,body:has(#backConfirmView:not(.hidden))>nav{display:none}body:has(#backCaptureView:not(.hidden)) main{padding-top:22px}
.searching-screen{min-height:calc(100dvh - 95px);margin:-22px -18px -104px;padding:72px 28px 40px;background:linear-gradient(160deg,#21150e,#3c2718 55%,#1b120d);color:#fff;text-align:center}.searching-copy>span{font:500 12px/1 "Noto Serif JP",serif;color:var(--lantern);letter-spacing:.2em}.searching-copy h2{margin:16px 0 8px;font-size:25px;font-weight:500}.searching-copy p{margin:0;color:#d8cabc;font-size:13px}.searching-photos{display:grid;grid-template-columns:1fr 34px 1fr;align-items:center;max-width:390px;margin:64px auto 0}.searching-photos figure{margin:0}.searching-photos img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border:1px solid rgba(213,155,74,.72);padding:4px;background:#170f0a;box-shadow:0 14px 30px rgba(0,0,0,.3)}.searching-photos figcaption{margin-top:9px;font:500 12px/1 "Noto Serif JP",serif;color:#d8cabc}.searching-light{width:9px;height:9px;margin:0 auto;border-radius:50%;background:var(--lantern);box-shadow:0 0 6px var(--lantern),0 0 20px var(--lantern);animation:searchingGlow 1.5s ease-in-out infinite}.searching-progress{width:min(250px,68vw);height:1px;margin:58px auto 0;background:rgba(255,255,255,.2);overflow:hidden}.searching-progress span{display:block;width:42%;height:100%;background:var(--lantern);animation:searchingMove 1.8s ease-in-out infinite}@keyframes searchingGlow{50%{opacity:.35;transform:scale(.75)}}@keyframes searchingMove{0%{transform:translateX(-105%)}100%{transform:translateX(340%)}}body:has(#searchingView:not(.hidden))>header,body:has(#searchingView:not(.hidden))>nav{display:none}body:has(#searchingView:not(.hidden)) main{padding-top:22px}
.candidate-screen{max-width:520px;margin:0 auto;padding:4px 0 32px}.candidate-heading{text-align:center}.candidate-heading>span{font:500 12px/1 "Noto Serif JP",serif;color:var(--wood);letter-spacing:.14em}.candidate-heading h2{font-size:26px;margin:10px 0 5px}.candidate-heading p{margin:0;color:var(--muted);font-size:13px}.candidate-photo-pair{display:flex;justify-content:center;gap:8px;margin:22px auto}.candidate-photo-pair img{width:auto;max-width:46%;height:145px;object-fit:cover;border:1px solid var(--line);padding:3px;background:var(--white)}.candidate-list{border-top:1px solid var(--line);padding-top:14px}.candidate-list>b{display:block;margin-bottom:7px;font:600 15px/1.5 "Noto Serif JP",serif}.candidate-list .candidate{border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);padding:15px 4px}.candidate-list .candidate:last-of-type{border-bottom:1px solid var(--line)}.candidate-list .candidate b{font-family:"Noto Serif JP",serif;font-size:17px}.candidate-list .candidate .small{color:var(--muted)}.candidate-note{font-size:11px;line-height:1.7;color:var(--muted);margin:14px 4px}.candidate-screen>.confirm-text-button{margin-top:10px}body:has(#candidateView:not(.hidden))>nav{display:none}
.autumn-home-hero {
  min-height: 930px;
  margin: -22px -18px 0;
  padding: 38px 38px 46px;
  position: relative;
  display: flex;
  flex-direction: column;
  color: #fff;
  background:
    linear-gradient(
      180deg,
      rgba(11, 8, 5, 0.22),
      rgba(11, 8, 5, 0.06) 42%,
      rgba(11, 8, 5, 0.42)
    ),
    url("assets/home-autumn-loghouse.png") center top/cover no-repeat;
}
.home-intro {
  position: relative;
  z-index: 1;
}
.home-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font:
    600 27px/1.2 "Noto Serif JP",
    serif;
  letter-spacing: 0.08em;
}
.home-logo svg {
  width: 58px;
  height: 58px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.home-intro p {
  margin: 12px 0 0;
  font-family: "Noto Serif JP", serif;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 8px #000;
}
.autumn-home-hero h1 {
  margin: 245px 0 0;
  font-size: 36px;
  line-height: 1.65;
  font-weight: 500;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.72);
}
.coaster-camera {
  align-self: center;
  width: 190px;
  height: 190px;
  margin-top: 120px;
  border: 2px solid #5f3219;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #2a170c;
  background: radial-gradient(circle at 50% 38%, #d9aa6c, #a96d32);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.42),
    inset 0 0 0 6px rgba(255, 226, 166, 0.18);
  font:
    700 19px/1.3 "Noto Serif JP",
    serif;
}
.coaster-camera svg {
  width: 52px;
  height: 52px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.home-photo-choice,
.home-manual {
  align-self: center;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.62);
  background: rgba(20, 12, 7, 0.42);
  color: #fff;
  min-height: 44px;
  padding: 8px 14px;
  font-size: 13px;
}
.home-photo-choice {
  margin-top: 16px;
}
.home-manual {
  margin-top: 8px;
}
.home-lower {
  margin: 0 -18px;
  padding: 30px 38px 112px;
  color: #fff;
  background: #1f120b url("assets/home-autumn-loghouse.png") center bottom/cover
    no-repeat;
  background-blend-mode: multiply;
}
.home-lower h3 {
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.72);
  padding-bottom: 14px;
}
.home-lower .record {
  border-color: rgba(255, 255, 255, 0.38);
}
.home-lower .record,
.home-lower .record a,
.home-lower .small {
  color: #fff;
}
.home-knowledge {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 14px;
  align-items: center;
  margin-top: 24px;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  text-decoration: none;
}
.home-knowledge-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--lantern);
  color: var(--lantern);
  font-family: "Noto Serif JP", serif;
}
.home-knowledge strong,
.home-knowledge small {
  display: block;
}
.home-knowledge strong {
  font:
    600 20px/1.4 "Noto Serif JP",
    serif;
}
.home-knowledge small {
  margin-top: 4px;
  color: #e5d8c8;
}
body:has(#homeView:not(.hidden)) > header {
  position: absolute;
  width: 100%;
  background: transparent;
  border: 0;
  color: #fff;
}
body:has(#homeView:not(.hidden)) > header .brand {
  visibility: hidden;
}
body:has(#homeView:not(.hidden)) #logoutTop {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
}
body:has(#homeView:not(.hidden)) main {
  padding-top: 0;
}
.head .back,
.topic,
.term,
.more {
  border-color: var(--line);
  border-radius: 6px;
  background: rgba(255, 253, 248, 0.9);
  color: var(--ink);
  box-shadow: none;
}
.head .back {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--wood);
}
.topic {
  min-height: 132px;
}
.topic p,
.lead,
.guide-lead,
.term-body {
  color: var(--muted);
}
.topic .tag {
  background: var(--wood);
  color: var(--white);
}
.term summary::after,
.term-body b {
  color: var(--wood);
}
.tip,
.note {
  background: var(--paper-deep);
  border-radius: 6px;
}
.more {
  color: var(--wood);
}
@media (max-width: 420px) {
  main {
    padding-left: 14px;
    padding-right: 14px;
  }
  .card {
    padding: 17px;
  }
  .grid {
    gap: 8px;
  }
  .autumn-home-hero {
    margin-left: -14px;
    margin-right: -14px;
    padding-left: 28px;
    padding-right: 28px;
    min-height: 900px;
  }
  .autumn-home-hero h1 {
    font-size: 32px;
    margin-top: 235px;
  }
  .coaster-camera {
    width: 174px;
    height: 174px;
    margin-top: 115px;
  }
  .home-lower {
    margin-left: -14px;
    margin-right: -14px;
    padding-left: 28px;
    padding-right: 28px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}