/* ============================================================
   木頭的书房 — style.css
   ============================================================ */

/* 中文点阵字体 Cubic 11（11×11 像素）
   授权：免费，可商用可修改，见 assets/fonts/Cubic_11.LICENSE.txt */
@font-face{
  font-family:'Cubic11';
  src:url('assets/fonts/Cubic_11.woff2') format('woff2');
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

:root{
  /* 取自原画的配色 */
  --bg:        #0e1115;
  --bg2:       #141922;
  --wall:      #c1a88e;
  --wood:      #603f28;
  --wood-dk:   #331d0f;
  --wood-lt:   #915a2f;
  --cream:     #e8dcc0;
  --cream-dk:  #c7b48d;
  --leaf:      #3f6b3a;
  --leaf-lt:   #6d9e57;
  --lamp:      #ffdda0;

  --px: 3px;

  /* 中文用点阵体，数字和拉丁字母用 Press Start 2P 更方正 */
  --font-cn: 'Cubic11', 'Press Start 2P', system-ui, sans-serif;
  --font-en: 'Press Start 2P', 'Cubic11', monospace;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html,body{
  height:100%;
  background:var(--bg);
  overflow:hidden;
  font-family:var(--font-cn);
  color:var(--cream);
  -webkit-font-smoothing:none;
  font-smooth:never;
  touch-action:manipulation;
}

body{
  display:block;
  min-height:100vh;
  position:relative;
}

/* ============ 房间画布：严格水平 + 垂直居中 ============ */
/* 桌面端用绝对定位 + transform 居中画布 */
@media (min-width:821px){
  #stage{
    position:absolute;
    left:50%; top:50%;
    line-height:0;
  }
  #stage > #game{
    display:block;
    transform:translate(-50%,-50%);
  }
}

/* 移动端：HUD 改成贴在视口上下，必须给中间留出空间
   ——否则居中的房间会被顶/底栏盖住。
   用 flex-direction:column + 中间区域自适应高度。 */
@media (max-width:820px){
  body{
    display:flex;
    flex-direction:column;
    padding:0;
  }
  /* 顶/底 HUD 各自固定高度，中间区域由 canvas 自己撑开 */
  .hud-top, .hud-bottom{ position:static; flex:none; padding:8px; }
  .hud-top{ padding-bottom:4px; }
  .hud-bottom{ padding-top:4px; }
  .hud-top .hud-left{ width:auto; }
  .hud-top .hud-right{ margin-left:auto; }
  #stage{
    flex:1 1 auto;
    width:100%;
    display:flex; align-items:center; justify-content:center;
    min-height:0;             /* 允许在 flex 中缩小 */
    padding:0;
  }
  #game{ display:block; }
  /* 让中间区域在视口上下各占一截，HUD 不会盖住房间 */
  html,body{ height:100%; }
}



/* ============ 开场加载 ============ */
#boot{
  position:fixed; inset:0; z-index:999;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .45s steps(6), visibility .45s;
}
#boot.gone{ opacity:0; visibility:hidden; }
.boot-inner{ text-align:center; padding:20px; }

.boot-title{
  font-family:var(--font-cn);
  font-size:clamp(30px,7vw,58px);
  color:var(--lamp);
  letter-spacing:6px;
  text-shadow:0 0 18px rgba(255,200,110,.30);
  line-height:1.2;
}
.boot-sub{
  font-family:var(--font-cn);
  font-size:clamp(14px,2.4vw,20px);
  color:var(--wall);
  letter-spacing:3px;
  margin:20px 0 28px;
}
.boot-bar{
  width:min(340px,72vw); height:14px; margin:0 auto;
  border:var(--px) solid var(--wood);
  background:#000; padding:2px;
}
.boot-fill{
  height:100%; width:0%;
  background:repeating-linear-gradient(90deg,var(--lamp) 0 6px,#e0b878 6px 9px);
  transition:width .16s steps(4);
}
.boot-status{
  font-family:var(--font-cn);
  font-size:14px; color:var(--leaf-lt);
  margin-top:16px; letter-spacing:2px;
}

/* ============ 舞台 ============ */
/* 桌面端的 absolute 居中规则在上面的 @media (min-width:821px) 块里。
   这里只放两个规则所有断点都需要的：阴影 + 像素光标。 */
#stage{ filter:drop-shadow(0 24px 60px rgba(0,0,0,.75)); }
#game{
  display:block;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  cursor:default;
}
#game.hot{ cursor:pointer; }

