*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;font-family:'Microsoft YaHei','PingFang SC',sans-serif;color:#3e2723}
.page{display:none;width:100%;height:100%;position:absolute;top:0;left:0;flex-direction:column;align-items:center}
.page.active{display:flex}

/* ===== 界面1：菜单 ===== */
#page-menu{background:url('UI/背景1.png') center/cover no-repeat;justify-content:flex-start;overflow-y:auto}
.menu-overlay{width:100%;min-height:100%;display:flex;flex-direction:column;align-items:center;padding-top:30px;padding-bottom:100px;background:rgba(0,0,0,0.15)}
.title-area{display:flex;flex-direction:column;align-items:center;margin-bottom:10px}
.title-mascot{width:140px;margin-bottom:-10px;filter:drop-shadow(0 4px 12px rgba(0,0,0,0.4));animation:float 3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.game-title{font-size:28px;font-weight:900;color:#fff;text-shadow:2px 2px 0 #8b4513,-1px -1px 0 #8b4513,1px -1px 0 #8b4513,-1px 1px 0 #8b4513,0 3px 6px rgba(0,0,0,0.5);letter-spacing:3px;margin-top:8px}
.rules-card{background:rgba(30,20,10,0.75);border:2px solid #c8a96e;border-radius:12px;padding:18px 28px;max-width:520px;width:88%;margin:16px 0 20px;backdrop-filter:blur(6px)}
.rules-card h3{color:#ffd54f;font-size:16px;margin-bottom:10px;text-align:center}
.rules-card p{color:#e0d6c8;font-size:13px;line-height:1.8;text-align:center}
.rules-card .warn{color:#ff8a65;font-weight:bold}
.diff-buttons{display:flex;flex-direction:column;align-items:center;gap:14px}
.diff-btn{cursor:pointer;border:none;background:none;transition:transform 0.2s,filter 0.2s}
.diff-btn img{width:200px;filter:drop-shadow(0 4px 8px rgba(0,0,0,0.5))}
.diff-btn:hover{transform:scale(1.08);filter:brightness(1.15)}
.diff-btn:active{transform:scale(0.96)}

/* ===== 界面2：游戏 ===== */
#page-game{background:url('UI/背景3.png') center/cover no-repeat;flex-direction:row;flex-wrap:wrap}
.game-topbar{position:absolute;top:0;left:0;right:0;height:48px;background:linear-gradient(180deg,rgba(40,25,10,0.92) 0%,rgba(40,25,10,0.7) 100%);border-bottom:2px solid #c8a96e;display:flex;align-items:center;padding:0 16px;z-index:20}
.topbar-controls{display:flex;gap:8px}
.ctrl-btn{width:32px;height:32px;cursor:pointer;border:none;background:none;opacity:0.85;transition:opacity 0.2s,transform 0.2s}
.ctrl-btn img{width:100%;height:100%}
.ctrl-btn:hover{opacity:1;transform:scale(1.12)}
.topbar-diff{color:#ffd54f;font-size:18px;font-weight:900;text-shadow:0 2px 4px rgba(0,0,0,0.5);letter-spacing:3px;margin-left:auto;margin-right:auto}
.topbar-stats{display:flex;gap:12px;margin-left:12px}
.stat-item{color:#e0d6c8;font-size:12px;font-weight:bold;white-space:nowrap}
.stat-item span{color:#ffd54f}
.guess-info{display:flex;align-items:center;gap:8px}
.guess-info span{color:#ff8a65;font-size:12px;font-weight:bold}
.guess-dots{display:flex;gap:6px}
.guess-dot{width:14px;height:14px;border-radius:50%;border:2px solid #c8a96e;background:transparent;transition:background 0.3s}
.guess-dot.used{background:#e53935;border-color:#e53935}
.guess-dot.correct{background:#43a047;border-color:#43a047}

.game-left{flex:1;height:100%;padding:58px 16px 80px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow-y:auto}
.char-grid{display:grid;gap:8px;justify-content:center;align-content:center;width:100%}
.char-grid.easy{grid-template-columns:repeat(4,1fr);max-width:560px}
.char-grid.medium{grid-template-columns:repeat(5,1fr);max-width:650px}
.char-grid.hard{grid-template-columns:repeat(8,1fr);max-width:880px}
.char-card{position:relative;border:3px solid #c8a96e;border-radius:8px;overflow:visible;cursor:pointer;transition:transform 0.2s,box-shadow 0.2s,border-color 0.2s;background:#1a1206;perspective:600px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.char-card .card-inner{position:relative;width:100%;transition:transform 0.6s ease;transform-style:preserve-3d;border-radius:5px;overflow:hidden}
.char-card img{width:100%;height:auto;object-fit:contain;display:block}
.char-card .char-name{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,0.85));color:#fff;font-size:11px;padding:14px 4px 4px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.char-card:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(200,169,110,0.5);border-color:#ffd54f}
/* 排除特效：翻转一圈 + 图片变灰 + 红色大叉覆盖 */
.char-card.eliminated .card-inner{animation:eliminateFlip 0.8s cubic-bezier(0.34,1.2,0.64,1) forwards}
.char-card.eliminated{border-color:#ff1744;animation:eliminateFlash 0.8s ease}
.char-card.eliminated .card-front img{filter:grayscale(100%) brightness(0.6) contrast(0.9)}
.char-card.eliminated .card-back{opacity:1}
.char-card.eliminated:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(255,23,68,0.55);border-color:#ff5252}
.char-card .card-front{position:relative;backface-visibility:visible;-webkit-backface-visibility:visible}
.char-card .card-front img{transition:filter 0.3s ease 0.5s}
/* card-back 改为覆盖在 card-front 之上的透明层，仅显示红叉 */
.char-card .card-back{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transition:opacity 0.3s ease 0.5s;pointer-events:none;transform:none}
.char-card .card-back .x-mark{font-size:72px;font-weight:900;color:#ff1744;text-shadow:0 0 20px rgba(255,23,68,1),0 0 40px rgba(255,23,68,0.85),0 0 8px #fff,2px 2px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000;animation:xPulse 2s ease-in-out infinite;line-height:1}
.char-card .card-back .elim-name{display:none}
.char-card.eliminated.hidden{display:none}
.char-card.highlighted{border-color:#ff6f00;box-shadow:0 0 15px rgba(255,111,0,0.6)}

/* 长按蓄力特效：金色光晕 + 缓慢放大 */
.char-card.charging{animation:chargePulse 0.5s ease-out forwards;z-index:30}
@keyframes chargePulse{
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,213,79,0.8),0 0 0 0 rgba(255,213,79,0.6)}
  50%{transform:scale(1.06);box-shadow:0 0 24px 6px rgba(255,213,79,0.85),0 0 40px 10px rgba(255,152,0,0.4)}
  100%{transform:scale(1.1);box-shadow:0 0 36px 12px rgba(255,213,79,1),0 0 60px 20px rgba(255,152,0,0.6),inset 0 0 20px rgba(255,235,59,0.4)}
}
/* 猜测触发瞬间：金光爆发 + 弹出 */
.char-card.guess-trigger{animation:guessBurst 0.4s cubic-bezier(0.34,1.56,0.64,1);z-index:40;border-color:#ffeb3b!important}
@keyframes guessBurst{
  0%{transform:scale(1.1);box-shadow:0 0 36px 12px rgba(255,213,79,1),0 0 60px 20px rgba(255,152,0,0.6)}
  50%{transform:scale(1.28) rotate(-2deg);box-shadow:0 0 60px 20px rgba(255,235,59,1),0 0 100px 40px rgba(255,111,0,0.8),0 0 150px 60px rgba(255,23,68,0.4)}
  100%{transform:scale(1);box-shadow:0 6px 20px rgba(255,213,79,0.5)}
}

/* 排除动画：Y轴360°翻转一圈（保持正面可见，无需切到背面） */
@keyframes eliminateFlip{
  0%{transform:rotateY(0deg) scale(1)}
  50%{transform:rotateY(180deg) scale(1.05)}
  100%{transform:rotateY(360deg) scale(1)}
}
@keyframes eliminateFlash{0%{box-shadow:0 0 0 0 rgba(255,23,68,0)}40%{box-shadow:0 0 40px 12px rgba(255,23,68,0.85)}100%{box-shadow:0 0 0 0 rgba(255,23,68,0)}}
@keyframes xPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:0.75}}

.game-right{width:300px;height:100%;background:rgba(30,22,10,0.88);border-left:3px solid #c8a96e;display:flex;flex-direction:column;padding-top:48px;padding-bottom:62px;backdrop-filter:blur(4px)}
.chat-header{padding:6px 14px;border-bottom:1px solid #5d4e37;color:#ffd54f;font-size:15px;font-weight:bold;text-align:center;display:flex;align-items:center;justify-content:center}
.chat-welcome{padding:14px 16px;font-size:12px;color:#c8a96e;line-height:1.8;border-bottom:1px solid #5d4e37}
.chat-welcome .warn{color:#ff8a65;font-weight:bold}
.chat-welcome b{color:#ffd54f}
.chat-welcome .tip{color:#ff8a65;font-weight:bold;margin-top:6px;display:block}
.chat-messages{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
.chat-msg{max-width:92%;padding:8px 12px;border-radius:10px;font-size:13px;line-height:1.6;word-break:break-word}
.chat-msg.system{align-self:center;background:rgba(200,169,110,0.2);border:1px solid #5d4e37;color:#c8a96e;font-size:12px;text-align:center;max-width:100%}
.chat-msg.ai{align-self:flex-start;background:linear-gradient(135deg,#3e2723,#4e342e);color:#ffe0b2;border:1px solid #6d4c41;border-bottom-left-radius:2px}
.chat-msg.user{align-self:flex-end;background:linear-gradient(135deg,#1565c0,#1976d2);color:#fff;border-bottom-right-radius:2px}
.chat-input-area{padding:10px 6px;border-top:1px solid #5d4e37;display:flex;gap:4px;align-items:flex-end;background:rgba(20,14,6,0.95);position:relative;z-index:60}
.chat-input-area textarea{flex:1;background:rgba(255,248,230,0.12);border:2px solid #ffd54f;border-radius:8px;color:#fff5e0;padding:6px 8px;font-size:13px;resize:none;height:56px;max-height:80px;outline:none;font-family:inherit;text-shadow:0 1px 2px rgba(0,0,0,0.5);line-height:1.5}
.chat-input-area textarea::placeholder{color:#ffd54f;opacity:0.5;font-size:11px}
.chat-input-area textarea:focus{border-color:#ffeb3b;background:rgba(255,248,230,0.18);box-shadow:0 0 14px rgba(255,235,59,0.45)}
.send-btn{height:50px;border:none;background:none;cursor:pointer;opacity:0.95;transition:opacity 0.2s,transform 0.2s}
.send-btn img{height:100%;width:auto;filter:none}
.send-btn:hover{opacity:1;transform:scale(1.06)}
.send-btn:disabled{opacity:0.4;cursor:not-allowed}

/* ===== 界面3：结果 ===== */
#page-result{background:url('UI/背景4.png') center/cover no-repeat;justify-content:center;align-items:center}
.result-overlay{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;background:rgba(0,0,0,0.35);padding-bottom:80px}
.result-img{width:180px;max-width:40vw;filter:drop-shadow(0 8px 24px rgba(0,0,0,0.5));animation:resultPop 0.6s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes resultPop{0%{transform:scale(0.3);opacity:0}100%{transform:scale(1);opacity:1}}
.result-char-img{width:160px;max-width:36vw;border-radius:12px;border:3px solid #c8a96e;margin-top:12px;filter:drop-shadow(0 6px 16px rgba(0,0,0,0.5));animation:resultPop 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.15s both}
.result-text{font-size:32px;font-weight:900;margin-top:20px;text-shadow:0 3px 8px rgba(0,0,0,0.6);letter-spacing:4px}
.result-text.win{color:#ffd54f}
.result-text.lose{color:#ef9a9a}
.result-answer{font-size:16px;color:#e0d6c8;margin-top:10px;text-shadow:0 2px 4px rgba(0,0,0,0.5)}
.result-stats{display:flex;gap:24px;margin-top:14px}
.result-stat{color:#e0d6c8;font-size:15px;font-weight:bold;text-shadow:0 2px 4px rgba(0,0,0,0.5)}
.result-stat span{color:#ffd54f}
.result-buttons{display:flex;gap:16px;margin-top:28px}
.result-btn{cursor:pointer;border:none;background:none;transition:transform 0.2s}
.result-btn img{width:52px;height:52px;filter:drop-shadow(0 3px 6px rgba(0,0,0,0.4))}
.result-btn:hover{transform:scale(1.15)}

/* ===== 底部草帽团 ===== */
.crew-bar{position:fixed;bottom:0;left:0;right:0;height:70px;display:flex;justify-content:center;align-items:flex-end;gap:4px;padding:0 20px 4px;background:linear-gradient(transparent 0%,rgba(20,12,5,0.85) 40%);z-index:50;pointer-events:none}
.crew-char{height:58px;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5));transition:transform 0.3s;pointer-events:auto}
.crew-char:hover{transform:translateY(-8px) scale(1.1)}

/* ===== 滚动条 ===== */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:rgba(0,0,0,0.2)}
::-webkit-scrollbar-thumb{background:#8d6e63;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#a1887f}

/* ===== 确认弹窗 ===== */
.confirm-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;z-index:100}
.confirm-box{background:rgba(40,25,10,0.95);border:2px solid #c8a96e;border-radius:12px;padding:24px 32px;text-align:center;max-width:360px;width:90%}
.confirm-box p{color:#ffe0b2;font-size:15px;margin-bottom:16px;line-height:1.6}
.confirm-box .char-preview{width:80px;height:80px;border-radius:8px;border:3px solid #c8a96e;object-fit:cover;margin-bottom:12px}
.confirm-box .confirm-name{color:#ffd54f;font-size:18px;font-weight:bold;margin-bottom:16px}
.confirm-btns{display:flex;gap:12px;justify-content:center}
.confirm-btns button{padding:8px 24px;border:2px solid #c8a96e;border-radius:8px;background:rgba(200,169,110,0.15);color:#ffd54f;font-size:14px;font-weight:bold;cursor:pointer;transition:background 0.2s}
.confirm-btns button:hover{background:rgba(200,169,110,0.35)}
.confirm-btns button.cancel{border-color:#8d6e63;color:#c8a96e}

/* ===== 加载动画 ===== */
.typing-indicator{display:flex;gap:4px;padding:8px 12px}
.typing-indicator span{width:8px;height:8px;border-radius:50%;background:#c8a96e;animation:typing 1.4s infinite}
.typing-indicator span:nth-child(2){animation-delay:0.2s}
.typing-indicator span:nth-child(3){animation-delay:0.4s}
@keyframes typing{0%,60%,100%{opacity:0.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-6px)}}

/* ===== 响应式 ===== */

/* --- 手机端tab切换栏（默认隐藏，小屏才显示） --- */
.mobile-tabs{display:none}

/* --- 中等桌面 (901-1200px) --- */
@media(max-width:1200px){
  .game-right{width:280px}
  .char-grid.hard{grid-template-columns:repeat(8,1fr);max-width:780px}
  .char-card .char-name{font-size:10px;padding:10px 3px 3px}
}

/* --- 小桌面/平板横屏 (701-900px) --- */
@media(max-width:900px){
  .game-right{width:240px}
  .char-grid.hard{grid-template-columns:repeat(6,1fr);max-width:600px}
  .char-grid.medium{grid-template-columns:repeat(5,1fr);max-width:520px}
  .chat-msg{font-size:12px}
  .chat-welcome{font-size:11px;padding:10px 12px}
  .diff-btn img{width:180px}
  .game-title{font-size:24px}
  .rules-card{padding:14px 20px}
  .rules-card p{font-size:12px}
}

/* --- 平板竖屏/大手机横屏 (501-700px) --- */
@media(max-width:700px){
  /* 游戏界面改为上下布局 */
  #page-game{flex-direction:column}
  .game-left{width:100%;height:55%;padding:52px 10px 6px 10px;overflow-y:auto}
  .game-right{width:100%;height:45%;border-left:none;border-top:2px solid #c8a96e;padding-bottom:44px}

  .char-grid.easy{grid-template-columns:repeat(4,1fr);max-width:400px;gap:6px}
  .char-grid.medium{grid-template-columns:repeat(5,1fr);max-width:460px;gap:5px}
  .char-grid.hard{grid-template-columns:repeat(6,1fr);max-width:520px;gap:4px}
  .char-card{border-width:2px;border-radius:6px}
  .char-card .char-name{font-size:9px;padding:8px 2px 2px}
  .char-card .card-back .x-mark{font-size:32px}
  .char-card .card-back .elim-name{font-size:8px}

  .game-topbar{height:42px;padding:0 10px}
  .topbar-diff{font-size:15px;letter-spacing:2px}
  .ctrl-btn{width:28px;height:28px}
  .guess-dot{width:12px;height:12px}
  .guess-info span{font-size:11px}
  .stat-item{font-size:11px}
  .topbar-stats{gap:8px;margin-left:8px}

  .crew-bar{height:50px;padding:0 10px 2px}
  .crew-char{height:40px}

  /* 菜单页 */
  .title-mascot{width:100px}
  .game-title{font-size:22px;letter-spacing:2px}
  .rules-card{width:92%;padding:12px 16px}
  .rules-card p{font-size:12px;line-height:1.7}
  .diff-btn img{width:160px}

  /* 结果页 */
  .result-img{width:140px}
  .result-char-img{width:120px}
  .result-text{font-size:26px;letter-spacing:3px}
  .result-answer{font-size:14px}

  /* 聊天 */
  .chat-header{padding:8px 10px;font-size:13px}
  .chat-input-area{padding:8px 6px}
  .send-btn{height:42px}
  .chat-input-area textarea{height:42px;font-size:12px}
}

/* --- 手机竖屏 (<500px) --- */
@media(max-width:500px){
  /* 显示tab切换栏，隐藏非活跃面板 */
  .mobile-tabs{
    display:flex;
    width:100%;
    background:rgba(30,20,10,0.95);
    border-top:2px solid #c8a96e;
    border-bottom:2px solid #c8a96e;
    z-index:15;
    order:1;
    flex-shrink:0;
  }
  .mobile-tab{
    flex:1;
    padding:8px 0;
    border:none;
    background:transparent;
    color:#c8a96e;
    font-size:14px;
    font-weight:bold;
    cursor:pointer;
    transition:background 0.2s,color 0.2s;
    font-family:inherit;
  }
  .mobile-tab.active{
    background:rgba(200,169,110,0.2);
    color:#ffd54f;
    border-bottom:3px solid #ffd54f;
  }

  #page-game{flex-direction:column}
  .game-left{width:100%;flex:1;height:auto;padding:48px 8px 4px 8px;overflow-y:auto;order:2}
  .game-right{width:100%;flex:1;height:auto;border-left:none;border-top:none;order:3;padding-top:40px;padding-bottom:40px}

  /* tab切换逻辑由JS控制，默认显示角色网格 */
  .game-right.tab-hidden{display:none}
  .game-left.tab-hidden{display:none}

  .char-grid.easy{grid-template-columns:repeat(4,1fr);max-width:100%;gap:5px}
  .char-grid.medium{grid-template-columns:repeat(4,1fr);max-width:100%;gap:4px}
  .char-grid.hard{grid-template-columns:repeat(4,1fr);max-width:100%;gap:3px}
  .char-card{border-width:2px;border-radius:5px}
  .char-card .char-name{font-size:8px;padding:6px 2px 2px}
  .char-card .card-back .x-mark{font-size:24px}
  .char-card .card-back .elim-name{font-size:7px;margin-top:4px}

  .game-topbar{height:40px;padding:0 8px}
  .topbar-diff{font-size:13px;letter-spacing:1px}
  .ctrl-btn{width:26px;height:26px}
  .topbar-controls{gap:6px}
  .guess-dot{width:10px;height:10px}
  .guess-info span{font-size:10px}
  .stat-item{font-size:10px}
  .topbar-stats{gap:6px;margin-left:6px}
  .result-stats{gap:16px;margin-top:10px}
  .result-stat{font-size:13px}

  .crew-bar{height:44px;padding:0 8px 2px;gap:2px}
  .crew-char{height:36px}

  /* 菜单页 */
  .menu-overlay{padding-top:20px;padding-bottom:80px}
  .title-mascot{width:80px}
  .game-title{font-size:20px;letter-spacing:1px}
  .rules-card{width:94%;padding:10px 14px;margin:10px 0 14px}
  .rules-card h3{font-size:14px}
  .rules-card p{font-size:11px;line-height:1.6}
  .diff-btn img{width:140px}
  .diff-buttons{gap:10px}

  /* 结果页 */
  .result-img{width:120px}
  .result-char-img{width:100px;margin-top:8px}
  .result-text{font-size:22px;letter-spacing:2px}
  .result-answer{font-size:13px}
  .result-buttons{gap:12px;margin-top:20px}
  .result-btn img{width:44px;height:44px}
  .result-overlay{padding-bottom:60px}

  /* 聊天 */
  .chat-header{padding:8px;font-size:12px}
  .chat-header img{width:24px!important;height:24px!important}
  .chat-welcome{font-size:11px;padding:8px 10px;line-height:1.6}
  .chat-messages{padding:8px;gap:8px}
  .chat-msg{font-size:12px;padding:6px 10px;max-width:95%}
  .chat-input-area{padding:6px 4px;gap:4px}
  .chat-input-area textarea{height:40px;font-size:12px;padding:6px 8px}
  .send-btn{height:40px}

  /* 确认弹窗 */
  .confirm-box{padding:18px 20px;max-width:300px}
  .confirm-box .char-preview{width:64px;height:64px}
  .confirm-box .confirm-name{font-size:16px;margin-bottom:12px}
  .confirm-box p{font-size:13px;margin-bottom:12px}
  .confirm-btns button{padding:6px 18px;font-size:13px}
}

/* --- 超小屏手机 (<360px) --- */
@media(max-width:360px){
  .game-title{font-size:17px}
  .title-mascot{width:65px}
  .rules-card p{font-size:10px}
  .diff-btn img{width:120px}
  .char-grid.easy{grid-template-columns:repeat(3,1fr)}
  .char-grid.medium{grid-template-columns:repeat(3,1fr)}
  .char-grid.hard{grid-template-columns:repeat(3,1fr)}
  .char-card .char-name{font-size:7px}
  .topbar-diff{font-size:11px}
  .crew-bar{height:38px}
  .crew-char{height:30px}
}

/* --- 横屏手机特殊处理 --- */
@media(max-height:500px) and (orientation:landscape){
  #page-game{flex-direction:row}
  .mobile-tabs{display:none}
  .game-left{width:55%;height:100%;padding:44px 8px 50px 8px;order:0}
  .game-left.tab-hidden{display:flex}
  .game-right{width:45%;height:100%;border-left:2px solid #c8a96e;border-top:none;order:1;padding-top:44px}
  .game-right.tab-hidden{display:flex}
  .char-grid.easy{grid-template-columns:repeat(4,1fr)}
  .char-grid.medium{grid-template-columns:repeat(5,1fr)}
  .char-grid.hard{grid-template-columns:repeat(6,1fr)}
  .crew-bar{height:40px}
  .crew-char{height:32px}
  .game-topbar{height:40px}
  .menu-overlay{padding-top:10px;padding-bottom:60px}
  .title-mascot{width:70px}
  .game-title{font-size:20px}
  .rules-card{margin:8px 0 12px}
  .diff-btn img{width:140px}
  .diff-buttons{gap:8px}
  .result-img{width:100px}
  .result-char-img{width:80px}
  .result-text{font-size:22px}
}