:root {
  --rose-25: #fff7f9;
  --rose-50: #fff0f6;
  --rose-100: #ffe3ee;
  --rose-200: #ffcfe1;
  --rose-300: #ffb6cf;
  --rose-400: #ff9abc;
  --rose-500: #ff7aa6;
  --ink-700: #693c4c;
  --ink-800: #4e2a37;
  --white: #ffffff;
  --radius-2xl: 1.25rem;
  --shadow-sm: 0 6px 18px rgba(206, 72, 114, 0.10);
  --shadow-md: 0 10px 30px rgba(206, 72, 114, 0.18);

  /* grid defaults; override with inline style on .ws-grid */
  /*--cols: 11;*/ /* set to your puzzle width */
}

html, body {
  height: 100%;
  margin: 0;
  background:
    radial-gradient(1200px 800px at 80% 10%, rgba(255, 186, 206, 0.30), transparent 60%),
    radial-gradient(1000px 700px at 15% 85%, rgba(255, 160, 190, 0.35), transparent 60%),
    linear-gradient(180deg, var(--rose-50), var(--rose-100));
  color: var(--ink-800);
  font-family: 'Noto Sans CJK KR', 'Roboto', 'Arial', sans-serif;
  /*font-family: Fraunces, Georgia, Cambria, serif;*/
  /*font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";*/
}

