/* Ink Swallow（墨燕）— style.css　宣紙墨燕 UI */
:root{
  --paper:#ECE7DA; --ink0:#14120F; --ink1:#3A362E; --ink2:#5C574C; --ink3:#736E60; --ink4:#8A8578;
  --vermilion:#C63A2F; --edge:#FFFFFF;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;background:#0a0a0a;overflow:hidden;
  font-family:"Noto Serif TC","Songti TC",serif;color:var(--ink0);
  font-variant-numeric:tabular-nums;}
#app{position:relative;width:960px;height:540px;max-width:100vw;max-height:100vh;margin:auto;
  top:50%;transform:translateY(-50%);background:var(--paper);overflow:hidden;
  box-shadow:0 0 40px rgba(0,0,0,.6);}
@media (max-width:960px){#app{transform:translateY(-50%) scale(calc(100vw/960));transform-origin:top center;top:50%;}}
canvas#game{position:absolute;inset:0;width:100%;height:100%;image-rendering:auto;}

.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px;text-align:center;gap:14px;}
.screen.overlay{background:rgba(236,231,218,.92);backdrop-filter:blur(2px);}
.hidden{display:none!important;}

.title{font-size:72px;margin:0;letter-spacing:.1em;font-weight:900;}
.title .sub{display:block;font-size:20px;letter-spacing:.4em;color:var(--ink2);margin-top:4px;font-weight:400;}
.tagline{max-width:560px;color:var(--ink1);font-size:15px;line-height:1.7;margin:0;}
h2{font-size:30px;margin:0 0 6px;letter-spacing:.06em;}
.hint{color:var(--ink2);font-size:13px;line-height:1.6;max-width:600px;}

.menu-btns{display:flex;flex-direction:column;gap:10px;width:260px;}
.btn{font-family:inherit;font-size:16px;padding:11px 18px;border:2px solid var(--ink0);background:transparent;
  color:var(--ink0);cursor:pointer;letter-spacing:.08em;transition:all .12s;border-radius:2px;}
.btn:hover{background:var(--ink0);color:var(--paper);}
.btn.primary{background:var(--vermilion);border-color:var(--vermilion);color:#fff;}
.btn.primary:hover{background:#a82e25;}
.btn.back{margin-top:8px;width:180px;}
.btn:disabled{opacity:.35;cursor:not-allowed;}

.card-list{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:760px;
  max-height:360px;overflow-y:auto;padding:4px;}
.card-list.wide{gap:16px;}
.card{border:2px solid var(--ink0);background:rgba(255,255,255,.35);padding:14px;width:210px;
  text-align:left;cursor:pointer;transition:all .12s;border-radius:2px;}
.card:hover{background:var(--ink0);color:var(--paper);border-color:var(--vermilion);}
.card h3{margin:0 0 6px;font-size:17px;}
.card .tag{display:inline-block;font-size:11px;padding:1px 6px;border:1px solid currentColor;border-radius:2px;margin-bottom:6px;}
.card .tag.mech{color:var(--vermilion);border-color:var(--vermilion);}
.card p{margin:0;font-size:12.5px;line-height:1.55;color:inherit;}
.card.num{border-style:dashed;}

.settings-grid{display:grid;grid-template-columns:1fr;gap:12px;width:360px;text-align:left;}
.settings-grid label{display:flex;justify-content:space-between;align-items:center;font-size:15px;gap:12px;}
.settings-grid select,.settings-grid input[type=range]{font-family:inherit;}

.controls-help{max-width:640px;text-align:left;font-size:13.5px;line-height:1.7;color:var(--ink1);}
.controls-help b{color:var(--ink0);}

.board{width:420px;max-height:280px;overflow-y:auto;text-align:left;font-size:14px;border:1px solid var(--ink2);}
.board .row{display:flex;justify-content:space-between;padding:6px 12px;border-bottom:1px solid rgba(0,0,0,.08);}
.cash{font-size:15px;color:var(--vermilion);}

.results{font-size:15px;line-height:1.9;text-align:left;max-width:480px;}
.results .big{font-size:26px;font-weight:900;}
.results .vm{color:var(--vermilion);}

#pause-btn{position:absolute;top:10px;right:10px;width:34px;height:34px;border:2px solid var(--ink0);
  background:rgba(236,231,218,.7);font-weight:900;cursor:pointer;z-index:20;border-radius:2px;}
#touch-controls{position:absolute;inset:0;z-index:15;pointer-events:none;}
#touch-move{position:absolute;left:0;bottom:0;width:50%;height:70%;}
#touch-act{position:absolute;right:0;bottom:0;width:50%;height:70%;}
#autotest-badge{position:fixed;top:4px;right:4px;z-index:99999;background:var(--vermilion);color:#fff;
  font:bold 11px/1.4 sans-serif;padding:2px 8px;border-radius:4px;letter-spacing:.05em;}

body.night{--paper:#1A1815;--ink0:#F0EAD8;--ink1:#C9C3B2;--ink2:#9A9585;--ink3:#6E6A5C;--ink4:#4A473E;}