/* Front of the game: the title screen over the slowly turning town, then the progress screen. Cream paper, ink outlines,
   terracotta action; opens and closes through the shared data-mo motion. Reduced motion is handled in ui.css. */
/* Until Play nothing of the game shows but the town itself: every HUD piece, map label and plaque stays out of sight. */
body.booting #app>:not(#stage):not(#title):not(#boot):not(#offline):not(.fallback),body.booting .dlabel{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
body.revealing #app>:not(#stage):not(#title):not(#boot):not(#offline){transition:opacity .8s ease .15s}

.title,.boot{position:absolute;inset:0;z-index:60}
/* The town behind is dimmed, like a lamp turned low, so the paper cards read first. */
.title{display:flex;align-items:stretch;padding:max(20px,3vh) max(20px,3vw);
  background:linear-gradient(90deg,rgba(60,48,36,.5),rgba(60,48,36,.28) 55%,rgba(60,48,36,.18)),radial-gradient(ellipse at 55% 55%,transparent 45%,rgba(30,24,20,.4))}
.title[hidden]{pointer-events:none}

.tt-card{position:relative;width:min(390px,100%);display:flex;flex-direction:column;padding:34px 26px 18px 36px;text-align:left;animation:tt-in .9s cubic-bezier(.2,.8,.3,1) both;max-height:100%}
/* notebook holes down the left edge */
.tt-card::after{content:"";position:absolute;left:11px;top:22px;bottom:22px;width:6px;background:radial-gradient(circle,rgba(43,38,32,.35) 2.4px,transparent 3px) 0 0/6px 26px repeat-y;pointer-events:none}
.tt-tape{position:absolute;left:50%;top:-12px;width:110px;height:26px;margin-left:-55px;transform:rotate(-1.5deg);z-index:2}
@keyframes tt-in{from{opacity:0;translate:-30px 18px;rotate:-2deg}}
.tt-logo{display:flex;align-items:center;gap:12px;margin:2px 0 18px}
.tt-crest{flex:none;width:58px;height:58px;border-radius:50%;background:var(--paper-2);border:2.5px solid var(--ink);box-shadow:0 3px 0 var(--ink);display:grid;place-items:center;animation:tt-bob 5s ease-in-out infinite}
.tt-crest svg{width:36px;height:36px}
@keyframes tt-bob{50%{translate:0 -4px;rotate:3deg}}
.tt-name{font-size:68px;line-height:.95;letter-spacing:-.01em;color:var(--ink);position:relative}
.tt-name::after{content:"";position:absolute;left:2px;right:-4px;bottom:-9px;height:7px;background:var(--action);border-radius:6px 2px 7px 3px;transform:skewX(-14deg);opacity:.9}

