*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* beside the game on wide screens: dark mown-lawn stripes instead of an empty color */
html,body{margin:0;height:100%;background:#24452c repeating-linear-gradient(90deg,#24452c 0,#24452c 48px,#2b5134 48px,#2b5134 96px);color:#1d2b22;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;overflow:hidden;overscroll-behavior:none}
/* Note: no `inset` and no flexbox `gap` — old Android Chrome/WebView (< 84) ignore them. Use margins instead. */
#app{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden}
/* #pad fills the whole window behind the game, so a swipe beside the game area (wide or sideways screens) steers too */
#pad{position:absolute;top:0;right:0;bottom:0;left:0;touch-action:none}
#cv{position:absolute;touch-action:none;display:block;background:#6db552}
button{font:inherit;cursor:pointer;color:inherit;touch-action:manipulation}
/* iPhone: no long-press callout or text selection on game UI */
#app{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
input,textarea{-webkit-user-select:text;user-select:text}
input{font:inherit}

/* ---------- HUD ---------- */
#hud{position:absolute;pointer-events:none;font-size:14px;user-select:none;-webkit-user-select:none}
#hud[hidden]{display:none}
.hud-top{display:flex;align-items:center;padding:.5em;padding-top:calc(.5em + env(safe-area-inset-top,0px));padding-left:calc(.5em + env(safe-area-inset-left,0px));padding-right:calc(.5em + env(safe-area-inset-right,0px))}
.hud-top>*+*{margin-left:.4em}
.spacer{flex:1}
.hbtn{pointer-events:auto;width:2.5em;height:2.5em;border-radius:.8em;border:0;background:rgba(20,30,25,.78);color:#fff;font-size:1em;font-weight:900;padding:0}
.hbtn[hidden]{display:none}
.pill{background:rgba(20,30,25,.78);color:#fff;border-radius:999px;padding:.45em .8em;font-weight:800;font-size:.95em;white-space:nowrap}
.pill.warn{background:#c62828;animation:pulse .5s infinite alternate}
@keyframes pulse{to{transform:scale(1.08)}}
.goals{list-style:none;margin:0 .5em;padding:.35em .6em;background:rgba(255,255,255,.9);border-radius:.7em;font-size:.76em;max-width:17em;pointer-events:auto;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.goals li{padding:.12em 0;font-weight:650;line-height:1.25}
.goals li.done{color:#2e7d32}
.goals li.fail{color:#c62828}
.goals li.star{color:#8a6d00}
.goals.min li:not(.cur){display:none}
.goals.min li.cur::after{content:"  ▾";opacity:.6}
.toast{position:absolute;left:50%;top:24%;transform:translateX(-50%);background:rgba(20,30,25,.9);color:#fff;padding:.5em .9em;border-radius:.8em;font-weight:750;font-size:.9em;opacity:0;transition:opacity .2s;width:max-content;max-width:88%;text-align:center}
.toast.on{opacity:1}
.action{pointer-events:auto;position:absolute;right:1em;bottom:calc(1.5em + env(safe-area-inset-bottom,0px));width:5.4em;height:5.4em;border-radius:50%;border:.22em solid #fff;background:#d84315;color:#fff;font-weight:900;font-size:1em;box-shadow:0 .3em 0 #8c2a0c,0 .4em 1em rgba(0,0,0,.35);touch-action:none;padding:0}
.action.off{opacity:.35;background:#555;box-shadow:0 .3em 0 #333}
.action:active{transform:translateY(.15em)}
.joyhint{position:absolute;left:1em;bottom:calc(1.5em + env(safe-area-inset-bottom,0px));max-width:55%;color:#fff;font-size:.72em;font-weight:700;text-shadow:0 1px 2px #000,0 0 4px #000;opacity:.9}

/* ---------- SCREENS ---------- */
#screens{position:absolute;top:0;right:0;bottom:0;left:0;display:none}
#screens.on{display:block}
.scr{display:none;position:absolute;top:0;right:0;bottom:0;left:0;overflow-y:auto;overflow-x:hidden;padding:calc(14px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-right,0px)) calc(32px + env(safe-area-inset-bottom,0px)) calc(16px + env(safe-area-inset-left,0px));overflow-wrap:break-word;background:linear-gradient(#c7ecb0,#79c25a);-webkit-overflow-scrolling:touch}
.scr.on{display:block}
.scr>*{max-width:460px;margin-left:auto;margin-right:auto}
.scr.modal{background:rgba(10,20,15,.62);display:none;align-items:center;justify-content:center}
.scr.modal.on{display:flex}
.box{background:#fffdf6;border-radius:18px;padding:18px;width:100%;max-width:400px;box-shadow:0 10px 30px rgba(0,0,0,.35);max-height:100%;overflow:auto}
.box h2{margin:0 0 8px}
h1{font-size:34px;font-size:clamp(26px,10vw,38px);overflow-wrap:anywhere;margin:4px 0 0;letter-spacing:-1px;color:#fff;text-shadow:0 3px 0 #2c6b34,0 6px 14px rgba(0,0,0,.25)}
h2{font-size:22px;margin:4px 0}
h3{font-size:15px;margin:12px 0 6px}
h3 small{font-weight:500;opacity:.7}
.title{text-align:center;padding-top:10px}
.logo{font-size:52px;line-height:1}
.tag{margin:6px 0 0;font-weight:700;color:#2a4d30}
.story{line-height:1.4;margin-top:8px;margin-bottom:8px} /* (left/right margins stay auto: centered on wide screens) */
.hint{font-size:14px;color:#2a4d30;font-weight:600}
.tiny{font-size:12px;text-align:center;opacity:.75}
.promise{margin-top:16px;background:rgba(255,255,255,.85);border:2px dashed #2e7d32;border-radius:14px;padding:10px 12px;font-size:14px;line-height:1.4}
.bar{display:flex;align-items:center}
.bar>*+*{margin-left:10px}
.bar h2{flex:1}
.back{border:0;background:rgba(255,255,255,.85);border-radius:12px;padding:8px 12px;font-weight:800}
.panel{background:rgba(255,255,255,.9);border-radius:16px;padding:10px 14px;margin-top:12px;box-shadow:0 3px 0 rgba(0,0,0,.08)}
.panel.center{text-align:center}
.panel h3:first-child{margin-top:4px}
.stack{display:flex;flex-direction:column;margin-top:14px}
.stack>*+*{margin-top:10px}
.stack>button,.row3 button,.row2 button,.btn{border:0;border-radius:14px;padding:12px 14px;font-weight:800;font-size:16px;background:#fff;color:#1d2b22;box-shadow:0 4px 0 rgba(0,0,0,.18)}
.stack>button:active,.row3 button:active,.row2 button:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.18)}
.big{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:14px 18px!important;font-size:19px!important;color:#fff!important}
.big small{font-weight:600;font-size:13px;opacity:.95;margin-top:3px}
.big:disabled{opacity:.55}
.red{background:#d84315!important}.pink{background:#d9487f!important}.blue{background:#2f6fd0!important}.green{background:#2e9d4a!important}.teal{background:#138a7e!important}
.danger{background:#fbe3e0!important;color:#a32020!important}
/* grids wrap on narrow screens (watch-size to 4K) instead of squeezing text */
.row3{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));grid-gap:8px;gap:8px}
.row3 button{font-size:14px;padding:10px 4px;min-width:0;overflow-wrap:anywhere}
.row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));grid-gap:8px;gap:8px}

.cards{display:flex;flex-direction:column;margin-top:10px}
.cards>*+*{margin-top:10px}
.card>*+*{margin-left:12px}
.card{display:flex;align-items:center;border:0;border-radius:16px;padding:12px 14px;background:#fff;text-align:left;box-shadow:0 4px 0 rgba(0,0,0,.15)}
.card .num{width:42px;height:42px;border-radius:12px;background:#2e9d4a;color:#fff;font-weight:900;font-size:20px;display:flex;align-items:center;justify-content:center;flex:none}
.card .info{flex:1}
.card .info b{display:block;font-size:17px}
.card .info span{font-size:13px;opacity:.8}
.card .st{font-size:18px;letter-spacing:1px;white-space:nowrap}
.card.locked{opacity:.55}
.card.locked .num{background:#888}

.goallist{margin:0;padding-left:20px;line-height:1.5;font-weight:600}
.rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));grid-gap:6px;gap:6px}
.rule>*+*{margin-left:6px}
.rule{display:flex;align-items:center;font-size:13px;font-weight:650;line-height:1.2}
.rule .ico{width:30px;height:30px;flex:none}
.rules.no .rule{color:#a32020}
.rules.ok .rule{color:#1f6b2c}
.note{font-size:13px;background:#fff6c9;border-radius:10px;padding:6px 10px;margin-top:6px;margin-bottom:6px}

.stars{font-size:38px;letter-spacing:4px;margin:4px 0}
.statlist{list-style:none;padding:0;margin:6px 0;font-weight:700;line-height:1.6}
.letter-chips{display:flex;flex-wrap:wrap}
.letter-chips>*{margin:0 6px 6px 0}
.chip{border:0;border-radius:999px;padding:6px 10px;background:#fff3e0;font-weight:750;font-size:13px;box-shadow:0 2px 0 rgba(0,0,0,.12)}
.challenge{background:#fff3e0;border-radius:12px;padding:8px;font-weight:800}
.big-q{font-size:20px;font-weight:800;font-style:italic}

.build-wrap{text-align:center;margin-top:8px}
#buildCv{width:100%;max-width:300px;height:auto;border-radius:16px;background:#6db552;box-shadow:0 4px 0 rgba(0,0,0,.15);touch-action:manipulation}
.palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));grid-gap:6px;gap:6px}
.palette button{border:2px solid transparent;border-radius:12px;background:#f4f1e6;padding:4px 2px;font-size:11px;font-weight:700;line-height:1.1;display:flex;flex-direction:column;align-items:center}
.palette button .ico{width:34px;height:34px;margin-bottom:2px}
.palette button.sel{border-color:#d84315;background:#ffe9df}
.palette button.bad{color:#a32020}
.swatches{display:flex;flex-wrap:wrap}
.swatches>*{margin:0 6px 6px 0}
.sw{border:3px solid transparent;border-radius:10px;padding:6px 8px;font-size:12px;font-weight:800;background:#f4f1e6;display:flex;align-items:center}
.sw>*+*{margin-left:5px}
.sw i{display:inline-block;width:16px;height:16px;border-radius:4px;border:1px solid rgba(0,0,0,.25)}
.sw.sel{border-color:#d84315}
#buildName,.code,#buildLink{width:100%;padding:10px 12px;border-radius:12px;border:2px solid #cfd8c9;font-size:16px;background:#fff}
.code{font-family:ui-monospace,Consolas,monospace;font-size:15px}
.count{font-weight:800}
.linkbox{display:flex;flex-direction:column}
.linkbox>*+*{margin-top:8px}
.linkbox[hidden]{display:none}
details.panel summary{font-weight:800;cursor:pointer}

.kinds{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));grid-gap:6px;gap:6px;margin-top:8px}
.kind{background:#fff;border-radius:12px;padding:6px 2px;text-align:center;font-size:10.5px;font-weight:700;line-height:1.15}
.kind .ico{width:34px;height:34px;display:block;margin:0 auto 2px}
.kind.no{opacity:.35;filter:grayscale(1)}
.letter-list{display:flex;flex-direction:column;margin-top:12px}
.letter-list>*+*{margin-top:6px}
.letter-list button{border:0;border-radius:12px;padding:10px 12px;background:#fffdf6;text-align:left;font-weight:700;box-shadow:0 2px 0 rgba(0,0,0,.12)}
.letter-list button span{display:block;font-weight:500;font-size:12px;opacity:.75}
.letter-wrap{text-align:center}
#letterCv{width:100%;max-width:400px;height:auto;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.3);margin-top:8px}

/* settings */
.seg{display:flex;flex-wrap:wrap}
.seg button{flex:1 1 30%;margin:0 6px 6px 0;border:2px solid #cfd8c9;border-radius:12px;padding:10px 6px;background:#fff;font-weight:800;font-size:14px}
.seg button.sel{border-color:#2e9d4a;background:#e5f6e8}
.tog{display:flex;align-items:center;width:100%;border:0;background:none;padding:10px 0;text-align:left;border-bottom:1px solid #e3e8df}
.tog:last-child{border-bottom:0}
.tog .tx{flex:1}
.tog .tx b{display:block;font-size:16px}
.tog .tx span{font-size:13px;opacity:.75}
.tog .sw2{flex:none;width:50px;height:30px;border-radius:15px;background:#c9cfc6;position:relative;transition:background .15s;margin-left:10px}
.tog .sw2::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .15s}
.tog[aria-checked="true"] .sw2{background:#2e9d4a}
.tog[aria-checked="true"] .sw2::after{left:23px}

/* bigger text setting */
body.big-text .story,body.big-text .rule,body.big-text .goallist,body.big-text .statlist,body.big-text .promise{font-size:17px}
body.big-text .rule{font-size:15px}
body.big-text h2{font-size:26px}
body.big-text h3{font-size:18px}
body.big-text .stack>button,body.big-text .row3 button{font-size:18px}
body.big-text .big{font-size:22px!important}
body.big-text .big small{font-size:15px}
body.big-text .card .info b{font-size:20px}
body.big-text .card .info span,body.big-text .tog .tx span{font-size:15px}
body.big-text .palette button,body.big-text .kind{font-size:13px}
/* calm motion setting */
body.calm *{animation:none!important;transition:none!important}
/* left-handed: action button on the left */
#hud.left .action{right:auto;left:1em}
#hud.left .joyhint{left:auto;right:1em;text-align:right}

/* phones held sideways: suggest turning upright (the game is portrait) */
#rotateHint{display:none;position:fixed;left:50%;top:8px;transform:translateX(-50%);z-index:50;background:rgba(20,30,25,.9);color:#fff;font-weight:800;font-size:14px;padding:8px 14px;border-radius:999px;pointer-events:none}
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){#rotateHint{display:block;animation:hintOut .6s 5s forwards}}
@keyframes hintOut{to{opacity:0;visibility:hidden}}
/* the game also works sideways, so the hint is only a suggestion: it fades after 5 s (and never shows with calm motion) */
body.calm #rotateHint{display:none}

.ad{text-align:center}
.ad-tag{display:inline-block;background:#222;color:#ffd23f;font-size:11px;font-weight:800;border-radius:6px;padding:3px 8px;letter-spacing:.5px}
.ad-art{font-size:64px;margin:10px 0 2px}
.ad .big{align-items:center;width:100%}