*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{background:#142f32;color:#fff3d4;font-family:system-ui,sans-serif}main{height:100dvh;max-width:850px;margin:auto;padding:max(8px,env(safe-area-inset-top)) 10px max(8px,env(safe-area-inset-bottom));display:grid;grid-template-rows:64px minmax(0,1fr) 120px;gap:6px}header{display:flex;align-items:center;justify-content:space-between}h1{font:23px Georgia,serif;margin:0}p{font-size:12px;margin:4px 0}#clock{font-size:24px;color:#f4cf7a}#stage{position:relative;min-height:0;overflow:hidden;border:2px solid #82b5a7;border-radius:24px;touch-action:none;background:#193c40}canvas{display:block;width:100%;height:100%;touch-action:none}#message{position:absolute;top:8px;left:8px;right:8px;padding:8px;background:#142f32e8;border-radius:10px;text-align:center;pointer-events:none}footer{text-align:center;display:grid;align-content:center;gap:5px}#herbs{font-size:13px;color:#f4cf7a}button{min-width:85px;min-height:44px;border:1px solid #82b5a7;background:#264f50;color:#fff3d4;border-radius:12px;font:inherit;touch-action:manipulation}button:focus-visible,#stage:focus-visible{outline:3px solid #f4cf7a;outline-offset:-3px}#veil{position:absolute;inset:0;display:grid;place-content:center;text-align:center;background:#142f32ed}#veil[hidden]{display:none}@media(orientation:landscape) and (max-height:500px){main{grid-template-columns:200px minmax(0,1fr);grid-template-rows:80px 1fr}header{grid-column:1}h1{font-size:19px}#stage{grid-column:2;grid-row:1/3}footer{grid-column:1}button{min-width:60px;font-size:12px}}
.production{background:radial-gradient(ellipse at top,#344358,#182338 75%)}.production main{grid-template-rows:64px minmax(0,1fr) 174px}.production header{gap:6px}.production header div{flex:1;min-width:0}.production h1{font-size:21px}.production header p{font-size:11px}.back{display:grid;place-items:center;flex:0 0 44px;height:44px;border:1px solid #b6d3b6;border-radius:50%;color:#fff3d4;text-decoration:none;font-size:24px}.production #stage{border-color:#a9c9ad;background:#1e3046}.controls{display:flex;justify-content:center;gap:6px}.production button{padding:5px 10px}.production footer{gap:4px}#save-status{font-size:10px;line-height:14px;min-height:14px}#chapter{position:absolute;bottom:10px;left:5px;right:5px;text-align:center;font-size:11px;letter-spacing:.04em;color:#ffe0a0;pointer-events:none}dialog{width:min(340px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;background:#21354b;color:#fff3d4;border:2px solid #b6d3b6;border-radius:20px;padding:16px;text-align:center}dialog::backdrop{background:#0e1b2cdd}dialog h2{font:25px Georgia,serif;margin:0 0 8px}dialog p{line-height:1.4;margin:8px 0}dialog button{margin:3px;min-height:44px}#tea-preview{display:block;height:120px;width:100%;background:radial-gradient(ellipse,#48665f,#17283c);border-radius:12px}#reward-status{color:#ffda8a}.reduced #stage{scroll-behavior:auto}@media(max-width:350px){.production h1{font-size:19px}.production header p{font-size:10px}.production #clock{font-size:20px}.production button{min-width:76px;font-size:14px;padding:5px 8px}}@media(orientation:landscape) and (max-height:500px){.production main{grid-template-columns:230px minmax(0,1fr);grid-template-rows:80px minmax(0,1fr)}.production h1{font-size:18px}.production footer{align-content:center}.production button{min-width:66px;font-size:12px;padding:4px 7px}.production #clock{font-size:18px}#tea-preview{height:80px}dialog h2{font-size:22px}dialog{padding:12px}}