:root{
  --page-max:1180px;
  --content-max:820px;
  --ease:cubic-bezier(.22,1,.36,1);
  --primary:#7dd3fc;
  --secondary:#a78bfa;
  --text:#f8fafc;
  --glass-alpha:.075;
  --glass-blur:22px;
  --glass-border:rgba(255,255,255,.14);
  --radius:22px;
  --font:Inter,'SF Pro Display','PingFang SC','Microsoft YaHei','Helvetica Neue',Arial,sans-serif;
  --z-bg:0;--z-particles:1;--z-page:2;--z-player:50;--z-cursor:900;--z-click:901;--z-menu:1000;--z-loader:1100;
}
*{box-sizing:border-box;margin:0;padding:0}
html{min-height:100%;background:#060811;color-scheme:dark;scroll-behavior:smooth}
body{min-height:100vh;overflow-x:hidden;font-family:var(--font);color:var(--text);background:#060811;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent}
body.hide-cursor,body.hide-cursor *{cursor:none!important}
img{display:block;max-width:100%}a{color:inherit;text-decoration:none}button,input{border:0;outline:0;background:none;color:inherit;font:inherit}ul{list-style:none}
::selection{color:#06101c;background:var(--primary)}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--primary);outline-offset:3px}

.loader{position:fixed;inset:0;z-index:var(--z-loader);display:grid;place-items:center;background:#060811;transition:opacity .65s ease,visibility .65s ease}
.loader.is-hidden{opacity:0;visibility:hidden}
.loader-box{display:flex;flex-direction:column;align-items:center;gap:16px}
.loader-ring{width:42px;height:42px;border:1px solid rgba(255,255,255,.12);border-top-color:var(--primary);border-right-color:var(--secondary);border-radius:50%;animation:spin 1s linear infinite;box-shadow:0 0 36px rgba(125,211,252,.12)}
.loader-text{font-size:10px;letter-spacing:.42em;text-transform:uppercase;opacity:.42}
@keyframes spin{to{transform:rotate(360deg)}}

.bg{position:fixed;inset:0;z-index:var(--z-bg);overflow:hidden;background:#060811}
.bg-img{position:absolute;inset:-3%;background-position:center;background-size:cover;background-repeat:no-repeat;opacity:0;transition:opacity 1.6s var(--ease);will-change:opacity,transform}
.bg-img.is-active{opacity:1}
.bg.has-zoom .bg-img.is-active{animation:kenburns 30s ease-in-out forwards alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.075) translate3d(0,-1%,0)}}
.bg-mask{position:absolute;inset:0;background:radial-gradient(circle at 50% 38%,rgba(125,211,252,.08),transparent 25%),linear-gradient(180deg,rgba(3,5,12,.08),rgba(3,5,12,.34) 45%,rgba(3,5,12,.82) 100%),rgba(6,8,17,.25);pointer-events:none}
.fx-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
#fxParticles{z-index:var(--z-particles)}#fxCursor{z-index:var(--z-cursor)}#fxClick{z-index:var(--z-click)}

.page{position:relative;z-index:var(--z-page);width:100%;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(64px,11vh,130px) 24px 170px;gap:38px}
.slot{width:min(100%,920px);display:flex;justify-content:center}.slot:empty{display:none}
.hero{position:relative;width:min(100%,var(--content-max));display:flex;flex-direction:column;align-items:center;gap:15px;text-align:center;animation:riseIn .9s var(--ease) both}
.hero:before{content:"";position:absolute;z-index:-1;width:440px;height:220px;top:50px;left:50%;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(125,211,252,.09),transparent 68%);filter:blur(20px);pointer-events:none}
@keyframes riseIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.avatar-wrap{position:relative;margin-bottom:8px;padding:7px;border:1px solid rgba(255,255,255,.10);border-radius:50%;background:rgba(255,255,255,.025);box-shadow:0 20px 70px rgba(0,0,0,.28)}
.avatar{width:124px;height:124px;object-fit:cover;border:1px solid rgba(255,255,255,.45);border-radius:50%;background:rgba(255,255,255,.08);box-shadow:0 0 45px rgba(125,211,252,.10),0 18px 55px rgba(0,0,0,.42);transition:transform .55s var(--ease),box-shadow .55s ease}
.avatar.is-round{border-radius:50%}.avatar.is-square{border-radius:26px}
.avatar-wrap.has-glow:after{content:"";position:absolute;inset:-10px;border:1px solid rgba(125,211,252,.09);border-radius:inherit;animation:halo 4s ease-in-out infinite;pointer-events:none}
@keyframes halo{50%{transform:scale(1.045);opacity:.55}}
.avatar-wrap:hover .avatar{transform:translateY(-5px) scale(1.035);box-shadow:0 0 60px rgba(125,211,252,.18),0 22px 60px rgba(0,0,0,.46)}

.big-title{max-width:92vw;font-size:clamp(34px,5vw,58px);font-weight:700;letter-spacing:-.035em;line-height:1.08;background:linear-gradient(115deg,var(--text) 12%,var(--primary) 55%,var(--secondary) 92%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 12px 32px rgba(0,0,0,.28))}
.subtitle{min-height:1.7em;max-width:90vw;font-size:15px;line-height:1.7;letter-spacing:.025em;opacity:.72}.caret{display:inline-block;margin-left:2px;color:var(--primary);font-style:normal;animation:blink 1s steps(1) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

.info-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:7px;margin-top:4px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:1px solid rgba(255,255,255,.11);border-radius:999px;background:rgba(255,255,255,.035);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);font-size:10px;letter-spacing:.015em;white-space:nowrap;box-shadow:0 8px 28px rgba(0,0,0,.12)}
.chip:empty{display:none}
.hitokoto{max-width:min(650px,90vw);margin-top:5px;font-size:12px;line-height:1.9;letter-spacing:.01em;opacity:.48}.hitokoto:empty{display:none}.hitokoto .from{display:block;margin-top:2px;font-size:10px;opacity:.65}

.search{position:relative;z-index:10;display:flex;align-items:center;width:min(100%,760px);margin-top:18px;padding:7px;border:1px solid rgba(255,255,255,.18);border-radius:20px;background:rgba(7,10,20,.46);backdrop-filter:blur(28px) saturate(135%);-webkit-backdrop-filter:blur(28px) saturate(135%);box-shadow:0 30px 100px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.07);transition:border-color .3s ease,box-shadow .35s var(--ease),transform .35s var(--ease),background .35s ease}
.search:before{content:"";position:absolute;inset:1px;border-radius:18px;background:linear-gradient(100deg,rgba(125,211,252,.06),transparent 42%,rgba(167,139,250,.05));pointer-events:none}
.search:focus-within{border-color:rgba(125,211,252,.52);background:rgba(7,10,20,.56);transform:translateY(-2px);box-shadow:0 34px 110px rgba(0,0,0,.44),0 0 0 4px rgba(125,211,252,.055),inset 0 1px 0 rgba(255,255,255,.09)}
.engine{position:relative;flex-shrink:0}.engine-current{display:flex;align-items:center;gap:7px;padding:11px 12px;border-radius:13px;cursor:pointer;font-size:11px;font-weight:600;letter-spacing:.02em;white-space:nowrap;transition:background .2s ease,color .2s ease}
.engine-current:hover{background:rgba(255,255,255,.08)}.ico-chev{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}.engine.is-open .ico-chev{transform:rotate(180deg)}
.engine-list{position:absolute;left:0;bottom:calc(100% + 11px);min-width:145px;max-height:min(50vh,290px);overflow:auto;padding:6px;border:1px solid rgba(255,255,255,.13);border-radius:15px;background:rgba(9,12,23,.90);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);box-shadow:0 24px 70px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(8px) scale(.97);transition:opacity .2s ease,transform .2s ease,visibility .2s}
.engine.is-open .engine-list{opacity:1;visibility:visible;transform:none}.engine-list li{padding:10px 12px;border-radius:9px;cursor:pointer;font-size:11px;white-space:nowrap}.engine-list li:hover{background:rgba(255,255,255,.07)}.engine-list li.is-active{color:var(--primary);background:rgba(125,211,252,.07)}
.search-input{position:relative;z-index:1;flex:1;min-width:0;padding:13px 10px;font-size:15px;background:transparent}.search-input::placeholder{color:rgba(255,255,255,.36)}
.search-btn{position:relative;z-index:1;flex-shrink:0;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;cursor:pointer;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#07101b;box-shadow:0 8px 26px rgba(125,211,252,.16);transition:transform .25s var(--ease),filter .25s ease,box-shadow .25s ease}.search-btn:hover{transform:translateY(-1px) scale(1.035);filter:brightness(1.08);box-shadow:0 10px 32px rgba(125,211,252,.24)}.search-btn:active{transform:scale(.94)}.ico-search{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}

.showcase{position:relative;z-index:1;width:min(920px,100%);padding:18px;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);background:rgba(8,12,24,.32);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));box-shadow:0 30px 100px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.05);animation:riseIn .9s var(--ease) both}
.sc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding:0 5px}.sc-title{font-size:14px;font-weight:650;letter-spacing:.05em}.sc-body{position:relative}
.sc-item{display:flex;align-items:center;gap:20px;padding:12px;border-radius:15px}.sc-item:hover{background:rgba(255,255,255,.035)}.sc-item.pos-left{flex-direction:row}.sc-item.pos-right{flex-direction:row-reverse}.sc-item.pos-top{flex-direction:column}.sc-item.pos-bottom{flex-direction:column-reverse}
.sc-img{flex-shrink:0;width:180px;height:180px;object-fit:cover;border-radius:14px;background:rgba(255,255,255,.05);box-shadow:0 12px 32px rgba(0,0,0,.25)}.sc-text{flex:1;min-width:0;font-size:14px;line-height:1.9;white-space:pre-line;overflow-wrap:anywhere;opacity:.84}.sc-static{display:flex;flex-direction:column;gap:6px}
.sc-slider{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.sc-slider::-webkit-scrollbar{display:none}.sc-slider .sc-item{flex:0 0 100%;scroll-snap-align:start}.sc-carousel .sc-item{display:none}.sc-carousel .sc-item.is-active{display:flex;animation:fadeUp .55s ease both}@keyframes fadeUp{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.sc-arrow{position:absolute;top:50%;display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(255,255,255,.12);border-radius:50%;background:rgba(7,10,18,.5);backdrop-filter:blur(10px);transform:translateY(-50%);cursor:pointer;z-index:3}.sc-arrow:hover{background:rgba(7,10,18,.78)}.sc-arrow.prev{left:-4px}.sc-arrow.next{right:-4px}.sc-arrow svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sc-dots{display:flex;justify-content:center;gap:7px;margin-top:11px}.sc-dots .dot{width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.25);cursor:pointer;transition:width .25s ease,background .25s ease}.sc-dots .dot.is-active{width:20px;background:var(--primary)}

.footer{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:auto;padding-top:4px;text-align:center;animation:riseIn 1s var(--ease) .15s both}.social{display:flex;flex-wrap:wrap;justify-content:center;gap:7px}.social a{display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(255,255,255,.11);border-radius:12px;background:rgba(255,255,255,.035);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:transform .25s var(--ease),background .25s ease,color .25s ease}.social a:hover{transform:translateY(-3px);background:var(--primary);color:#07101b}.social svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.footer-text,.visit{font-size:10px;letter-spacing:.03em;opacity:.30}.footer-text:empty,.visit:empty{display:none}

.player{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));z-index:var(--z-player);width:min(880px,calc(100% - 48px));transform:translateX(-50%);padding:7px 9px;border:1px solid rgba(255,255,255,.13);border-radius:18px;background:rgba(6,9,18,.60);backdrop-filter:blur(26px) saturate(130%);-webkit-backdrop-filter:blur(26px) saturate(130%);box-shadow:0 24px 90px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.07);animation:riseIn 1s var(--ease) .3s both}
.spectrum{display:block;width:100%;height:18px;margin-bottom:2px;opacity:.55}.spectrum.is-hidden{display:none}
.player-main{display:flex;align-items:center;gap:7px}.pbtn{flex-shrink:0;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:rgba(255,255,255,.055);cursor:pointer;transition:background .2s ease,transform .2s var(--ease),box-shadow .2s ease}.pbtn:hover{background:rgba(255,255,255,.11);box-shadow:0 8px 24px rgba(0,0,0,.18)}.pbtn:active{transform:scale(.91)}
.pbtn-play{width:40px;height:40px;border-radius:13px;color:#07101b;background:linear-gradient(135deg,var(--primary),var(--secondary));box-shadow:0 8px 24px rgba(125,211,252,.14)}.pbtn-play:hover{background:linear-gradient(135deg,var(--primary),var(--secondary))}
.ico-pause{display:none}.player.is-playing .ico-play{display:none}.player.is-playing .ico-pause{display:block}
.track{flex:1;min-width:0}.track-name{margin-bottom:3px;font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-bar{display:flex;align-items:center;gap:7px}.time{flex-shrink:0;font-size:9px;opacity:.42;font-variant-numeric:tabular-nums}
.vol{display:flex;align-items:center;gap:5px;flex-shrink:0}.range{width:100%;height:3px;border-radius:999px;appearance:none;-webkit-appearance:none;cursor:pointer;background:linear-gradient(to right,var(--primary) 0%,var(--primary) var(--fill,0%),rgba(255,255,255,.18) var(--fill,0%),rgba(255,255,255,.18) 100%)}.range-vol{width:62px}.range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.35)}.range::-moz-range-thumb{width:9px;height:9px;border:0;border-radius:50%;background:#fff}
.playlist{max-height:0;margin-top:0;overflow-y:auto;opacity:0;transition:max-height .38s var(--ease),opacity .25s ease,margin-top .38s var(--ease)}.player.list-open .playlist{max-height:220px;margin-top:8px;opacity:1}.playlist li{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:9px;cursor:pointer;font-size:11px}.playlist li:hover{background:rgba(255,255,255,.07)}.playlist li.is-current{color:var(--primary);background:rgba(125,211,252,.055)}.playlist li .idx{width:18px;opacity:.4;font-size:9px}.playlist li .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.ctx-menu{position:fixed;z-index:var(--z-menu);min-width:148px;padding:6px;border:1px solid rgba(255,255,255,.13);border-radius:14px;background:rgba(9,12,23,.90);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 20px 60px rgba(0,0,0,.48);opacity:0;visibility:hidden;transform:scale(.97);transform-origin:top left;transition:opacity .16s ease,transform .16s ease,visibility .16s}.ctx-menu.is-open{opacity:1;visibility:visible;transform:scale(1)}.ctx-menu li{padding:9px 12px;border-radius:8px;cursor:pointer;font-size:11px}.ctx-menu li:hover{background:rgba(255,255,255,.07)}

@media(max-width:1024px){.page{padding:52px 20px 155px}.search{width:min(720px,100%)}.player{width:calc(100% - 40px)}}
@media(max-width:768px){
  .page{min-height:100svh;justify-content:flex-start;padding:48px 16px 135px;gap:22px}.hero{gap:13px}.avatar{width:92px;height:92px}.big-title{font-size:clamp(27px,7.5vw,38px)}.subtitle{font-size:13px}.info-row{gap:5px}.chip{padding:5px 9px;font-size:10px}.hitokoto{max-width:92vw;font-size:11px}
  .search{width:100%;margin-top:8px;padding:5px;border-radius:17px}.search-input{padding:12px 5px;font-size:16px}.engine-current{padding:9px 8px}.search-btn{width:40px;height:40px;border-radius:12px}
  .spectrum,.vol{display:none}.player{bottom:calc(10px + env(safe-area-inset-bottom));width:calc(100% - 18px);padding:7px 8px;border-radius:16px}.player-main{gap:5px}.pbtn{width:31px;height:31px;border-radius:10px}.pbtn-play{width:37px;height:37px}.time{display:none}
  .showcase{width:92%;padding:13px}.sc-item{gap:12px;padding:8px}.sc-text{font-size:12px}.footer-text,.visit{font-size:9px}
}
@media(max-width:480px){
  .page{padding:36px 12px 125px;gap:17px}.avatar{width:82px;height:82px}.big-title{font-size:23px}.subtitle{font-size:12px}.chip{font-size:9px;padding:5px 8px}
  .engine-current{padding:9px 7px}.engine-current span{max-width:54px;overflow:hidden;text-overflow:ellipsis}.social a{width:33px;height:33px}.social svg{width:14px;height:14px}
  .showcase{width:100%;border-radius:16px}.sc-title{font-size:13px}.sc-text{font-size:11px}.player{width:calc(100% - 12px)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}


/* final visual reset */
body{background:#08090d}
.page{justify-content:center;padding:70px 24px 120px;gap:30px}
.hero{gap:14px}
.hero:before{width:520px;height:300px;background:radial-gradient(ellipse,rgba(255,255,255,.07),transparent 68%)}
.avatar-wrap{padding:6px;border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.035);box-shadow:0 18px 70px rgba(0,0,0,.35)}
.avatar{width:112px;height:112px;box-shadow:0 12px 55px rgba(0,0,0,.4);filter:saturate(.94)}
.big-title{font-size:clamp(32px,5vw,54px);letter-spacing:-.045em}
.subtitle{font-size:14px;opacity:.6}
.info-row{margin-top:2px}
.chip{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.10)}
.hitokoto{margin-top:2px;opacity:.38}
.search{margin-top:18px;width:min(680px,100%);border-radius:18px;background:rgba(8,10,16,.58);box-shadow:0 24px 80px rgba(0,0,0,.36)}
.search-key{font-size:9px;border:1px solid rgba(255,255,255,.12);padding:3px 6px;border-radius:5px;opacity:.25}
.search-btn{width:42px;height:42px;border-radius:12px;font-size:18px}
.showcase{margin-top:8px}
.footer{padding-top:20px}
.player{width:min(760px,calc(100% - 32px));bottom:16px;border-radius:15px;background:rgba(7,9,14,.64);padding:6px 8px}
.pbtn{width:32px;height:32px;border-radius:9px}.pbtn-play{width:38px;height:38px}
.track-name{font-size:10px}.spectrum{height:12px;opacity:.4}
@media(max-width:768px){.page{padding:48px 16px 110px;gap:22px}.avatar{width:92px;height:92px}.big-title{font-size:28px}.search{margin-top:8px}.player{width:calc(100% - 14px);bottom:8px}.range-vol{display:none}}


/* =========================
 * final polish
 * ========================= */

/* 搜索引擎菜单：统一向下展开 */
.engine-list{
  top:calc(100% + 10px);
  bottom:auto;
  transform:translateY(-8px) scale(.97);
}
.engine.is-open .engine-list{
  transform:none;
}

/* 加载点补全：轻微呼吸，不抢画面 */
.loader-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--primary);
  box-shadow:0 0 22px var(--primary);
  animation:loaderPulse 1.2s ease-in-out infinite;
}
@keyframes loaderPulse{
  0%,100%{transform:scale(.72);opacity:.42}
  50%{transform:scale(1);opacity:1}
}

