/* ============================================================================ Dama Pa More — shared mockup stylesheet ("Damahan sa gabi") Link this ONE file from every screen mockup: Dark theme is primary. Light theme via . Fonts are a robust offline stack — no webfont needed. ========================================================================== */ /* ------------------------------------------------------------------ TOKENS */ :root{ color-scheme: dark; /* Night — background depths */ --night-950:#0E1120; /* deepest, page base */ --night-900:#12162A; /* app background */ --night-800:#161C34; /* subtle raised background */ /* Raised surfaces (indigo) */ --surface:#1C2340; /* cards, sheets */ --surface-2:#232B4E; /* nested / hovered surface */ --surface-3:#2C355F; /* highest elevation, popovers */ /* Hardwood board */ --wood-dark:#4A2F1E; /* kamagong — dark (playable) sq */ --wood-dark-2:#5A3A25; /* kamagong highlight */ --wood-light:#D8B27C; /* narra tan — light square */ --wood-light-2:#C99A5B;/* narra shadow */ --wood-frame:#2E1D12; /* board bezel */ /* Accents */ --brass:#E3A730; /* primary accent, ranked gold */ --brass-bright:#F4C049;/* crown highlight, focus */ --brass-deep:#B8841F; /* brass shadow / pressed */ --jade:#28C2A0; /* your-turn, online, positive */ --jade-deep:#1E9C81; --coral:#F26B4E; /* opponent, alert */ --coral-deep:#D2492F; --cream:#F5ECD6; /* my pieces, light text */ /* Text roles */ --text:#F5ECD6; --text-strong:#FFF8EA; --text-muted:rgba(245,236,214,.66); --text-faint:rgba(245,236,214,.40); --on-brass:#2A1B06; /* text on brass fills */ --on-jade:#04231C; --on-coral:#3A0E05; --on-cream:#2A1B06; /* Status */ --win:#28C2A0; --lose:#F26B4E; --warn:#F4C049; --info:#7FA8FF; /* Lines & separators */ --hairline:rgba(244,192,73,.16); /* brass hairline motif */ --line:rgba(245,236,214,.10); --line-strong:rgba(245,236,214,.18); /* Radius */ --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px; /* Spacing scale (4pt) */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; /* Elevation */ --shadow-sm:0 1px 2px rgba(0,0,0,.40); --shadow-md:0 6px 18px rgba(0,0,0,.45); --shadow-lg:0 18px 48px rgba(0,0,0,.55); --shadow-brass:0 6px 20px rgba(227,167,48,.35); --shadow-jade:0 6px 20px rgba(40,194,160,.35); --shadow-coral:0 6px 20px rgba(242,107,78,.30); --edge-top:inset 0 1px 0 rgba(255,255,255,.08); /* top bevel highlight */ /* Type — rounded-geometric display, robust offline stack */ --font-display:"SF Pro Rounded","Nunito","Inter",system-ui,-apple-system,"Segoe UI Rounded","Segoe UI",Roboto,sans-serif; --font-text:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --font-num:"SF Pro Rounded","Inter",system-ui,sans-serif; /* pair w/ .tnum */ /* Type scale */ --fs-display:34px; --lh-display:1.05; --fs-h1:26px; --lh-h1:1.12; --fs-h2:20px; --lh-h2:1.18; --fs-h3:17px; --lh-h3:1.25; --fs-body:15px; --lh-body:1.45; --fs-sm:13px; --lh-sm:1.4; --fs-xs:11px; --lh-xs:1.35; /* Motion */ --ease:cubic-bezier(.2,.7,.25,1); --ease-out:cubic-bezier(.16,1,.3,1); --dur-fast:120ms; --dur:200ms; --dur-slow:340ms; /* Banig weave texture (very low opacity accent) */ --banig: repeating-linear-gradient( 45deg, rgba(245,236,214,.030) 0 2px, transparent 2px 8px), repeating-linear-gradient(-45deg, rgba(244,192,73,.022) 0 2px, transparent 2px 8px); } /* Light theme (supported, not primary) */ :root[data-theme="light"]{ color-scheme: light; --night-950:#EDE6D4; --night-900:#F3ECDC; --night-800:#E9E0CC; --surface:#FFFFFF; --surface-2:#F6EFDE; --surface-3:#FBF5E7; --text:#2A2233; --text-strong:#171021; --text-muted:rgba(42,34,51,.66); --text-faint:rgba(42,34,51,.42); --cream:#F5ECD6; --hairline:rgba(184,132,31,.28); --line:rgba(42,34,51,.10); --line-strong:rgba(42,34,51,.16); --shadow-sm:0 1px 2px rgba(80,60,20,.14); --shadow-md:0 6px 18px rgba(80,60,20,.16); --shadow-lg:0 18px 48px rgba(80,60,20,.20); --edge-top:inset 0 1px 0 rgba(255,255,255,.6); } /* ------------------------------------------------------------------- RESET */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;text-size-adjust:100%} body{ font-family:var(--font-text); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--text); background:var(--night-950); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,svg{display:block;max-width:100%} button,input,select,textarea{font:inherit;color:inherit;background:none;border:none} button{cursor:pointer} a{color:inherit;text-decoration:none} ul,ol{list-style:none} h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;letter-spacing:-.01em;color:var(--text-strong)} :focus-visible{outline:2px solid var(--brass-bright);outline-offset:2px;border-radius:var(--r-xs)} ::selection{background:rgba(244,192,73,.28)} /* --------------------------------------------------------------- TYPOGRAPHY */ .display{font-family:var(--font-display);font-size:var(--fs-display);line-height:var(--lh-display);font-weight:800;letter-spacing:-.02em} .h1{font-size:var(--fs-h1);line-height:var(--lh-h1)} .h2{font-size:var(--fs-h2);line-height:var(--lh-h2)} .h3{font-size:var(--fs-h3);line-height:var(--lh-h3)} .body{font-size:var(--fs-body);line-height:var(--lh-body)} .sm{font-size:var(--fs-sm);line-height:var(--lh-sm)} .xs{font-size:var(--fs-xs);line-height:var(--lh-xs)} .muted{color:var(--text-muted)} .faint{color:var(--text-faint)} .strong{color:var(--text-strong)} .brass-text{color:var(--brass-bright)} .jade-text{color:var(--jade)} .coral-text{color:var(--coral)} .uppercase{text-transform:uppercase;letter-spacing:.10em;font-weight:700} .center{text-align:center} /* tabular numerals for stats, timers, ratings, scores */ .tnum{font-family:var(--font-num);font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1;letter-spacing:0} /* --------------------------------------------------------------- UTILITIES */ .row{display:flex;align-items:center} .col{display:flex;flex-direction:column} .between{justify-content:space-between} .center-x{justify-content:center} .wrap{flex-wrap:wrap} .gap-1{gap:var(--s-1)}.gap-2{gap:var(--s-2)}.gap-3{gap:var(--s-3)}.gap-4{gap:var(--s-4)}.gap-6{gap:var(--s-6)} .grow{flex:1 1 auto} .mt-2{margin-top:var(--s-2)}.mt-3{margin-top:var(--s-3)}.mt-4{margin-top:var(--s-4)}.mt-6{margin-top:var(--s-6)} .p-4{padding:var(--s-4)}.p-6{padding:var(--s-6)} .hairline-rule{height:1px;background:var(--hairline);border:0} .divider{height:1px;background:var(--line);border:0} .banig{background-image:var(--banig)} .pill{border-radius:var(--r-pill)} /* --------------------------------------------------------------- APP FRAME */ /* Phone device frame — 390×844 (iPhone 13/14) */ .phone{ position:relative; width:390px;height:844px;margin:0 auto; background: radial-gradient(120% 80% at 50% -10%, rgba(40,49,90,.55), transparent 60%), linear-gradient(180deg,var(--night-900),var(--night-950)); border-radius:44px; box-shadow:var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.04); overflow:hidden; display:flex;flex-direction:column; } .phone::after{ /* faint banig weave over the whole shell */ content:"";position:absolute;inset:0;pointer-events:none; background-image:var(--banig);opacity:.6;mix-blend-mode:overlay; } .phone__notch{ position:absolute;top:10px;left:50%;transform:translateX(-50%); width:132px;height:30px;background:#000;border-radius:var(--r-pill);z-index:40; } .screen{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden} .screen__body{flex:1;overflow-y:auto;padding:var(--s-4) var(--s-4) var(--s-6);display:flex;flex-direction:column;gap:var(--s-4)} /* Keep content at natural height so a long screen SCROLLS instead of compressing (flex children default to flex-shrink:1; nodes with overflow:hidden can collapse to 0). */ .screen__body > *{flex-shrink:0} .screen__body::-webkit-scrollbar{width:0} /* App bar */ .appbar{ position:relative;z-index:20; display:flex;align-items:center;gap:var(--s-3); padding:calc(env(safe-area-inset-top,0px) + 46px) var(--s-4) var(--s-3); background:linear-gradient(180deg,rgba(28,35,64,.9),rgba(28,35,64,0)); border-bottom:1px solid var(--hairline); } .appbar__title{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:800;color:var(--text-strong);flex:1} .appbar__sub{font-size:var(--fs-xs);color:var(--text-muted);margin-top:1px} .iconbtn{ width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r-md); background:var(--surface-2);box-shadow:var(--edge-top);color:var(--text); font-size:18px;transition:background var(--dur) var(--ease); } .iconbtn:hover{background:var(--surface-3)} /* Tab bar */ .tabbar{ position:relative;z-index:20;display:flex;justify-content:space-around; padding:var(--s-2) var(--s-3) calc(env(safe-area-inset-bottom,0px) + var(--s-3)); background:linear-gradient(0deg,var(--night-950),rgba(14,17,32,.86)); border-top:1px solid var(--hairline); } .tab{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--text-faint); font-size:10px;font-weight:700;letter-spacing:.02em;padding:4px 10px;border-radius:var(--r-md); transition:color var(--dur) var(--ease)} .tab__ico{font-size:20px;line-height:1} .tab.is-active{color:var(--brass-bright)} .tab.is-active .tab__ico{filter:drop-shadow(0 2px 8px rgba(244,192,73,.4))} /* ------------------------------------------------------------------- CARDS */ .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-md),var(--edge-top); padding:var(--s-4); } .card--flush{padding:0;overflow:hidden} .card--brass{border-color:var(--hairline); background:linear-gradient(180deg,rgba(227,167,48,.10),var(--surface))} .card__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-3)} .card__title{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:800;color:var(--text-strong)} .card__hint{font-size:var(--fs-xs);color:var(--text-muted)} /* ----------------------------------------------------------------- BUTTONS */ .btn{ --_bg:var(--surface-2);--_fg:var(--text);--_sh:var(--shadow-sm); display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2); height:48px;padding:0 var(--s-5);border-radius:var(--r-md); font-family:var(--font-display);font-size:15px;font-weight:800;letter-spacing:.01em; color:var(--_fg);background:var(--_bg);box-shadow:var(--_sh),var(--edge-top); transition:transform var(--dur-fast) var(--ease),filter var(--dur) var(--ease),background var(--dur) var(--ease); } .btn:active{transform:translateY(1px) scale(.99)} .btn:hover{filter:brightness(1.06)} .btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none;filter:grayscale(.3)} .btn--block{display:flex;width:100%} .btn--lg{height:56px;font-size:17px;padding:0 var(--s-6)} .btn--sm{height:38px;font-size:13px;padding:0 var(--s-4);border-radius:var(--r-sm)} .btn-brass{--_fg:var(--on-brass);--_sh:var(--shadow-brass); background:linear-gradient(180deg,var(--brass-bright),var(--brass) 55%,var(--brass-deep));} .btn-jade{--_fg:var(--on-jade);--_sh:var(--shadow-jade); background:linear-gradient(180deg,#3ADFBB,var(--jade) 55%,var(--jade-deep));} .btn-coral{--_fg:var(--on-coral);--_sh:var(--shadow-coral); background:linear-gradient(180deg,#FF8468,var(--coral) 55%,var(--coral-deep));} .btn-ghost{--_bg:transparent;--_sh:none;border:1px solid var(--line-strong);color:var(--text)} .btn-ghost:hover{background:var(--surface-2);filter:none} .btn__ico{font-size:18px;line-height:1} /* Icon-only round action */ .fab{width:56px;height:56px;border-radius:var(--r-pill);display:grid;place-items:center;font-size:22px; color:var(--on-brass);background:linear-gradient(180deg,var(--brass-bright),var(--brass-deep)); box-shadow:var(--shadow-brass),var(--edge-top)} /* -------------------------------------------------------------- CHIP / BADGE */ .chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--r-pill); font-size:12px;font-weight:700;background:var(--surface-2);color:var(--text-muted);border:1px solid var(--line)} .chip--brass{background:rgba(227,167,48,.14);color:var(--brass-bright);border-color:var(--hairline)} .chip--jade{background:rgba(40,194,160,.15);color:var(--jade);border-color:rgba(40,194,160,.30)} .chip--coral{background:rgba(242,107,78,.15);color:var(--coral);border-color:rgba(242,107,78,.30)} .chip__dot{width:8px;height:8px;border-radius:50%;background:currentColor} .chip__dot--live{box-shadow:0 0 0 0 rgba(40,194,160,.6);animation:pulse 1.8s var(--ease) infinite} .badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px; border-radius:var(--r-pill);font-size:11px;font-weight:800;color:var(--on-coral); background:var(--coral);box-shadow:var(--shadow-sm)} .badge--brass{background:var(--brass);color:var(--on-brass)} .badge--new{background:var(--jade);color:var(--on-jade)} /* --------------------------------------------------------- SEGMENTED (variant) */ /* Used for the DAMA / CHECKERS / INTERNATIONAL variant selector */ .segmented{display:flex;gap:4px;padding:4px;background:var(--night-950); border:1px solid var(--line);border-radius:var(--r-md)} .segmented__item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px; padding:8px 6px;border-radius:var(--r-sm);color:var(--text-muted);font-size:12px;font-weight:700; transition:all var(--dur) var(--ease)} .segmented__item small{font-size:10px;font-weight:600;color:var(--text-faint)} .segmented__item.is-active{background:linear-gradient(180deg,var(--brass-bright),var(--brass-deep)); color:var(--on-brass);box-shadow:var(--shadow-brass)} .segmented__item.is-active small{color:rgba(42,27,6,.7)} /* ------------------------------------------------------------- STAT TILES */ .stat-tile{display:flex;flex-direction:column;gap:2px;padding:var(--s-3);border-radius:var(--r-md); background:var(--surface-2);border:1px solid var(--line);min-width:0} .stat-tile__val{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:24px;font-weight:800; color:var(--text-strong);line-height:1} .stat-tile__label{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)} .stat-tile--brass .stat-tile__val{color:var(--brass-bright)} .stat-tile--jade .stat-tile__val{color:var(--jade)} .stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2)} /* -------------------------------------------------------------- RANK TIER */ .rank-tier{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:var(--r-pill); font-weight:800;font-size:13px;background:var(--surface-2);border:1px solid var(--line)} .rank-tier__emblem{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:14px; background:conic-gradient(from 200deg,var(--brass-deep),var(--brass-bright),var(--brass-deep)); color:var(--on-brass);box-shadow:var(--edge-top)} /* tier color coding */ .tier-wood {--tier:#9A6B3F} .tier-bronze{--tier:#C77B3A} .tier-silver{--tier:#C9CBD6} .tier-gold {--tier:#F4C049} .tier-jade {--tier:#28C2A0} .tier-master{--tier:#B98CFF} .rank-tier[class*="tier-"]{color:var(--tier)} .rank-tier[class*="tier-"] .rank-tier__emblem{ background:radial-gradient(circle at 35% 30%,#fff6,transparent 45%), conic-gradient(from 200deg,color-mix(in srgb,var(--tier) 55%,#000),var(--tier),color-mix(in srgb,var(--tier) 55%,#000))} /* ---------------------------------------------------------------- AVATAR */ .avatar{position:relative;width:44px;height:44px;border-radius:50%;flex:none; display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:16px; color:var(--on-brass);background:linear-gradient(135deg,var(--brass-bright),var(--brass-deep)); box-shadow:var(--edge-top)} .avatar--sm{width:32px;height:32px;font-size:13px} .avatar--lg{width:64px;height:64px;font-size:22px} .avatar--opp{background:linear-gradient(135deg,#FF8468,var(--coral-deep));color:var(--on-coral)} .avatar__ring{box-shadow:0 0 0 2px var(--night-900),0 0 0 4px var(--brass)} .avatar__status{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%; background:var(--jade);border:2px solid var(--night-900)} .avatar__status--off{background:var(--text-faint)} /* --------------------------------------------------------------- LIST ROW */ .list-row{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4); background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)} .list-row + .list-row{margin-top:8px} .list-row__main{flex:1;min-width:0} .list-row__title{font-weight:700;color:var(--text-strong);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .list-row__sub{font-size:12px;color:var(--text-muted)} .list-row__meta{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-weight:800;color:var(--text)} .list-row--tappable{transition:background var(--dur) var(--ease)} .list-row--tappable:hover{background:var(--surface-2)} /* ------------------------------------------------------------ LEADERBOARD */ .lb{display:flex;flex-direction:column;gap:6px} .lb__row{display:grid;grid-template-columns:34px 44px 1fr auto;align-items:center;gap:var(--s-3); padding:10px var(--s-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)} .lb__rank{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-weight:800;font-size:16px; color:var(--text-muted);text-align:center} .lb__row--1 .lb__rank,.lb__row--2 .lb__rank,.lb__row--3 .lb__rank{color:var(--brass-bright)} .lb__row--1{background:linear-gradient(90deg,rgba(244,192,73,.14),var(--surface));border-color:var(--hairline)} .lb__name{font-weight:700;color:var(--text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lb__elo{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-weight:800;color:var(--brass-bright)} .lb__row--me{outline:1.5px solid var(--jade);background:linear-gradient(90deg,rgba(40,194,160,.12),var(--surface))} /* ----------------------------------------------------------- PROGRESS/METER */ .progress{height:8px;border-radius:var(--r-pill);background:var(--night-950);overflow:hidden;border:1px solid var(--line)} .progress__fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--brass),var(--brass-bright))} .progress--jade .progress__fill{background:linear-gradient(90deg,var(--jade-deep),var(--jade))} .meter{display:flex;align-items:center;gap:var(--s-3)} .meter__label{font-size:12px;font-weight:700;color:var(--text-muted);min-width:0} .meter__val{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-weight:800;font-size:12px;color:var(--text)} /* turn timer ring wrapper (put an SVG or conic bg inside) */ .timer-ring{position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center; font-family:var(--font-num);font-variant-numeric:tabular-nums;font-weight:800;font-size:14px;color:var(--text-strong); background:conic-gradient(var(--jade) var(--turn,70%),rgba(245,236,214,.10) 0)} .timer-ring::before{content:"";position:absolute;width:36px;height:36px;border-radius:50%;background:var(--surface)} .timer-ring>span{position:relative;z-index:1} .timer-ring.is-low{background:conic-gradient(var(--coral) var(--turn,20%),rgba(245,236,214,.10) 0)} /* ================================================================= BOARD == The damahan. Default 8×8 (Dama / Checkers). Add .board--10 for 10×10 (International Draughts). Squares use CSS grid; discs sit ON dark squares. ========================================================================= */ .board{ --n:8; position:relative; width:100%;max-width:360px;aspect-ratio:1/1;margin-inline:auto; display:grid; grid-template-columns:repeat(var(--n),1fr); grid-template-rows:repeat(var(--n),1fr); padding:10px; /* bezel reveal */ background: linear-gradient(180deg,var(--wood-frame),#241610); border-radius:18px; box-shadow: var(--shadow-lg), inset 0 0 0 2px rgba(244,192,73,.22), /* brass hairline inner frame */ inset 0 0 0 10px var(--wood-frame); } .board--10{--n:10;max-width:400px} .board__grid{position:absolute;inset:10px;display:grid; grid-template-columns:repeat(var(--n),1fr);grid-template-rows:repeat(var(--n),1fr); border-radius:8px;overflow:hidden} /* Squares */ .sq{position:relative;display:grid;place-items:center} .sq.light{background: linear-gradient(135deg,var(--wood-light) 0%,var(--wood-light-2) 100%)} .sq.dark{background: radial-gradient(120% 120% at 30% 20%,var(--wood-dark-2),var(--wood-dark) 70%)} .sq.dark::after{ /* faint wood grain / banig on playable squares */ content:"";position:absolute;inset:0;opacity:.5;pointer-events:none; background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 1px,transparent 1px 5px)} /* Coordinate labels (optional) */ .board__coords{position:absolute;inset:10px;pointer-events:none;font-size:9px;color:rgba(245,236,214,.4);font-weight:700} /* Square state helpers ----------------------------------------------------- */ .sq.is-last{box-shadow:inset 0 0 0 3px rgba(244,192,73,.55)} /* last move from/to */ .sq.is-selected{box-shadow:inset 0 0 0 3px var(--jade)} .sq.is-capture::before{ /* capture target ring */ content:"";position:absolute;inset:12%;border-radius:50%; box-shadow:inset 0 0 0 3px var(--coral);opacity:.9} .sq.is-dest::before{ /* legal destination dot */ content:"";width:26%;height:26%;border-radius:50%; background:var(--jade);box-shadow:0 0 10px rgba(40,194,160,.7);opacity:.85} .sq.is-hint{box-shadow:inset 0 0 0 3px var(--brass-bright);animation:hintPulse 1.4s var(--ease) infinite} /* ------------------------------------------------------------------- DISCS */ .disc{ position:relative;width:74%;aspect-ratio:1/1;border-radius:50%; box-shadow: 0 4px 8px rgba(0,0,0,.5), /* drop */ inset 0 3px 4px rgba(255,255,255,.35), /* top bevel */ inset 0 -5px 8px rgba(0,0,0,.35); /* bottom curve */ } .disc::after{ /* engraved center ring (traditional piece stack rings) */ content:"";position:absolute;inset:20%;border-radius:50%; box-shadow:inset 0 0 0 2px rgba(0,0,0,.14)} .disc.mine{ background:radial-gradient(circle at 38% 30%,#FFFDF4 0%,var(--cream) 42%,#E4D6B4 100%); } .disc.opp{ background:radial-gradient(circle at 38% 30%,#FF9C82 0%,var(--coral) 45%,var(--coral-deep) 100%); } .disc.opp::after{box-shadow:inset 0 0 0 2px rgba(58,14,5,.25)} /* Flying king — brass crown ring + center pip */ .disc.king{ box-shadow: 0 4px 10px rgba(0,0,0,.55), 0 0 0 3px var(--brass), /* brass crown ring */ 0 0 14px rgba(244,192,73,.45), /* brass glow = dama */ inset 0 3px 4px rgba(255,255,255,.35), inset 0 -5px 8px rgba(0,0,0,.35); } .disc.king::before{ /* crown pip */ content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:34%;height:34%;border-radius:50%; background:radial-gradient(circle at 35% 30%,var(--brass-bright),var(--brass-deep)); box-shadow:0 1px 2px rgba(0,0,0,.5),inset 0 1px 1px rgba(255,255,255,.5);z-index:2} .disc.king::after{ /* inner brass ring instead of dark engrave */ box-shadow:inset 0 0 0 2px rgba(244,192,73,.55)} .disc.is-lifted{transform:translateY(-6%) scale(1.04);filter:brightness(1.05);z-index:5} /* Disc used inline outside the board (legends, captured trays) */ .disc-mini{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 2px 2px rgba(255,255,255,.4),0 1px 2px rgba(0,0,0,.4)} .disc-mini.mine{background:radial-gradient(circle at 38% 30%,#FFFDF4,var(--cream) 60%,#E4D6B4)} .disc-mini.opp{background:radial-gradient(circle at 38% 30%,#FF9C82,var(--coral) 60%,var(--coral-deep))} .disc-mini.king{box-shadow:0 0 0 2px var(--brass),inset 0 2px 2px rgba(255,255,255,.4)} /* Captured tray */ .tray{display:flex;align-items:center;gap:4px;flex-wrap:wrap} /* Turn banner (jade = your turn) */ .turn-banner{display:flex;align-items:center;gap:var(--s-2);padding:8px 14px;border-radius:var(--r-pill); font-weight:800;font-size:13px} .turn-banner--you{background:rgba(40,194,160,.16);color:var(--jade);border:1px solid rgba(40,194,160,.35)} .turn-banner--opp{background:rgba(242,107,78,.14);color:var(--coral);border:1px solid rgba(242,107,78,.30)} /* ============================================================= SHEET/MODAL */ .scrim{position:absolute;inset:0;z-index:50;background:rgba(9,11,22,.66); backdrop-filter:blur(3px);display:flex;align-items:flex-end;justify-content:center} .scrim--center{align-items:center;padding:var(--s-5)} .sheet{width:100%;background:var(--surface);border-top-left-radius:var(--r-xl);border-top-right-radius:var(--r-xl); border:1px solid var(--line);box-shadow:var(--shadow-lg);padding:var(--s-5) var(--s-4) var(--s-6)} .sheet__grip{width:44px;height:5px;border-radius:var(--r-pill);background:var(--line-strong);margin:0 auto var(--s-4)} .modal{width:100%;max-width:340px;background:var(--surface);border:1px solid var(--hairline); border-radius:var(--r-xl);box-shadow:var(--shadow-lg);padding:var(--s-6);text-align:center} .modal__title{font-family:var(--font-display);font-size:var(--fs-h1);font-weight:800;color:var(--text-strong)} /* ========================================================== AD PLACEMENTS */ .ad-banner{display:flex;align-items:center;justify-content:center;gap:8px; height:56px;border-radius:var(--r-md);border:1px dashed var(--line-strong); background:var(--night-800);color:var(--text-faint);font-size:12px;font-weight:700;letter-spacing:.04em} .ad-banner__tag{font-size:9px;text-transform:uppercase;letter-spacing:.12em;padding:2px 6px; border-radius:var(--r-xs);background:var(--surface-2);color:var(--text-faint)} .ad-card{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line); background:var(--surface-2);padding:var(--s-4)} .ad-card__tag{position:absolute;top:8px;right:8px;font-size:9px;text-transform:uppercase;letter-spacing:.1em; color:var(--text-faint)} /* rewarded-video call to action */ .reward-cta{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-radius:var(--r-md); background:linear-gradient(180deg,rgba(244,192,73,.14),var(--surface));border:1px solid var(--hairline)} .reward-cta__ico{width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center;font-size:20px; background:linear-gradient(180deg,var(--brass-bright),var(--brass-deep));color:var(--on-brass)} /* ============================================================== BRACKET == Scheduled single-elimination tournament tree. ========================================================================= */ .bracket{display:flex;gap:var(--s-6);overflow-x:auto;padding:var(--s-2)} .bracket__round{display:flex;flex-direction:column;justify-content:space-around;gap:var(--s-4);min-width:180px} .bracket__round-title{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; color:var(--text-muted);margin-bottom:var(--s-2)} .bracket-node{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md); overflow:hidden} .bracket-node__row{display:flex;align-items:center;gap:8px;padding:8px 10px} .bracket-node__row + .bracket-node__row{border-top:1px solid var(--line)} .bracket-node__seed{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:11px;font-weight:800; color:var(--text-faint);width:16px} .bracket-node__name{flex:1;font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bracket-node__score{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-weight:800;color:var(--text-muted)} .bracket-node__row.is-winner{background:linear-gradient(90deg,rgba(40,194,160,.14),transparent)} .bracket-node__row.is-winner .bracket-node__name{color:var(--jade)} .bracket-node__row.is-winner .bracket-node__score{color:var(--jade)} .bracket-node__row.is-out{opacity:.5} .bracket-node--live{border-color:var(--hairline);box-shadow:0 0 0 1px var(--hairline),var(--shadow-brass)} /* ------------------------------------------------------------- ANIMATIONS */ @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(40,194,160,.55)}70%{box-shadow:0 0 0 8px rgba(40,194,160,0)}100%{box-shadow:0 0 0 0 rgba(40,194,160,0)}} @keyframes hintPulse{0%,100%{box-shadow:inset 0 0 0 3px rgba(244,192,73,.35)}50%{box-shadow:inset 0 0 0 4px rgba(244,192,73,.9)}} @keyframes floatIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .animate-in{animation:floatIn var(--dur-slow) var(--ease-out) both} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}