:root { --ink:#172033; --muted:#62708a; --paper:#f7f8fc; --card:#fff; --accent:#6956e9; --accent-dark:#4e3dc6; --line:#dde2ee; --danger:#9f2436; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.55 Inter,ui-sans-serif,system-ui,sans-serif; overflow-x:hidden; }
a { color:var(--accent); }
.site-header,.site-footer { max-width:1120px; margin:auto; padding:20px 28px; display:flex; align-items:center; justify-content:space-between; }
.site-header nav a { margin-left:20px; }.brand { font-weight:800; color:var(--ink); text-decoration:none; letter-spacing:-.04em; }.site-footer { color:var(--muted); font-size:.9rem; }
.hero,.page-shell,.feature-grid { max-width:1120px; margin:auto; padding:72px 28px; }.hero { min-height:0; padding-bottom:20px; background:radial-gradient(circle at 75% 25%,#e5e0ff 0,transparent 30%); }
h1 { font-size:clamp(2.5rem,6vw,5rem); line-height:1.02; max-width:800px; letter-spacing:-.06em; margin:.2em 0; }.page-shell h1 { font-size:clamp(2.2rem,5vw,3.8rem); }h2 { letter-spacing:-.03em; }.lead { max-width:680px; color:var(--muted); font-size:1.18rem; }
.eyebrow,.game-badge,.tag { font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; border:0; border-radius:10px; padding:12px 17px; margin:10px 8px 0 0; font:inherit; font-weight:750; text-align:center; text-decoration:none; cursor:pointer; }.button:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid #b8afff; outline-offset:2px; }.button-primary { background:var(--accent); color:#fff; }.button-primary:hover { background:var(--accent-dark); }.button-secondary { background:#ece9ff; color:#3c2fa5; }.button:disabled { opacity:.45; cursor:not-allowed; }
.feature-grid,.game-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:0 28px 72px; }.game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); padding:32px 0; }.panel,.game-card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px; box-shadow:0 10px 30px #202d5010; }.game-card-muted { opacity:.7; }.game-actions { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
label { display:block; margin:10px 0 5px; font-weight:650; }input,select { display:block; width:100%; min-height:46px; border:1px solid #bbc4d8; border-radius:9px; padding:10px; font:inherit; background:white; }.notice { background:#eef0f8; padding:12px; border-radius:10px; }.notice-error { color:var(--danger); background:#fff0f2; }.player-list { padding-left:20px; }.muted,.phase { color:var(--muted); }.phase { text-transform:capitalize; }.secret { margin:20px 0; padding:16px; border-radius:12px; background:#fff7d6; }
.category-panel { margin:22px 0; padding:18px; border:1px solid var(--line); border-radius:12px; background:#fafbff; }.category-panel h2 { margin-top:0; }.category-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.category-option { display:flex; align-items:center; gap:9px; margin:0; padding:13px; border:1px solid #cbd4e6; border-radius:10px; background:#fff; cursor:pointer; font-weight:650; }.category-option:hover { border-color:var(--accent); background:#f7f5ff; }.category-option:has(input:checked) { border-color:var(--accent); background:#eeeaff; box-shadow:inset 0 0 0 1px var(--accent); }.category-option input { display:inline-block; width:auto; margin:0; }
.vote-list { display:flex; flex-wrap:wrap; }.result { padding:20px; margin-top:25px; background:#e5e0ff; border-radius:14px; }.result-list { list-style:none; padding:0; margin:12px 0; }.result-list li { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid #cfc8f7; }.result-list span { color:#4c438c; }.back-link { font-weight:700; text-decoration:none; }.text-button { border:0; background:none; color:var(--accent); font-weight:700; cursor:pointer; }
.brand { display:flex; align-items:center; gap:9px; }.brand-mark { display:inline-grid; place-items:center; min-width:38px; height:30px; border-radius:9px; background:var(--accent); color:#fff; font-size:.82rem; letter-spacing:-.12em; }.services { max-width:1120px; margin:auto; padding:20px 28px 72px; }.services > h2 { font-size:clamp(1.8rem,4vw,2.8rem); margin-top:0; }.service-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }.service-card { min-height:250px; display:flex; flex-direction:column; align-items:flex-start; padding:24px; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:0 10px 30px #202d5010; }.service-card h3 { margin:12px 0 4px; font-size:1.35rem; letter-spacing:-.03em; }.service-card p { margin-top:0; color:var(--muted); }.service-card .button { margin-top:auto; }.service-icon { display:grid; place-items:center; width:52px; height:52px; border-radius:14px; font-size:1.7rem; background:#eeeaff; }.service-minecraft .service-icon { background:#ddf0d5; }.service-teamspeak .service-icon { background:#d9efff; }.mc-address { display:block; margin:4px 0 2px; padding:7px 9px; border-radius:7px; background:#f0f2f8; color:#313b50; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.86rem; }
@media (max-width:700px) { .site-header { min-height:64px; padding:14px max(20px,env(safe-area-inset-right)) 14px max(20px,env(safe-area-inset-left)); }.site-footer { padding:20px max(20px,env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); }.hero,.page-shell,.services { padding:clamp(32px,8vw,46px) max(20px,env(safe-area-inset-right)) clamp(42px,10vw,60px) max(20px,env(safe-area-inset-left)); }.hero { min-height:auto; }.feature-grid,.game-grid,.category-options,.service-grid { grid-template-columns:1fr; }.feature-grid,.game-grid { padding:0 max(20px,env(safe-area-inset-right)) 42px max(20px,env(safe-area-inset-left)); }.category-options { padding:0; }.game-actions { grid-template-columns:1fr; }.button { width:100%; min-height:50px; margin:10px 0 0; }.service-card .button { width:100%; }.lobby-meta { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }.lobby-meta .text-button { min-height:44px; padding:8px; }.game-room .panel,.game-room #room-content { padding:18px; }.game-room .player-list { margin-bottom:20px; }.vote-list { display:grid; grid-template-columns:1fr; gap:8px; }.vote-list .button { margin:0; }.result-list li { align-items:flex-start; flex-direction:column; gap:2px; }h1 { letter-spacing:-.045em; }.mc-address { width:100%; overflow-wrap:anywhere; }.category-option { min-height:54px; }.back-link { display:inline-block; min-height:44px; padding-top:8px; } }
@media (max-width:390px) { body { font-size:15px; }.brand-mark { min-width:34px; height:28px; }.hero,.page-shell,.services { padding-left:max(16px,env(safe-area-inset-left)); padding-right:max(16px,env(safe-area-inset-right)); }.feature-grid,.game-grid { padding-left:max(16px,env(safe-area-inset-left)); padding-right:max(16px,env(safe-area-inset-right)); }.panel,.game-card,.service-card { padding:18px; }.service-card { min-height:0; }.result { padding:16px; } }