/* 字体都放在网站自己的 fonts/ 里（只留页面上用到的字），访客打开页面不连任何别的网站 */
@font-face{font-family:"IM Fell English";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/im-fell-english-italic.woff2) format("woff2")}
@font-face{font-family:"IM Fell English SC";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/im-fell-english-sc.woff2) format("woff2")}
@font-face{font-family:"Special Elite";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/special-elite.woff2) format("woff2")}
@font-face{font-family:"Noto Serif SC";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/noto-serif-sc.woff2) format("woff2")}
@font-face{font-family:"Fusion Pixel";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/fusion-pixel.woff2) format("woff2")}

:root{
  --paper:#f6f0e1; --paper2:#efe6d0; --ink:#2e5e4e; --ink-soft:rgba(46,94,78,.55);
  --chestnut:#8a4b2a; --line:#c9b996; --text:#2b2a26;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--text)}
body{font-family:"Noto Serif SC","IM Fell English","Songti SC","STSong",serif;line-height:1.7;
     background-image:radial-gradient(rgba(138,75,42,.05) 1px,transparent 1px);background-size:18px 18px}
.wrap{max-width:560px;margin:0 auto;padding:28px 16px 48px}
.card{background:var(--paper2);border:6px double var(--ink);padding:22px 20px 26px;position:relative}
.top{display:flex;justify-content:space-between;font-family:"Special Elite",monospace;font-size:13px;color:var(--ink)}
.top span{border-bottom:1px dashed var(--ink);padding:0 4px 2px}
.kicker{font-family:"IM Fell English SC",serif;letter-spacing:.25em;text-align:center;margin-top:18px;color:var(--ink);font-size:15px}
h1{font-family:"IM Fell English",serif;font-style:italic;font-weight:400;text-align:center;font-size:48px;line-height:1;margin:6px 0 0;color:var(--ink)}
.rule{display:flex;align-items:center;gap:10px;margin:12px 8px 0;color:var(--ink)}
.rule i{flex:1;height:1px;background:var(--ink)}
.rule b{font-family:"IM Fell English SC",serif;font-weight:400;letter-spacing:.3em;font-size:13px}

/* 门口：一张画布画两只，上面盖两个看不见的按钮给手指和键盘戳 */
.porch{position:relative;height:184px;margin:18px 0 6px;border-bottom:2px solid var(--line)}
.porch canvas{position:absolute;left:0;bottom:0;display:block;pointer-events:none}
.pet{position:absolute;bottom:0;cursor:pointer;background:none;border:0;padding:0;margin:0;
     -webkit-tap-highlight-color:transparent}
.pet:focus-visible{outline:2px dashed var(--ink);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hint{text-align:center;font-size:12px;color:var(--ink-soft);margin:6px 0 18px}

table{width:100%;border-collapse:collapse;font-size:14px}
th{font-family:"IM Fell English SC",serif;font-weight:400;letter-spacing:.12em;color:var(--ink);
   border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);padding:6px 4px;text-align:left}
td{border-bottom:1px solid var(--line);padding:10px 4px;vertical-align:top}
td:first-child{font-family:"Special Elite",monospace;color:var(--chestnut);white-space:nowrap;width:22%}
td:last-child{text-align:center;width:16%}
/* "第一次"章：stamp.svg 里是栗子色印泥（细边、墨色不匀、边缘毛毛的、没有底色），像真的盖在卡上，歪一点 */
.stamp{display:inline-block;width:26px;height:26px;vertical-align:middle;transform:rotate(-14deg) translate(1px,-1px);
       mix-blend-mode:multiply}
.reading{font-family:"IM Fell English",serif;font-style:italic;color:var(--ink-soft);font-size:13px}

h2{font-family:"IM Fell English SC",serif;font-weight:400;letter-spacing:.2em;color:var(--ink);font-size:14px;margin:26px 0 6px;text-align:center}
.returned{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:0;margin:0;list-style:none}
.returned li{border:1px solid var(--line);background:var(--paper);padding:3px 10px;font-size:13px}
.note{margin-top:24px;font-size:13px;color:var(--text);text-align:center}
.foot{font-family:"IM Fell English",serif;font-style:italic;text-align:center;color:var(--ink);margin-top:22px;font-size:16px}
.sub{font-family:"Special Elite",monospace;text-align:center;font-size:11px;color:var(--ink-soft);margin-top:6px}

@media (max-width:360px){
  .card{padding:18px 12px 22px}
  h1{font-size:40px}
}