/* app.css — the calm skin. Paper, sage, graphite pencil. */
:root{
  --bg:#F2F1EC; --well:#E8E7E0; --surface:#FAF9F6; --ink:#33352F; --soft:#767A6E; --accent:#6E8166; --line:#D5D4CA;
  --pencil:#4A4A46; --shadow:0 1px 2px rgba(51,53,47,.08), 0 8px 24px rgba(51,53,47,.10);
  --font-hand:'Caveat', 'Segoe Print', cursive; --font-menu:'Patrick Hand', 'Segoe Print', cursive;
  --font-display:'Newsreader', Georgia, serif; --font-body:'Commissioner', 'Segoe UI', system-ui, sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); -webkit-font-smoothing:antialiased; overflow:hidden; overscroll-behavior:none}
button{font:inherit}
#stage{position:fixed; inset:0}
#c3d{position:absolute; inset:0; width:100%; height:100%; display:block; filter:blur(3px); transform:scale(1.02)}
#vignette{position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 90% at 50% 40%, rgba(0,0,0,0) 55%, rgba(40,30,30,.28) 100%)}
.screen{position:absolute; inset:0}
.screen[hidden]{display:none!important}

/* ---------- main menu: Life is Strange in spirit. A journal page taped over the room; handwriting, pencil
   scribbles, a Polaroid of the puzzle on the go; the room behind lightly blurred with film grain and a light leak. */
#menu{display:flex; align-items:center; padding:0 clamp(16px,5vw,80px); padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
.leak{position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen; opacity:.38;
  background:radial-gradient(60% 50% at 96% 6%, rgba(255,214,180,.85) 0%, rgba(255,214,180,0) 60%), radial-gradient(40% 40% at 90% 90%, rgba(203,184,228,.55) 0%, rgba(203,184,228,0) 60%);
  animation:leak 14s ease-in-out infinite alternate}
@keyframes leak{0%{opacity:.4; transform:translate(0,0)}100%{opacity:.7; transform:translate(-2%,2%)}}
.grain{position:absolute; inset:-40px; pointer-events:none; opacity:.13; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='1' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.45 0 0 0 0 0.4 0 0 0 .18 0'/></filter><rect width='240' height='240' filter='url(%23g)'/></svg>"); background-size:240px 240px; animation:grain .9s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-14px,10px)}50%{transform:translate(9px,-16px)}75%{transform:translate(-6px,-8px)}100%{transform:translate(12px,6px)}}
.paper{position:relative; width:min(46%, 520px); min-width:300px; padding:clamp(26px,4vw,48px) clamp(24px,3.5vw,44px) clamp(28px,4vw,44px);
  background:#F8F4EB url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.18 0 0 0 0 0.15 0 0 0 .07 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); background-blend-mode:multiply; border-radius:3px; transform:rotate(-1.4deg);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 18px 40px rgba(60,45,35,.22), 0 2px 6px rgba(60,45,35,.14);
  display:flex; flex-direction:column; gap:4px}
.paper::before{content:''; position:absolute; inset:0; border-radius:3px; pointer-events:none;
  background:repeating-linear-gradient(180deg, transparent 0 31px, rgba(110,129,102,.14) 31px 32px); background-position:0 74px; opacity:.7}
.tape{position:absolute; width:96px; height:26px; background:rgba(200,214,196,.62); transform:rotate(-6deg); box-shadow:0 1px 2px rgba(0,0,0,.08);
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.25) 0 6px, transparent 6px 12px)}
.tape.t1{top:-12px; left:34px} .tape.t2{top:-10px; right:44px; transform:rotate(5deg); background-color:rgba(247,191,168,.55)}
.title{font-family:var(--font-hand); font-weight:700; font-size:clamp(58px,9vw,104px); line-height:.92; margin:0; color:var(--ink); position:relative; letter-spacing:.01em; transform:rotate(-1deg); transform-origin:left bottom}
.sub{font-family:var(--font-menu); font-size:clamp(17px,2vw,22px); color:var(--soft); margin:2px 0 0 6px; position:relative}
.doodle{width:140px; height:44px; margin:2px 0 6px 2px; overflow:visible} .doodle path{fill:none; stroke:var(--pencil); stroke-width:2; stroke-linecap:round; opacity:.55} .doodle .piece{stroke-width:1.6; opacity:.7}
.menu{display:flex; flex-direction:column; gap:clamp(2px,1vh,8px); align-items:flex-start; position:relative; margin-top:6px}
.mi{appearance:none; background:none; border:0; cursor:pointer; padding:4px 10px 6px 34px; position:relative; text-align:left; color:var(--ink);
  font-family:var(--font-menu); font-size:clamp(26px,3.6vw,40px); line-height:1.1; border-radius:6px; transition:transform .25s cubic-bezier(.3,.8,.3,1)}
