/* ============================================================================ MDN Ultimate Tic Tac Toe — Clean CSS --------------------------------------------------------------------------- ⚠️ To truly disable pinch/double-tap zoom on phones you must add this tag in the site (theme/header), not via CSS: CSS below does two helpful things: • Uses large enough font on inputs to avoid iOS zoom-on-focus. • Sets touch-action to reduce double-tap zoom triggers. Also sets .mdn-small-board { border: 0 } per request. ============================================================================ */ /* ----------------------- Root scales & gaps (defaults) -------------------- */ :root{ --utt-cell: 60px; /* size of each small cell */ --utt-gap: 3px; /* gap inside each small board between cells */ --utt-pad: 6px; /* inner padding of each small board */ --utt-grid-gap: 6px; /* gap between the 9 small boards */ --utt-font-scale: 1; /* global mark size scale */ /* color fallbacks (actual values injected inline from PHP) */ --utt-board: #111; /* NOT used for border now (we removed it) */ --utt-cell-border: #9ca3af; --utt-active: #dbeafe; --utt-inactive: rgba(0,0,0,.06); --utt-status: #111; --utt-x: #2563eb; --utt-o: #ef4444; --utt-font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; } @font-face{ font-family:"MDNDSDigital"; src:url("../assets/fonts/DS-DIGI.TTF") format("truetype"); font-display:swap; font-weight:400; } /* ----------------------- Base container & utilities ----------------------- */ .mdn-utt{ font-family: var(--utt-font-family, system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif); max-width: 1240px; margin: 16px auto; padding: 14px; border-radius: 18px; border: 1px solid rgba(148,163,184,.35); background: #f8fafc; box-shadow: 0 8px 24px rgba(15,23,42,.08); overflow-x: hidden; -webkit-tap-highlight-color: transparent; touch-action: manipulation; /* reduce double-tap zoom */ position: relative; } .mdn-utt input, .mdn-utt select, .mdn-utt textarea{ font-size:16px; /* avoid iOS zoom on focus */ } .mdn-utt .mdn-btn{ padding:10px 14px; border-radius:12px; border:1px solid #e5e7eb; background:#f9fafb; font-weight:700; cursor:pointer; } .mdn-utt .is-hidden{ display:none !important; } .mdn-utt-title{ margin: 0 0 10px; font-size: clamp(1.3rem, 2vw, 2rem); line-height: 1.1; font-weight: 800; letter-spacing: .01em; } .mdn-utt-toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; } .mdn-utt-mute{ display:inline-flex; align-items:center; gap:6px; margin-left:auto; font-weight:700; } .mdn-utt-scoreline, .mdn-utt .mdn-utt-status{ border:1px solid rgba(148,163,184,.35); border-radius:12px; padding:10px 12px; margin:8px 0; font-weight:700; } .mdn-utt-scoreline{ background: rgba(255,255,255,.72); } .mdn-utt .mdn-utt-status{ color: var(--utt-status, #111); min-height: 22px; } /* ----------------------------- Grid wrapper ------------------------------- */ .mdn-utt-grid-outer{ width:100%; position:relative; overflow:visible; display:flex; justify-content:center; border-radius:14px; border:1px solid rgba(148,163,184,.35); background:#fff; padding:8px; } .mdn-utt-board-overlay{ position:absolute; inset:0; z-index:6; display:flex; align-items:center; justify-content:center; padding:16px; background: rgba(2,6,12,.42); } .mdn-utt-board-overlay.is-hidden{ display:none; } .mdn-utt-overlay-card{ width:min(100%, 720px); border-radius:20px; border:1px solid rgba(125,211,252,.52); padding:20px; background: linear-gradient(150deg, rgba(43,8,14,.96), rgba(18,6,10,.98)); box-shadow: 0 0 0 1px rgba(22,163,212,.28) inset, 0 0 22px rgba(34,211,238,.38); color:#f8fafc; } .mdn-utt-overlay-card--splash{ width:min(100%, 520px); text-align:center; background: linear-gradient(160deg, rgba(5,18,30,.92), rgba(2,9,18,.96)); } .mdn-utt-overlay-title{ margin:0 0 10px; font-size:clamp(1.2rem,2vw,1.9rem); letter-spacing:.02em; } .mdn-utt-overlay-text{ margin:0 0 14px; font-size:1rem; opacity:.96; } .mdn-utt-overlay-actions{ display:flex; gap:10px; flex-wrap:wrap; } .mdn-utt-overlay-actions .mdn-btn{ border-color:rgba(45,212,191,.62); background:rgba(3,20,28,.7); color:#dff7ff; } .mdn-utt-grid{ display:grid; grid-template-columns:repeat(3,max-content); gap:var(--utt-grid-gap, 6px); /* gap between the 9 small boards */ transform-origin: top center; /* scaled by JS */ margin:0 auto; } /* ------------------------- Small board & cells ---------------------------- */ .mdn-small-board{ width:calc(var(--utt-cell)*3 + var(--utt-gap)*2 + var(--utt-pad)*2); height:calc(var(--utt-cell)*3 + var(--utt-gap)*2 + var(--utt-pad)*2); display:grid; grid-template-columns:repeat(3,1fr); gap:var(--utt-gap); padding:var(--utt-pad); border:0; /* ← requested: no outer border */ background:#fff; position:relative; box-sizing:content-box; } /* Active board highlight (since border is 0, rely on an inset glow) */ .mdn-small-board.active{ box-shadow: inset 0 0 0 3px var(--utt-active, #dbeafe); background:#f8fafc; } /* Dim inactive boards with a soft overlay */ .mdn-small-board.inactive::after{ content:''; position:absolute; inset:0; background: var(--utt-inactive, rgba(0,0,0,.06)); } /* When a small board is won/tied we center the big mark/dash */ .mdn-small-board.won, .mdn-small-board.tied{ display:flex; /* override the grid to center content */ align-items:center; justify-content:center; } /* Single playable cell */ .mdn-cell{ width:var(--utt-cell); height:var(--utt-cell); border:2px solid var(--utt-cell-border, #9ca3af); background:#fff; font-weight:900; font-size:calc(26px*var(--utt-font-scale)); display:flex; align-items:center; justify-content:center; cursor:pointer; font-family: var(--utt-font-family, system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif); } .mdn-cell.blocked{ background:#e5e7eb; border-color:#cbd5e1; cursor:not-allowed; } .mdn-cell:not(.blocked):hover{ box-shadow:0 0 0 3px rgba(37,99,235,.18); } /* X/O mark styling */ .mdn-mark{ font-size:calc(26px*var(--utt-font-scale)); font-weight:900; font-family: var(--utt-font-family, system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif); } .mdn-mark--big{ font-size:calc(70px*var(--utt-font-scale)); } .mdn-mark--x{ color:var(--utt-x,#2563eb); } .mdn-mark--o{ color:var(--utt-o,#ef4444); } /* Fireworks overlay canvas */ .mdn-utt-fireworks{ position:fixed; inset:0; pointer-events:none; z-index:9999; } .mdn-utt-fullscreen-btn{ position:absolute; top:10px; right:10px; z-index:30; border:1px solid rgba(15,23,42,.28); background:rgba(255,255,255,.9); color:#111827; border-radius:10px; min-width:44px; min-height:36px; font-family: var(--utt-font-family, system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif); font-size:1rem; cursor:pointer; } .mdn-utt-fullscreen-btn.hidden{ display:none; } .mdn-utt-page-lock{ overflow:hidden; } .mdn-utt.mdn-utt--mobile-full{ position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; z-index:9996; margin:0; padding:10px; background:#05070b; overflow:auto; } /* ------------------------------ Retro theme ------------------------------- */ .mdn-utt.mdn-utt--theme-8bit .mdn-utt-grid-outer{ background:#000; padding:6px; border-radius:8px; } .mdn-utt.mdn-utt--theme-8bit .mdn-small-board{ background:#000; /* no border; leaving as requested */ } .mdn-utt.mdn-utt--theme-8bit .mdn-small-board.active{ box-shadow: inset 0 0 0 3px rgba(0,255,102,.35); background:#001a0d; } .mdn-utt.mdn-utt--theme-8bit .mdn-cell{ background:#000; border-color:#00ff66; color:#00ff66; } .mdn-utt.mdn-utt--theme-8bit .mdn-mark--x, .mdn-utt.mdn-utt--theme-8bit .mdn-mark--o{ color:#00ff66; text-shadow:0 0 4px rgba(0,255,102,.5); } /* --------------------------- Neon dark theme ------------------------------ */ .mdn-utt.mdn-utt--theme-neon{ background: radial-gradient(circle at 15% -15%, rgba(93,181,255,.24), transparent 45%), radial-gradient(circle at 85% 0%, rgba(54,208,255,.18), transparent 52%), #06080f; border:1px solid rgba(130,203,255,.22); border-radius:14px; padding:10px; } .mdn-utt.mdn-utt--theme-neon .mdn-utt-grid-outer{ background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(0,0,0,0) 45%), linear-gradient(0deg, #080b14, #090f18); border:1px solid rgba(126,210,255,.24); border-radius:12px; padding:6px; } .mdn-utt.mdn-utt--theme-neon .mdn-small-board{ background: linear-gradient(160deg, rgba(85,190,255,.12), rgba(11,15,22,.98) 52%); box-shadow: inset 0 0 18px rgba(68,179,255,.08); } .mdn-utt.mdn-utt--theme-neon .mdn-small-board.active{ box-shadow: inset 0 0 0 3px rgba(122,224,255,.52), inset 0 0 18px rgba(122,224,255,.2), 0 0 14px rgba(96,182,255,.26); background: linear-gradient(160deg, rgba(123,226,255,.18), rgba(12,17,26,.98) 55%); } .mdn-utt.mdn-utt--theme-neon .mdn-small-board.inactive::after{ background: rgba(0, 0, 0, .42); } .mdn-utt.mdn-utt--theme-neon .mdn-cell{ background: linear-gradient(160deg, rgba(138,211,255,.08), rgba(8,10,18,.98)); border-color: rgba(180,231,255,.95); } .mdn-utt.mdn-utt--theme-neon .mdn-cell.blocked{ background: rgba(16,20,30,.85); border-color: rgba(121,147,174,.55); } .mdn-utt.mdn-utt--theme-neon .mdn-cell:not(.blocked):hover{ box-shadow:0 0 0 3px rgba(93,188,255,.3); } .mdn-utt.mdn-utt--theme-neon .mdn-utt-status{ color:#d8efff; } .mdn-utt.mdn-utt--theme-neon .mdn-utt-scoreline, .mdn-utt.mdn-utt--theme-neon .mdn-utt-status{ border-color: rgba(126,210,255,.35); background: rgba(3,10,20,.45); } .mdn-utt.mdn-utt--theme-neon .mdn-utt-board-overlay{ background: rgba(2,7,12,.55); } .mdn-utt.mdn-utt--theme-neon .mdn-utt-overlay-card{ border-color: rgba(34,211,238,.72); background: linear-gradient(150deg, rgba(46,7,12,.96), rgba(20,5,9,.97)); box-shadow: 0 0 0 1px rgba(34,211,238,.38) inset, 0 0 26px rgba(34,211,238,.34); } .mdn-utt.mdn-utt--theme-neon .mdn-utt-overlay-card--splash{ background: linear-gradient(160deg, rgba(4,17,28,.92), rgba(2,9,18,.96)); } .mdn-utt.mdn-utt--theme-neon .mdn-mark--x{ color:#ff6a7a; text-shadow:0 0 6px rgba(255,106,122,.35); } .mdn-utt.mdn-utt--theme-neon .mdn-mark--o{ color:#6cc4ff; text-shadow:0 0 6px rgba(108,196,255,.35); } /* ------------------------------ Breakpoints -------------------------------- Keep the board readable on narrow phones. JS will still scale the grid to fit, these values just reduce the *natural* size as screens get smaller. -----------------------------------------------------------------------------*/ /* Tablets / small laptops */ @media (max-width:1024px){ :root{ --utt-cell: clamp(44px, 8vw, 56px); --utt-font-scale: .95; } } /* Common phones */ @media (max-width:768px){ :root{ --utt-cell: clamp(25px, 5vw, 60px); --utt-font-scale: 1; --utt-grid-gap: 4px; } .mdn-utt .mdn-utt-grid-outer{ padding: 0; } } /* Narrow phones (~420px) */ @media (max-width:420px){ :root{ --utt-cell: clamp(20px, 11.5vw, 40px); --utt-font-scale: .86; } } /* Extra-small phones (≤ 375px) */ @media (max-width:375px){ :root{ --utt-cell: clamp(14px, 12.5vw, 32px); --utt-font-scale: .78; --utt-grid-gap: 2px; --utt-pad: 3px; } .mdn-utt .mdn-utt-grid-outer{ padding: 0 1px; } .mdn-cell{ border-width: 1px; } } /* Ultra-small (≤ 320px) */ @media (max-width:320px){ :root{ --utt-cell: clamp(12px, 12vw, 28px); --utt-font-scale: .72; --utt-grid-gap: 2px; --utt-pad: 2px; } .mdn-utt .mdn-utt-grid-outer{ padding: 0; } }