/* ============================================================
   Word Grid — public app styles
   Game board / bank / actions / reveal ported from
   studio/templates/grid_play.html; shell (phone-frame, header,
   list, modals, install banner, footer) modeled on web/ (Trios).
   ============================================================ */

:root {
    --bg: #0f1117;
    --surface: #13151d;
    --surface-2: #1e2130;
    --border: #2a2d37;
    --text: #e0e0e0;
    --text-muted: #8a90a0;
    --text-heading: #f5f6fa;
    --link: #7cacf8;
    --btn-primary-bg: #7cacf8;
    --btn-primary-fg: #0f1117;
    --green: #22c55e;
    --purple: #a78bfa;
    --red: #ef4444;
    --amber: #f0b860;
}

[data-theme="light"] {
    --bg: #f5f6fa;
    --surface: #ffffff;
    --surface-2: #eef0f5;
    --border: #d2d2d7;
    --text: #1d1d1f;
    --text-muted: #6b7280;
    --text-heading: #1d1d1f;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.phone-frame {
    max-width: 440px;
    margin: 0 auto;
    min-height: 100%;
    position: relative;
    padding: 0 16px 64px;
}

/* ---------- Header ---------- */
.list-header, .play-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 8px;
    gap: 8px;
}
.header-title {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--text-heading);
    text-align: center;
    flex: 1;
}
.header-info, .header-help, .header-back {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); padding: 6px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
}
.header-info:hover, .header-help:hover, .header-back:hover { color: var(--text); background: var(--surface-2); }

/* ---------- Puzzle list ---------- */
.loading-msg, .error-msg { text-align: center; color: var(--text-muted); padding: 48px 16px; }
.error-msg { color: var(--red); white-space: pre-wrap; }
.puzzle-list { display: flex; flex-direction: column; gap: 18px; padding: 8px 0; }
.puzzle-date-group { display: flex; flex-direction: column; gap: 8px; }
.puzzle-date-header { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }
.puzzle-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    padding: 16px; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
    gap: 12px; transition: border-color .15s, transform .05s;
}
.puzzle-card:hover { border-color: var(--link); }
.puzzle-card:active { transform: scale(0.995); }
.puzzle-card-main { display: flex; flex-direction: column; gap: 4px; }
.puzzle-card-title { font-size: 16px; font-weight: 700; color: var(--text-heading); }
.puzzle-card-sub { font-size: 12px; color: var(--text-muted); }
.puzzle-status { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 20px; white-space: nowrap; }
.puzzle-status.unplayed { background: var(--surface-2); color: var(--text-muted); }
.puzzle-status.solved { background: rgba(34,197,94,0.15); color: var(--green); }
.puzzle-status.failed { background: rgba(239,68,68,0.15); color: var(--red); }

