/* ============================================================
   Yuretter — 褪せたB級雑誌
   ============================================================ */

:root{
  --paper:    #F6DAA0;
  --paper-hi: #FBEBC8;
  --ink:      #191310;
  --cocoa:    #4A3018;
  --sepia:    #8B7048;
  --rule:     #C6A971;
  --blaze:    #F73C00;

  --jp: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --en: "Barlow Condensed", "Helvetica Neue", Arial, sans-serif;

  --w: 620px;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html{ background:#E8D8A8; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100svh;
  font-family:var(--jp);
  color:var(--ink);
  background:transparent;
}

/* 紙は動かない。文字だけが刷られて流れていく */
.paper{
  position:fixed; inset:0; z-index:-1;
  background:#E8D8A8 url("assets/paper.jpg") no-repeat center center;
  background-size:cover;
}

.hidden{ display:none !important; }

/* ---------------- 表紙 ---------------- */

.cover{
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:32px 20px calc(32px + env(safe-area-inset-bottom));
}
.cover-inner{ width:100%; max-width:400px; }

.masthead{ position:relative; margin-bottom:6px; }
.logo{ position:relative; display:block; width:100%; height:auto; }

.tagline{
  font-family:var(--jp);
  font-size:16px; font-weight:500; letter-spacing:.16em;
  color:var(--cocoa); text-align:center;
  margin:0 0 30px; padding-top:12px;
  border-top:1px solid var(--rule);
}

.panel{ display:flex; flex-direction:column; }

.lbl{
  font-family:var(--en); font-weight:600; font-size:13px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--cocoa); margin:16px 0 5px;
}

.fld{
  font-family:var(--jp); font-size:17px; color:var(--ink);
  background:var(--paper-hi);
  border:1px solid var(--cocoa); border-radius:0;
  padding:11px 12px; width:100%; outline:none;
}
.fld.ta{ resize:none; line-height:1.7; }
.fld:focus{ border-color:var(--blaze); box-shadow:inset 0 0 0 1px var(--blaze); }

.at-row{ display:flex; align-items:stretch; }
.at{
  font-family:var(--en); font-weight:700; font-size:19px;
  display:flex; align-items:center; padding:0 9px;
  background:var(--cocoa); color:#FFFAF0;
}

.btn{
  font-family:var(--en); font-weight:700; font-size:18px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper-hi); background:var(--blaze);
  border:none; border-radius:0; padding:14px; margin-top:22px;
  cursor:pointer; box-shadow:2.5px 2.5px 0 var(--ink);
}
.btn:disabled{ opacity:.45; box-shadow:none; }
.btn.pressed{ transform:translate(2.5px,2.5px); box-shadow:none; }
.btn.ghost{
  background:transparent; color:var(--cocoa);
  border:1px solid var(--cocoa); box-shadow:none;
  margin-top:0; padding:10px 16px; font-size:15px; flex:1;
}

.link{
  font-family:var(--en); font-size:15px;
  letter-spacing:.1em; text-transform:uppercase;
  background:none; border:none; color:var(--cocoa);
  text-decoration:underline; margin-top:18px; padding:6px; cursor:pointer;
}
.link.danger{ color:var(--blaze); }

.msg{ font-size:14px; line-height:1.7; margin:12px 0 0; color:var(--blaze); }
.msg.ok{ color:var(--cocoa); }

/* ---------------- 本紙 ---------------- */

.app{ max-width:var(--w); margin:0 auto; padding-bottom:132px; min-height:100svh; }

.bar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:9px 16px;
  background:#E8D8A8 url("assets/paper.jpg") no-repeat center top;
  background-size:cover;
  border-bottom:3px solid var(--cocoa);
  box-shadow:0 1px 0 var(--cocoa);
}

.bar-home{ background:none; border:none; padding:0; cursor:pointer; }
.avatar-btn img{ border-color:var(--cocoa) !important; }
.bar-logo{ height:38px; width:auto; display:block; }

.avatar-btn{ padding:0; border:none; background:none; cursor:pointer; }
.avatar-btn img{
  width:36px; height:36px; border-radius:50%;
  object-fit:cover; display:block;
  border:1.5px solid var(--paper); background:var(--paper);
}

/* ---- プロフィール見出し ---- */