/* 搜索框更轻一点，减少“卡片感” */
.search{
  box-shadow:0 22px 70px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.06);
}
.search:focus-within{
  transform:translateY(-1px);
}

/* 壁纸是主角，内容层保持克制 */
.hero:before{
  opacity:.75;
}
.info-row{
  opacity:.9;
}
.footer{
  opacity:.9;
}

/* 手机端菜单不要离搜索框太远 */
@media(max-width:768px){
  .engine-list{
    top:calc(100% + 7px);
    max-height:42vh;
  }
  .search{
    box-shadow:0 18px 50px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.06);
  }
}


/* interaction fixes: keep dropdown below and keep fixed player centered */
.engine-list{
  top:calc(100% + 10px) !important;
  bottom:auto !important;
  transform:translateY(-8px) scale(.97) !important;
}
.engine.is-open .engine-list{
  transform:translateY(0) scale(1) !important;
}

.player{
  box-sizing:border-box;
  left:12px;
  right:12px;
  width:auto;
  max-width:880px;
  margin:0 auto;
  transform:none;
  animation:playerIn .7s var(--ease) .3s both;
}
@keyframes playerIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
@media(max-width:768px){
  .player{left:6px;right:6px;width:auto;max-width:none;margin:0}
}



/* mobile layout + search field cleanup */
.search{
  border:0 !important;
  box-shadow:none !important;
  background:rgba(7,10,20,.30);
}
.search:focus-within{
  border:0 !important;
  box-shadow:none !important;
}
.search-input{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}
@media(max-width:768px){
  html,body{
    width:100%;
    min-width:0;
    overflow-x:hidden;
  }
  .page{
    width:100%;
    max-width:100%;
    align-items:center;
    justify-content:flex-start;
    padding-left:12px;
    padding-right:12px;
  }
  .slot,
  .hero,
  .footer{
    width:100%;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
  }
  .hero{
    align-items:center;
    text-align:center;
  }
  .search{
    width:100%;
    max-width:680px;
    margin-left:auto;
    margin-right:auto;
  }
  .info-row,
  .social{
    width:100%;
    justify-content:center;
  }
  .hitokoto{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }
  .showcase{
    margin-left:auto;
    margin-right:auto;
  }
}
@media(max-width:480px){
  .page{
    padding-left:10px;
    padding-right:10px;
  }
  .hero,.search,.slot,.footer{
    width:100%;
  }
}