/* ---------- Game board (ported from grid_play.html) ---------- */
.play-sub { font-size: 13px; color: var(--text-muted); margin: 0 0 16px; text-align: center; }
.board-wrap { position: relative; }
.gboard { display: grid; gap: 8px; margin: 0 auto 16px; }
.gcell {
    aspect-ratio: 1 / 1;
    background: var(--surface-2);
    border: 2px dashed #4a5068;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 600; color: var(--text);
    text-align: center; padding: 4px;
    cursor: pointer; user-select: none; transition: all 0.15s;
}
[data-theme="light"] .gcell { border-color: #c2c8d6; }
.gcell:hover:not(.locked) { border-color: var(--link); }
.gcell.filled { border-style: solid; border-color: #5a6a8f; background: #262a3a; }
[data-theme="light"] .gcell.filled { background: #dfe3ee; }
.gcell.selected-target { border-color: var(--link); border-style: solid; box-shadow: 0 0 8px rgba(124,172,248,0.3); }
.gcell.correct, .gcell.locked.correct { border-color: var(--green); background: rgba(34,197,94,0.15); color: var(--green); cursor: default; }
/* Hint cells stay purple for the whole game, even when also marked correct. */
.gcell.hinted, .gcell.hinted.correct { border-color: var(--purple); background: rgba(167,139,250,0.12); color: #c4b5fd; cursor: default; position: relative; }
.gcell.hinted .hint-tag { position: absolute; top: -7px; right: 6px; font-size: 9px; text-transform: uppercase; letter-spacing: .5px; color: var(--purple); background: var(--bg); padding: 0 4px; }
.gcell.incorrect { border-color: var(--red); background: rgba(239,68,68,0.15); }
.gcell.drag-over { border-color: var(--link); border-style: solid; background: #2a3a5a; box-shadow: 0 0 12px rgba(124,172,248,0.5); }

.word-bank { display: grid; gap: 6px; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.word-chip {
    padding: 12px 10px; background: var(--surface-2); border: 2px solid transparent; border-radius: 6px;
    font-size: 14px; font-weight: 500; color: var(--text); cursor: pointer; transition: all .15s;
    user-select: none; text-align: center;
}
.word-chip:hover:not(.placed) { background: #344158; }
[data-theme="light"] .word-chip:hover:not(.placed) { background: #cfd6e6; }
.word-chip.selected { border-color: var(--link); background: #2a3a5a; }
[data-theme="light"] .word-chip.selected { background: #d7e2fb; }
.word-chip.placed { opacity: 0.3; cursor: default; pointer-events: none; }
.word-chip.dragging { opacity: 0.4; }
.word-chip[draggable="true"] { cursor: grab; }

/* ---------- Actions ---------- */
.actions-bar { display: flex; gap: 12px; margin-top: 20px; align-items: center; justify-content: center; flex-wrap: wrap; }
.btn {
    font-family: inherit; font-size: 14px; font-weight: 600; border: none; border-radius: 8px;
    cursor: pointer; padding: 10px 16px; color: var(--text);
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.actions-bar .btn { width: 56px; height: 56px; padding: 0; border-radius: 10px; position: relative; }
.btn-icon { display: inline-flex; }
.btn-hint { background: var(--purple); color: #0f1117; }
.btn-hint:hover:not(:disabled) { background: #c4b5fd; }
.btn-submit { background: var(--green); color: #0f1117; }
.btn-submit:hover:not(:disabled) { background: #4ade80; }
.btn-clear { background: var(--surface-2); color: var(--text); }
.btn-clear:hover:not(:disabled) { background: #344158; }
[data-theme="light"] .btn-clear:hover:not(:disabled) { background: #cfd6e6; }
.btn-continue { background: var(--amber); color: #0f1117; font-weight: 600; width: 100%; margin-bottom: 8px; padding: 12px; }
.btn-continue:hover { background: #f5cc80; }
.btn-hint.used { animation: hintpulse 0.45s ease; }
@keyframes hintpulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(167,139,250,0.7); }
    45% { transform: scale(1.18); box-shadow: 0 0 0 8px rgba(167,139,250,0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(167,139,250,0); }
}
.icon-count {
    position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 10px; background: var(--bg); color: var(--text); font-size: 11px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; border: 2px solid currentColor; line-height: 1;
}
.btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.btn-cancel { background: var(--surface-2); color: var(--text); }

.result-msg { text-align: center; font-size: 15px; font-weight: 600; margin-top: 16px; min-height: 22px; }

/* ---------- Edge tooltips (post-game) ---------- */
.gcell.pair-hl { box-shadow: 0 0 0 3px var(--link); z-index: 3; }
.edge-layer { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.edge-strip { position: absolute; pointer-events: auto; cursor: pointer; }
.edge-tip {
    position: absolute; z-index: 6; pointer-events: none; transform: translate(-50%, -50%);
    background: var(--link); color: var(--btn-primary-fg); font-size: 12px; font-weight: 700;
    padding: 4px 9px; border-radius: 6px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.reveal-section { margin-top: 18px; }
.reveal-hint { text-align: center; font-size: 12px; color: var(--text-muted); margin-bottom: 14px; }
.reveal-actions { display: flex; gap: 10px; justify-content: center; }
.reveal-actions .btn { flex: 1; max-width: 160px; padding: 12px; }

/* ---------- Modals ---------- */
.modal-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 50;
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    padding: 22px; max-width: 380px; width: 100%; max-height: 88vh; overflow-y: auto;
}
.modal h3 { margin: 0 0 12px; color: var(--text-heading); }
.modal p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; }
.info-lead { color: var(--text); }
.info-example { background: var(--surface-2); border-radius: 10px; padding: 14px; margin: 0 0 16px; }
.info-example-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-bottom: 8px; }
.info-example-words { display: flex; gap: 6px; margin-bottom: 8px; }
.info-example-chip { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; font-weight: 700; font-size: 13px; }
.info-example-phrases { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text-muted); }
.info-subhead { margin: 14px 0 6px; font-size: 14px; color: var(--text-heading); }
.info-subhead-notes { margin-top: 16px; }
.info-tips { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--text); }
.info-tips li { margin-bottom: 6px; }
.ink-green { color: var(--green); font-weight: 700; }
.ink-purple { color: var(--purple); font-weight: 700; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.modal-actions .btn { padding: 10px 18px; }

/* ---------- Install banner + footer ---------- */
.install-banner {
    position: fixed; left: 50%; bottom: 0; transform: translateX(-50%) translateY(100%);
    width: 100%; max-width: 440px; background: var(--surface); border-top: 1px solid var(--border);
    padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; z-index: 40;
    transition: transform .26s ease;
}
.install-banner.visible { transform: translateX(-50%) translateY(0); }
.install-banner-text { font-size: 13px; }
.install-banner-actions { display: flex; gap: 10px; justify-content: flex-end; }
.footer-bar {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: var(--text-muted);
}
body.install-banner-open .footer-bar { display: none; }