:root{--text:#c8c0b8;--text-muted:#7a7268;--bg:#1a1814;--panel:#242018;--border:#3a342c;--accent:#8b7355;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font:16px/1.4 system-ui,Segoe UI,Roboto,sans-serif}*,:before,:after{box-sizing:border-box}body{min-height:100svh;margin:0}h1,h2,h3{margin:0;font-weight:600}h2{letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin:0 0 1rem;font-size:.875rem}ul{margin:0;padding:0;list-style:none}#app{height:100svh}.layout{height:100svh;display:flex;overflow:hidden}.game-area{border-right:1px solid var(--border);background:var(--bg);flex-direction:column;flex:2;justify-content:flex-start;align-items:center;padding:1.5rem;display:flex;overflow-y:auto}.app-header{width:100%;max-width:900px;margin-bottom:1rem}.app-title{letter-spacing:.02em;color:var(--text);font-size:1.375rem}.app-subtitle{color:var(--text-muted);margin:.375rem 0 0;font-size:.875rem}.help-panel{border:1px solid var(--border);background:var(--panel);border-radius:8px;width:100%;max-width:900px;margin-bottom:1rem;padding:1rem 1.125rem}.help-panel summary{cursor:pointer;justify-content:space-between;align-items:center;list-style:none;display:flex}.help-panel summary:after{content:"▾";color:var(--text);flex-shrink:0;margin-left:.75rem;font-size:1.25rem;line-height:1;transition:transform .15s}.help-panel[open] summary:after{transform:rotate(180deg)}.help-panel summary::-webkit-details-marker{display:none}.help-title{letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:.75rem;font-size:.75rem}.help-panel:not([open]) .help-title{margin-bottom:0}.help-panel[open] .help-title{margin-bottom:.75rem}.help-mobile-only{display:none}.help-desktop-only{display:inline}.help-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem 1.25rem;display:grid}.help-item--wide{grid-column:1/-1}.help-figure{margin:.75rem 0 0}.help-figure img{border:1px solid var(--border);border-radius:6px;width:100%;max-width:560px;height:auto;display:block}.help-figure figcaption{color:var(--text-muted);margin-top:.5rem;font-size:.75rem;line-height:1.4}.help-item h3{color:var(--text);margin-bottom:.375rem;font-size:.875rem}.help-item p{color:var(--text-muted);margin:0 0 .5rem;font-size:.8125rem;line-height:1.5}.help-item p:last-child{margin-bottom:0}.help-item em{color:var(--text);font-style:normal;font-weight:500}.help-item code{background:var(--bg);color:var(--text);border-radius:4px;padding:.1rem .35rem;font-size:.75rem}.help-legend{flex-direction:column;gap:.375rem;margin:.5rem 0 0;padding:0;list-style:none;display:flex}.help-legend li{color:var(--text-muted);align-items:center;gap:.5rem;font-size:.8125rem;line-height:1.4;display:flex}.help-legend strong{color:var(--text);font-weight:600}.legend-swatch{box-sizing:border-box;border-radius:50%;flex-shrink:0;width:1.25rem;height:1.25rem}.legend-swatch--start{border:2px solid #c9a227;box-shadow:0 0 6px #c9a22773}.legend-swatch--target{border:2px solid #5a9e6f;box-shadow:0 0 6px #5a9e6f59}.link-legend{border:1px solid var(--border);background:#1a1814;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:1.5rem;height:1.5rem;font-size:.6875rem;font-weight:600;display:inline-flex}.link-legend--same{color:#c9a227}.link-legend--opposite{color:#7eb8d4}.help-note{font-style:italic;margin-top:.5rem!important;font-size:.75rem!important}.gate-toolbar{justify-content:space-between;align-items:center;gap:.75rem;width:100%;max-width:900px;margin-bottom:1rem;display:flex}.gate-select{border:1px solid var(--border);background:var(--panel);min-width:0;color:var(--text-muted);border-radius:6px;flex:1;align-items:center;gap:.625rem;padding:.5rem .75rem;font-size:.8125rem;display:flex}.reset-btn{border:1px solid var(--border);background:var(--panel);color:var(--text);font:inherit;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;border-radius:6px;flex-shrink:0;padding:.5rem .875rem;font-size:.8125rem;font-weight:600}.reset-btn:hover{border-color:var(--accent)}.reset-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.gate-select select{border:1px solid var(--border);background:var(--bg);color:var(--text);cursor:pointer;border-radius:4px;padding:.25rem .5rem;font-size:.8125rem}.pin-mode{border:1px solid var(--border);border-radius:8px;width:100%;margin-bottom:.75rem;display:none;overflow:hidden}.pin-mode-btn{background:var(--bg);color:var(--text-muted);font:inherit;cursor:pointer;border:none;flex:1;margin:0;padding:.625rem .75rem;font-size:.8125rem;font-weight:600}.pin-mode-btn+.pin-mode-btn{border-left:1px solid var(--border)}.pin-mode-btn--active.pin-mode-btn--start{color:#c9a227;background:#c9a2271f}.pin-mode-btn--active.pin-mode-btn--target{color:#5a9e6f;background:#5a9e6f1f}#lock-cards{flex-direction:column;align-items:stretch;gap:1rem;width:100%;max-width:900px;display:flex}.cards-grid{flex-direction:column;gap:.625rem;width:100%;display:flex}.card{flex-direction:row;align-items:center;gap:.5rem;display:flex}.card-label{text-align:center;width:1.5rem;color:var(--text-muted);flex-shrink:0;font-size:.875rem;font-weight:600}.card-face{border:1px solid var(--border);background:linear-gradient(145deg,#2a241c,#1e1a14);border-radius:10px;flex:1;min-width:0;padding:.625rem .75rem;box-shadow:inset 0 1px #ffffff0a}.holes{flex-direction:row;justify-content:center;align-items:center;gap:.375rem;width:100%;padding-bottom:.375rem;display:flex}.hole{cursor:pointer;aspect-ratio:1;background:0 0;border:none;border-radius:50%;flex:0 0 2.25rem;width:2.25rem;height:2.25rem;margin:0;padding:0;position:relative}.hole:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.hole-number{color:var(--text-muted);pointer-events:none;font-size:.5625rem;line-height:1;position:absolute;bottom:-.125rem;left:50%;transform:translate(-50%)}.hole-socket,.pin-ring{aspect-ratio:1;border-radius:50%;position:absolute;top:50%;left:50%;translate:-50% -50%}.hole-socket{background:#0f0d0a;border:1px solid #4a4034;width:56%;height:56%;box-shadow:inset 0 2px 4px #0009}.pin-ring{pointer-events:none;box-sizing:border-box}.pin-ring--current{border:2px solid #c9a227;width:44%;height:44%;box-shadow:0 0 6px #c9a22773}.pin-ring--correct{border:2px solid #5a9e6f;width:72%;height:72%;box-shadow:0 0 6px #5a9e6f59}.link-grid{flex-direction:column;flex-shrink:0;gap:.125rem;min-width:5.5rem;display:flex}.link-grid-title{letter-spacing:.06em;text-transform:uppercase;text-align:center;color:var(--text-muted);font-size:.5625rem;font-weight:600}.link-grid-cells,.link-grid-labels{gap:.25rem;display:flex}.link-grid-labels span{text-align:center;width:1.5rem;color:var(--text-muted);font-size:.5625rem}.link-cell{border:1px solid var(--border);width:1.5rem;height:1.5rem;color:var(--text);cursor:pointer;background:#1a1814;border-radius:4px;margin:0;padding:0;font-size:.6875rem;font-weight:600}.link-cell:hover:not(:disabled){border-color:var(--accent)}.link-cell:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.link-cell--disabled{opacity:.35;cursor:default;color:var(--text-muted)}.solve-btn{border:1px solid var(--accent);width:100%;color:var(--text);font:inherit;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;background:linear-gradient(145deg,#3a3024,#2a241c);border-radius:10px;margin-top:.5rem;padding:1rem 1.5rem;font-size:1.125rem;font-weight:700}.solve-btn:hover{background:linear-gradient(145deg,#4a3f30,#3a3024);box-shadow:0 0 12px #8b735540}.solve-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.panel-hint{color:var(--text-muted);margin:-.5rem 0 1rem;font-size:.75rem;line-height:1.4}.solution-summary{border:1px solid var(--border);background:var(--panel);text-align:center;border-radius:6px;padding:.5rem .625rem;font-size:.875rem;font-weight:600}.solution-repeat{color:var(--text-muted);font-weight:600}.solution-step{border:1px solid var(--border);background:var(--bg);font-variant-numeric:tabular-nums;border-radius:6px;padding:.5rem .625rem;font-size:.875rem}.solution-index{color:var(--text-muted);margin-right:.375rem}.solution-error{color:#c97a7a;font-size:.8125rem}.solution-empty{color:var(--text-muted);font-size:.8125rem}.solution-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.5rem;display:flex}.solution-header h2{margin:0}.solution-view-toggle{border:1px solid var(--border);background:var(--bg);border-radius:6px;display:inline-flex;overflow:hidden}.solution-view-option{cursor:pointer;align-items:center;margin:0;display:inline-flex}.solution-view-option input{opacity:0;pointer-events:none;position:absolute}.solution-view-option span{color:var(--text-muted);padding:.3125rem .625rem;font-size:.75rem;font-weight:600;display:block}.solution-view-option input:checked+span{background:var(--accent);color:#fff}.solution-input-chain{border:1px solid var(--border);background:var(--bg);border-radius:6px;padding:.625rem}.input-chain-keys{flex-wrap:wrap;align-items:center;gap:.25rem;line-height:1.6;display:flex}.input-chain-sep{color:var(--text-muted);-webkit-user-select:none;user-select:none;font-weight:700}.input-key{border:1px solid var(--border);background:var(--panel);border-bottom-width:2px;border-radius:4px;justify-content:center;align-items:center;min-width:1.75rem;padding:.125rem .375rem;font-family:inherit;font-size:.8125rem;font-weight:700;line-height:1.4;display:inline-flex}.input-key--reset{color:#d4a24a}.input-key--nav{color:#7ab0d4}.input-key--move{color:#8bc98b}#inputs{flex-direction:column;gap:.375rem;display:flex}.sidebar{background:var(--panel);flex-direction:column;flex:1;min-width:0;padding:1.25rem;display:flex;overflow-y:auto}.sidebar-chest{flex-shrink:0}.sidebar-solution{flex-direction:column;flex:1;min-height:0;display:flex}.tab-bar{display:none}.tab-btn{border:none;border-top:1px solid var(--border);background:var(--panel);color:var(--text-muted);font:inherit;cursor:pointer;flex:1;margin:0;padding:.875rem 1rem;font-size:.875rem;font-weight:600}.tab-btn--active{color:var(--text);background:var(--bg);box-shadow:inset 0 2px 0 var(--accent)}.tab-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.chest-panel{border-bottom:1px solid var(--border);margin-bottom:1.5rem;padding-bottom:1.25rem}.chest-field{color:var(--text-muted);flex-direction:column;gap:.375rem;margin-bottom:.75rem;font-size:.75rem;display:flex}.chest-field input{border:1px solid var(--border);background:var(--bg);color:var(--text);font:inherit;border-radius:6px;padding:.5rem .625rem}.chest-field input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.chest-save{border:1px solid var(--border);background:var(--bg);width:100%;color:var(--text);font:inherit;cursor:pointer;border-radius:6px;padding:.5rem .75rem}.chest-save:hover{border-color:var(--accent)}.chest-status{min-height:1.125rem;color:var(--text-muted);margin:.625rem 0 0;font-size:.75rem}.chest-status--error{color:#c97a7a}.chest-list{flex-direction:column;gap:.5rem;margin-top:.875rem;display:flex}.chest-item{border:1px solid var(--border);background:var(--bg);border-radius:6px;justify-content:space-between;align-items:center;gap:.5rem;padding:.5rem .625rem;display:flex}.chest-item-name{text-overflow:ellipsis;white-space:nowrap;font-size:.8125rem;overflow:hidden}.chest-item-actions{flex-shrink:0;gap:.25rem;display:flex}.chest-btn{border:1px solid var(--border);color:var(--text);cursor:pointer;background:0 0;border-radius:4px;padding:.25rem .5rem;font-size:.6875rem}.chest-btn:hover{border-color:var(--accent)}.chest-empty{color:var(--text-muted);font-size:.8125rem}.placeholder{color:var(--text-muted);margin:0;font-size:.9375rem}@media (width>=768px){.tab-bar{display:none!important}.game-area{display:flex!important}.sidebar-chest,.sidebar-solution{display:block!important}}@media (width<=767px){.help-mobile-only{display:inline}.help-desktop-only{display:none}.layout{padding-bottom:calc(3.25rem + env(safe-area-inset-bottom,0px));flex-direction:column;overflow:hidden}.layout[data-active-tab=setup]{overflow-y:auto}.layout[data-active-tab=solution]{overflow:hidden}.game-area{border-right:none;flex:none;padding:1rem;overflow:visible}.layout[data-active-tab=setup] .game-area{display:flex}.layout[data-active-tab=solution] .game-area{display:none}.sidebar{background:0 0;flex:none;padding:0;overflow:visible}.layout[data-active-tab=setup] .sidebar-chest{background:var(--bg);padding:0 1rem 1rem;display:block}.layout[data-active-tab=solution] .sidebar-chest,.layout[data-active-tab=setup] .sidebar-solution{display:none}.layout[data-active-tab=solution] .sidebar-solution{background:var(--panel);flex:1;min-height:0;padding:1rem;display:flex;overflow-y:auto}.layout[data-active-tab=solution] .sidebar{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.tab-bar{z-index:10;padding-bottom:env(safe-area-inset-bottom,0px);background:var(--panel);display:flex;position:fixed;bottom:0;left:0;right:0}.app-header{margin-bottom:.75rem}.app-title{font-size:1.125rem}.app-subtitle{font-size:.8125rem}.pin-mode{display:flex}.card{border:1px solid var(--border);background:#00000026;border-radius:8px;flex-direction:column;align-items:stretch;gap:.375rem;padding:.5rem}.card-label{text-align:left;width:auto}.card-face{padding:.5rem .375rem}.holes{gap:.25rem;padding-bottom:.25rem}.hole{aspect-ratio:1;flex:1 1 0;width:auto;min-width:1.625rem;max-width:2.25rem;height:auto}.link-grid{align-self:center}.solve-btn{z-index:2;margin-top:.75rem;padding:.875rem 1rem;font-size:1rem;position:sticky;bottom:0;box-shadow:0 -4px 12px #00000059}.chest-panel{border-bottom:none;margin-bottom:0;padding-bottom:0}}

/* Custom Multi-Language & Solutions Styling */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 900px;
}
.header-text {
  flex: 1;
  min-width: 200px;
}
.lang-selector {
  display: flex;
  background: #1a1814;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 2px;
  align-self: center;
}
.lang-btn {
  font-family: inherit;
  background: transparent;
  color: var(--text-muted);
  border: none;
  width: 36px;
  height: 26px;
  line-height: 26px;
  cursor: pointer;
  font-size: 11px;
  font-weight: bold;
  border-radius: 13px;
  transition: all 0.15s ease;
  text-align: center;
  outline: none;
}
.lang-btn.active {
  background: var(--accent);
  color: #fff;
}

