/*!
 * Joanne's Jewel — styles
 * Copyright (c) 2026 Steven White. All rights reserved.
 * Proprietary — see LICENSE.md.
 */

/* ---------- Palette ---------- */
:root {
  /* tropical-parrot palette */
  --bg: #fff8ec;
  --bg-grad-1: #fff8ec;
  --bg-grad-2: #ffe9d1;
  --fg: #1f2933;
  --muted: #7a8899;

  --card: #ffffff;
  --card-border: #f0e2c9;
  --card-shadow: 0 10px 30px rgba(30, 41, 59, .07), 0 2px 6px rgba(30, 41, 59, .05);

  --tile-bg: #ffffff;
  --tile-fg: #1f2933;
  --tile-border: #ecd9b5;

  --centre-bg: #ffd23f;
  --centre-fg: #3a2b06;
  --centre-shadow: 0 6px 16px rgba(255, 194, 0, .35);

  --accent: #12898a;        /* parrot teal */
  --accent-2: #0a6f70;
  --accent-fg: #ffffff;

  --coral: #ef476f;         /* parrot chest */
  --coral-2: #d63860;

  --lime: #7bc043;          /* parrot back */

  --ok: #06a77d;
  --err: #d63d3d;

  --header-bg: rgba(255, 255, 255, .75);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1720;
    --bg-grad-1: #0f1720;
    --bg-grad-2: #1a2634;
    --fg: #f1f5f9;
    --muted: #94a3b8;

    --card: #1c2733;
    --card-border: #2a3644;
    --card-shadow: 0 10px 30px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .25);

    --tile-bg: #263341;
    --tile-fg: #f1f5f9;
    --tile-border: #3a4a5c;

    --centre-bg: #ffd23f;
    --centre-fg: #2a1c04;
    --centre-shadow: 0 6px 20px rgba(255, 194, 0, .35);

    --accent: #2dd4bf;
    --accent-2: #14b8a6;
    --accent-fg: #062a2a;

    --coral: #ff6b8a;
    --coral-2: #ef476f;

    --lime: #a3e635;

    --ok: #34d399;
    --err: #f87171;

    --header-bg: rgba(15, 23, 32, .8);
  }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--fg);
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(18, 137, 138, .18), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(239, 71, 111, .15), transparent 55%),
    linear-gradient(180deg, var(--bg-grad-1), var(--bg-grad-2));
  background-attachment: fixed;
}

h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; }
h2 { margin: 0 0 .75rem; }

/* ---------- Header ---------- */
header {
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--card-border);
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;
}
header h1 {
  margin: 0;
  font-size: 1.4rem;
  background: linear-gradient(90deg, var(--accent), var(--coral));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
nav { display: flex; gap: .25rem; }
nav .tab {
  background: transparent;
  border: none;
  padding: .5rem 1rem;
  cursor: pointer;
  color: var(--muted);
  font: inherit;
  font-size: 1rem;
  border-bottom: 2px solid transparent;
  transition: color .15s;
}
nav .tab.active { color: var(--accent); border-bottom-color: var(--accent); }
nav .tab:hover { color: var(--fg); }
nav .install-btn {
  color: var(--accent-fg);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: .5rem;
  padding: .35rem .85rem;
  border: none;
  margin-left: .5rem;
  box-shadow: 0 4px 10px rgba(18, 137, 138, .3);
}
nav .install-btn:hover { color: var(--accent-fg); transform: translateY(-1px); }

main {
  padding: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}
.screen.hidden, .modal.hidden, .loading.hidden { display: none; }

/* ---------- Setup ---------- */
#setup {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: var(--card-shadow);
  max-width: 600px;
  margin: 2rem auto;
}
#setup h2 {
  font-size: 1.5rem;
  background: linear-gradient(90deg, var(--accent), var(--coral));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
#setup p { color: var(--muted); margin: 1rem 0 .5rem; font-weight: 500; }

