/* ============================================================================ ChessMemory — MOBILE APP (additive, isolated layer) Everything is namespaced under #m-app and only shows when . Reuses the app's theme CSS variables (cascade from :root), so it follows the user's dark/light + board theme automatically. ============================================================================ */ #m-app { display: none; } html[data-mobile-app] #app, html[data-mobile-app] #app-bg-layer, html[data-mobile-app] #app-spinner, html[data-mobile-app] #cm-sync-badge { display: none !important; } html[data-mobile-app], html[data-mobile-app] body { overflow: hidden; height: 100%; } /* The desktop promotion picker is z-index 99999 — below #m-app (100000). Lift it so promoting a pawn during a mobile review is actually visible. */ html[data-mobile-app] #promo-picker-overlay { z-index: 100050 !important; } /* Same trap for the Pro upgrade / license overlays (.cm-ov is z-index 9500). */ html[data-mobile-app] .cm-ov { z-index: 100060 !important; } html[data-mobile-app] #m-app { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 100000; background: var(--bg, #161512); color: var(--text, #e8e4dc); font-family: var(--font, "Noto Sans", -apple-system, "Segoe UI", Roboto, sans-serif); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; padding-top: env(safe-area-inset-top); } #m-app * { box-sizing: border-box; } #m-app button { font-family: inherit; } /* ── Header ── */ #m-app .m-head { flex: 0 0 auto; display: flex; align-items: center; gap: 11px; padding: 15px 16px 11px; } #m-app .m-head .m-logo { width: 32px; height: 32px; border-radius: 9px; background: var(--accent, #629924); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } #m-app .m-head h1 { font-size: 17px; font-weight: 700; letter-spacing: .2px; } #m-app .m-head .m-sub { font-size: 11px; color: var(--muted, #a8a29a); margin-top: 1px; } #m-app .m-head .m-spacer { flex: 1 1 auto; } #m-app .m-iconbtn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border, #3d3a37); background: var(--surface, #262421); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; } #m-app .m-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--muted, #a8a29a); font-size: 15px; font-weight: 600; cursor: pointer; padding: 4px 4px; } /* ── Scroll body ── */ #m-app .m-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 16px 92px; } #m-app .m-section { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted, #a8a29a); font-weight: 700; margin: 22px 4px 12px; } /* ── Hero (review) card ── */ #m-app .m-hero { background: linear-gradient(145deg, rgba(98,153,36,.20), rgba(38,36,33,.4)); border: 1px solid rgba(98,153,36,.35); border-radius: 16px; padding: 18px 20px; display: flex; align-items: center; gap: 16px; } #m-app .m-hero .m-ring { position: relative; width: 74px; height: 74px; flex: 0 0 auto; } #m-app .m-hero .m-ring svg { transform: rotate(-90deg); } #m-app .m-hero .m-ring .m-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } #m-app .m-hero .m-ring .m-num b { font-size: 23px; font-weight: 800; line-height: 1; } #m-app .m-hero .m-ring .m-num span { font-size: 8px; color: var(--muted); letter-spacing: .5px; margin-top: 2px; } #m-app .m-hero .m-htx { flex: 1 1 auto; min-width: 0; } #m-app .m-hero .m-htx h2 { font-size: 18px; font-weight: 800; margin-bottom: 3px; } #m-app .m-hero .m-htx p { font-size: 13px; color: var(--muted); line-height: 1.4; } /* ── Buttons ── */ #m-app .m-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; border: 1px solid var(--border, #3d3a37); border-radius: 12px; background: var(--surface, #262421); color: var(--text); font-size: 16px; font-weight: 700; padding: 15px; cursor: pointer; transition: transform .06s ease, filter .15s; } #m-app .m-btn:active { transform: scale(.985); } #m-app .m-btn-primary { background: var(--accent, #629924); border-color: var(--accent, #629924); color: #fff; box-shadow: 0 4px 14px rgba(98,153,36,.30); } #m-app .m-btn-row { display: flex; gap: 10px; } #m-app .m-btn-row .m-btn { flex: 1; } #m-app .m-btn[disabled] { opacity: .5; pointer-events: none; } /* ── Stat chips ── */ #m-app .m-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; } #m-app .m-stat { background: var(--surface, #262421); border: 1px solid var(--border, #3d3a37); border-radius: 12px; padding: 12px 6px; text-align: center; } #m-app .m-stat b { display: block; font-size: 18px; font-weight: 800; } #m-app .m-stat span { font-size: 11px; color: var(--muted); } /* ── Opening / list cards ── */ #m-app .m-card { display: flex; align-items: center; gap: 13px; background: var(--surface, #262421); border: 1px solid var(--border, #3d3a37); border-radius: 14px; padding: 14px; margin-bottom: 11px; cursor: pointer; transition: background .12s; } #m-app .m-card:active { background: var(--surface2, #2f2c28); } #m-app .m-dot { width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto; border: 2px solid var(--border, #3d3a37); } #m-app .m-dot.w { background: #eae5da; } #m-app .m-dot.b { background: #4b4844; } #m-app .m-card .m-cbody { flex: 1 1 auto; min-width: 0; } #m-app .m-card .m-cname { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #m-app .m-card .m-csub { font-size: 11px; color: var(--muted); margin-top: 5px; } #m-app .m-bar { height: 5px; border-radius: 3px; background: #3a3733; margin-top: 8px; overflow: hidden; } #m-app .m-bar i { display: block; height: 100%; background: var(--accent, #629924); border-radius: 3px; } #m-app .m-badge { flex: 0 0 auto; min-width: 30px; height: 30px; padding: 0 9px; border-radius: 15px; background: var(--accent, #629924); color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; } #m-app .m-badge.zero { background: #33312d; color: var(--muted); } #m-app .m-empty { text-align: center; color: var(--muted); padding: 60px 20px; line-height: 1.6; font-size: 15px; } #m-app .m-empty .m-big { font-size: 40px; margin-bottom: 12px; } /* ── Review session ── */ #m-app .m-review { flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; } #m-app .m-rev-top { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 12px 16px; } #m-app .m-progress { flex: 1 1 auto; height: 6px; border-radius: 3px; background: #34312d; overflow: hidden; } #m-app .m-progress i { display: block; height: 100%; background: var(--accent, #629924); transition: width .25s; } #m-app .m-rev-board { flex: 0 0 auto; padding: 4px 12px; display: flex; justify-content: center; } #m-app .m-rev-board svg { width: min(94vw, 460px); height: min(94vw, 460px); display: block; border-radius: 4px; } #m-app .m-rev-info { flex: 1 1 auto; overflow-y: auto; padding: 8px 18px; text-align: center; } #m-app .m-turn { font-size: 15px; font-weight: 700; margin-top: 6px; } #m-app .m-turn small { display: block; font-size: 12px; color: var(--muted); font-weight: 500; margin-top: 3px; } #m-app .m-feedback { font-size: 15px; font-weight: 700; min-height: 22px; margin-top: 10px; } #m-app .m-feedback.ok { color: var(--accent-light, #7bb236); } #m-app .m-feedback.no { color: var(--danger, #c33); } /* grade bar */ #m-app .m-grades { flex: 0 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); } #m-app .m-grade { border: none; border-radius: 11px; padding: 12px 4px; cursor: pointer; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 3px; } #m-app .m-grade b { font-size: 15px; font-weight: 700; } #m-app .m-grade span { font-size: 10px; opacity: .85; font-weight: 600; } #m-app .m-grade.g0 { background: #a13a34; } #m-app .m-grade.g1 { background: #b0762e; } #m-app .m-grade.g2 { background: #4e7d2e; } #m-app .m-grade.g3 { background: #2f8f6a; } #m-app .m-grade:active { filter: brightness(1.12); } #m-app .m-rev-quit { position: absolute; top: 12px; right: 14px; z-index: 3; } /* summary */ #m-app .m-summary { text-align: center; padding: 50px 24px; } #m-app .m-summary .m-big { font-size: 48px; margin-bottom: 14px; } #m-app .m-summary h2 { font-size: 22px; font-weight: 800; margin-bottom: 8px; } #m-app .m-summary p { color: var(--muted); font-size: 15px; margin-bottom: 26px; } /* ── lines list ── */ #m-app .m-line { display: flex; align-items: center; gap: 12px; background: var(--surface, #262421); border: 1px solid var(--border, #3d3a37); border-radius: 12px; padding: 12px 14px; margin-bottom: 9px; cursor: pointer; } #m-app .m-line:active { background: var(--surface2, #2f2c28); } #m-app .m-line.paused { opacity: .55; } #m-app .m-lbody { flex: 1 1 auto; min-width: 0; } #m-app .m-lmoves { font-size: 14px; font-weight: 600; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #m-app .m-lsub { font-size: 11px; color: var(--muted, #a8a29a); margin-top: 4px; } #m-app .m-prio { display: inline-block; padding: 1px 7px; border-radius: 9px; font-size: 10px; font-weight: 700; margin-left: 4px; } #m-app .m-prio.crit { background: rgba(200,60,50,.18); color: #e08a80; } #m-app .m-prio.side { background: rgba(120,120,120,.18); color: var(--muted); } /* ── line viewer ── */ #m-app .m-viewnav { flex: 0 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 8px 14px; } #m-app .m-vbtn { border: 1px solid var(--border, #3d3a37); border-radius: 10px; background: var(--surface, #262421); color: var(--text); font-size: 17px; padding: 11px 0; cursor: pointer; } #m-app .m-vbtn:disabled { opacity: .35; } #m-app .m-vbtn small { display: block; font-size: 9px; font-weight: 600; color: var(--muted, #a8a29a); margin-top: 2px; letter-spacing: .2px; line-height: 1; } #m-app .m-symrow { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 4px; } #m-app .m-symrow .m-btn { flex: 1 0 40px; padding: 10px 4px; font-size: 16px; margin: 0; } #m-app .m-vbtn:active:not(:disabled) { background: var(--surface2, #2f2c28); } #m-app .m-mvlist { line-height: 2.1; } #m-app .m-mvnum { color: var(--muted, #a8a29a); font-size: 13px; margin: 0 3px 0 6px; } #m-app .m-mv { border: none; background: none; color: var(--text); font-family: inherit; font-size: 15px; font-weight: 600; padding: 3px 7px; border-radius: 7px; cursor: pointer; } #m-app .m-mv.cur { background: var(--accent, #629924); color: #fff; } #m-app .m-comment { background: var(--surface, #262421); border-left: 3px solid var(--accent, #629924); border-radius: 0 8px 8px 0; padding: 10px 12px; margin: 10px 0; font-size: 13px; line-height: 1.5; color: var(--text); display: none; } /* ── tree browser ── */ #m-app .m-crumb { font-size: 13px; font-weight: 600; color: var(--muted, #a8a29a); padding: 8px 2px 2px; line-height: 1.5; } #m-app .m-kmove { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 1px solid var(--border, #3d3a37); border-radius: 11px; background: var(--surface, #262421); color: var(--text); font-family: inherit; font-size: 16px; padding: 13px 15px; margin-bottom: 8px; cursor: pointer; } #m-app .m-kmove.main { border-color: var(--accent, #629924); } #m-app .m-kmove:active { background: var(--surface2, #2f2c28); } #m-app .m-kcount { font-size: 11px; color: var(--muted, #a8a29a); font-weight: 600; } /* ── settings extras ── */ #m-app .m-stepper { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; } #m-app .m-stepbtn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border, #3d3a37); background: var(--surface2, #2f2c28); color: var(--text); font-size: 19px; cursor: pointer; } #m-app .m-stepval { min-width: 44px; text-align: center; font-size: 16px; font-weight: 700; } #m-app .m-select { flex: 0 0 auto; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border, #3d3a37); background: var(--surface2, #2f2c28); color: var(--text); font-family: inherit; font-size: 14px; } #m-app .m-themegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px; } #m-app .m-swatch { display: flex; height: 44px; border-radius: 10px; overflow: hidden; border: 2px solid var(--border, #3d3a37); padding: 0; cursor: pointer; } #m-app .m-swatch span { flex: 1; } #m-app .m-swatch.sel { border-color: var(--accent, #629924); box-shadow: 0 0 0 2px rgba(98,153,36,.4); } /* ── folder manage button (inside section headers) ── */ #m-app .m-fbtn { border: none; background: none; font-size: 13px; cursor: pointer; padding: 2px 6px; opacity: .8; } /* ── per-line ⋯ button ── */ #m-app .m-dots { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border, #3d3a37); background: none; color: var(--muted, #a8a29a); font-size: 17px; cursor: pointer; } /* ── study room (mobile) ── */ #m-app .m-docarea { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 12px 12px; } #m-app .m-epub { background: var(--surface, #262421); border: 1px solid var(--border, #3d3a37); border-radius: 10px; padding: 16px 15px; font-size: 16px; line-height: 1.65; color: var(--text, #e8e4dc); } #m-app .m-epub h1, #m-app .m-epub h2, #m-app .m-epub h3 { margin: 14px 0 8px; line-height: 1.3; } #m-app .m-epub p { margin: 0 0 10px; } #m-app .m-epub a { color: var(--info, #7aa6d8); } /* ── engine analysis panel ── */ #m-app .m-engine { margin-top: 10px; } #m-app .m-engline { display: flex; align-items: baseline; gap: 10px; background: var(--surface, #262421); border: 1px solid var(--border, #3d3a37); border-radius: 10px; padding: 10px 12px; margin-bottom: 7px; } #m-app .m-engline b { flex: 0 0 auto; font-size: 15px; color: var(--accent-light, #7bb236); } #m-app .m-engline.dim b { color: var(--muted, #a8a29a); } #m-app .m-engline span { font-size: 13px; line-height: 1.5; color: var(--text, #e8e4dc); word-break: break-word; } /* ── builder: bottom sheet ── */ #m-app .m-sheet-ov { position: absolute; inset: 0; z-index: 40; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; } #m-app .m-sheet { width: 100%; background: var(--surface, #262421); border-top: 1px solid var(--border, #3d3a37); border-radius: 18px 18px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); max-height: 78%; overflow-y: auto; } #m-app .m-sheet-title { font-size: 16px; font-weight: 800; margin-bottom: 14px; } /* ── builder: database rows ── */ #m-app .m-dbtoggle { border: 1px solid var(--border, #3d3a37); background: var(--surface, #262421); color: var(--muted, #a8a29a); font-family: inherit; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 12px; cursor: pointer; margin-left: 4px; text-transform: none; letter-spacing: 0; } #m-app .m-dbtoggle.on { background: var(--accent, #629924); border-color: var(--accent, #629924); color: #fff; } #m-app .m-dbrow { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--border, #3d3a37); border-radius: 10px; margin-bottom: 7px; cursor: pointer; background: var(--surface, #262421); } #m-app .m-dbrow:active { background: var(--surface2, #2f2c28); } #m-app .m-dbsan { flex: 0 0 52px; font-size: 15px; } #m-app .m-dbn { flex: 0 0 auto; font-size: 11px; color: var(--muted, #a8a29a); min-width: 52px; } #m-app .m-dbbar { flex: 1 1 auto; display: flex; height: 14px; border-radius: 7px; overflow: hidden; border: 1px solid var(--border-light, #4a4744); } #m-app .m-dbbar i.w { background: #e8e4dc; } #m-app .m-dbbar i.d { background: #8a857b; } #m-app .m-dbbar i.b { background: #2c2a27; } /* ── grade distribution bar ── */ #m-app .m-gdist { display: flex; height: 20px; border-radius: 10px; overflow: hidden; gap: 2px; } #m-app .m-gseg { height: 100%; } #m-app .m-gdist-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted, #a8a29a); margin-top: 6px; } /* ── stats chart ── */ #m-app .m-chart { display: flex; align-items: flex-end; gap: 4px; height: 90px; padding: 6px 2px 0; } #m-app .m-chartcol { flex: 1; height: 100%; display: flex; align-items: flex-end; } #m-app .m-chartbar { width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--accent, #629924); } /* sign-in */ #m-app .m-input { display: block; width: 100%; margin-bottom: 10px; padding: 13px 14px; border-radius: 11px; border: 1px solid var(--border, #3d3a37); background: var(--surface, #262421); color: var(--text, #e8e4dc); font-family: inherit; font-size: 16px; /* 16px stops iOS auto-zoom on focus */ } #m-app .m-input:focus { outline: none; border-color: var(--accent, #629924); } #m-app .m-autherr { min-height: 20px; font-size: 13px; color: var(--danger, #e57373); margin: 2px 2px 10px; line-height: 1.4; } #m-app .m-autherr.ok { color: var(--accent-light, #7bb236); } #m-app .m-linkbtn { display: block; width: 100%; margin-top: 12px; padding: 8px; background: none; border: none; color: var(--info, #7aa6d8); font-size: 13px; text-decoration: underline; cursor: pointer; } /* review line label */ #m-app .m-linelabel { font-size: 12px; color: var(--muted, #a8a29a); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* settings rows */ #m-app .m-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface, #262421); border: 1px solid var(--border, #3d3a37); border-radius: 12px; padding: 15px; margin-bottom: 10px; } #m-app .m-row .m-rlabel { font-size: 15px; font-weight: 600; } #m-app .m-row .m-rsub { font-size: 12px; color: var(--muted); margin-top: 3px; } #m-app .m-toggle { width: 48px; height: 28px; border-radius: 14px; background: #45423d; border: none; position: relative; cursor: pointer; flex: 0 0 auto; transition: background .18s; } #m-app .m-toggle.on { background: var(--accent, #629924); } #m-app .m-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: left .18s; } #m-app .m-toggle.on::after { left: 23px; } /* ── Bottom nav ── */ #m-app .m-nav { flex: 0 0 auto; display: flex; background: var(--surface, #262421); border-top: 1px solid var(--border, #3d3a37); padding: 7px 6px calc(7px + env(safe-area-inset-bottom)); } #m-app .m-tab { flex: 1; background: none; border: none; color: var(--muted, #a8a29a); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; cursor: pointer; font-size: 11px; font-weight: 600; } #m-app .m-tab svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #m-app .m-tab.active { color: var(--accent-light, #7bb236); } /* ── Toast ── */ #m-app .m-toast { position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%) translateY(12px); background: rgba(20,20,18,.97); border: 1px solid var(--border, #3d3a37); color: #fff; padding: 11px 18px; border-radius: 10px; font-size: 14px; font-weight: 600; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; z-index: 50; max-width: 86vw; text-align: center; } #m-app .m-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* loading */ #m-app .m-loading { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: var(--muted); } #m-app .m-spin { width: 34px; height: 34px; border: 3px solid #3a3733; border-top-color: var(--accent, #629924); border-radius: 50%; animation: m-spin 0.8s linear infinite; } @keyframes m-spin { to { transform: rotate(360deg); } }