*{box-sizing:border-box}.postcard-page{max-width:1320px;margin:auto;padding:16px}.page-heading{padding:4px 4px 16px;color:#294966}.page-heading h1{font-size:28px;margin:0}.page-heading p{font-size:14px;margin:5px 0 0}.postcard-page #host{position:relative;isolation:isolate;height:780px;min-height:630px;display:flex;flex-direction:column;color:#294966;background:#f9f6eb;border:2px solid #bac6b3;border-radius:10px;overflow:hidden;font-family:'Zen Maru Gothic',sans-serif}.postcard-page #host [hidden]{display:none!important}#host button{font:inherit;font-weight:700;font-size:14px;line-height:1.35;min-height:44px;padding:9px 14px;background:#fffdf4;color:#294966;border:1px solid #a9b4b5;border-radius:8px;cursor:pointer;touch-action:manipulation}#host button:hover{background:#eaf0e3}#host button:disabled{opacity:.5;cursor:default}#host button:focus-visible,#text:focus-visible{outline:3px solid #b33f40;outline-offset:3px}#host button.primary{background:#365d7c;color:white;border-color:#274864}#host button.primary:hover{background:#244660}.postcard-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;background:#f5f1e2;border-bottom:5px solid transparent;border-image:repeating-linear-gradient(135deg,#b7524b 0 12px,#f5f1e2 12px 24px,#537087 24px 36px,#f5f1e2 36px 48px) 5;flex:none}.postcard-top strong{font-size:16px}.postcard-top nav{display:flex;gap:5px}.postcard-top button{font-size:12px!important;padding:6px 10px!important}#base{flex:1;min-height:0;position:relative}#cover{height:100%;padding:24px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;text-align:center;background:#e8eddf}#cover header small{font-size:12px}#cover h2{font-size:44px;margin:6px 0;color:#aa4f45;letter-spacing:.06em}.cover-art{height:100%;width:100%;object-fit:contain;min-height:0;background:#faf6ea;border:8px solid #faf6ea;box-shadow:0 5px 14px #364b3020}#cover footer{display:flex;flex-direction:column;align-items:center;gap:9px}#cover #start{font-size:20px;padding:13px 40px;border-radius:40px}#ready-note{font-size:11px}#play{height:100%;padding:18px;display:grid;grid-template-columns:90px minmax(0,1fr) 200px;grid-template-rows:minmax(0,1fr) auto auto;gap:12px;background:#faf6ea url('./assets/desk.webp') center/cover}#play h2{font-size:13px;margin:0 0 9px}.palette{display:flex;flex-direction:column;align-items:center;justify-content:center}#backgrounds{display:flex;flex-direction:column;gap:12px;width:100%;align-items:center}#backgrounds button{width:70px;min-height:56px;padding:5px;border:4px solid white;box-shadow:0 2px 4px #35413526;font-size:10px;color:#435664}#backgrounds button[aria-pressed=true]{outline:3px solid #ac5348;outline-offset:2px}#artboard-wrap{width:100%;height:100%;min-height:0;display:flex;justify-content:center;align-items:center}#card{position:relative;flex:none;background:white;box-shadow:0 0 0 8px white,0 7px 15px #4c4d3938}#preview{display:block;width:100%;height:100%}#stamps{position:absolute;inset:0}#host .placed-stamp{position:absolute;transform:translate(-50%,-50%);width:max(44px,9.048%);height:auto;aspect-ratio:1;min-height:44px;padding:0;border:2px solid transparent;border-radius:50%;background:transparent;touch-action:none;cursor:grab}#host .placed-stamp[aria-pressed=true]{border-color:#a34e4b}#host .placed-stamp:hover{background:transparent;border-color:#718568}#host .placed-stamp:active{cursor:grabbing}.message-panel{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:10px 4px}.message-panel label{font-weight:700;font-size:15px}#text{font:700 15px/1.5 'Zen Maru Gothic',sans-serif;width:100%;min-width:0;min-height:48px;padding:9px;border:2px solid #d3d2bf;border-radius:6px;color:#294966;background:white}.message-panel small{font-size:10px}.message-panel img{width:100%;height:145px;object-fit:contain}.message-panel #feedback{font-size:13px;line-height:1.6;margin:0;min-height:42px}.sticker-shelf{grid-column:1/-1;padding:10px 14px;background:#fffdf5;border-top:1px dashed #b6b5a1;border-bottom:1px dashed #b6b5a1}.sticker-shelf h2{text-align:center}#stickers{display:flex;gap:10px;justify-content:center}#stickers button{width:70px;height:78px;padding:5px;font-size:10px;border:2px dotted #c9b99a;border-radius:3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}#stickers img{width:45px;height:45px;object-fit:contain;border-radius:50%}.editor-actions{grid-column:1/-1;display:flex;justify-content:center;gap:10px}.editor-actions button{min-width:130px}#result{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto;gap:8px;text-align:center;padding:22px;background:#e8eddf url('./assets/finished.webp') center/cover}#result header{background:#fffdf0ed;border-radius:8px;padding:8px}#result h2{font-size:32px;margin:0}#result header p{font-size:13px;margin:4px 0 0}#review-wrap{display:flex;align-items:center;justify-content:center;min-height:0;width:100%;height:100%;padding-bottom:15px}.envelope{flex:none;position:relative;box-shadow:0 0 0 10px #fffdf1,0 18px 0 17px #f1e7ce,0 23px 16px #4c554c55;background:#fffdf1}#finished-card{width:100%;height:100%;display:block}#save-note{margin:0;padding:5px;font-size:12px;min-height:26px;background:#fffdf0e8;border-radius:5px}#result footer{display:flex;justify-content:center;gap:8px}#result footer button{min-width:135px}#host button.text-link{justify-self:center;border:0;background:#fffdf0e8;font-size:11px;min-height:44px;text-decoration:underline}#modal{position:absolute;inset:0;display:grid;place-items:center;background:#263f4e75;padding:16px;z-index:10}#modal>section{width:min(520px,100%);max-height:100%;overflow-y:auto;background:#fffdf2;border:2px solid #b7c0ae;border-radius:12px;padding:20px}#modal header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}#modal h2{font-size:21px;margin:0}#dialog-content{font-size:15px;line-height:1.9}#dialog-content>button{display:block;width:100%;margin:10px 0}#dialog-content label{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0}#dialog-content input[type=checkbox]{width:24px;height:24px;accent-color:#365d7c}#volume{width:100%;accent-color:#365d7c}#storage-note{font-size:12px}#export-image{display:block;width:100%;height:auto;object-fit:contain}.parent-note{font-size:14px;line-height:1.9;padding:22px 6px;color:#53645b}.parent-note h2{font-size:20px}.postcard-page #host:fullscreen,.postcard-page #host.faux-fullscreen{height:100dvh;width:100vw;min-height:0;border:0;border-radius:0}.postcard-page #host.faux-fullscreen{position:fixed;inset:0;z-index:10000}
@media(max-width:760px){.postcard-page{padding:8px}.page-heading h1{font-size:23px}.page-heading p{font-size:12px}.postcard-page #host{height:860px;min-height:690px}.postcard-top{padding:8px;flex-wrap:wrap;gap:5px}.postcard-top strong{font-size:13px}.postcard-top nav{width:100%;justify-content:center;gap:4px}.postcard-top button{font-size:11px!important;padding:5px 7px!important}#cover{padding:16px;gap:14px}#cover h2{font-size:31px}#cover header small{font-size:10px}.cover-art{object-fit:cover;object-position:38% 50%;border-width:5px}#cover #start{font-size:18px;padding:13px 26px}#play{grid-template-columns:1fr;grid-template-rows:minmax(160px,1fr) auto auto auto auto;padding:10px;gap:12px}#artboard-wrap{grid-row:1;grid-column:1}.message-panel{grid-row:2;grid-column:1;display:grid;grid-template-columns:1fr auto;gap:4px 8px;padding:0}.message-panel label{font-size:12px}.message-panel #text{grid-row:2;grid-column:1/-1;font-size:14px}.message-panel small{font-size:9px;text-align:right}.message-panel img{display:none}#feedback{grid-row:3;grid-column:1/-1;font-size:11px!important;min-height:18px!important}.palette{grid-row:3;grid-column:1;display:block}.palette h2{display:none}#backgrounds{flex-direction:row;gap:7px;justify-content:center}#backgrounds button{width:auto;flex:1;max-width:90px;min-height:46px;font-size:9px}.sticker-shelf{grid-row:4;grid-column:1;padding:9px 4px}.sticker-shelf h2{font-size:11px!important;margin-bottom:6px!important}#stickers{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}#stickers button{width:100%;height:60px;font-size:9px;padding:3px;gap:1px}#stickers img{height:34px;width:34px}.editor-actions{grid-row:5;grid-column:1;gap:7px}.editor-actions button{min-width:0;flex:1;font-size:11px;padding:8px 5px}#result{padding:16px 12px;gap:10px}#result h2{font-size:27px}#result header p{font-size:11px}#result footer{flex-wrap:wrap}#result footer button{min-width:0;flex:1;font-size:12px;padding:9px 6px}#result footer #result-menu{flex-basis:100%;min-height:44px}#save-note{font-size:11px}.envelope{box-shadow:0 0 0 7px #fffdf1,0 12px 0 12px #f1e7ce,0 20px 12px #4c554c44}#modal{padding:10px}#modal>section{padding:15px}#modal h2{font-size:18px}#dialog-content{font-size:13px}}
@media(max-width:360px){.postcard-top strong{display:none}.postcard-top button{font-size:10px!important;padding:5px!important}#cover h2{font-size:27px}#play{gap:9px;padding:9px}#stickers button{height:58px}.editor-actions button{font-size:10px}}
@media(max-width:760px) and (max-height:700px){.postcard-page #host:fullscreen #base,.postcard-page #host.faux-fullscreen #base{overflow-y:auto}.postcard-page #host:fullscreen #play,.postcard-page #host.faux-fullscreen #play{min-height:640px}}
@media(max-height:520px) and (min-width:600px){.postcard-page #host{height:460px;min-height:390px}.postcard-top{padding:5px 10px;flex-wrap:nowrap}.postcard-top strong{font-size:12px;white-space:nowrap}.postcard-top nav{width:auto}.postcard-top button{font-size:10px!important}#cover{padding:10px 20px;gap:7px}#cover h2{font-size:27px;margin:2px}#cover header small{font-size:9px}.cover-art{object-fit:contain}#cover #start{font-size:15px;padding:8px 28px}#cover footer{gap:4px}#ready-note{font-size:9px}#play{grid-template-columns:65px minmax(0,1fr) 160px;grid-template-rows:minmax(0,1fr) auto auto;padding:9px 12px;gap:8px}#artboard-wrap{grid-column:2;grid-row:1}.palette{grid-column:1;grid-row:1;display:flex}.palette h2{display:none}#backgrounds{flex-direction:column;gap:6px}#backgrounds button{width:58px;min-height:44px;font-size:9px;flex:none}.message-panel{grid-column:3;grid-row:1;display:flex;padding:0;gap:5px}.message-panel label{font-size:12px}.message-panel #text{font-size:11px;min-height:44px;padding:5px}.message-panel small{font-size:9px;text-align:left}.message-panel img{display:none}.message-panel #feedback{font-size:11px;line-height:1.6;min-height:30px}.sticker-shelf{grid-column:1/-1;grid-row:2;padding:4px}.sticker-shelf h2{display:none}#stickers{display:flex;gap:7px}#stickers button{height:54px;width:60px;font-size:9px;padding:2px;gap:0}#stickers img{height:30px;width:30px}.editor-actions{grid-column:1/-1;grid-row:3;gap:10px}.editor-actions button{min-width:110px;flex:none;min-height:44px;font-size:11px;padding:6px}#result{padding:9px 20px;gap:5px;grid-template-columns:minmax(0,1fr) 215px;grid-template-rows:auto minmax(0,1fr) auto auto}#result header{grid-column:2;grid-row:1;padding:5px}#result h2{font-size:24px}#result header p{font-size:10px}#review-wrap{grid-column:1;grid-row:1/-1}#save-note{grid-column:2;grid-row:2;align-self:center;font-size:11px}#result footer{grid-column:2;grid-row:3;flex-wrap:wrap;gap:6px}#result footer button{min-width:0;flex-basis:100%;font-size:11px}#show-image{grid-column:2;grid-row:4}#dialog-content{font-size:12px;line-height:1.6}#modal>section{padding:12px}#modal header{margin:0}}