/* ==========================================================================
   루리와 한 달의 여름방학
   전연령 성장 시뮬레이션용 공통 UI
   ========================================================================== */

:root {
    --ink: #213447;
    --ink-soft: #5f7386;
    --panel: rgba(247, 251, 255, 0.93);
    --panel-dark: rgba(17, 31, 45, 0.92);
    --line: rgba(111, 164, 195, 0.42);
    --blue: #58b7df;
    --blue-deep: #2b82b6;
    --pink: #ef8fab;
    --gold: #e7b55a;
    --danger: #d96872;
    --shadow: 0 18px 44px rgba(15, 34, 52, 0.28);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--ink);
    background: #070b10;
    font-family:
        "Malgun Gothic",
        "Yu Gothic UI",
        "Meiryo",
        system-ui,
        sans-serif;
}

button,
input,
select {
    font: inherit;
}

button {
    border: 0;
}

#game-container {
    position: relative;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    background: #101923;
    transform-origin: center center;
    transition: transform 0.1s ease-out;
}

/* ==========================================================================
   타이틀
   ========================================================================== */

#title-screen {
    position: absolute;
    inset: 0;
    z-index: 200;
    overflow: hidden;
    background: #edf7fc;
}

.title-background-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.title-background-layer img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.title-background-layer::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(248, 253, 255, 0.58) 0%,
            rgba(248, 253, 255, 0.25) 35%,
            rgba(248, 253, 255, 0.02) 65%
        );
}

.title-particle-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.title-particle-layer::before,
.title-particle-layer::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.42;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.96) 0 2px, transparent 3px),
        radial-gradient(circle, rgba(181, 232, 252, 0.82) 0 1px, transparent 2px);
    background-position: 11% 18%, 73% 28%;
    background-size: 150px 150px, 105px 105px;
    animation: title-twinkle 4.5s ease-in-out infinite alternate;
}

.title-particle-layer::after {
    opacity: 0.24;
    transform: scale(1.25);
    animation-delay: -2s;
}

@keyframes title-twinkle {
    from {
        opacity: 0.18;
        transform: translateY(0);
    }

    to {
        opacity: 0.52;
        transform: translateY(-8px);
    }
}

.title-ui-panel {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    width: 690px;
    height: 100%;
    padding: 112px 95px 58px;
    background:
        linear-gradient(
            90deg,
            rgba(244, 251, 254, 0.94),
            rgba(244, 251, 254, 0.74) 72%,
            transparent
        );
}

.title-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 520px;
    min-height: 230px;
    margin-bottom: 34px;
}

#title-logo-image {
    display: block;
    max-width: 100%;
    max-height: 230px;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(64, 99, 118, 0.2));
}

#title-menu {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 430px;
    margin: 0 auto;
}

.title-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 67px;
    padding: 0 58px 0 32px;
    overflow: hidden;
    color: #314252;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.97),
            rgba(234, 248, 253, 0.94)
        );
    border: 3px solid rgba(87, 184, 222, 0.72);
    border-radius: 999px;
    box-shadow:
        0 9px 20px rgba(56, 117, 145, 0.14),
        inset 0 1px 0 #fff;
    cursor: pointer;
    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease;
}

.title-btn:hover {
    transform: translateX(8px);
    border-color: var(--pink);
    box-shadow:
        0 12px 28px rgba(86, 129, 151, 0.22),
        0 0 0 5px rgba(238, 142, 171, 0.1);
}

.title-btn-label {
    font-size: 23px;
    font-weight: 900;
    letter-spacing: 0.045em;
}

.title-btn-arrow {
    position: absolute;
    right: 25px;
    color: var(--blue-deep);
    font-size: 34px;
    line-height: 1;
}

.title-btn-primary,
.title-btn-plus {
    background:
        linear-gradient(
            180deg,
            rgba(214, 247, 255, 0.98),
            rgba(178, 232, 248, 0.96)
        );
}

.title-btn-plus {
    border-color: rgba(176, 141, 231, 0.76);
}

.title-btn-exit {
    margin-top: 6px;
}

.title-footer {
    margin-top: auto;
    color: rgba(51, 77, 94, 0.62);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
}

/* ==========================================================================
   배경·캐릭터·전환
   ========================================================================== */

#background-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-position: center;
    background-size: cover;
    opacity: 1;
    transition: opacity 0.18s ease-in-out;
}

#background-layer.is-changing {
    opacity: 0;
}

#character-layer {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
    pointer-events: none;
}

