:root{
  --ksov-space: 16px;
  --ksov-radius: 12px;
  --ksov-text: #2c3e50;
  --ksov-primary: #007bff;
  --ksov-accent: #28a745;
}

.ksov-container {
    width: min(100%, 640px);
    margin: clamp(16px, 4vw, 40px) auto;
    padding: clamp(12px, 3.5vw, 25px);
    background: linear-gradient(145deg, #ffffff, #f0f4f8);
    border-radius: var(--ksov-radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
    font-family: 'Roboto', sans-serif;
    transition: transform 0.3s ease;
    box-sizing: border-box;
}

.ksov-container:hover { transform: translateY(-3px); }

/* Flexible input row that gracefully wraps */
.ksov-input-form {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.ksov-kanji-input {
    flex: 1 1 180px;
    min-width: 0; /* prevent overflow on tiny screens */
    padding: 12px;
    font-size: clamp(15px, 2.6vw, 18px);
    font-family: 'Noto Sans JP', sans-serif;
    border: 2px solid #e0e4e8;
    border-radius: 10px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.ksov-kanji-input:focus {
    border-color: var(--ksov-primary);
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.12);
}

.ksov-submit-btn {
    flex: 0 0 auto;
    padding: clamp(10px, 2.5vw, 12px) clamp(16px, 4vw, 24px);
    background: var(--ksov-accent);
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: clamp(14px, 2.6vw, 16px);
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    transition: background 0.2s, transform 0.15s;
}
.ksov-submit-btn:hover { background: #218838; transform: translateY(-1px); }

.ksov-result {
    background: #fff;
    padding: clamp(14px, 3vw, 20px);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    animation: fadeIn 0.4s ease-in;
}

/* Kanji character scales fluidly */
.ksov-kanji {
    font-size: clamp(40px, 12vw, 64px);
    font-family: 'Noto Sans JP', sans-serif;
    margin-bottom: 12px;
    color: #1a2a44;
    line-height: 1.1;
}

/* Responsive SVG box */
.ksov-svg {
    width: 100%;
    aspect-ratio: 1 / 1;           /* keep square area on all screens */
    margin-bottom: 16px;
    background: #f8fafc;
    border: 1px solid #e0e4e8;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}
.ksov-svg svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Stroke animation */
.ksov-stroke {
    fill: none;
    stroke: #1a2a44;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 0.6s ease-in-out;
    vector-effect: non-scaling-stroke; /* keeps stroke consistent when scaling */
}
.ksov-animating .ksov-stroke { stroke-dashoffset: 0; }

/* Info text scales and wraps nicely */
.ksov-info {
    text-align: left;
    font-size: clamp(14px, 2.6vw, 16px);
    color: var(--ksov-text);
    font-family: 'Roboto', sans-serif;
    word-break: break-word;
}
.ksov-info p { margin: 8px 0; }
.ksov-info strong { color: #1a2a44; font-weight: 600; }

.ksov-animate-btn {
    display: inline-block;
    padding: clamp(10px, 2.5vw, 12px) clamp(16px, 4vw, 24px);
    background: var(--ksov-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: clamp(14px, 2.6vw, 16px);
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    margin-top: 12px;
    transition: background 0.2s, transform 0.15s;
}
.ksov-animate-btn:hover { background: #0056b3; transform: translateY(-1px); }

.ksov-error, .ksov-loading {
    text-align: center;
    padding: 12px;
    border-radius: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: clamp(14px, 2.6vw, 16px);
    margin-bottom: 16px;
}
.ksov-error { color: #d32f2f; border: 2px solid #d32f2f; background: #fff5f5; }
.ksov-loading { color: #1a2a44; background: #f1f5f9; border: 1px solid #e2e8f0; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Breakpoint refinements */
@media (max-width: 480px) {
    .ksov-input-form { gap: 8px; }
    .ksov-submit-btn { width: 100%; }
}