/* Solution Steps Highlight Walkthrough Player */
.solution-step {
  cursor: pointer;
  transition: all 0.15s ease;
}
.solution-step.active {
  border-color: var(--accent);
  background: rgba(139, 115, 85, 0.08);
}
.solution-player-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #1a1814;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 0.5rem;
}
.player-btn {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
  font-weight: bold;
  border-radius: 4px;
  transition: all 0.15s;
  outline: none;
}
.player-btn:hover:not(:disabled) {
  border-color: var(--accent);
}
.player-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.player-status {
  font-size: 11px;
  color: var(--text-muted);
}
.player-status strong {
  color: var(--text);
}

/* Local SEO Guides & FAQ */
.seo-guides-block {
  width: 100%;
  max-width: 900px;
  margin-top: 2rem;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}
.seo-guides-block h2 {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-size: .875rem;
  font-family: system-ui, -apple-system, sans-serif;
  margin-bottom: 0.75rem;
}
.seo-guides-block h3 {
  color: var(--text);
  font-size: .875rem;
  margin-top: 1.125rem;
  margin-bottom: 0.375rem;
}
.seo-guides-block p {
  color: var(--text-muted);
  font-size: .8125rem;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}
.seo-guides-block ul {
  list-style: square;
  margin-left: 16px;
  margin-bottom: 1rem;
}
.seo-guides-block li {
  color: var(--text-muted);
  font-size: .8125rem;
  line-height: 1.5;
  margin-bottom: 0.25rem;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
}
.faq-q {
  font-size: 0.8125rem;
  color: var(--text);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}
