/* ===== Shared Peppy Thinkers header/footer ===== */
.container{
  width:min(1120px,calc(100% - 44px));
  max-width:none;
  margin:0 auto;
}
.site-header,
.site-header *,
.site-footer,
.site-footer *{
  box-sizing:border-box;
}
.puzzle-site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(223,231,242,.9);
  padding:0;
}
.puzzle-header-inner{
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.puzzle-brand,
.brand{
  display:inline-flex;
  align-items:center;
  gap:13px;
  min-width:fit-content;
  color:inherit;
  text-decoration:none;
}
.brand-badge{
  width:44px;
  height:44px;
  border-radius:15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:.92rem;
  font-weight:900;
  background:linear-gradient(135deg,#4078ff,#6757f5);
  box-shadow:0 12px 22px rgba(64,120,255,.22);
}
.logo{
  display:block;
  font-size:1.55rem;
  font-weight:900;
  letter-spacing:-.04em;
  line-height:1.05;
  color:#172033;
}
.tagline{
  display:block;
  margin-top:8px;
  color:#718096;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.19em;
}
.site-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
}
.site-nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 12px;
  border-radius:999px;
  color:#435067;
  font-size:.9rem;
  font-weight:900;
  text-decoration:none;
  transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease;
}
.site-nav a:hover{
  transform:translateY(-1px);
  background:#f2f0ff;
  color:#4d3fdc;
}
.site-nav a.active{
  color:#fff;
  background:#6757f5;
  box-shadow:0 12px 22px rgba(103,87,245,.25);
}
.menu-toggle{
  display:none;
  width:42px;
  height:42px;
  border:1px solid #dfe7f2;
  border-radius:14px;
  background:#fff;
  color:#27344a;
  font-size:1.2rem;
  font-weight:900;
  cursor:pointer;
}

/* ===== Mini Games sub navigation ===== */
.mini-game-subnav{
  width:min(1320px,calc(100% - 44px));
  margin:18px auto 18px;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  border-radius:24px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(223,231,242,.9);
  box-shadow:0 10px 25px rgba(34,50,84,.08);
  backdrop-filter:blur(14px);
}
.mini-game-subnav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:9px 13px;
  border-radius:999px;
  background:#fff;
  border:1px solid #dfe7f2;
  color:#435067;
  font-size:.9rem;
  font-weight:900;
  text-decoration:none;
  transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.mini-game-subnav a:hover,
.mini-game-subnav a.active{
  color:#fff;
  background:#6757f5;
  border-color:#6757f5;
  box-shadow:0 10px 22px rgba(103,87,245,.22);
  transform:translateY(-1px);
}

