/* Tiny Town phone shell: title screen, new-town dialog, "time passes" screen. Loaded only by the phone build. */
.tt-screen{position:fixed;inset:0;z-index:2000;background:#1d2f3a;color:#f0f6ec;font:14px/1.38 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;overflow:hidden;opacity:1;transition:opacity 320ms cubic-bezier(.23,1,.32,1)}
.tt-screen[hidden]{display:none}.tt-screen.out{opacity:0;pointer-events:none}
.tt-screen canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.tt-box{position:absolute;inset:0;max-width:440px;margin:0 auto;display:flex;flex-direction:column;justify-content:space-between;padding:calc(env(safe-area-inset-top,0px) + 44px) 18px calc(env(safe-area-inset-bottom,0px) + 18px)}
.tt-top{text-align:center}
.tt-eyebrow{font:800 11px system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#f2d27a;margin-bottom:6px}
.tt-top h1{margin:0;font:700 clamp(40px,13vw,58px)/1 ui-rounded,"SF Pro Rounded",-apple-system,system-ui,sans-serif;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 0 #2f5a35,0 8px 28px rgba(0,0,0,.35)}
.tt-top p{margin:10px auto 0;max-width:300px;color:rgba(240,246,236,.78);font-size:14px}
.tt-bot{display:flex;flex-direction:column;gap:10px;max-height:62dvh}
.tt-slots{display:flex;flex-direction:column;gap:8px;overflow-y:auto;overscroll-behavior:contain;padding:2px;margin:-2px;-webkit-overflow-scrolling:touch}
.tt-card{position:relative;display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:linear-gradient(135deg,rgba(44,64,50,.92),rgba(22,34,27,.92));box-shadow:0 10px 34px rgba(0,0,0,.35);transition:transform 140ms cubic-bezier(.23,1,.32,1)}
.tt-card:active{transform:scale(.98)}
.tt-card.top{border-color:#c9b36a;background:linear-gradient(135deg,rgba(84,76,40,.95),rgba(28,38,30,.95))}
.tt-card .ic{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:28px;background:rgba(255,255,255,.1)}
.tt-card .tx{flex:1;min-width:0}.tt-card .lbl{font:800 10px system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#f2d27a}
.tt-card b{display:block;font:700 18px/1.2 ui-rounded,"SF Pro Rounded",system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tt-card small{display:block;color:rgba(240,246,236,.66);font-size:12px;margin-top:2px}
.tt-card .go{flex:none;font-size:26px;color:#f2d27a}
.tt-more{flex:none;width:40px;height:40px;border-radius:12px;font-size:20px;background:rgba(255,255,255,.1);color:rgba(240,246,236,.8)}
.tt-slotwrap{position:relative}.tt-slotwrap .tt-card{padding-right:60px}.tt-slotwrap .tt-more{position:absolute;right:10px;top:50%;margin-top:-20px}
.tt-menu{display:flex;gap:8px;margin:6px 2px 2px}.tt-menu button{flex:1;min-height:42px;border-radius:12px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);font-weight:700}
.tt-menu button.bad{color:#f2a48e}
.tt-row{display:flex;gap:8px}.tt-btn{flex:1;min-height:48px;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:rgba(14,24,18,.82);color:#f0f6ec;font:700 15px system-ui,sans-serif}
.tt-btn.big{flex:2;border-color:#7da25f;background:linear-gradient(135deg,#4f8a36,#2f5a35);color:#fff}
.tt-fine{text-align:center;color:rgba(240,246,236,.5);font-size:11px}
/* dialogs */
.tt-modal{position:fixed;inset:0;z-index:2100;display:grid;place-items:end center;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity 220ms cubic-bezier(.23,1,.32,1)}
.tt-modal.open{opacity:1;pointer-events:auto}
.tt-dlg{width:min(440px,100%);padding:18px 18px calc(env(safe-area-inset-bottom,0px) + 18px);border-radius:24px 24px 0 0;background:linear-gradient(180deg,#2c4032,#16221b);border:1px solid rgba(255,255,255,.14);transform:translateY(40px);transition:transform 280ms cubic-bezier(.32,.72,0,1)}
.tt-modal.open .tt-dlg{transform:none}
.tt-dlg h2{margin:0 0 4px;font:700 22px ui-rounded,"SF Pro Rounded",system-ui,sans-serif}.tt-dlg p{margin:0 0 12px;color:rgba(240,246,236,.7)}
.tt-input{width:100%;min-height:50px;border-radius:14px;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.28);color:#fff;padding:0 14px;font-size:17px;-webkit-user-select:text;user-select:text}
.tt-sw{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin:12px 0 4px;padding:10px 0}
.tt-sw .t{flex:1}.tt-sw .t b{display:block;font-size:15px}.tt-sw .t small{display:block;color:rgba(240,246,236,.62);font-size:12px;margin-top:2px}
.tt-tog{flex:none;position:relative;width:46px;height:28px;border-radius:14px;background:rgba(255,255,255,.2);transition:background 180ms}
.tt-tog::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform 200ms cubic-bezier(.23,1,.32,1)}
[aria-checked="true"] .tt-tog{background:#6fbf4a}[aria-checked="true"] .tt-tog::after{transform:translateX(18px)}
.tt-dlg .tt-row{margin-top:14px}
/* time passes */
#ttAway{background:#10202a}
.tt-awbox{position:absolute;inset:0;max-width:440px;margin:0 auto;display:flex;flex-direction:column;justify-content:space-between;padding:calc(env(safe-area-inset-top,0px) + 56px) 22px calc(env(safe-area-inset-bottom,0px) + 28px);text-align:center}
.tt-aw-town{font:800 11px system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#f2d27a}
.tt-aw-h{font:700 28px/1.15 ui-rounded,"SF Pro Rounded",system-ui,sans-serif;margin:6px 0 4px;text-shadow:0 4px 18px rgba(0,0,0,.4)}
.tt-aw-sub{color:rgba(240,246,236,.74)}
.tt-aw-day{font:700 38px/1 ui-rounded,"SF Pro Rounded",system-ui,sans-serif;font-variant-numeric:tabular-nums;margin-top:14px;text-shadow:0 4px 18px rgba(0,0,0,.4)}
.tt-aw-season{color:rgba(240,246,236,.8);margin-top:4px}
.tt-bar{height:10px;border-radius:5px;background:rgba(255,255,255,.18);overflow:hidden}.tt-bar i{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,#9bd774,#f2d27a);transition:width 140ms linear}
.tt-skip{margin:14px auto 0;min-height:42px;padding:0 20px;border-radius:21px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);font-weight:700;opacity:0;pointer-events:none;transition:opacity 300ms}
.tt-skip.show{opacity:1;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.tt-screen,.tt-modal,.tt-dlg,.tt-bar i,.tt-card{transition:none}}