.prof{ padding:14px 16px 12px; border-bottom:2px solid var(--cocoa); }
.back{
  font-family:var(--en); font-size:14px;
  letter-spacing:.12em; text-transform:uppercase;
  background:none; border:none; padding:0 0 12px;
  color:var(--sepia); text-decoration:underline; cursor:pointer;
}
.prof-top{ display:flex; align-items:center; gap:14px; }
.prof-avatar{
  width:66px; height:66px; border-radius:50%; object-fit:cover;
  border:1px solid var(--cocoa); background:var(--paper-hi);
}
.prof-name{ font-size:21px; font-weight:700; margin:0; letter-spacing:.02em; }
.prof-handle{
  font-family:var(--en); font-size:16px; letter-spacing:.05em;
  color:var(--sepia); margin:2px 0 0;
}
.prof-bio{
  font-size:15px; line-height:1.8; margin:12px 0 0;
  white-space:pre-wrap; word-break:break-word;
}
.prof-foot{ display:flex; align-items:baseline; gap:14px; margin-top:12px; }
.prof-count{
  font-family:var(--en); font-size:14px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--sepia);
}
.edit{
  font-family:var(--en); font-size:14px;
  letter-spacing:.12em; text-transform:uppercase;
  background:none; border:1px solid var(--sepia); color:var(--cocoa);
  padding:3px 12px; margin-left:auto; cursor:pointer;
}

/* ---- 記事（投稿） ---- */

.post{
  display:grid; grid-template-columns:44px 1fr; gap:11px;
  padding:11px 16px 9px;
  border-bottom:1px solid var(--rule);
  position:relative;
}
.post::after{
  content:attr(data-n);
  position:absolute; right:8px; bottom:4px;
  font-family:var(--en); font-size:11px; letter-spacing:.08em;
  color:var(--sepia); opacity:.75;
}

.pf-avatar{
  width:44px; height:44px; border-radius:50%;
  object-fit:cover; display:block; cursor:pointer;
  border:1px solid var(--cocoa); background:var(--paper-hi);
}

.head{ display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; margin-bottom:3px; }
.who{
  display:flex; align-items:baseline; gap:7px;
  background:none; border:none; padding:0; cursor:pointer;
  font-family:inherit; color:inherit; text-align:left;
}
.name{ font-size:16px; font-weight:500; letter-spacing:.01em; }
.handle{
  font-family:var(--en); font-weight:600; font-size:14px;
  letter-spacing:.05em; color:var(--sepia);
}
.time{
  font-family:var(--en); font-size:13px; letter-spacing:.06em;
  color:var(--sepia); margin-left:auto;
}

.body{
  font-size:16px; font-weight:400; line-height:1.75; margin:0;
  white-space:pre-wrap; word-break:break-word;
}

.body a.u, .prof-bio a.u{
  color:var(--blaze);
  text-decoration:underline;
  text-underline-offset:2px;
  word-break:break-all;
}

/* ---- リンクカード：紙に貼った切り抜き ---- */

.card{
  display:block;
  margin:9px 0 2px;
  border:1px solid var(--cocoa);
  background:rgba(255,250,240,.42);
  text-decoration:none;
  color:inherit;
  overflow:hidden;
}
.card-img{
  display:block; width:100%; height:auto;
  max-height:190px; object-fit:cover;
  border-bottom:1px solid var(--cocoa);
  filter:sepia(.28) saturate(.85) contrast(.96);
}
.card-body{ padding:9px 11px 10px; }
.card-site{
  font-family:var(--en); font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--sepia); margin:0 0 3px;
}
.card-title{
  font-size:15px; font-weight:500; line-height:1.5; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card-desc{
  font-size:13px; line-height:1.6; color:var(--cocoa); margin:4px 0 0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.foot{ display:flex; align-items:center; gap:14px; margin-top:6px; }

.like{
  display:flex; align-items:center; gap:7px;
  background:none; border:none; padding:3px 2px; cursor:pointer;
  font-family:var(--en); font-size:15px; letter-spacing:.06em;
  color:var(--sepia);
}
.wing{
  font-size:20px; line-height:1; display:block;
  filter:saturate(.45) opacity(.85);
  transition:transform .12s ease;
}
.like.on{ color:var(--blaze); }
.like.on .wing{
  filter:none;
  text-shadow:0 0 10px rgba(247,60,0,.95), 0 0 22px rgba(247,60,0,.6);
  animation:throb 1.1s ease-in-out infinite;
}
@keyframes throb{
  0%,100%{ transform:scale(1)   rotate(0deg); }
  50%    { transform:scale(1.18) rotate(-7deg); }
}

.del{
  background:none; border:1px solid var(--rule); padding:2px 10px; cursor:pointer;
  font-family:var(--jp); font-size:13px; font-weight:500; letter-spacing:.06em;
  color:var(--sepia);
}

/* ---- ぶら下がった返信 ---- */

.post.child{
  grid-template-columns:26px 36px 1fr;
  padding-top:8px;
  border-bottom:1px solid var(--rule);
}
.thread-line{
  border-left:2px solid var(--rule);
  margin:2px 0 2px 11px;
}
.post.child .pf-avatar{ width:36px; height:36px; }
.post.child .name{ font-size:16px; }
.post.child .body{ font-size:16px; }
.post.parent{ border-bottom:none; padding-bottom:5px; }

.reply{
  background:none; border:1px solid var(--sepia); padding:2px 10px; cursor:pointer;
  font-family:var(--jp); font-size:13px; font-weight:500; letter-spacing:.06em;
  color:var(--cocoa);
}
.reply.on{ color:var(--blaze); }

.replying{
  display:flex; align-items:center; gap:10px;
  max-width:var(--w); margin:0 auto;
  padding:7px 14px 0;
  font-size:14px; color:var(--cocoa);
}
.replying .cancel{
  margin-left:auto;
  font-family:var(--en); font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--blaze);
  background:none; border:none; cursor:pointer; text-decoration:underline;
}

/* ---- 過剰な手羽先 ---- */

.fly{
  position:fixed; z-index:60; pointer-events:none;
  font-size:26px; line-height:1;
  will-change:transform,opacity;
  animation:fly var(--dur) cubic-bezier(.15,.7,.4,1) forwards;
}
@keyframes fly{
  0%  { transform:translate(-50%,-50%) scale(.5)  rotate(0deg);   opacity:1; }
  60% { opacity:1; }
  100%{ transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))
                  scale(1.5) rotate(var(--rot)); opacity:0; }
}

