/* ═══════════════════════════════════════════════════
   HOME SCREEN — Tabs, Stats, How to Play
   ═══════════════════════════════════════════════════ */

.home{
    position:fixed;inset:0;background:var(--bg);
    display:flex;align-items:center;justify-content:center;padding:var(--sp-4);z-index:100;
    overflow:hidden;
}
.home.hidden{display:none}

.home-waves{
    position:absolute;top:0;left:0;width:100%;height:100%;
    pointer-events:none;z-index:0;
    opacity:0.35;
}

.home-card{
    background:var(--panel);border:1px solid var(--b2);border-radius:var(--r-lg);
    padding:var(--sp-6) var(--sp-6) var(--sp-4);max-width:480px;width:100%;box-shadow:var(--sh-lg);
    position:relative;z-index:1;
    max-height:calc(100vh - var(--sp-8));overflow-y:auto;
}

/* Brand */
.home-brand{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.home-title{font-size:var(--fs-xl);font-weight:800;letter-spacing:-0.02em}
.home-sub{font-size:var(--fs-xs);color:var(--text-3)}

/* Tabs */
.home-tabs{
    display:flex;gap:2px;background:var(--surface);border-radius:var(--r);padding:2px;
    margin-bottom:var(--sp-5);
}
.home-tab{
    flex:1;padding:var(--sp-2);border-radius:6px;font-size:var(--fs-sm);font-weight:600;
    color:var(--text-3);transition:all var(--dur) var(--ease);text-align:center;
}
.home-tab:hover{color:var(--text-2)}
.home-tab.active{background:var(--card);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,0.3)}

.tab-panel{display:none}
.tab-panel.active{display:block}

/* Fields */
.field{margin-bottom:var(--sp-4)}
.field-label{
    display:block;font-size:var(--fs-xs);font-weight:700;color:var(--text-3);
    text-transform:uppercase;letter-spacing:0.06em;margin-bottom:var(--sp-2);
}
.field-input{
    width:100%;padding:var(--sp-2) var(--sp-3);
    background:var(--surface);border:1px solid var(--b1);border-radius:var(--r);
    color:var(--text);font-family:var(--f-sans);font-size:var(--fs-md);font-weight:600;
    outline:none;transition:border-color var(--dur);
}
.field-input:focus{border-color:var(--green)}
.field-input::placeholder{color:var(--text-4)}

.field-row{display:flex;gap:var(--sp-2)}

/* Option buttons */
.opt-btn{
    flex:1;display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
    padding:var(--sp-3);background:var(--surface);border:1px solid var(--b1);
    border-radius:var(--r);font-size:var(--fs-sm);color:var(--text-3);
    transition:all var(--dur) var(--ease);
}
.opt-btn:hover{background:var(--surface-h)}
.opt-btn.selected{border-color:var(--green);color:var(--text);background:var(--green-bg)}

/* Difficulty */
.diff-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-2)}
.diff-btn{
    display:flex;align-items:center;gap:var(--sp-2);
    padding:var(--sp-2) var(--sp-3);background:var(--surface);border:1px solid var(--b1);
    border-radius:var(--r);font-size:var(--fs-sm);color:var(--text-3);
    transition:all var(--dur) var(--ease);
}
.diff-btn:hover{background:var(--surface-h)}
.diff-btn.selected{border-color:var(--green);color:var(--text);background:var(--green-bg)}
.diff-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* Sound toggle */
.sound-toggle{
    display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);
    background:var(--surface);border:1px solid var(--b1);border-radius:var(--r);
    font-size:var(--fs-sm);color:var(--text-2);transition:all var(--dur);
}
.sound-toggle:hover{background:var(--surface-h)}

/* Action buttons */
.home-actions{display:flex;gap:var(--sp-2);margin-top:var(--sp-5);flex-wrap:wrap}
.home-actions .play-btn{flex:1;min-width:120px}
.home-actions .quick-play-btn{flex:0 0 auto}
.home-actions .settings-btn{flex:0 0 auto}

