/* ===================== THEME VARS ===================== */ /* Default: dark (can be overridden by [data-theme] on ) */ :root{ --brand:#497f64; /* Dark */ --bg:#0d0f10; --text:#ffffff; --muted:#a5b3a8; --border:#2a2d31; --btnBg:#12161a; --tile:#0f1214; --tileFilled:#111419; --tileSize: clamp(40px, min(9.2vw, (100vw - 64px)/7), 56px); --correct:#2ea043; --present:#e3b341; --absent:#3a3f45; --glass:#0e1115cc; --card:#111419; --shadow: 0 12px 32px rgba(0,0,0,.45); --bubbleShadow: 0 6px 18px rgba(0,0,0,.35); } /* Light theme overrides */ :root[data-theme="light"]{ --bg:#f6f7f9; --text:#0b0d0f; --muted:#5c636a; --border:#d5d9df; --btnBg:#ffffff; --tile:#ffffff; --tileFilled:#f0f3f6; --absent:#cbd3dc; --glass:#ffffffcc; --card:#ffffff; --shadow: 0 10px 26px rgba(0,0,0,.08); --bubbleShadow: 0 8px 16px rgba(0,0,0,.10); } :root[data-theme="dark"]{ --bg:#0d0f10; } /* ===================== GLOBAL ===================== */ html,body{height:100%} body{ margin:0; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; } /* App-controlled backdrop (overrides host CMS/page bg) */ .ws-page-bg{ position:fixed; inset:0; background:var(--bg); pointer-events:none; z-index:0; } /* ===================== TOP BAR ===================== */ .ws-topbar{ position:sticky; top:0; z-index:40; width:100%; background:var(--glass); backdrop-filter: blur(6px); border-bottom:1px solid var(--border); } .ws-topbar-inner{ max-width:920px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; } .ws-brand{ display:flex; align-items:center; gap:10px; font:800 18px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; letter-spacing:.3px; } .ws-brand .dot{ width:10px; height:10px; border-radius:50%; background:var(--brand); display:inline-block } .ws-actions{ display:flex; align-items:center; gap:8px; } .icon-btn{ display:grid; place-items:center; width:38px; height:38px; padding:4px; box-sizing:border-box; border-radius:10px; border:1px solid var(--border); background:var(--btnBg); cursor:pointer; line-height:0; } .icon-btn svg{ width:20px; height:20px; stroke:currentColor; color:var(--text); overflow:visible; stroke-linecap:round; stroke-linejoin:round; } /* ===================== HUD ===================== */ #game{ position:relative; z-index:1; width:100%; max-width:720px; margin:24px auto 48px; padding:0 16px 48px; display:flex; flex-direction:column; align-items:center; gap:16px; } .ws-hud{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:12px; max-width:560px; } .ws-hud .ws-tag{ font:600 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; padding:8px 10px; border:1px solid var(--border); border-radius:10px; background:var(--card); color:var(--text); } .ws-hud-right{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; } @keyframes ws-pulse{ 0%{transform:scale(1)} 40%{transform:scale(1.07)} 100%{transform:scale(1)} } .ws-tag.pulse{ animation: ws-pulse 260ms ease; } /* ===================== STAGE ===================== */ .ws-stage{ width:100%; max-width:560px; position:relative; display:flex; flex-direction:column; align-items:center; gap:12px; } /* ===================== GRID ===================== */ .ws-grid{ display:grid; gap:8px; justify-items:center; } .ws-row{ display:grid; gap:8px; } .ws-tile{ width:var(--tileSize); height:var(--tileSize); border:1px solid var(--border); border-radius:8px; display:grid; place-items:center; font-weight:700; text-transform:uppercase; background:var(--tile); color:var(--text); user-select:none; transition:transform .06s ease, background .15s ease, border-color .15s ease; transform-style:preserve-3d; } .ws-tile.active{ outline:2px solid var(--brand); outline-offset:-2px; } .ws-tile.filled{ background:var(--tileFilled); border-color:#3a3f45; } :root[data-theme="light"] .ws-tile.filled{ border-color:var(--border); } .ws-row.ws-locked .ws-tile{ opacity:.9; } .ws-tile.state-correct{ background:var(--correct); border-color:var(--correct); color:#000; } .ws-tile.state-present{ background:var(--present); border-color:var(--present); color:#000; } .ws-tile.state-absent{ background:var(--absent); border-color:#000; color:var(--text); } @keyframes ws-flip-1{ 0%{transform:rotateX(0)} 49%{transform:rotateX(90deg)} 51%{transform:rotateX(90deg)} 100%{transform:rotateX(0)} } .ws-tile.flip{ animation: ws-flip-1 420ms ease var(--flip-delay,0ms) both; } @keyframes ws-shake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} } .ws-row.shake .ws-tile{ animation:ws-shake 120ms linear 0s 2; } /* ===================== KEYBOARD ===================== */ .ws-kb{ margin-top:8px; display:grid; gap:8px; width:100%; padding:0 12px; -webkit-tap-highlight-color: transparent; max-width:560px; margin-left:auto; margin-right:auto; } .ws-kb-row{ display:grid; grid-auto-flow:column; justify-content:center; gap:6px; } .ws-kb-key{ font:600 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; padding:12px 10px; min-width:34px; border-radius:8px; border:1px solid var(--border); background:var(--btnBg); color:var(--text); cursor:pointer; user-select:none; touch-action:manipulation; } .ws-kb-key:active{ transform:translateY(1px) } .ws-kb-enter{ padding:12px 14px } .ws-kb-back{ padding:12px 14px } .ws-kb-key.k-correct{ background:var(--correct); border-color:var(--correct); color:#000; } .ws-kb-key.k-present{ background:var(--present); border-color:var(--present); color:#000; } .ws-kb-key.k-absent{ background:var(--absent); border-color:#000; color:var(--text); } /* ===================== BUBBLE ===================== */ .ws-bubble{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:var(--brand); color:#fff; border:1px solid var(--brand); border-radius:12px; padding:10px 16px; font:700 14px/1.3 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; box-shadow:0 6px 20px rgba(0,0,0,.35); opacity:0; pointer-events:none; white-space:nowrap; z-index:5; transition:opacity .2s ease, transform .2s ease; } .ws-bubble.show{ opacity:1; transform:translate(-50%,-50%) scale(1.05); } /* ===================== STREAK TOAST ===================== */ .ws-streak-toast{ position:fixed; left:50%; top:72px; transform:translate(-50%,-8px); background:var(--card); color:var(--text); border:1px solid var(--border); border-radius:12px; padding:10px 14px; font:700 14px/1.25 system-ui; box-shadow:var(--bubbleShadow); z-index:55; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; } .ws-streak-toast.show{ opacity:1; transform:translate(-50%,0); } .ws-streak-toast .sub{ display:block; font:600 12px/1.2 system-ui; color:var(--muted); margin-top:4px; } /* Anchored streak tooltip */ .ws-streak-tip{ position:fixed; background:var(--card); color:var(--text); border:1px solid var(--border); border-radius:12px; padding:10px 12px; font:600 13px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; box-shadow:var(--bubbleShadow); z-index:56; opacity:0; transform:translateY(-6px); transition:opacity .16s ease, transform .16s ease; max-width:260px; } .ws-streak-tip.show{ opacity:1; transform:translateY(0); } .ws-streak-tip .row{ display:flex; gap:8px; margin-top:8px; } .ws-streak-tip .ws-btn{ padding:8px 10px; } /* ===================== MODALS / CARDS ===================== */ .ws-modal, .ws-endcard{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:50; } :root[data-theme="light"] .ws-modal, :root[data-theme="light"] .ws-endcard{ background:rgba(8,10,12,.35); } .ws-modal .card, .ws-endcard .card{ width:min(92vw,560px); background:var(--card); border:1px solid var(--border); border-radius:16px; padding:20px; box-shadow:var(--shadow); } .ws-modal h3, .ws-endcard h3{ margin:0 0 10px 0; font:700 20px/1.2 system-ui; } .ws-modal p, .ws-modal li, .ws-endcard p{ margin:6px 0; color:var(--muted) } .ws-modal .row, .ws-endcard .row{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap } .ws-btn{ border:1px solid var(--border); background:var(--btnBg); color:var(--text); border-radius:10px; padding:10px 12px; font:600 14px/1 system-ui; cursor:pointer; } .ws-btn.primary{ background:var(--brand); color:#fff; border-color:var(--brand) } .ws-mini-row{ display:grid; grid-auto-flow:column; gap:6px; margin-top:8px; } .ws-mini-tile{ width:28px; height:28px; border-radius:6px; display:grid; place-items:center; font:700 12px/1 system-ui; text-transform:uppercase; border:1px solid transparent; } .ws-mini-tile.correct{ background:var(--correct); color:#000; } .ws-mini-tile.present{ background:var(--present); color:#000; } .ws-mini-tile.absent{ background:var(--absent); color:var(--text); } /* Settings form */ .ws-form{ display:grid; gap:10px; } .ws-field{ display:flex; align-items:center; justify-content:space-between; background:var(--tile); border:1px solid var(--border); padding:10px; border-radius:10px; } .ws-field label{ font:600 14px/1 system-ui; } .ws-field input[type="checkbox"]{ width:18px; height:18px; } .ws-field select{ font:600 14px/1 system-ui; color:var(--text); background:var(--btnBg); border:1px solid var(--border); border-radius:8px; padding:8px 10px; } /* Floating points chip */ .ws-fxfloat{ position:fixed; z-index:60; pointer-events:none; font:800 14px/1 system-ui; padding:6px 8px; border-radius:999px; background:var(--card); border:1px solid var(--border); color:var(--text); box-shadow:0 8px 20px rgba(0,0,0,.45); transition: transform 420ms cubic-bezier(.22,.82,.25,1), opacity 420ms ease, left 420ms ease, top 420ms ease; opacity:.98; } :root[data-theme="light"] .ws-fxfloat{ box-shadow:0 8px 16px rgba(0,0,0,.12); } .ws-fxfloat.green{ background:var(--correct); color:#000; border-color:var(--correct); } .ws-fxfloat.yellow{ background:var(--present); color:#000; border-color:var(--present); } /* ===================== MOBILE ===================== */ @media (max-width:430px){ :root{ --tileSize: clamp(36px, 10.5vw, 48px); } .ws-kb{ padding:0 8px; gap:8px; max-width:560px; margin-left:auto; margin-right:auto; } .ws-kb-row{ gap:6px; width:100%; grid-auto-flow:row; justify-content:center; justify-items:stretch; } .ws-kb-row:nth-child(1){ grid-template-columns: repeat(10, 1fr); } .ws-kb-row:nth-child(2){ grid-template-columns: repeat(9, 1fr); } .ws-kb-row:nth-child(3){ grid-template-columns: repeat(11, 1fr); } .ws-kb-key{ justify-self:stretch; min-width:auto; min-height:clamp(40px, 9.8vw, 50px); padding:clamp(10px, 2.4vw, 14px) clamp(8px, 2.6vw, 12px); font-size:clamp(13px, 3.6vw, 16px); border-radius:10px; } .ws-kb-enter, .ws-kb-back{ grid-column:span 2; padding:clamp(10px, 2.4vw, 14px) clamp(10px, 3.2vw, 16px); } .ws-modal .card, .ws-endcard .card { padding:16px; } } .ws-hud-right { gap:8px; } @media (max-width:430px){ .ws-hud-right { gap:6px; } }