:root{color-scheme:light;font-family:"Yu Gothic",sans-serif;color:#243658;background:#f3faff}*{box-sizing:border-box}body{margin:0;min-height:100svh;background:linear-gradient(145deg,#f4fbff,#fff9fd)}button,textarea{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #81b7f2;outline-offset:4px}.pepu-page{width:min(100%,480px);min-height:100svh;margin:auto;background:white;padding:env(safe-area-inset-top) 0 calc(100px + env(safe-area-inset-bottom));box-shadow:0 0 50px #accae51a}.pepu-page>nav:first-child{padding:14px 22px 4px}#return-game{color:#7992ad;font-size:12px;text-decoration:none}.app-header{padding:24px 16px 28px;text-align:center;font-size:clamp(23px,6vw,29px);font-weight:800;letter-spacing:.06em;color:#619fff;border-bottom:1px solid #e7f1fa}#pepu-feed{min-height:50svh}.pepu-post{display:grid;grid-template-columns:80px minmax(0,1fr) 36px;gap:10px 16px;padding:26px 22px;border-bottom:1px solid #eaf2f8;align-items:start}.pepu-post>b{display:none}.papi-avatar{grid-column:1;grid-row:1 / span 2;width:80px;height:80px;border-radius:30px;background:#eaf8ff;display:grid;place-items:center;overflow:hidden}.papi-avatar img{width:140%;height:140%;object-fit:contain}.pepu-post:nth-child(4n+2) .papi-avatar{background:#fff0f6}.pepu-post:nth-child(4n+3) .papi-avatar{background:#fffbe2}.pepu-post:nth-child(4n+4) .papi-avatar{background:#f0edff}.pepu-post p{grid-column:2 / 4;margin:6px 0 0;font-size:16px;line-height:1.85;white-space:pre-wrap;overflow-wrap:anywhere}.post-time{grid-column:2;color:#92a3bb;font-size:12px;align-self:center}.post-more{grid-column:3;width:36px;height:36px;border:0;border-radius:50%;color:#4d94dc;background:#e5f2ff;font-size:25px;line-height:1}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,480px);height:calc(82px + env(safe-area-inset-bottom));padding:10px 30px calc(10px + env(safe-area-inset-bottom));background:#ffffffed;border-top:1px solid #e4eff8;display:flex;align-items:center;backdrop-filter:blur(12px)}#home-button{display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:none;color:#629fff;font-size:11px}#home-button span{font-size:31px;line-height:1}#compose-button{position:absolute;left:50%;transform:translateX(-50%);width:58px;height:58px;border:0;border-radius:50%;background:#65a8ff;color:white;font-size:39px;box-shadow:0 5px 14px #8abfff55}#existing-composer{margin:18px 22px}#existing-composer:not([open]){display:none}#existing-composer summary{color:#6894bd;cursor:pointer;font-size:13px}#pepu-form{display:grid;gap:12px;padding:16px 0}#pepu-form label{font-size:14px}#pepu-input{width:100%;resize:vertical;border:1px solid #dcebf6;border-radius:18px;padding:16px;color:#243658;background:#fcfeff;line-height:1.7}#pepu-form button{justify-self:end;padding:10px 24px;border:0;border-radius:20px;background:#65a8ff;color:white}#pepu-status{font-size:13px;color:#8c6583}@media(max-width:360px){.pepu-post{grid-template-columns:64px minmax(0,1fr) 34px;padding:22px 16px;gap:10px}.papi-avatar{width:64px;height:64px;border-radius:24px}}

/* Supplied artwork; home presentation only. */
.app-header {
  height:clamp(112px,32vw,146px);
  padding:12px 24px 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#dcedff url('/game/appsvg/appheader.png') center / cover no-repeat;
  border-bottom:1px solid #dceefa;
}
.app-title { display:block; width:min(82%,310px); height:auto; max-height:100%; object-fit:contain; }
.pepu-page { background:linear-gradient(160deg,#fff 20%,#f8fcff 70%,#fbfaff); }
#pepu-feed { background:radial-gradient(ellipse at 0 20%,#eaf7ff66,transparent 45%),radial-gradient(ellipse at 100% 85%,#f0ebff55,transparent 45%); }
.pepu-post { border-bottom-color:#e0effa; }
.papi-avatar {
  position:relative;
  isolation:isolate;
  border-radius:0;
  overflow:visible;
  background:transparent;
  --papi-halo:#def3ff;
}
.pepu-post:nth-child(4n+2) .papi-avatar { background:transparent; --papi-halo:#ffe7f1; }
.pepu-post:nth-child(4n+3) .papi-avatar { background:transparent; --papi-halo:#fff7cf; }
.pepu-post:nth-child(4n+4) .papi-avatar { background:transparent; --papi-halo:#ece6ff; }
.papi-avatar::before {
  content:'';
  position:absolute;
  inset:8% -4%;
  z-index:-1;
  border-radius:45% 55% 48% 52%;
  background:radial-gradient(ellipse,var(--papi-halo) 15%,transparent 72%);
}
.papi-avatar img { display:block; width:100%; height:100%; object-fit:contain; }
.post-more { background:linear-gradient(145deg,#edf8ff,#dfeeff); color:#609fe2; box-shadow:0 2px 6px #afceeb16; }
.bottom-nav {
  background:#edf8ff url('/game/appsvg/appfooter.png') center bottom / cover no-repeat;
  border-top-color:#dceefb;
  box-shadow:0 -4px 18px #c5dff51a;
}
#compose-button { background:linear-gradient(145deg,#75baff,#5299fa); box-shadow:0 5px 14px #79b2f54d; }

/* Keep the composer focused on the input itself. */
#existing-composer summary { display:none; }
#pepu-form label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#pepu-form { padding:4px 0; gap:10px; }
#pepu-input::placeholder { color:#8b9db4; opacity:1; }
#pepu-form button { padding:7px 17px; font-size:13px; border-radius:16px; }

.bottom-nav #return-game { margin-left:auto; display:flex; flex-direction:column; align-items:center; gap:2px; color:#629fff; font-size:11px; text-decoration:none; }
.bottom-nav #return-game span { font-size:31px; line-height:1; }
#pepu-form .mood-picker { display:flex; align-items:center; gap:12px; }
#pepu-form .mood-picker label { position:static; width:auto; height:auto; margin:0; overflow:visible; clip-path:none; font-size:13px; color:#7992ad; }
#pepu-mood { font:inherit; font-size:13px; color:#425a78; background:#f4faff; border:1px solid #dcebf6; border-radius:12px; padding:7px 10px; }
.papi-avatar::before { background:radial-gradient(ellipse,#edf7fc66,transparent 72%); }

/* Compact composer actions and soft conversation bubbles. */
#pepu-form { grid-template-columns:minmax(0,1fr) auto; align-items:center; }
#pepu-input { grid-column:1 / -1; border:1px solid #e1edf6; outline:none; box-shadow:none; }
#pepu-input:focus { border-color:#b9daf4; box-shadow:0 0 0 3px #eaf5ff80; }
#pepu-form .mood-picker { grid-column:1; grid-row:2; }
#pepu-form .mood-picker label { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); }
#pepu-form button { grid-column:2; grid-row:2; align-self:center; margin:0; }
.papi-avatar::before { inset:0 -9%; background:radial-gradient(ellipse,var(--papi-halo) 0%,var(--papi-halo) 18%,transparent 72%); opacity:.85; }
.pepu-post p { position:relative; background:linear-gradient(135deg,#fff,#f2f9ff); border:1px solid #e3eff9; border-radius:18px; padding:13px 16px; margin-top:0; box-shadow:0 3px 10px #c4ddf015; }
.pepu-post p::before { content:''; position:absolute; left:-6px; top:21px; width:10px; height:10px; background:#fcfeff; border-left:1px solid #e3eff9; border-bottom:1px solid #e3eff9; transform:rotate(45deg); }

#words-dialog{width:min(94vw,480px);max-height:90svh;padding:20px;border:1px solid #dceefa;border-radius:26px;background:linear-gradient(150deg,#fff,#f3faff 65%,#faf6ff);color:#243658;overflow:auto}#words-dialog::backdrop{background:#48668255;backdrop-filter:blur(3px)}#words-dialog [hidden]{display:none!important}.words-top{display:flex;align-items:center;gap:18px}.words-top h2{font-size:17px;font-weight:500}.words-top button{border:0;background:none;color:#629fff;font-size:24px}.word-bubble{display:flex;gap:10px;align-items:center;margin:20px 0}.word-bubble img{width:60px;height:60px;object-fit:contain;flex:none;filter:drop-shadow(0 4px 8px #cce6f577)}.word-bubble p{margin:0;padding:14px 18px;border:1px solid #e1effb;border-radius:22px 22px 22px 6px;background:#fff;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;min-width:0}.original-word{margin-bottom:30px}.original-word img{width:80px;height:80px}.original-word p{font-size:18px;padding:18px}.word-bubble:nth-child(even){flex-direction:row-reverse}.word-bubble:nth-child(even) p{background:#faf8ff;border-radius:22px 22px 6px 22px}#words-empty{font-size:13px;color:#8a9db5;text-align:center;margin:30px 0}#words-write,#words-send{border:0;border-radius:22px;background:#70acfa;color:white;padding:11px 20px}#words-write{display:block;margin:24px auto 8px}#words-form{display:grid;gap:12px}.words-mood-row{display:flex;align-items:center;gap:16px}.words-mood-row img{width:76px;height:76px}.words-mood-row label{display:grid;gap:7px}#words-mood,#words-input{font:inherit;color:#314b68;background:#fff;border:1px solid #dbeaf5;border-radius:14px;padding:10px}#words-input{width:100%;resize:vertical}.words-actions{display:flex;justify-content:space-between;align-items:center}#words-cancel{border:0;background:none;color:#7795b7}#words-error{color:#a35f7d;font-size:13px}

/* Keep the original post on the left; gathered words all face it from the right. */
#words-list .word-bubble { flex-direction:row-reverse; }
#words-list .word-bubble p { border-radius:22px 22px 6px 22px; }
#words-title { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.post-more { width:28px; height:28px; font-size:20px; justify-self:end; align-self:center; }
#compose-button { width:48px; height:48px; font-size:32px; }

/* Match expression selectors to the soft blue input focus treatment. */
#pepu-mood, #words-mood { outline:none; border:1px solid #dcebf6; background-color:#f4faff; color:#425a78; }
#pepu-mood:focus, #words-mood:focus { outline:none; border-color:#b9daf4; box-shadow:0 0 0 3px #eaf5ff80; }
#pepu-mood option, #words-mood option { background:#f4faff; color:#425a78; }

/* Word composer: blank input, then expression and send on one line. */
.words-character-preview { width:70px; height:70px; object-fit:contain; }
#words-form .words-actions { gap:12px; }
#words-form #words-mood { min-width:0; font-size:13px; padding:7px 10px; }
#words-form #words-send { font-size:13px; padding:8px 16px; white-space:nowrap; }
#words-input { outline:none; }
#words-input:focus { border-color:#b9daf4; box-shadow:0 0 0 3px #eaf5ff80; }

.app-voice-button { display:grid; place-items:center; padding:0; border:0; background:transparent; color:inherit; cursor:pointer; flex:none; }
.papi-avatar .app-voice-button { width:100%; height:100%; }
.word-bubble .app-voice-button { width:60px; height:60px; }
.original-word .app-voice-button { width:80px; height:80px; }
.app-voice-button:focus-visible { outline:2px solid #b9daf4; outline-offset:2px; border-radius:16px; }

/* Shared neutral glow: never tinted by author or character color. */
.papi-avatar::before {
  background:radial-gradient(ellipse,rgba(255,255,255,.45) 0%,rgba(246,252,255,.18) 35%,rgba(255,255,255,0) 72%);
  opacity:1;
}
.word-bubble img { filter:drop-shadow(0 0 7px rgba(255,255,255,.25)); }

.post-word-action { grid-column:3; display:flex; align-items:center; justify-content:flex-end; gap:5px; justify-self:end; }
.word-count { font-size:10px; line-height:1; color:#91acc7; font-variant-numeric:tabular-nums; }
.post-word-action .post-more { flex:none; }

.pepu-post { position:relative; }
.post-delete { position:absolute; right:7px; top:4px; width:22px; height:22px; padding:0; border:0; background:transparent; color:#a7bacb; font-size:16px; line-height:1; }
.post-delete:hover { color:#708da7; }

/* A brief, opt-in hover; unchanged SVG geometry at rest. */
.papi-avatar .timeline-character{display:block;position:relative;top:0;width:100%;height:100%;overflow:visible}
.timeline-character .papi-left-arm{transform-box:view-box;transform-origin:660px 670px}
.timeline-character .papi-right-arm{transform-box:view-box;transform-origin:839px 670px}
#delete-dialog{width:min(300px,calc(100% - 48px));box-sizing:border-box;padding:24px 20px;border:1px solid #dceeff;border-radius:24px;background:#fcfeff;color:#506587;box-shadow:0 12px 45px #507da526}
#delete-dialog::backdrop{background:#66839a40;backdrop-filter:blur(3px)}
#delete-dialog p{margin:0 0 22px;text-align:center;font-size:16px}
.delete-actions{display:flex;gap:12px;justify-content:center}
.delete-actions button{min-width:100px;min-height:44px;border:1px solid #dceeff;border-radius:22px;background:#edf7ff;color:#57769b;font:inherit;cursor:pointer}
.delete-actions button[value=delete]{background:#69a9ff;color:white;border-color:transparent}
.delete-actions button:focus-visible{outline:2px solid #9bcaff;outline-offset:3px}

.story-reaction{position:fixed;z-index:20;top:50%;left:50%;transform:translate(-50%,-50%);width:340px;max-width:calc(100vw - 32px);padding:22px 24px;border:1px solid #dceeff;border-radius:22px;background:#fcfeff;color:#506587;box-shadow:0 8px 32px #7194b544;text-align:left;cursor:pointer}
.story-reaction small{font-size:11px;color:#839eb9}.story-reaction p{margin:4px 0 0;font-size:14px;line-height:1.6}
.story-reaction-next{display:block;margin-top:16px;text-align:right;font-size:11px;color:#839eb9}
.story-post-image{grid-column:2 / 4;grid-row:2;display:block;width:100%;max-height:360px;object-fit:contain;border-radius:16px;margin:4px 0 8px}
.pepu-post:has(.story-post-image){scroll-margin-top:16px}