/* ================================ Reading Fishy (f.css) - Header/footer are OUTSIDE the game and DO NOT overlay it - App fills the *visual* viewport (iOS safe) - Canvas fills the app box; overlays are scoped to the app box - Touch friendly, responsive UI ================================= */ /* ---------- Viewport variables & global page behavior ---------- */ :root{ --hdr: 0px; /* if you ever need to offset for a fixed header */ --ftr: 0px; /* or footer, set via JS */ --app-h: 100svh; /* safe viewport height (works on iOS URL bars) */ --lift: 12px; /* gently lift the app (0–20px works well) */ } @supports (height: 100dvh){ :root{ --app-h: 100dvh; } /* prefer dynamic vh when supported */ } html, body{ min-height: 100%; overflow-y: auto; overscroll-behavior: none; /* no rubber-banding through the app */ } /* While gameplay is active you can toggle this class on */ body.f-lock-scroll{ position: fixed; width: 100%; overflow: hidden; } /* ---------- Global reset (scoped) ---------- */ #f_app *{ box-sizing: border-box; } #f_app{ position: relative; isolation: isolate; font-family: Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; /* Mobile fit & gentle lift */ min-height: calc(var(--app-h) - var(--hdr) - var(--ftr) + var(--lift)); margin-top: calc(-1 * var(--lift)); /* Stop page panning/zoom while steering */ touch-action: none; overscroll-behavior: contain; } /* Cover in start hero */ .cover{ width: 30rem; max-width: 100%; height: auto; } /* Theme tokens */ #f_app{ --sea1:#7ec8ff; --sea2:#2b7bbf; --ui:#ffffffee; --accent:#8b5cf6; --accent2:#a78bfa; --muted:#53627a; --panel:#fff; --good:#10b981; --bad:#ef4444; --ink:#0f172a; } /* Background lives inside the app box */ #f_app::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(1200px 800px at 50% 10%, var(--sea1), var(--sea2)); } /* ---------- App sizing & canvas ---------- */ #f_app .f-canvas{ position: relative; /* not fixed -> no overlay issues */ display:block; width:100%; height:100%; z-index:1; touch-action: none; /* belt & suspenders for mobile */ -webkit-user-select: none; user-select: none; } /* ---------- HUD ---------- */ #f_app .f-ui{ position:absolute; inset:16px auto auto 16px; z-index:3; } #f_app .f-hud{ display:flex; gap:10px; padding:8px 12px; background:var(--ui); border-radius:14px; box-shadow:0 8px 24px #0002; backdrop-filter: blur(6px); } #f_app .f-stat{ font-size:14px; color:#123; } #f_app .f-stat span{ opacity:.7; margin-right:6px; } /* ---------- Overlay screens (within app) ---------- */ #f_app .f-screen{ position:absolute; inset:0; z-index:4; display:none; place-items:center; background:linear-gradient(#0004,#0004); } #f_app .f-show{ display:grid; } #f_app .f-hide{ display:none !important; } #f_app .f-panel{ width:min(980px,92vw); background:var(--panel); color:var(--ink); border-radius:20px; padding:28px; box-shadow:0 18px 60px #0005; } /* Rows and buttons */ #f_app .f-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:auto; justify-content:center; } .f-row .f-btn{ font-size:2rem; } #f_app .f-btn{ border:none; border-radius:14px; padding:12px 18px; font-weight:700; cursor:pointer; background:linear-gradient(180deg,var(--accent),var(--accent2)); color:#fff; box-shadow:0 8px 24px #0003; transform:translateZ(0); transition:transform .12s ease; } #f_btnHome{ font-size:1.1rem; } #f_app .f-btn:hover{ transform:scale(1.03); } #f_app .f-btn:active{ transform:scale(.98); } #f_app .f-btn.f-ghost{ background:#fff; color:#222; border:2px solid #e5e7eb; } #f_app .f-btn.f-tile{ width:100%; text-align:left; display:flex; flex-direction:column; align-items:flex-start; gap:4px; } #f_app .f-disabled{ opacity:.45; pointer-events:none; } #f_app .f-ico{ margin-right:6px } /* ---------- Start screen (modern hero) ---------- */ #f_app .f-start{ position:relative; overflow:hidden; background:linear-gradient(180deg,#ffffffee,#ffffffdd); border:1px solid #e8eef6; box-shadow:0 22px 70px rgba(15,23,42,.15); border-radius:24px; padding:clamp(20px,3.6vw,32px); } .f-start-left{ display:flex; flex-direction:column; justify-content:center; align-items:center; } #f_app .f-start-title{ margin:0 0 6px; font-size:5rem !important; line-height:1.05; letter-spacing:-0.02em; color:#0b1320; font-weight:700; } #f_app .f-start-title span{ background:linear-gradient(90deg,#1e3a8a,#2563eb,#0ea5e9); -webkit-background-clip:text; background-clip:text; color:transparent; } #f_app .f-start-chips{ display:flex; gap:8px; margin:10px 0 12px; flex-wrap:wrap; } #f_app .f-chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; background:#f1f5f9; border:1px solid #e5edf7; color:#0f172a; border-radius:999px; font-weight:600; font-size:12px; } #f_app .f-start-sub{ margin:0 0 14px; color:#324255; font-size:clamp(14px,2vw,16px); } #f_app .f-start-actions{ display:flex; align-items:center; gap:14px; } #f_app .f-start-btn{ font-size:2rem; padding:14px 18px; border-radius:14px; box-shadow:0 10px 28px rgba(37,99,235,.25); } #f_app .f-start-btn .f-ico{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:999px; background:rgba(255,255,255,.25); margin-right:8px; } #f_app .f-start-hint{ color:#5b6a7e; font-size:13px; display:flex; align-items:center; gap:8px; user-select:none; } #f_app .f-kbd{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:8px; background:#eef2ff; border:1px solid #dbe2ff; font-weight:700; } /* Cover art side */ #f_app .f-start-cover-wrap{ position:relative; display:grid; place-items:center; } #f_app .f-start-cover{ width:40rem; max-width:min(620px, 90vw); border-radius:16px; box-shadow:0 14px 40px rgba(2,6,23,.18); display:block; margin-top:30px; margin-bottom:20px; } #f_app .f-cover-glow{ content:""; position:absolute; inset:auto -14% -10% -14%; height:46%; z-index:-1; background:radial-gradient(60% 60% at 50% 50%, rgba(14,165,233,.25), transparent 70%); filter:blur(18px); } /* Friendly ripple under the title */ #f_app .f-ripples{ position:absolute; left:clamp(14px,2vw,20px); bottom:clamp(10px,2vw,14px); width:140px; height:10px; border-radius:999px; background:radial-gradient(closest-side,#ffffffaa,transparent); animation:f-ripple 2.8s infinite ease-in-out; filter:blur(2px); } @keyframes f-ripple{ 0%,100%{transform:scaleX(1)} 50%{transform:scaleX(1.08)} } /* ---------- Subject select ---------- */ #f_app .f-subject-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px; } #f_app .f-tile-title{ font-size:18px; } #f_app .f-tile-sub{ font-size:12px; opacity:.8; } #f_app .f-lock{ margin-left:auto } /* ---------- Skills ---------- */ #f_app .f-skill-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:12px; } #f_app .f-skill-card{ background:#f8fafc; border:1px solid #e9eef5; border-radius:16px; padding:16px; box-shadow:0 10px 26px #0001; } #f_app .f-skill-card h3{ margin:0 0 6px } #f_app .f-grade3{ background:linear-gradient(180deg,#ecfeff,#f8fafc); border-color:#cffafe } #f_app .f-grade5{ background:linear-gradient(180deg,#eef2ff,#f8fafc); border-color:#e0e7ff } #f_app .f-bullets{ margin:8px 0 14px; padding-left:18px; color:#334155 } #f_app .f-bullets li{ margin:4px 0 } /* ---------- Customize ---------- */ #f_app .f-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:24px; } #f_app .f-custom-preview{ background: radial-gradient(80% 60% at 50% 80%, #0003, #0001); border-radius:18px; padding:12px; display:grid; place-items:center; } #f_app .f-preview{ width:min(540px,80vw); height:420px; } #f_app .f-form{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 0 18px; } #f_app .f-field{ display:flex; justify-content:space-between; align-items:center; gap:12px; background:#f4f4f8; border-radius:12px; padding:10px 12px; } #f_app .f-field input[type="color"]{ width:44px; height:34px; border:none; background:none; padding:0; } /* ---------- Difficulty ---------- */ #f_app .f-diff-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px; } #f_app .f-diff{ border-radius:16px; padding:16px; text-align:left; border:1px solid #e5e7eb; background:#fff; box-shadow:0 10px 24px #0001; } #f_app .f-diff b{ display:block; font-size:18px; margin-bottom:6px } #f_app .f-easy{ background:linear-gradient(180deg,#ecfdf5,#ffffff); border-color:#bbf7d0 } #f_app .f-medium{ background:linear-gradient(180deg,#eff6ff,#ffffff); border-color:#bfdbfe } #f_app .f-hard{ background:linear-gradient(180deg,#fff7ed,#ffffff); border-color:#fed7aa } /* ---------- Question modal ---------- */ #f_app .f-muted{ color:var(--muted) } #f_app .f-question .f-q-chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; background:#f1f5f9; border-radius:999px; margin-bottom:10px; } #f_app .f-question .f-q-prompt{ font-size:16px; margin:10px 0 8px; } #f_app .f-question .f-q-options{ display:grid; gap:8px; margin-bottom:8px; } #f_app .f-question .f-q-row input{ transform:translateY(1px) } #f_app .f-q-feedback{ min-height:22px; font-size:14px; color:#0f5132; } #f_app .f-q-warn{ color:#b91c1c } #f_app .f-popcard-in{ animation:f-pop .18s ease both; } @keyframes f-pop{0%{transform:scale(.9);opacity:0}100%{transform:scale(1);opacity:1}} #f_app .f-shake{ animation:f-shake .3s linear } @keyframes f-shake{ 10%{ transform: translateX(-9px) } 20%{ transform: translateX(9px) } 30%{ transform: translateX(-7px) } 40%{ transform: translateX(7px) } 50%{ transform: translateX(-5px) } 60%,100%{ transform: translateX(0) } } /* ---------- Resume countdown ---------- */ #f_app .f-resume{ position:absolute; inset:0; pointer-events:none; z-index:5; } #f_app .f-resume-badge{ position:absolute; left:var(--resume-x); top:var(--resume-y); transform:translate(-50%,-120%); background:rgba(255,255,255,.95); border:2px solid #e5e7eb; color:var(--ink); font-weight:800; font-size:26px; min-width:50px; text-align:center; padding:8px 14px; border-radius:999px; box-shadow:0 10px 26px #0003; animation:f-blip .6s ease both; } @keyframes f-blip{ 0%{ transform:translate(-50%,-120%) scale(.8); opacity:.2 } 60%{ transform:translate(-50%,-120%) scale(1.06); opacity:1 } 100%{ transform:translate(-50%,-120%) scale(1); } } /* ---------- Game Over (Chomped) ---------- */ #f_app .f-over{ backdrop-filter: blur(12px); background:rgba(0,0,0,.35); border:1px solid #ffffff22; color:#fff; text-align:center; } #f_app .f-title-ripple{ position:relative; display:inline-block; margin:0 0 8px; font-size:36px; text-shadow: 0 6px 18px rgba(0,0,0,.4); } #f_app .f-title-ripple::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:6px; background:radial-gradient(circle at 50% 100%, #fff8, transparent 60%); animation:f-ripple 2.8s infinite ease-in-out; } #f_app #f_overStats{ margin:6px 0 12px; opacity:.95; } /* ---------- Win screen (Ocean Overlord) ---------- */ #f_app .f-win{ backdrop-filter: blur(12px); background:linear-gradient(180deg, #ffffffee, #ffffffdd); border:1px solid #e8ecf4; color:#0b1320; text-align:center; } #f_app .f-win h2{ font-size:34px; margin:0 0 8px; background: linear-gradient(90deg, #1e3a8a, #2563eb, #0ea5e9); -webkit-background-clip: text; background-clip: text; color: transparent; } #f_app .f-win .f-sub{ color:#334155; margin-bottom:8px; } /* ---------- Responsive tweaks ---------- */ @media (max-width: 900px){ #f_app .f-start-grid{ grid-template-columns:1fr; } #f_app .f-start-cover{ width:min(620px,84vw); } #f_app .f-start-actions{ gap:10px; } } /* ≤1200px */ @media (max-width: 1200px){ #f_app .f-panel{ width:min(920px,94vw); padding:26px; } #f_app .f-start h1{ font-size:40px; } #f_app .f-subject-grid{ grid-template-columns:repeat(3,1fr); } #f_app .f-grid{ grid-template-columns:1fr 1fr; } #f_app .f-preview{ height:380px; } } /* ≤992px (lg tablets / small laptops) */ @media (max-width: 992px){ #f_app .f-ui{ inset:12px auto auto 12px; } #f_app .f-hud{ gap:8px; padding:6px 10px; } #f_app .f-stat{ font-size:13px; } #f_app .f-panel{ width:min(860px,94vw); padding:24px; } #f_app .f-start h1{ font-size:36px; } #f_app .f-subject-grid{ grid-template-columns:repeat(2,1fr); } #f_app .f-grid{ grid-template-columns:1fr; gap:18px; } #f_app .f-preview{ height:340px; width:min(520px,86vw); } #f_app .f-diff-grid{ grid-template-columns:repeat(2,1fr); } #f_app .f-resume-badge{ font-size:24px; padding:8px 12px; } } /* ≤820px (portrait tablets) */ @media (max-width: 820px){ #f_app .f-panel{ width:min(740px,94vw); padding:22px; } #f_app .f-start h1{ font-size:32px; } #f_app .f-pills span{ font-size:11px; padding:6px 9px; } #f_app .f-question .f-q-prompt{ font-size:15px; } #f_app .f-btn{ padding:12px 16px; } #f_app .f-diff-grid{ grid-template-columns:1fr; } :root{ --lift: 0px; } /* avoid header overlap on small screens */ } /* ≤680px (large phones / small tablets) */ @media (max-width: 680px){ #f_app .f-ui{ inset:10px auto auto 10px; } #f_app .f-hud{ border-radius:12px; } #f_app .f-stat{ font-size:12px; } #f_app .f-panel{ width:min(620px,95vw); padding:20px; border-radius:18px; } #f_app .f-start h1{ font-size:28px; } #f_app .f-preview{ height:300px; width:min(500px,88vw); } #f_app .f-form{ grid-template-columns:1fr; } #f_app .f-btn{ padding:12px 15px; } #f_app .f-question .f-q-prompt{ font-size:14px; } #f_app .f-question .f-q-options{ gap:10px; } #f_app .f-resume-badge{ font-size:22px; min-width:46px; } } /* ≤520px (phones) */ @media (max-width: 520px){ #f_app .f-ui{ inset:8px auto auto 8px; } #f_app .f-hud{ padding:6px 9px; gap:6px; } #f_app .f-stat{ font-size:11px; } #f_app .f-panel{ width:94vw; padding:18px; border-radius:16px; } #f_app .f-start h1{ font-size:24px; } #f_app .f-pills{ gap:6px; } #f_app .f-tile-title{ font-size:16px; } #f_app .f-tile-sub{ font-size:11px; } #f_app .f-preview{ height:260px; width:88vw; } #f_app .f-btn{ padding:12px 14px; font-size:14px; } #f_app .f-resume-badge{ font-size:20px; min-width:44px; padding:7px 10px; } } /* ≤400px (small phones) */ @media (max-width: 400px){ #f_app .f-ui{ inset:6px auto auto 6px; } #f_app .f-hud{ padding:5px 8px; gap:5px; border-radius:12px; } #f_app .f-stat{ font-size:10px; } #f_app .f-panel{ padding:16px; border-radius:14px; } #f_app .f-start h1{ font-size:20px; } #f_app .f-btn{ padding:11px 12px; font-size:13px; } #f_app .f-resume-badge{ font-size:18px; min-width:40px; padding:6px 9px; } } /* ---------- Touch target helper ---------- */ @media (pointer: coarse){ #f_app .f-btn{ padding:14px 20px } } /* “How to” list spacing */ #f_app .f-how-list{ margin:10px 0 0 0; color:#0b1b2e; } #f_app .f-how-list li{ margin:6px 0; }