/* ============ HUD ============ */
.hud{
  position:absolute; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px;
  line-height:1;
  pointer-events:none;
  z-index:20;
  gap:10px;
}
.hud > *{ pointer-events:auto; }
.hud-top{ top:0; }
.hud-bottom{ bottom:0; }

.hud-left,.nav-hints,.quick-nav{
  background:rgba(14,17,22,.82);
  border:var(--px) solid var(--wood);
  box-shadow:inset 0 0 0 1px rgba(199,180,141,.14);
}

.hud-left{
  display:flex; align-items:center; gap:9px;
  padding:6px 14px 6px 6px;
}
.avatar-box{
  width:34px; height:34px;
  border:2px solid var(--wood-lt);
  background:var(--wood-dk);
  overflow:hidden; flex:none;
}
#avatarCv{ width:100%; height:100%; image-rendering:pixelated; display:block; }
.hud-id{ line-height:1.25; }
.hud-name{
  font-family:var(--font-cn);
  font-size:17px; color:var(--cream);
  letter-spacing:2px;
}
.hud-meta{
  font-size:13px; color:var(--wall);
  margin-top:4px; letter-spacing:2px;
}

.hud-right{ display:flex; align-items:center; gap:8px; }

/* ============ 像素按钮 ============ */
.pbtn{
  font-family:var(--font-cn);
  font-size:15px;
  color:var(--cream);
  background:var(--wood);
  border:var(--px) solid var(--wood-dk);
  box-shadow:inset 2px 2px 0 rgba(255,225,180,.22), inset -2px -2px 0 rgba(0,0,0,.42);
  padding:9px 13px;
  cursor:pointer;
  letter-spacing:1px;
  line-height:1;
  transition:transform .06s steps(2);
}
.pbtn:hover{ background:var(--wood-lt); }
.pbtn:active{
  transform:translate(2px,2px);
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.42);
}
.pbtn-sm{ font-size:14px; padding:9px 11px; }
.pbtn-ghost{
  background:transparent;
  border-color:var(--wood-lt);
  color:var(--wall);
}
.pbtn-ghost:hover{ background:rgba(145,90,47,.28); color:var(--cream); }

/* ============ 底部 ============ */
.nav-hints{
  font-size:14px; color:var(--wall);
  padding:9px 13px; letter-spacing:1px;
}
.nav-hints .key{
  font-family:var(--font-cn);
  font-size:12px; color:var(--lamp);
  border:1px solid var(--wood-lt);
  padding:3px 6px; margin:0 2px;
}
.nav-hints .sep{ color:var(--wood-lt); margin:0 6px; }

.quick-nav{ display:flex; }
.qbtn{
  font-family:var(--font-cn);
  font-size:15px;
  letter-spacing:2px;
  color:var(--cream-dk);
  background:transparent;
  border:none;
  border-right:1px solid rgba(145,90,47,.45);
  padding:11px 17px;
  cursor:pointer;
  transition:background .1s steps(2), color .1s steps(2);
}
.qbtn:last-child{ border-right:none; }
.qbtn:hover{ background:rgba(145,90,47,.3); color:var(--lamp); }

/* ============ 悬浮提示 ============ */
#tooltip{
  position:absolute;
  font-family:var(--font-cn);
  font-size:15px;
  letter-spacing:1px;
  background:rgba(14,17,22,.94);
  border:2px solid var(--lamp);
  color:var(--lamp);
  padding:7px 11px;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,-140%);
  transition:opacity .12s steps(2);
  white-space:nowrap;
  z-index:30;
  line-height:1;
}
#tooltip.on{ opacity:1; }

/* ============ 面板 ============ */
#panelWrap{
  position:absolute; inset:0;
  background:rgba(8,10,13,.72);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .18s steps(3), visibility .18s;
  z-index:40;
  padding:24px;
}
#panelWrap.on{ opacity:1; visibility:visible; }

#panel{
  width:min(600px,94%);
  max-height:80%;
  background:var(--bg2);
  border:var(--px) solid var(--wood-lt);
  box-shadow:0 0 0 3px var(--wood-dk), 0 18px 44px rgba(0,0,0,.7);
  display:flex; flex-direction:column;
  transform:translateY(10px) scale(.97);
  transition:transform .18s steps(3);
  line-height:1.5;
}
#panelWrap.on #panel{ transform:none; }