.flash{
  position:fixed; z-index:59; pointer-events:none;
  width:16px; height:16px; border-radius:50%;
  background:var(--blaze);
  transform:translate(-50%,-50%);
  animation:flash .5s ease-out forwards;
}
@keyframes flash{
  0%  { opacity:.85; box-shadow:0 0 0 0 rgba(247,60,0,.7); }
  100%{ opacity:0;   box-shadow:0 0 0 90px rgba(247,60,0,0); }
}

.empty{ padding:60px 24px; text-align:center; color:var(--cocoa); font-size:16px; line-height:1.9; white-space:pre-line; }

.more-wrap{ padding:18px 16px 8px; text-align:center; }
.more{
  font-family:var(--en); font-weight:600; font-size:15px;
  letter-spacing:.16em; text-transform:uppercase;
  background:none; border:1px solid var(--cocoa); color:var(--cocoa);
  padding:10px 22px; cursor:pointer;
}

/* ---- 投稿窓 ---- */

.composer{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  background:#E8D8A8 url("assets/paper.jpg") no-repeat center bottom;
  background-size:cover;
  border-top:3px solid var(--cocoa);
  box-shadow:0 -1px 0 var(--cocoa);
  padding-bottom:env(safe-area-inset-bottom);
}
.composer-inner{
  max-width:var(--w); margin:0 auto;
  display:flex; align-items:flex-end; gap:10px; padding:10px 14px;
}
.composer-fld{
  flex:1; font-family:var(--jp); font-size:16px; line-height:1.65;
  color:var(--ink); background:#FFFAF0;
  border:1.5px solid var(--cocoa); border-radius:0;
  padding:10px 11px; resize:none; outline:none; max-height:120px;
}
.composer-fld:focus{ box-shadow:inset 0 0 0 1px var(--blaze); }
.composer-side{ display:flex; flex-direction:column; align-items:center; gap:5px; }
.count{ font-family:var(--en); font-size:13px; letter-spacing:.06em; color:var(--sepia); }
.count.over{ color:var(--blaze); }
.post-btn{
  font-family:var(--en); font-weight:700; font-size:16px; letter-spacing:.12em;
  color:#fff; background:var(--blaze); border:none; border-radius:0;
  padding:9px 15px; cursor:pointer; box-shadow:2px 2px 0 var(--ink);
}
.post-btn:disabled{ opacity:.4; box-shadow:none; }
.post-btn.pressed{ transform:translate(2px,2px); box-shadow:none; }

/* ---- 設定 ---- */

.sheet{
  position:fixed; inset:0; z-index:40;
  background:rgba(25,19,16,.72);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.sheet-card{
  width:100%; max-width:380px; max-height:88svh;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:#E8D8A8 url("assets/paper.jpg") no-repeat center/cover;
  border:2px solid var(--ink);
  box-shadow:5px 5px 0 var(--blaze);
  padding:22px; display:flex; flex-direction:column;
}
.sheet-title{
  font-size:18px; font-weight:700; letter-spacing:.04em;
  margin:0 0 6px; color:var(--cocoa);
}
.pick-row{ display:flex; align-items:center; gap:12px; }
.pick-preview{
  width:48px; height:48px; border-radius:50%; object-fit:cover;
  border:1px solid var(--cocoa); background:var(--paper-hi);
}

@media (prefers-reduced-motion:reduce){
  .fly, .flash, .like.on .wing{ animation:none !important; }
}