*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}
:root{--ink:#58494d;--pink:#e7aaa7;--line:#ead8d2;--cream:#fffaf6}
html,body{margin:0;min-height:100%;background:linear-gradient(#f8e8e5,#eee8f3);font-family:Arial,"Microsoft YaHei",sans-serif;color:var(--ink);overscroll-behavior:none}
body{display:flex;justify-content:center}.app{width:min(100%,480px);min-height:100dvh;background:#fffaf6;box-shadow:0 0 40px #654b5522;padding:env(safe-area-inset-top) 14px env(safe-area-inset-bottom)}
button{font:inherit;color:inherit}.hidden{display:none!important}.topbar{height:62px;display:grid;grid-template-columns:70px 1fr 70px;align-items:center;border-bottom:1px solid var(--line)}
.brand{text-align:center;font-size:21px;font-weight:900;letter-spacing:3px}.brand span{color:#dc9095}.coins{text-align:right}.homeBtn{border:0;background:transparent;font-size:22px;text-align:left}
.screen{padding-top:14px}.intro{text-align:center;padding:10px 8px 20px}.intro small{font-size:9px;letter-spacing:3px;color:#aa9295}.intro h1{font-size:28px;margin:5px 0 2px}.intro p{font-size:11px;color:#aa9295;margin:0}
.modeGrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.modeTile{position:relative;min-height:200px;border:1.5px solid #d9c6ca;border-radius:26px;padding:18px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 10px 25px #674c5415}
.modeTile:active,.shopTile:active{transform:scale(.98)}.classic{background:linear-gradient(145deg,#fff,#f9e6e2)}.endless{background:linear-gradient(145deg,#fff,#ede9f7)}
.modeTile .no{position:absolute;left:13px;top:12px;font-size:9px;letter-spacing:2px;color:#ab9196}.icon{font-size:32px;margin-bottom:10px}.modeTile b{font-size:17px}.modeTile strong{font-size:10px;letter-spacing:2px;color:#a78d92;margin:5px 0}.modeTile small{font-size:9px;line-height:1.45;color:#9c8589}
.shopTile{width:55%;min-width:190px;min-height:145px;margin:20px auto 0;border:1.5px solid #d9c6ca;background:#403a43;color:#fff;border-radius:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 10px 25px #4f3b4530}
.shopTile b{font-size:18px;letter-spacing:2px}.shopTile small{font-size:9px;color:#d7ccd1;margin-top:4px}.bestRow{display:flex;justify-content:space-between;padding:16px 4px;margin-top:16px;border-top:1px solid var(--line);font-size:9px;color:#a38a8e}.bestRow b{color:#625258}
.gameStats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.gameStats div{background:#fff;border:1px solid var(--line);border-radius:13px;text-align:center;padding:7px}.gameStats small,.rail>small,.shopHead small{font-size:9px;letter-spacing:2px;color:#a48b8f}.gameStats b{display:block;font-size:16px}
.playArea{height:calc(100dvh - 190px);max-height:680px;display:grid;grid-template-columns:62px minmax(0,1fr) 62px;gap:5px;align-items:center}.boardWrap{position:relative;width:100%;aspect-ratio:1/2;max-height:100%}#board{width:100%;height:100%;display:block;background:#342f3a;border:5px solid #fff;border-radius:16px;box-shadow:0 8px 25px #59455035;touch-action:none}
.rail{height:100%;padding-top:16px;display:flex;flex-direction:column;align-items:center;gap:7px}.holdMini{width:56px;height:56px;background:#f4ecea;border:1px solid var(--line);border-radius:10px}.rail canvas{width:56px;height:auto;background:#f4ecea;border:1px solid var(--line);border-radius:10px}
.gestureHints{display:flex;flex-direction:column;gap:5px;margin-top:5px}.gestureHints span{width:55px;text-align:center;background:#f7efed;border:1px solid var(--line);border-radius:8px;padding:4px;font-size:12px}.gestureHints small{font-size:6px;display:block;color:#9d8589}.pauseBtn{margin-top:auto;margin-bottom:15px;width:54px;height:45px;border:0;border-radius:12px;background:#ead0cc;font-size:18px}
.gameFoot{height:42px;display:flex;align-items:center;justify-content:space-between}.gameFoot button{border:0;background:#ead0cc;border-radius:10px;padding:8px 12px;font-weight:bold}.gameFoot span{font-size:10px;font-weight:bold}
.overlay{position:absolute;inset:5px;background:#342f3aee;border-radius:12px;color:#fff;z-index:8;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.overlay h2{font-size:28px;margin:0}.overlay p{color:#e8c2c4}.overlay button{border:0;border-radius:99px;background:#e5a7a5;color:#fff;padding:11px 25px;font-weight:bold}
.shopHead{display:grid;grid-template-columns:45px 1fr auto;align-items:center;padding:5px}.shopHead button{border:0;background:#f1e3df;width:38px;height:38px;border-radius:50%;font-size:25px}.shopHead h2{margin:0}.shopHead span{background:#fff1d5;border-radius:99px;padding:8px 12px}
.shopItem{background:#fff;border:1px solid var(--line);border-radius:18px;padding:13px;margin:10px 0;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.shopItem b{font-size:13px}.shopItem small{display:block;color:#9b8588;font-size:9px;margin-top:4px}.buyBtn{border:0;background:#e5a7a5;color:#fff;border-radius:10px;padding:8px 10px;font-size:9px;font-weight:bold}.buyBtn:disabled{background:#d6cac8}.adjust{grid-column:1/3;display:grid;grid-template-columns:38px 1fr 38px;gap:7px}.adjust button{height:32px;border:1px solid var(--line);background:#fff7f5;border-radius:9px;font-size:18px}.adjust span{text-align:center;padding:7px;background:#f7efed;border-radius:9px;font-size:10px}.slots{grid-column:1/3;display:flex;gap:6px}.slots i{width:30px;height:8px;background:#eadfdd;border-radius:99px}.slots i.on{background:#dfa29f}.equipBtn{grid-column:1/3;border:1px solid var(--line);background:#fff7f5;border-radius:10px;padding:8px;font-size:10px}.cookie{background:linear-gradient(135deg,#fff,#f7ead8)}
#toast{display:none;position:fixed;top:80px;left:50%;transform:translateX(-50%);z-index:30;background:#4c4146ed;color:#fff;padding:9px 14px;border-radius:99px;font-size:10px}
@media(max-width:380px){.modeGrid{gap:10px}.modeTile{min-height:180px}.shopTile{width:60%;min-height:130px}}
/* PWA V1.1 — larger play board */
.playArea{
  grid-template-columns:48px minmax(0,1fr) 48px;
  gap:2px;
}
.rail canvas,.holdMini{
  width:44px;
  height:auto;
}
.gestureHints span{
  width:44px;
  padding:4px 1px;
  font-size:11px;
}
.pauseBtn{
  width:44px;
}
.boardWrap{
  width:100%;
  max-width:none;
}
#board{
  border-width:3px;
}
@media(max-width:380px){
  .playArea{
    grid-template-columns:43px minmax(0,1fr) 43px;
    gap:1px;
  }
  .rail canvas,.holdMini,.gestureHints span,.pauseBtn{
    width:40px;
  }
}