/* build:1105e80 */
/* ============================================================
   ECO My Game Room — viz-games.css
   Theme-aware chrome + fixed game feedback palette
   ============================================================ */

/* Game tokens defined per-theme in theme.css */
/* --game-accent, --game-success, --game-warn, --game-locked, --game-tile-gap are theme-aware */

/* ── Root layout ── */
#gr-root {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 60px);
  padding: 0 0 40px;
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
}

/* ── Zone 1: Selector ── */
#gr-selector-zone {
  padding: 24px 20px 16px;
  border-bottom: 1px solid var(--color-border, var(--game-cell-border));
}

#gr-header {
  text-align: center;
}

#gr-header {
  margin-bottom: 18px;
}

.gr-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 4px;
}

.gr-subtitle {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin: 0;
}

/* ── Game tiles row ── */
.gr-tiles {
  display: flex;
  flex-direction: row;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  justify-content: center;
  flex-wrap: wrap;
}

.gr-tile {
  flex: 0 0 auto;
  width: 110px;
  background: var(--color-surface);
  border: 2px solid var(--color-border, var(--game-cell-border));
  border-radius: 12px;
  padding: 14px 8px 12px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.18s, transform 0.12s, box-shadow 0.18s;
  position: relative;
  user-select: none;
}

.gr-tile:hover,
.gr-tile:focus-visible {
  border-color: var(--game-accent-blue);
  box-shadow: 0 2px 12px var(--game-tint-blue);
  transform: translateY(-2px);
  outline: none;
}

.gr-tile.gr-tile--active {
  border-color: var(--game-accent-blue);
  background: var(--color-surface-raised);
}

.gr-tile--locked {
  opacity: 0.55;
  cursor: not-allowed;
}

.gr-tile__icon {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 6px;
  display: block;
}

.gr-tile__name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-primary);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gr-tile__meta {
  font-size: 0.65rem;
  color: var(--color-text-secondary);
  margin-top: 4px;
  display: block;
}

.gr-tile__badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--game-badge-bg);
  color: var(--game-badge-text);
  font-size: 0.55rem;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.gr-tile__lock {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 0.75rem;
  color: var(--game-locked);
}

.gr-loading {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  padding: 12px 0;
}

/* ── Zone 2: Canvas (desktop) ── */
#gr-canvas-zone {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 24px 20px;
  min-height: 400px;
}

.gr-canvas-empty {
  justify-content: center;
}

#gr-canvas-placeholder {
  text-align: center;
  color: var(--color-text-secondary);
}

.gr-placeholder-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 12px;
  opacity: 0.4;
}

#gr-canvas-placeholder p {
  font-size: 0.9rem;
  margin: 0;
}

#gr-canvas-inner {
  width: 100%;
  max-width: 500px;
}

/* ── Mobile modal ── */
.gr-modal {
  position: fixed;
  inset: 0;
  z-index: 9900;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* S543: viewport-fit=cover is set on this page, so a fixed inset:0 overlay
     renders UNDER the status bar (clock/battery/wifi) and the home indicator.
     Matches the house pattern in css/header-injected.css. */
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.gr-modal[hidden] {
  display: none;
}

.gr-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--color-border, var(--game-cell-border));
  background: var(--color-surface);
  flex-shrink: 0;
}

.gr-modal-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.gr-modal-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
  transition: background 0.15s;
}

.gr-modal-close:hover {
  background: var(--color-border, var(--game-cell-border));
}

.gr-modal-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  /* S543: clear the home indicator so the last row of a game stays tappable */
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}

/* ── Toast (level-up / achievement) ── */
.gr-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-text-primary);
  color: var(--color-bg);
  padding: 10px 20px;
  border-radius: 24px;
  font-size: 0.875rem;
  font-weight: 600;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  white-space: nowrap;
}

.gr-toast.gr-toast--visible {
  opacity: 1;
}

.gr-toast[hidden] {
  display: none;
}

/* ── Responsive: mobile hides canvas zone ── */
@media (max-width: 640px) {
  #gr-canvas-zone {
    display: none;
  }
  .gr-tile {
    width: 96px;
  }
}

@media (min-width: 641px) {
  #gr-modal {
    display: none !important;
  }
}

/* ── Canvas header: game name + back link ── */
.gr-canvas-header {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 500px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border, var(--game-cell-border));
  margin-bottom: 16px;
}

.gr-canvas-header[hidden] {
  display: none;
}

.gr-canvas-back {
  background: none;
  border: 1px solid var(--color-border, var(--game-cell-border));
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}

.gr-canvas-back:hover {
  border-color: var(--game-accent-blue);
  color: var(--game-accent-blue);
}

.gr-canvas-game-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