.mi span{position:relative; z-index:1}
.mi .line{position:absolute; left:34px; right:8px; bottom:2px; height:12px; width:calc(100% - 42px); overflow:visible; pointer-events:none}
.mi .line path{fill:none; stroke:var(--pencil); stroke-width:2.6; stroke-linecap:round; stroke-dasharray:260; stroke-dashoffset:260; opacity:.8; transition:stroke-dashoffset .38s cubic-bezier(.3,.8,.3,1)}
.mi .arrow{position:absolute; left:0; top:50%; width:30px; height:16px; margin-top:-8px; overflow:visible; opacity:0; transform:translateX(-6px); transition:opacity .25s, transform .25s}
.mi .arrow path{fill:none; stroke:var(--pencil); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.mi:hover .line path, .mi:focus-visible .line path, .mi.on .line path{stroke-dashoffset:0}
.mi:hover .arrow, .mi:focus-visible .arrow, .mi.on .arrow{opacity:.85; transform:none}
.mi:hover, .mi:focus-visible{transform:translateX(4px); outline:none}
.mi.press span{animation:press .28s ease-out}
@keyframes press{0%{transform:scale(1)}40%{transform:scale(.96) rotate(-1deg)}100%{transform:scale(1)}}
/* the Polaroid: the puzzle on the go, taped at the corner of the page */
.polaroid{appearance:none; border:0; cursor:pointer; position:absolute; right:-26px; bottom:-30px; width:min(176px, 34%); padding:8px 8px 10px; background:#FFFDF9;
  box-shadow:0 10px 24px rgba(60,45,35,.25), 0 1px 2px rgba(60,45,35,.15); transform:rotate(4deg); display:flex; flex-direction:column; gap:6px; align-items:stretch; transition:transform .3s cubic-bezier(.3,.8,.3,1)}
.polaroid:hover, .polaroid:focus-visible{transform:rotate(1.5deg) translateY(-4px) scale(1.03); outline:none}
.polaroid img{width:100%; aspect-ratio:1/1; object-fit:cover; display:block; background:var(--well)}
.polaroid .cap{font-family:var(--font-hand); font-weight:700; font-size:clamp(20px,2.4vw,28px); color:var(--ink); text-align:center; line-height:1}
.polaroid .tape.t3{top:-12px; left:50%; margin-left:-48px; transform:rotate(-3deg); background-color:rgba(203,184,228,.6)}
@media (max-width:640px){
  #menu{align-items:flex-end; padding:0 12px; padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
  .paper{width:100%; min-width:0; transform:rotate(-.6deg); padding:22px 18px 24px}
  .polaroid{right:10px; bottom:auto; top:-22px; width:118px; padding:6px 6px 8px} .polaroid .cap{font-size:18px}
  .title{font-size:52px} .mi{font-size:26px}
}

/* ---------- the other screens: a journal sheet taped over the room ---------- */
.panel{overflow:auto; padding:16px; padding-top:calc(16px + env(safe-area-inset-top,0px)); padding-bottom:calc(24px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; gap:16px; background:rgba(242,241,236,.72); backdrop-filter:blur(4px)}
.ph{display:flex; align-items:center; gap:14px}
.ph h2{font-family:var(--font-hand); font-weight:700; font-size:clamp(32px,6vw,48px); margin:0; line-height:1; color:var(--ink)}
.btn{appearance:none; cursor:pointer; font-size:14px; font-weight:500; padding:9px 14px; border-radius:6px; border:1px solid var(--line); background:var(--surface); color:var(--ink); white-space:nowrap; transition:background .2s, border-color .2s, transform .15s}
.btn:hover{border-color:var(--accent)} .btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.btn[aria-pressed="true"]{background:var(--accent); color:#fff; border-color:transparent}
.btn.key{background:var(--accent); color:#fff; border-color:transparent; font-weight:600}
.btn.big{font-size:18px; padding:14px 26px; border-radius:8px}
.btn.back{padding:9px 12px}
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px}
.grid button{appearance:none; border:0; padding:0; background:var(--surface); border-radius:8px; overflow:hidden; cursor:pointer; aspect-ratio:4/3; box-shadow:var(--shadow); transition:transform .18s}
.grid button:hover, .grid button:focus-visible{transform:translateY(-3px); outline:none}
.grid img{width:100%; height:100%; object-fit:cover; display:block}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
input[type=file]{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden}
.small{font-size:12.5px; color:var(--soft); line-height:1.5; margin:0}
.label{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--soft)}
.field{display:flex; flex-direction:column; gap:8px}
.fields{display:flex; flex-direction:column; gap:18px; min-width:0}
.fields.narrow{max-width:480px}
.seg{display:flex; gap:4px; flex-wrap:wrap}
.seg .btn{padding:8px 12px; font-variant-numeric:tabular-nums}
.count{display:flex; justify-content:space-between; align-items:baseline}
.count b{font-family:var(--font-display); font-weight:400; font-size:28px}
.count span{color:var(--soft); font-size:13px; font-variant-numeric:tabular-nums}
input[type=range]{width:100%; accent-color:var(--accent); height:28px}
.progress{height:4px; background:var(--well); border-radius:2px; overflow:hidden}
.progress i{display:block; height:100%; width:0; background:var(--accent); transition:width .15s}
/* the set-up page is a sheet of the same journal, taped over the room; nothing is ever wider than the window */
.sheet{position:relative; width:min(760px,100%); margin:auto; padding:clamp(18px,3vw,34px) clamp(16px,3vw,32px) clamp(22px,3.2vw,34px);
  background:#F8F4EB url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.18 0 0 0 0 0.15 0 0 0 .07 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); background-blend-mode:multiply;
  border-radius:3px; box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 18px 40px rgba(60,45,35,.20), 0 2px 6px rgba(60,45,35,.12);
  display:flex; flex-direction:column; gap:12px; min-width:0}
.sheet::before{content:''; position:absolute; inset:0; border-radius:3px; pointer-events:none;
  background:repeating-linear-gradient(180deg, transparent 0 31px, rgba(110,129,102,.12) 31px 32px); background-position:0 70px; opacity:.6}
.sheet > *{position:relative}
.sheet .tape.t1{top:-11px; left:28px} .sheet .tape.t2{top:-11px; right:36px}
.doodle.rule{width:min(320px,86%); height:12px; margin:-4px 0 2px 2px}
.setup{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(220px,1fr); gap:clamp(14px,2.4vw,26px); align-items:start; min-width:0}
@media (max-width:700px){ .setup{grid-template-columns:1fr} }
@media (max-height:560px){ .panel .ph h2{font-size:30px} .sheet{gap:8px; padding-top:14px} .doodle.rule{height:8px; margin-top:-6px} }
.cropwrap{display:flex; flex-direction:column; gap:8px; min-width:0}
.photo{position:relative; align-self:center; max-width:100%; padding:8px 8px 10px; background:#FFFDF9; box-shadow:0 8px 20px rgba(60,45,35,.18), 0 1px 2px rgba(60,45,35,.12)}
.photo .tape.t3{top:-12px; left:50%; margin-left:-48px; transform:rotate(-3deg); background-color:rgba(203,184,228,.55)}
#cropCv{display:block; width:100%; height:100%; background:#F1EFE8; touch-action:none}
.list{display:flex; flex-direction:column; gap:10px; max-width:640px}
.game{display:flex; gap:12px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:10px; box-shadow:var(--shadow)}
.game img{width:96px; height:72px; object-fit:cover; border-radius:4px; flex:0 0 auto}
.game .info{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.game .info b{font-family:var(--font-display); font-weight:400; font-size:18px}
.game .meter{height:5px; background:var(--well); border-radius:3px; overflow:hidden; margin-top:4px} .game .meter i{display:block; height:100%; background:var(--accent)}
.game .btn.x{padding:8px 10px; color:var(--soft)}
.empty{color:var(--soft); font-size:15px; padding:20px 0}

/* ---------- play ---------- */
#play{display:grid; grid-template-rows:auto 1fr; background:transparent; pointer-events:none; opacity:0; transition:opacity .45s}
#play.in{opacity:1}
#play > *{pointer-events:auto}
#overlay{width:100%; height:100%; display:block; pointer-events:none}
#c3d.play{filter:none; transform:none; cursor:grab} #c3d.dragging{cursor:grabbing}
.bar{display:flex; align-items:center; gap:8px; padding:8px 12px; padding-top:calc(8px + env(safe-area-inset-top,0px)); background:var(--surface); border-bottom:1px solid var(--line); min-height:52px}
.bar .timer{font-family:var(--font-display); font-weight:400; font-size:24px; font-variant-numeric:tabular-nums; margin:0 auto}
.bar .prog{font-size:13px; color:var(--soft); font-variant-numeric:tabular-nums; white-space:nowrap}
#c3d{touch-action:none}
.abbar{position:absolute; left:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); display:flex; gap:6px; flex-wrap:wrap; max-width:70vw; z-index:5}
.abbar .btn.ab{box-shadow:var(--shadow)}
.abbar .btn.ab.new{animation:appear 1.1s cubic-bezier(.2,.9,.3,1.2)}
@keyframes appear{0%{opacity:0; transform:translateY(16px) scale(.9)}100%{opacity:1; transform:none}}
#lid{position:absolute; inset:0; z-index:30; background:rgba(20,20,18,.55); display:flex; align-items:center; justify-content:center; padding:24px; cursor:pointer}
#lid[hidden]{display:none} #lid img{max-width:100%; max-height:100%; box-shadow:0 20px 60px rgba(0,0,0,.5); border:6px solid #fff}
#toast{position:absolute; left:50%; bottom:calc(72px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:16; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:10px 16px; box-shadow:var(--shadow); font-family:var(--font-display); font-size:18px; max-width:90vw; text-align:center}
#toast[hidden]{display:none}
.overlay{position:absolute; inset:0; z-index:40; background:rgba(242,241,236,.78); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:20px}
.overlay[hidden]{display:none}
.overlay .card{display:flex; flex-direction:column; gap:12px; align-items:stretch; min-width:min(320px,90vw); text-align:center}
.overlay h2{font-family:var(--font-hand); font-weight:700; font-size:48px; margin:0 0 8px; line-height:1}
.big-time{font-family:var(--font-display); font-size:40px; margin:0 0 12px; font-variant-numeric:tabular-nums}
@media (max-width:520px){ .bar{padding:6px 8px; gap:6px} .bar .timer{font-size:20px} .btn{padding:8px 10px; font-size:13px} .btn.big{font-size:16px; padding:12px 18px} }
@media (prefers-reduced-motion: reduce){ *{animation-duration:.01ms!important; transition-duration:.01ms!important} }

#cutting{position:absolute; left:0; right:0; bottom:0; z-index:8; padding:0 0 env(safe-area-inset-bottom,0px)}
#cutting[hidden]{display:none}
.cutline{height:4px; background:rgba(255,255,255,.35)} .cutline i{display:block; height:100%; width:0; background:#fff; transition:width .15s}

#setup{align-items:center; justify-content:center; padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
.startbar{position:absolute; left:0; right:0; bottom:0; z-index:3; display:flex; align-items:center; gap:14px;
  padding:10px clamp(14px,4vw,40px); padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(248,244,235,.97); border-top:1px solid var(--line); box-shadow:0 -6px 18px rgba(60,45,35,.10)}
.startbar .sum{font-family:var(--font-hand); font-weight:700; font-size:26px; color:var(--ink); margin-right:auto; line-height:1}
/* pencil chips: the ratio and turning choices read as handwriting, not form controls */
.seg.chips{gap:2px}
.seg.chips .btn{background:transparent; border:0; border-bottom:2.4px solid transparent; border-radius:0; padding:3px 9px 4px;
  font-family:var(--font-menu); font-size:clamp(16px,2vw,20px); color:var(--soft); transition:color .2s, border-color .2s}
.seg.chips .btn:hover{color:var(--ink); border-bottom-color:rgba(74,74,70,.35)}
.seg.chips .btn[aria-pressed="true"]{color:var(--ink); border-bottom-color:var(--pencil); background:transparent}

#splash[hidden]{display:none!important}
#splash{position:absolute; inset:0; z-index:60; background:var(--bg); display:flex; align-items:center; justify-content:center; transition:opacity .6s}
#splash.out{opacity:0; pointer-events:none}
#splash .sp{display:flex; flex-direction:column; align-items:flex-start; gap:6px; width:min(420px,80vw)}
#splash .title, #splash .sub{color:var(--ink); text-shadow:none}
#splash .cutline{width:100%; margin-top:18px; background:var(--well)} #splash .cutline i{background:var(--accent)}

.bar-only{pointer-events:none} .bar-only > *{pointer-events:auto}
.ph.over{position:absolute; left:0; right:0; top:0; padding:12px 16px; padding-top:calc(12px + env(safe-area-inset-top,0px)); background:linear-gradient(rgba(242,241,236,.92), rgba(242,241,236,0)); gap:14px}
.ph.over .hint{margin-left:6px} .ph.over .own{margin-left:auto}
#setup.panel{background:rgba(242,241,236,.58); backdrop-filter:blur(10px)}
@media (max-width:520px){ .ph.over .hint{display:none} }