#character-sprite {
    display: block;
    max-width: 1180px;
    height: 1110px;
    object-fit: contain;
    object-position: center bottom;
    transform: translateY(255px);
    opacity: 1;
    filter: drop-shadow(0 16px 24px rgba(19, 30, 41, 0.22));
    cursor: pointer;
    pointer-events: auto;
    transition: opacity 0.12s ease-in-out;
}

#character-sprite.is-changing {
    opacity: 0;
}

#hud-daily-request {
    position: absolute;
    top: 80px;
    left: 56%;
    width: 410px;
    padding: 26px 34px;
    color: #674326;
    background: rgba(255, 250, 237, 0.96);
    border: 4px solid #e4b776;
    border-radius: 52% 48% 48% 52% / 45% 48% 52% 55%;
    box-shadow:
        0 12px 28px rgba(56, 38, 24, 0.2),
        inset 0 0 0 5px rgba(255, 255, 255, 0.74);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.45;
    text-align: center;
    transform: translateX(-50%);
    pointer-events: none;
}

/* ==========================================================================
   HUD
   ========================================================================== */

#hud-layer {
    position: absolute;
    top: 28px;
    left: 32px;
    z-index: 10;
    width: 560px;
    color: #edf7fd;
    font-weight: 700;
    pointer-events: none;
}

.hud-primary-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1.45fr;
    gap: 9px;
    margin-bottom: 9px;
}

.hud-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 48px;
    padding: 0 14px;
    color: #f2f8fc;
    background:
        linear-gradient(
            145deg,
            rgba(31, 51, 70, 0.94),
            rgba(14, 27, 41, 0.94)
        );
    border: 1px solid rgba(129, 196, 225, 0.42);
    border-radius: 13px;
    box-shadow:
        0 9px 20px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

#hud-day {
    color: #c9effc;
    cursor: default;
    pointer-events: auto;
}

#hud-time {
    color: #ffe2a4;
}

#hud-money {
    color: #b4f2d9;
}

.hud-secondary-row {
    margin-bottom: 9px;
}

#hud-stamina {
    padding: 12px 15px 13px;
    color: #eaf7fd;
    background:
        linear-gradient(
            145deg,
            rgba(27, 48, 65, 0.94),
            rgba(13, 28, 40, 0.94)
        );
    border: 1px solid rgba(112, 190, 224, 0.42);
    border-radius: 13px;
    box-shadow:
        0 9px 20px rgba(0, 0, 0, 0.23),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.hud-stamina-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 15px;
}

#hud-stamina-track,
.clean-stat-track {
    width: 100%;
    height: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
}

#hud-stamina-fill,
.clean-stat-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    transition: width 0.25s ease;
}

#hud-stamina-fill {
    background: linear-gradient(90deg, #80dcae, #57b8d8);
}

.stats-flex-container,
.dev-stats-flex-container {
    display: grid;
    gap: 7px;
}

.stats-flex-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 8px;
}

.dev-stats-flex-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
}

.dev-stats-flex-container.is-collapsed {
    display: none;
}

.clean-stat-card {
    min-width: 0;
    padding: 10px 12px;
    color: #dceaf3;
    background: var(--panel-dark);
    border: 1px solid rgba(162, 204, 225, 0.27);
    border-left: 4px solid var(--blue);
    border-radius: 11px;
    box-shadow:
        0 7px 15px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.clean-stat-love {
    border-left-color: var(--pink);
}

.clean-stat-anger {
    border-left-color: var(--danger);
}

.clean-stat-skill_cooking {
    border-left-color: #e7ad59;
}

.clean-stat-skill_study {
    border-left-color: #76b9e8;
}

.clean-stat-skill_sports {
    border-left-color: #77d1a1;
}

.clean-stat-skill_craft {
    border-left-color: #c6a2e8;
}

.clean-stat-skill_confidence {
    border-left-color: #f18eae;
}

.clean-stat-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    font-size: 13px;
    white-space: nowrap;
}

.clean-stat-card-head strong {
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.clean-stat-fill {
    background: linear-gradient(90deg, #68bce0, #9adcf0);
}

.clean-stat-love .clean-stat-fill {
    background: linear-gradient(90deg, #e77d9f, #f3aac1);
}

.clean-stat-anger .clean-stat-fill {
    background: linear-gradient(90deg, #cf5966, #e98b91);
}

#hud-growth-toggle {
    width: 100%;
    min-height: 34px;
    margin-bottom: 7px;
    color: #edf6fb;
    background: rgba(21, 39, 55, 0.93);
    border: 1px solid rgba(144, 195, 219, 0.33);
    border-radius: 9px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    pointer-events: auto;
}

#hud-growth-toggle:hover {
    background: rgba(38, 67, 88, 0.96);
}

/* ==========================================================================
   우측 메뉴
   ========================================================================== */

#system-menu {
    position: absolute;
    top: 28px;
    right: 32px;
    z-index: 12;
    display: flex;
    gap: 3px;
    padding: 7px;
    background: rgba(14, 26, 39, 0.92);
    border: 1px solid rgba(131, 185, 210, 0.34);
    border-radius: 13px;
    box-shadow: var(--shadow);
}

#system-menu button {
    min-height: 37px;
    padding: 0 15px;
    color: #e7f1f7;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    transition:
        color 0.16s ease,
        background 0.16s ease;
}