.puzzle-site-footer{
  padding:32px 0;
  border-top:1px solid #dfe7f2;
  background:rgba(255,255,255,.62);
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}
.site-footer h3{
  font-size:1rem;
  font-weight:900;
  margin:0;
  letter-spacing:-.02em;
}
.site-footer p{
  color:#5f6b7c;
  font-size:.9rem;
  margin:4px 0 0;
}
.footer-nav{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}
.footer-nav a{
  color:#435067;
  font-size:.9rem;
  font-weight:800;
  text-decoration:none;
}
.footer-nav a:hover{color:#6757f5;}

@media(max-width:820px){
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center;}
  .site-nav{
    position:absolute;
    left:22px;
    right:22px;
    top:76px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    padding:12px;
    border:1px solid #dfe7f2;
    border-radius:22px;
    background:rgba(255,255,255,.98);
    box-shadow:0 18px 45px rgba(34,50,84,.11);
  }
  .site-nav.open{display:flex;}
  .site-nav a{text-align:center;}
}
@media(max-width:680px){
  .mini-game-subnav{
    width:min(100% - 28px,1120px);
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .mini-game-subnav::-webkit-scrollbar{display:none;}
  .mini-game-subnav a{flex:0 0 auto;}

  .container{width:min(100% - 28px,1120px);}
  .puzzle-header-inner{min-height:82px;}
  .brand-badge{width:40px;height:40px;}
  .logo{font-size:1.28rem;}
  .tagline{font-size:.58rem;}
  .footer-inner{align-items:flex-start;flex-direction:column;}
}

:root {
  --bg1: #ecfdf5;
  --bg2: #fff7ed;
  --ink: #173326;
  --muted: #5f796c;
  --panel: rgba(255,255,255,.84);
  --panel-solid: #fffef8;
  --soil: #7c4a2d;
  --soil-dark: #50311f;
  --leaf: #22a760;
  --leaf-dark: #137040;
  --sun: #fbbf24;
  --water: #38bdf8;
  --rose: #f43f5e;
  --violet: #8b5cf6;
  --danger: #ef4444;
  --shadow: 0 22px 60px rgba(36, 77, 53, .20);
  --soft-shadow: 0 12px 30px rgba(36, 77, 53, .14);
  --radius: 24px;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 9% 8%, rgba(251,191,36,.24), transparent 28%),
    radial-gradient(circle at 84% 18%, rgba(56,189,248,.16), transparent 28%),
    radial-gradient(circle at 62% 92%, rgba(34,167,96,.14), transparent 30%),
    linear-gradient(135deg, var(--bg1), var(--bg2));
  overflow-x: hidden;
}
button, select, input { font: inherit; }
button { border: 0; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease, background .16s ease; }
button:not(:disabled):hover { transform: translateY(-1px); }
button:disabled { opacity:.45; cursor:not-allowed; }
select {
  width: 100%;
  border: 1px solid rgba(95,121,108,.22);
  background: white;
  border-radius: 16px;
  padding: 11px 12px;
  margin-top: 6px;
  color: var(--ink);
  font-weight: 800;
}
label { display:block; color: var(--muted); font-weight: 800; font-size: .86rem; margin: 14px 0; }
.toggle-row { display:flex; align-items:center; gap:10px; color: var(--ink); background: rgba(236,253,245,.75); border:1px solid rgba(34,167,96,.18); padding:10px; border-radius:16px; }
.toggle-row input { width:18px; height:18px; accent-color: var(--leaf); }
.app-shell { min-height: 100%; padding: 18px; }
.game-header {
  max-width: 1540px;
  margin: 0 auto 16px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 28px;
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(14px);
}
.brand-block { display:flex; align-items:center; gap:12px; min-width:0; }
.logo-garden {
  width: 54px; height:54px; border-radius:18px;
  display:grid; place-items:center;
  font-size:1.9rem;
  background: linear-gradient(145deg, #dcfce7, #5dd482);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.48), var(--soft-shadow);
}
h1 { margin:0; font-size: clamp(1.35rem, 2vw, 2.25rem); letter-spacing:-.055em; }
.brand-block p { margin:2px 0 0; color:var(--muted); font-weight:800; font-size:.88rem; }
.top-stats { display:flex; align-items:center; gap:8px; }
.stat {
  min-width:82px;
  padding:9px 11px;
  background: rgba(255,254,248,.88);
  border:1px solid rgba(95,121,108,.14);
  border-radius:18px;
  text-align:center;
}
.stat span { display:block; color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; font-weight:900; }
.stat strong { display:block; margin-top:2px; font-size:1.08rem; }
.danger-stat strong { color:#b91c1c; }
.header-actions { display:flex; align-items:center; gap:8px; }
.icon-btn { width:42px; height:42px; border-radius:15px; background: rgba(255,254,248,.9); color:var(--ink); font-weight:900; box-shadow:var(--soft-shadow); }
.primary-btn, .gold-btn, .soft-btn, .danger-soft-btn {
  border-radius: 16px;
  padding: 11px 14px;
  font-weight: 900;
}
.primary-btn { color:white; background: linear-gradient(135deg, #22a760, #137040); box-shadow:0 12px 26px rgba(19,112,64,.22); }
.gold-btn { color:#442a05; background: linear-gradient(135deg, #fde68a, #fbbf24); box-shadow:0 12px 26px rgba(251,191,36,.24); }
.soft-btn { color:var(--ink); background: rgba(255,254,248,.92); border:1px solid rgba(95,121,108,.14); }
.danger-soft-btn { color:#8b1a1a; background:#fee2e2; border:1px solid #fecaca; }
.full { width:100%; }
.game-layout { max-width:1540px; margin:0 auto; display:grid; grid-template-columns:minmax(250px, 318px) minmax(780px, 1fr); gap:18px; align-items:start; }
.side-panel { display:flex; flex-direction:column; gap:14px; }
.panel-card { background:var(--panel); border:1px solid rgba(255,255,255,.78); border-radius:var(--radius); padding:16px; box-shadow:var(--soft-shadow); backdrop-filter:blur(14px); }
.panel-card h2 { margin:0 0 10px; font-size:1.05rem; letter-spacing:-.02em; }
.coach-card { background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(236,253,245,.88)); }
.coach-card p, .status-card p { margin:0 0 12px; color:var(--muted); font-weight:800; line-height:1.45; }
.coach-buttons { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mini-meter { height:12px; border-radius:999px; background:rgba(95,121,108,.14); overflow:hidden; }
.mini-meter span { display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--sun), var(--leaf)); transition:width .25s ease; }
.status-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.status-grid div { background:rgba(255,254,248,.72); border-radius:16px; padding:10px; }
.status-grid span { display:block; color:var(--muted); font-size:.75rem; font-weight:900; text-transform:uppercase; letter-spacing:.05em; }
.status-grid strong { display:block; font-size:1.25rem; margin-top:2px; }
.button-stack { display:grid; gap:9px; }
.collapse-toggle { width:100%; background:transparent; padding:0; display:flex; justify-content:space-between; align-items:center; font-weight:900; color:var(--ink); }
.collapse-body { margin-top:10px; }
.collapse-body.closed { display:none; }
.log-body { max-height:190px; overflow:auto; padding-right:4px; }
#gameLog { list-style:none; margin:0; padding:0; }
#gameLog li { padding:8px 0; border-bottom:1px solid rgba(95,121,108,.14); color:var(--muted); font-weight:700; font-size:.84rem; }
.table-zone { min-width:0; }
.garden-table {
  position:relative;
  min-height: calc(100vh - 130px);
  border-radius: 38px;
  padding: 20px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 36%, rgba(255,255,255,.18), transparent 32%),
    repeating-linear-gradient(35deg, rgba(255,255,255,.045) 0 3px, transparent 3px 13px),
    linear-gradient(135deg, #37b76c 0%, #228b54 47%, #17613c 100%);
  border: 10px solid var(--soil);
  box-shadow: var(--shadow), inset 0 0 0 8px rgba(255,255,255,.16);
}
.table-shine { position:absolute; inset:52px 80px; border:2px dashed rgba(255,255,255,.20); border-radius:50%; pointer-events:none; }
.deck-row { position:relative; z-index:2; display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.deck-area { display:flex; align-items:flex-start; gap:12px; }
.stock-pile, .compost-pile { width:84px; height:116px; border-radius:16px; display:grid; place-items:center; position:relative; }
.stock-pile { color:white; background: linear-gradient(135deg, rgba(255,255,255,.24), transparent 45%), repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 5px, transparent 5px 10px), linear-gradient(135deg, #38bdf8, #2563eb); box-shadow:0 14px 25px rgba(0,0,0,.18), inset 0 0 0 4px rgba(255,255,255,.35); }
.stock-icon { font-size:2rem; filter:drop-shadow(0 3px 3px rgba(0,0,0,.15)); }
.stock-count { position:absolute; top:8px; right:9px; background:rgba(0,0,0,.30); color:white; min-width:25px; height:25px; border-radius:999px; display:grid; place-items:center; font-size:.78rem; font-weight:900; }
.compost-pile { border:2px dashed rgba(255,255,255,.35); background:rgba(255,255,255,.10); overflow:hidden; }
.quick-rules { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; max-width:720px; }
.quick-rules span { color:#fff; background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.20); border-radius:999px; padding:7px 10px; font-size:.82rem; font-weight:800; backdrop-filter:blur(8px); }
.message-banner { position:relative; z-index:2; margin:18px auto 18px; width:fit-content; max-width:min(92%, 840px); color:white; text-align:center; font-weight:900; line-height:1.35; padding:10px 16px; border-radius:999px; background:rgba(31,77,46,.48); border:1px solid rgba(255,255,255,.20); box-shadow:0 8px 24px rgba(0,0,0,.12); }
.garden-board-wrap { position:relative; z-index:2; width:min(92vw, 720px); margin:0 auto; }
.board-labels { color: rgba(255,255,255,.82); font-size:.78rem; font-weight:900; }
.top-labels { display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; margin-left:30px; margin-bottom:6px; text-align:center; }
.board-with-left-labels { display:flex; gap:8px; align-items:stretch; }
.side-labels { display:grid; grid-template-rows:repeat(5, 1fr); gap:10px; width:22px; align-items:center; text-align:center; }
.garden-grid {
  flex:1;
  display:grid;
  grid-template-columns:repeat(5, minmax(78px, 1fr));
  gap:10px;
  padding:16px;
  border-radius:30px;
  background:rgba(84,49,30,.30);
  border:2px solid rgba(255,255,255,.23);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 14px 28px rgba(0,0,0,.14);
}
.patch {
  aspect-ratio: 3 / 4;
  min-height: 104px;
  border-radius:20px;
  border:2px dashed rgba(255,255,255,.28);
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.10), transparent 26%),
    linear-gradient(145deg, rgba(90,53,32,.56), rgba(55,31,19,.50));
  color:rgba(255,255,255,.78);
  display:grid;
  place-items:center;
  position:relative;
  padding:6px;
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.04);
}
.patch.empty::after { content:'+'; font-size:1.8rem; font-weight:900; opacity:.55; }
.patch.valid-target { border-style:solid; border-color:rgba(253,230,138,.98); background:linear-gradient(145deg, rgba(250,204,21,.26), rgba(34,197,94,.20)); transform:translateY(-2px); box-shadow:0 0 0 4px rgba(253,230,138,.22), inset 0 0 0 3px rgba(255,255,255,.12); }
.patch.suggested, .garden-card.suggested { outline:4px solid rgba(253,230,138,.95); animation:pulseGlow .85s ease infinite; }
.patch.weed { border-style:solid; border-color:rgba(239,68,68,.65); background:linear-gradient(145deg, rgba(85,55,39,.80), rgba(127,29,29,.38)); }
.patch.blooming { animation:bloom .55s ease; }
.patch-card { width:100%; height:100%; display:grid; place-items:center; }
.hand-section { position:relative; z-index:2; margin-top:20px; padding:14px; border-radius:28px; background:rgba(20,88,48,.36); border:1px solid rgba(255,255,255,.18); }
.hand-title { display:flex; justify-content:space-between; align-items:center; color:white; font-weight:900; margin-bottom:10px; }
.hand-title small { color:rgba(255,255,255,.80); font-weight:800; }
.hand-area { display:flex; gap:10px; flex-wrap:wrap; min-height:128px; align-items:center; }
.garden-card { width:88px; height:122px; border-radius:18px; background:linear-gradient(145deg, #fffffb, #eafff1); box-shadow:0 12px 23px rgba(0,0,0,.20), inset 0 0 0 2px rgba(255,255,255,.75); border:2px solid rgba(22,51,38,.14); padding:8px; display:flex; flex-direction:column; justify-content:space-between; user-select:none; touch-action:manipulation; position:relative; animation:popIn .18s ease both; }
.garden-card.selectable { cursor:pointer; }
.garden-card.selectable:hover { transform:translateY(-4px); }
.garden-card.selected { outline:4px solid rgba(253,230,138,.98); transform:translateY(-7px) rotate(-1deg); }
.garden-card.playable { box-shadow:0 14px 25px rgba(0,0,0,.20), 0 0 0 4px rgba(253,230,138,.75); }
.garden-card .card-top { display:flex; justify-content:space-between; align-items:flex-start; font-weight:900; }
.garden-card .value { font-size:1.18rem; line-height:1; }
.garden-card .suit-dot { width:18px; height:18px; border-radius:50%; box-shadow:inset 0 0 0 3px rgba(255,255,255,.45); }
.garden-card .plant-emoji { text-align:center; font-size:2.2rem; line-height:1; filter:drop-shadow(0 4px 3px rgba(0,0,0,.12)); }
.garden-card .card-bottom { display:flex; justify-content:space-between; align-items:flex-end; color:var(--muted); font-weight:900; font-size:.70rem; text-transform:uppercase; letter-spacing:.04em; }
.garden-card.special { background:linear-gradient(145deg, #ffffff, #fef9c3); }
.garden-card.special.water { background:linear-gradient(145deg, #ffffff, #e0f2fe); }
.garden-card.special.bee { background:linear-gradient(145deg, #ffffff, #fef3c7); }
.garden-card.special .plant-emoji { font-size:2.42rem; }
.garden-card.small { width:100%; height:100%; min-height:0; border-radius:14px; padding:6px; }
.garden-card.small .plant-emoji { font-size:1.55rem; }
.garden-card.small .value { font-size:.98rem; }
.garden-card.composted { opacity:.95; transform:rotate(-3deg); }
.suit-seed { background:#22c55e; }
.suit-leaf { background:#14b8a6; }
.suit-flower { background:#f43f5e; }
.suit-star { background:#8b5cf6; }
.weed-tile { width:100%; height:100%; display:grid; place-items:center; color:white; font-size:2.2rem; font-weight:900; }
.weed-tile small { display:block; font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; }
.modal { position:fixed; inset:0; background:rgba(14,41,29,.54); display:grid; place-items:center; z-index:70; padding:18px; }
.modal.hidden { display:none; }
.modal-card { width:min(740px, 96vw); max-height:88vh; overflow:auto; background:var(--panel-solid); border-radius:28px; padding:24px; box-shadow:var(--shadow); position:relative; }
.modal-card h2 { margin:0 0 12px; font-size:1.55rem; letter-spacing:-.03em; }
.modal-card h3 { margin:18px 0 8px; }
.modal-card p, .modal-card li { color:var(--muted); line-height:1.55; font-weight:700; }
.modal-close { position:absolute; right:14px; top:14px; width:38px; height:38px; border-radius:14px; background:#ecfdf5; font-size:1.35rem; font-weight:900; }
.end-card { text-align:center; }
.end-score { margin:14px auto 18px; width:130px; height:130px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(145deg, #dcfce7, #86efac); color:#14532d; font-size:2rem; font-weight:900; box-shadow:var(--soft-shadow); }
.toast { position:fixed; left:50%; bottom:22px; transform:translate(-50%, 15px); opacity:0; pointer-events:none; z-index:90; background:rgba(23,51,38,.95); color:white; padding:12px 16px; border-radius:18px; box-shadow:var(--shadow); font-weight:900; transition:opacity .2s ease, transform .2s ease; }
.toast.show { opacity:1; transform:translate(-50%, 0); }
@keyframes popIn { from { opacity:0; transform:translateY(8px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes pulseGlow { 0%,100% { filter:brightness(1); } 50% { filter:brightness(1.25); } }
@keyframes bloom { 0% { transform:scale(1); } 50% { transform:scale(1.06); filter:brightness(1.35); } 100% { transform:scale(1); } }
@media (max-width: 1180px) {
  .game-header { grid-template-columns:1fr; }
  .top-stats { justify-content:space-between; flex-wrap:wrap; }
  .header-actions { justify-content:flex-end; }
  .game-layout { grid-template-columns:1fr; }
  .side-panel { order:2; display:grid; grid-template-columns:repeat(2, minmax(240px, 1fr)); }
  .table-zone { order:1; }
}
@media (max-width: 760px) {
  .app-shell { padding:10px; }
  .game-header { border-radius:22px; }
  .brand-block { align-items:flex-start; }
  .logo-garden { width:44px; height:44px; border-radius:15px; font-size:1.5rem; }
  .top-stats { gap:6px; }
  .stat { flex:1; min-width:70px; padding:8px 6px; }
  .side-panel { grid-template-columns:1fr; }
  .garden-table { min-height:740px; border-radius:26px; border-width:7px; padding:12px; }
  .stock-pile, .compost-pile { width:66px; height:92px; border-radius:13px; }
  .quick-rules { display:none; }
  .garden-board-wrap { width:100%; }
  .garden-grid { gap:6px; padding:10px; border-radius:22px; grid-template-columns:repeat(5, minmax(48px, 1fr)); }
  .patch { min-height:76px; border-radius:14px; }
  .garden-card { width:72px; height:100px; border-radius:14px; padding:7px; }
  .garden-card .plant-emoji { font-size:1.72rem; }
  .garden-card .value { font-size:1rem; }
  .garden-card.small .plant-emoji { font-size:1.2rem; }
  .garden-card.small .card-bottom { font-size:.55rem; }
  .hand-area { gap:8px; }
  .coach-buttons { grid-template-columns:1fr; }
}

/* Strategy upgrade visual markers */
.patch.rock,
.patch.mud {
  border-style: solid;
  border-color: rgba(255,255,255,.28);
  background: linear-gradient(145deg, rgba(68,48,36,.88), rgba(36,27,22,.72));
}
.patch.mud {
  border-color: rgba(180,120,64,.72);
  background: linear-gradient(145deg, rgba(126,79,43,.84), rgba(83,52,30,.70));
}
.block-tile,
.lock-label {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  color: white;
  font-size: 1.9rem;
  font-weight: 900;
}
.block-tile small,
.lock-label small {
  display: block;
  margin-top: 2px;
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .9;
}
.patch.suit-locked {
  border-style: solid;
  background:
    radial-gradient(circle at 50% 15%, rgba(255,255,255,.16), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(45,80,50,.24));
}
.patch.lock-seed { border-color: rgba(34,197,94,.85); }
.patch.lock-leaf { border-color: rgba(20,184,166,.85); }
.patch.lock-flower { border-color: rgba(244,63,94,.85); }
.patch.lock-star { border-color: rgba(139,92,246,.85); }
.patch.lock-seed .lock-label { color: #dcfce7; }
.patch.lock-leaf .lock-label { color: #ccfbf1; }
.patch.lock-flower .lock-label { color: #ffe4e6; }
.patch.lock-star .lock-label { color: #ede9fe; }