/**
 * MUD3 Client - Wireplay Retro Theme
 * Full-screen reference image (wpclient.jpg) with parchment panel and overlaid controls
 * Directions around parchment; look + 6 circular buttons at bottom. No stats bar.
 */

/* Place background image in client/img/wpclient-bg.jpg for full effect */
[data-theme="wireplay"] body,
[data-theme="wireplay"] .app-container {
  background: #2c2218 url('../../img/wpclient.jpg') no-repeat center center;
  background-size: cover;
}

[data-theme="wireplay"] .bg-decorations {
  display: none;
}

[data-theme="wireplay"] #status-bar {
  display: none !important;
}

[data-theme="wireplay"] .bottom-controls {
  display: none !important;
}

[data-theme="wireplay"] .retro-wireplay-layout {
  display: block !important;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

[data-theme="wireplay"] .retro-wireplay-layout .wireplay-directions,
[data-theme="wireplay"] .retro-wireplay-layout .wireplay-actions {
  pointer-events: auto;
}

/* When wireplay theme is active, layout is visible (JS sets aria-hidden="false") */

/* Main content: centered parchment (terminal + input) */
[data-theme="wireplay"] .main-content {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem 8rem;
  max-width: 90%;
  margin: 0 auto;
}

[data-theme="wireplay"] .terminal-wrapper {
  flex: 1;
  max-width: 52rem;
  width: 100%;
  background: linear-gradient(135deg, #e8dcb8 0%, #d4c49a 50%, #e8dcb8 100%);
  border: 3px solid #9a7b1a;
  border-radius: 4px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5), inset 0 0 40px rgba(184,168,120,0.2);
  padding: 0.5rem;
}

[data-theme="wireplay"] .terminal-frame {
  background: transparent;
  border: none;
  box-shadow: none;
}

[data-theme="wireplay"] .terminal {
  color: #3d2e1f;
}

[data-theme="wireplay"] .input-area {
  max-width: 52rem;
  width: 100%;
  margin-top: 0.5rem;
}

[data-theme="wireplay"] .input-wrapper {
  background: #e8dcb8;
  border: 2px solid #9a7b1a;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.1);
}

[data-theme="wireplay"] .command-input {
  color: #3d2e1f;
}

[data-theme="wireplay"] .input-hints {
  display: none;
}

/* Direction ring around center (approximate positions like reference) */
[data-theme="wireplay"] .wireplay-directions {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 28rem;
  height: 20rem;
  margin: 0;
}

[data-theme="wireplay"] .wireplay-dir {
  position: absolute;
  width: 2.25rem;
  height: 2rem;
  padding: 0;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 6px;
  background: linear-gradient(180deg, #e8c84a 0%, #c9a227 50%, #9a7b1a 100%);
  border: 1px solid #7a5c0a;
  color: #1a1510;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

[data-theme="wireplay"] .wireplay-dir:hover {
  filter: brightness(1.15);
}

[data-theme="wireplay"] .wireplay-swamp {
  background: linear-gradient(180deg, #4a7c59 0%, #2d5a3d 100%);
  border-color: #1a3d28;
  color: #c8e6c9;
}

/* Position each direction around the ring (n at top, then clockwise) */
[data-theme="wireplay"] .wireplay-directions button[data-cmd="n"]   { left: 50%; top: 0;    transform: translate(-50%, 0); }
[data-theme="wireplay"] .wireplay-directions button[data-cmd="ne"]  { right: 0;  top: 8%;  }
[data-theme="wireplay"] .wireplay-directions button[data-cmd="e"]   { right: 0;  top: 50%; transform: translate(0, -50%); }
[data-theme="wireplay"] .wireplay-directions button[data-cmd="se"]  { right: 0;  bottom: 8%; }
[data-theme="wireplay"] .wireplay-directions button[data-cmd="s"]   { left: 50%; bottom: 0; transform: translate(-50%, 0); }
[data-theme="wireplay"] .wireplay-directions button[data-cmd="sw"]  { left: 0;   bottom: 8%; }
[data-theme="wireplay"] .wireplay-directions button[data-cmd="w"]   { left: 0;   top: 50%; transform: translate(0, -50%); }
[data-theme="wireplay"] .wireplay-directions button[data-cmd="nw"]  { left: 0;   top: 8%;  }
[data-theme="wireplay"] .wireplay-directions button[data-cmd="up"]  { left: 15%; top: 20%; }
[data-theme="wireplay"] .wireplay-directions button[data-cmd="down"]{ left: 15%; bottom: 20%; }
[data-theme="wireplay"] .wireplay-directions button[data-cmd="in"]  { right: 15%; top: 20%; }
[data-theme="wireplay"] .wireplay-directions button[data-cmd="out"] { right: 15%; bottom: 20%; }
[data-theme="wireplay"] .wireplay-directions button[data-cmd="zw"]  { left: 50%; bottom: -0.5rem; transform: translate(-50%, 100%); }

/* Bottom row: look (skull) center, then 6 circular buttons */
[data-theme="wireplay"] .wireplay-actions {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

[data-theme="wireplay"] .wireplay-look {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  font-size: 1.5rem;
  padding: 0;
  background: linear-gradient(180deg, #5c4a38 0%, #3d3024 100%);
  border: 2px solid #9a7b1a;
  color: #e8dcb8;
  margin-right: 0.5rem;
}

[data-theme="wireplay"] .wireplay-circle {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  font-size: 1.1rem;
  padding: 0;
  background: linear-gradient(180deg, #e8c84a 0%, #c9a227 50%, #9a7b1a 100%);
  border: 2px solid #7a5c0a;
  color: #1a1510;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

[data-theme="wireplay"] .wireplay-circle:hover,
[data-theme="wireplay"] .wireplay-look:hover {
  filter: brightness(1.15);
}

[data-theme="wireplay"] .top-bar {
  background: rgba(44, 34, 24, 0.85);
  border-bottom: 2px solid #9a7b1a;
}

[data-theme="wireplay"] .logo { color: #c9a227; }
[data-theme="wireplay"] .theme-icon-btn { color: #c9a227; }
[data-theme="wireplay"] .app-footer {
  background: rgba(44, 34, 24, 0.9);
  border-top: 1px solid #9a7b1a;
  color: #d4c49a;
}