@font-face{font-family:'Oswald';src:url('assets/fonts/oswald.woff2') format('woff2');font-weight:500 700;font-style:normal;font-display:swap}
@font-face{font-family:'Special Elite';src:url('assets/fonts/special-elite.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  --ink:#1c1b19;
  --stamp:#a3261e;
  --paper:#e8e2d3;
  --paper-dim:#ded6c4;
  --fog:#9aa6ab;
  --night:#0b0f14;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#07090c;color:var(--paper);font-family:'Special Elite','Courier New',monospace;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
body.touch{cursor:default}
#app{position:fixed;inset:0;overflow:hidden}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hidden{display:none!important}

#vignette{position:absolute;inset:0;pointer-events:none;z-index:5;background:radial-gradient(ellipse at 50% 48%,transparent 42%,rgba(5,7,9,.43) 100%);opacity:.8}
#nightTint{position:absolute;inset:0;pointer-events:none;z-index:5;background:radial-gradient(ellipse at 50% 45%,rgba(10,14,20,0) 30%,rgba(5,8,12,.55) 100%);opacity:0;transition:opacity 1.2s}
#damage{position:absolute;inset:0;pointer-events:none;z-index:8;background:radial-gradient(ellipse at 50% 50%,rgba(60,12,8,0) 30%,rgba(76,15,10,.68) 88%,rgba(44,7,5,.92) 100%);opacity:0;transition:opacity .22s}
#damage.on{opacity:1}
#breath{position:absolute;inset:0;pointer-events:none;z-index:6;opacity:0;transition:opacity 1.4s}
#breath i{position:absolute;bottom:10%;left:50%;width:34vw;height:20vh;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(214,221,224,.16),rgba(214,221,224,0) 68%);filter:blur(8px);animation:breathe 7s ease-in-out infinite}
#breath i:nth-child(2){left:44%;bottom:18%;width:26vw;height:15vh;animation-delay:-2.2s}
#breath i:nth-child(3){left:56%;bottom:6%;width:40vw;height:18vh;animation-delay:-4.6s}
@keyframes breathe{0%,100%{opacity:.16;transform:translateX(-50%) scale(.92)}45%{opacity:.4;transform:translateX(-50%) scale(1.06)}}

#hud{position:absolute;inset:0;pointer-events:none;z-index:20;opacity:0;transition:opacity 1.1s}
#hud.show{opacity:1}

#clock{position:absolute;top:max(10px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:170px;height:72px;z-index:22;opacity:.92}
#clock svg{width:100%;height:100%;overflow:visible}
#clock .arc{fill:none;stroke:rgba(232,226,211,.7);stroke-width:1.1;stroke-linecap:round}
#clockTicks line{stroke:rgba(232,226,211,.42);stroke-width:1}
#clockSun{fill:var(--paper);stroke:rgba(28,27,25,.6);stroke-width:.8;filter:drop-shadow(0 0 3px rgba(232,226,211,.45))}
#nightStamp{position:absolute;left:50%;top:47px;transform:translateX(-50%) rotate(-4deg);font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:.18em;font-size:13px;padding:1px 8px 2px;background:var(--stamp);color:#f0e8d8;box-shadow:2px 1px 0 rgba(0,0,0,.3);opacity:.94}
.stamp-red{color:#f0e8d8}

#prompt{position:absolute;left:50%;bottom:122px;transform:translateX(-50%);font-size:15px;line-height:1.45;letter-spacing:.015em;color:var(--paper);text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 16px rgba(0,0,0,.55);white-space:nowrap;opacity:0;transition:opacity .22s}
#prompt.show{opacity:1}
#subprompt{position:absolute;left:50%;bottom:99px;transform:translateX(-50%);font-size:11.5px;letter-spacing:.04em;color:rgba(232,226,211,.72);text-shadow:0 1px 3px rgba(0,0,0,.9);white-space:nowrap;opacity:0;transition:opacity .3s}
#subprompt.show{opacity:1}

#tag{
  position:absolute;left:max(14px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));
  width:242px;padding:12px 14px 11px 16px;
  background:url('assets/img/tag_paper.webp') center/100% 100% no-repeat;
  color:var(--ink);
  transform:rotate(-1.6deg);
  box-shadow:0 10px 28px rgba(0,0,0,.62),0 2px 5px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.34);
  filter:saturate(.92) contrast(1.02);
  z-index:24;
  font-family:'Special Elite','Courier New',monospace;
}
#tag:after{content:'';position:absolute;inset:0;border-radius:2px;background:linear-gradient(115deg,rgba(255,255,255,.22),rgba(255,255,255,0) 28%,rgba(90,72,44,.07) 74%,rgba(255,255,255,.1));pointer-events:none}
#cord{position:absolute;left:-4px;top:-36px;width:82px;height:82px;overflow:visible}
#cord path{fill:none;stroke:#d7d1c0;stroke-width:2.1;stroke-linecap:round;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
#cord path:nth-child(2){stroke:#b8b2a2;stroke-width:1.2}
#cord path:nth-child(3){stroke:#cfc8b6;stroke-width:1.1}
.hole{position:absolute;left:12px;top:14px;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 60% 40%,#38352f,#171614 60%,#0b0a09);box-shadow:0 0 0 1px rgba(255,255,255,.24),inset 0 1px 2px rgba(0,0,0,.9)}
.tag-inner{position:relative;z-index:1}
.tag-id{font-size:9.5px;letter-spacing:.12em;color:rgba(28,27,25,.82);margin-bottom:2px}
.tag-day{display:flex;align-items:baseline;gap:5px;font-family:'Oswald',sans-serif;font-weight:700;line-height:1;margin:0 0 4px}
.tag-day .day-word{font-size:13px;letter-spacing:.14em;color:rgba(28,27,25,.9)}
.tag-day b{font-size:35px;letter-spacing:.01em;color:var(--ink);text-shadow:.6px .7px 0 rgba(163,38,30,.18)}
.tag-day .day-of{font-family:'Special Elite',monospace;font-size:11px;letter-spacing:.05em;color:rgba(28,27,25,.65)}
.tag-health{margin-top:3px}
.tag-label{display:inline-block;font-size:8.5px;letter-spacing:.13em;color:rgba(28,27,25,.7);text-transform:lowercase}
.tag-health .tag-label{margin-bottom:2px}
.inkbar{position:relative;height:7px;border-bottom:1.4px solid rgba(28,27,25,.82);background-image:repeating-linear-gradient(90deg,transparent 0 8px,rgba(28,27,25,.22) 8px 9.1px);background-size:100% 100%;overflow:hidden}
.inkbar i{display:block;height:4px;margin-top:1px;background:var(--ink);width:100%;transition:width .35s,background .35s}
.tag-line{display:flex;justify-content:space-between;align-items:baseline;margin-top:3px}
.tag-line b{font-family:'Oswald',sans-serif;font-weight:700;font-size:16px;letter-spacing:.02em}
.tag-rule{height:1px;background:rgba(28,27,25,.28);margin:7px 0 4px}
.tag-row{display:flex;align-items:baseline;justify-content:space-between;font-size:8.5px;letter-spacing:.12em;color:rgba(28,27,25,.58);line-height:1.5}
.tag-row i{display:block;flex:1;margin-left:8px;border-bottom:1px dotted rgba(28,27,25,.38);height:8px}
#tallies{display:flex;flex-wrap:wrap;gap:2px;margin-top:4px;min-height:8px}
#tallies b{display:inline-block;width:2px;height:9px;background:rgba(163,38,30,.82);transform:rotate(6deg);box-shadow:.5px 0 0 rgba(163,38,30,.3)}
#tallies span{font-size:8px;letter-spacing:.06em;color:rgba(163,38,30,.85);margin-left:3px}

#handWrap{position:absolute;right:-2vw;bottom:-3vh;width:clamp(165px,34vw,410px);height:clamp(165px,34vw,410px);pointer-events:none;z-index:18;filter:drop-shadow(-10px 6px 18px rgba(0,0,0,.55));transition:opacity .5s}
.hand{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:100% 100%;opacity:0;transition:opacity .3s}
.hand.visible{opacity:.98}
#handIdle{transform-origin:82% 92%}
#handAxe{transform-origin:74% 96%}
#handLight{transform-origin:80% 96%}
#handAxe.swing{animation:axeSwing .42s cubic-bezier(.2,.7,.3,1)}
@keyframes axeSwing{0%{transform:rotate(0) translate(0,0)}34%{transform:rotate(-31deg) translate(-3%,4%)}62%{transform:rotate(17deg) translate(2%,-4%)}100%{transform:rotate(0) translate(0,0)}}
#wristTie{position:absolute;right:4.2%;bottom:7%;width:18%;height:18%;opacity:0;transition:opacity .3s;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
#wristTie path{fill:none;stroke:#e5e2d6;stroke-width:4;stroke-linecap:round}
#wristTie path:nth-child(2),#wristTie path:nth-child(3){stroke-width:2.6;stroke:#d8d4c7}

#touch{position:absolute;inset:0;pointer-events:none;z-index:30;display:none}
body.touch #touch{display:block}
#stick{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));width:98px;height:98px;border-radius:50%;border:1px solid rgba(232,226,211,.28);background:radial-gradient(circle,rgba(232,226,211,.06),rgba(232,226,211,.015) 60%,transparent 70%);pointer-events:auto;touch-action:none}
#thumb{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(232,226,211,.2);border:1px solid rgba(232,226,211,.48);box-shadow:0 2px 8px rgba(0,0,0,.4)}
.tbtn{position:absolute;right:max(130px,calc(env(safe-area-inset-right) + 118px));width:58px;height:58px;border-radius:50%;border:1px dashed rgba(232,226,211,.5);background:rgba(20,20,18,.46);color:var(--paper);font-family:'Special Elite',monospace;font-size:9px;letter-spacing:.06em;pointer-events:auto;touch-action:none;backdrop-filter:blur(2px)}
#btnA{bottom:max(86px,calc(env(safe-area-inset-bottom) + 82px))}
#btnF{bottom:max(16px,env(safe-area-inset-bottom))}
.tbtn:active{background:rgba(232,226,211,.26);color:#121110}

#helpBtn{position:absolute;right:max(14px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));width:30px;height:30px;border-radius:50%;border:1px solid rgba(232,226,211,.3);background:rgba(12,14,16,.42);color:rgba(232,226,211,.8);font-family:'Special Elite',monospace;font-size:15px;line-height:27px;text-align:center;z-index:40;pointer-events:auto;cursor:pointer}
#helpCard{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-.5deg);width:min(430px,88vw);padding:20px 22px 18px;background:var(--paper);color:var(--ink);z-index:60;box-shadow:0 18px 60px rgba(0,0,0,.65);font-size:12.5px;line-height:1.6}
#helpCard h3{margin:0 0 10px;font-family:'Oswald',sans-serif;font-weight:700;font-size:20px;letter-spacing:.08em;text-transform:uppercase}
#helpCard p{margin:0 0 8px}
#helpCard b{letter-spacing:.05em}
#helpCard button{margin-top:8px;font-family:'Special Elite',monospace;background:var(--ink);color:var(--paper);border:0;padding:6px 16px;cursor:pointer;letter-spacing:.08em}

#title{position:absolute;inset:0;z-index:70;background:#0b0e11 url('assets/img/title_bg.webp') 58% 60%/cover no-repeat;transition:opacity .9s}
#title.gone{opacity:0;pointer-events:none}
.title-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,8,10,.22) 0%,rgba(6,8,10,.02) 34%,rgba(6,8,10,.62) 74%,rgba(5,7,9,.9) 100%)}
.title-inner{position:absolute;left:clamp(18px,7vw,92px);bottom:clamp(22px,9vh,96px);width:min(760px,88vw);color:var(--paper)}
.title-kicker{font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:rgba(232,226,211,.66);margin-bottom:10px}
#title h1{margin:0;font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;line-height:.84;letter-spacing:.005em;color:#eee8da;text-shadow:0 4px 28px rgba(0,0,0,.62),0 1px 2px rgba(0,0,0,.7)}
#title h1 .survive{display:block;font-size:clamp(48px,10.5vw,138px)}
#title h1 .stamp{display:inline-block;margin-top:.05em;background:var(--stamp);color:#efe7d6;font-size:clamp(44px,9vw,120px);padding:0 .12em .04em;transform:rotate(-2.1deg) translateX(.035em);outline:2px solid rgba(163,38,30,.55);outline-offset:4px;box-shadow:5px 4px 0 rgba(0,0,0,.25),inset 0 0 0 2px rgba(0,0,0,.16),inset 0 0 34px rgba(70,9,6,.42);filter:contrast(.94) saturate(.86);position:relative}
#title h1 .stamp:after{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");mix-blend-mode:multiply;opacity:.22;pointer-events:none}
.title-sub{margin-top:22px;font-size:clamp(11px,1.8vw,15px);letter-spacing:.06em;color:rgba(232,226,211,.9);text-shadow:0 1px 3px rgba(0,0,0,.8)}
.tab{display:inline-block;margin-top:20px;padding:9px 28px 10px;border:1px dashed rgba(28,27,25,.62);background:var(--paper);color:var(--ink);font-family:'Special Elite',monospace;font-size:17px;letter-spacing:.04em;cursor:pointer;transform:rotate(-.7deg);box-shadow:3px 4px 0 rgba(0,0,0,.28);transition:transform .16s,background .16s}
.tab:hover{transform:rotate(0) translateY(-1px);background:#f2ecdf}
.tab:disabled{opacity:.55;cursor:default}
.resume{display:block;margin-top:12px;background:none;border:0;color:rgba(232,226,211,.8);font-family:'Special Elite',monospace;font-size:11px;letter-spacing:.09em;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0}
.title-controls{margin-top:30px;font-size:9.5px;letter-spacing:.14em;color:rgba(232,226,211,.5);text-transform:lowercase}
.title-gap{height:64px}

.overlay{position:absolute;inset:0;z-index:80;background:#050608;display:flex;align-items:center;justify-content:center;padding:22px;transition:opacity .7s}
.overlay.hidden{display:none!important}
#dawn{background:linear-gradient(180deg,#8c9498 0%,#6f787d 48%,#4a5155 100%);opacity:0}
#dawn.on{opacity:1}
#dawn .dawn-inner{text-align:center;color:#1b1d1e;text-shadow:0 1px 0 rgba(255,255,255,.25)}
#dawnText{font-family:'Oswald',sans-serif;font-weight:700;font-size:clamp(28px,8vw,64px);letter-spacing:.08em;text-transform:uppercase}
#dawnSub{margin-top:8px;font-size:13px;letter-spacing:.1em}
#death .death-inner,#complete .death-inner{width:min(700px,92vw);color:var(--paper)}
#deathLine,#completeLine{font-size:clamp(16px,3.6vw,26px);line-height:1.5;letter-spacing:.02em;white-space:pre-wrap;border-left:2px solid var(--stamp);padding-left:16px}
#deathLine:after{content:'▌';animation:blink 1s step-end infinite;color:var(--stamp)}
@keyframes blink{50%{opacity:0}}
.complete-sub{margin:18px 0 0 18px;font-size:12px;letter-spacing:.1em;color:rgba(232,226,211,.62)}
#death .tab,#complete .tab{margin-left:18px;margin-top:26px}

#pauseHint{position:absolute;left:50%;bottom:24%;transform:translateX(-50%);z-index:50;font-size:12px;letter-spacing:.14em;color:rgba(232,226,211,.8);text-shadow:0 1px 3px #000;pointer-events:none}
#fade{position:absolute;inset:0;z-index:65;background:#050608;opacity:0;pointer-events:none;transition:opacity .55s}
#fade.on{opacity:1}

@media (max-width:700px){
  #tag{width:168px;padding:9px 10px 8px 13px;transform:rotate(-1.2deg)}
  .tag-id{font-size:7.5px;letter-spacing:.11em}
  .tag-day .day-word{font-size:10px}
  .tag-day b{font-size:25px}
  .tag-day .day-of{font-size:8.5px}
  .tag-label{font-size:7px}
  .inkbar{height:6px}
  .tag-line b{font-size:13px}
  .tag-row{font-size:7px;line-height:1.35}
  .tag-rule{margin:5px 0 3px}
  .hole{left:10px;top:11px;width:7px;height:7px}
  #cord{width:64px;height:64px;left:-6px;top:-28px}
  #tallies b{height:7px}
  #prompt{bottom:154px;font-size:13px}
  #subprompt{bottom:134px;font-size:10px}
  #clock{width:138px;height:60px;top:6px}
  #nightStamp{font-size:11px;top:39px}
  #handWrap{width:clamp(158px,46vw,270px);height:clamp(158px,46vw,270px);right:-5vw;bottom:-1vh}
  .title-inner{bottom:max(24px,8vh)}
  .title-gap{height:32px}
  #helpBtn{width:26px;height:26px;line-height:23px;font-size:13px}
}
@media (max-width:380px){
  #tag{width:154px}
  #prompt{bottom:148px}
  .tbtn{right:max(116px,calc(env(safe-area-inset-right) + 104px));width:52px;height:52px}
  #btnA{bottom:max(78px,calc(env(safe-area-inset-bottom) + 74px))}
  #stick{width:88px;height:88px}
}
@media (max-height:520px) and (orientation:landscape){
  #tag{width:224px;bottom:6px;left:8px;padding:8px 10px 7px 13px}
  .tag-day b{font-size:27px}
  .tag-id{font-size:8px}
  .tag-row{font-size:7.5px;line-height:1.3}
  #prompt{bottom:74px}
  #subprompt{bottom:58px}
  #handWrap{width:clamp(150px,31vw,330px);height:clamp(150px,31vw,330px)}
}