/*! (c) 2026 taproute.io. All rights reserved. Doodland is proprietary: no licence to copy, host, modify or reuse. */
:root { --ui: ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --ink: #2a2438; --line: #4e4868; --soft: #5b5470; --paper: #fffdf3;
--yellow: #ffd23f; --green: #8be28b; --pink: #ffb3c7; --blue: #9bdcff; --lilac: #e3d0ff; --purple: #b07cff; --red: #ff5d73; --spring: cubic-bezier(.3,1.5,.5,1);
--sat: env(safe-area-inset-top); --sab: env(safe-area-inset-bottom); --sal: env(safe-area-inset-left); --sar: env(safe-area-inset-right); }
html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body { font-family: var(--ui); font-weight: 600; color: var(--ink); -webkit-text-size-adjust: 100%; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
background-color: #fffbea;
background-image: linear-gradient(90deg, transparent 58px, rgba(230,80,80,.35) 58px, rgba(230,80,80,.35) 60px, transparent 60px),
repeating-linear-gradient(0deg, transparent 0 31px, rgba(90,150,220,.25) 31px 32px); }
body.inworld { background-image: none; }
* { box-sizing: border-box; }
.marker { font-family: 'Permanent Marker', 'Comic Sans MS', cursive; font-weight: 400; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
#game { position: fixed; inset: 0; z-index: 0; touch-action: none; }
#game canvas { touch-action: none; display: block; }
.doodle-btn { border: 2.5px solid var(--line); box-shadow: 3px 3px 0 var(--line); border-radius: 1rem; background: #fff; color: var(--ink); transition: transform .08s, box-shadow .08s, background .15s;
-webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.doodle-btn:hover { transform: translate(-1px,-2px) rotate(-1deg); box-shadow: 4px 5px 0 var(--line); }
.doodle-btn:active, .doodle-btn.down { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--line); }
.doodle-btn:focus-visible { outline: 3px dashed var(--purple); outline-offset: 3px; }
.doodle-btn[disabled] { opacity: .45; pointer-events: none; }
.bg-green { background: var(--green); } .bg-yellow { background: var(--yellow); } .bg-pink { background: var(--pink); } .bg-blue { background: var(--blue); } .bg-lilac { background: var(--lilac); }
@keyframes wob { 0%,100% { transform: rotate(-2deg) } 50% { transform: rotate(2deg) } }
.wob { animation: wob 2.4s ease-in-out infinite; }
.pill { display: inline-block; background: rgba(255,253,243,.94); border: 2.5px solid var(--line); border-radius: 999px; padding: .15rem 1.1rem; box-shadow: 3px 3px 0 var(--line); }
.panel { background: rgba(255,253,243,.92); border: 2.5px solid var(--line); border-radius: 1.6rem; box-shadow: 4px 5px 0 var(--line); padding: .7rem .6rem .8rem; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.title-sticker { text-shadow: 3px 3px 0 #fff, -3px -3px 0 #fff, 3px -3px 0 #fff, -3px 3px 0 #fff, 0 6px 0 rgba(78,72,104,.35); }
.muted { color: var(--soft); }
@keyframes rise { 0% { transform: translateY(18px) scale(.94); opacity: 0 } 100% { transform: none; opacity: 1 } }
@keyframes drop { 0% { transform: translateY(-26px); opacity: 0 } 100% { transform: none; opacity: 1 } }
#topbar { position: fixed; z-index: 5; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: .6rem; pointer-events: none;
padding: max(.5rem, var(--sat)) max(.6rem, var(--sar)) 0 max(.6rem, var(--sal)); }
#topbar > * { pointer-events: auto; }
.back { display: inline-flex; align-items: center; gap: .3rem; height: 46px; min-width: 46px; padding: 0 .8rem 0 .45rem; font-size: 1.15rem; text-decoration: none; animation: drop .5s var(--spring) both; }
.back svg { width: 32px; height: 32px; flex: none; }
@media (max-width: 420px) { .back span { display: none; } .back { padding: 0 .35rem; } }
#placeName { font-size: clamp(1.05rem, 4.2vw, 1.45rem); padding: .12rem 1.1rem .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100vw - 9rem);
transform: rotate(-1.5deg); animation: drop .5s var(--spring) .1s both; }
#loading { position: fixed; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .7rem; transition: opacity .45s; pointer-events: none; }
#loading.gone { opacity: 0; }
#loading h1 { margin: 0; font-weight: 400; font-size: clamp(2.4rem, 9vw, 4rem); line-height: .95; text-align: center; animation: drop .5s var(--spring) both; }
#loading h1 .b { color: var(--purple); }
#loading .pill { animation: rise .45s var(--spring) .2s both; font-size: 1.05rem; }
@media (prefers-reduced-motion: reduce) { .wob, .back, #placeName, #loading h1, #loading .pill { animation: none !important; } }
#legal { position: fixed; z-index: 3; left: 50%; transform: translateX(-50%); bottom: max(.35rem, var(--sab)); display: flex; gap: .55rem; font-size: .78rem; font-weight: 600;
background: rgba(255,253,243,.82); border: 1.5px solid rgba(78,72,104,.35); border-radius: 999px; padding: .1rem .7rem; white-space: nowrap; }
#legal a { color: var(--soft); text-decoration: none; } #legal a:hover, #legal a:focus-visible { color: var(--ink); text-decoration: underline; }
@media (max-width: 720px) { #legal { left: auto; transform: none; right: max(.35rem, var(--sar)); bottom: calc(max(.35rem, var(--sab)) + 84px); flex-direction: column; align-items: flex-end; gap: .05rem; border-radius: .7rem; padding: .15rem .45rem; font-size: .7rem; } }