.panel-bar{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--wood);
  border-bottom:var(--px) solid var(--wood-dk);
  padding:10px 11px;
  flex:none;
}
.panel-title{
  font-family:var(--font-cn);
  font-size:18px; color:var(--cream);
  letter-spacing:3px;
}
.panel-x{
  font-family:var(--font-en);
  font-size:12px; line-height:1;
  background:var(--wood-dk); color:var(--cream);
  border:2px solid #21120a;
  width:26px; height:24px;
  cursor:pointer;
}
.panel-x:hover{ background:#8a3d3d; }

.panel-body{
  padding:18px 20px 22px;
  overflow-y:auto;
  font-size:16px;
  color:var(--cream-dk);
  letter-spacing:1px;
  scrollbar-width:thin;
  scrollbar-color:var(--wood-lt) var(--bg);
}
.panel-body::-webkit-scrollbar{ width:10px; }
.panel-body::-webkit-scrollbar-track{ background:var(--bg); }
.panel-body::-webkit-scrollbar-thumb{ background:var(--wood-lt); border:2px solid var(--bg); }

/* ---- 面板内容元件 ---- */
.p-h{
  font-family:var(--font-cn);
  font-size:16px; color:var(--lamp);
  margin:20px 0 11px;
  letter-spacing:3px;
  padding-left:10px;
  border-left:3px solid var(--leaf-lt);
}
.p-h:first-child{ margin-top:0; }

.p-t{ margin-bottom:11px; line-height:1.85; }
.p-t b{ color:var(--cream); font-weight:normal; }
.p-t:last-child{ margin-bottom:0; }

.p-tagline{
  color:var(--wall);
  font-size:15px;
  margin-bottom:16px;
  padding-bottom:14px;
  border-bottom:1px dashed rgba(145,90,47,.45);
  letter-spacing:2px;
}

.p-rule{ height:2px; background:var(--wood); margin:16px 0; opacity:.55; }

.p-row{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:14px;
  padding:9px 11px;
  background:rgba(0,0,0,.28);
  border-left:3px solid var(--wood-lt);
  margin-bottom:6px;
}
.p-row span:first-child{ color:var(--wall); flex:none; letter-spacing:2px; }
.p-row span:last-child{ color:var(--cream); text-align:right; }
.p-row a{ color:var(--lamp); text-decoration:none; border-bottom:1px dashed var(--lamp); }
.p-row a:hover{ color:#fff; }

.p-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.p-tag{
  font-family:var(--font-cn);
  font-size:13px;
  background:var(--wood-dk);
  border:1px solid var(--wood-lt);
  color:var(--cream-dk);
  padding:5px 9px; line-height:1.2;
  letter-spacing:1px;
}

/* ---- 项目卡片 ---- */
.proj{
  border:2px solid var(--wood);
  background:rgba(0,0,0,.28);
  padding:13px 14px;
  margin-bottom:10px;
}
.proj-top{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; margin-bottom:9px;
}
.proj-name{
  font-family:var(--font-cn);
  font-size:17px; color:var(--lamp);
  letter-spacing:2px;
}
.proj-year{ font-size:13px; color:var(--wall); flex:none; }
.proj-desc{ margin-bottom:10px; line-height:1.8; }
.proj .p-tags{ margin-bottom:0; }
.proj-link{
  display:inline-block;
  font-family:var(--font-cn);
  font-size:13px;
  color:var(--leaf-lt);
  text-decoration:none;
  border:1px solid var(--leaf);
  padding:6px 10px;
  margin-top:10px;
  letter-spacing:1px;
}
.proj-link:hover{ background:var(--leaf); color:#eaf5df; }

/* ---- 书籍卡片 ---- */
.book{
  display:flex; gap:12px;
  border-left:3px solid var(--wood-lt);
  background:rgba(0,0,0,.24);
  padding:12px 13px;
  margin-bottom:8px;
}
.book-spine{
  width:16px; flex:none;
  background:linear-gradient(180deg,var(--wood-lt),var(--wood-dk));
  border:1px solid var(--wood-dk);
  box-shadow:inset -2px 0 0 rgba(0,0,0,.35), inset 2px 0 0 rgba(255,220,170,.14);
}
.book-main{ flex:1; min-width:0; }
.book-top{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; margin-bottom:6px; flex-wrap:wrap;
}
.book-name{
  font-family:var(--font-cn);
  font-size:16px; color:var(--cream);
  letter-spacing:2px;
}
.book-author{ font-size:14px; color:var(--wall); }
.book-note{ font-size:15px; line-height:1.8; margin-top:7px; color:var(--cream-dk); }
.book-meta{ display:flex; align-items:center; gap:10px; margin-top:8px; flex-wrap:wrap; }
.book-stars{ color:var(--lamp); font-size:14px; letter-spacing:2px; }
.book-status{
  font-size:12px;
  border:1px solid var(--wood-lt);
  color:var(--wall);
  padding:3px 8px;
  letter-spacing:1px;
}
.book-status.reading{ border-color:var(--leaf-lt); color:var(--leaf-lt); }
.book-status.want{ border-color:var(--wood-lt); color:var(--wood-lt); }

.p-list{ list-style:none; }
.p-list li{
  padding:8px 0 8px 20px;
  position:relative;
  border-bottom:1px dashed rgba(145,90,47,.35);
  line-height:1.7;
}
.p-list li:last-child{ border-bottom:none; }
.p-list li::before{
  content:'▸'; position:absolute; left:4px; color:var(--leaf-lt);
}

.empty{ text-align:center; padding:28px 10px; color:var(--wall); line-height:2; }

/* ============ 气泡提示 ============ */
#toasts{
  position:absolute;
  top:64px; right:12px;
  display:flex; flex-direction:column; gap:7px;
  z-index:60;
  pointer-events:none;
  line-height:1.6;
  transition:opacity .18s steps(3);
}
/* 面板打开时把气泡淡掉，别挡住关闭按钮 */
#panelWrap.on ~ #toasts{ opacity:0; }
.toast{
  font-family:var(--font-cn);
  font-size:15px;
  letter-spacing:1px;
  background:rgba(14,17,22,.95);
  border-left:4px solid var(--leaf-lt);
  border-top:2px solid var(--wood);
  border-right:2px solid var(--wood);
  border-bottom:2px solid var(--wood);
  color:var(--cream);
  padding:10px 13px;
  max-width:280px;
  animation:tin .2s steps(3);
}
.toast.warn{ border-left-color:var(--lamp); }
.toast.out{ animation:tout .25s steps(3) forwards; }
@keyframes tin{ from{ transform:translateX(30px); opacity:0 } }
@keyframes tout{ to{ transform:translateX(30px); opacity:0 } }

/* ============ 移动端 ============ */
@media (max-width:820px){
  .nav-hints{ display:none; }

  /* 窄屏上房间是横向的，上下会留出空白。
     把 HUD 改成贴视口（而不是贴画面），它就落在空白处，不压住房间。 */
  .hud{ position:fixed; padding:8px; }
  .hud-top{ top:0; }
  .hud-bottom{ bottom:0; justify-content:center; }

  .hud-left{ padding:5px 10px 5px 5px; gap:7px; }
  .avatar-box{ width:28px; height:28px; }
  .hud-name{ font-size:14px; letter-spacing:1px; }
  .hud-meta{ font-size:11px; margin-top:3px; letter-spacing:1px; }

  .pbtn-sm{ font-size:13px; padding:8px 9px; }

  .quick-nav{ width:100%; }
  .qbtn{ font-size:14px; padding:12px 6px; flex:1; letter-spacing:1px; }

  .panel-body{ font-size:15px; padding:15px 16px 18px; }
  .panel-title{ font-size:16px; }
  #panel{ max-height:76%; width:96%; }
  #panelWrap{ position:fixed; padding:12px; }

  .boot-title{ letter-spacing:4px; }

  /* 气泡贴视口，别超出屏幕 */
  #toasts{ position:fixed; top:56px; right:8px; left:8px; align-items:flex-end; }
  .toast{ max-width:100%; font-size:14px; }

  .book{ gap:9px; padding:10px 11px; }
  .book-spine{ width:12px; }
  .p-row{ padding:8px 9px; gap:9px; }
}

/* 极窄屏：进一步压缩 */
@media (max-width:400px){
  .hud-meta{ display:none; }
  .qbtn{ font-size:13px; padding:11px 4px; letter-spacing:0; }
}