/* Only the contents of the existing Canvas phone. The page and dialogue styles
   stay in style.css; screen placement follows the same 74 × 148 phone geometry. */
#phone-surface { position: absolute; pointer-events: none; }
#phone-touch { position: absolute; inset: 0; width: 100%; border: 0; background: transparent; color: #e4e8df; pointer-events: auto; font-size: clamp(10px, 1.6cqw, 18px); text-shadow: 0 1px 4px #000; }
#phone-touch small { display: block; margin-top: .65em; font: .7em monospace; color: #aebfcc; }
#phone-touch:focus-visible { outline: 1px solid #e4d2a3; outline-offset: -5px; }
#phone-screen { position: absolute; left: 8.108108%; top: 9.459459%; width: 83.783784%; height: 80.405405%; display: flex; flex-direction: column; overflow: hidden; border-radius: 2px; background: #fff; color: #18232c; color-scheme: light; pointer-events: auto; font-family: Arial, "Yu Gothic", sans-serif; font-size: clamp(8px, 1.25cqw, 13px); line-height: 1.5; animation: screen-on .35s ease-out; }
@keyframes screen-on { from { opacity: 0; } to { opacity: 1; } }
#release-phone { position:absolute; left:37.5%; top:3.125cqw; width:25%; height:50cqw; z-index:15; pointer-events:none; }
.release-home { position:absolute; left:8.108108%; top:9.459459%; width:83.783784%; height:80.405405%; border-radius:2px; background:linear-gradient(160deg,#293e60,#132d3b 65%,#476166); color:#fff; pointer-events:auto; font-family:Arial,"Yu Gothic",sans-serif; font-size:clamp(8px,1.25cqw,13px); text-align:center; overflow:auto; }
.release-clock { margin:1em 0; font-size:2.3em; font-weight:300; }
.release-clock small { display:block; font-size:.3em; letter-spacing:.15em; }
#pepu-app-icon { display:inline-flex; flex-direction:column; align-items:center; gap:.65em; padding:.5em; border:0; color:inherit; background:none; font:inherit; cursor:pointer; animation:app-arrive .55s cubic-bezier(.2,.8,.3,1.3) both; }
#pepu-app-icon:focus-visible { outline:2px solid #f2d991; border-radius:8px; }
.pepu-icon-art { position:relative; display:grid; place-items:center; width:3.5em; height:3.5em; border-radius:24%; background:linear-gradient(135deg,#e7ecc8,#9ac5b7); color:#183b42; font-size:1.3em; box-shadow:0 3px 8px #0004; }
.pepu-icon-art small { position:absolute; right:-.6em; top:-.4em; padding:.2em .4em; border-radius:1em; background:#ffdf9a; color:#44371c; font-size:.45em; font-weight:bold; }
.pepu-icon-art:has(img) { background:none; box-shadow:none; }
.pepu-icon-art img { display:block; width:100%; height:100%; object-fit:contain; }
.release-home p { margin:1.3em .8em; line-height:1.7; }
@keyframes app-arrive { from { opacity:0; transform:scale(.45); } to { opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion:reduce) { #pepu-app-icon { animation:none; } }
.social-header { display: flex; justify-content: space-between; align-items: center; padding: .5em .65em .35em; font-weight: 750; flex: none; }
.social-mark { color: #438dc0; font-size: 1.5em; line-height: 1; }
.social-tabs { display: flex; justify-content: space-around; padding: .35em .1em .5em; border-bottom: 1px solid #e7ecf0; color: #1c7aa6; font-size: .8em; font-weight: 700; flex: none; }
.social-tabs span { color: #7c8690; font-weight: 400; }
#timeline { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c5d4dd transparent; touch-action: none; user-select: none; cursor: grab; outline-offset: -2px; }
#timeline.is-dragging { cursor: grabbing; }
#timeline[data-locked="true"] { overflow-y: hidden; cursor: default; }
.social-post { padding: .7em .6em; border-bottom: 1px solid #e7ecf0; overflow-wrap: anywhere; }
.everyday-post { min-height: 40%; }
.post-author { display: flex; align-items: center; gap: .4em; line-height: 1.35; }
.post-avatar { display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 50%; flex: none; background: var(--avatar-color, #dde8ed); color: #445764; font-size: .85em; }
.post-author strong { display: block; font-size: .95em; }
.post-author small { color: #7b8791; font-size: .7em; }
.social-post p { margin: .6em 0; white-space: pre-line; }
.post-actions { display: flex; justify-content: space-between; color: #7b8791; margin-top: .6em; font: .8em Arial, sans-serif; }
.post-actions span { display: inline-flex; align-items: center; gap: .25em; }
.post-actions svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.5; }
#kokomi-photo { display: block; width: 100%; padding: 0; border: 1px solid #e0e6e9; border-radius: .5em; overflow: hidden; background: #e9d4c2; cursor: pointer; }
#kokomi-photo:focus-visible { outline: 2px solid #218ac5; outline-offset: -2px; }
.post-photo-crop { position: relative; display: block; width: 100%; aspect-ratio: 880 / 421; overflow: hidden; }
/* Source 1672 × 941: show (660,520)-(1540,941). Eyes and almost all of
   Kokomi's face stay outside the crop; Pupe's face, her hand and clothes remain. */
.post-photo-crop img { position: absolute; width: 190%; max-width: none; height: auto; left: -75%; top: -123.515439%; pointer-events: none; }
.social-nav { flex: none; display: flex; align-items: center; justify-content: center; gap: .5em; padding: .35em; margin: 0; border-top: 1px solid #e7ecf0; color: #2786b5; font-size: .8em; }
.social-nav > span:first-child { font-size: 1.3em; }
.feed-end { margin: 0; padding: 1.3em .6em; color: #8a949c; text-align: center; font-size: .75em; }