.play-btn{
    flex:1;padding:var(--sp-3) var(--sp-6);
    background:var(--green);color:#fff;font-size:var(--fs-md);font-weight:700;
    border-radius:var(--r);display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
    transition:all var(--dur) var(--ease);box-shadow:0 2px 0 var(--green-d);
}
.play-btn:hover{background:var(--green-d);transform:translateY(-1px)}
.play-btn:active{transform:translateY(1px);box-shadow:none}

.quick-play-btn{
    padding:var(--sp-3) var(--sp-4);
    background:var(--surface);border:1px solid var(--b2);border-radius:var(--r);
    font-size:var(--fs-sm);font-weight:600;color:var(--text-2);
    display:flex;align-items:center;gap:var(--sp-1);
    transition:all var(--dur);
}
.quick-play-btn:hover{background:var(--surface-h);color:var(--text)}

/* ═══════ STATS TAB ═══════ */
.stats-grid{
    display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-2);
    margin-bottom:var(--sp-4);
}

.stat-card{
    background:var(--surface);border:1px solid var(--b1);border-radius:var(--r);
    padding:var(--sp-3);
}
.stat-value{font-family:var(--f-mono);font-size:var(--fs-xl);font-weight:800;color:var(--text);line-height:1.2}
.stat-label{font-size:var(--fs-2xs);font-weight:600;color:var(--text-4);text-transform:uppercase;letter-spacing:0.06em;margin-top:2px}

.stat-card.wide{grid-column:1/-1}
.stat-bar{display:flex;height:6px;border-radius:3px;overflow:hidden;margin-top:var(--sp-2);background:var(--bg)}
.stat-bar-fill{height:100%;transition:width 0.3s var(--ease)}
.stat-bar-fill.win{background:var(--green)}
.stat-bar-fill.loss{background:var(--red)}

.reset-stats-btn{
    width:100%;padding:var(--sp-2);font-size:var(--fs-xs);color:var(--text-4);
    border:1px solid var(--b1);border-radius:var(--r);transition:all var(--dur);
}
.reset-stats-btn:hover{color:var(--red);border-color:rgba(224,64,64,0.3)}

/* ═══════ HOW TO PLAY TAB ═══════ */
.howto{max-height:350px;overflow-y:auto;padding-right:var(--sp-2)}
.howto-s{margin-bottom:var(--sp-4)}
.howto-s h3{font-size:var(--fs-sm);font-weight:700;color:var(--green);margin-bottom:var(--sp-1)}
.howto-s p{font-size:var(--fs-sm);color:var(--text-2);line-height:1.6}
.howto-s strong{color:var(--text)}

.kb-grid{
    display:grid;grid-template-columns:auto 1fr;gap:var(--sp-1) var(--sp-3);
    font-size:var(--fs-xs);color:var(--text-3);margin-top:var(--sp-2);
}

/* Timer settings */
.timer-setting{
    display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
}
.field-input--sm{
    width:64px;text-align:center;padding:var(--sp-1) var(--sp-2);
    font-family:var(--f-mono);font-size:var(--fs-sm);
}
.timer-unit{font-size:var(--fs-xs);color:var(--text-3);min-width:52px}
.timer-preset,.move-preset{
    padding:var(--sp-1) var(--sp-2);font-size:var(--fs-2xs);font-weight:600;
    background:var(--surface);border:1px solid var(--b1);border-radius:var(--r-sm);
    color:var(--text-3);transition:all var(--dur);
}
.timer-preset:hover,.move-preset:hover{background:var(--surface-h);color:var(--text-2)}
.timer-preset.active,.move-preset.active{border-color:var(--green);color:var(--text);background:var(--green-bg)}
.field-hint{font-weight:400;color:var(--text-4);text-transform:none;letter-spacing:0}

