@charset "UTF-8";
    /* --- Word Play Lab layout (page-local) --- */

    .wordplay-header {
      text-align: center;
      margin-top: 10px;
      margin-bottom: 20px;
    }

    .wordplay-kanji-row img {
      margin: 0 2px;
      vertical-align: middle;
    }

    .wordplay-subtitle {
      margin-top: 8px;
      margin-bottom: 4px;
      font-size: 1.0rem;
      color: #ddd;
    }

    .wordplay-instruction {
      font-size: 0.9rem;
      color: #999;
      margin: 4px 0 18px;
    }

    .wordplay-forms {
      max-width: 400px;
      margin: 0 auto 24px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .wordplay-form {
      width: 100%;
    }

    /* Form row */
	.wp-form {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	gap: 2rem;
	}

.rkw-furi {
  font-size: 0.8rem;
  color: #ccc; /* or #eee */
  margin-top: 4px;
}

/* Text boxes: a bit narrower than before */
.wp-form input[type="text"] {
  flex: 0 0 260px;          /* narrower box */
  max-width: 260px;
  padding: 6px 10px;
  font-size: 0.95rem;
}

    .wp-form input[type="text"] {
      flex: 1;
      padding: 6px 10px;
      border-radius: 4px;
      border: 1px solid #666;
      background: #111;
      color: #eee;
      font-size: 0.95rem;
    }

    .wp-form input[type="text"]::placeholder {
      color: #777;
    }

.wp-btn {
  background: #31577e !important;          /* Your blue tone */
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.28);  /* ✨ subtle border */
  padding: 0px 10px;                        /* slightly tighter for the new font size */
  border-radius: 6px;
  font-family: "Helvetica", "Arial", sans-serif !important;
  font-size: 1rem !important;             /* your updated size */
  letter-spacing: 0.08em;                   /* slight spacing for clarity */
  font-weight: 500 !important;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.wp-btn:hover {
  background: #3f6e9e;
  border-color: rgba(255, 255, 255, 0.45);  /* slightly brighter border on hover */
  transform: scale(1.06);
}

.wp-btn:active {
  background: #264767;
  border-color: rgba(255, 255, 255, 0.35);
  transform: scale(0.97);
}

/* Title block */
.wordplay-header {
  text-align: center;
  margin-top: 0.5rem;
}

/* JAPANESE 言葉遊び stays as-is if you already styled it */

/* English title – larger + rainbow */
.wordplay-subtitle {
  margin-top: 0.3rem;
  margin-bottom: 0.2rem;
font-size: clamp(0.9rem, 1.5vw, 1.2rem);
  letter-spacing: 0.03em;
  font-weight: 600;
font-family: "Helvetica", "Arial", sans-serif;
font-weight: 600;
letter-spacing: 0.02em;
  background: linear-gradient(
    90deg,
    #ca952e,
    #a6c65b,
    #54c1b0,
    #6fb4ff,
    #c39bff
  );
  -webkit-background-clip: text;
  color: transparent;
}

/* instruction line just under it */
.wordplay-instruction {
  font-size: 0.9rem;
  color: #999;
  margin-top: 0.4rem;
  margin-bottom: 30px;   /* NEW — extra breathing room */
}

.wordplay-forms {
  margin-top: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
}

.wordplay-form {
  width: 100%;
  max-width: 400px;
	margin-bottom: 18px;
}

.wp-form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* input boxes – slightly smaller */
.wp-form input[type="text"] {
  flex: 1;
  padding: 7px 10px;
  font-size: 0.95rem;
  border-radius: 4px;
}

/* Center the single E-voice tab on this page */
.kanji-tabs--wide {
  display: flex;
  justify-content: center;
  margin-top: 26px !important;
  margin-bottom: 26px !important;
  max-width: 220px;
}

/* Make sure the button doesn’t stretch */
.kanji-tabs--wide .evoice-tab {
  flex: 0 0 auto;
}

.wp-btn {
  padding: 7px 18px;
  font-size: 0.95rem;       /* bigger text */
  border-radius: 6px;
  border: none;
  background: #ca952e;
  color: #111;
  cursor: pointer;
  font-weight: 600;
}

.wp-btn:hover {
  opacity: 0.9;
}

/* Container for the two buttons */
.wordplay-actions {
  display: flex;
  gap: 18px;
  justify-content: flex-start;   /* left align like your screenshot */
  margin: 40px 0 35px;
}

/* Shared base button style */
.wordplay-btn {
  background: #ca952e;
  color: #ffffff;
  padding: 12px 28px;
  font-size: 1.0rem;
  border-radius: 10px;
  text-decoration: none;
  font-family: "Helvetica", sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
  transition: transform 0.15s ease, background 0.15s ease;
}

.wordplay-btn:hover {
  transform: translateY(-2px);
  background: #b68528;
}

/* Search icon button: square shape */
.wordplay-btn.search-btn {
  width: 70px;
  padding: 12px 0;        /* centers icon vertically */
  font-size: 1.15rem;     /* larger icon look */
}

/* Optional: Adjust icon color */
.wordplay-btn.search-btn i {
  color: #222;
}

.search-tab {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 55px;              /* SAME width as your E-voice tab */
  background: #ca952e;
  border-radius: 10px;
	border: 1px solid #ddd;
  color: #222;
  font-size: 1.2rem;
}

.search-tab i {
  color: #222;               /* icon color */
}

/* === Radical → Kanji → Word strip === */

.rkw-section {
  margin-top: 28px;
  padding: 0;
  border: none;           /* no outer frame */
  background: none;
}

.rkw-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: nowrap;
}

.rkw-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* Radical image inside the pill */
.rkw-img-link {
  display: inline-block;
}

.rkw-img {
  display: block;
  width: 50px;
  height: 50px;
  object-fit: contain;
}

/* Fallback text (if no image) */
.rkw-fallback {
  font-size: 2.1rem;
}

/* Labels under each pill */
.rkw-label {
  font-size: 0.75rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #ccc;
}

/* Arrows between slots */
.rkw-arrow {
  font-size: 1.4rem;
  color: #ddd;
  margin-top: 20px;
}

/* WORD box → horizontal kanji tiles */
#rkw-word.rkw-word-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

/* Slightly smaller tiles for the word area */
.rkw-img--small {
  width: 40px;
  height: 40px;
margin-top: 10px;
}

/* Wrapper around each kanji tile */
.rkw-word-kanji {
  display: inline-flex;
}

/* Clickable area around each tile */
.rkw-word-kanji-link {
  display: inline-block;
}

/* Fallback if an image is missing */
.rkw-word-char-fallback {
  font-size: 2.2rem;
  line-height: 1;
  padding: 6px 10px;
}

.rkw-word-label {
  margin-top: 5px;
  display: block;
}

.rkw-furi {
  margin-top: 4px;
  font-size: 0.8rem;
  color: #ddd;   /* or #eee / #ccc */
  text-align: center;
}

.refresh-tab {
  background-color: #693409 !important; /* brown */
}
.refresh-tab i {
  color: #ccc !important;
}