.letter-count-picker { display: flex; gap: .5rem; margin: .5rem 0 1rem; flex-wrap: wrap; }
.letter-count-picker button {
  padding: .65rem 1.1rem;
  font-size: 1.15rem;
  font-weight: 700;
  border: 2px solid var(--tile-border);
  background: var(--tile-bg);
  color: var(--tile-fg);
  border-radius: .6rem;
  cursor: pointer;
  min-width: 3rem;
  transition: transform .1s, border-color .1s, background .1s;
}
.letter-count-picker button:hover {
  border-color: var(--accent);
}
.letter-count-picker button.selected {
  background: linear-gradient(135deg, var(--centre-bg), #ffb703);
  color: var(--centre-fg);
  border-color: transparent;
  box-shadow: var(--centre-shadow);
}
.letter-count-picker button.disabled,
.letter-count-picker button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: var(--tile-bg);
  color: var(--muted);
  border-color: var(--tile-border);
  box-shadow: none;
}
.letter-count-picker button.disabled:hover,
.letter-count-picker button:disabled:hover { border-color: var(--tile-border); }
.setup-msg { color: var(--muted); min-height: 1.2rem; font-style: italic; }

/* ---------- Buttons ---------- */
.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-fg);
  border: none;
  padding: .75rem 1.5rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  border-radius: .6rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(18, 137, 138, .25);
  transition: transform .08s, box-shadow .15s;
}
.primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(18, 137, 138, .35); }
.primary:active { transform: translateY(0); }

.danger {
  background: transparent;
  color: var(--err);
  border: 1px solid var(--err);
  padding: .5rem 1rem;
  font: inherit;
  border-radius: .6rem;
  cursor: pointer;
  margin-top: 1rem;
}
.danger:hover { background: var(--err); color: white; }

/* ---------- Game toolbar ---------- */
.game-toolbar {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
  margin-bottom: 1rem;
}
.game-toolbar button {
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--card-border);
  padding: .5rem 1rem;
  font: inherit;
  border-radius: .6rem;
  cursor: pointer;
  box-shadow: var(--card-shadow);
  transition: transform .08s, border-color .1s;
}
.game-toolbar button:hover { border-color: var(--accent); transform: translateY(-1px); }
#share-btn { color: var(--lime); }
#prompt-btn { color: var(--coral); }
#reset-btn { color: var(--muted); }

.setup-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.secondary {
  background: var(--tile-bg);
  color: var(--fg);
  border: 1px solid var(--card-border);
  padding: .75rem 1.25rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  border-radius: .6rem;
  cursor: pointer;
  box-shadow: var(--card-shadow);
  transition: transform .08s, border-color .12s;
}
.secondary:hover { border-color: var(--accent); transform: translateY(-1px); }

/* ---------- Game body ---------- */
.game-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
@media (max-width: 800px) { .game-body { grid-template-columns: 1fr; } }

.left-col, .right-col {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: var(--card-shadow);
}

/* ---------- Letter tiles (ring) ---------- */
.letter-tiles {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 1rem auto 1.5rem;
}
.letter-tile {
  position: absolute;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 800;
  background: var(--tile-bg);
  color: var(--tile-fg);
  border: 2px solid var(--tile-border);
  border-radius: 50%;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  transition: transform .08s, border-color .12s, box-shadow .15s;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 10px rgba(30, 41, 59, .08);
}
.letter-tile:hover {
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(18, 137, 138, .25);
}
.letter-tile:active { transform: translate(-50%, -50%) scale(0.92); }
.letter-tile.centre {
  background: linear-gradient(135deg, var(--centre-bg), #ffb703);
  color: var(--centre-fg);
  border-color: transparent;
  z-index: 2;
  box-shadow: var(--centre-shadow);
  width: 78px;
  height: 78px;
  font-size: 2rem;
}
.letter-tile.centre:hover {
  box-shadow: 0 8px 26px rgba(255, 194, 0, .55);
}

/* ---------- Guess input ---------- */
#guess-form {
  display: flex;
  gap: .5rem;
  margin: 1rem 0;
}
#guess-input {
  flex: 1;
  padding: .8rem 1rem;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .06em;
  border: 2px solid var(--tile-border);
  border-radius: .6rem;
  background: var(--tile-bg);
  color: var(--tile-fg);
  text-transform: uppercase;
  font-family: inherit;
  transition: border-color .12s, box-shadow .15s;
}
#guess-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(18, 137, 138, .18);
}

