/* Not kartları (/oyunlar/kartlar). Builds on play.css (header, piano, names, device) and game-stream.css (chips, results). */
.fc-done-title { margin-top: 8px; text-align: center; font-size: 1.15rem; }

/* Decks */
.fc-decks { list-style: none; margin: 6px 0 0; padding: 2px 12px; box-shadow: none; }
.fc-decks li + li { border-top: 1px solid var(--line); }
.fc-deck { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 7px 0; border: 0; background: transparent; text-align: left; color: var(--ink); }
.fc-deck .fc-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 1.15rem; font-weight: 800; }
.fc-ic.t-notes { background: #fbe9df; color: #b9531c; }
.fc-ic.t-chords { background: #e6f1fb; color: #1d5a8f; }
.fc-ic.t-intervals { background: #e1f5ee; color: #0f6e56; }
.fc-ic.t-keys { background: #eeedfe; color: #4b3fb0; }
.fc-ic.t-tricky { background: #fdf3d8; color: #8a5a00; }
.fc-deck .fc-dt { flex: 1; display: grid; min-width: 0; }
.fc-deck .fc-dt small { color: var(--muted); font-size: 0.78rem; }
.fc-due { flex: none; font-size: 0.75rem; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); }
.fc-due.today { background: var(--accent); color: #fff; }
.fc-due.new { background: var(--teal-soft); color: var(--teal); }
.fc-deck.on { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 12px; }
.fc-deck.on .fc-dt b::after { content: " ✓"; color: var(--accent); }
.fc-deck.locked { opacity: 0.55; }
.fc-deck .lock { margin-left: 6px; font-style: normal; font-size: 0.65rem; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); }
#start:disabled { opacity: 0.45; }
.fc-quit { flex: none; min-height: 34px; padding: 4px 14px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font-weight: 800; font-size: 0.85rem; }
.fc-quit:active { background: var(--paper-2); }
.fc-fs { margin-left: 0; padding: 0; border: 0; background: transparent; }
.game-top .gs-top { min-width: 0; }
.game-top #deck-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-top #count { flex: none; white-space: nowrap; }
.fc-fs .fs-off, .fc-fs.on .fs-on { display: none; }
.fc-fs.on .fs-off { display: block; }

/* The card: two faces, turned over with a 3D flip */
.fc-card { margin-top: 10px; perspective: 1200px; }
.fc-inner { position: relative; display: grid; transition: transform 0.45s ease; transform-style: preserve-3d; }
.fc-card.flipped .fc-inner { transform: rotateY(180deg); }
.fc-face { grid-area: 1 / 1; min-height: 230px; padding: 14px; border: 2px solid var(--ink); border-radius: 18px; background: var(--card); box-shadow: 5px 5px 0 var(--line); backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.fc-back { transform: rotateY(180deg); }
.fc-card.right .fc-back { border-color: var(--ok); }
.fc-card.wrong .fc-back { border-color: var(--bad); }
@media (prefers-reduced-motion: reduce) { .fc-inner { transition: none; } }
.fc-q { font-weight: 800; }
.fc-staff { width: 100%; color: var(--ink); display: flex; justify-content: center; }
.fc-staff svg { display: block; width: 100%; height: auto; max-height: 190px; }
.fc-staff .nt.lit { color: var(--accent) !important; }
.fc-tag { font-size: 0.75rem; font-weight: 800; color: var(--accent-ink); background: var(--accent-soft); border-radius: 999px; padding: 1px 8px; }
.fc-verdict { font-weight: 800; min-height: 1.3em; }
.fc-card.right .fc-verdict { color: var(--ok); }
.fc-card.wrong .fc-verdict { color: var(--bad); }
.fc-answer { font-size: 1.3rem; line-height: 1.25; }
.fc-extra { color: var(--ink-2); font-size: 0.88rem; min-height: 1em; }
.fc-keys { width: 100%; overflow-x: auto; display: flex; justify-content: center; }
.fc-keys svg { display: block; width: 100%; height: auto; max-height: 120px; }
.fc-keys .key.lit { fill: #f6c9ad; }
.fc-keys-d { font-size: 0.75rem; }
.fc-move { font-size: 0.8rem; font-weight: 700; color: var(--teal); }
.fc-hint { margin-top: 10px; text-align: center; font-size: 0.85rem; min-height: 1.2em; }

/* Answers */
.fc-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.fc-choices button { min-height: 52px; padding: 6px 8px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); font-weight: 800; font-size: 0.95rem; color: var(--ink); }
.fc-choices button.right { background: var(--ok); border-color: var(--ok); color: #fff; }
.fc-choices button.wrong { background: var(--bad); border-color: var(--bad); color: #fff; }
.fc-choices button:disabled { opacity: 1; }
.piano .held { background: #f6c9ad !important; }
.piano .black.held { background: var(--accent) !important; }
.fc-actions { margin-top: 12px; }
.fc-actions .btn-block { width: 100%; }
.fc-self { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Results */
.fc-boxes-card { margin-top: 12px; padding: 12px 14px; box-shadow: none; }
.fc-boxes-card p { margin-top: 8px; font-size: 0.82rem; }
.fc-boxes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; text-align: center; }
.fc-boxes li { border-radius: 10px; padding: 6px 0; background: var(--paper-2); display: grid; }
.fc-boxes li small { font-size: 0.7rem; color: var(--muted); font-weight: 700; }
.fc-boxes li b { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.fc-boxes li.b1 { background: #fde3e3; }
.fc-boxes li.b5 { background: #e1f5ee; }
.fc-next { margin-top: 10px; text-align: center; font-weight: 700; color: var(--ink-2); }

/* Keyboard: the whole range of the deck's notes fits the width, no sideways scrolling (levels 7–8 span 18 white keys,
   Sol3–Do6, wider than the page at the usual 34px a key). game-kit.js sets --whites. Keys narrow down to --key-min;
   on a phone in portrait at levels 7–8 a white key is about 18–20px wide. */
#play { --key-min: 18px; }
#play .piano { min-width: calc(var(--whites, 8) * var(--key-min)) !important; }
#play .piano .white { flex: 1 1 0; min-width: 0; }
#play .piano-scroll { overflow-x: auto; }
#play .piano { height: 180px; }

/* Phone in landscape: one screen, no page scrolling. Card on top (fills what's left), the answers (keyboard, note names
   or four choices in a row) under it, then the buttons ("Bitir" is in the header during a session). The back of the card puts the text on
   the left and its small keyboard on the right. */
@media (orientation: landscape) and (max-height: 520px) {
  .game-top .game-row { height: 36px; max-width: none; padding-left: max(var(--pad), env(safe-area-inset-left)); padding-right: max(var(--pad), env(safe-area-inset-right)); }
  .game.gs { max-width: 1000px; padding: 2px max(var(--pad), env(safe-area-inset-right)) 6px max(var(--pad), env(safe-area-inset-left)); }
  #play:not([hidden]) {
    --key-min: 16px;
    display: flex; flex-direction: column; gap: 5px;
    height: calc(100vh - 36px - 8px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    height: calc(100dvh - 36px - 8px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
  #play .fc-card { flex: 1 1 0; min-height: 0; margin-top: 0; }
  #play .fc-inner { height: 100%; }
  #play .fc-face { position: relative; min-height: 0; height: 100%; padding: 5px 12px; gap: 2px; border-radius: 14px; box-shadow: 3px 3px 0 var(--line); overflow: hidden; }
  #play .fc-q { font-size: 0.85rem; line-height: 1.2; }
  #play .fc-staff { flex: 1 1 0; min-height: 0; }
  #play .fc-staff svg { height: 100%; max-height: none; }
  #play .fc-tag { position: absolute; top: 6px; right: 10px; }
  #play .fc-back { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto auto auto minmax(0, 1fr); column-gap: 14px; row-gap: 2px; }
  #play .fc-back > * { grid-column: 1; }
  #play .fc-back .fc-verdict { grid-row: 2; }
  #play .fc-back .fc-answer { grid-row: 3; }
  #play .fc-back .fc-extra { grid-row: 4; }
  #play .fc-back .fc-move { grid-row: 5; }
  #play .fc-back .fc-keys { grid-column: 2; grid-row: 1 / -1; min-height: 0; height: 100%; overflow: hidden; align-items: center; }
  #play .fc-keys svg { height: 100%; max-height: none; }
  #play .fc-keys-d { display: none; }
  #play .fc-verdict { font-size: 0.85rem; min-height: 0; }
  #play .fc-answer { font-size: 1.05rem; }
  #play .fc-extra { font-size: 0.78rem; min-height: 0; }
  #play .fc-move { font-size: 0.72rem; }
  #play .fc-side { flex: none; display: flex; flex-direction: column; gap: 5px; }
  #play .fc-side > * { margin-top: 0; }
  #play .fc-actions:not(:has(> :not([hidden]))) { display: none; }
  #play .fc-hint { min-height: 0; font-size: 0.75rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #play .fc-choices { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  #play .fc-choices button { min-height: 40px; font-size: 0.85rem; padding: 3px 6px; }
  #play .device { padding: 4px 10px; font-size: 0.75rem; }
  #play .names { margin-top: 0; }
  #play .acc-row { margin-bottom: 4px; }
  #play .acc-row button { min-height: 32px; }
  #play .name-keys button { min-height: 42px; }
  #play .piano-scroll { padding-bottom: 0; }
  #play .piano { height: clamp(90px, 38vh, 180px); }
  #play .piano .white { padding-bottom: 3px; font-size: 0.55rem; }
  #play .fc-actions .btn { min-height: 40px; padding-top: 6px; padding-bottom: 6px; }
  #play .fc-self { gap: 8px; }
}