/* ================================
   KASANE — style.css
   Japanese/Western selvedge aesthetic

   SKINS: every visual role below is driven by five variables
   (--bg/--text/--text-dim/--accent/--accent-pop) plus texture.
   :root defines the default 'denim' skin. Other skins override
   those same variables under [data-skin="..."] — component rules
   never change, only the values do. This means a new theme that
   reuses an existing skin (e.g. a future leather-jackets pack
   reusing 'leather') needs zero new CSS.
   ================================ */

:root {
  --bg:              #1a1f3c;
  --text:            #f5f0e8;
  --text-dim:        #c8bfb0;
  --accent:          #b87333;
  --accent-pop:      #b87333;
  --card-texture:    url('images/fabric.jpg');
  --body-texture:    url('images/fabdetail.jpg');
  --card-overlay-pct: 55%;

  /* Correct/incorrect signal colors — fixed, not skin-tinted. This is a
     functional signal, not a decorative one, so it needs to read the
     same way regardless of which skin is active rather than being
     reinterpreted per theme the way --accent is. */
  --success: #5C8A4A;
  --error:   #c0392b;

  --font-title:  'Alfa Slab One', serif;
  --font-body:   'Noto Sans JP', sans-serif;
}

/* --- LEATHER SKIN (Boot Trivia, and any future leather-goods pack) ---
   No texture — flat color. Primary text is a cream anchor rather than
   one of the leather swatches themselves, since the darkest/lightest
   leather tones alone don't span enough contrast to read well as body
   copy against a near-black background. */
body[data-skin="leather"] {
  --bg:              #312715;
  --text:            #F0E2C0;
  --text-dim:        #a78a58;
  --accent:          #7D6740;
  --accent-pop:      #d3af70;
  --card-texture:    none;
  --body-texture:    none;
  --card-overlay-pct: 0%;
}

/* --- DENIM SKIN (in-game only) ---
   Flat color, no texture — the textured/copper :root look stays on the
   home page, which never gets a [data-skin] attribute. This block only
   applies once a denim puzzle is active (see applySkin() in script.js). */
body[data-skin="denim"] {
  --bg:              #0F4D96;
  --text:            #f5f0e8;
  --text-dim:        #ddd4c6;
  --accent:          #438EEA;
  --accent-pop:      #BD7215;
  --card-texture:    none;
  --body-texture:    none;
  --card-overlay-pct: 0%;
}

/* --- RESET ---
   Browsers add default margins and padding we don't want.
   This zeroes everything out so we start clean. */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  overflow-x: hidden;
}

/* --- BASE ---
   The body has the skin's texture (if any), then #app sits on top
   with a semi-transparent overlay across the full page — tames the
   texture while keeping it visible. When a skin has no texture this
   overlay is just the same solid color layered on itself, so it's
   automatically a no-op. */
body {
  background-color: var(--bg);
  background-image: var(--body-texture);
  background-size: 200px;
  background-repeat: repeat;
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-color: color-mix(in srgb, var(--bg) 92%, transparent);
  pointer-events: none;
  z-index: 0;
}


/* --- APP WRAPPER ---
   Centers everything, max width so it doesn't stretch on desktop.
   position:relative and z-index:1 sit it above the body::before overlay. */
#app {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- SCREENS ---
   All screens live in the DOM at once.
   Only the one with class "active" is visible.
   This is the core of our single-page navigation. */
.screen {
  display: none;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding: 40px 0 20px;
}

.screen.active {
  display: flex;
}

/* --- TITLE SCREEN --- */
.title-block {
  text-align: center;
  margin-bottom: 16px;
  padding: 24px 16px;
}

.game-title {
  font-family: var(--font-title);
  font-size: clamp(2.6rem, 10vw, 4rem);
  letter-spacing: clamp(0.05em, 1.5vw, 0.15em);
  color: var(--text);
  text-shadow: 2px 2px 0px var(--accent);
  line-height: 1;
}

.game-title-jp {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: 0.3em;
  margin-top: 8px;
  white-space: nowrap;
}

.game-subtitle {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--text);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 6px;
}

/* --- PROVERB BLOCK --- */
.proverb-block {
  text-align: center;
  padding: 24px 16px;
  margin-bottom: 40px;
}