/* ── Stats panel — shown below game canvas ── */
.gr-stats-panel {
  width: 100%;
  max-width: 500px;
  margin-top: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border, var(--game-cell-border));
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 0.82rem;
}

.gr-stats-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border, var(--game-cell-border));
}

.gr-stats-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.gr-stats-level {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--game-accent-blue);
  background: var(--game-tint-blue);
  padding: 2px 8px;
  border-radius: 10px;
}

.gr-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

.gr-stat-label {
  color: var(--color-text-secondary);
  font-weight: 500;
}

.gr-stat-value {
  font-weight: 700;
  color: var(--color-text-primary);
}

.gr-stat-best {
  color: var(--game-accent-blue);
  font-size: 1rem;
}

.gr-stat-next {
  color: var(--game-warn);
}

.gr-stat-done {
  color: var(--game-success);
}

.gr-stat-need {
  color: var(--color-text-secondary);
  font-weight: 400;
  font-size: 0.75rem;
}

.gr-stat-hint {
  font-size: 0.72rem;
  color: var(--color-text-secondary);
  font-style: italic;
  padding: 2px 0 6px;
}

.gr-stat-bar-wrap {
  width: 100%;
  height: 6px;
  background: var(--color-border, var(--game-cell-border));
  border-radius: 3px;
  overflow: hidden;
  margin: 4px 0 10px;
}

.gr-stat-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease;
}

.gr-stat-bar--score    { background: var(--game-accent); }
.gr-stat-bar--progress { background: var(--game-success); }

.gr-stat-divider {
  height: 1px;
  background: var(--color-border, var(--game-cell-border));
  margin: 10px 0;
}

/* ── Richer tile meta ── */
.gr-tile__level {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--game-accent-blue);
  display: block;
  margin-top: 3px;
}

.gr-tile__score {
  font-size: 0.62rem;
  color: var(--color-text-secondary);
  display: block;
  margin-top: 1px;
}

.gr-tile__played {
  font-size: 0.62rem;
  color: var(--game-success);
  display: block;
}

/* ── How to Play panel ── */
.gr-howto {
  width: 100%;
  max-width: 500px;
  margin-top: 16px;
}

.gr-howto-details {
  background: var(--color-surface);
  border: 1px solid var(--color-border, var(--game-cell-border));
  border-radius: 10px;
  overflow: hidden;
}

.gr-howto-summary {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text-primary);
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}

.gr-howto-summary::-webkit-details-marker { display: none; }

.gr-howto-summary::before {
  content: '▶';
  font-size: 0.6rem;
  color: var(--game-accent-blue);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.gr-howto-details[open] .gr-howto-summary::before {
  transform: rotate(90deg);
}

.gr-howto-body {
  padding: 0 14px 14px;
  border-top: 1px solid var(--color-border, var(--game-cell-border));
}

.gr-howto-goal {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 10px 0 8px;
  line-height: 1.45;
}

.gr-howto-steps {
  margin: 0;
  padding: 0 0 0 18px;
}

.gr-howto-steps li {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  padding: 2px 0;
}

/* Mobile: How to Play above game, collapsed by default */
@media (max-width: 640px) {
  .gr-howto {
    max-width: 100%;
    margin-top: 0;
    margin-bottom: 12px;
  }
}

/* ══════════════════════════════════════════════════════════════
   RECOGNIZE — word chain engine (S543)
   Ported from viz-recognize.html inline <style> (S541).
   Page-scoped rules (*, body, #eco-header) intentionally dropped:
   the engine mounts inside gr-canvas-inner / the mobile modal.
   No :root{} block — all --game-* tokens stay in theme.css.
   ══════════════════════════════════════════════════════════════ */
#rg-root{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;padding:0 8px 16px;}
#rg-root *{box-sizing:border-box;}

/* ── Screen containers ── */
.rg-screen{width:100%;max-width:440px;display:none;flex-direction:column;align-items:center;}
.rg-screen.active{display:flex;}

/* ── START SCREEN ── */
#rg-wordmark{font-size:1rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-text-dim,#888);margin-top:32px;margin-bottom:4px;}
#rg-title{font-size:2.4rem;font-weight:900;color:var(--color-text,#1a1a1a);
  letter-spacing:-.02em;line-height:1;margin-bottom:6px;text-align:center;}
#rg-subtitle{font-size:.85rem;color:var(--color-text-dim,#888);margin-bottom:28px;text-align:center;}
.rg-rule{background:var(--color-surface,rgba(0,0,0,.04));border:1px solid var(--color-border,rgba(0,0,0,.1));
  border-radius:10px;padding:16px 20px;margin-bottom:28px;width:100%;}
