/* =========================================================
   游戏盒子 · 公共样式（四个页面共用）
   设计语言：奶油纸 + 墨绿 + 一点红 新野兽派
   注意：本文件须在页面专属 CSS 之前引入
   字体策略：不 @import 远程字体（国内/微信环境会被墙，阻塞整张样式表导致页面裸奔），
   全部走系统字体栈兜底。
   ========================================================= */

:root{
  --paper:#F7F2E7;        /* 奶油纸 */
  --green:#1F5C4D;        /* 墨绿 主色 */
  --green-d:#16453A;      /* 深墨绿 描边/文字/深色块 */
  --red:#E2452F;          /* 一点红 强调/CTA */
  --leaf:#7CC79A;         /* 嫩绿 点缀 */
  --sand:#E8C98A;         /* 暖黄 装饰块 */
  --display:"ZCOOL KuaiLe","Baloo 2","PingFang SC","Microsoft YaHei","Heiti SC",sans-serif;
  --latin:"Baloo 2","Segoe UI","PingFang SC",system-ui,sans-serif;
  --body:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --bd:2.5px solid var(--green-d);
  --hd:4px 4px 0 var(--green-d);   /* 硬阴影：墨绿，红只点 CTA */
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{font-family:var(--body);background:#ECE3CE;display:flex;justify-content:center;align-items:center;min-height:100vh;padding:24px;color:var(--green-d)}

/* 手机壳 */
.phone{width:390px;height:844px;background:var(--paper);border-radius:46px;box-shadow:0 30px 70px rgba(31,92,77,.30),0 0 0 12px #ddd0b0,0 0 0 14px #c9b98f;overflow:hidden;position:relative;display:flex;flex-direction:column}
.notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:120px;height:28px;background:var(--green-d);border-radius:0 0 16px 16px;z-index:40}
.statusbar{height:46px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 24px 6px;font-size:13px;font-weight:700;color:#fff;flex:0 0 auto;background:var(--green-d)}
.screen{flex:1;position:relative;overflow:hidden}

/* 漂浮爱心层（一点红点缀） */
.hearts{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.hearts span{position:absolute;bottom:-30px;font-size:20px;opacity:0;animation:floatUp linear infinite}
.hearts span:nth-child(1){left:14%;font-size:16px;animation-duration:8s;animation-delay:0s}
.hearts span:nth-child(2){left:36%;font-size:22px;animation-duration:10s;animation-delay:1.8s}
.hearts span:nth-child(3){left:58%;font-size:15px;animation-duration:7s;animation-delay:3.2s}
.hearts span:nth-child(4){left:76%;font-size:20px;animation-duration:9s;animation-delay:.9s}
.hearts span:nth-child(5){left:89%;font-size:17px;animation-duration:8.5s;animation-delay:2.4s}
@keyframes floatUp{0%{transform:translateY(0) scale(.8) rotate(-8deg);opacity:0}12%{opacity:.8}100%{transform:translateY(-780px) scale(1.1) rotate(8deg);opacity:0}}

/* 视图切换（游戏页） */
.view{position:absolute;inset:0;display:flex;flex-direction:column;padding:0 22px;opacity:0;pointer-events:none;transition:opacity .3s var(--ease);z-index:5}
.view.on{opacity:1;pointer-events:auto}

/* 通用按钮 */
.btn{font-family:var(--display);font-size:19px;background:var(--red);color:#fff;border:2.5px solid var(--green-d);border-radius:16px;padding:13px 22px;cursor:pointer;box-shadow:4px 4px 0 var(--green-d);transition:transform .12s,box-shadow .12s;text-align:center}
.btn:active{transform:translate(4px,4px);box-shadow:none}
.btn.ghost{background:var(--paper);color:var(--green-d)}
.btn.leaf{background:var(--leaf);color:var(--green-d)}

/* 封面视图 */
.cover{justify-content:center;align-items:center;text-align:center;gap:14px}
.cover .badge{font-family:var(--display);font-size:14px;background:var(--red);color:#fff;border:2px solid var(--green-d);border-radius:18px;padding:5px 14px;transform:rotate(-3deg)}
.cover .big{font-size:70px;filter:drop-shadow(3px 3px 0 var(--leaf))}
.cover h1{font-family:var(--display);font-size:40px;line-height:1.05}
.cover .sub{font-size:14px;font-weight:500;max-width:280px;color:#3c5a50}
.cover .note{font-size:11.5px;color:#8aa195;background:#fff7e6;border:2px dashed var(--green-d);border-radius:12px;padding:9px 12px;line-height:1.5;text-align:left}
.cover .acts{display:flex;flex-direction:column;gap:10px;width:80%}

/* 房间（创建/加入） */
.room{justify-content:center;align-items:center;text-align:center;gap:14px}
.room .ill{font-size:54px}
.room h2{font-family:var(--display);font-size:28px}
.room .code{font-family:var(--latin);font-weight:800;font-size:40px;letter-spacing:6px;background:var(--sand);border:3px solid var(--green-d);border-radius:16px;padding:10px 20px;color:var(--green-d);box-shadow:var(--hd);cursor:pointer}
.room .code:active{transform:translate(2px,2px);box-shadow:none}
.room p{font-size:13.5px;color:#3c5a50;max-width:280px}
.room .wait{font-size:14px;font-weight:700;color:var(--red)}
.room input{font-family:var(--latin);font-weight:800;font-size:26px;letter-spacing:4px;text-align:center;text-transform:uppercase;width:160px;border:2.5px solid var(--green-d);border-radius:14px;padding:10px;background:#fff7e6;color:var(--green-d);outline:none}

/* 结果视图 */
.result{justify-content:center;align-items:center;text-align:center;gap:14px}

/* 底部 toast（居中大 toast 样式由各游戏页覆盖） */
.toast{position:absolute;left:50%;bottom:90px;transform:translateX(-50%) translateY(10px);background:var(--green-d);color:#fff;padding:10px 20px;border-radius:16px;border:2px solid var(--red);font-size:13px;font-weight:700;opacity:0;transition:opacity .25s,transform .25s;z-index:60;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.hearts{display:none}}

/* 真实手机（小屏）上不再套手机壳：内容铺满屏幕，隐藏模拟刘海/状态栏，避让安全区 */
@media (max-width:600px){
  body{display:block;padding:0;min-height:100dvh}
  .phone{width:100%;height:100vh;height:100dvh;border-radius:0;box-shadow:none;border:none;
         padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
  .notch{display:none}
  .statusbar{display:none}
}

/* 全局背景音乐开关按钮（右下角浮动） */
.sound-btn{position:fixed;right:14px;bottom:16px;width:46px;height:46px;border-radius:50%;border:2.5px solid var(--green-d);background:var(--paper);color:var(--green-d);font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:3px 3px 0 var(--green-d);z-index:65}
.sound-btn:active{transform:translate(3px,3px);box-shadow:none}