* { box-sizing: border-box; }
:root { color-scheme: light; --ink: #15232b; --muted: #65747b; --paper: #f4f7f5; --panel: #fff; --line: #c9d3d1; --teal: #147f82; --orange: #d45c35; }
body { min-height: 100vh; margin: 0; color: var(--ink); background: radial-gradient(circle at 80% 10%, #e1f0ed 0 20%, transparent 45%), var(--paper); font-family: "Trebuchet MS", Verdana, sans-serif; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px clamp(20px, 6vw, 84px); background: rgba(255,255,255,.9); border-bottom: 1px solid var(--line); }
.brand { color: var(--teal); font-size: 1.3rem; font-weight: 900; letter-spacing: .18em; text-decoration: none; }
nav { display: flex; flex-wrap: wrap; gap: 18px; } nav a { color: var(--muted); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; } nav a:hover { color: var(--orange); }
.games-shell { width: min(100% - 40px, 1100px); margin: auto; padding: clamp(48px, 8vw, 100px) 0; }
.kicker { margin: 0 0 14px; color: var(--orange); font-size: .7rem; font-weight: 900; letter-spacing: .2em; }
h1 { margin: 0; font-size: clamp(3.5rem, 10vw, 8rem); line-height: .85; letter-spacing: -.07em; } .games-intro > p:not(.kicker) { max-width: 500px; color: var(--muted); font-size: 1.05rem; }
.count-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px; margin: 30px 0 80px; } .count-line strong { color: var(--teal); font-size: 1.5rem; } .count-line span { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; } .count-line .live-dot { color: var(--orange); } .live-dot::before { display: inline-block; width: 7px; height: 7px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--orange); content: ""; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); padding-bottom: 12px; } h2 { margin: 0; font-size: 1.2rem; } .section-heading span { color: var(--muted); font-size: .75rem; }
.games-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; padding-top: 20px; }
.game-card { display: flex; flex-direction: column; min-height: 360px; padding: 22px; background: var(--panel); border: 1px solid var(--line); box-shadow: 10px 12px 0 rgba(20,127,130,.08); }
.featured-game { grid-column: span 2; display: grid; grid-template-columns: minmax(260px, .92fr) minmax(260px, 1fr); column-gap: 28px; }
.featured-game .game-thumb { grid-row: span 6; height: 100%; min-height: 360px; margin: -22px 0 -22px -22px; }
.game-thumb { position: relative; display: flex; align-items: flex-end; height: 145px; margin: -22px -22px 18px; padding: 14px; background: var(--game-thumb); border-bottom: 1px solid rgba(21,35,43,.12); overflow: hidden; }
.game-thumb::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,14,20,.05), rgba(8,14,20,.45)); }
.game-thumb span { position: relative; z-index: 3; color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.thumb-grid { position: absolute; inset: 0; opacity: .2; background-image: linear-gradient(rgba(255,255,255,.4) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.4) 1px, transparent 1px); background-size: 28px 28px; transform: perspective(180px) rotateX(55deg) scale(1.8) translateY(28px); transform-origin: bottom; }
.thumb-scaffold { position: absolute; z-index: 2; right: 24%; top: 19%; width: 96px; height: 104px; border-left: 7px solid rgba(255,255,255,.9); border-top: 7px solid rgba(255,255,255,.9); }
.thumb-scaffold i, .thumb-scaffold b, .thumb-scaffold em, .thumb-scaffold strong { position: absolute; display: block; background: rgba(255,255,255,.9); }
.thumb-scaffold i { top: -7px; right: -4px; width: 7px; height: 30px; } .thumb-scaffold b { top: 21px; right: -15px; width: 29px; height: 7px; transform: rotate(90deg); } .thumb-scaffold em { top: 47px; left: 37px; width: 7px; height: 49px; } .thumb-scaffold strong { top: 46px; left: 20px; width: 42px; height: 7px; transform: rotate(90deg); }
.thumb-ball { position: absolute; z-index: 2; right: 17%; bottom: 23%; width: 28px; height: 28px; border: 5px solid #f4c75d; border-radius: 50%; background: #d45c35; box-shadow: 0 0 0 8px rgba(244,199,93,.12), 0 12px 18px rgba(0,0,0,.25); }
.game-card-top { display: flex; justify-content: space-between; color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .12em; }
.game-card-top strong { color: var(--teal); }
.game-card h3 { margin: 18px 0 4px; font-size: 2rem; line-height: 1; letter-spacing: -.05em; } .game-type { color: var(--orange); font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .game-card > p:not(.game-type) { color: var(--muted); line-height: 1.55; } dl { display: grid; gap: 10px; margin: auto 0 20px; } dl div { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid #e0e6e4; padding-top: 8px; } dt, dd { margin: 0; font-size: .74rem; } dt { color: var(--muted); } dd { font-weight: 700; text-align: right; } .play-button { display: flex; justify-content: space-between; padding: 13px 15px; color: #fff; background: var(--teal); font-size: .76rem; font-weight: 900; letter-spacing: .14em; text-decoration: none; } .play-button:hover { background: var(--orange); } .quality-panel { display: flex; justify-content: space-between; gap: 18px; padding: 14px 16px; margin-top: 20px; border: 1px solid var(--line); background: rgba(255,255,255,.8); color: var(--ink); font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; } .loading-state, .error-state, .empty-state { color: var(--muted); border: 1px solid var(--line); background: rgba(255,255,255,.72); padding: 14px 16px; margin-top: 18px; } .error-state { color: #842a2a; background: rgba(212,92,53,.08); border-color: rgba(212,92,53,.32); } .empty-state { margin-top: 0; }
@media (max-width: 760px) { .featured-game { display: flex; } .featured-game .game-thumb { height: 220px; min-height: 0; margin: -22px -22px 18px; } }
@media (max-width: 640px) { .site-header { align-items: flex-start; flex-direction: column; } .count-line { margin-bottom: 50px; } .quality-panel { flex-direction: column; letter-spacing: .08em; } }