.rg-rule-row{display:flex;align-items:center;gap:12px;font-size:.88rem;color:var(--color-text-mid,#555);line-height:1.5;}
.rg-rule-ex{font-size:.82rem;color:var(--color-text-dim,#888);margin-top:8px;padding-left:36px;}
.rg-rule-ex span{color:var(--color-accent-c,#5a7a5a);font-weight:700;}

/* Difficulty buttons */
.rg-diff-label{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-text-dim,#888);margin-bottom:12px;align-self:flex-start;}
.rg-diff-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;width:100%;margin-bottom:28px;}
.rg-diff-btn{border:2px solid var(--color-border,rgba(0,0,0,.12));border-radius:10px;
  padding:14px 8px;background:var(--color-surface,rgba(0,0,0,.03));cursor:pointer;
  text-align:center;transition:border-color .15s,background .15s;}
.rg-diff-btn:hover{border-color:var(--color-accent-c,#5a7a5a);}
.rg-diff-btn.sel{border-color:var(--color-accent-c,#5a7a5a);background:var(--color-accent-c-soft,rgba(90,122,90,.1));}
.rg-diff-name{font-weight:800;font-size:.95rem;color:var(--color-text,#1a1a1a);margin-bottom:3px;}
.rg-diff-time{font-size:.75rem;color:var(--color-text-dim,#888);}
.rg-diff-reuse{font-size:.7rem;color:var(--color-text-dim,#888);margin-top:2px;}
.rg-start-btn{width:100%;padding:15px;border:none;border-radius:10px;
  background:var(--color-accent-c,#5a7a5a);color:#fff;font-weight:800;font-size:1.05rem;
  cursor:pointer;margin-bottom:20px;}
.rg-start-btn:disabled{opacity:.4;cursor:not-allowed;}

/* Best scores table */
.rg-best-wrap{width:100%;}
.rg-best-label{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-text-dim,#888);margin-bottom:8px;}
.rg-best-table{width:100%;border-collapse:collapse;font-size:.82rem;}
.rg-best-table th{text-align:left;color:var(--color-text-dim,#888);font-weight:600;
  padding:4px 6px;border-bottom:1px solid var(--color-border,rgba(0,0,0,.1));}
.rg-best-table td{padding:6px 6px;color:var(--color-text-mid,#555);
  border-bottom:1px solid var(--color-border,rgba(0,0,0,.06));}
.rg-best-table td:nth-child(2){font-weight:700;color:var(--color-accent-c,#5a7a5a);}

/* ── GAME SCREEN ── */
/* Timer bar */
#rg-timer-wrap{width:100%;height:7px;background:var(--color-border,rgba(0,0,0,.1));
  border-radius:4px;margin-top:20px;margin-bottom:16px;overflow:hidden;}
#rg-timer-bar{height:100%;width:100%;background:var(--color-accent-c,#5a7a5a);
  border-radius:4px;transition:width .1s linear,background .3s;}
#rg-timer-bar.warn{background:#E8A020;}
#rg-timer-bar.danger{background:#CC2936;}

/* Score + chain row */
#rg-hud{display:flex;justify-content:space-between;align-items:center;
  width:100%;margin-bottom:20px;}
#rg-score-num{font-size:1.8rem;font-weight:900;color:var(--color-accent-c,#5a7a5a);}
#rg-score-lbl{font-size:.7rem;color:var(--color-text-dim,#888);font-weight:600;text-transform:uppercase;}
#rg-chain-num{font-size:1.4rem;font-weight:700;color:var(--color-text,#1a1a1a);text-align:right;}
#rg-chain-lbl{font-size:.7rem;color:var(--color-text-dim,#888);font-weight:600;text-transform:uppercase;text-align:right;}
#rg-mult{font-size:.75rem;color:var(--color-accent-c,#5a7a5a);font-weight:700;text-align:center;}

/* Fruit image */
#rg-fruit-wrap{width:140px;height:140px;display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;position:relative;}
#rg-fruit-img{width:140px;height:140px;display:flex;align-items:center;justify-content:center;
  font-size:7rem;line-height:1;transition:opacity .2s;}
#rg-fruit-img svg{width:120px;height:120px;}
#rg-fruit-img.fade{opacity:0;}

/* Fruit name */
#rg-fruit-name{font-size:1.9rem;font-weight:900;letter-spacing:.04em;
  color:var(--color-text,#1a1a1a);margin-bottom:10px;text-align:center;}

/* Required letter prompt */
#rg-prompt{font-size:1rem;color:var(--color-text-mid,#555);margin-bottom:6px;text-align:center;}
#rg-req-letter{font-size:2rem;font-weight:900;color:var(--color-accent-c,#5a7a5a);
  display:inline-block;min-width:1.5ch;text-align:center;}
#rg-req-letter.blink{animation:rg-blink .7s ease-in-out infinite;}
@keyframes rg-blink{0%,100%{opacity:1}50%{opacity:.25}}

/* Input row */
#rg-input-wrap{width:100%;display:flex;gap:8px;margin-bottom:10px;}
#rg-input{flex:1;font-size:1.2rem;font-weight:700;padding:12px 16px;
  border:2px solid var(--color-border,rgba(0,0,0,.12));border-radius:10px;
  background:var(--color-bg,#faf6f0);color:var(--color-text,#1a1a1a);
  outline:none;text-transform:uppercase;letter-spacing:.05em;}
#rg-input:focus{border-color:var(--color-accent-c,#5a7a5a);}
#rg-input.correct{border-color:#4CAF50;background:rgba(76,175,80,.08);}
#rg-input.wrong{border-color:#CC2936;background:rgba(204,41,54,.08);}
#rg-input.shake{animation:rg-shake .35s ease;}
@keyframes rg-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
#rg-submit{padding:12px 18px;border:none;border-radius:10px;
  background:var(--color-accent-c,#5a7a5a);color:#fff;font-size:1.3rem;
  cursor:pointer;font-weight:700;}
#rg-submit:active{opacity:.8;}

/* Feedback message */
#rg-msg{font-size:.88rem;color:var(--color-text-dim,#888);min-height:22px;
  text-align:center;margin-bottom:6px;}
#rg-msg.good{color:#4CAF50;font-weight:700;}
#rg-msg.bad{color:#CC2936;}

/* Hint */
#rg-hint{font-size:.8rem;color:var(--color-text-dim,#888);text-align:center;min-height:18px;}

/* Score delta animation */
.rg-delta{position:absolute;top:-10px;right:-10px;font-size:.9rem;font-weight:800;
  color:var(--color-accent-c,#5a7a5a);pointer-events:none;
  animation:rg-rise .9s ease forwards;}
@keyframes rg-rise{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-32px)}}

/* ── END SCREEN ── */
#rg-end-icon{font-size:4rem;margin-top:32px;margin-bottom:12px;}
#rg-end-title{font-size:1.6rem;font-weight:900;color:var(--color-text,#1a1a1a);
  margin-bottom:6px;text-align:center;}
#rg-end-sub{font-size:.9rem;color:var(--color-text-mid,#555);text-align:center;
  margin-bottom:24px;line-height:1.6;}
.rg-end-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;
  width:100%;margin-bottom:24px;}
.rg-end-stat{background:var(--color-surface,rgba(0,0,0,.04));border:1px solid var(--color-border,rgba(0,0,0,.1));
  border-radius:10px;padding:14px 8px;text-align:center;}
.rg-end-stat-num{font-size:1.8rem;font-weight:900;color:var(--color-accent-c,#5a7a5a);}
.rg-end-stat-lbl{font-size:.72rem;color:var(--color-text-dim,#888);font-weight:600;
  text-transform:uppercase;margin-top:2px;}
#rg-end-easy-hint{width:100%;background:var(--color-surface,rgba(0,0,0,.04));
  border-radius:10px;padding:14px 16px;margin-bottom:20px;font-size:.85rem;
  color:var(--color-text-mid,#555);line-height:1.6;display:none;}
#rg-end-easy-hint strong{color:var(--color-text,#1a1a1a);}
.rg-end-btns{display:flex;flex-direction:column;gap:10px;width:100%;}
.rg-end-btn{padding:13px;border-radius:10px;font-size:.95rem;font-weight:700;
  cursor:pointer;border:none;text-align:center;}
.rg-end-btn.primary{background:var(--color-accent-c,#5a7a5a);color:#fff;}
.rg-end-btn.ghost{background:transparent;border:1.5px solid var(--color-border-strong,rgba(0,0,0,.2));
  color:var(--color-text-mid,#555);}

/* ── Predictive suggestions (S543 — replaces bare text entry) ── */
#rg-input-wrap{position:relative;}
#rg-predict{position:absolute;left:0;right:0;top:100%;margin-top:4px;z-index:40;
  background:var(--color-surface,#fff);border:1px solid var(--color-border,#ddd);
  border-radius:10px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.18);display:none;}
#rg-predict.open{display:block;}
.rg-predict-item{padding:11px 14px;font-size:1rem;cursor:pointer;display:flex;
  align-items:center;gap:10px;border-bottom:1px solid var(--color-border,#eee);
  color:var(--color-text-primary,#222);min-height:44px;}
.rg-predict-item:last-child{border-bottom:none;}
.rg-predict-item.active,.rg-predict-item:hover{background:var(--color-accent-soft,rgba(0,170,255,.12));}
.rg-predict-ico{width:22px;height:22px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.1rem;}
.rg-predict-ico svg{width:22px;height:22px;}
.rg-predict-match{font-weight:800;}