/* Loafguard's site. The game's own colours (LoafLanes/App.swift Ink): cream paper and brown ink for the pages, and the
   title screen's dark room and gold letters for the top of the home page. System fonts only, nothing loaded from elsewhere. */
:root{--cream:#fff7e6;--paper:#faedd6;--card:#fffdf7;--brown:#5c3821;--ink:#3b2314;--soft:#94735a;--orange:#f59940;--gold:#f8c64a;--dusk:#1b110b;--line:rgba(92,56,33,.18)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--brown);font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Apple SD Gothic Neo","Hiragino Sans","PingFang TC",sans-serif;-webkit-font-smoothing:antialiased}
main{max-width:760px;margin:0 auto;padding:max(28px,env(safe-area-inset-top)) 20px 48px}
main header{display:flex;align-items:center;gap:10px}
main header a{color:var(--ink);text-decoration:none;font-weight:900;font-size:22px;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
main header img{width:36px;height:36px;border-radius:9px}
h1{color:var(--ink);font-size:34px;line-height:1.15;letter-spacing:-.02em;margin:26px 0 4px}
.updated{color:var(--soft);font-size:14px;margin:0 0 20px}
h2{color:var(--ink);font-size:21px;margin:34px 0 8px}
h3{color:var(--ink);font-size:17px;margin:22px 0 6px}
a{color:#b4541a}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 20px;margin:14px 0}
.card h3{margin-top:4px}
.langs{font-size:14px;margin:6px 0 0}
.langs a{margin-right:12px}
table{width:100%;border-collapse:collapse;font-size:14.5px;margin:10px 0}
th,td{text-align:left;vertical-align:top;padding:10px;border-bottom:1px solid var(--line)}
th{color:var(--ink);font-size:13px;letter-spacing:.02em}
@media(max-width:600px){table,thead,tbody,tr,th,td{display:block}thead{display:none}tr{border-bottom:1px solid var(--line);padding:8px 0}td{border:0;padding:4px 0}td::before{content:attr(data-label);display:block;font-size:12px;font-weight:700;color:var(--soft)}}
ul{padding-left:22px}
hr{border:0;border-top:2px dashed var(--line);margin:48px 0}
footer{margin-top:44px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--soft);display:flex;gap:16px;flex-wrap:wrap}
footer a{color:var(--soft)}
[lang="ko"] p,[lang="ko"] li,[lang="ko"] td,[lang="ko"] h1,[lang="ko"] h2,[lang="ko"] h3{word-break:keep-all}

/* Home: the App Store header picture over a dark room, the trailer in a phone, a strip of screens, then one panel per
   idea in the colour of its room. */
.home .wrap{max-width:1080px;margin:0 auto;padding-left:22px;padding-right:22px}
.dusk{position:relative;background:var(--dusk);color:#f7e7c8;overflow:hidden;--art:clamp(280px,36vw,480px)}
.dusk::before{content:"";position:absolute;inset:0 0 auto 0;height:var(--art);background:url(/img/hero.jpg) center 30%/cover no-repeat;-webkit-mask-image:linear-gradient(#000 45%,transparent);mask-image:linear-gradient(#000 45%,transparent)}
.dusk::after{content:"";position:absolute;inset:0 0 auto 0;height:120px;background:linear-gradient(rgba(27,17,11,.82),transparent);pointer-events:none}
.dusk>*{position:relative;z-index:1}
.home header.top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding-top:max(16px,env(safe-area-inset-top));padding-bottom:6px}
.home .brand{display:flex;align-items:center;gap:10px;color:#fff3d6;font-weight:900;font-size:21px;letter-spacing:-.02em;text-decoration:none;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.home .brand img{width:34px;height:34px;border-radius:8px}
.pick{font-size:14px;display:flex;flex-wrap:wrap;gap:2px;background:rgba(27,17,11,.62);border-radius:12px;padding:3px}
.pick button{font:inherit;background:none;border:0;color:#f7e7c8;cursor:pointer;padding:3px 9px;border-radius:9px}
.pick button[aria-pressed=true]{background:var(--gold);color:var(--ink);font-weight:700}
.stage{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start;padding-top:calc(var(--art) - 330px);padding-bottom:54px}
.stage>div:first-child{padding-top:118px}
.appicon{display:block;width:104px;height:104px;border-radius:24px;box-shadow:0 0 0 3px rgba(255,243,214,.9),0 12px 26px rgba(0,0,0,.5)}
.eyebrow{display:inline-block;margin:20px 0 0;padding:4px 16px;border-radius:999px;border:1.5px solid var(--gold);background:rgba(27,17,11,.78);color:#fff3d6;font-weight:700;font-size:15px}
.stage h1{font-size:64px;line-height:1.08;margin:12px 0 14px;letter-spacing:-.02em;font-weight:900;text-wrap:balance;color:var(--gold);background:linear-gradient(#fff3bf,#f8c64a 50%,#e3861a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 0 #4a2208) drop-shadow(0 8px 16px rgba(0,0,0,.5))}
.stage .lead{font-size:20px;color:#f7e7c8;margin:0 0 28px;max-width:27em}
.soon{display:inline-block;background:linear-gradient(#ffdc7a,#f3a22e);color:#3b1d08;border:2px solid #7a3d0c;border-radius:999px;padding:12px 26px;font-weight:900;box-shadow:0 4px 0 #7a3d0c,0 12px 26px rgba(0,0,0,.35)}
.phone{justify-self:center;width:min(330px,80vw);aspect-ratio:1206/2622;border-radius:50px;padding:11px;background:#2a1a10;box-shadow:0 26px 60px rgba(0,0,0,.55),inset 0 0 0 2px #7a5a36}
.phone video,.phone img{display:block;width:100%;height:100%;object-fit:cover;border-radius:40px;background:#3b2314}
.strip{overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 0 56px;scrollbar-width:thin;scrollbar-color:rgba(248,198,74,.45) transparent}
.strip-in{display:flex;gap:18px;width:max-content;margin:0 auto;padding:0 22px}
.strip img{width:min(220px,58vw);aspect-ratio:480/1043;border-radius:22px;scroll-snap-align:center;box-shadow:0 12px 28px rgba(0,0,0,.45),0 0 0 1.5px rgba(248,198,74,.35);background:#2a1a10}
.premise{display:flex;align-items:center;justify-content:center;gap:26px;padding-top:54px;padding-bottom:6px}
.premise img{width:128px;height:auto;flex:none}
.premise p{margin:0;max-width:30em;font-size:21px;line-height:1.6;font-weight:700;color:var(--ink);text-align:center;text-wrap:pretty}
.home h2{font-size:36px;letter-spacing:-.02em;margin:44px 0 22px;text-align:center}
.scenes{display:grid;gap:22px}
.scene{display:grid;grid-template-columns:auto minmax(0,1fr);gap:48px;align-items:center;padding:38px 56px;border-radius:30px;color:var(--ink);--check:rgba(255,255,255,.2);background-image:linear-gradient(45deg,var(--check) 25%,transparent 25%,transparent 75%,var(--check) 75%),linear-gradient(45deg,var(--check) 25%,transparent 25%,transparent 75%,var(--check) 75%);background-size:64px 64px;background-position:0 0,32px 32px}
.scene.flip{grid-template-columns:minmax(0,1fr) auto}
.scene.flip>:first-child{order:2}
.scene .phone{width:250px;border-radius:40px;padding:9px;box-shadow:0 18px 40px rgba(59,35,20,.35),inset 0 0 0 2px #7a5a36}
.scene .phone video,.scene .phone img{border-radius:32px}
.scene .num{display:block;font-size:15px;font-weight:900;letter-spacing:1px;opacity:.55;margin-bottom:6px}
.scene h3{font-size:36px;line-height:1.18;margin:0 0 12px;letter-spacing:-.02em;text-wrap:balance;color:inherit}
.scene p{font-size:19px;margin:0;max-width:24em;opacity:.9}
.scene.day{background-color:#f6c86e}
.scene.paper{background-color:var(--paper);--check:rgba(255,255,255,.45);box-shadow:inset 0 0 0 2px var(--line)}
.scene.night{background-color:#2c3567;color:#eef0ff;--check:rgba(255,255,255,.06)}
.scene.bath{background-color:#9fdde0;--check:rgba(255,255,255,.28)}
.scene.yarn{background-color:#f3a6bb;--check:rgba(255,255,255,.22)}
.scene.tale{background-color:#24160e;color:#f7e7c8;--check:rgba(248,198,74,.05);box-shadow:inset 0 0 0 2px rgba(248,198,74,.45)}
.scene.tale h3{color:var(--gold)}
.lineup{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px 6px;width:440px;max-width:100%}
.lineup img{display:block;width:100%;aspect-ratio:1;object-fit:contain}
.comic{display:flex;justify-content:center;align-items:center;width:400px;padding:16px 0}
.comic img{display:block;width:200px;height:auto;border:6px solid #fff7e6;border-radius:12px;box-shadow:0 12px 26px rgba(0,0,0,.5);margin:0 -42px}
.comic img:nth-child(1){transform:rotate(-7deg) translateY(10px)}
.comic img:nth-child(2){position:relative;z-index:1;transform:translateY(-10px) scale(1.06)}
.comic img:nth-child(3){transform:rotate(7deg) translateY(10px)}
.winter{text-align:center;padding-top:16px}
.winter .sub{margin:-12px auto 22px;font-size:19px;max-width:26em}
.snow{position:relative;max-width:860px;margin:0 auto;border-radius:30px;overflow:hidden;aspect-ratio:1024/540;background:#e9d6b4 url(/img/winter/room.jpg) center/cover no-repeat;box-shadow:inset 0 0 0 2px var(--line)}
.snow .rug{position:absolute;left:18.75%;top:46.1%;width:62.4%;height:47.1%;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr)}
.snow img{display:block;width:90%;height:90%;object-fit:contain;place-self:end center;filter:drop-shadow(0 4px 3px rgba(59,35,20,.22))}
.home .more{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-top:0;padding-bottom:0;margin-top:40px}
.more li{background:var(--card);border:2px solid var(--line);border-radius:20px;padding:18px 20px;font-size:16px;font-weight:600;color:var(--ink);text-align:center;display:flex;align-items:center;justify-content:center}
.finale{position:relative;margin-top:64px;background:var(--dusk);color:#f7e7c8;overflow:hidden}
.finale::before{content:"";position:absolute;inset:0;background:url(/img/hero.jpg) center 30%/cover no-repeat;opacity:.5;-webkit-mask-image:linear-gradient(#000 40%,transparent 92%);mask-image:linear-gradient(#000 40%,transparent 92%)}
.finale>*{position:relative}
.closing{text-align:center;padding-top:72px;padding-bottom:36px}
.closing .appicon{margin:0 auto}
.closing .name{font-size:34px;font-weight:900;margin:14px 0 18px;letter-spacing:-.02em;color:var(--gold);text-shadow:0 2px 0 #4a2208,0 8px 16px rgba(0,0,0,.5)}
.home footer{max-width:1080px;margin:0 auto;padding-top:18px;padding-bottom:max(28px,env(safe-area-inset-bottom));border-top:1px solid rgba(247,231,200,.2);color:rgba(247,231,200,.7)}
.home footer a{color:rgba(247,231,200,.85)}
[lang="ko"] .scene h3,[lang="ko"] .stage h1,[lang="ko"] .more li{word-break:keep-all}
[lang="ja"] .stage h1,[lang="zh-Hant"] .stage h1,[lang="ja"] .scene h3,[lang="zh-Hant"] .scene h3{letter-spacing:0}
.stage h1 span,.scene h3 span{display:inline-block}
@media (max-width:820px){
  .dusk{--art:92vw}
  .dusk::before{background-image:url(/img/hero-m.jpg);background-position:center top}
  .pick{font-size:13px}
  .stage{grid-template-columns:1fr;gap:34px;padding-top:calc(var(--art) - 150px);text-align:center;padding-bottom:40px}
  .stage>div:first-child{padding-top:0}
  .stage .lead{margin-left:auto;margin-right:auto;font-size:18px}
  .stage h1{font-size:42px}
  .appicon{width:92px;height:92px;border-radius:21px;margin:0 auto}
  .phone{width:min(290px,76vw)}
  .premise{flex-wrap:wrap;gap:8px 40px;padding-top:40px}
  .premise p{order:3;font-size:18px;flex-basis:100%}
  .premise img{width:96px}
  .home h2{font-size:28px}
  .scene,.scene.flip{grid-template-columns:minmax(0,1fr);gap:24px;padding:28px 22px 30px;text-align:center;justify-items:center}
  .scene>:first-child,.scene.flip>:first-child{order:2}
  .scene .phone{width:min(240px,64vw)}
  .scene h3{font-size:28px}
  [lang="ja"] .scene h3,[lang="zh-Hant"] .scene h3{font-size:24px}
  .scene p{font-size:17px;margin:0 auto}
  .comic{width:100%}
  .comic img{width:36vw;max-width:190px;margin:0 -7vw}
  .winter .sub{font-size:17px}
  .snow{border-radius:20px}
  .home .more{grid-template-columns:1fr;gap:10px}
}
@media (prefers-reduced-motion:reduce){.strip{scroll-behavior:auto}}