.proverb-jp {
  font-size: 1rem;
  color: var(--text);
  letter-spacing: 0.04em;
  margin-bottom: 10px;
  white-space: nowrap;
}

.proverb-en {
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--text-dim);
  font-style: italic;
  line-height: 1.6;
}

/* --- THEME PICKER (title screen) ---
   Reuses the same .card look as puzzle cards. Always rendered in the
   default (denim) skin regardless of which theme it links to — skin
   only switches once you're inside a theme's puzzle flow. */
.theme-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.theme-entry {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.theme-card {
  width: 100%;
  cursor: pointer;
}

.theme-card:active {
  transform: scale(0.97);
}

/* --- BUTTONS --- */
.btn-primary {
  font-family: var(--font-title);
  font-size: 1rem;
  letter-spacing: 0.2em;
  color: var(--bg);
  background-color: var(--accent-pop);
  border: none;
  border-radius: 6px;
  padding: 14px 48px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.btn-primary:hover {
  background-color: var(--text);
}

.btn-primary:active {
  transform: scale(0.97);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- FOOTER --- */
.site-footer {
  margin-top: auto;
  padding: 20px 0 12px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-dim);
  line-height: 1.6;
}

.site-footer a {
  color: var(--accent);
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

/* --- SUBMIT BAR ---
   Sits a fixed distance below the card list, not pinned to the bottom
   of the screen — so it stays close to the cards regardless of how
   much leftover space a shorter puzzle leaves on a tall phone. */
.submit-bar {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 16px 0 8px;
}

/* --- PUZZLE SCREEN ---
   Header is deliberately compact: with pill cards the whole puzzle —
   header, cards, submit — fits one phone screen with no scrolling,
   which is what makes whole-card drag possible. */
#screen-puzzle {
  padding-top: 16px;
}

.puzzle-header {
  text-align: center;
  margin-bottom: 14px;
  width: 100%;
}

.puzzle-count {
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.puzzle-title {
  font-family: var(--font-title);
  font-size: 1.35rem;
  color: var(--text);
  text-shadow: 1px 1px 0px var(--accent);
  margin-bottom: 6px;
}

.puzzle-instruction {
  font-size: 0.78rem;
  color: var(--text-dim);
  line-height: 1.35;
  margin-bottom: 6px;
}

.attempts-left {
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}

.attempts-left span {
  color: var(--accent);
  font-weight: 700;
}

/* --- CARDS --- */
.card-list {
  position: relative; /* anchors the drag-tutorial overlay */
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

/* Base .card is shared by the title screen's theme picker (two-line
   .card-content layout) and the puzzle screen's pills — puzzle-specific
   overrides are scoped to #card-list below. */
.card {
  width: 100%;
  background-color: color-mix(in srgb, var(--bg) 85%, white 15%);
  background-image: var(--card-texture);
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  cursor: default;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  border: 2px solid transparent;
  transition: border-color 0.2s ease, transform 0.1s ease;
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
}

/* Overlay on each card, strength set per skin — tames the texture so
   text stays readable. Skins with no texture set this to 0%, so it's
   a no-op rather than muddying the flat color underneath. */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--bg) var(--card-overlay-pct), transparent);
  border-radius: 8px;
}

/* Puzzle cards are thin single-line pills — the entire card is the drag
   surface, no handle. touch-action:none is safe here because the puzzle
   screen fits without scrolling at 4-6 cards; a future 7+ card puzzle
   would need to revisit this. */
#card-list .card {
  flex-wrap: wrap;          /* an over-long label wraps visibly instead of clipping */
  align-items: baseline;
  justify-content: center;
  padding: 10px 14px;
  touch-action: none;
  cursor: grab;
}

.pill-label {
  position: relative;
  z-index: 1;
  font-family: var(--font-title);
  font-size: 0.88rem;
  color: var(--text);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  flex: 1;
  min-width: 0;
  padding: 11px 8px 11px 18px;
}

.card-label, .card-sub {
  position: relative;
  z-index: 1;
}

.card-label {
  font-family: var(--font-title);
  font-size: 0.92rem;
  color: var(--text);
  letter-spacing: 0.05em;
}

