/* White paper, comic ink, and an unnecessarily extravagant lottery. */
:root{color-scheme:light;--bg:#fff;--panel:#fff;--ink:#24202a;--muted:#6e6777;--line:#24202a22;--cyan:#008fdf;--gold:#ffce00;--violet:#f52687;--pink:#f52687;--blue:#00b9ed;--yellow:#ffe600}
body,body.is-result{background:#fff;color:var(--ink);font-family:"Arial Black","Yu Gothic","Meiryo",sans-serif}
body:before{z-index:-1;background:radial-gradient(circle,#24202a14 1.2px,transparent 1.5px) 0 0/18px 18px;opacity:.7}
body .workspace{isolation:isolate}
.workspace:before{content:none}
.primary,body[data-scene="start"] .primary{color:var(--ink);background:var(--yellow);border:3px solid var(--ink);border-radius:18px;font-weight:900;box-shadow:6px 6px 0 var(--ink);transition:translate .15s,box-shadow .15s}
body[data-scene="start"] .actions{width:min(370px,100%);position:relative}
body[data-scene="start"] .actions:before{content:none}
body[data-scene="start"] .primary{height:118px;flex-direction:column;gap:12px;font-size:25px;letter-spacing:0;white-space:nowrap;transform:none;box-shadow:8px 8px 0 var(--ink),15px 15px 0 var(--blue)}
body[data-scene="start"] .primary:after{content:"つくる →";position:static;display:block;font-size:13px;letter-spacing:2px;color:var(--ink);opacity:1;transform:none}
.primary:hover:not(:disabled),body[data-scene="start"] .primary:hover{translate:-3px -3px;box-shadow:9px 9px 0 var(--ink)}
.primary:active:not(:disabled){translate:4px 4px;box-shadow:2px 2px 0 var(--ink)}
.primary:disabled{color:#6e6777;background:#fff5a8;border-color:var(--ink);box-shadow:4px 4px 0 #24202a66}
.primary:before{background:linear-gradient(90deg,transparent,#fff9,transparent)}
.secondary{background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--blue);font-weight:900}
.secondary:hover:not(:disabled){background:#dff9ff;border-color:var(--ink)}
body[data-scene="start"] #status:not(:empty){color:#b22262;background:#fff;padding:12px;border:2px solid #b22262;border-radius:10px}
.control-panel>h2{align-self:center;font-weight:900;font-size:16px;letter-spacing:2px;color:var(--ink);background:var(--yellow);padding:8px 22px;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--pink);border-radius:6px;transform:rotate(-3deg)}
body[data-scene="name"] .name-stage{padding:35px 20px;background:#fff;border:3px solid var(--ink);border-radius:24px;box-shadow:10px 10px 0 var(--pink);transform:rotate(1deg)}
#nameValue{font-weight:900;line-height:1.35;text-shadow:3px 3px 0 #ffe60080;color:var(--ink)}
.name-stage.drawing #nameValue,.name-part.is-drawing{color:#0084cb;text-shadow:3px 3px 0 #00b9ed30;filter:none}
.name-part.is-settled{color:var(--pink);text-shadow:3px 3px 0 #ffe60080;animation:popLock .45s cubic-bezier(.2,1.7,.4,1)}
#nameReading{color:var(--muted);font-weight:700}
body[data-scene="birthday"] .birthday-stage{padding:28px 24px;background:#fff;border:3px solid var(--ink);border-radius:24px;box-shadow:10px 10px 0 var(--blue);transform:rotate(-1deg)}
.birthday-reel-window{border:2px solid var(--ink);background:linear-gradient(#e9e5ec,#fff 25%,#fff 75%,#e9e5ec);border-radius:12px;box-shadow:none}
.birthday-reel-window:after{background:linear-gradient(#e9e5ec99,transparent 24%,transparent 76%,#e9e5ec99)}
.birthday-reel-strip>span{color:var(--ink);font-weight:900;text-shadow:none}
body[data-scene="birthday"] .birthday-reel-strip>span{height:calc(var(--reel-height) - 4px)}
.birthday-reel.is-stopped .birthday-reel-window{background:#c9f2e5;border-color:var(--ink);box-shadow:4px 4px 0 var(--pink);animation:popLock .4s cubic-bezier(.2,1.7,.4,1)}
.birthday-reel.is-stopped .birthday-reel-window:after{background:none}
.birthday-reel.is-stopped .birthday-reel-strip>span{color:var(--ink);text-shadow:none}
.birthday-reel>b{color:var(--ink);font-weight:900!important}
body[data-scene="avatar"] #avatarPreview{border:4px solid var(--ink);border-radius:22px;box-shadow:10px 10px 0 var(--yellow),16px 16px 0 var(--pink);transform:rotate(-3deg);background:#fff}
.avatar-stage #avatarPreview:after{background:none}
.avatar-progress i{width:7px;height:7px;background:#e6e1eb;border:1px solid #24202a33}
.avatar-progress i.active{background:var(--pink);box-shadow:0 0 0 3px #f5268722}
.avatar-progress i.done{background:var(--yellow);border-color:var(--ink)}
.avatar-layer.is-drawing{filter:drop-shadow(0 0 2px var(--pink))}
body[data-scene="avatar"] #avatarPreview{transform:none;border:3px solid var(--ink);border-radius:12px;box-shadow:7px 7px 0 var(--yellow);background:#e1e3e5}
body[data-scene="avatar"] .avatar-progress{display:none}
body[data-scene="avatar"] .avatar-stage.drawing #avatarPreview{animation:portraitShuffle .18s ease-in-out infinite alternate}
body[data-scene="avatar"] .avatar-stage.is-settled #avatarPreview{animation:popLock .4s ease-out both}
@keyframes portraitShuffle{from{border-color:#24202a}to{border-color:#008fdf}}
body[data-scene="engrave"] #liveCardPanel{background:radial-gradient(ellipse,#fff 0 24%,#fff0 72%),repeating-conic-gradient(from 5deg,#ffe60090 0deg 8deg,#fff 8deg 15deg,#00b9ed55 15deg 19deg,#fff 19deg 28deg,#f5268744 28deg 32deg,#fff 32deg 40deg);backdrop-filter:none}
body[data-scene="engrave"] .live-card-caption{color:var(--ink);font-weight:900;letter-spacing:2px;font-size:17px}
.live-card-mount{filter:drop-shadow(7px 9px 0 #24202a) drop-shadow(9px 10px 0 #00b9ed)}
.live-card-panel.is-writing .live-card-frame{animation:popCardArrival calc(.55s * var(--engrave-time-scale, 1)) cubic-bezier(.2,1.3,.4,1) both}
.live-card-panel.is-writing .live-card-frame:before{border:9px double var(--pink);box-shadow:0 0 0 12px #ffe600cc,0 0 0 23px #00b9ed88,0 0 50px #f5268788;inset:-16px;animation:popRing calc(1.35s * var(--engrave-time-scale, 1)) calc(.24s * var(--engrave-time-scale, 1)) ease-out both}
.live-card-panel.is-writing .live-card-frame:after{background:repeating-conic-gradient(#f5268700 0deg 7deg,#f5268799 7deg 9deg,#f5268700 9deg 16deg,#ffe600cc 16deg 19deg,#00b9ed00 19deg 27deg,#00b9ed99 27deg 29deg,#00b9ed00 29deg 36deg);mask-image:radial-gradient(ellipse,#000 15%,transparent 68%);animation:engraveRays calc(1.8s * var(--engrave-time-scale, 1)) calc(.24s * var(--engrave-time-scale, 1)) ease-out both}
.live-card-panel.is-writing:after{content:"";position:absolute;inset:0;background:#fff;pointer-events:none;animation:engraveFlash calc(.65s * var(--engrave-time-scale, 1)) calc(.24s * var(--engrave-time-scale, 1)) ease-out both}
.live-card-panel.is-writing .live-card-mount{animation:engraveImpact calc(.48s * var(--engrave-time-scale, 1)) calc(.24s * var(--engrave-time-scale, 1)) ease-out both}
.engrave-beam,.engrave-beam-halo,.engrave-beam-core{fill:none;pointer-events:none;animation:engraveSweep 1.35s .1s ease-in-out both}
.engrave-beam{stroke:#fff;stroke-width:12;filter:drop-shadow(0 0 5px #ffe600) drop-shadow(0 0 14px #f52687)}
.engrave-beam-halo{stroke:#ffe600;stroke-width:46;stroke-opacity:.55;filter:drop-shadow(0 0 12px #ff8900)}
.engrave-beam-core{stroke:#fff;stroke-width:3;filter:drop-shadow(0 0 3px #00b9ed)}
.engrave-laser{overflow:hidden;z-index:5}
.engrave-laser .engrave-beam,.engrave-laser .engrave-beam-halo,.engrave-laser .engrave-beam-core{animation:none;transform:none;opacity:1;stroke-linecap:round}
.engrave-laser .engrave-beam-halo{stroke:#ff6a00;stroke-width:18;stroke-opacity:.25;filter:drop-shadow(0 0 9px #ff7200)}
.engrave-laser .engrave-beam{stroke:#ffbc31;stroke-width:5;filter:drop-shadow(0 0 5px #ff6800)}
.engrave-laser .engrave-beam-core{stroke:#fff;stroke-width:1.7;filter:none}
.laser-contact-glow{fill:#ffb000;fill-opacity:.45;filter:drop-shadow(0 0 7px #ff6a00)}
.laser-contact-core{fill:#fff;filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px #ffb000)}
.laser-spark{fill:none;stroke:#ff9d00;stroke-width:2;stroke-linecap:round}
.laser-spark:nth-child(3n){stroke:#ffdf70;stroke-width:1.2}
.live-card-mount .card-field.is-new{animation:popField calc(.65s * var(--engrave-time-scale, 1)) ease-out both}
.live-card-mount .card-field.is-new .field-impact{animation:none}
.live-card-mount .card-field.is-new text{animation:none}
.live-card-mount .card-field.is-new .laser-letters{filter:drop-shadow(0 0 2px #ff9700) drop-shadow(0 0 5px #ffcc57)}
.card-celebration{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.live-card-panel.is-writing .live-card-caption{position:relative;z-index:4}
.live-card-mount .card-field[data-ready="false"]{opacity:.38}
.live-card-mount .card-id[data-ready="false"]{opacity:.38}
.confetti i{width:10px;height:16px;box-shadow:none;animation:popConfetti 1.65s var(--delay) cubic-bezier(.16,.65,.3,1) forwards;border:1px solid #24202a55}
.confetti i:nth-child(3n){width:14px;height:14px;clip-path:polygon(50% 0,62% 35%,100% 35%,70% 58%,82% 100%,50% 75%,18% 100%,30% 58%,0 35%,38% 35%);border:0}
.confetti i:nth-child(3n + 1){border-radius:50%;width:10px;height:10px}
body.is-result .result-section{background:#fff}
body.is-result .result-section:before{inset:auto;left:50%;top:50%;width:150vmax;height:150vmax;z-index:-2;background:repeating-conic-gradient(#00b9ed00 0deg 10deg,#00b9ed44 11deg 13deg,#00b9ed00 14deg 24deg),repeating-conic-gradient(from 5deg,#ffe60040 0deg 8deg,#fff 8deg 20deg,#f526871c 20deg 24deg,#fff 24deg 40deg);mask-image:none;opacity:1;transform:translate(-50%,-50%);animation:popFinalBackground 6.4s linear infinite}
body.is-result .result-section:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse,#fff 0 40%,#fff0 75%);pointer-events:none}
body.is-result .card-shell:before,body.is-result .card-shell:after{content:none}
body.is-result .card-mount{filter:drop-shadow(0 10px 22px #24202a24)}
body.is-result .result-section.revealed .card-mount{animation:popFinalArrival 1s cubic-bezier(.2,1.3,.4,1) both}
body.is-result .result-actions .primary,body.is-result .result-actions .secondary{display:inline-flex;align-items:center;justify-content:center;width:145px;height:48px;padding:0;gap:12px;line-height:1;border:2px solid var(--ink);background:var(--yellow);color:var(--ink);font-size:12px;font-weight:900;border-radius:12px;box-shadow:4px 4px 0 var(--ink)}
@media(max-width:680px){body.is-result .result-actions .primary,body.is-result .result-actions .secondary{width:128px}}
body.is-result .result-actions .secondary{background:#fff;box-shadow:4px 4px 0 var(--pink)}
body.is-result .result-layout{width:min(900px,100%,calc((100svh - 190px) * 1.6))}
.result-credits{flex-basis:100%;color:var(--muted);font-size:10px;line-height:1.6;text-align:center;text-underline-offset:3px}
.result-credits:hover{color:var(--ink)}
.result-credits:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.result-actions .save-note{color:var(--muted)}
.debug-controls,.debug-controls>span,.debug-controls a{color:var(--ink)}
.debug-controls{justify-content:center;gap:0;background:transparent;border:0;padding:0;box-shadow:none}
.debug-controls a{white-space:nowrap}
.debug-controls button{width:100%;height:36px;padding:8px 16px;background:#fff;border:1px solid var(--ink);border-radius:8px;color:var(--ink);font-size:12px;line-height:1.4}
body.is-debug[data-scene="map"] #status:not(:empty){background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:8px}
body .map-panel,body .map-panel #map{background:#eefaff}
.leaflet-tile-pane{filter:saturate(.7) brightness(1.04)}
body[data-scene="map"] .map-panel:after{box-shadow:none}
body[data-scene="map"] .map-heading #mapTitle{color:var(--ink);background:#fff;padding:7px 18px;border:2px solid var(--ink);border-radius:12px;box-shadow:4px 4px 0 var(--yellow);text-shadow:none;font-weight:900;transform:rotate(-2deg)}
.leaflet-control-attribution{background:#ffffffed!important;color:#6e6777!important}
.leaflet-control-attribution a{color:#006baa!important}
.leaflet-control-zoom{border:2px solid var(--ink)!important;box-shadow:3px 3px 0 var(--blue)!important}
.leaflet-control-zoom a{background:#fff!important;color:var(--ink)!important;border-bottom-color:var(--ink)!important}
.map-overview{background:var(--yellow);border:2px solid var(--ink);color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.map-network-status{background:#fff;border:1px solid #bcb5c6;color:var(--muted)}
.avatar-stage .emoji-layer.is-pending{visibility:hidden}
.avatar-stage .emoji-layer.is-rolling{animation:portraitPartRoll .11s ease-out both}
.avatar-stage .emoji-layer.is-locking{animation:portraitPartLock .26s cubic-bezier(.16,1,.3,1) both}
.avatar-stage [data-emoji-part="base"]{--portrait-entry-x:0px;--portrait-entry-y:-25px}
.avatar-stage [data-emoji-part="eyes"],.avatar-stage [data-emoji-part="glasses"]{--portrait-entry-x:-28px;--portrait-entry-y:0px}
.avatar-stage [data-emoji-part="mouth"]{--portrait-entry-x:24px;--portrait-entry-y:5px}
@keyframes portraitPartRoll{from{opacity:.3;translate:0 -7px}to{opacity:1;translate:0 0}}
@keyframes portraitPartLock{from{opacity:0;translate:var(--portrait-entry-x) var(--portrait-entry-y)}to{opacity:1;translate:0 0}}
@keyframes emojiBaseJoin{from{opacity:0;scale:.6}to{opacity:1;scale:1}}@keyframes emojiEyesJoin{from{opacity:0;translate:-55px -20px}to{opacity:1;translate:0 0}}@keyframes emojiMouthJoin{from{opacity:0;translate:45px 30px}to{opacity:1;translate:0 0}}@keyframes emojiHatJoin{from{opacity:0;translate:0 -40px}to{opacity:1;translate:0 0}}
.leaflet-tooltip.pref-tooltip,.place-tooltip,.leaflet-tooltip.draw-place-tooltip{background:#fff;border:2px solid var(--ink);color:var(--ink);border-radius:10px;box-shadow:4px 4px 0 var(--yellow)}
.draw-place-tooltip small{color:#a51c60;font-weight:900}
.draw-place-tooltip strong{font-weight:900}
.leaflet-tooltip-top.draw-place-tooltip:before{border-top-color:var(--ink)}
.pin-head{background:var(--pink);border:3px solid var(--ink);box-shadow:3px 3px 0 #ffe600}
.pin-head:after{background:#fff}
.draw-pin-head{background:var(--blue);border:2px solid var(--ink);box-shadow:3px 3px 0 #24202a22}
.draw-pin-head:after{background:#fff}
.is-settled .draw-pin-head{background:var(--yellow);border-color:var(--ink)}
.is-settled .draw-pin-head:after{background:var(--ink)}
.draw-pin-ring{border:2px solid var(--pink)}
.municipality-outline,.municipality-outline.is-drawing{filter:drop-shadow(0 0 3px #f5268766)}
.municipality-outline.is-settled{filter:drop-shadow(0 0 4px #008fdf55)}
.address-highlight{filter:drop-shadow(0 0 4px #f5268788)}
.address-highlight-ring{filter:none}
.address-highlight.is-settled,.address-highlight-ring.is-settled{filter:drop-shadow(0 0 4px #008fdf66)}
@keyframes popLock{from{scale:1.16;rotate:-3deg}to{scale:1;rotate:0deg}}
@keyframes popCardArrival{from{opacity:0;transform:scale(.7) rotate(-8deg)}70%{opacity:1;transform:scale(1.04) rotate(2deg)}to{opacity:1;transform:none}}
@keyframes popFinalArrival{from{opacity:0;transform:scale(.55) rotate(-15deg)}60%{opacity:1;transform:scale(1.04) rotate(3deg)}to{opacity:1;transform:none}}
@keyframes popFinalBackground{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes popRing{from{opacity:1;transform:scale(.95)}to{opacity:0;transform:scale(1.65)}}
@keyframes popField{from{transform:translateY(8px);opacity:.2}to{transform:none;opacity:1}}
@keyframes engraveRays{from{opacity:0;transform:rotate(-22deg) scale(.65)}18%{opacity:1}to{opacity:0;transform:rotate(28deg) scale(1.45)}}
@keyframes engraveFlash{from{opacity:.85}to{opacity:0}}
@keyframes engraveImpact{0%,100%{translate:0 0}15%{translate:-7px 4px}30%{translate:6px -3px}50%{translate:-4px 2px}75%{translate:2px -1px}}
@keyframes popConfetti{0%{opacity:0;transform:rotate(var(--angle)) translateX(0) rotate(0) scale(.3)}12%{opacity:1}80%{opacity:1}100%{opacity:0;transform:rotate(var(--angle)) translateX(var(--distance)) rotate(340deg) scale(.7)}}
@media(max-width:680px){body[data-scene="start"] .actions{width:240px}body[data-scene="start"] .primary{height:80px;font-size:28px}.control-panel>h2{font-size:13px}body[data-scene="name"] .name-stage{padding:24px 14px;box-shadow:6px 6px 0 var(--pink)}body[data-scene="birthday"] .birthday-stage{padding:22px 12px;box-shadow:6px 6px 0 var(--blue)}body[data-scene="birthday"] .birthday-reel-strip>span{font-size:32px}body[data-scene="engrave"] .live-card-caption{font-size:14px}.live-card-mount{filter:drop-shadow(4px 5px 0 #24202a) drop-shadow(5px 6px 0 #00b9ed)}body.is-result .card-mount{filter:drop-shadow(0 6px 14px #24202a24)}body[data-scene="map"] .map-heading{left:65px;right:50px}.avatar-progress{gap:7px!important}}
@media(prefers-reduced-motion:reduce){.live-card-panel.is-writing:after,.card-celebration,.engrave-effect{display:none}.live-card-panel.is-writing .live-card-frame,body.is-result .result-section.revealed .card-mount{animation:none;transform:none;opacity:1}body.is-result .result-section:before{animation:none;opacity:1}}

@keyframes emojiBodyJoin{from{opacity:0;translate:0 45px}to{opacity:1;translate:0 0}}
@media(max-width:680px){body[data-scene="start"] .actions{width:min(290px,calc(100vw - 84px))}body[data-scene="start"] .primary{height:110px;font-size:20px;letter-spacing:0;padding-inline:10px}}

/* Open the selected address from the finished card. */
#cardMount [data-card-field="address"]{cursor:pointer;outline:none}#cardMount [data-card-field="address"]:focus-visible .field-impact{stroke-opacity:.8;stroke-width:2}
.address-map-dialog{width:min(800px,calc(100vw - 32px));max-width:none;max-height:calc(100svh - 32px);padding:0;border:3px solid var(--ink);border-radius:16px;background:#fff;color:var(--ink);box-shadow:8px 8px 0 var(--yellow);overflow:hidden}.address-map-dialog::backdrop{background:#24202a99;backdrop-filter:blur(4px)}.address-map-heading{display:flex;align-items:center;gap:18px;padding:18px 20px;border-bottom:2px solid var(--ink)}.address-map-heading h2{flex:1;min-width:0;margin:0;font:800 16px/1.6 "Yu Gothic","Meiryo",sans-serif;letter-spacing:0;overflow-wrap:anywhere}.address-map-heading button{display:grid;place-items:center;flex:none;width:36px;height:36px;padding:0;border:2px solid var(--ink);border-radius:8px;background:#fff;color:var(--ink);font:28px/1 sans-serif}.address-map-heading button:hover{background:var(--yellow)}.address-map-content{position:relative}#resultAddressMap{width:100%;height:min(480px,60svh);min-height:220px;background:#f2f1f4}#addressMapStatus{position:absolute;z-index:500;left:50%;top:16px;transform:translateX(-50%);margin:0;padding:8px 12px;background:#fff;border:1px solid var(--ink);border-radius:6px;white-space:nowrap;font:12px/1.5 "Yu Gothic",sans-serif}
@media(max-width:680px){.address-map-heading{padding:12px;gap:12px}.address-map-heading h2{font-size:13px}.address-map-dialog{border-radius:12px;box-shadow:5px 5px 0 var(--yellow)}}

/* An old-fashioned hidden link, revealed by text selection. */
.result-secret-link,.result-secret-link:visited,.result-secret-link:hover,.result-secret-link:active{position:fixed;right:12px;bottom:8px;z-index:10;padding:2px;color:transparent;-webkit-text-fill-color:transparent;text-decoration:none;text-shadow:none;font:12px/1.5 "Yu Gothic","Meiryo",sans-serif;user-select:text;-webkit-user-select:text}
.result-secret-link::selection{color:#fff;-webkit-text-fill-color:#fff;background:#24202a}
.result-secret-link:focus-visible{outline:1px dashed #8b8792;outline-offset:3px}

/* Age burst with a pale translucent yellow backdrop. */
.age-burst{pointer-events:none}
.age-burst-impact{transform-box:fill-box;transform-origin:center;animation:ageBurstPop 650ms ease-out both}
.age-burst-shape{fill:rgba(255,230,0,.25);stroke:#000;stroke-width:.75;stroke-linejoin:round;filter:none}
.age-burst-value{fill:#f52687;stroke:#24202a;stroke-width:1;paint-order:stroke fill;font-family:"Arial Black","Yu Gothic","Meiryo",sans-serif;font-size:40px;font-weight:900;letter-spacing:-1px;text-shadow:1px 1px 0 #fff}
.age-burst-unit{font-size:22px;letter-spacing:0}
@keyframes ageBurstPop{0%{opacity:0;transform:scale(.3) rotate(-10deg)}18%{opacity:1;transform:scale(1.22) rotate(5deg)}32%{transform:scale(.96) rotate(-4deg)}48%{transform:translate(2px,-1px) scale(1.04) rotate(2deg)}65%,76%{opacity:1;transform:scale(1) rotate(-3deg)}100%{opacity:0;transform:scale(1.12) rotate(4deg)}}
@media(prefers-reduced-motion:reduce){.age-burst{display:none}.age-burst-impact{animation:none}}