:root { --bg:#14171d; --text:#f5f1e8; --muted:#999da7; --yellow:#f3b647; --red:#e9654b; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--text); font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif; background:var(--bg); }
.site-header { width:min(1120px,90vw); height:76px; margin:auto; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #30333a; }
.brand { color:var(--text); font-size:14px; font-weight:900; text-decoration:none; }
.brand span { margin-left:10px; color:#777b85; font-size:12px; font-weight:500; }
.game-total { color:#777b85; font-size:12px; }
main { width:min(1120px,90vw); margin:auto; padding:74px 0 80px; }
.intro { max-width:670px; margin-bottom:52px; }
.eyebrow { margin:0 0 14px; color:var(--yellow); font-size:12px; font-weight:800; letter-spacing:.18em; }
h1 { margin:0; font-family:Georgia,"Songti SC",serif; font-size:clamp(50px,8vw,92px); line-height:.98; letter-spacing:0; }
h1 em { color:var(--yellow); font-style:normal; }
.intro>p:last-child { max-width:420px; margin:25px 0 0; color:var(--muted); line-height:1.75; }
.filters{display:flex;gap:8px;margin:-20px 0 28px;overflow:auto;padding-bottom:3px}.filters button{flex:0 0 auto;height:36px;padding:0 15px;border:1px solid #3b3e46;border-radius:4px;color:var(--muted);background:transparent;cursor:pointer}.filters button.active{color:#1b1c20;border-color:var(--yellow);background:var(--yellow);font-weight:800}.game-tile[hidden]{display:none}
.game-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.game-tile { overflow:hidden; color:inherit; border:1px solid #30333a; border-radius:8px; background:#1c1f26; text-decoration:none; transition:transform .2s,border-color .2s; }
.game-tile:hover { transform:translateY(-4px); border-color:#555963; }
.preview { position:relative; height:270px; overflow:hidden; display:grid; place-items:center; }
.tag { position:absolute; top:16px; right:16px; padding:6px 9px; color:#1a1b20; border-radius:4px; background:#f4f0e8; font-size:11px; font-weight:800; }
.gomoku-preview { background:#dca65e; background-image:linear-gradient(rgba(74,45,18,.24) 1px,transparent 1px),linear-gradient(90deg,rgba(74,45,18,.24) 1px,transparent 1px); background-size:32px 32px; }
.mini-board { position:relative; width:220px; height:150px; transform:rotate(-8deg); }
.mini-board i { position:absolute; width:34px; height:34px; border-radius:50%; box-shadow:0 5px 8px #69461f55; background:radial-gradient(circle at 30% 25%,#626369,#17181c 58%,#030405); }
.mini-board i:nth-child(1){left:15px;top:75px}.mini-board i:nth-child(2){left:52px;top:60px}.mini-board i:nth-child(3){left:89px;top:45px}.mini-board i:nth-child(4){left:126px;top:30px}.mini-board i:nth-child(5){left:163px;top:15px}
.mini-board i:nth-child(n+6) { background:radial-gradient(circle at 30% 25%,#fff,#ddd7ca 65%,#a8a094); }
.mini-board i:nth-child(6){left:52px;top:100px}.mini-board i:nth-child(7){left:92px;top:100px}.mini-board i:nth-child(8){left:132px;top:100px}
.preview2048 { background:#384f49; }
.mini-tiles { width:234px; display:grid; grid-template-columns:repeat(3,70px); gap:10px; transform:rotate(4deg); }
.mini-tiles b { aspect-ratio:1; display:grid; place-items:center; border-radius:5px; color:#524b42; background:#eee6d9; font:800 23px Georgia; box-shadow:0 5px 12px #17292455; }
.mini-tiles b:nth-child(3n){background:#f1b657;color:white}.mini-tiles b:nth-child(n+7){background:#e86e50;color:white;font-size:18px}
.sudoku-preview{background:#765f8f}.mini-sudoku{width:224px;display:grid;grid-template-columns:repeat(4,1fr);border:3px solid #f0e9f4;transform:rotate(-3deg);box-shadow:0 12px 30px #32233d55}.mini-sudoku b{aspect-ratio:1;display:grid;place-items:center;color:#352a3f;background:#f3edf5;border:1px solid #a898b7;font:700 23px Georgia,serif}.mini-sudoku b:nth-child(4n){border-right:0}.mini-sudoku b:empty{background:#ded2e6}
.strike-preview{display:block;background:#9cc9ce}.strike-preview:after{content:"";position:absolute;inset:50% 0 0;background:#426f50;clip-path:polygon(0 45%,15% 10%,28% 50%,43% 17%,59% 55%,76% 8%,100% 42%,100% 100%,0 100%)}.pixel-sun{position:absolute;left:14%;top:18%;width:58px;height:58px;background:#f4ce55;box-shadow:0 0 0 10px #f4ce5533}.pixel-ground{position:absolute;z-index:2;bottom:0;left:0;right:0;height:42px;background:#303a2b;border-top:8px solid #6c8443}.pixel-soldier{position:absolute;z-index:3;left:34%;bottom:40px;width:31px;height:55px;background:#24433b;box-shadow:9px -16px 0 #d39b69,-5px 44px 0 -8px #182926,16px 44px 0 -8px #182926}.pixel-soldier:before{content:"";position:absolute;left:18px;top:5px;width:52px;height:8px;background:#202529}.pixel-soldier i{position:absolute;left:66px;top:5px;width:7px;height:7px;background:#f6d14c;box-shadow:13px 0 #f6d14c,26px 0 #f6d14c}.pixel-enemy{position:absolute;z-index:3;right:24%;bottom:40px;width:29px;height:48px;background:#9c4437;box-shadow:7px -14px #c98b61}
.icon-preview{background:#30343d}.icon-preview>strong{font:700 105px Georgia;color:#ef6450}.snake-tile .icon-preview{background:#356b56}.snake-icon{display:flex;align-items:center}.snake-icon i{width:35px;height:35px;background:#d9dc5c;border:3px solid #356b56}.snake-icon i:first-child{width:45px;height:45px;background:#f0c756}.blocks-tile .icon-preview{background:#425274}.blocks-icon{display:grid;grid-template-columns:repeat(3,48px);gap:4px;transform:rotate(8deg)}.blocks-icon i{aspect-ratio:1;background:#f1bc4d}.blocks-icon i:nth-child(2n){background:#ed6952}.blocks-icon i:nth-child(5){visibility:hidden}.puzzle-tile .icon-preview{background:#9b6a49}.puzzle-icon{display:grid;grid-template-columns:repeat(3,60px);gap:5px}.puzzle-icon b{aspect-ratio:1;display:grid;place-items:center;color:#463425;background:#f1dfbb;font:700 23px Georgia}.puzzle-icon b:empty{background:#604936}.plane-tile .icon-preview{background:#31577b}.plane-icon{color:#e9edf2;font-size:100px;transform:scaleX(.65)}.shot{position:absolute;width:5px;height:20px;background:#f2c74f}.shot.one{left:35%;top:25%}.shot.two{right:35%;top:18%}.shot.three{right:25%;top:42%}
.reaction-tile .icon-preview{background:#c95143}.reaction-target{position:relative;width:170px;height:170px;border:13px solid #f4e9df;border-radius:50%;box-shadow:0 0 0 13px #72342e}.reaction-target i{position:absolute;inset:27px;border:10px solid #f4e9df;border-radius:50%}.reaction-target i:nth-child(2){inset:62px;border-width:7px}.reaction-target b{position:absolute;left:50%;top:50%;width:16px;height:16px;border-radius:50%;background:#f4d34f;transform:translate(-50%,-50%)}
.color-tile .icon-preview{background:#403957}.color-dots{position:relative;width:180px;height:150px}.color-dots i{position:absolute;width:65px;height:65px;border-radius:50%;background:#ef6251}.color-dots i:nth-child(2){left:58px;top:4px;background:#f0c64f}.color-dots i:nth-child(3){right:0;top:33px;background:#5eb48a}.color-dots i:nth-child(4){left:25px;bottom:0;background:#5f8ed1}.color-dots i:nth-child(5){right:35px;bottom:0;background:#bd70c7}.direction-tile .icon-preview{background:#315e62}.direction-icon{color:#f2d05c;font-size:130px;transform:rotate(-25deg)}.stop-tile .icon-preview{background:#343942}.traffic-icon{display:flex;gap:20px;padding:25px;border-radius:8px;background:#191c22}.traffic-icon i{width:80px;height:80px;border-radius:50%;background:#d94e45;box-shadow:0 0 25px #d94e4588}.traffic-icon i:last-child{background:#4dae6b;box-shadow:0 0 25px #4dae6b88}.catcher-tile .icon-preview{background:#8c6943}.catcher-icon{position:relative;width:170px;height:170px;border:10px solid #f2e8d5;border-radius:50%}.catcher-icon:before,.catcher-icon:after{content:"";position:absolute;background:#f2e8d5}.catcher-icon:before{left:50%;top:-35px;width:8px;height:230px}.catcher-icon:after{top:50%;left:-35px;width:230px;height:8px}.catcher-icon i{position:absolute;z-index:1;inset:55px;border-radius:50%;background:#efbe4d}.audio-tile .icon-preview{background:#50416b}.audio-icon{display:flex;align-items:center;gap:11px;height:150px}.audio-icon i{width:18px;height:55px;border-radius:9px;background:#f0c34f}.audio-icon i:nth-child(2){height:125px}.audio-icon i:nth-child(3){height:85px}
.tile-info { min-height:150px; padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.tile-info small { color:var(--yellow); font-size:11px; }.tile-info h2 { margin:5px 0 5px; font:700 30px Georgia,"Songti SC",serif; }.tile-info p { margin:0; color:var(--muted); font-size:13px; }
.play { flex:0 0 46px; height:46px; display:grid; place-items:center; border-radius:50%; color:#17181c; background:var(--yellow); font-size:25px; transition:transform .2s; }.game-tile:hover .play{transform:translateX(3px)}
footer { width:min(1120px,90vw); margin:auto; padding:26px 0 38px; color:#656973; border-top:1px solid #30333a; font-size:12px; }
@media(max-width:700px){.site-header{height:62px}.brand span{display:none}main{padding:48px 0 58px}.intro{margin-bottom:35px}.game-grid{grid-template-columns:1fr}.preview{height:220px}.tile-info{min-height:130px}h1{font-size:52px}}