.card-sub {
  font-size: 0.72rem;
  color: var(--accent);
  letter-spacing: 0.1em;
}

#card-list .card[data-locked="true"] {
  cursor: default;
}

.card.correct {
  border-color: var(--success);
  border-width: 3px;
  box-shadow: 0 0 14px color-mix(in srgb, var(--success) 55%, transparent);
}

.card.incorrect {
  border-color: var(--error);
  border-width: 3px;
}

.card.dragging {
  cursor: grabbing;
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.45), 0 4px 10px rgba(0, 0, 0, 0.3);
  transform: scale(1.045) rotate(-1.4deg);
}

.card-placeholder {
  border: 2px dashed color-mix(in srgb, var(--text) 28%, transparent);
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

/* --- DRAG TUTORIAL ---
   First-play overlay: a hand presses the top card, drags it down one
   slot and back, looping. Sits over the card list but ignores all
   pointer events, so the first real touch lands on the cards beneath.
   --slot (one card height + gap) is measured and set by script.js. */
#drag-tutorial {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.35s ease;
}

#drag-tutorial.done {
  opacity: 0;
}

.tutorial-hand {
  position: absolute;
  top: 6px;
  right: 12%;
  width: 52px;
  animation: demoHand 4.5s ease-in-out infinite;
  transform-origin: 50% 20%;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.4));
}

.tutorial-bubble {
  position: absolute;
  top: calc(var(--slot, 52px) + 46px);
  right: 4%;
  max-width: 220px;
  background: var(--accent-pop);
  color: var(--bg);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  padding: 12px 14px;
  border-radius: 12px;
  border-top-right-radius: 2px;
}

@keyframes demoHand {
  0%, 6%    { opacity: 0; transform: translateY(0) scale(1); }
  13%       { opacity: 1; transform: translateY(0) scale(1); }
  20%       { opacity: 1; transform: translateY(0) scale(0.88); }
  48%       { opacity: 1; transform: translateY(var(--slot, 52px)) scale(0.88); }
  56%       { opacity: 1; transform: translateY(var(--slot, 52px)) scale(1); }
  63%       { opacity: 1; transform: translateY(var(--slot, 52px)) scale(0.88); }
  88%       { opacity: 1; transform: translateY(0) scale(0.88); }
  94%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* While the demo runs, the top two cards act it out: card 1 is "dragged"
   down a slot and back, card 2 steps aside and returns. */
.demo-running .card:nth-child(1) {
  animation: demoCardA 4.5s ease-in-out infinite;
  z-index: 10;
}

.demo-running .card:nth-child(2) {
  animation: demoCardB 4.5s ease-in-out infinite;
}

@keyframes demoCardA {
  0%, 20%   { transform: none; box-shadow: none; }
  26%       { transform: scale(1.04); box-shadow: 0 14px 24px rgba(0, 0, 0, 0.45); }
  48%       { transform: translateY(var(--slot, 52px)) scale(1.04); box-shadow: 0 14px 24px rgba(0, 0, 0, 0.45); }
  56%       { transform: translateY(var(--slot, 52px)) scale(1); box-shadow: none; }
  63%       { transform: translateY(var(--slot, 52px)) scale(1.04); box-shadow: 0 14px 24px rgba(0, 0, 0, 0.45); }
  88%       { transform: scale(1.04); box-shadow: 0 14px 24px rgba(0, 0, 0, 0.45); }
  94%, 100% { transform: none; box-shadow: none; }
}

@keyframes demoCardB {
  0%, 26%   { transform: none; }
  46%       { transform: translateY(calc(-1 * var(--slot, 52px))); }
  64%       { transform: translateY(calc(-1 * var(--slot, 52px))); }
  86%, 100% { transform: none; }
}

/* Suppress the overlay so the dashed placeholder reads as empty */
.card-placeholder::before {
  content: none;
}

.card[data-locked="true"] {
  opacity: 0.9;
}

/* --- CORRECT BANNER --- */
.correct-banner {
  font-family: var(--font-title);
  font-size: 1.8rem;
  color: var(--accent-pop);
  text-align: center;
  letter-spacing: 0.1em;
  padding: 16px 0;
  animation: fadeInUp 0.4s ease;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- BORDER HINT --- */
.border-hint {
  font-size: 0.72rem;
  color: var(--accent);
  text-align: center;
  letter-spacing: 0.05em;
  margin-top: -4px;
  margin-bottom: 12px;
  animation: fadeInUp 0.4s ease;
}

/* --- RESULTS / INFO CARD SCREEN --- */
.results-header {
  text-align: center;
  margin-bottom: 20px;
  width: 100%;
}

.results-outcome {
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  margin-top: 8px;
}

.results-outcome.won  { color: var(--accent-pop); }
.results-outcome.lost { color: var(--text-dim); }

.facts-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.fact-card {
  background-color: color-mix(in srgb, var(--bg) 85%, white 15%);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 12px 16px;
}

.fact-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.fact-position {
  font-family: var(--font-title);
  font-size: 1.2rem;
  color: var(--accent);
  min-width: 20px;
}

.fact-label {
  display: block;
  font-family: var(--font-title);
  font-size: 0.9rem;
  color: var(--text);
}

.fact-sub {
  display: block;
  font-size: 0.75rem;
  color: #B1D0F6;
  letter-spacing: 0.05em;
}

.fact-text {
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.6;
}

.results-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding-bottom: 20px;
}

/* --- SHARE CARD --- */
.share-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}

