/* doodledoggo.app: the introduction site. Same pencil-sketchbook look as the game (game/css/00_base.css colours and fonts). */
@font-face{font-family:'Caveat';font-weight:500 700;font-display:swap;src:url(/fonts/caveat.woff2) format('woff2')}
@font-face{font-family:'Patrick Hand';font-weight:400;font-display:swap;src:url(/fonts/patrick-hand.woff2) format('woff2')}
:root{
  --desk:#E6D7BF; --paper:#FFFBF3; --dot:#E3D2BA; --ink:#5B3D32; --muted:#8A7468; --pink:#F28FA5;
  --w-yellow:#FFE3A1; --w-mint:#C8E9CF; --w-blue:#CBE0F4; --w-pink:#F9D0D9; --w-peach:#FCD8BC; --w-lilac:#E0D5F0;
  --hand:'Caveat','Patrick Hand','Comic Sans MS',cursive; --read:'Patrick Hand','Trebuchet MS',sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font-family:var(--read);font-size:19px;line-height:1.45;
  background:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1.5px) 0 0/7px 7px,var(--desk)}
a{color:var(--ink)}
:focus-visible{outline:2.5px dashed var(--pink);outline-offset:3px}
.page{max-width:980px;margin:0 auto;padding:18px 16px 28px}
.sheet{background:var(--paper);border:2.5px solid var(--ink);border-radius:18px 14px 20px 12px / 14px 20px 12px 18px;
  box-shadow:3px 4px 0 rgba(91,61,50,.18);padding:22px 22px 26px;
  background-image:radial-gradient(var(--dot) 1px,transparent 1.4px);background-size:22px 22px}
h1,h2,h3{font-family:var(--hand);font-weight:700;line-height:1.05;margin:0 0 .3em}
h2{font-size:40px;margin-top:.4em}
h3{font-size:30px}
p{margin:.4em 0 .8em}
.logo{display:block;width:min(560px,100%);height:auto;margin:0 auto;mix-blend-mode:multiply}
.tag{font-family:var(--hand);font-size:34px;font-weight:700;text-align:center;margin:.2em 0 .1em}
.hero{display:grid;grid-template-columns:1fr minmax(200px,300px);gap:18px;align-items:center;margin-top:8px}
.hero .dog{width:100%;height:auto;transform:rotate(-3deg)}
.hero p{font-size:21px}
.play{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:60px;padding:12px 28px;margin:8px 0;
  background:var(--w-yellow);border:2.5px solid var(--ink);border-radius:16px 12px 18px 11px;box-shadow:3px 4px 0 var(--ink);
  font-family:var(--hand);font-size:32px;font-weight:700;color:var(--ink);text-decoration:none}