/* Settings button */
.settings-btn{
    display:flex;align-items:center;justify-content:center;gap:var(--sp-1);
    padding:var(--sp-2);font-size:var(--fs-xs);font-weight:600;
    color:var(--text-3);border:1px solid var(--b1);border-radius:var(--r);
    transition:all var(--dur);
}
.settings-btn:hover{color:var(--text-2);border-color:var(--b2);background:var(--surface)}
.settings-btn svg{opacity:0.6}

/* Settings overlay */
.settings-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,0.6);
    display:none;align-items:center;justify-content:center;padding:var(--sp-4);z-index:200;
}
.settings-overlay.active{display:flex}

.settings-modal{
    background:var(--panel);border:1px solid var(--b2);border-radius:var(--r-lg);
    max-width:420px;width:100%;box-shadow:var(--sh-lg);
    max-height:calc(100vh - var(--sp-8));overflow-y:auto;
}
.settings-header{
    display:flex;justify-content:space-between;align-items:center;
    padding:var(--sp-4) var(--sp-4) var(--sp-2);
}
.settings-title{font-size:var(--fs-lg);font-weight:700;color:var(--text)}
.settings-close{
    width:28px;height:28px;display:flex;align-items:center;justify-content:center;
    font-size:var(--fs-md);color:var(--text-3);border-radius:var(--r-sm);
    transition:all var(--dur);
}
.settings-close:hover{color:var(--text);background:var(--surface)}

.settings-body{padding:var(--sp-2) var(--sp-4) var(--sp-4)}

.setting-group{margin-bottom:var(--sp-4)}
.setting-group:last-child{margin-bottom:0}
.setting-label{
    display:block;font-size:var(--fs-2xs);font-weight:700;color:var(--text-3);
    text-transform:uppercase;letter-spacing:0.06em;margin-bottom:var(--sp-2);
}
.setting-row{display:flex;gap:var(--sp-2)}

/* Luck slider */
.luck-slider-wrap{
    display:flex;align-items:center;gap:var(--sp-2);
}
.luck-label-end{font-size:var(--fs-2xs);color:var(--text-4);white-space:nowrap}
.luck-slider{
    flex:1;-webkit-appearance:none;appearance:none;
    height:6px;background:var(--surface);border-radius:3px;outline:none;
}
.luck-slider::-webkit-slider-thumb{
    -webkit-appearance:none;width:18px;height:18px;border-radius:50%;
    background:var(--green);cursor:pointer;border:2px solid var(--bg);
}
.luck-slider::-moz-range-thumb{
    width:18px;height:18px;border-radius:50%;
    background:var(--green);cursor:pointer;border:2px solid var(--bg);
}
.luck-value{
    text-align:center;font-size:var(--fs-xs);color:var(--text-3);
    font-weight:600;margin-top:var(--sp-1);
}

/* Credit */
.home-credit{
    text-align:center;padding-top:var(--sp-4);margin-top:var(--sp-2);
    border-top:1px solid var(--b1);
    font-size:var(--fs-2xs);color:var(--text-4);
}
.home-credit a{color:var(--green);text-decoration:none;font-weight:600}
.home-credit a:hover{text-decoration:underline}

@media(max-width:500px){
    .home{padding:var(--sp-2)}
    .home-card{padding:var(--sp-4) var(--sp-3) var(--sp-3)}
    .home-title{font-size:var(--fs-lg)}
    .home-tabs{margin-bottom:var(--sp-3)}
    .home-tab{font-size:var(--fs-2xs);padding:var(--sp-1)}
    .field{margin-bottom:var(--sp-3)}
    .field-label{font-size:0.6rem}
    .diff-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-1)}
    .diff-btn{padding:var(--sp-1) var(--sp-2);font-size:var(--fs-2xs)}
    .opt-btn{padding:var(--sp-2);font-size:var(--fs-2xs)}
    .play-btn{padding:var(--sp-2) var(--sp-4);font-size:var(--fs-sm)}
    .howto{max-height:250px}
    .howto-s p{font-size:var(--fs-xs)}
}