/* ============ THEME ============ */
:root{
  --bg:#0d1215;
  --bg2:#121a1f;
  --panel:#16212a;
  --panel2:#1c2933;
  --line:rgba(255,255,255,.08);
  --text:#eef1f4;
  --dim:#93a1ad;
  --accent:#e8b878;
  --accent2:#7fc8bd;
  --danger:#eb6e6e;
  --hand:#d9a06b;
  --muscle:#2a3841;
  --muscle2:#232f38;
  --safe:rgba(232,184,120,.16);
  --radius:18px;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ============ SCREENS ============ */
.screen{
  position:fixed;inset:0;
  display:flex;flex-direction:column;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(232,184,120,.06), transparent 60%),
    radial-gradient(90% 50% at 50% 110%, rgba(127,200,189,.05), transparent 60%),
    var(--bg);
}

/* ============ START / COMPLETE ============ */
.start-wrap{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:24px 22px calc(24px + var(--safe-b));
  overflow-y:auto;
}
.start-badge{
  font-size:11px;letter-spacing:.34em;color:var(--accent);
  border:1px solid rgba(232,184,120,.35);border-radius:999px;
  padding:7px 16px 6px;margin-bottom:26px;
}
.start-title{
  font-size:clamp(30px,8.5vw,46px);font-weight:700;line-height:1.14;letter-spacing:.01em;
}
.start-sub{margin-top:12px;color:var(--dim);font-size:15px;letter-spacing:.04em}
.start-silhouette{width:min(340px,86vw);margin:26px 0 30px}
.breathe-dot{animation:breathe 4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.25);opacity:.12}}
.start-splits{margin-top:14px;color:var(--dim);font-size:13px;letter-spacing:.12em}
.start-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.safety-notice{
  margin-top:26px;max-width:340px;font-size:11.5px;line-height:1.55;color:var(--dim);
  opacity:.75;border-top:1px solid var(--line);padding-top:16px;
}