/* viewport lock: keep the wallpaper page fixed in the viewport */
html,
body{
  width:100%;
  height:100%;
  min-height:100%;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior-x:none !important;
  overscroll-behavior-y:auto !important;
  -webkit-overflow-scrolling:touch;
}

body{
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
}

.page{
  width:100%;
  min-height:100dvh;
  max-height:100dvh;
  overflow:hidden;
}

/* controls still need normal touch interaction */
input,
button,
a,
.engine-list,
.playlist,
.sc-slider,
.range{
  touch-action:manipulation;
}

.search-input{
  user-select:text;
  -webkit-user-select:text;
  touch-action:manipulation;
}

/* wide 2712×1220-class landscape screens */
@media (min-width:1600px) and (min-height:900px) and (orientation:landscape){
  .page{
    padding:48px 32px 104px;
    gap:24px;
  }
  .hero{
    gap:12px;
  }
  .avatar{
    width:108px;
    height:108px;
  }
  .big-title{
    font-size:clamp(38px,3.8vw,56px);
  }
  .search{
    margin-top:12px;
  }
  .showcase{
    margin-top:2px;
  }
  .player{
    bottom:14px;
  }
}


/* mobile touch feedback: keep interaction, remove pressed visual effects */
@media (hover:none) and (pointer:coarse){
  html,
  body,
  button,
  a,
  input,
  [role="button"]{
    -webkit-tap-highlight-color:transparent !important;
  }

  .pbtn:active,
  .search-btn:active,
  .sc-arrow:active,
  .social a:active,
  .engine-current:active,
  .engine-list li:active,
  .playlist li:active,
  .ctx-menu li:active,
  .sc-dots .dot:active,
  .avatar-wrap:active .avatar{
    transform:none !important;
    filter:none !important;
  }

  .search:focus-within{
    transform:none !important;
  }
}


/* RoboCode shortcut */
.game-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:2px;
  padding:10px 16px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(8,10,20,.28);
  color:rgba(255,255,255,.78);
  font-size:12px;
  letter-spacing:.02em;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.game-link span{color:var(--primary);font-size:15px}
.game-link:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.3);
  color:#fff;
}
@media(max-width:768px){
  .game-link{margin-top:0;padding:9px 14px;font-size:11px}
}