:root{--o:#ff8a2a;--o2:#ff6a13;--y:#ffc93c;--brown:#5b3415;--cream:#fff6ea;--peach:#ffe3c6;--line:#f3c9a0;--r:22px;
  font-family:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;color:var(--brown)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:radial-gradient(circle at 20% 10%,#fff8ee 0,#ffeedd 40%,#ffe2c4 100%);overflow:hidden;-webkit-tap-highlight-color:transparent}
button{font:inherit;border:0;cursor:pointer;color:inherit;background:none}
a{color:inherit;text-decoration:none}
em{font-style:normal;color:var(--o2)}

/* deco */
.bg-deco{position:fixed;inset:0;pointer-events:none;z-index:0}
.bg-deco::before{content:"";position:absolute;inset:0;opacity:.18;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%23ff8a2a'%3E%3Cellipse cx='40' cy='48' rx='11' ry='9'/%3E%3Ccircle cx='27' cy='34' r='4.5'/%3E%3Ccircle cx='36' cy='28' r='4.5'/%3E%3Ccircle cx='46' cy='28' r='4.5'/%3E%3Ccircle cx='54' cy='35' r='4.5'/%3E%3C/g%3E%3Cg fill='%23ffb36b' transform='translate(80 80) rotate(25)'%3E%3Cellipse cx='20' cy='28' rx='9' ry='7'/%3E%3Ccircle cx='10' cy='17' r='3.6'/%3E%3Ccircle cx='17' cy='12' r='3.6'/%3E%3Ccircle cx='25' cy='12' r='3.6'/%3E%3Ccircle cx='31' cy='18' r='3.6'/%3E%3C/g%3E%3C/svg%3E")}
.d{position:absolute;user-select:none}
.d-cat{left:1.2vw;bottom:2vh;width:min(15vw,230px)}
.d-sleep{right:2vw;top:76px;width:min(9vw,140px);opacity:.95}
.d-y1{left:17vw;bottom:1vh;width:min(6vw,90px)}
.d-y2{right:28vw;bottom:1vh;width:min(4.5vw,70px)}
.d-y3{right:21vw;bottom:2vh;width:min(4.5vw,70px)}
.d-fish{left:37vw;bottom:1vh;width:min(4vw,62px);transform:rotate(-18deg)}
.d-bush1{left:22vw;bottom:-1vh;width:min(9vw,140px)}
.d-bush2{right:11vw;bottom:-1vh;width:min(8vw,120px)}
.d-sign{right:1.5vw;bottom:2vh;width:min(9vw,140px)}
.d-sign img{width:100%;display:block}
.d-sign span{position:absolute;left:8%;right:8%;top:12%;text-align:center;font:900 clamp(9px,.85vw,14px)/1.15 system-ui;color:#7a4a1f;letter-spacing:.5px}

/* nav */
.nav{position:relative;z-index:2;height:64px;display:flex;align-items:center;gap:36px;padding:0 3vw}
.logo{font:900 26px/1 system-ui;color:var(--o2);display:flex;gap:8px;align-items:center;letter-spacing:-.5px}
.logo-cat{font-size:30px}
.links{display:flex;gap:28px;font-weight:600}
.links a{opacity:.8;cursor:pointer}.links a.on{color:var(--o2);opacity:1;border-bottom:3px solid var(--o);padding-bottom:4px}
.search{margin-left:auto;display:flex;align-items:center;background:#fff;border:2px solid var(--line);border-radius:99px;padding:0 14px;height:40px;width:300px}
.search input{border:0;outline:0;flex:1;font:inherit;background:none;color:var(--brown)}

/* layout */
.stage{position:relative;z-index:1;height:calc(100% - 64px - 30px);display:grid;
  grid-template-columns:minmax(300px,1fr) auto minmax(340px,1.15fr);gap:2.5vw;padding:0 3vw;align-items:center}
.foot{position:relative;z-index:1;height:30px;text-align:center;font-size:12px;opacity:.6;letter-spacing:2px}
.foot span{margin-left:24px}

/* left */
.left{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding-bottom:12vh}
.en{font:700 13px/1.5 system-ui;letter-spacing:4px;color:#e9b27e}
.chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--line);border-radius:99px;padding:6px 16px 6px 8px;font-weight:800;box-shadow:0 3px 0 #f6d6b4}
.chip small{font-weight:500;font-size:.8em}
.paw{width:26px;height:26px;border-radius:50%;background:var(--peach) url(img/paw.webp) center/70% no-repeat}
.brand{font:900 clamp(44px,4.6vw,76px)/1 "Arial Rounded MT Bold",system-ui;color:var(--o);letter-spacing:-1px;
  -webkit-text-stroke:2px #fff;text-shadow:0 5px 0 #c9560e,0 10px 18px rgba(201,86,14,.25);position:relative}
.brand em{position:absolute;right:-10px;bottom:-16px;font:800 13px/1 system-ui;letter-spacing:0;background:var(--y);color:var(--brown);
  -webkit-text-stroke:0;text-shadow:none;padding:6px 12px;border-radius:99px;transform:rotate(-4deg);box-shadow:0 3px 0 #d9a21a}
.slogan{font:900 clamp(26px,2.4vw,40px)/1.2 system-ui;margin-top:12px}
.four{color:var(--o2);font-weight:600;font-size:15px}
.ask{background:#fff;border:2px solid var(--line);border-radius:14px;padding:8px 14px;font-weight:600}
.media{display:flex;align-items:center;gap:10px}
.media div{display:flex;flex-direction:column;align-items:center;gap:4px;font-weight:700;font-size:13px}
.media b{width:58px;height:58px;border-radius:50%;background:#fff;border:3px solid var(--o);display:grid;place-items:center;font-size:22px;color:var(--o2)}
.media i{color:var(--o);font-weight:900}
.turn{font-weight:600}
.btn{border-radius:99px;font-weight:800;font-size:18px;padding:14px 30px;width:min(100%,320px);transition:transform .15s}
.btn:active{transform:scale(.96)}
.primary{background:linear-gradient(#ffa04a,var(--o2));color:#fff;box-shadow:0 5px 0 #c9560e,0 10px 20px rgba(255,106,19,.3)}
.ghost{background:#fff;border:2px solid var(--line);box-shadow:0 4px 0 #f6d6b4}

/* phone */
.center{display:flex;flex-direction:column;align-items:center;gap:10px}
.phone{--h:min(calc(100vh - 150px),820px);height:var(--h);aspect-ratio:9/19.5;position:relative;border-radius:calc(var(--h)*.075);
  background:linear-gradient(145deg,#ffb066,#f07a1d);padding:calc(var(--h)*.016);box-shadow:0 18px 40px rgba(160,80,20,.35),inset 0 2px 0 #ffd3a3}
.ear{position:absolute;top:calc(var(--h)*-.05);width:22%;aspect-ratio:1;background:linear-gradient(#ffb066,#f58a33);
  clip-path:polygon(50% 0,100% 100%,0 100%);z-index:-1}
.ear::after{content:"";position:absolute;inset:30% 26% 6%;background:#ffc6b4;clip-path:polygon(50% 0,100% 100%,0 100%)}
.ear.l{left:6%;transform:rotate(-14deg)}.ear.r{right:6%;transform:rotate(14deg)}
.tail{position:absolute;right:-8%;bottom:18%;width:12%;height:22%;border:calc(var(--h)*.014) solid #f58a33;border-left:0;border-radius:0 60px 60px 0;z-index:-1}
.screen{position:relative;width:100%;height:100%;border-radius:calc(var(--h)*.06);overflow:hidden;background:#1d1208}
.hint{font-size:12px;opacity:.55}

/* feed: native scroll-snap = 最顺滑 */
.feed{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;overscroll-behavior:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.feed::-webkit-scrollbar{display:none}
.slide{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;contain:strict;content-visibility:auto;contain-intrinsic-size:auto 800px}
.slide img.cv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#2a1a0d}
.slide .shade{position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(transparent,rgba(30,14,2,.88));pointer-events:none}
.slide .side{position:absolute;right:10px;bottom:31%;display:flex;flex-direction:column;gap:16px;align-items:center;color:#fff;font-size:11px;font-weight:700;text-shadow:0 1px 3px #000}
.slide .side button{display:flex;flex-direction:column;align-items:center;gap:2px;color:#fff}
.slide .side b{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.22);backdrop-filter:blur(6px);display:grid;place-items:center;font-size:20px}
.slide .side .liked b{background:#ff5d7a}
.slide .info{position:absolute;left:14px;right:64px;bottom:76px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.slide .info h3{font-size:20px;font-weight:900;margin-bottom:6px}
.slide .info .tg{display:flex;gap:6px;margin-bottom:6px;flex-wrap:wrap}
.slide .info .tg span{font-size:11px;background:rgba(255,138,42,.9);padding:2px 8px;border-radius:99px;text-shadow:none}
.slide .info .tg span+span{background:rgba(255,255,255,.25)}
.slide .info p{font-size:13px;line-height:1.5;opacity:.95;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.slide .play{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);background:linear-gradient(#ffe066,var(--y));color:var(--brown);
  font-weight:900;font-size:17px;padding:11px 34px;border-radius:99px;box-shadow:0 4px 0 #d9a21a,0 8px 18px rgba(0,0,0,.3);white-space:nowrap}
.slide .play:active{transform:translateX(-50%) scale(.95)}
.slide .land{position:absolute;top:12px;left:12px;font-size:11px;color:#fff;background:rgba(0,0,0,.45);padding:3px 9px;border-radius:99px}
.dots{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:4px;pointer-events:none}
.dots i{width:4px;height:4px;border-radius:2px;background:rgba(255,255,255,.45);transition:height .2s,background .2s}
.dots i.on{height:14px;background:#fff}

/* player */
.player{position:absolute;inset:0;background:#000;z-index:5}
.player iframe,.wide iframe{width:100%;height:100%;border:0;display:block;background:#000}
.player iframe{position:absolute;inset:34px 0 0}
.player iframe{height:calc(100% - 34px)}
.pbar{height:34px;display:flex;align-items:center;gap:8px;padding:0 8px;background:linear-gradient(#ff9a3e,#f27a1e);color:#fff;font-size:13px;font-weight:700}
.pbar span{flex:1;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pbar button,.pbar a{color:#fff;background:rgba(255,255,255,.22);padding:3px 10px;border-radius:99px;font-size:12px}
.ploading{position:absolute;inset:34px 0 0;display:grid;place-content:center;justify-items:center;gap:10px;color:#ffd9b0;background:#1d1208;transition:opacity .4s;pointer-events:none}
.ploading img{width:120px;animation:bob 1.4s ease-in-out infinite}
.ploading.gone{opacity:0}
@keyframes bob{50%{transform:translateY(-8px)}}

/* right */
.right{display:flex;flex-direction:column;gap:12px;align-items:flex-start;min-width:0;padding-bottom:4vh}
.intro{line-height:1.7;font-size:14px;padding-right:130px}
.board{width:100%;background:rgba(255,255,255,.75);backdrop-filter:blur(6px);border:2px solid var(--line);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:12px}
.cur{display:flex;gap:14px}
.cur img{width:110px;aspect-ratio:9/16;object-fit:cover;border-radius:14px;border:3px solid #fff;box-shadow:0 4px 10px rgba(150,80,20,.2);flex:none;background:#eee}
.cur-info{min-width:0;display:flex;flex-direction:column;gap:6px}
.cur-info h3{font-size:22px;font-weight:900}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tags span{font-size:12px;background:var(--peach);color:var(--o2);padding:2px 10px;border-radius:99px;font-weight:700}
#curDesc{font-size:14px;line-height:1.6}
.from{font-size:12px;opacity:.6}
.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;max-height:min(30vh,260px);overflow-y:auto;padding:2px;scrollbar-width:thin}
.list button{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:600;min-width:0}
.list img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;border:3px solid transparent;background:#f1e1d0}
.list button span{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center}
.list button.on img{border-color:var(--o)}
.list button.hide{display:none}
.stats{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;background:var(--cream);border-radius:14px;padding:8px}
.stats b{display:block;font-size:20px;color:var(--o2)}
.stats span{font-size:12px;opacity:.7}
.big{width:100%}

/* wide modal (横屏游戏) */
.wide{position:fixed;inset:0;z-index:20;background:rgba(60,28,6,.6);backdrop-filter:blur(4px);display:grid;place-items:center}
.wide[hidden],.player[hidden]{display:none}
.wide-box{width:min(92vw,calc((100vh - 120px)*16/9));aspect-ratio:16/9;background:#000;border-radius:18px;overflow:hidden;border:6px solid var(--o);display:flex;flex-direction:column}
.wide-box iframe{flex:1;height:auto}

@media (max-width:1180px) and (min-width:861px){.left{display:none}.stage{grid-template-columns:auto minmax(320px,1fr)}}

/* ===== 手机：只显示中间屏幕，全屏直接滑 ===== */
@media (max-width:860px){
  body{background:#000}
  .bg-deco,.nav,.left,.right,.foot,.hint,.tail,.ear{display:none}
  .stage{display:block;height:100%;padding:0}
  .center{height:100%;display:block}
  .phone{height:100%;width:100%;aspect-ratio:auto;border-radius:0;padding:0;box-shadow:none;background:#000}
  .screen{border-radius:0}
  .slide .info{bottom:calc(84px + env(safe-area-inset-bottom))}
  .slide .play{bottom:calc(24px + env(safe-area-inset-bottom))}
  .player iframe{inset:calc(34px + env(safe-area-inset-top)) 0 0;height:calc(100% - 34px - env(safe-area-inset-top))}
  .pbar{padding-top:env(safe-area-inset-top);height:calc(34px + env(safe-area-inset-top))}
  .wide-box{width:100vw;height:100%;aspect-ratio:auto;border:0;border-radius:0}
}
html.m-full,html.m-full body{height:100dvh}