:root { --ink:#172038; --muted:#687086; --line:#e6e9f0; --surface:#fff; --sub:#f6f8fc; --brand:#635bff; --brand-dark:#443bd7; --green:#008a5e; --orange:#d85f00; --danger:#c0392b; --shadow:0 10px 26px rgba(23,32,56,.08); }
* { box-sizing:border-box; }
html { color:var(--ink); background:var(--sub); font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif; line-height:1.6; }
body { margin:0; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
.site-header { position:sticky; top:0; z-index:10; border-bottom:1px solid var(--line); background:rgba(255,255,255,.94); backdrop-filter:blur(12px); }
.header-inner,.container { width:min(1120px,calc(100% - 32px)); margin:auto; }
.header-inner { height:60px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.logo { font-weight:800; letter-spacing:-.04em; font-size:20px; white-space:nowrap; }.logo b { color:var(--brand); }
.header-link { color:var(--muted); font-size:13px; }.header-link:hover { color:var(--brand); }
.main { padding:28px 0 56px; }.hero { padding:28px 0 20px; }.eyebrow { color:var(--brand); font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.hero h1 { font-size:clamp(28px,7vw,45px); line-height:1.25; letter-spacing:-.05em; margin:6px 0 10px; }.hero p { color:var(--muted); margin:0; }
.search-box { margin-top:20px; display:flex; gap:8px; background:#fff; padding:8px; border:1px solid var(--line); border-radius:15px; box-shadow:var(--shadow); }.search-box input { flex:1; min-width:0; padding:8px 10px; border:0; outline:0; }.button { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:9px 14px; border-radius:10px; border:0; cursor:pointer; font-weight:700; background:var(--brand); color:#fff; }.button:hover { background:var(--brand-dark); }.button.secondary { background:#ecebff; color:var(--brand-dark); }.button.outline { background:#fff; color:var(--brand); border:1px solid #cfcdfa; }
.section { margin-top:32px; }.section-head { display:flex; align-items:end; justify-content:space-between; gap:10px; margin-bottom:12px; }.section-title { font-size:21px; letter-spacing:-.03em; margin:0; }.text-link { color:var(--brand); font-weight:700; font-size:14px; }
.chips { display:flex; gap:8px; overflow:auto; padding:2px 0 10px; scrollbar-width:none; }.chip { white-space:nowrap; border:1px solid var(--line); padding:7px 11px; border-radius:99px; background:#fff; color:#4d566b; font-size:13px; }.chip.active { color:var(--brand); border-color:#bdb9ff; background:#f5f4ff; font-weight:700; }
.cards { display:grid; gap:12px; }.offer-card,.panel { background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:0 2px 7px rgba(23,32,56,.03); }.offer-card { display:block; padding:16px; }.offer-card:hover { border-color:#bebaff; transform:translateY(-1px); transition:.16s; }.offer-top { display:flex; justify-content:space-between; gap:10px; }.game-name { margin:0; line-height:1.35; font-size:17px; letter-spacing:-.02em; }.tag { font-size:11px; padding:3px 7px; border-radius:5px; font-weight:800; background:#eef0f5; color:#586176; }.tag.pr { color:#8e4c00; background:#fff0dc; }.tag.good { color:#007a55; background:#e3f8f0; }.reward { color:var(--brand); font-size:23px; font-weight:850; letter-spacing:-.05em; margin-top:10px; }.reward small { font-size:12px; color:var(--muted); font-weight:600; letter-spacing:0; }.offer-meta { display:grid; grid-template-columns:1fr 1fr; gap:7px; font-size:12px; color:#525b6e; margin-top:9px; }.offer-meta strong { display:block; color:var(--ink); font-size:13px; }.notice { font-size:12px; color:var(--muted); margin:12px 0 0; }
.stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.stat { background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; }.stat b { display:block; font-size:19px; color:var(--brand); }.stat span { font-size:11px; color:var(--muted); }
.panel { padding:16px; }.breadcrumbs { font-size:12px; color:var(--muted); margin-bottom:15px; }.page-title { font-size:28px; line-height:1.3; letter-spacing:-.04em; margin:0 0 8px; }.lead { color:var(--muted); margin:0; }.key-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }.key { padding:11px; background:var(--sub); border-radius:10px; }.key span { display:block; font-size:11px; color:var(--muted); }.key b { font-size:15px; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:14px; background:#fff; }.comparison { width:100%; min-width:620px; border-collapse:collapse; font-size:13px; }.comparison th,.comparison td { padding:12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }.comparison th { color:#5a6375; font-size:11px; background:#f9faff; }.comparison tr:last-child td { border-bottom:0; }.comparison .best { background:#f2f1ff; }.site-name { font-weight:800; }.amount { font-weight:850; color:var(--brand); font-size:16px; }.affiliate { margin:18px 0 0; padding:12px; background:#fffaeb; border:1px solid #f7e2a6; border-radius:10px; font-size:12px; color:#665622; }.review { border-top:1px solid var(--line); padding:16px 0; }.review:first-of-type { border-top:0; }.review-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }.stars { color:#e18a00; letter-spacing:.06em; }.review p { margin:7px 0 0; font-size:14px; }.review small { color:var(--muted); }
.filter-bar { display:flex; gap:8px; overflow:auto; margin:16px 0; }.filter-bar select { min-width:140px; border:1px solid var(--line); border-radius:10px; padding:8px; background:#fff; }.empty { display:none; padding:24px; text-align:center; color:var(--muted); }
.form { display:grid; gap:16px; }.field { display:grid; gap:6px; }.field label { font-weight:750; font-size:14px; }.field input,.field select,.field textarea { width:100%; border:1px solid #ccd2df; border-radius:10px; padding:11px; background:#fff; outline-color:var(--brand); }.field textarea { min-height:130px; resize:vertical; }.hint { color:var(--muted); font-size:12px; }.check { display:flex; align-items:flex-start; gap:9px; font-size:13px; }.check input { width:17px; height:17px; margin-top:3px; }.form-status { font-size:13px; min-height:20px; }.form-status.error { color:var(--danger); }.form-status.success { color:var(--green); }
.footer { padding:28px 0 36px; background:#171e31; color:#d5d9e3; }.footer nav { display:flex; flex-wrap:wrap; gap:14px; font-size:12px; }.footer small { display:block; margin-top:14px; color:#929aab; }
.legal h2 { font-size:19px; margin-top:28px; }.legal li { margin:7px 0; }.mobile-cta { display:none; }
@media (min-width:720px) { .main { padding-top:40px; }.cards { grid-template-columns:repeat(3,1fr); }.hero { max-width:720px; }.key-grid { grid-template-columns:repeat(4,1fr); } }
@media (max-width:719px) { .mobile-cta { display:flex; position:fixed; bottom:0; left:0; right:0; z-index:8; padding:10px 16px; background:rgba(255,255,255,.94); border-top:1px solid var(--line); backdrop-filter:blur(10px); }.mobile-cta .button { width:100%; }.footer { padding-bottom:82px; } }