/* ============================================================================ Baraha Pa More — web design system. "Fiesta warmth meets competitive polish." Tokens extracted from the Flutter palette.dart / the Baraha Pa More.html spec: banig-teal felt tables, capiz-cream cards, narra wood, jeepney vermilion, gold. Two surfaces: warm CREAM lobby pages + green FELT game tables. ========================================================================== */ :root { /* Felt / table */ --felt-mid:#1C6259; --felt-deep:#123F3A; --felt-deeper:#134640; --felt-darkest:#0C332E; --felt-edge:#0D2F2A; --banig-deep:#144E48; /* Wood */ --narra:#6E3B2A; --narra-light:#8B4E38; --clay:#8A3D2E; /* Cream / cards / paper */ --cream:#F4ECD8; --cream-dim:#EFE4CC; --card-top:#FFFEFA; --card-bottom:#F5EEDC; --sampaguita:#FBF7EE; --paper:#FBF6EA; /* Ink */ --ink:#241C17; --ink-soft:#6B5D4F; --muted:#9A9186; /* Accents */ --vermilion:#E8532B; --vermilion-deep:#C7401E; --gold:#E7A928; --gold-bright:#F2C14E; --gold-pale:#F8DA77; --gold-deep:#C6870F; /* Semantic */ --win:#3F9E6A; --win-mint:#83DBCB; --warning:#D8462F; --info:#3E7CB1; --parol:#C43C7A; --teal:#2E8C7C; /* Card ink */ --card-red:#B4342A; --card-black:#241C17; --card-edge:#241C17; --suit-spade:#241C17; --suit-heart:#B4342A; --suit-diamond:#3E7CB1; --suit-club:#2E7D46; /* Text roles (on cream) */ --text:#241C17; --text-soft:#6B5D4F; --text-faint:rgba(36,28,23,.45); --on-felt:#F4ECD8; --on-felt-soft:rgba(244,236,216,.72); --on-vermilion:#FFF6EF; --on-gold:#3A2708; /* Lines */ --line:rgba(36,28,23,.10); --line-strong:rgba(36,28,23,.18); --hairline:rgba(231,169,40,.30); /* Radius / spacing */ --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px; --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; /* Elevation */ --shadow-sm:0 1px 3px rgba(36,20,10,.14); --shadow-md:0 8px 22px rgba(36,20,10,.16); --shadow-lg:0 20px 52px rgba(24,14,6,.28); --shadow-cta:0 8px 22px rgba(232,83,43,.35); --shadow-gold:0 8px 22px rgba(231,169,40,.32); --edge-top:inset 0 1px 0 rgba(255,255,255,.55); /* Type */ --font-display:"Nunito","SF Pro Rounded","Baloo 2",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-text:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --fs-display:32px; --fs-h1:25px; --fs-h2:20px; --fs-h3:17px; --fs-body:15px; --fs-sm:13px; --fs-xs:11px; /* Motion + texture */ --ease:cubic-bezier(.2,.7,.25,1); --ease-out:cubic-bezier(.16,1,.3,1); --dur-fast:120ms; --dur:200ms; --dur-slow:340ms; --banig:repeating-linear-gradient(45deg, rgba(110,59,42,.05) 0 2px, transparent 2px 9px), repeating-linear-gradient(-45deg, rgba(231,169,40,.04) 0 2px, transparent 2px 9px); } /* Dark mode — a warm dark palette. The FELT tables + the playing CARDS stay as they are (cards are always cream paper); only the cream LOBBY surfaces, text, lines and shadows flip. Toggled via (see settings). */ :root[data-theme="dark"]{ color-scheme: dark; --cream:#17120E; /* page base */ --cream-dim:#1F1812; /* app-shell gradient */ --sampaguita:#241C15; /* panels / cards / rows */ --paper:#1F1812; --text:#F4ECD8; --text-soft:rgba(244,236,216,.66); --text-faint:rgba(244,236,216,.40); --on-cream:#F4ECD8; --line:rgba(244,236,216,.10); --line-strong:rgba(244,236,216,.18); --hairline:rgba(231,169,40,.34); --shadow-sm:0 1px 3px rgba(0,0,0,.5); --shadow-md:0 8px 22px rgba(0,0,0,.5); --shadow-lg:0 20px 52px rgba(0,0,0,.62); --edge-top:inset 0 1px 0 rgba(255,255,255,.06); } :root[data-theme="dark"] body{background:var(--cream)} /* the switch's off-state track reads better on dark */ :root[data-theme="dark"] .sw[aria-checked="false"]{background:rgba(244,236,216,.16)!important} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{font-family:var(--font-text);font-size:var(--fs-body);line-height:1.45;color:var(--text); background:var(--cream);-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)} :focus-visible{outline:2px solid var(--vermilion);outline-offset:2px;border-radius:var(--r-xs)} ::selection{background:rgba(232,83,43,.22)} /* ── type + utilities ─────────────────────────────────────────────────────── */ .display{font-family:var(--font-display);font-size:var(--fs-display);font-weight:800;letter-spacing:-.02em;line-height:1.05} .h1{font-family:var(--font-display);font-weight:800;font-size:var(--fs-h1);line-height:1.12} .h2{font-family:var(--font-display);font-weight:800;font-size:var(--fs-h2)} .h3{font-family:var(--font-display);font-weight:800;font-size:var(--fs-h3)} .sm{font-size:var(--fs-sm)} .xs{font-size:var(--fs-xs)} .muted{color:var(--text-soft)} .faint{color:var(--text-faint)} .gold-text{color:var(--gold-deep)} .vermilion-text{color:var(--vermilion)} .uppercase{text-transform:uppercase;letter-spacing:.09em;font-weight:800} .center{text-align:center} .tnum{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1} .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} .grow{flex:1 1 auto} .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)} .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)} .divider{height:1px;background:var(--line);border:0} .banig{background-image:var(--banig)} .pill{border-radius:var(--r-pill)} /* ── app shell ────────────────────────────────────────────────────────────── */ html,body{height:100%} body{overflow:hidden} #app{position:fixed;inset:0;display:grid;place-items:center;background:#2A1E14} .app-shell{position:relative;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden; background:linear-gradient(180deg,var(--cream),var(--cream-dim))} @media (min-width:540px){ #app{padding:24px} .app-shell{width:min(430px,100%);height:min(920px,calc(100vh - 48px));border-radius:38px; box-shadow:var(--shadow-lg),inset 0 0 0 1px rgba(255,255,255,.5)} } /* Tablet frame when the display genuinely has room, mirroring the Flutter tablet layer. Below this the phone frame above still applies, so a laptop at 1440x900 gets the tablet and a small window keeps the phone. Height is in the query on purpose: a wide-but-short window (a half-screen split) would otherwise get a tablet-width shell squashed to 400px tall. */ @media (min-width:900px) and (min-height:760px){ .app-shell{width:min(760px,100%);height:min(1024px,calc(100vh - 48px));border-radius:26px} /* The screens are authored as a phone column; letting body content sprawl to 760px leaves single-line rows stranded across the full width. Cap the column and centre it, and let the TABLE surfaces use the whole frame. */ .screen__body{align-items:center} .screen__body>*{width:100%;max-width:560px} .screen--felt .screen__body>*{max-width:none} } .stage{position:relative;flex:1;display:flex;min-height:0} .stage>.screen{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden} .screen.fade-in{animation:screenIn var(--dur) var(--ease-out) both} @keyframes screenIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .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)} .screen__body>*{flex-shrink:0} .screen__body::-webkit-scrollbar{width:0} /* app bar */ .appbar{display:flex;align-items:center;gap:var(--s-3); padding:calc(env(safe-area-inset-top,0px) + var(--s-4)) var(--s-4) var(--s-3)} .appbar__title{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:800;flex:1} .appbar__sub{font-size:var(--fs-xs);color:var(--text-soft);margin-top:1px} .iconbtn{width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r-md); background:rgba(36,28,23,.06);color:var(--text);font-size:18px} .iconbtn:hover{background:rgba(36,28,23,.10)} /* tab bar */ .tabbar{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(--cream-dim),rgba(239,228,204,.6));border-top:1px solid var(--line)} .tab{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted); font-size:10px;font-weight:800;letter-spacing:.02em;padding:4px 10px;border-radius:var(--r-md)} .tab__ico{font-size:20px;line-height:1} .tab.is-active{color:var(--vermilion)} .tabbar.is-hidden{display:none} /* ── buttons ──────────────────────────────────────────────────────────────── */ .btn{--_bg:var(--sampaguita);--_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);border:1px solid var(--line); transition:transform var(--dur-fast) var(--ease),filter var(--dur) var(--ease)} .btn:active{transform:translateY(1px) scale(.99)} .btn:hover{filter:brightness(1.03)} .btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none} .btn--block{display:flex;width:100%} .btn--lg{height:56px;font-size:17px} .btn--sm{height:38px;font-size:13px;padding:0 var(--s-4);border-radius:var(--r-sm)} .btn-primary{--_fg:var(--on-vermilion);--_sh:var(--shadow-cta);border-color:transparent; background:linear-gradient(180deg,#F4693E,var(--vermilion) 60%,var(--vermilion-deep))} .btn-gold{--_fg:var(--on-gold);--_sh:var(--shadow-gold);border-color:transparent; background:linear-gradient(180deg,var(--gold-bright),var(--gold) 58%,var(--gold-deep))} .btn-ghost{--_bg:transparent;--_sh:none;border:1px solid var(--line-strong);color:var(--text)} .btn-felt{--_fg:var(--on-felt);--_bg:rgba(244,236,216,.12);border-color:rgba(244,236,216,.2)} /* ── panels / cards / chips ───────────────────────────────────────────────── */ .panel{background:var(--sampaguita);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--shadow-md),var(--edge-top);padding:var(--s-4)} .panel--gold{border-color:var(--hairline);background:linear-gradient(180deg,rgba(231,169,40,.10),var(--sampaguita))} .panel__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s-3)} .panel__title{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:800} .chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--r-pill); font-size:12px;font-weight:800;background:rgba(36,28,23,.06);color:var(--text-soft);border:1px solid var(--line)} .chip--gold{background:rgba(231,169,40,.16);color:var(--gold-deep);border-color:var(--hairline)} .chip--vermilion{background:rgba(232,83,43,.14);color:var(--vermilion);border-color:rgba(232,83,43,.3)} .chip--felt{background:rgba(0,0,0,.28);color:var(--on-felt);border-color:rgba(244,236,216,.2)} .chip__dot{width:8px;height:8px;border-radius:50%;background:currentColor} .badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill); font-size:11px;font-weight:800;color:var(--on-vermilion);background:var(--vermilion)} /* currency chip (Barya / Ginto) */ .wallet{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 6px 0 4px;border-radius:var(--r-pill); background:var(--sampaguita);border:1px solid var(--line);font-weight:800;font-size:13px} .wallet__ico{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px; background:radial-gradient(circle at 35% 30%,var(--gold-bright),var(--gold-deep));color:var(--on-gold)} .wallet__ico--ginto{background:radial-gradient(circle at 35% 30%,#E9E9EF,#9AA0AE);color:#2A2A33} .wallet__add{width:18px;height:18px;border-radius:50%;background:var(--vermilion);color:#fff;font-size:13px; display:grid;place-items:center;margin-left:2px} /* avatar */ .avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none; font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--on-gold); background:linear-gradient(135deg,var(--gold-bright),var(--gold-deep));box-shadow:var(--edge-top)} .avatar--sm{width:34px;height:34px;font-size:13px} .avatar--lg{width:66px;height:66px;font-size:24px} /* segmented */ .segmented{display:flex;gap:4px;padding:4px;background:rgba(36,28,23,.06);border-radius:var(--r-md)} .segmented__item{flex:1;padding:8px 6px;border-radius:var(--r-sm);text-align:center;color:var(--text-soft); font-size:13px;font-weight:800;transition:all var(--dur) var(--ease)} .segmented__item.is-active{background:var(--vermilion);color:var(--on-vermilion);box-shadow:var(--shadow-cta)} /* list row */ .list-row{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4); background:var(--sampaguita);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:800;font-size:14px} .list-row__sub{font-size:12px;color:var(--text-soft)} .list-row--tappable:hover{background:var(--cream)} /* toast */ #toast{position:absolute;left:50%;bottom:96px;transform:translateX(-50%) translateY(12px);z-index:60; max-width:84%;padding:10px 16px;border-radius:var(--r-pill);background:var(--ink);color:var(--sampaguita); font-size:13px;font-weight:700;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none; transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)} #toast.is-shown{opacity:1;transform:translateX(-50%) translateY(0)} /* boot */ #boot{position:absolute;inset:0;z-index:100;display:grid;place-items:center; background:linear-gradient(180deg,var(--cream),var(--cream-dim));transition:opacity var(--dur-slow) var(--ease)} #boot.is-gone{opacity:0;pointer-events:none} #boot .boot__mark{width:92px;height:92px;animation:pop var(--dur-slow) var(--ease-out) both} #boot .boot__word{font-family:var(--font-display);font-weight:800;font-size:24px;margin-top:10px;text-align:center} #boot .boot__word small{display:block;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);margin-top:2px} @keyframes pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}} @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}}