:root {
  color-scheme: dark;
  --bg: #151515;
  --panel: #202020;
  --panel-2: #2a2a2a;
  --paper: #f0ede6;
  --ink: #151515;
  --text: #f4f1ea;
  --muted: #aaa49a;
  --line: #3d3d3d;
  --lime: #d7ff57;
  --red: #ff6257;
  --shadow: rgba(0, 0, 0, .35);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 50% -20%, rgba(215,255,87,.09), transparent 36%),
    var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }

.app {
  width: min(100%, 720px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: calc(14px + env(safe-area-inset-top)) 16px calc(86px + env(safe-area-inset-bottom));
}

.topbar {
  min-height: 44px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.home-link, .record-btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #494949;
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  color: var(--text);
  text-decoration: none;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .04em;
}
.home-link { justify-self: start; padding: 0 13px; }
.record-btn { justify-self: end; padding: 0 14px; cursor: pointer; }
.brand-mini {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  text-align: center;
}

.screen { display: none; animation: screenIn .26s ease both; }
.screen.active { display: grid; gap: 20px; }
@keyframes screenIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.eyebrow {
  margin: 0;
  color: var(--lime);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .17em;
}
.reset-copy, .screen-copy { display: grid; gap: 10px; }
h1, h2, p { margin: 0; }
h1 {
  max-width: 620px;
  font-size: clamp(48px, 13vw, 86px);
  line-height: .9;
  letter-spacing: -.072em;
  font-weight: 950;
}
h2 {
  font-size: clamp(38px, 9vw, 64px);
  line-height: .96;
  letter-spacing: -.06em;
  font-weight: 950;
}
h2 em { color: var(--lime); font-style: normal; }
.lead, .screen-copy > p:last-child {
  color: var(--muted);
  font-size: clamp(16px, 3.7vw, 20px);
  line-height: 1.65;
  font-weight: 700;
}

.opponent-label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .03em;
}
.opponent-label span { color: #777; font-size: 12px; font-weight: 700; }
.opponent-input, .custom-wrap textarea {
  width: 100%;
  border: 1px solid #4b4b4b;
  outline: none;
  border-radius: 16px;
  background: #1b1b1b;
  color: var(--text);
}
.opponent-input {
  min-height: 54px;
  padding: 0 16px;
  font-size: 16px;
  font-weight: 800;
}
.opponent-input:focus, .custom-wrap textarea:focus { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(215,255,87,.09); }
.opponent-input::placeholder, .custom-wrap textarea::placeholder { color: #666; }

.dismiss-stage {
  position: relative;
  min-height: 290px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid #333;
  background:
    linear-gradient(90deg, rgba(255,98,87,.07), transparent 24%, transparent 76%, rgba(255,98,87,.07)),
    #1b1b1b;
  touch-action: pan-y;
}
.lane {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 26%;
  display: grid;
  place-items: center;
  opacity: .18;
  color: var(--red);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .18em;
}
.lane-left { left: 0; border-right: 1px dashed #593b38; }
.lane-right { right: 0; border-left: 1px dashed #593b38; }
.opponent-card {
  position: relative;
  z-index: 2;
  width: min(76%, 390px);
  min-height: 188px;
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 22px;
  border: 2px solid #eae5db;
  border-radius: 23px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 16px 45px var(--shadow);
  user-select: none;
  cursor: grab;
  transform: translate3d(0,0,0) rotate(0deg);
  transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease;
}
.opponent-card.dragging { transition: none; cursor: grabbing; box-shadow: 0 20px 60px rgba(0,0,0,.55); }
.opponent-card.dismiss-left { transform: translate3d(-150%, 10px, 0) rotate(-13deg); opacity: 0; }
.opponent-card.dismiss-right { transform: translate3d(150%, 10px, 0) rotate(13deg); opacity: 0; }
.opponent-card small { color: #6b665e; font-size: 12px; font-weight: 950; letter-spacing: .14em; }
.opponent-card strong { font-size: clamp(30px, 7vw, 45px); line-height: 1; letter-spacing: -.055em; overflow-wrap: anywhere; }
.opponent-card span { max-width: 260px; color: #5c5852; font-size: 13px; line-height: 1.6; font-weight: 750; }
.opponent-card i {
  position: absolute;
  left: -6%; right: -6%; top: 49%; height: 5px;
  background: var(--red);
  transform: rotate(-7deg);
  border-radius: 999px;
  pointer-events: none;
}
.swipe-guide {
  position: absolute;
  left: 0; right: 0; bottom: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  color: #7c7770;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
}
.swipe-guide span { color: var(--red); font-size: 16px; }
.fallback-btn, .text-btn {
  justify-self: center;
  min-height: 42px;
  border: 0;
  background: transparent;
  color: #989187;
  font-size: 12px;
  font-weight: 850;
  text-decoration: underline;
  text-decoration-color: #555;
  text-underline-offset: 4px;
  cursor: pointer;
}
.today-mini {
  justify-self: start;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid #3b3b3b;
  border-radius: 999px;
  color: #aaa;
  font-size: 12px;
}
.today-mini[hidden] { display: none; }
.today-mini:not([hidden]) { display: inline-flex; }
.today-mini strong { color: var(--lime); }

.enemy-reveal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  perspective: 900px;
}
.ghost-card, .today-card {
  min-height: 205px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  border-radius: 24px;
  padding: 18px 12px;
  border: 2px solid #e8e3d9;
  text-align: center;
  animation: cardReveal .5s cubic-bezier(.2,.85,.2,1) both;
}
.ghost-card {
  color: #bdb6ab;
  background: repeating-linear-gradient(-45deg, #272727, #272727 8px, #303030 8px, #303030 16px);
}
.today-card { background: var(--lime); color: var(--ink); animation-delay: .09s; }
@keyframes cardReveal { from { opacity: 0; transform: rotateY(18deg) translateY(20px); } to { opacity: 1; transform: none; } }
.ghost-card span, .today-card span { font-size: 12px; font-weight: 950; letter-spacing: .13em; }
.ghost-card strong, .today-card strong { font-size: clamp(25px, 6vw, 38px); line-height: .98; letter-spacing: -.05em; }
.ghost-card b, .today-card b { font-size: 12px; letter-spacing: .12em; }
.last-win {
  display: grid;
  gap: 7px;
  padding: 15px 17px;
  border-left: 5px solid var(--lime);
  background: #1c1c1c;
}
.last-win[hidden] { display: none; }
.last-win span { color: #777; font-size: 12px; font-weight: 900; letter-spacing: .1em; }
.last-win strong { line-height: 1.5; }

.primary-btn, .secondary-btn, .win-btn, .not-yet-btn {
  width: 100%;
  min-height: 62px;
  border-radius: 18px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 950;
}
.primary-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 0 19px;
  border: 2px solid var(--lime);
  background: var(--lime);
  color: var(--ink);
}
.primary-btn:disabled { opacity: .28; cursor: not-allowed; }
.secondary-btn {
  border: 2px solid #e8e3d9;
  background: transparent;
}
.primary-btn:not(:disabled):active, .secondary-btn:active, .win-btn:active, .not-yet-btn:active, .win-option:active { transform: translateY(2px); }

.win-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.win-option {
  min-height: 146px;
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 16px;
  border: 1px solid #454545;
  border-radius: 19px;
  background: #1c1c1c;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.win-option.selected { border: 2px solid var(--lime); background: #24281a; box-shadow: 0 7px 0 #687c2a; transform: translateY(-2px); }
.win-code {
  width: fit-content;
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: #303030;
  color: #bcb5ab;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .1em;
}
.win-option.selected .win-code { background: var(--lime); color: var(--ink); }
.win-option strong { font-size: 17px; letter-spacing: -.025em; }
.win-option small { color: #928b82; line-height: 1.55; font-size: 12px; font-weight: 700; }
.custom-wrap { display: grid; gap: 8px; }
.custom-wrap[hidden] { display: none; }
.custom-wrap span { font-size: 12px; color: #999; font-weight: 900; }
.custom-wrap textarea { resize: vertical; min-height: 100px; padding: 14px 15px; font-size: 15px; line-height: 1.6; }
.selected-win {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
}
.selected-win[hidden] { display: none; }
.selected-win span { color: #706b63; font-size: 12px; font-weight: 950; letter-spacing: .1em; }
.selected-win strong { font-size: 18px; line-height: 1.5; }

.scoreboard, .final-score {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
}
.score-side {
  min-height: 172px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  border-radius: 23px;
  border: 2px solid #e8e3d9;
}
.yesterday-side { color: #aaa49b; background: repeating-linear-gradient(-45deg, #252525, #252525 8px, #303030 8px, #303030 16px); }
.today-side { color: var(--ink); background: var(--lime); }
.score-side span { font-size: 12px; font-weight: 950; letter-spacing: .13em; }
.score-side strong { font-size: 68px; line-height: .82; letter-spacing: -.08em; }
.score-side small { font-size: 12px; font-weight: 850; }
.score-vs { font-size: 12px; font-weight: 950; color: #777; }
.mission-card, .nudge-card {
  display: grid;
  gap: 9px;
  padding: 20px;
  border-radius: 20px;
}
.mission-card { border: 2px solid #e8e3d9; background: #1b1b1b; }
.mission-card span, .nudge-card span { color: #878077; font-size: 12px; font-weight: 950; letter-spacing: .13em; }
.mission-card strong { font-size: clamp(20px, 5vw, 28px); line-height: 1.42; letter-spacing: -.035em; }
.nudge-card { border-left: 6px solid var(--lime); background: #24271d; }
.nudge-card[hidden] { display: none; }
.nudge-card strong { font-size: 19px; line-height: 1.5; }
.nudge-card p { color: #a19a91; font-size: 12px; line-height: 1.65; font-weight: 700; }
.duel-actions { display: grid; grid-template-columns: 1.5fr .8fr; gap: 11px; }
.win-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  border: 2px solid var(--lime);
  background: var(--lime);
  color: var(--ink);
}
.win-btn b { font-size: 12px; letter-spacing: .08em; }
.not-yet-btn { border: 2px solid #e8e3d9; background: transparent; }
.local-note { color: #666; font-size: 12px; text-align: center; }

.result-screen { justify-items: stretch; }
.one-win-mark {
  width: 126px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 4px solid var(--paper);
  background: var(--lime);
  color: var(--ink);
  box-shadow: 9px 9px 0 var(--paper);
  transform: rotate(-4deg);
  animation: winPop .46s cubic-bezier(.2,1.25,.2,1) both;
}
.one-win-mark span { font-size: 76px; line-height: 1; font-weight: 950; letter-spacing: -.1em; transform: translateX(-3px); }
@keyframes winPop { from { opacity: 0; transform: rotate(-12deg) scale(.55); } to { opacity: 1; transform: rotate(-4deg) scale(1); } }
.final-score > div {
  min-height: 104px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  border: 2px solid #e8e3d9;
  border-radius: 20px;
  background: #1b1b1b;
}
.final-score > div:last-child { background: var(--lime); color: var(--ink); }
.final-score span { font-size: 12px; font-weight: 900; color: #888; }
.final-score > div:last-child span { color: #4d571f; }
.final-score strong { font-size: 50px; line-height: .9; }
.result-mission { background: var(--paper); color: var(--ink); }
.result-mission span { color: #676159; }
.actual-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.actual-stats > div {
  min-height: 80px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 12px;
  border-top: 2px solid #6b6b6b;
}
.actual-stats span { color: #777; font-size: 12px; font-weight: 900; }
.actual-stats strong { font-size: 21px; }
.seven-days { display: grid; gap: 12px; padding: 18px; border: 1px solid #393939; border-radius: 20px; background: #1b1b1b; }
.seven-head { display: flex; justify-content: space-between; gap: 12px; align-items: end; }
.seven-head span { font-size: 12px; font-weight: 950; }
.seven-head b { color: #6f6a63; font-size: 12px; font-weight: 800; text-align: right; }
.day-bars { min-height: 78px; display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 8px; }
.day-bar { display: grid; gap: 6px; justify-items: center; }
.day-bar i { width: 100%; min-height: 7px; border-radius: 5px 5px 2px 2px; background: #333; transition: height .25s ease; }
.day-bar.active i { background: var(--lime); }
.day-bar span { color: #777; font-size: 12px; font-weight: 800; }
blockquote {
  margin: 0;
  padding: 18px 0;
  border-top: 1px solid #3d3d3d;
  border-bottom: 1px solid #3d3d3d;
  color: #aaa39a;
  font-size: 15px;
  line-height: 1.75;
  font-weight: 700;
}
blockquote strong { color: var(--text); font-size: 18px; }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.share-status { min-height: 18px; color: #8f887e; font-size: 12px; text-align: center; font-weight: 800; }

.record-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.record-summary > div {
  min-height: 118px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 18px;
  border: 2px solid #e8e3d9;
  border-radius: 20px;
  background: #1b1b1b;
}
.record-summary span { color: #888; font-size: 12px; font-weight: 900; letter-spacing: .05em; }
.record-summary strong { color: var(--lime); font-size: 44px; line-height: 1; }
.record-list { display: grid; gap: 9px; }
.record-empty { padding: 28px 20px; border: 1px dashed #444; border-radius: 18px; color: #888; text-align: center; line-height: 1.7; font-size: 13px; }
.record-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 15px;
  border: 1px solid #343434;
  border-radius: 17px;
  background: #1b1b1b;
}
.record-item b { min-width: 42px; min-height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--lime); color: var(--ink); font-size: 12px; }
.record-item div { display: grid; gap: 5px; }
.record-item time { color: #777; font-size: 12px; font-weight: 850; }
.record-item strong { font-size: 13px; line-height: 1.5; }

.toast {
  position: fixed;
  left: 50%; bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 10;
  max-width: calc(100vw - 32px);
  padding: 11px 15px;
  border-radius: 999px;
  background: #eee9df;
  color: #171717;
  font-size: 12px;
  font-weight: 900;
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: .2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 560px) {
  .app { padding-left: 12px; padding-right: 12px; }
  .topbar { grid-template-columns: 1fr auto; }
  .brand-mini { display: none; }
  .home-link { grid-column: 1; }
  .record-btn { grid-column: 2; }
  .win-grid { grid-template-columns: 1fr; }
  .win-option { min-height: 0; }
  .result-actions, .duel-actions { grid-template-columns: 1fr; }
  .ghost-card, .today-card, .score-side { min-height: 150px; }
  .score-side strong { font-size: 56px; }
  .opponent-card { width: 82%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #f1eee7;
    --panel: #fffdf8;
    --panel-2: #e5e1d8;
    --text: #171717;
    --muted: #68635c;
    --line: #d3cec4;
    --paper: #171717;
    --ink: #f4f1ea;
    --shadow: rgba(44,38,31,.14);
  }
  body { background: radial-gradient(circle at 50% -20%, rgba(142,173,33,.13), transparent 35%), var(--bg); }
  .home-link, .record-btn { border-color: #c8c2b7; background: rgba(255,255,255,.42); }
  .dismiss-stage, .last-win, .win-option, .mission-card, .final-score > div, .seven-days, .record-summary > div, .record-item { background: rgba(255,255,255,.55); border-color: #cfc9be; }
  .opponent-input, .custom-wrap textarea { background: rgba(255,255,255,.62); color: #171717; border-color: #c8c2b7; }
  .opponent-card { background: #171717; color: #f4f1ea; border-color: #171717; }
  .opponent-card small, .opponent-card span { color: #aaa39a; }
  .ghost-card, .yesterday-side { color: #68635c; background: repeating-linear-gradient(-45deg, #ddd8ce, #ddd8ce 8px, #e9e5dc 8px, #e9e5dc 16px); border-color: #171717; }
  .today-card, .today-side { border-color: #171717; }
  .secondary-btn, .not-yet-btn, .score-side, .mission-card, .final-score > div, .record-summary > div { border-color: #171717; }
  .result-mission { background: #171717; color: #f4f1ea; }
  .result-mission span { color: #aaa39a; }
  .one-win-mark { border-color: #171717; box-shadow: 9px 9px 0 #171717; }
  .nudge-card { background: #e6ebd1; }
  .nudge-card p { color: #666158; }
  blockquote { border-color: #cfc9be; color: #6e6860; }
  blockquote strong { color: #171717; }
}