.msg { min-height: 1.4rem; margin: .25rem 0 .75rem; font-weight: 600; }
.msg.err { color: var(--err); }
.msg.ok { color: var(--ok); }

/* ---------- Score card ---------- */
.score {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1rem 0;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(18, 137, 138, .06), rgba(239, 71, 111, .06));
  border: 1px solid var(--card-border);
  border-radius: .75rem;
}
.score > div { display: flex; flex-direction: column; align-items: center; }
.score .score-label {
  font-size: .7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
}
.score #score-count, .score #score-pct {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--fg);
  margin-top: .15rem;
}
.score #status-label {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--coral);
  margin-top: .15rem;
}

.rules { margin-top: 1rem; color: var(--muted); font-size: .88rem; }
.rules summary { cursor: pointer; font-weight: 600; }
.rules ul { margin: .5rem 0; padding-left: 1.25rem; }
.rules li { margin-bottom: .25rem; }

/* ---------- Right column ---------- */
.right-col h3 { margin: 0; font-size: 1.1rem; }
.right-col-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .75rem;
  gap: .5rem;
  flex-wrap: wrap;
}
.sort-toggle {
  display: inline-flex;
  border: 1px solid var(--tile-border);
  border-radius: .6rem;
  overflow: hidden;
  background: var(--tile-bg);
}
.sort-toggle button {
  background: transparent;
  color: var(--muted);
  border: none;
  padding: .35rem .75rem;
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: color .12s;
}
.sort-toggle button:hover { color: var(--fg); }
.sort-toggle button.selected {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-fg);
}
.sort-toggle button + button { border-left: 1px solid var(--tile-border); }

.answer-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .1rem .5rem;
  font-family: "JetBrains Mono", ui-monospace, "Consolas", "Menlo", monospace;
  padding: .5rem 0;
  max-height: 68vh;
  overflow-y: auto;
}
.answer-item {
  padding: .15rem .3rem;
  letter-spacing: .12em;
  color: var(--muted);
  font-size: .95rem;
  transition: color .15s, transform .15s;
}
.answer-item.found {
  color: var(--ok);
  font-weight: 800;
  transform: translateX(2px);
}
.answer-group-header {
  grid-column: 1 / -1;
  padding: .7rem 0 .3rem;
  font-weight: 800;
  border-bottom: 2px solid var(--accent);
  font-family: inherit;
  color: var(--accent);
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.answer-group-header:first-child { padding-top: 0; }

/* ---------- Modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 32, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: fadein .15s ease-out;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  background: var(--card);
  color: var(--fg);
  border-radius: 1rem;
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  border: 1px solid var(--card-border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}
.modal-card h3 {
  margin-top: 0;
  color: var(--coral);
}
.modal-card p { line-height: 1.5; }

/* ---------- History ---------- */
#history-body {
  background: var(--card);
  padding: 1.5rem;
  border-radius: 1rem;
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}
#history-body dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .5rem 1.5rem;
  margin: 0 0 1.5rem 0;
}
#history-body dt { font-weight: 700; color: var(--muted); }
#history-body dd { margin: 0; font-weight: 600; }
.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.history-table th, .history-table td {
  padding: .5rem .5rem;
  border-bottom: 1px solid var(--card-border);
  text-align: left;
}
.history-table th {
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: .08em;
}
.history-table tbody tr:hover { background: rgba(18, 137, 138, .05); }

/* ---------- iOS install tip ---------- */
.ios-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-fg);
  padding: .6rem 1rem;
  font-size: .9rem;
  font-weight: 500;
  text-align: center;
}
.ios-tip em { font-style: normal; font-weight: 700; }
.ios-tip button {
  background: transparent;
  color: inherit;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  padding: 0;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ios-tip.hidden { display: none; }

/* ---------- Loading overlay ---------- */
.loading {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(18, 137, 138, .18), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(239, 71, 111, .15), transparent 55%),
    linear-gradient(180deg, var(--bg-grad-1), var(--bg-grad-2));
  color: var(--fg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  font-size: 1.25rem;
  font-weight: 600;
}