:root{ --bg:#0b1020; --card:#0f1733; --card2:#101b3d; --stroke:rgba(255,255,255,.10); --text:rgba(255,255,255,.92); --muted:rgba(255,255,255,.68); --muted2:rgba(255,255,255,.50); --good:#2dd4bf; --warn:#fbbf24; --bad:#fb7185; --accent:#60a5fa; --shadow: 0 18px 50px rgba(0,0,0,.35); --radius: 18px; --radius2: 22px; } *{box-sizing:border-box} html,body{min-height:100%} /* Background fix (scroll-safe): - Some browsers scroll the element when body has height:100%. - That can cause the lower part of the page to show a different background. We render the gradients on a fixed layer so the background is consistent even when the page can scroll. */ html, body{height:100%;} html{background: var(--bg);} body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--text); background: transparent; position: relative; isolation: isolate; /* keep ::before behind content without escaping */ } body::before{ content:""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(1200px 800px at 15% 10%, rgba(96,165,250,.20), transparent 55%), radial-gradient(900px 600px at 90% 15%, rgba(45,212,191,.18), transparent 60%), radial-gradient(900px 700px at 40% 100%, rgba(251,113,133,.12), transparent 55%), var(--bg); } .app{ min-height:100vh; display:flex; flex-direction:column; } .topbar{ display:flex; align-items:center; justify-content:space-between; padding: calc(18px + env(safe-area-inset-top)) 18px 0; gap:12px; } .topbarRight{display:flex; align-items:center; gap:10px; position:relative} .pillBtn{ cursor:pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select:none; transition: transform .08s ease, background .15s ease, border-color .15s ease; } .pillBtn:hover{background: rgba(255,255,255,.10)} .pillBtn:active{transform: translateY(1px)} .brand{display:flex; align-items:center; gap:12px;} .logo{ width:44px;height:44px;border-radius:14px; display:flex;align-items:center;justify-content:center; background: linear-gradient(135deg, rgba(96,165,250,.35), rgba(45,212,191,.20)); border:1px solid var(--stroke); box-shadow: var(--shadow); font-size:20px; } .title{font-weight:800; letter-spacing:.2px} .subtitle{font-size:13px; color: var(--muted); margin-top:2px} .pill{ padding:10px 12px; border-radius:999px; border:1px solid var(--stroke); background: rgba(255,255,255,.06); color: var(--muted); font-size:13px; white-space:nowrap; } .badge{ display:inline-flex; align-items:center; gap:6px; padding: 7px 10px; border-radius: 999px; border: 1px solid var(--stroke); background: rgba(96,165,250,.16); color: var(--text); font-size: 12px; font-weight: 900; letter-spacing: .2px; white-space: nowrap; } .badge.good{background: rgba(45,212,191,.14); border-color: rgba(45,212,191,.35)} .badge.warn{background: rgba(251,191,36,.14); border-color: rgba(251,191,36,.35)} .main{ /* Wider layout on desktop so the bingo board can be bigger */ width:min(1680px, 96vw); margin: 14px auto 0; padding: 14px 0 26px; position:relative; flex:1; } .card{ background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid var(--stroke); border-radius: var(--radius2); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 18px; } .h1{font-size:22px; margin:0 0 10px} .muted{color:var(--muted)} .small{font-size:13px} .joinForm{display:grid; gap:12px; margin-top:12px; max-width:520px} .label{display:grid; gap:6px} .label span{font-size:13px; color:var(--muted)} .input, .textarea{ width:100%; padding:12px 12px; border-radius: 14px; border:1px solid var(--stroke); background: rgba(0,0,0,.22); color:var(--text); outline:none; } .input:focus, .textarea:focus{border-color:rgba(96,165,250,.55); box-shadow:0 0 0 3px rgba(96,165,250,.18)} .textarea{resize:vertical; min-height:140px; line-height:1.35} .btn{ border:1px solid var(--stroke); background: rgba(255,255,255,.08); color:var(--text); padding: 11px 14px; border-radius: 14px; cursor:pointer; font-weight:700; letter-spacing:.2px; transition: transform .08s ease, background .15s ease, border-color .15s ease; } .btn:hover{background: rgba(255,255,255,.12)} .btn:active{transform: translateY(1px)} .btn.primary{background: rgba(96,165,250,.22); border-color: rgba(96,165,250,.35)} .btn.primary:hover{background: rgba(96,165,250,.28)} .btn.success{background: rgba(45,212,191,.18); border-color: rgba(45,212,191,.35)} .btn.success:hover{background: rgba(45,212,191,.24)} .btn.danger{background: rgba(251,113,133,.26); border-color: rgba(251,113,133,.5); box-shadow: 0 10px 22px rgba(251,113,133,.18)} .btn.danger:hover{background: rgba(251,113,133,.32)} .btn.ghost{background: transparent} .footer{ padding: 12px 18px calc(18px + env(safe-area-inset-bottom)); color: var(--muted2); font-size:12px; } .tips{display:grid; gap:12px; margin-top:14px} .tip{display:flex; gap:12px; padding:12px; border-radius: 16px; border:1px solid var(--stroke); background: rgba(0,0,0,.18)} .tipIcon{width:34px; height:34px; border-radius: 12px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.07); border:1px solid var(--stroke)} .tipTitle{font-weight:800; font-size:14px} .tipBody{color:var(--muted); font-size:13px; margin-top:2px; line-height:1.35} .game{ display:grid; gap:14px; /* Student play area (desktop): make the board larger. v5 was a bit too small on wide screens; upscale ~1.5x. */ /* Bigger on PC screens */ max-width: 1680px; width: 100%; margin: 0 auto; } .gameHeader{display:flex; align-items:flex-end; justify-content:space-between; gap:12px} .meName{font-weight:900; font-size:20px} .meMeta{color:var(--muted); font-size:13px; margin-top:2px} .actions{display:flex; gap:10px; flex-wrap:wrap} .boardWrap{ background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid var(--stroke); border-radius: var(--radius2); box-shadow: var(--shadow); padding: 14px; /* Desktop: enlarge board (~1.5x vs v5) */ /* Bigger board on desktop */ max-width: 1600px; margin: 0 auto; } .board{ display:grid; /* Use minmax(0,1fr) so long words won't force the column wider */ grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } .tile{ border:1px solid var(--stroke); /* IMPORTANT: tiles are