.tt-box{padding:14px 16px 16px;border:2.5px solid var(--ink);border-radius:16px;background:var(--paper-2);box-shadow:inset 0 0 0 4px var(--paper),0 3px 0 rgba(43,38,32,.25)}
.tt-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--terra)}
.tt-await{font-size:24px;margin:2px 0 4px}
.tt-save{margin:0 0 12px;min-height:2.7em;color:var(--ink-soft);font-size:13.5px}
.tt-play{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:54px;font-size:20px;border-radius:14px}
.tt-play:not(:disabled){animation:tt-pulse 2.6s ease-in-out 1s infinite}
@keyframes tt-pulse{50%{box-shadow:0 4px 0 var(--ink),0 0 0 7px rgba(184,71,46,.16)}}
.tt-warm{height:7px;margin:12px 4px 0;border:2px solid var(--ink);border-radius:6px;background:var(--paper);overflow:hidden;transition:opacity .4s,height .4s,margin .4s}
.tt-warm i{display:block;height:100%;width:0;background:repeating-linear-gradient(135deg,var(--sage) 0 7px,#B9D08C 7px 14px)}
.tt-warm.ready{opacity:0;height:0;margin-top:0;border-width:0}

.tt-list{display:flex;flex-direction:column;margin:14px 0 4px}
.tt-row{display:flex;align-items:center;gap:12px;padding:9px 8px;border:0;border-bottom:1.5px dashed rgba(43,38,32,.25);background:none;text-align:left;border-radius:10px;transition:background .15s,translate .12s}
.tt-row:last-child{border-bottom:0}
.tt-row:hover:not(:disabled){background:rgba(233,214,178,.55);translate:3px 0}
.tt-row[aria-expanded="true"]{background:rgba(168,193,121,.45)}
.tt-row:disabled{opacity:.45;cursor:default}
.tt-row[hidden]{display:none}
.tt-ico{flex:none;width:34px;height:34px;display:grid;place-items:center}
.tt-ico svg{width:30px;height:30px}
.tt-row b{display:block;font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 1;font-weight:800;font-size:18px;line-height:1.1}
.tt-row small{display:block;color:var(--ink-soft);font-size:12.5px;margin-top:2px}
.tt-cardfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:12px;border-top:1.5px dashed rgba(43,38,32,.25);font-size:12.5px;color:var(--ink-soft)}
.tt-ver{padding:4px 10px;border:2px solid var(--ink);border-radius:10px;background:var(--paper-2);color:var(--ink);font-weight:800;letter-spacing:.04em;font-variant-numeric:tabular-nums}

/* The option panels open inside the card, over the list, and fill the room the rows leave. */
.tt-body{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.tt-list{flex:1;overflow:auto}
.tt-pane{position:absolute;inset:0;z-index:2;overflow:auto;padding:4px 4px 8px;text-align:left;background:var(--paper);--mo-y:12px;--mo-r:0deg;--mo-s:1;--mo-in:.35s}
.tt-back{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;margin-bottom:8px;border:2.5px solid var(--ink);border-radius:11px;background:var(--paper-2);font-weight:800;font-size:13.5px;box-shadow:0 3px 0 var(--ink)}
.tt-pane h3{font-size:28px;margin:4px 0 8px}
.tt-pane p{margin:0 0 10px;font-size:14px}
.tt-pane dl{margin:0 0 6px;padding:10px 12px;border:1.5px dashed rgba(43,38,32,.3);border-radius:12px;background:rgba(243,231,208,.5)}
.tt-pane dt{font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--terra);margin-top:8px}
.tt-pane dt:first-child{margin-top:0}
.tt-pane dd{margin:2px 0 0;font-size:14.5px}
.tt-pane kbd{display:inline-block;min-width:22px;padding:0 5px;border:1.5px solid var(--ink);border-radius:6px;background:var(--paper-2);font:700 12px var(--body);text-align:center;box-shadow:0 2px 0 var(--ink)}
.tt-chips{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 4px}
.tt-chip{height:36px;padding:0 13px;border-radius:11px;border:2.5px solid var(--ink);background:var(--paper-2);font-weight:800;font-size:13.5px;box-shadow:0 3px 0 var(--ink)}
.tt-chip[aria-pressed="true"]{background:var(--sage)}
.tt-pane .btn{height:42px;font-size:14px}
.tt-row-btns{display:flex;gap:10px;margin-top:10px}
.tt-pane ul{margin:2px 0 0;padding-left:18px;font-size:14.5px}
.tt-pane li{margin:3px 0}

/* paper curtain that hides the cut between camera shots */
.tt-curtain{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,#E9D6B2,#CDBB96);opacity:0;pointer-events:none}

.tt-credit{position:absolute;right:max(20px,3vw);bottom:16px;margin:0;padding:6px 14px;border:2px solid var(--ink);border-radius:12px;background:var(--paper);box-shadow:0 3px 0 var(--ink);font-size:13px}
.tt-credit i{font-style:normal;color:var(--ink-soft)}

/* ---- progress screen ---- */
.boot{display:grid;place-items:center;padding:24px;background-color:var(--paper-2);background-image:var(--grain),radial-gradient(ellipse at 50% 42%,var(--paper),var(--paper-2) 70%)}
.bt-wrap{width:min(520px,100%);text-align:center}
.bt-crest{width:68px;height:68px;margin:0 auto 14px;border-radius:50%;background:var(--paper);border:2.5px solid var(--ink);box-shadow:0 4px 0 var(--ink);display:grid;place-items:center;animation:tt-bob 3.2s ease-in-out infinite}
.bt-crest svg{width:40px;height:40px}
.bt-title{font-size:clamp(30px,5vw,40px);margin-bottom:24px}
.bt-track{position:relative;height:26px;border:2.5px solid var(--ink);border-radius:16px;background:var(--paper);box-shadow:0 4px 0 var(--ink);overflow:visible}
.bt-track>i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:13px;background:repeating-linear-gradient(135deg,var(--sage) 0 9px,#B9D08C 9px 18px);background-size:26px 26px;animation:bt-slide 1.1s linear infinite;box-shadow:inset 0 -5px 0 rgba(43,38,32,.12)}
@keyframes bt-slide{to{background-position:26px 0}}
.bt-track>b{position:absolute;top:-26px;left:0;width:34px;height:34px;margin-left:-17px;filter:drop-shadow(0 3px 0 rgba(43,38,32,.3));animation:tt-bob 1.1s ease-in-out infinite}
.bt-track>b svg{width:100%;height:100%}
.bt-cap{margin:24px 0 16px;min-height:1.6em;font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 1;font-style:italic;font-weight:600;font-size:20px;color:var(--ink)}
.bt-steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 10px;justify-content:center;font-size:12.5px;color:var(--ink-soft)}
.bt-steps li{padding:3px 10px 3px 8px;border:1.5px dashed rgba(43,38,32,.3);border-radius:10px;transition:background .3s,color .3s,border-color .3s}
.bt-steps li::before{content:"○ "}
.bt-steps li[data-s="doing"]{color:var(--ink);border-style:solid;border-color:var(--ink)}
.bt-steps li[data-s="doing"]::before{content:"● "}
.bt-steps li[data-s="done"]{background:var(--sage);color:var(--ink);border-style:solid;border-color:var(--ink)}
.bt-steps li[data-s="done"]::before{content:"✓ "}

@media (max-width:900px){
  .title{justify-content:center}
  .tt-credit{left:50%;right:auto;translate:-50% 0;white-space:nowrap}
}