/* Болтик · тренажёр часов — стили экрана.

   Геометрию циферблата рисует assets/clock.js (общий с печатью, см. worksheets/print.css) —
   здесь только цвет и размер: на экране можно позволить себе фирменные цвета сайта,
   на бумаге такого не было (там правило — линией, не заливкой, ради чёрно-белой печати). */

body{display:flex;flex-direction:column;min-height:100vh}

.practice-shell{
    flex:1;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:28px 16px 48px;
}

.practice-card{width:100%;max-width:420px;text-align:center}
.practice-card .field-row{text-align:left}

.practice-progress{
    font-size:13px;font-weight:700;color:var(--ink-2);
    margin:16px 0 4px;
}

.clock-stage{display:flex;justify-content:center;margin:8px 0 4px}
.face-holder{width:220px;height:220px}
.face-holder .clockface{width:100%;height:100%;display:block}

.clockface .cf-face{fill:var(--cream);stroke:var(--ink);stroke-width:2.5}
.clockface .cf-tick{stroke:var(--ink);stroke-width:1.3;opacity:.5}
.clockface .cf-tick.big{stroke:var(--ink);stroke-width:2.3;opacity:1}
.clockface .cf-hand{stroke:var(--ink);stroke-linecap:round}
.clockface .cf-hand.hour{stroke-width:5}
.clockface .cf-hand.min{stroke-width:3}
.clockface .cf-hub{fill:var(--copper)}
.clockface .cf-num{fill:var(--ink);font-weight:700;font-family:inherit}

.practice-feedback{
    min-height:22px;
    font-size:14px;font-weight:700;
    color:var(--ink-2);
    margin:10px 0 4px;
}
.practice-feedback.ok{color:var(--green)}
.practice-feedback.bad{color:var(--copper-d)}

.practice-opts{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:8px;
}
.pbtn{
    font-family:inherit;
    font-size:18px;font-weight:700;
    padding:14px 8px;
    background:var(--cream);
    color:var(--ink);
    border:2px solid var(--ink);
    border-radius:12px;
    cursor:pointer;
    box-shadow:0 3px 0 var(--ink);
    transition:transform .08s,background .15s;
}
.pbtn:hover{transform:translateY(-2px)}
.pbtn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.pbtn.ok{background:var(--green);color:#fff;border-color:var(--green)}
.pbtn.bad{background:#f6b8a3;border-color:var(--copper-d)}

#summary h2{
    font-family:'Press Start 2P',monospace;
    font-size:16px;color:var(--copper-d);
    margin-bottom:14px;
}
#summary p{font-size:15px;margin-bottom:18px;color:var(--ink-2)}

@media (max-width:480px){
    .face-holder{width:180px;height:180px}
    .practice-opts{grid-template-columns:1fr 1fr}
}