/* ============ BUTTONS ============ */
.btn{
  min-height:54px;padding:0 22px;border-radius:16px;
  font-size:15px;font-weight:600;letter-spacing:.08em;
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .12s ease, background .2s ease, opacity .2s;
  user-select:none;-webkit-user-select:none;
}
.btn:active{transform:scale(.96)}
.btn-primary{
  background:linear-gradient(180deg,#f0c68c,#d9a35f);
  color:#1c130a;
  box-shadow:0 6px 22px rgba(232,184,120,.22);
}
.btn-start{width:min(320px,86vw);min-height:64px;font-size:18px;border-radius:20px}
.btn-ghost{border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text)}
.btn-ctrl{flex:1;min-height:64px;background:var(--panel2);border:1px solid var(--line);font-size:14px}
.btn-pause{flex:1.3;min-height:64px;font-size:16px}
.btn-pause.paused{background:linear-gradient(180deg,#8fd9cf,#5fb3a7);color:#0c1a17}
.btn-sub{flex:1;min-height:46px;border-radius:13px;background:rgba(255,255,255,.045);border:1px solid var(--line);font-size:12px;letter-spacing:.06em;color:var(--dim)}
.btn-sub:active{color:var(--text)}

/* ============ SESSION TOP BAR ============ */
.topbar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:calc(12px + env(safe-area-inset-top)) 14px 8px;gap:8px;
}
.tb-left{font-size:10.5px;letter-spacing:.14em;color:var(--dim);text-align:left;line-height:1.4}
.tb-timer{
  font-size:clamp(24px,7vw,34px);font-weight:800;font-variant-numeric:tabular-nums;
  letter-spacing:.02em;line-height:1.15;color:var(--accent);
  text-shadow:0 1px 10px rgba(232,184,120,.25);
}
.tb-right{font-size:13px;color:var(--dim);text-align:right;font-variant-numeric:tabular-nums;letter-spacing:.06em}
.seg-track{
  position:relative;height:4px;background:rgba(255,255,255,.08);
  margin:0 14px;border-radius:99px;overflow:hidden;
}
.seg-fill{
  height:100%;width:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--accent),#f4d6a2);
  transition:width .3s linear;
}
.progress-wrap{ margin:7px 14px 2px; }
.progress-track{
  position:relative;height:4px;background:rgba(255,255,255,.08);border-radius:99px;overflow:visible;
}
.progress-fill{
  height:100%;width:0%;border-radius:99px;
  background:linear-gradient(90deg,var(--accent2),var(--accent));
  transition:width .4s linear;
}
.phase-mark{position:absolute;top:-3px;width:2px;height:10px;background:rgba(255,255,255,.35);border-radius:2px}
.dots{ display:flex;flex-wrap:wrap;gap:3px 4px;justify-content:center;margin-top:8px; }
.dot{
  width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.16);
  transition:background .35s,transform .35s,box-shadow .35s;
}
.dot.done{ background:var(--accent); }
.dot.current{ background:#f4d6a2;transform:scale(1.45);box-shadow:0 0 8px rgba(232,184,120,.7); }

/* ============ DIAGRAM AREA ============ */
.diagram-area{
  flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:4px 12px 0;
}
.diagram-svg{
  width:min(92vw,500px);
  background:linear-gradient(180deg,var(--bg2),rgba(18,26,31,.4));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:8px;
}
.diagram-svg svg{width:100%;height:auto;max-height:min(40vh,380px);display:block}
.diagram-caption{
  margin-top:8px;font-size:11px;letter-spacing:.22em;color:var(--dim);text-transform:uppercase;
  min-height:16px;text-align:center;
}

/* ============ INFO CARD ============ */
.info-card{
  background:linear-gradient(180deg,var(--panel),var(--bg2));
  border-top:1px solid var(--line);
  padding:10px 16px calc(6px + var(--safe-b));
}
.info-region{font-size:10.5px;letter-spacing:.26em;color:var(--accent2);margin-bottom:3px}
.info-title{font-size:clamp(19px,5.5vw,24px);font-weight:700;letter-spacing:.01em}
.info-instr{margin-top:5px;font-size:13px;line-height:1.45;color:var(--dim);max-width:52ch}
.info-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;
}
.info-cell{
  background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:12px;
  padding:8px 10px;display:flex;flex-direction:column;gap:3px;
}
.cell-label{font-size:9px;letter-spacing:.2em;color:var(--dim)}
.cell-value{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.info-next{margin-top:10px;font-size:11.5px;color:var(--dim);letter-spacing:.06em}
.info-next b{color:var(--text);font-weight:600}
.info-safety{
  margin-top:10px;font-size:11.5px;line-height:1.45;color:#e7a6a6;
  background:rgba(235,110,110,.08);border:1px solid rgba(235,110,110,.25);
  border-radius:10px;padding:8px 10px;
}

/* ============ CONTROLS ============ */
.controls{padding:10px 12px calc(12px + var(--safe-b))}
.ctrl-row{display:flex;gap:10px}
.ctrl-row-sub{margin-top:8px}

/* ============ OVERLAYS ============ */
.overlay{
  position:fixed;inset:0;z-index:50;
  background:rgba(8,11,13,.82);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.ov-card{
  width:min(400px,94vw);max-height:92vh;overflow-y:auto;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:22px;
  padding:26px 22px calc(22px + var(--safe-b));
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.ov-kicker{font-size:11px;letter-spacing:.34em;color:var(--accent)}
.ov-text{font-size:14px;line-height:1.6;color:var(--dim);max-width:36ch}
.ov-big{font-size:52px;font-weight:700;font-variant-numeric:tabular-nums}
.ov-big-title{font-size:30px;font-weight:700;letter-spacing:.06em}
.ov-hint{font-size:11px;letter-spacing:.2em;color:var(--dim);opacity:.7;margin-top:8px}
.ov-diagram{width:min(300px,80vw)}
.ov-diagram svg{width:100%;height:auto;display:block}
.overlay-phase{background:rgba(8,11,13,.92)}
.overlay-phase .ov-card{background:transparent;border:none;box-shadow:none}

/* ============ SETTINGS ============ */
.settings-card{text-align:left}
.settings-card .ov-kicker{text-align:center}
.setting-row{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:13px 4px;border-bottom:1px solid var(--line);
  font-size:14.5px;
}
.toggle{
  min-width:64px;min-height:40px;padding:0 14px;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.1em;
  background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--dim);
}
.toggle.on{background:rgba(232,184,120,.18);border-color:rgba(232,184,120,.5);color:var(--accent)}

/* ============ COMPLETE ============ */
.complete-ring{
  width:84px;height:84px;border-radius:50%;
  border:2px solid rgba(127,200,189,.6);
  display:flex;align-items:center;justify-content:center;
  font-size:34px;color:var(--accent2);
  animation:ringpop 1.2s cubic-bezier(.2,.9,.3,1.4) both;
  margin-bottom:10px;
}
@keyframes ringpop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
.complete-time{font-size:15px;letter-spacing:.3em;color:var(--dim);margin-bottom:14px}
.complete-note{font-size:13px;color:var(--dim);margin-top:14px;max-width:34ch;line-height:1.55}

/* ============ SVG VISUAL LANGUAGE ============ */
.z-body{fill:var(--muscle2);stroke:rgba(255,255,255,.14);stroke-width:1.5}
.z-muscle{fill:var(--muscle);stroke:rgba(255,255,255,.10);stroke-width:1}
.z-hl{fill:var(--safe);stroke:var(--accent);stroke-width:1.5;filter:url(#soft)}
.z-hl-core{fill:rgba(232,184,120,.30);stroke:var(--accent);stroke-width:1.5}
.z-bone{fill:none;stroke:rgba(255,255,255,.4);stroke-width:3;stroke-linecap:round}
.z-nozone{fill:url(#nozone);stroke:rgba(235,110,110,.4);stroke-width:1}
.z-sheet{fill:rgba(232,184,120,.06);stroke:rgba(232,184,120,.2);stroke-width:1}
.z-line{fill:none;stroke:rgba(255,255,255,.18);stroke-width:1.2}
.z-label{fill:var(--dim);font-size:9px;letter-spacing:.14em;font-family:inherit}
.z-badge{fill:var(--accent);font-size:13px;font-weight:700;font-family:inherit}
.z-badge-bg{fill:rgba(232,184,120,.12);stroke:rgba(232,184,120,.4)}

/* hands & arrows */
.h-hand{fill:var(--hand);opacity:.92}
.h-palm{fill:var(--hand);opacity:.85}
.h-thumb{fill:var(--hand)}
.a-arrow{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round}
.a-arrow-soft{fill:none;stroke:rgba(255,255,255,.75);stroke-width:2.5;stroke-linecap:round}
.a-arc{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round}
.a-path{fill:none;stroke:var(--accent2);stroke-width:3;stroke-linecap:round}
.a-halo{fill:none;stroke:var(--accent2);stroke-width:2}
.a-dot{fill:var(--hand)}

/* ============ ANIMATIONS ============ */
.anim-stroke{animation:animStroke var(--spd,3.2s) ease-in-out infinite;transform-box:fill-box}
@keyframes animStroke{
  0%{transform:translate(0,0);opacity:0}
  12%{opacity:1}
  82%{opacity:1}
  100%{transform:translate(var(--dx,0),var(--dy,-120px));opacity:0}
}
.anim-press{animation:animPress var(--spd,1.6s) ease-in-out infinite;transform-box:fill-box}
@keyframes animPress{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}
.anim-knead{animation:animKnead var(--spd,1.5s) ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes animKnead{0%,100%{transform:scale(1)}50%{transform:scale(.8)}}
.anim-orbit{animation:animOrbit var(--spd,2.2s) linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes animOrbit{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.anim-halo{animation:animHalo var(--spd,2.6s) ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes animHalo{0%{transform:scale(.55);opacity:.75}100%{transform:scale(1.7);opacity:0}}
.anim-dash{stroke-dasharray:10 12;animation:animDash 1.4s linear infinite}
@keyframes animDash{to{stroke-dashoffset:-44}}
.anim-feather{animation:animFeather var(--spd,3.6s) ease-in-out infinite;transform-box:fill-box}
@keyframes animFeather{
  0%{transform:translate(0,0);opacity:0}
  15%{opacity:.8}
  80%{opacity:.8}
  100%{transform:translate(var(--dx,0),var(--dy,110px));opacity:0}
}
.anim-breathe{animation:animBreathe 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes animBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.anim-fadein{animation:fadein .5s ease both}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* reduced motion */
body.reduced-motion .anim-stroke,
body.reduced-motion .anim-press,
body.reduced-motion .anim-knead,
body.reduced-motion .anim-orbit,
body.reduced-motion .anim-halo,
body.reduced-motion .anim-dash,
body.reduced-motion .anim-feather,
body.reduced-motion .anim-breathe,
body.reduced-motion .breathe-dot{
  animation:none !important;opacity:.9;
}

/* ============ LANDSCAPE ============ */
@media (orientation:landscape) and (max-height:520px){
  #screen-session{flex-direction:row}
  .topbar{grid-template-columns:auto auto 1fr;width:auto;padding:10px 16px;align-items:center}
  .progress-track{width:180px;margin:0 12px}
  .diagram-area{flex:1.4;padding:8px 8px}
  .diagram-svg{width:100%;max-height:100%}
  .info-card{
    width:300px;max-width:34vw;border-top:none;border-left:1px solid var(--line);
    display:flex;flex-direction:column;overflow-y:auto;padding-bottom:8px;
  }
  .info-grid{grid-template-columns:1fr 1fr}
  .controls{width:210px;max-width:24vw;border-left:1px solid var(--line);padding:10px}
  .ctrl-row{flex-direction:column}
  .ctrl-row-sub{flex-direction:row;flex-wrap:wrap}
  .btn-sub{min-height:40px;font-size:10.5px}
}

/* ============ SMALL PHONES ============ */
@media (max-width:340px){
  .btn-sub{font-size:10.5px;letter-spacing:.03em}
  .tb-left{font-size:9px}
}