.play:hover{transform:rotate(-1deg) translateY(-1px)}
.play:active{transform:translate(2px,3px);box-shadow:1px 1px 0 var(--ink)}
.small{font-size:17px;color:var(--muted)}
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:6px 0 4px}
.shots figure{margin:0;background:#fff;border:2px solid var(--ink);border-radius:12px 9px 13px 8px;padding:6px 6px 2px;box-shadow:2px 3px 0 rgba(91,61,50,.18)}
.shots figure:nth-child(odd){transform:rotate(-.6deg)} .shots figure:nth-child(even){transform:rotate(.5deg)}
.shots img{display:block;width:100%;height:auto;border-radius:7px}
.shots figcaption{font-size:17px;text-align:center;padding:4px 0}
.feats{list-style:none;padding:0;margin:8px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.feats li{border:2px solid var(--ink);border-radius:14px 10px 15px 9px;padding:10px 12px}
.feats b{display:block;font-family:var(--hand);font-size:28px;line-height:1.05}
.feats li:nth-child(6n+1){background:var(--w-mint)} .feats li:nth-child(6n+2){background:var(--w-pink)} .feats li:nth-child(6n+3){background:var(--w-peach)}
.feats li:nth-child(6n+4){background:var(--w-blue)} .feats li:nth-child(6n+5){background:var(--w-lilac)} .feats li:nth-child(6n+6){background:var(--w-yellow)}
.cta{text-align:center;margin-top:18px}
.foot{text-align:center;font-size:17px;padding:16px 8px 4px}
.foot a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px}
.foot .contact{font-weight:700;letter-spacing:.04em}
.prose{max-width:720px;margin:0 auto}
.prose li{margin:.3em 0}
form{display:grid;gap:12px;max-width:440px;margin:10px auto 0}
label span{display:block;font-size:19px;margin-bottom:4px}
input{width:100%;min-height:48px;font-family:var(--read);font-size:19px;color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:10px 8px 11px 7px;padding:8px 12px}
button.play{width:100%;cursor:pointer}
button.play[disabled]{opacity:.6;cursor:default}
.msg{min-height:1.4em;font-size:19px;margin:0}
.msg.bad{color:#9b2c3c}
.center{text-align:center}
.back{display:inline-flex;align-items:center;min-height:44px}
.mail{display:inline-flex;align-items:center;min-height:44px}
.rsdog{display:block;width:180px;height:auto;margin:0 auto}
@media (max-width:700px){
  body{font-size:18px}
  .page{padding:10px 16px 20px}
  .sheet{padding:16px 14px 20px}
  .hero{grid-template-columns:1fr;text-align:center}
  .hero .dog{width:min(240px,70%);margin:0 auto;display:block}
  .tag{font-size:25px}
  h2{font-size:34px}
  .shots{grid-template-columns:1fr}
  .feats{grid-template-columns:1fr 1fr}
  .play{width:100%;font-size:30px}
}
@media (max-width:380px){ .feats{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .play:hover{transform:none} }

/* ===== v2 (17 Oct 2026): the live playroom, the dog cards and profiles (/dogs), and the Japanese touches ===== */
:root{--shu:#C93A2A; --jp:'Hiragino Maru Gothic ProN','Hiragino Sans','Yu Gothic','YuGothic','Meiryo','Noto Sans JP','Noto Sans CJK JP',sans-serif;
  --jpbrush:'Hiragino Mincho ProN','Yu Mincho','YuMincho','Noto Serif JP','Noto Serif CJK JP',serif}
.jp,[lang="ja"]{font-family:var(--jp);font-style:normal}
.h1logo{margin:0}
.top{text-align:center}
.nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 10px;margin:4px 0 10px}
.nav a,.chip{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:4px 16px;border:2px solid var(--ink);border-radius:14px 10px 15px 9px;
  background:var(--w-mint);color:var(--ink);text-decoration:none;font-family:var(--hand);font-size:24px;font-weight:700;line-height:1;cursor:pointer}
.nav a:nth-child(2){background:var(--w-pink)} .nav a:nth-child(3){background:var(--w-blue)}
.nav a:hover,.chip:hover{transform:rotate(-1.5deg)}
.jpw{display:inline-block;font-family:var(--read);font-size:19px;font-weight:400;color:var(--muted);vertical-align:middle;margin-left:6px}
.jpw [lang="ja"]{color:var(--shu);font-size:24px}
i{font-style:italic}

/* the hanko stamp: vermilion ink, a double edge, slightly crooked, a little worn */
.hanko{display:inline-block;width:calc(1.1em + 20px);word-break:break-all;text-align:center;font-family:var(--jpbrush);font-weight:700;font-size:22px;line-height:1.05;letter-spacing:.05em;
  color:var(--shu);border:3px solid var(--shu);outline:1.5px solid var(--shu);outline-offset:-7px;border-radius:9px 7px 10px 6px;padding:9px 7px;transform:rotate(-8deg);
  opacity:.86;mix-blend-mode:multiply;vertical-align:middle;user-select:none}

/* the live scene: world units 1000 x 600 (the game's playroom); everything is placed in % of the stage */
.playroom{margin:10px 0 4px}
.scene{position:relative;overflow:hidden;aspect-ratio:1000/600;border:2.5px solid var(--ink);border-radius:16px 12px 18px 11px;background:#F7E7D2;box-shadow:3px 4px 0 rgba(91,61,50,.18);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.stage{position:absolute;left:0;top:0;width:100%;aspect-ratio:1000/600;container-type:inline-size}
.stage .bg{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
.dd{position:absolute;width:24%;aspect-ratio:6/5;transform:translate(-50%,-93%) scale(var(--s,.6));transform-origin:50% 93%;pointer-events:none}
.dd img{display:block;width:100%;height:100%}
.dd img[hidden]{display:none}
.dd.flip img{transform:scaleX(-1)}
.ball{position:absolute;width:3.2%;height:auto;transform:translate(-50%,-92%);pointer-events:none}
.ball.b1{filter:hue-rotate(190deg)} .ball.b2{filter:hue-rotate(95deg)} .ball.b3{filter:hue-rotate(40deg) saturate(1.3)} /* four ball colours, so each dog can have a favourite */
.scene.live .dd,.scene.live .ball{left:0!important;top:0!important;will-change:transform}
.scene.live{cursor:pointer}
.bark{position:absolute;left:0;top:0;padding:2px 10px;background:#fff;border:2px solid var(--ink);border-radius:12px 9px 13px 8px;font-family:var(--hand);font-size:20px;font-weight:700;
  white-space:nowrap;transform:translate(-50%,-100%);pointer-events:none;animation:bark 1.6s ease-out forwards}
.heart{position:absolute;left:0;top:0;font-size:22px;color:var(--pink);pointer-events:none;animation:heart 1.1s ease-out forwards}
@keyframes bark{0%{opacity:0;margin-top:6px}12%{opacity:1;margin-top:0}80%{opacity:1}100%{opacity:0}}
@keyframes heart{0%{opacity:0;margin-top:0}20%{opacity:1}100%{opacity:0;margin-top:-50px}}
/* a framed picture of Mt. Fuji (the game's own Lookout, in spring) on the blank wall where the game hangs the adoption board */
.wallpic{position:absolute;left:41.5%;top:15%;width:17%;padding:.7%;background:#CFA77C;border:2px solid var(--ink);border-radius:4px;box-shadow:2px 3px 0 rgba(91,61,50,.18);transform:rotate(-1.5deg)}
.wallpic img{display:block;width:100%;height:auto;border:1.5px solid var(--ink)}
.scenebar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 14px;margin-top:8px}
.scenebar .cap{margin:0;text-align:center}
.scenebar .chip{background:var(--w-yellow)}

.cta.big{position:relative;margin-top:14px}
.cta.big .hanko{position:absolute;right:calc(50% - 250px);top:-6px;font-size:20px}
.intro{font-size:21px;max-width:760px;margin:10px auto 6px;text-align:center}
.sec{margin-top:26px;scroll-margin-top:10px}

/* dog cards (home) */
.cards{list-style:none;padding:0;margin:10px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.dcard{display:flex;flex-direction:column;height:100%;padding:8px 12px 12px;border:2px solid var(--ink);border-radius:14px 10px 15px 9px;color:var(--ink);text-decoration:none;
  background:#fff;box-shadow:2px 3px 0 rgba(91,61,50,.16);transition:transform .15s}
.cards li:nth-child(6n+1) .dcard{background:var(--w-mint)} .cards li:nth-child(6n+2) .dcard{background:var(--w-pink)} .cards li:nth-child(6n+3) .dcard{background:var(--w-peach)}
.cards li:nth-child(6n+4) .dcard{background:var(--w-blue)} .cards li:nth-child(6n+5) .dcard{background:var(--w-lilac)} .cards li:nth-child(6n+6) .dcard{background:var(--w-yellow)}
.cards li:nth-child(odd) .dcard:hover{transform:rotate(-1.2deg) translateY(-2px)} .cards li:nth-child(even) .dcard:hover{transform:rotate(1.2deg) translateY(-2px)}
.dimg{display:block;width:100%;height:auto;margin:0 auto -4px}
.dname{font-family:var(--hand);font-weight:700;font-size:32px;line-height:1}
.dtype{font-size:17px;color:var(--muted)}
.dtype .jp{color:var(--shu)}
.dquote{font-size:17px;margin:6px 0 8px;flex:1}
.dmore{font-size:17px;font-weight:700;text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px}

/* Dogs in Japan: a washi-paper panel */
.washi{position:relative;padding:18px 18px 20px;border:2px solid var(--ink);border-radius:16px 12px 17px 11px;background:#FBF4E6 url(/img/art/washi.svg) 0 0/220px 220px}
.washi>h2 .hanko{font-size:20px;margin-left:8px}
.fuji{margin:6px 0 14px;position:relative}
.fuji img{display:block;width:100%;height:auto;border:2px solid var(--ink);border-radius:12px 9px 13px 8px}
.fuji figcaption{font-size:17px;text-align:center;padding-top:4px;color:var(--muted)}
.fuji::before,.notes li::before,.trip::before{content:"";position:absolute;width:96px;height:24px;top:-10px;left:18px;transform:rotate(-4deg);opacity:.8;
  background:repeating-linear-gradient(45deg,rgba(242,143,165,.7) 0 7px,rgba(255,251,243,.7) 7px 14px)}
.notes{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:18px 16px}
.notes li{position:relative;background:var(--paper);border:2px solid var(--ink);border-radius:12px 9px 13px 8px;padding:14px 14px 10px;box-shadow:2px 3px 0 rgba(91,61,50,.14)}
.notes li:nth-child(3n+2)::before{left:auto;right:18px;transform:rotate(3deg);background:radial-gradient(circle,rgba(91,140,110,.55) 2px,transparent 2.6px) 0 0/10px 10px,rgba(200,233,207,.75)}
.notes li:nth-child(3n)::before{background:radial-gradient(circle at 50% 100%,transparent 4px,rgba(120,160,210,.6) 4.5px 6px,transparent 6.5px) 0 0/14px 8px,rgba(203,224,244,.8)}
.notes h3{font-size:30px}
.notes p{margin:.2em 0 .4em}
.shrine img{float:right;width:40%;height:auto;margin:0 0 6px 10px;border:2px solid var(--ink);border-radius:10px 8px 11px 7px}
.words{margin:20px 0 6px}
.words dl{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:8px 0 0}
.words dl>div{background:#fff;border:2px solid var(--ink);border-radius:12px 9px 13px 8px;padding:8px 10px;text-align:center}
.words dt{font-size:28px;color:var(--shu);line-height:1.2}
.words dd{margin:2px 0 0;font-size:17px}
.trip{position:relative;margin-top:22px;padding:14px 16px 10px 16px;background:var(--w-blue);border:2px solid var(--ink);border-radius:14px 10px 15px 9px}
.trip .hanko{float:right;margin:0 0 6px 12px;font-size:24px;background:rgba(255,255,255,.4)}
.trip h3{font-size:32px}

/* falling momiji / sakura / snow (site.js, only with motion allowed) */
.petals{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:5}
.petal{position:absolute;top:-40px;width:22px;height:22px;opacity:.85;animation:fall linear infinite}
@keyframes fall{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(40px,55vh) rotate(200deg)}100%{transform:translate(-10px,112vh) rotate(420deg)}}

/* /dogs */
.small-top h1{font-size:50px;margin-top:6px}
.logo.sm{width:min(300px,70%)}
.homelink{display:inline-block}
.dognav{list-style:none;padding:0;margin:12px 0 4px;display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.dognav a{display:flex;flex-direction:column;align-items:center;min-height:44px;padding:2px 2px 6px;border:2px solid var(--ink);border-radius:12px 9px 13px 8px;background:#fff;
  color:var(--ink);text-decoration:none;font-size:17px;line-height:1.1}
.dognav img{width:100%;height:auto}
.prof{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:start;padding:26px 4px 22px;border-top:2.5px dashed var(--dot);scroll-margin-top:8px}
.prof:target{background:linear-gradient(transparent,rgba(249,208,217,.35) 30%,transparent)}
.pics{position:relative;padding-bottom:34px}
.pics .big{display:block;width:88%;height:auto}
.pics .pup{position:absolute;right:-6px;bottom:18px;width:46%;height:auto}
.pics .cap{position:absolute;right:0;bottom:0;font-family:var(--hand);font-weight:700;font-size:21px;color:var(--muted);transform:rotate(2deg)}
.prof h2{font-size:48px;margin:0}
.prof h2 .dtype{font-family:var(--hand);font-size:30px}
.jpline{font-size:18px;color:var(--muted);margin:.1em 0 .5em}
.jpline .jp{color:var(--shu);font-size:22px;white-space:nowrap}
.bubble{position:relative;display:inline-block;background:#fff;border:2.5px solid var(--ink);border-radius:18px 14px 19px 12px;padding:6px 16px;font-family:var(--hand);font-size:28px;font-weight:700;line-height:1.15;margin:.2em 0 .7em}
.bubble::after{content:"";position:absolute;left:26px;bottom:-12px;width:16px;height:16px;background:#fff;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:rotate(45deg) skew(10deg,10deg)}
.traits{list-style:none;padding:0;margin:6px 0 10px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.traits li{border:2px solid var(--ink);border-radius:12px 9px 13px 8px;padding:6px 10px;background:var(--paper)}
.traits li:nth-child(4n+1){background:var(--w-mint)} .traits li:nth-child(4n+2){background:var(--w-pink)} .traits li:nth-child(4n+3){background:var(--w-yellow)} .traits li:nth-child(4n+4){background:var(--w-blue)}
.traits b{display:block;font-family:var(--hand);font-size:26px;line-height:1}
.playline{margin:.3em 0 .6em}
.loves{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px}
.loves>b{font-family:var(--hand);font-size:28px;color:#D8607E}
.loves ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;padding:0;margin:0}
.loves li{display:flex;flex-direction:column;align-items:center;font-size:17px;color:var(--muted);width:92px;text-align:center;line-height:1.1}
.loves img{width:56px;height:56px}
.fun{background:var(--w-yellow);border:2px dashed var(--ink);border-radius:12px 9px 13px 8px;padding:8px 12px;margin-top:12px}
.fun .tip{font-weight:700}
.fun .tip [lang="ja"]{color:var(--shu)}
/* more dogs are coming: crayon silhouettes with a question mark */
.soon{display:flex;flex-direction:column;height:100%;padding:8px 12px 12px;border:2.5px dashed var(--ink);border-radius:14px 10px 15px 9px;background:var(--paper)}
.sils{display:flex;justify-content:center;align-items:flex-end;gap:2px}
.sil{position:relative;flex:1;max-width:120px}
.sil img{display:block;width:100%;height:auto;filter:brightness(0);opacity:.2}
.sil b{position:absolute;left:0;right:0;top:22%;text-align:center;font-family:var(--hand);font-size:34px;color:var(--pink)}
.soon .dname{font-size:30px}
.soonprof{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:center;padding:26px 4px 22px;border-top:2.5px dashed var(--dot);scroll-margin-top:8px}
.soonprof h2{font-size:44px;margin:0}
.soonprof .sil{max-width:none}
.soonprof .sil b{font-size:48px}

@media (max-width:860px){ .cta.big .hanko{right:8px;top:-14px} .dognav{grid-template-columns:repeat(5,1fr)} }
@media (max-width:700px){
  .nav a{font-size:21px;padding:4px 12px}
  .scene{aspect-ratio:700/600}
  .stage{width:142.857%;left:-21.4286%}
  .scenebar .chip{width:100%}
  .cta.big .hanko{display:none}
  .intro{font-size:19px}
  .cards{grid-template-columns:1fr 1fr;gap:10px}
  .soonli{grid-column:1/-1}
  .dcard{padding:6px 8px 10px}
  .dname{font-size:28px}
  .notes{grid-template-columns:1fr}
  .words dl{grid-template-columns:1fr 1fr}
  .washi{padding:14px 12px 16px}
  .shrine img{width:44%}
  .small-top h1{font-size:40px}
  .jpw{display:block;margin:4px 0 0}
  .dognav{grid-template-columns:repeat(4,1fr);gap:6px}
  .prof,.soonprof{grid-template-columns:1fr;gap:6px;padding-top:20px}
  .soonprof .sils{width:min(320px,92%);margin:0 auto}
  .pics{width:min(320px,92%);margin:0 auto}
  .prof h2{font-size:42px}
  .traits{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){ .nav a:hover,.chip:hover,.dcard:hover{transform:none!important} .petals{display:none} .bark,.heart{animation:none} }