#system-menu button:hover {
    color: #fff;
    background: rgba(91, 176, 216, 0.18);
}

#debug-menu-btn[hidden] {
    display: none !important;
}

/* ==========================================================================
   대사창·선택지
   ========================================================================== */

#message-window {
    position: absolute;
    right: 80px;
    bottom: 44px;
    left: 80px;
    z-index: 30;
    min-height: 220px;
    padding: 60px 70px 38px;
    color: #edf6fc;
    background:
        linear-gradient(
            145deg,
            rgba(20, 35, 51, 0.96),
            rgba(8, 17, 28, 0.96)
        );
    border: 2px solid rgba(98, 185, 227, 0.64);
    border-radius: 24px;
    box-shadow:
        0 23px 54px rgba(0, 0, 0, 0.44),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    cursor: pointer;
}

#speaker-name {
    position: absolute;
    top: 18px;
    left: 68px;
    color: #98dcf7;
    font-size: 24px;
    font-weight: 900;
}

#message-text {
    font-size: 25px;
    font-weight: 600;
    line-height: 1.78;
    white-space: pre-wrap;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

#text-next-pointer {
    position: absolute;
    right: 35px;
    bottom: 23px;
    color: #8fd8f4;
    font-size: 21px;
    animation: pointer-bob 0.9s ease-in-out infinite alternate;
}

@keyframes pointer-bob {
    to {
        transform: translateY(6px);
    }
}

#hide-ui-btn {
    position: absolute;
    top: 17px;
    right: 24px;
    padding: 8px 13px;
    color: #cfe8f4;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(181, 216, 232, 0.22);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
}

#choice-container {
    position: absolute;
    top: 235px;
    right: 70px;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 610px;
    pointer-events: none;
}

.growth-menu-title {
    grid-column: 1 / -1;
    padding: 12px 18px;
    color: #f7fbff;
    background: rgba(8, 23, 36, 0.92);
    border: 1px solid rgba(105, 191, 230, 0.42);
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.24);
    font-size: 18px;
    font-weight: 900;
    pointer-events: auto;
}

.scenario-choice-btn {
    min-height: 67px;
    padding: 12px 18px;
    color: #e9f5fb;
    background:
        linear-gradient(
            145deg,
            rgba(30, 54, 75, 0.96),
            rgba(15, 31, 47, 0.96)
        );
    border: 1px solid rgba(105, 191, 230, 0.56);
    border-radius: 15px;
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    cursor: pointer;
    font-size: 18px;
    font-weight: 900;
    pointer-events: auto;
    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        background 0.15s ease;
}

.growth-action-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;
    text-align: left;
}

.growth-action-btn small {
    color: #9fc4d6;
    font-size: 12px;
    font-weight: 700;
}

.scenario-choice-btn:disabled {
    color: #778b96;
    background: rgba(18, 29, 39, 0.9);
    border-color: rgba(125, 147, 158, 0.28);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.scenario-choice-btn:disabled small {
    color: #c98282;
}

.growth-menu-control {
    min-height: 54px;
}

.city-control {
    border-color: rgba(239, 179, 89, 0.72);
}

.phase-control {
    border-color: rgba(143, 216, 244, 0.72);
}

.scenario-choice-btn:hover {
    transform: translateY(-3px);
    background:
        linear-gradient(
            145deg,
            rgba(49, 87, 114, 0.98),
            rgba(22, 47, 68, 0.98)
        );
    border-color: rgba(238, 143, 174, 0.8);
}

.scenario-choice-btn:disabled:hover {
    transform: none;
    background: rgba(18, 29, 39, 0.9);
    border-color: rgba(125, 147, 158, 0.28);
}

/* ==========================================================================
   모달
   ========================================================================== */

#modal-layer {
    position: absolute;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 38px;
    background: rgba(3, 9, 15, 0.72);
    backdrop-filter: blur(8px);
}