.share-card-canvas {
  width: 100%;
  max-width: 340px;
  border-radius: 6px;
  display: block;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.btn-share {
  font-family: var(--font-title);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  color: var(--accent-pop);
  background: transparent;
  border: 2px solid var(--accent-pop);
  border-radius: 6px;
  padding: 10px 32px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-share:hover {
  background-color: var(--accent-pop);
  color: var(--bg);
}

.sources-line {
  font-size: 0.65rem;
  color: var(--text-dim);
  text-align: center;
  letter-spacing: 0.05em;
  line-height: 1.6;
  padding: 0 10px 24px;
  opacity: 0.7;
}

/* --- CONGRATS SCREEN --- */
.congrats-block {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  flex: 1;
  justify-content: center;
}

.congrats-block h2 {
  font-family: var(--font-title);
  font-size: 1.6rem;
  color: var(--text);
  line-height: 1.4;
}

.follow-text {
  font-size: 0.9rem;
  color: var(--text-dim);
  line-height: 1.8;
}

.follow-text strong {
  color: var(--accent);
}

/* --- CONGRATS TITLE DISPLAY --- */
#congrats-title-display {
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 0 8px;
}

.congrats-earned-label {
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.congrats-title {
  font-family: var(--font-title);
  font-size: 3.2rem;
  letter-spacing: 0.08em;
  line-height: 1.1;
}

.congrats-score {
  font-size: 0.85rem;
  color: var(--text-dim);
  letter-spacing: 0.08em;
}

.congrats-emoji {
  font-size: 2.4rem;
  line-height: 1;
  padding-bottom: 4px;
}

/* PLAY AGAIN button on congrats screen */
.btn-play-again {
  font-family: var(--font-title);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  color: var(--accent-pop);
  background: transparent;
  border: 2px solid var(--accent-pop);
  border-radius: 6px;
  padding: 10px 32px;
  cursor: pointer;
  margin-top: 8px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-play-again:hover {
  background-color: var(--accent-pop);
  color: var(--bg);
}

/* Ko-fi support link on congrats screen */
.kofi-link {
  font-size: 0.8rem;
  color: var(--text-dim);
  text-decoration: none;
  letter-spacing: 0.05em;
  margin-top: 4px;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.kofi-link:hover {
  opacity: 1;
  color: var(--accent);
}

/* START OVER link below CONTINUE button on title screen */
.btn-start-over {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--text-dim);
  background: transparent;
  border: none;
  cursor: pointer;
  letter-spacing: 0.1em;
  text-decoration: underline;
  margin-top: 4px;
  padding: 4px 8px;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.btn-start-over:hover {
  opacity: 1;
}

/* HOME link at the top of the puzzle and results screens */
.btn-home-link {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--text-dim);
  background: transparent;
  border: none;
  cursor: pointer;
  letter-spacing: 0.1em;
  text-decoration: underline;
  margin-bottom: 8px;
  padding: 4px 8px;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.btn-home-link:hover {
  opacity: 1;
}