/* First-paint state --------------------------------------------------------
   These variables mirror the existing table themes so the very first frame
   already matches the saved Table preference. app.js keeps data-fcn-theme in
   sync after hydration and when the user changes Settings. */
html[data-fcn-theme="emerald"]{--felt1:#154333;--felt2:#08251d;--feltGlow:rgba(255,255,255,.065);--wood1:#18110c;--wood2:#080706}
html[data-fcn-theme="bordeaux"]{--felt1:#5a181d;--felt2:#25090d;--feltGlow:rgba(255,220,210,.08);--wood1:#24140e;--wood2:#0d0806}
html[data-fcn-theme="midnight"]{--felt1:#16283d;--felt2:#081321;--feltGlow:rgba(190,220,255,.09);--wood1:#141619;--wood2:#08090b}
html[data-fcn-theme="jade"]{--felt1:#1f3f2c;--felt2:#0b2418;--feltGlow:rgba(232,255,210,.085);--wood1:#24170f;--wood2:#0e0906}
html[data-fcn-theme="amber"]{--felt1:#6f4716;--felt2:#342008;--feltGlow:rgba(255,214,120,.10);--wood1:#3e2814;--wood2:#171009}
html[data-fcn-theme="graphite"]{--felt1:#34383f;--felt2:#1d2025;--feltGlow:rgba(196,208,224,.12);--wood1:#292421;--wood2:#11100f}

/* If a saved game exists, render the generic Resume row on the very first
   paint. The main bundle only replaces its metadata; it does not add a row,
   change menu height or replay the menu intro after hydration. Pointer input
   stays disabled for the tiny pre-hydration window, then app.js removes
   .hidden and restores the normal interactive rule. */
html[data-fcn-resume="true"] #fcnContinueBtn.hidden{display:grid!important;visibility:visible!important;pointer-events:none}

/* FreeCell Now cinematic UI layer.
   IMPORTANT: every visual selector in this file is namespaced with fcn-* so
   the legacy board/menu CSS cannot style these overlays accidentally. */

body.fcn-overlay-open{overflow:hidden!important}
.fcn-layer.hidden{display:none!important}
.fcn-layer{position:fixed;inset:0;z-index:90;overflow:hidden;color:#f7f1e6;font-family:"Manrope",sans-serif;background:var(--felt2);isolation:isolate}
/* Game-start/menu layers live inside .frame and must cover only the game stage,
   never the editorial content that follows .app in document flow. Global layers
   rendered outside .frame (Settings/Victory) remain fixed to the viewport. */
.frame > .fcn-layer{position:absolute}
.fcn-layer *{box-sizing:border-box}
.fcn-layer button,.fcn-layer input,.fcn-layer select{font:inherit}
.fcn-layer button,.fcn-layer a{touch-action:manipulation}
.fcn-layer a{color:inherit;text-decoration:none}

.fcn-field{position:absolute;inset:0;z-index:-4;background:
  radial-gradient(circle at 76% 10%,rgba(244,223,163,.12),transparent 24%),
  radial-gradient(circle at 9% 88%,color-mix(in srgb,var(--felt1) 72%,transparent),transparent 36%),
  linear-gradient(118deg,color-mix(in srgb,var(--felt2) 94%,#000) 0%,var(--felt1) 52%,color-mix(in srgb,var(--felt2) 88%,#000) 100%)}
.fcn-field::before{content:"";position:absolute;inset:-10%;background:repeating-linear-gradient(115deg,transparent 0 78px,rgba(255,255,255,.018) 79px 80px,transparent 81px 158px);transform:rotate(-4deg);opacity:.9}
.fcn-field::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,transparent 0 35%,rgba(0,0,0,.18) 76%,rgba(0,0,0,.48) 100%);pointer-events:none}
.fcn-sweep{position:absolute;left:48%;top:-22%;width:1px;height:150%;background:linear-gradient(transparent,rgba(244,223,163,.30),transparent);transform:rotate(14deg);z-index:-1}
.fcn-ghost-number{position:absolute;right:-.02em;bottom:-.16em;z-index:-2;font:700 min(31vw,440px)/.75 "Fraunces",serif;color:rgba(255,255,255,.025);pointer-events:none}

.fcn-shell{position:relative;width:min(1260px,calc(100% - 80px));height:100%;margin:auto;display:grid;grid-template-columns:minmax(340px,.9fr) minmax(500px,1.05fr);gap:clamp(48px,7vw,110px);align-items:center}
.fcn-kicker{margin:0 0 14px;color:var(--gold2);font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase}
.fcn-title{margin:0;color:#fffaf0;font:620 clamp(62px,7.2vw,112px)/.88 "Fraunces",serif;letter-spacing:normal}
.fcn-title-sub{display:block;margin-top:18px;color:rgba(246,240,229,.64);font:500 12px/1.5 "Manrope",sans-serif;letter-spacing:.12em;text-transform:uppercase}
.fcn-copy{max-width:500px;margin:27px 0 30px;color:rgba(246,240,229,.72);font-size:13px;line-height:1.72}
.fcn-close{position:absolute;right:clamp(22px,3vw,46px);top:clamp(20px,3vw,38px);z-index:10;width:44px;height:44px;border:1px solid rgba(244,223,163,.38);border-radius:50%;background:color-mix(in srgb,var(--felt2) 92%,#000);color:var(--gold2);font-size:24px;line-height:1;cursor:pointer;transition:transform .22s ease,border-color .22s ease,background .22s ease}
.fcn-close:hover,.fcn-close:focus-visible{transform:rotate(90deg);border-color:var(--gold2);outline:none;background:color-mix(in srgb,var(--felt1) 80%,#000)}

/* 3D playing-card art, shared by Splash/Main Menu/Victory. */
.fcn-card-art{position:absolute;z-index:-1;left:37%;top:4vh;width:min(520px,38vw);height:58vh;pointer-events:none;perspective:1100px;filter:drop-shadow(0 30px 45px rgba(0,0,0,.28))}
.fcn-art-card{position:absolute;left:50%;top:50%;width:clamp(132px,12.2vw,205px);aspect-ratio:.714;background:linear-gradient(135deg,#fbfaf6,#e7e0d1);border:1px solid rgba(38,42,39,.16);border-radius:clamp(9px,1vw,17px);box-shadow:0 36px 60px rgba(0,0,0,.42);overflow:hidden;transform-style:preserve-3d}
.fcn-art-card::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.55),transparent 32%,rgba(0,0,0,.04));pointer-events:none}
.fcn-art-card .fcn-rank{position:absolute;left:9%;top:6%;font:650 clamp(25px,3vw,49px)/.8 "Fraunces",serif}
.fcn-art-card .fcn-suit{position:absolute;left:10%;top:19%;font:600 clamp(20px,2.3vw,39px) "Fraunces",serif}
.fcn-art-card .fcn-big{position:absolute;inset:0;display:grid;place-items:center;font:600 clamp(60px,8vw,130px) "Fraunces",serif}
.fcn-art-card.fcn-black{color:#191d1b}.fcn-art-card.fcn-red{color:#a62b2f}
.fcn-art-card:nth-child(1){transform:translate(-98%,-45%) rotate(-17deg) translateZ(-25px)}
.fcn-art-card:nth-child(2){transform:translate(-48%,-55%) rotate(-2deg) translateZ(40px)}
.fcn-art-card:nth-child(3){transform:translate(5%,-44%) rotate(14deg) translateZ(-8px)}

/* Splash --------------------------------------------------------------- */
.fcn-splash{z-index:110}
.fcn-splash .fcn-field{background:
  radial-gradient(circle at 50% 33%,color-mix(in srgb,var(--felt1) 58%,transparent),transparent 28%),
  linear-gradient(130deg,color-mix(in srgb,var(--felt2) 96%,#000),color-mix(in srgb,var(--felt1) 72%,#000) 54%,color-mix(in srgb,var(--felt2) 92%,#000))}
.fcn-splash-inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:70px 28px 84px;text-align:center}
.fcn-splash-content{width:min(1120px,100%);display:flex;flex-direction:column;align-items:center;justify-content:center;transform:translateY(-1vh)}
.fcn-splash-suits{display:flex;gap:20px;margin:0 0 24px;color:rgba(244,223,163,.78);font:600 18px/1 "Fraunces",serif}
.fcn-splash-suits .fcn-red-suit{color:#d66a6f}
.fcn-splash-brand{margin:0;color:#fffaf0;font:640 clamp(54px,7.5vw,108px)/.9 "Fraunces",serif;letter-spacing:normal;text-wrap:balance}
.fcn-splash-context{margin:20px 0 0;color:var(--gold2);font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase}
.fcn-splash-heading{margin:9px 0 0;color:#fffaf0;font:570 clamp(22px,2.5vw,36px)/1.08 "Fraunces",serif;letter-spacing:normal;text-wrap:balance}
.fcn-splash-copy{max-width:650px;margin:15px auto 0;color:rgba(246,240,229,.68);font-size:13px;line-height:1.65}
.fcn-splash-stats{display:flex;gap:28px;margin:25px 0 0;padding:16px 24px;border-top:1px solid rgba(244,223,163,.18);border-bottom:1px solid rgba(244,223,163,.18);background:rgba(2,12,9,.28)}
.fcn-splash-stat{min-width:82px}.fcn-splash-stat span{display:block;color:rgba(246,240,229,.52);font-size:8px;letter-spacing:.14em;text-transform:uppercase}.fcn-splash-stat strong{display:block;margin-top:5px;color:#fff;font-size:17px;font-weight:650;font-variant-numeric:tabular-nums}
.fcn-splash-actions{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:28px;flex-wrap:wrap}
.fcn-primary{min-width:230px;height:54px;padding:0 25px;border:1px solid rgba(244,223,163,.40);background:var(--gold);color:#12140f;font-size:10px;font-weight:850;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:transform .18s ease,background .18s ease}
.fcn-primary:hover,.fcn-primary:focus-visible{transform:translateY(-1px);background:var(--gold2);outline:none}
.fcn-secondary{height:54px;padding:0 22px;border:1px solid rgba(246,240,229,.17);background:rgba(2,11,8,.58);color:#f5eee3;font-size:9px;font-weight:750;letter-spacing:.13em;text-transform:uppercase;cursor:pointer}
.fcn-secondary:hover,.fcn-secondary:focus-visible{border-color:rgba(244,223,163,.52);outline:none}
.fcn-splash-email-slot{display:flex;justify-content:center;min-height:11px;margin-top:15px}
.fcn-splash-email{display:inline-flex;align-items:center;gap:6px;color:rgba(246,240,229,.46);font-size:9px;font-weight:700;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 1s ease,color .18s ease}
.fcn-splash-email.is-visible{opacity:1;visibility:visible;pointer-events:auto}
.fcn-splash-email span{color:rgba(244,223,163,.64);transition:transform .18s ease}
.fcn-splash-email:hover,.fcn-splash-email:focus-visible{color:rgba(255,250,240,.86);outline:none}
.fcn-splash-email:hover span,.fcn-splash-email:focus-visible span{transform:translateX(2px)}
.fcn-splash-email[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){.fcn-splash-email{transition:color .18s ease}}
.fcn-splash-home{display:inline-block;margin-top:11px;color:rgba(246,240,229,.48);font-size:8px;font-weight:750;letter-spacing:.11em;text-transform:uppercase}
.fcn-splash-home:hover{color:#fff}

/* Main menu ------------------------------------------------------------ */
.fcn-main-menu{z-index:100}
@keyframes fcn-menu-title-in{from{opacity:0;transform:translate3d(-24px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes fcn-menu-panel-in{from{opacity:0;transform:translate3d(30px,0,0) scale(.985)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes fcn-menu-cards-in{from{opacity:0;transform:translate3d(42px,-12px,0) rotateY(-7deg) scale(.96)}to{opacity:1;transform:translate3d(0,0,0) rotateY(0) scale(1)}}
@keyframes fcn-menu-field-in{from{opacity:.25}to{opacity:1}}
.fcn-main-menu.fcn-menu-enter .fcn-field{animation:fcn-menu-field-in .55s ease-out both}
.fcn-main-menu.fcn-menu-enter .fcn-shell>div:first-child{animation:fcn-menu-title-in .52s cubic-bezier(.2,.72,.22,1) both}
.fcn-main-menu.fcn-menu-enter .fcn-main-list{animation:fcn-menu-panel-in .58s .06s cubic-bezier(.18,.72,.2,1) both}
.fcn-main-menu.fcn-menu-enter .fcn-card-art{animation:fcn-menu-cards-in .68s .02s cubic-bezier(.18,.72,.2,1) both}
.fcn-main-list{position:relative;z-index:2;background:linear-gradient(150deg,color-mix(in srgb,var(--felt1) 54%,#06110d),color-mix(in srgb,var(--felt2) 88%,#000));border:1px solid rgba(244,223,163,.26);box-shadow:0 30px 90px rgba(0,0,0,.48);padding:10px 22px}
.fcn-main-list::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--gold2),rgba(215,183,107,.12))}
.fcn-menu-panel{min-width:0}
.fcn-menu-item{width:100%;min-height:76px;padding:11px 8px;border:0;border-bottom:1px solid rgba(246,240,229,.105);background:transparent;color:#fff;display:grid;grid-template-columns:48px 1fr 35px;align-items:center;text-align:left;cursor:pointer;transition:background .18s ease,padding-left .18s ease}
a.fcn-menu-item{display:grid}
.fcn-menu-item:last-child{border-bottom:0}
.fcn-menu-continue{background:linear-gradient(90deg,rgba(215,183,107,.11),rgba(215,183,107,.025));border-bottom-color:rgba(244,223,163,.22)}
.fcn-menu-continue .fcn-menu-copy strong{color:var(--gold2)}
.fcn-menu-continue .fcn-menu-num{font-size:16px;letter-spacing:normal;color:var(--gold2)}
.fcn-menu-item:hover,.fcn-menu-item:focus-visible{padding-left:15px;background:rgba(215,183,107,.085);outline:none}
.fcn-menu-num{font-size:9px;font-weight:800;letter-spacing:.16em;color:rgba(244,223,163,.68)}
.fcn-menu-copy strong{display:block;color:#fffaf0;font:570 21px/1.05 "Fraunces",serif;letter-spacing:normal}
.fcn-menu-copy small{display:block;margin-top:6px;color:rgba(246,240,229,.74);font-size:13px;line-height:1.28;letter-spacing:normal}
.fcn-menu-arrow{color:var(--gold2);font-size:20px;text-align:right}
.fcn-menu-settings{margin-top:18px;padding:10px 0;border:0;background:transparent;color:rgba(246,240,229,1);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.fcn-menu-settings:hover,.fcn-menu-settings:focus-visible{color:#fff;outline:none}

/* Desktop-only media credit below Settings. */
.fcn-menu-pressline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;white-space:nowrap;pointer-events:none;font-family:"Manrope",sans-serif;font-size:9px;line-height:1;letter-spacing:.045em;text-transform:uppercase}
.fcn-menu-pressline__label{color:rgba(244,223,163,.76);font-weight:800;letter-spacing:.14em}
.fcn-menu-pressline__brand{color:rgba(246,240,229,.46);font-weight:700}
.fcn-menu-pressline__dot{color:rgba(246,240,229,.18);font-weight:600}
@media(max-width:1050px){.fcn-menu-pressline{display:none!important}}
.fcn-deal-block{padding:12px 8px 14px;border-bottom:1px solid rgba(246,240,229,.105)}
.fcn-deal-head{display:grid;grid-template-columns:48px 1fr 35px;align-items:center}
.fcn-deal-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin:11px 0 0 48px}
.fcn-deal-input{min-width:0;height:39px;padding:0 12px;border:1px solid rgba(246,240,229,.20);background:rgba(2,10,7,.72);color:#fffaf0;outline:none;font-size:13px;font-variant-numeric:tabular-nums;appearance:textfield}
.fcn-deal-input::-webkit-outer-spin-button,.fcn-deal-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.fcn-deal-input:focus{border-color:rgba(244,223,163,.58);box-shadow:0 0 0 2px rgba(215,183,107,.10)}
.fcn-deal-go{height:39px;padding:0 17px;border:1px solid rgba(244,223,163,.38);background:rgba(215,183,107,.13);color:var(--gold2);font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.fcn-deal-error{margin:7px 0 0 48px;color:#ef9a9d;font-size:10px}

/* Quick Game ----------------------------------------------------------- */
.fcn-quick-page{z-index:104}
.fcn-quick-page .fcn-shell{grid-template-columns:minmax(330px,.78fr) minmax(560px,1.22fr)}
.fcn-quick-board{position:relative;background:linear-gradient(150deg,color-mix(in srgb,var(--felt1) 54%,#06110d),color-mix(in srgb,var(--felt2) 90%,#000));border:1px solid rgba(244,223,163,.25);box-shadow:0 30px 90px rgba(0,0,0,.46);padding:12px 22px 18px}
.fcn-quick-board::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--gold2),rgba(215,183,107,.12))}
.fcn-quick-label{margin:0;padding:8px 2px 9px;color:rgba(244,223,163,.84);font-size:9px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.fcn-quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid rgba(246,240,229,.10);border-left:1px solid rgba(246,240,229,.10)}
.fcn-quick-choice{position:relative;min-width:0;min-height:112px;padding:18px 18px 16px;border:0;border-right:1px solid rgba(246,240,229,.10);border-bottom:1px solid rgba(246,240,229,.10);background:rgba(2,12,9,.16);color:#fff;text-align:left;cursor:pointer;transition:background .18s ease,transform .18s ease}
.fcn-quick-choice:hover,.fcn-quick-choice:focus-visible{background:rgba(215,183,107,.085);outline:none}
.fcn-quick-choice:active{transform:translateY(1px)}
.fcn-quick-choice:disabled,.fcn-quick-random:disabled{opacity:.48;cursor:wait}
.fcn-quick-choice>span{display:block;color:rgba(244,223,163,.58);font-size:8px;font-weight:800;letter-spacing:.16em}
.fcn-quick-choice>strong{display:block;margin-top:8px;color:#fffaf0;font:570 22px/1.05 "Fraunces",serif}
.fcn-quick-choice>small{display:block;margin-top:7px;color:rgba(246,240,229,.62);font-size:10px;line-height:1.3}
.fcn-quick-choice::after{content:"→";position:absolute;right:16px;top:50%;transform:translateY(-50%);color:rgba(215,183,107,.52);font-size:18px;opacity:0;transition:opacity .18s ease,right .18s ease}
.fcn-quick-choice:hover::after,.fcn-quick-choice:focus-visible::after{right:13px;opacity:1}
.fcn-quick-random{width:100%;min-height:78px;margin-top:12px;padding:10px 12px;border:1px solid rgba(244,223,163,.20);background:linear-gradient(90deg,rgba(215,183,107,.12),rgba(215,183,107,.025));color:#fff;display:grid;grid-template-columns:48px 1fr 35px;align-items:center;text-align:left;cursor:pointer;transition:background .18s ease,border-color .18s ease}
.fcn-quick-random:hover,.fcn-quick-random:focus-visible{background:linear-gradient(90deg,rgba(215,183,107,.18),rgba(215,183,107,.045));border-color:rgba(244,223,163,.38);outline:none}
.fcn-quick-random__mark{color:rgba(244,223,163,.58);font-family:"Manrope",sans-serif;font-size:8px;font-weight:800;line-height:1;letter-spacing:.16em;text-align:left}
.fcn-quick-random .fcn-menu-copy strong{font-size:20px}
.fcn-quick-random .fcn-menu-copy small{font-size:11px}
.fcn-quick-error{margin:11px 2px 0;color:#ef9a9d;font-size:10px;line-height:1.35}
.fcn-quick-note{max-width:420px;margin:24px 0 0;color:rgba(246,240,229,.48);font-size:10px;line-height:1.55}

/* Settings ------------------------------------------------------------- */
.fcn-settings{z-index:105}
.fcn-settings .fcn-shell{grid-template-columns:minmax(330px,.78fr) minmax(560px,1.22fr)}
.fcn-settings-board{position:relative;background:linear-gradient(150deg,color-mix(in srgb,var(--felt1) 54%,#06110d),color-mix(in srgb,var(--felt2) 90%,#000));border:1px solid rgba(244,223,163,.25);box-shadow:0 30px 90px rgba(0,0,0,.46);padding:15px 30px 18px}
.fcn-settings-group{margin-top:12px}.fcn-settings-group:first-child{margin-top:0}
.fcn-settings-label{margin:0;padding:8px 0 6px;color:rgba(244,223,163,.84);font-size:9px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.fcn-setting-row{min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid rgba(246,240,229,.10)}
.fcn-setting-copy{min-width:0}.fcn-setting-copy strong{display:block;color:#fffaf0;font:570 18px/1.15 "Fraunces",serif;letter-spacing:normal}.fcn-setting-copy small{display:block;margin-top:4px;color:rgba(246,240,229,.66);font-size:11px;line-height:1.4}
.fcn-select{height:36px;width:176px;min-width:176px;max-width:176px;flex:0 0 176px;padding:0 30px 0 10px;border:1px solid rgba(246,240,229,.20);border-radius:0;background:color-mix(in srgb,var(--felt2) 88%,#000);color:#f5eee4;font-size:11px;outline:none;cursor:pointer}
.fcn-select:focus{border-color:rgba(244,223,163,.60)}
.fcn-settings-preview{display:flex;align-items:center;gap:22px;margin-top:26px;max-width:390px;min-height:198px}
.fcn-settings-preview-stage{position:relative;flex:0 0 128px;width:128px;height:187px;perspective:900px}
.fcn-settings-preview-card{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(5deg) rotateY(-13deg);transition:transform .56s cubic-bezier(.2,.72,.2,1);will-change:transform}
.fcn-settings-preview[data-side="back"] .fcn-settings-preview-card{transform:rotateX(5deg) rotateY(167deg)}
.fcn-settings-preview-stage:hover .fcn-settings-preview-card{transform:rotateX(1deg) rotateY(-5deg) translateY(-2px)}
.fcn-settings-preview[data-side="back"] .fcn-settings-preview-stage:hover .fcn-settings-preview-card{transform:rotateX(1deg) rotateY(175deg) translateY(-2px)}
.fcn-settings-preview-face{position:absolute;inset:0;display:block;width:128px;height:187px;backface-visibility:hidden;-webkit-backface-visibility:hidden;filter:drop-shadow(0 18px 20px rgba(0,0,0,.30))}
.fcn-settings-preview-back{transform:rotateY(180deg)}
.fcn-settings-preview-shadow{position:absolute;left:17px;right:5px;bottom:-11px;height:17px;border-radius:50%;background:rgba(0,0,0,.30);filter:blur(8px);transform:rotate(-2deg);transition:opacity .3s ease,transform .56s cubic-bezier(.2,.72,.2,1);opacity:.82}
.fcn-settings-preview[data-side="back"] .fcn-settings-preview-shadow{transform:rotate(2deg) scaleX(.92)}
.fcn-settings-preview-caption{min-width:0;align-self:center}
.fcn-settings-preview-kicker{display:block;color:rgba(244,223,163,.68);font-size:8px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.fcn-settings-preview-caption strong{display:block;margin-top:6px;color:#fffaf0;font:570 21px/1.05 "Fraunces",serif}
.fcn-settings-preview-caption small{display:block;max-width:180px;margin-top:7px;color:rgba(246,240,229,.56);font-size:10px;line-height:1.45}
.fcn-switch{position:relative;flex:0 0 auto;width:48px;height:27px;border:1px solid rgba(255,255,255,.18);border-radius:20px;background:rgba(0,0,0,.42);cursor:pointer}
.fcn-switch::after{content:"";position:absolute;left:3px;top:3px;width:19px;height:19px;border-radius:50%;background:#84857e;transition:left .18s ease,background .18s ease}
.fcn-switch.on{border-color:rgba(215,183,107,.55);background:rgba(215,183,107,.16)}
.fcn-switch.on::after{left:24px;background:var(--gold2)}
.fcn-settings-note{margin:10px 0 0;color:rgba(246,240,229,.52);font-size:10px;line-height:1.45}
.fcn-settings-done{margin-top:14px;width:100%;height:44px;border:1px solid rgba(244,223,163,.32);background:var(--gold);color:#11160f;font-size:10px;font-weight:850;letter-spacing:.15em;text-transform:uppercase;cursor:pointer}
.fcn-settings-done:hover,.fcn-settings-done:focus-visible{background:var(--gold2);outline:none}

/* Victory -------------------------------------------------------------- */
.fcn-victory{z-index:108;height:100dvh;overflow:hidden}
.fcn-victory-inner{position:relative;z-index:2;height:100%;min-height:0;width:min(1220px,calc(100% - 80px));margin:auto;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:70px;padding:clamp(28px,6vh,62px) 0}
.fcn-victory-title{margin:10px 0 12px;color:#fffaf0;font:650 clamp(70px,9vw,148px)/.84 "Fraunces",serif;letter-spacing:normal}
.fcn-victory-summary{max-width:540px;color:rgba(246,240,229,.68);font-size:13px;line-height:1.65}
.fcn-result-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:26px;border-top:1px solid rgba(246,240,229,.13);border-bottom:1px solid rgba(246,240,229,.13)}
.fcn-result{padding:18px 16px 17px 0}.fcn-result span{display:block;color:rgba(246,240,229,.50);font-size:8px;letter-spacing:.14em;text-transform:uppercase}.fcn-result strong{display:block;margin-top:5px;color:#fffaf0;font:600 30px/1 "Fraunces",serif;font-variant-numeric:tabular-nums}
.fcn-record{margin:12px 0 0;color:var(--gold2);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.fcn-victory-actions{display:flex;gap:8px;margin-top:24px;flex-wrap:wrap}
.fcn-victory .win-newsletter{margin:22px 0 0;padding:16px 18px;border:1px solid rgba(244,223,163,.22);border-radius:0;background:rgba(2,11,8,.55)}
.fcn-victory .newsletter-form button[type="submit"]{white-space:nowrap}
.fcn-victory-art{position:relative;height:62vh;min-height:360px}.fcn-victory-art .fcn-card-art{left:0;top:2vh;width:100%;height:100%}

@media(prefers-reduced-motion:reduce){
  .fcn-main-menu.fcn-menu-enter .fcn-field,
  .fcn-main-menu.fcn-menu-enter .fcn-shell>div:first-child,
  .fcn-main-menu.fcn-menu-enter .fcn-main-list,
  .fcn-main-menu.fcn-menu-enter .fcn-card-art{animation:none!important}
}

@media(max-height:680px), (max-width:620px){
  .fcn-victory{overflow-y:auto;overscroll-behavior:contain}
  .fcn-victory-inner{height:auto;min-height:100dvh}
}

@media(max-width:1050px){
  .fcn-card-art{left:auto;right:-2vw;top:2vh;width:42vw;opacity:.5}
  .fcn-shell,.fcn-settings .fcn-shell,.fcn-quick-page .fcn-shell{width:min(92%,780px);grid-template-columns:1fr;gap:24px;align-content:center}
  .fcn-shell>div:first-child{position:relative;z-index:3}
  .fcn-copy{display:none}
  .fcn-main-menu .fcn-card-art{display:none}
  .fcn-victory-inner{grid-template-columns:1fr;width:min(92%,760px);padding:55px 0}.fcn-victory-art{display:none}
}
@media(max-height:720px) and (min-width:1051px){
  .fcn-title{font-size:68px}.fcn-copy{margin:17px 0 19px;font-size:11px}
  .fcn-menu-item{min-height:62px;padding-block:8px}.fcn-menu-copy strong{font-size:18px}.fcn-menu-copy small{font-size:11px;margin-top:3px}
  .fcn-deal-block{padding-block:8px}.fcn-deal-form{margin-top:7px}.fcn-deal-input,.fcn-deal-go{height:34px}
  .fcn-quick-choice{min-height:86px;padding:12px 14px}.fcn-quick-choice>strong{font-size:19px}.fcn-quick-random{min-height:62px}.fcn-quick-note{margin-top:14px}
  .fcn-setting-row{min-height:48px}.fcn-setting-copy small{display:none}.fcn-settings-label{padding:4px 0}.fcn-settings-board{padding-top:10px;padding-bottom:10px}.fcn-settings-done{height:37px;margin-top:8px}.fcn-settings-preview{margin-top:14px;min-height:148px}.fcn-settings-preview-stage{flex-basis:94px;width:94px;height:137px}.fcn-settings-preview-face{width:94px;height:137px}.fcn-settings-preview-caption small{display:none}
}
@media(max-width:620px){
  .fcn-shell,.fcn-settings .fcn-shell,.fcn-quick-page .fcn-shell{width:calc(100% - 28px)}
  .fcn-close{right:14px;top:14px;width:40px;height:40px}
  .fcn-kicker{font-size:8px}.fcn-title{font-size:48px}.fcn-title-sub{font-size:9px;margin-top:12px}
  .fcn-main-list{padding:7px 12px}.fcn-menu-item{grid-template-columns:34px 1fr 24px;min-height:68px;padding:9px 4px}.fcn-menu-copy strong{font-size:18px}.fcn-menu-copy small{font-size:11px;margin-top:4px}.fcn-menu-num{font-size:8px}.fcn-menu-arrow{font-size:17px}
  .fcn-deal-block{padding-inline:4px}.fcn-deal-head{grid-template-columns:34px 1fr 24px}.fcn-deal-form{margin-left:34px}.fcn-deal-error{margin-left:34px}
  .fcn-quick-board{padding:8px 12px 12px}.fcn-quick-label{padding:5px 2px 7px}.fcn-quick-choice{min-height:76px;padding:10px 11px}.fcn-quick-choice>strong{margin-top:5px;font-size:17px}.fcn-quick-choice>small{margin-top:4px;font-size:8px}.fcn-quick-choice::after{display:none}.fcn-quick-random{grid-template-columns:34px 1fr 24px;min-height:60px;margin-top:8px;padding-inline:5px}.fcn-quick-random__mark{font-size:8px}.fcn-quick-random .fcn-menu-copy strong{font-size:17px}.fcn-quick-random .fcn-menu-copy small{font-size:9px}.fcn-quick-note{display:none}
  .fcn-splash-inner{padding:58px 18px 74px}.fcn-splash-brand{font-size:clamp(46px,15vw,62px)}.fcn-splash-heading{font-size:24px}.fcn-splash-copy{font-size:11px}.fcn-splash-stats{gap:12px;padding:12px 14px}.fcn-splash-stat{min-width:66px}.fcn-primary{min-width:210px;height:49px}.fcn-secondary{height:49px}
  .fcn-settings-board{padding:9px 16px}.fcn-setting-row{min-height:52px}.fcn-setting-copy strong{font-size:16px}.fcn-setting-copy small{display:none}.fcn-select{width:142px;min-width:142px;max-width:142px;flex-basis:142px;font-size:10px}.fcn-settings-label{font-size:8px}.fcn-settings-preview{margin:8px 0 2px;min-height:0;gap:14px}.fcn-settings-preview-stage{flex-basis:66px;width:66px;height:96px}.fcn-settings-preview-face{width:66px;height:96px}.fcn-settings-preview-caption strong{font-size:17px}.fcn-settings-preview-caption small{display:none}
  .fcn-result-grid{grid-template-columns:repeat(3,1fr)}.fcn-result{padding-right:8px}.fcn-result strong{font-size:24px}.fcn-victory-title{font-size:62px}.fcn-victory-actions{flex-direction:column}.fcn-victory-actions .fcn-primary,.fcn-victory-actions .fcn-secondary{width:100%}
}


/* Mobile viewport resilience ----------------------------------------------
   Real mobile browser chrome reduces usable height versus desktop device
   emulation. Keep ordinary phones visually spacious and non-scrollable;
   compact only when height actually becomes tight. Scrolling is reserved for
   genuinely short viewports as a last-resort accessibility fallback. */
@media(max-width:620px){
  .fcn-main-menu,.fcn-settings,.fcn-quick-page{overflow:hidden}
  .fcn-main-menu .fcn-shell,.fcn-settings .fcn-shell,.fcn-quick-page .fcn-shell{
    height:100%;
    min-height:0;
    padding-top:max(10px,env(safe-area-inset-top));
    padding-bottom:max(10px,env(safe-area-inset-bottom));
  }
  /* Keep the menu visually generous while removing the two oversized vertical
     gaps around the Settings shortcut on real mobile viewports. */
  .fcn-main-menu .fcn-shell{gap:16px}
  .fcn-main-menu .fcn-menu-settings{margin-top:12px;padding:6px 0}
  .fcn-close{
    top:max(14px,env(safe-area-inset-top));
    right:max(14px,env(safe-area-inset-right));
  }
}

/* Settings carries more controls than the main menu, so it gets a gentle
   height-aware tightening first. This keeps a normal large phone from
   scrolling without making the screen feel compressed. */
@media(max-width:620px) and (max-height:780px){
  .fcn-quick-page .fcn-shell{gap:16px}
  .fcn-quick-page .fcn-title{font-size:44px}
  .fcn-quick-board{padding-top:6px;padding-bottom:10px}
  .fcn-quick-choice{min-height:70px;padding-block:8px}
  .fcn-quick-random{min-height:54px}
  .fcn-settings .fcn-shell{gap:18px}
  .fcn-settings .fcn-title{font-size:44px}
  .fcn-settings-board{padding:8px 15px 10px}
  .fcn-settings-group{margin-top:8px}
  .fcn-settings-label{padding:4px 0 3px}
  .fcn-setting-row{min-height:48px}
  .fcn-select{height:34px;width:138px;min-width:138px;max-width:138px;flex-basis:138px}
  .fcn-settings-preview{margin:5px 0 1px;gap:12px}
  .fcn-settings-preview-stage{flex-basis:60px;width:60px;height:88px}
  .fcn-settings-preview-face{width:60px;height:88px}
  .fcn-settings-preview-caption strong{font-size:16px}
  .fcn-settings-note{margin-top:7px}
  .fcn-settings-done{height:40px;margin-top:8px}
}

/* The main menu normally fits comfortably on modern phones. Only tighten it
   on genuinely shorter usable heights, and keep significantly more breathing
   room than the previous compact mode. */
@media(max-width:620px) and (max-height:720px){
  .fcn-main-menu .fcn-shell{gap:14px}
  .fcn-main-menu .fcn-kicker{margin-bottom:10px}
  .fcn-main-menu .fcn-title{font-size:46px}
  .fcn-main-menu .fcn-title-sub{margin-top:9px;font-size:9px;line-height:1.4}
  .fcn-menu-settings{margin-top:9px;padding:5px 0;font-size:10px}
  .fcn-main-list{padding:6px 11px}
  .fcn-menu-item{min-height:62px;padding:8px 4px}
  .fcn-menu-copy strong{font-size:18px}
  .fcn-menu-copy small{margin-top:3px;font-size:11px;line-height:1.25}
  .fcn-deal-block{padding-top:8px;padding-bottom:9px}
  .fcn-deal-form{margin-top:7px}
  .fcn-deal-input,.fcn-deal-go{height:36px}
}

/* Only very short viewports need internal scrolling. Start content from the
   safe top edge so nothing can be clipped above the scroll origin. */
@media(max-width:620px) and (max-height:620px){
  .fcn-main-menu,.fcn-settings,.fcn-quick-page{
    overflow-y:auto;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
  }
  .fcn-main-menu .fcn-shell,.fcn-settings .fcn-shell,.fcn-quick-page .fcn-shell{
    height:auto;
    min-height:100%;
    align-content:start;
    padding-top:max(18px,env(safe-area-inset-top));
    padding-bottom:max(18px,env(safe-area-inset-bottom));
  }
  .fcn-main-menu .fcn-shell{gap:14px}
  .fcn-main-menu .fcn-title{font-size:42px}
  .fcn-main-list{padding:4px 10px}
  .fcn-menu-item{min-height:56px;padding:6px 4px}
  .fcn-menu-copy strong{font-size:17px}
  .fcn-menu-copy small{margin-top:2px;font-size:10px}
  .fcn-deal-block{padding-top:6px;padding-bottom:7px}
  .fcn-deal-form{margin-top:5px}
  .fcn-deal-input,.fcn-deal-go{height:34px}

  .fcn-quick-page .fcn-shell{gap:12px}
  .fcn-quick-page .fcn-title{font-size:40px}
  .fcn-quick-choice{min-height:64px;padding-block:7px}
  .fcn-quick-random{min-height:50px}

  .fcn-settings .fcn-shell{gap:14px}
  .fcn-settings .fcn-title{font-size:40px}
  .fcn-settings-board{padding:6px 14px 8px}
  .fcn-settings-group{margin-top:6px}
  .fcn-setting-row{min-height:44px}
  .fcn-settings-preview-stage{flex-basis:54px;width:54px;height:79px}
  .fcn-settings-preview-face{width:54px;height:79px}
  .fcn-settings-note{margin-top:5px;font-size:9px}
  .fcn-settings-done{height:36px;margin-top:6px}
}

/* Render-safe stage -------------------------------------------------------
   Some automated mobile renderers expose an extremely tall viewport. The
   game UI normally fills 100dvh, which can place vertically-centered startup
   content thousands of pixels below the captured top of the page and can
   also make the WebGL board allocate an unnecessarily tall canvas.

   Keep ordinary phones/tablets untouched. Only narrow viewports taller than
   1800 CSS px use a bounded 1200px game stage. Because the startup/menu
   layers above are anchored to .frame, they stop at the same boundary and
   the editorial section remains visible immediately below the game stage. */
@media (max-width:900px) and (min-height:1800px){
  .app{height:1200px}
}