#modal-content {
    position: relative;
    width: min(1180px, calc(100% - 80px));
    max-height: 930px;
    padding: 42px 46px 46px;
    overflow: hidden;
    color: #eaf5fb;
    background:
        linear-gradient(
            145deg,
            rgba(25, 40, 57, 0.99),
            rgba(9, 20, 31, 0.99)
        );
    border: 1px solid rgba(104, 188, 226, 0.58);
    border-radius: 22px;
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.54),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#modal-title {
    margin: 0 46px 25px 0;
    padding-bottom: 17px;
    color: #f5fbff;
    border-bottom: 1px solid rgba(143, 194, 220, 0.25);
    font-size: 31px;
    font-weight: 900;
}

#modal-body {
    display: block;
    max-height: 745px;
    padding-right: 12px;
    overflow-x: hidden;
    overflow-y: auto;
    font-size: 17px;
    line-height: 1.65;
}

#modal-body::-webkit-scrollbar {
    width: 10px;
}

#modal-body::-webkit-scrollbar-thumb {
    background: rgba(106, 183, 219, 0.5);
    border-radius: 999px;
}

.modal-x-btn {
    position: absolute;
    top: 27px;
    right: 29px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: #d9ebf4;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(183, 216, 231, 0.24);
    border-radius: 12px;
    cursor: pointer;
    font-size: 27px;
    line-height: 1;
}

.modal-x-btn:hover {
    color: #fff;
    background: rgba(224, 101, 120, 0.24);
}

.clean-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.clean-modal-actions button,
.clean-system-menu-grid button,
.clean-save-slot {
    min-height: 48px;
    padding: 10px 18px;
    color: #eaf6fb;
    background: rgba(61, 116, 151, 0.26);
    border: 1px solid rgba(117, 194, 229, 0.38);
    border-radius: 10px;
    cursor: pointer;
    font-weight: 800;
}

.clean-modal-actions button:hover,
.clean-system-menu-grid button:hover,
.clean-save-slot:hover {
    background: rgba(74, 150, 194, 0.38);
    border-color: rgba(148, 218, 247, 0.68);
}

.clean-form-stack,
.clean-settings-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.clean-form-stack label,
.clean-settings-stack label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-weight: 800;
}

.clean-form-stack input,
.clean-settings-stack input,
.clean-settings-stack select,
.clean-debug-field input {
    width: 100%;
    min-height: 48px;
    padding: 9px 13px;
    color: #f4faff;
    background: rgba(4, 13, 22, 0.5);
    border: 1px solid rgba(130, 192, 221, 0.36);
    border-radius: 9px;
    outline: none;
}

.clean-form-hint {
    color: #a9c1d0;
    font-size: 14px;
}

.clean-form-error {
    min-height: 24px;
    color: #ff9baa;
    font-weight: 800;
}

.clean-status-section + .clean-status-section {
    margin-top: 24px;
}

.clean-status-section h3,
.clean-help-grid h3 {
    margin-bottom: 11px;
    color: #9cddf6;
    font-size: 20px;
}

.clean-status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.clean-log-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.clean-log-row {
    padding: 14px 17px;
    background: rgba(255, 255, 255, 0.045);
    border-left: 3px solid var(--blue);
    border-radius: 8px;
}

.clean-log-row strong {
    display: block;
    margin-bottom: 5px;
    color: #9fdcf4;
}

.clean-log-row p {
    white-space: pre-wrap;
}

.clean-system-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.clean-help-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.clean-help-grid section {
    padding: 18px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(153, 201, 222, 0.17);
    border-radius: 11px;
}

.clean-save-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.clean-save-slot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    text-align: left;
}

.clean-save-slot span {
    color: #afc6d4;
    font-size: 14px;
}

.clean-save-slot:disabled {
    cursor: default;
    opacity: 0.48;
}

.clean-settings-stack input[type="range"] {
    min-height: 28px;
    padding: 0;
}

.clean-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.clean-gallery-card {
    min-height: 150px;
    overflow: hidden;
    color: #a8bdc9;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(148, 199, 222, 0.2);
    border-radius: 10px;
}

.clean-gallery-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.clean-gallery-viewer img {
    display: block;
    max-width: 100%;
    max-height: 690px;
    margin: auto;
    object-fit: contain;
}

.clean-debug-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.clean-debug-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.clean-debug-issues {
    padding-left: 24px;
}

/* ==========================================================================
   UI 숨김
   ========================================================================== */

#ui-restore-layer {
    position: absolute;
    inset: 0;
    z-index: 9999;
    cursor: pointer;
}

#game-container.ui-hidden #hud-layer,
#game-container.ui-hidden #system-menu,
#game-container.ui-hidden #message-window,
#game-container.ui-hidden #choice-container,
#game-container.ui-hidden #hud-daily-request {
    visibility: hidden !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}