.faq-q span {
  font-size: 14px;
  color: var(--accent);
}
.faq-a {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.5;
}

/* Link highlights in Card Links Grid */
.link-cell.same {
  color: #c9a227;
}
.link-cell.opp {
  color: #7eb8d4;
}

/* Presets bar alignment */
.presets-toolbar {
  width: 100%;
  max-width: 900px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.presets-toolbar button {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
  outline: none;
}
.presets-toolbar button:hover {
  border-color: var(--accent);
  color: var(--text);
}

/* Mobile-specific mature layout overrides */
@media (max-width: 767px) {
  .app-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 1rem;
  }
  .header-text {
    width: 100%;
  }
  .lang-selector {
    display: flex;
    width: 100%;
    justify-content: space-between;
    background: #1a1814;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 3px;
    align-self: stretch;
  }
  .lang-btn {
    flex: 1;
    height: 32px;
    line-height: 32px;
    font-size: 12px;
    border-radius: 16px;
  }
}

/* Beautiful navigation guide links buttons at the bottom */
.nav-links {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
.nav-links a {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  background: var(--panel);
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.2s ease;
  display: inline-block;
}
.nav-links a:hover {
  border-color: var(--accent);
  color: #fff;
  background: #322b22;
  box-shadow: 0 0 10px rgba(139, 115, 85, 0.2);
}