/* Top bar */
.topbar {
  display: flex;
  /* Push children away from each other */
  justify-content: space-between;

  background: linear-gradient(90deg, #ffe8f1, #ffd9e7);
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid rgba(206, 72, 114, 0.18);
  padding: 10px 24px;
  /* Vertically align the contents */
  align-items: center;
  position: sticky; /* stays visible while scrolling */
  top: 0;
  -webkit-backdrop-filter: saturate(1.2) blur(6px);
  backdrop-filter: saturate(1.2) blur(6px);
  z-index: 100;
}

.topbar-right {
  display: flex;
  justify-content: right;
  gap: 5px;
  /* for call children (buttons + select) to stretch to max height */
  align-items: stretch;
}

.topbar h1 {
  /*font-family: Fraunces, Georgia, Cambria, serif;*/
  font-size: 20px;
  font-weight: 600;
  color: var(--ink-800);
  margin: 0;
}

.topbar select {
  border-radius: 999px;
  border: 1px solid rgba(206, 72, 114, 0.25);
  background: linear-gradient(180deg, #ffe8f1, #ffd9e7);
  box-shadow: var(--shadow-sm);
  color: var(--ink-700);
  /*font-family: Inter, sans-serif;*/
  font-weight: 600;
  font-size: 14px;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.topbar select:hover {
  background: linear-gradient(180deg, #ffd9e7, #ffcfe1);
}

.input-wrap {
  /* The page minus the topbar, plus extra*/
  min-height: calc(100% - 150px);

  display: grid;
  place-items: center;
  padding: 32px 20px;
}

.puzzle-wrap {
  /* The page minus the topbar, plus extra */
  min-height: calc(100% - 200px);

  display: grid;
  place-items: center;
  padding: 5px 10px;
}

.card {
  /*width: min(100%, 700px); */
  background: linear-gradient(180deg, var(--white), #fff9fb);
  border: 1px solid rgba(206, 72, 114, 0.10);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-2xl);
  padding: clamp(18px, 4vw, 34px);
  position: relative;
  /* raise it up higher */
  /*top: -10%;*/
  overflow: hidden;
  isolation: isolate;
}

/* this lets us adjust the corners of the card, with colors */
/*
.card::before, .card::after {
  content: "";
  position: absolute;
  inset: auto auto -120px -120px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 174, 196, 0.35), rgba(255, 174, 196, 0) 60%);
  pointer-events: none;
  filter: blur(2px);
  z-index: -1;
}
.card::after { inset: -120px -120px auto auto; }
*/

/*
.topbar-header {
  text-align: left;
  margin-bottom: 24px;
}
*/

/*different?*/
.input-header {
  text-align: center;
  margin-bottom: 24px;
  font-size: clamp(18px, 4vmin, 22px);
}
.in-card-header {
  display: grid;
  gap: 6px;
  justify-items: center;
  margin-bottom: clamp(16px, 3.5vmin, 28px);
  text-align: center;
}
.title {
  /*font-family: Fraunces, Georgia, Cambria, serif; */
  font-weight: 600;
  font-size: clamp(24px, 5vmin, 40px);
  margin: 0;
  color: var(--ink-800);
}
.subtitle {
  color: #7f4a5c;
  opacity: 0.9;
  margin: 6px 0 0 0;
}
.directive {
  color: #7f4a5c;
  opacity: 0.9;
  margin: 6px 0 0 0;
  margin-top: 20px;
}

.ws-grid {
  --gap: clamp(3px, 0.9vmin, 6px);
  display: grid;
  /* Fill in */
  grid-template-columns: repeat(var(--cols), var(--cell-size));
  gap: var(--gap);
  padding: clamp(10px, 2.2vmin, 16px);
  background: linear-gradient(180deg, var(--rose-25), var(--rose-50));
  border: 1px solid rgba(206, 72, 114, 0.18);
  border-radius: calc(var(--radius-2xl) - 6px);
  box-shadow: var(--shadow-sm) inset;
  -webkit-user-select: none; /* support safari */
  user-select: none; /* purely presentational */
}

.cell {
  width: var(--cell-size);
  height: var(--cell-size);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: 0.5px;
  /*clamp min, preferred, max *
   * 1vmin = 1% fo viewport min dimenson (width or height) */
/*  font-size: clamp(15px, 2.6vmin, 22px);*/
  line-height: 1;
/*  color: var(--ink-700);*/
/*  background: var(--white);*/
  border-radius: 12px;
  border: 1px solid rgba(206, 72, 114, 0.12);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, var(--shadow-sm);
}

.cell-large {
  --cell-size: clamp(34px, 5.1vmin, 54px);
  font-size: clamp(15px, 2.4vmin, 20px);
}
.cell-small {
  --cell-size: clamp(20px, 3.1vmin, 34px);
  font-size: clamp(12px, 1.8vmin, 18px);
}

.cell-not-selected {
  color: var(--ink-700);
  background: var(--white);
}
.cell-not-selected:hover {
    /* pink */
  background: linear-gradient(180deg, #ffd9e7, #ffcfe1);
  transform: translateY(-1px);
}

.cell-selected-uncertain {
  color: var(--ink-700);
    /* pink */
  background: linear-gradient(180deg, #ffd9e7, #ffcfe1);
}
.cell-selected-uncertain:hover {
    /* grey */
  background: linear-gradient(180deg, #f5f5f5, #e6e6e6);
  transform: translateY(-1px);
}

.cell-selected-certain {
  color: var(--ink-700);
  /* pastel green */
  background: linear-gradient(180deg, #dcffdc, #bef0be);
}
.cell-selected-certain:hover {
    /* grey */
  background: linear-gradient(180deg, #f5f5f5, #e6e6e6);
  transform: translateY(-1px);
}


/* Optional decorative label */
.badge {
  display: inline-grid;
  place-items: center;
  font-size: 12px;
  color: #7e4a5b;
  background: linear-gradient(180deg, #ffe8f1, #ffd9e7);
  border: 1px solid rgba(206, 72, 114, 0.20);
  border-radius: 999px;
  padding: 6px 10px;
  margin-top: 14px;
  box-shadow: var(--shadow-sm);
}

/* Small text, advertising our website */
.advertisement {
  place-items: left;
  font-size: 10px;
  margin-top: 10px;
}

/* The key to the puzzle */
.wordlist-key {
  font-size: 18px;
}

.wordlist-key-box {
  padding: 10px;
}

/* Print-friendly */
@media print {
    /* Force the browser to print backgrounds */
   /*
    * {
        -webkit-print-color-adjust:exact !important;
        print-color-adjust: exact !important;
    }
    */

/*  html { background: white; }*/
* {
/*  html, body, .card, .ws-grid {*/
    background: white !important;
    color: #000 !important;
    box-shadow: none !important;
  }
  /*body { background: white !important; }*/
  .card { box-shadow: none; border: none; }
  .badge { display: none; }
  .topbar { display: none; }
  .top-left-blurb { display: none; }

  /*.ws-grid { background: white; }*/
/*  .ws-frame { background: white; } */

  /* Hide the cells if printing the puzzle,
   * but not when printing the solution */
  .cell-puzzle {
      border: 0px;
      box-shadow: 0 0px;
  }

  /* Remove strikeout (in the word list) */
  s {
      text-decoration: none !important;
  }

}

/* Prevent breaking inside Korean words */
.ko-text {
    word-break: keep-all;      /* Don't break between CJK characters */
    white-space: normal;       /* Allow normal wrapping at spaces */
    line-break: strict;        /* Use strict line-breaking rules for CJK */
}

form {
  display: grid;
  gap: 16px;
}

textarea {
  /*width: 100%;*/
    /* I'm not sure whey I need 95%, but 100% goes too far to the right,
     * and 90% is too far _from_ the right */
  width: 95%;
  /*min-height: 160px;*/
  min-height: 30vmin;
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(206, 72, 114, 0.2);
  box-shadow: var(--shadow-sm) inset;
  padding: 14px 16px;
  resize: vertical;
  /*font-family: Inter, sans-serif; */
/*  font-size: 14px; */
  font-size: 18px;
  color: var(--ink-800);
  background: var(--white);
}
textarea::placeholder {
  color: #a37083;
  opacity: 0.7;
}

input {
  width: 95%;
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(206, 72, 114, 0.2);
  box-shadow: var(--shadow-sm) inset;
  padding: 14px 16px;
  resize: vertical;
  /*font-family: Inter, sans-serif;*/
  font-size: 18px;
  color: var(--ink-800);
  background: var(--white);
}
input::placeholder {
  color: #a37083;
  opacity: 0.7;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

button {
  appearance: none;
  background: linear-gradient(180deg, #ffe8f1, #ffd9e7);
  border: 1px solid rgba(206, 72, 114, 0.25);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  color: var(--ink-700);
  /*font-family: Inter, sans-serif;*/
  font-weight: 600;
  font-size: 14px;
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}


button:disabled {
/* Common visual cues for disabled state */
  opacity: 0.5; /* Makes it slightly transparent */
  cursor: not-allowed; /* Changes the mouse cursor */
  background-color: #ccc; /* Sets a dull background color */
  border: 1px solid #999;
}
button:disabled:hover {
  background-color: #ccc;
}

button:hover {
  background: linear-gradient(180deg, #ffd9e7, #ffcfe1);
  transform: translateY(-1px);
}
button:active {
  transform: translateY(1px);
}

.top-left-blurb {
    /* **Key Positioning Properties** */
    position: absolute; /* Positions the element relative to its closest positioned ancestor */
    top: 110px;
    left: 10px;

    width: 15%;
    max-width: 15%;
    /* center the block-level element horizontally */
    margin: 0 auto;
    padding: 20px;
    font-size: 20px;
}

/* You must ensure the parent of this blurb has position: relative; */
/* If the blurb is inside the <body>, it will be relative to the body/page. */

.preset-btn {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border: 1px solid #ccc;
    cursor: pointer;
}
.preset-btn-image {
    width: 5em;
    height: 5em;
}
.preset-btn-text {
    padding: 10px;
}


/* generic */
.div-center-vertically {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.div-expand-children-horizontally {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.arrow-size-row {
    display: flex;
    justify-content: center;
    /* gap between the 2 children */
    gap: 20px;
}

/* Hide default ratio button visually */
input[type="radio"] {
    display: none;
}
/* 2. Style the SVG when the radio button is NOTCHECKED */
/* the lines */
input[type="radio"]:not(:checked) + label svg g  {
    stroke: lightgrey;
}
/* the arrowhead body */
input[type="radio"]:not(:checked) + label svg polygon  {
    fill: lightgrey;
}

/* 3. Style the label/SVG container for layout */
label {
  display: inline-block; /* Allows side-by-side layout */
  cursor: pointer;
  margin-right: 20px;
}

.arrow-row {
    display: flex;
    justify-content: center;
}
.arrow-container {
    width: 40px;
    height: 40px;
    overflow: hidden;
}
.arrow-box {
    transform: scale(0.4);
    transform-origin: 0 0;
}
.arrow-label {
    /* Change to inline-block so it respects width/height and stays inline */
     display: inline-block;
    /* Ensure no extra padding or margin is preventing tight scaling */
    padding: 0;
    margin: 0 3px 0 3px;
}

/* Screen reader only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 1px, 1px);
  white-space: nowrap;
  border: 0;
}