:root { --ink:#101719; --paper:#eef3ed; --muted:#9baaa2; --line:#2b3938; --accent:#a8ff3e; --radius:18px; font-family: ui-rounded, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; font-synthesis:none; color:var(--paper); background:var(--ink); }
* { box-sizing:border-box; } body { margin:0; min-width:320px; background:var(--ink); } button { font:inherit; } button, a { -webkit-tap-highlight-color:transparent; } .noise { pointer-events:none; position:fixed; inset:0; opacity:.08; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }
.shell { width:min(1180px, calc(100% - 40px)); margin:auto; position:relative; }.topbar { height:88px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }.brand { color:var(--paper); text-decoration:none; font-size:1.3rem; font-weight:800; letter-spacing:-.06em; }.brand span { display:inline-grid; place-items:center; background:var(--accent); color:var(--ink); border-radius:6px; width:27px; height:27px; margin-right:7px; font-size:.9rem; }.topbar p { margin:0; color:var(--muted); font-size:.82rem; }.sound-button, .close-button { color:var(--paper); background:transparent; border:1px solid var(--line); border-radius:999px; cursor:pointer; padding:9px 13px; font-size:.8rem; }.sound-button:hover { border-color:var(--accent); color:var(--accent); }
.intro { min-height:420px; display:grid; grid-template-columns:1.35fr .65fr; align-items:center; gap:48px; padding:64px 0; }.eyebrow { margin:0 0 13px; color:var(--accent); font-size:.7rem; font-weight:800; letter-spacing:.14em; }.intro h1, h2 { margin:0; letter-spacing:-.075em; line-height:.93; }.intro h1 { font-size:clamp(3.4rem, 7vw, 6.3rem); }.lede { max-width:430px; color:#bdc9c2; line-height:1.75; margin:25px 0; }.primary-button { background:var(--accent); color:var(--ink); border:0; border-radius:999px; font-weight:800; cursor:pointer; padding:13px 18px; }.primary-button span { font-size:1.2em; padding-left:10px; }.primary-button:hover { transform:translateY(-2px); box-shadow:0 8px 20px #a8ff3e28; }.hero-panel { border:1px solid var(--line); border-radius:var(--radius); padding:27px; background:linear-gradient(135deg, #1a2928, #111c1c); transform:rotate(2deg); }.panel-kicker { color:var(--accent); font-size:.75rem; }.hero-panel strong { display:block; margin-top:50px; font-size:1.5rem; letter-spacing:-.05em; }.hero-panel p { color:var(--muted); font-size:.86rem; line-height:1.6; }.pixel-line { display:flex; gap:4px; margin-top:30px; }.pixel-line i { width:22px; height:6px; background:var(--accent); }.pixel-line i:nth-child(2), .pixel-line i:nth-child(4) { opacity:.35; }
.game-section { padding:20px 0 100px; }.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:28px; }.section-heading h2 { font-size:clamp(2rem, 4vw, 3.5rem); }.section-heading > p { max-width:190px; color:var(--muted); font-size:.85rem; line-height:1.6; margin:0; }.game-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }.game-card { position:relative; text-align:left; min-height:185px; padding:20px; border-radius:var(--radius); border:1px solid #ffffff15; color:var(--ink); cursor:pointer; overflow:hidden; transition:transform .2s ease, filter .2s ease; }.game-card:hover { transform:translateY(-5px) rotate(-.5deg); filter:brightness(1.08); }.lime { background:#a8ff3e; }.orange { background:#ffb55f; }.violet { background:#c5a8ff; }.blue { background:#94c6ff; }.pink { background:#ff9fbd; }.teal { background:#7ee1d1; }.game-icon { display:block; font-size:2.35rem; font-weight:900; letter-spacing:-.12em; }.blocks { font-size:3.1rem; }.card-copy { position:absolute; left:20px; bottom:19px; }.card-copy b { display:block; font-size:1.15rem; letter-spacing:-.04em; }.card-copy small { display:block; margin-top:4px; opacity:.68; }.game-card em { position:absolute; right:17px; bottom:14px; font-style:normal; opacity:.45; font-size:.75rem; } footer { border-top:1px solid var(--line); padding:25px 0 45px; display:flex; gap:20px; align-items:center; color:var(--muted); font-size:.8rem; } footer span { color:var(--paper); font-weight:800; letter-spacing:.08em; } footer p { margin:0; flex:1; } footer a { color:var(--accent); text-decoration:none; }
dialog { border:0; padding:0; background:transparent; color:var(--paper); width:min(760px, calc(100% - 26px)); } dialog::backdrop { background:#050909d9; backdrop-filter:blur(6px); }.modal-frame { background:#14201f; border:1px solid #39514c; border-radius:var(--radius); padding:22px; max-height:92dvh; overflow:auto; }.modal-header { display:flex; align-items:start; justify-content:space-between; margin-bottom:18px; }.modal-header h2 { font-size:2rem; }.close-button { width:38px; height:38px; padding:0; font-size:1.6rem; line-height:1; }.close-button:hover { background:var(--accent); color:var(--ink); }.game-tools { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:0 0 15px; color:var(--muted); font-size:.85rem; }.small-button { color:var(--ink); background:var(--accent); border:0; border-radius:999px; padding:8px 13px; font-weight:800; cursor:pointer; }.board-wrap { display:grid; place-items:center; } .hint { color:var(--muted); text-align:center; font-size:.78rem; margin:14px 0 0; }
.grid2048 { display:grid; grid-template-columns:repeat(4, minmax(50px, 92px)); gap:8px; background:#344542; padding:8px; border-radius:12px; touch-action:none; }.tile { aspect-ratio:1; display:grid; place-items:center; border-radius:8px; color:#19302b; background:#50645f; font-weight:900; font-size:clamp(1.2rem, 5vw, 2rem); }.tile[data-v="2"]{background:#d9f5b6}.tile[data-v="4"]{background:#bff080}.tile[data-v="8"]{background:#a8ff3e}.tile[data-v="16"]{background:#ffe589}.tile[data-v="32"]{background:#ffbd63}.tile[data-v="64"]{background:#ff8d72}.tile[data-v="128"],.tile[data-v="256"],.tile[data-v="512"],.tile[data-v="1024"],.tile[data-v="2048"]{background:#ff75af;color:#fff}
.tetris-layout { display:flex; justify-content:center; gap:18px; align-items:start; }.tetris-board { display:grid; grid-template-columns:repeat(10, 25px); grid-template-rows:repeat(20, 25px); gap:1px; background:#263633; padding:4px; }.tcell { background:#172523; }.tcell.filled { background:var(--c); box-shadow:inset 0 0 0 2px #ffffff35; }.tetris-side { min-width:105px; }.tetris-side strong { display:block; font-size:1.8rem; color:var(--accent); }.tetris-side p { color:var(--muted); font-size:.78rem; }.next-grid { display:grid; grid-template-columns:repeat(4, 18px); grid-template-rows:repeat(4, 18px); gap:2px; }.next-grid i { background:#263633; }.next-grid i.on { background:var(--next); }
.mine-board { display:grid; gap:3px; background:#2c3d39; padding:5px; border-radius:9px; width:max-content; max-width:100%; overflow:auto; }.mine-cell { width:30px; height:30px; background:#536964; border:0; border-radius:4px; font-weight:900; color:var(--paper); cursor:pointer; }.mine-cell.open { background:#253430; cursor:default; }.mine-cell.mine { background:#fa7790; }.mine-cell.flag { background:#a8ff3e; color:#14201f; }
.snake-board { display:grid; grid-template-columns:repeat(20, 17px); grid-template-rows:repeat(20, 17px); gap:1px; background:#21312e; padding:5px; border-radius:8px; }.snake-cell { background:#172523; }.snake-cell.body { background:#a8ff3e; }.snake-cell.head { background:#f4ffdf; }.snake-cell.food { background:#ff8daf; border-radius:50%; }.canvas-wrap { display:grid; place-items:center; }.breakout-canvas { width:min(100%, 600px); height:auto; border-radius:10px; background:#0d1716; border:1px solid #38504a; touch-action:none; }.gomoku { display:grid; grid-template-columns:repeat(15, minmax(20px, 35px)); grid-template-rows:repeat(15, minmax(20px, 35px)); background:#d7b47a; padding:16px; background-image:linear-gradient(#805e35 1px,transparent 1px),linear-gradient(90deg,#805e35 1px,transparent 1px); background-size:calc((100% - 32px) / 14) calc((100% - 32px) / 14); background-position:16px 16px; }.gcell { background:transparent; border:0; cursor:pointer; display:grid; place-items:center; padding:0; }.stone { width:80%; aspect-ratio:1; border-radius:50%; box-shadow:2px 3px 3px #0005; }.stone.black { background:#19201f; }.stone.white { background:#f8f5ea; border:1px solid #baad94; }
@media (max-width:700px) { .shell { width:min(100% - 28px, 1180px); }.topbar { height:70px; }.topbar p { display:none; }.intro { min-height:auto; grid-template-columns:1fr; padding:50px 0; gap:26px; }.hero-panel { transform:none; }.game-grid { grid-template-columns:1fr 1fr; }.game-card { min-height:160px; }.section-heading { align-items:start; gap:16px; }.section-heading > p { font-size:.75rem; }.tetris-board { grid-template-columns:repeat(10, 20px); grid-template-rows:repeat(20, 20px); }.tetris-side { min-width:70px; }.snake-board { grid-template-columns:repeat(20, 13px); grid-template-rows:repeat(20, 13px); }.gomoku { padding:10px; background-size:calc((100% - 20px) / 14) calc((100% - 20px) / 14); background-position:10px 10px; } footer { flex-wrap:wrap; } footer p { flex-basis:100%; order:3; } }