/* 共通の下敷き。
   スマホ(ホーム画面から起動したアプリ)を基準に組む。設計幅390px。
   平成ゾンビ学園で学んだ罠だけを持ち込む: fixed+スクロールを混ぜない/
   全画面の覆いはpointer-eventsで抜く/一回きりのCSSアニメは付け外しで再生。 */
:root{
  --sand:#efe6d3; --sand2:#e2d5bb; --ink:#33291d; --ink2:#6b5a44;
  --line:#c9b894; --accent:#c06a2b; --good:#3f7d52; --bad:#9c4a3f; --mid:#8a7a5c;
  --pad:12px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;}
html,body{height:100%;}
body{background:var(--sand);color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  overflow:hidden;overscroll-behavior:none;}
#app{height:100dvh;display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);}

/* 上の帯。今どこにいるかを常に出す(本編と取り違えないため) */
.sbar{flex:0 0 auto;display:flex;align-items:center;gap:8px;
  padding:10px var(--pad);border-bottom:2px solid var(--line);background:var(--sand2);}
.sbar .ttl{font-size:15px;font-weight:bold;letter-spacing:1px;}
.sbar .sub{font-size:10px;color:var(--ink2);}
.sbar .back{margin-left:auto;font-size:12px;font-weight:bold;color:var(--ink);
  background:var(--sand);border:1.5px solid var(--line);border-radius:9px;padding:6px 11px;}

.body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:var(--pad);}
.stage{flex:1 1 auto;min-height:0;position:relative;overflow:hidden;touch-action:none;}

/* 作品カード */
.card{display:block;width:100%;text-align:left;background:#fffaf0;
  border:2px solid var(--line);border-radius:13px;padding:11px 12px;margin-bottom:9px;
  box-shadow:0 2px 0 rgba(120,100,70,.18);}
.card:active{transform:translateY(2px);box-shadow:none;}
.card .nm{font-size:15px;font-weight:bold;}
.card .ai{font-size:11px;color:var(--ink2);line-height:1.6;margin-top:3px;}
.card .ft{display:flex;align-items:center;gap:6px;margin-top:7px;}
.chip{font-size:10px;font-weight:bold;border-radius:999px;padding:3px 9px;
  border:1.5px solid var(--line);color:var(--ink2);background:var(--sand);}
.chip.good{color:#fff;background:var(--good);border-color:var(--good);}
.chip.mid{color:#fff;background:var(--mid);border-color:var(--mid);}
.chip.bad{color:#fff;background:var(--bad);border-color:var(--bad);}
.chip.wip{color:#fff;background:var(--accent);border-color:var(--accent);}

.sect{font-size:11px;font-weight:bold;color:var(--ink2);letter-spacing:1px;
  margin:4px 2px 8px;}
.note{font-size:11px;color:var(--ink2);line-height:1.7;padding:2px 2px 14px;}

/* 小さく右から出る帯(平成ゾンビ学園のUI憲法と同じ作法: 暗転もモーダルも使わない) */
.slip{position:absolute;right:8px;top:8px;z-index:50;background:#fffaf0;
  border:2px solid var(--line);border-radius:12px;padding:8px;
  box-shadow:0 4px 12px rgba(90,70,40,.25);animation:slipIn .18s ease-out;}
@keyframes slipIn{from{transform:translateX(14px);opacity:0}to{transform:none;opacity:1}}
.slip button{display:block;width:100%;font-size:12px;font-weight:bold;color:var(--ink);
  background:var(--sand);border:1.5px solid var(--line);border-radius:9px;
  padding:8px 14px;margin-bottom:5px;}
.slip button:last-child{margin-bottom:0;}
.veil{position:fixed;inset:0;z-index:40;}