/* ============================================================
   RUIDO SCORES — LIQUID LAYER (proposal, not linked from index.html yet)
   Rounded, liquid, minimal: pill buttons with a round knob, warm glass plates with big radii,
   a floating nav pill. Loaded after style.css; remove this file to go back to the square look.
   ============================================================ */
:root{
  --taupe:#c6c1b6;                       /* warm grey from the user's pick */
  --glow-side:#c6c1b6;                   /* the side glows were green; now the same warm grey */
  --stone:#3d3b37;                       /* dark warm pill */
  --stone-2:#57544e;                     /* knob on the dark pill */
  --wglass:rgba(222,218,210,.42);        /* warm glass plate */
  --wedge:rgba(255,255,255,.75);
  --r-plate:40px; --r-card:26px; --r-pill:999px;
  /* dotted arrow, like the dot-matrix icon in the reference */
  --dots:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Ccircle cx='4' cy='12' r='1.5'/%3E%3Ccircle cx='8.5' cy='12' r='1.5'/%3E%3Ccircle cx='13' cy='12' r='1.5'/%3E%3Ccircle cx='17.5' cy='12' r='1.6'/%3E%3Ccircle cx='14' cy='7.5' r='1.5'/%3E%3Ccircle cx='14' cy='16.5' r='1.5'/%3E%3Ccircle cx='10.5' cy='4' r='1.3'/%3E%3Ccircle cx='10.5' cy='20' r='1.3'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- buttons: liquid pills with a round knob ---------- */
.blk{position:relative;min-width:0;height:60px;padding:0 7px 0 28px;gap:22px;align-items:center;border-radius:var(--r-pill);font:600 12px/1 var(--sans);letter-spacing:.16em}
/* a dotted arrow after the label, no circle around it */
.blk{padding:0 26px 0 30px;gap:16px}
.blk:after{content:"";flex:none;width:20px;height:20px;background:var(--ki);-webkit-mask:var(--dots) center/20px no-repeat;mask:var(--dots) center/20px no-repeat;transition:transform .2s ease}
.blk:hover:after{transform:translateX(3px)}
.blk.silver{--kn:var(--stone-2);--ki:#f4f2ee;background:linear-gradient(180deg,#4a4843,var(--stone));color:#f4f2ee;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 14px 34px rgba(40,36,30,.22)}
.blk.glass{--kn:rgba(198,193,182,.55);--ki:var(--ink);background:rgba(255,255,255,.5);color:var(--ink);box-shadow:inset 0 0 0 1px var(--wedge),inset 0 1.5px 0 #fff,0 14px 34px rgba(40,36,30,.10)}
.blk.sm{height:50px;padding:0 20px 0 24px;gap:12px;font-size:11px}
.blk.sm:after{width:16px;height:16px;-webkit-mask-size:16px;mask-size:16px}
.blk:hover{transform:translateY(-1px)}

/* ---------- nav: a floating pill ---------- */
.nav{inset:12px 12px auto;border-radius:var(--r-pill);padding:8px 8px 8px 22px;background:rgba(236,233,227,.55);border:0;box-shadow:inset 0 0 0 1px var(--wedge),0 10px 30px rgba(40,36,30,.08)}
.nav .blk.sm{height:42px;font-size:10.5px}
.sound{border-radius:var(--r-pill);height:42px;padding:0 16px;background:rgba(255,255,255,.45);box-shadow:inset 0 0 0 1px var(--wedge)}

/* ---------- plates: warm glass, big radii ---------- */
.gplate,.price{border-radius:var(--r-plate);overflow:hidden;background:var(--wglass);box-shadow:inset 0 0 0 1px var(--wedge),inset 0 1.5px 0 rgba(255,255,255,.9),0 30px 70px rgba(40,36,30,.10)}
.rule{height:1px;background:rgba(61,59,55,.14)}
.price .card{border-right:1px solid rgba(61,59,55,.12)}
.tags span,.caption .moods span{border-radius:var(--r-pill);border:0;padding:6px 14px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px var(--wedge)}

/* email form: one pill, button inside */
.form{border-radius:var(--r-pill);background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px var(--wedge);padding:6px;gap:6px;flex-wrap:nowrap}
.form input{border:0;background:none;min-height:50px;padding:0 18px;border-radius:var(--r-pill)}
.form .blk{height:50px}

/* players: round play buttons, rounded cards */
.pl .pb{border-radius:50%;background:rgba(198,193,182,.6)}
.pl.on .pb{background:var(--stone)}
.pgrid{gap:12px;background:none;border:0}
.pgrid .pl{border-radius:var(--r-card);background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px var(--wedge);padding:18px 20px}

/* album rail: rounded tiles floating above the bottom edge */
.rail{left:12px;right:12px;bottom:12px;gap:8px}
.rail button{border-radius:22px;padding:14px 18px 22px;background:rgba(236,233,227,.5)}
.rail button[aria-current=true]{background:var(--stone);color:#f4f2ee}
.rail button[aria-current=true] span{color:var(--taupe)}
.rail button i{display:none}
.ptext .listen{border-radius:var(--r-pill);background:var(--stone);color:#f4f2ee;padding:1.1em 1.6em;min-width:0}

/* inside: tree and app as rounded glass */
.tree{border-radius:var(--r-plate);background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px var(--wedge);padding:28px 32px}
.fold .freetag{border-radius:var(--r-pill);background:var(--taupe);padding:2px 8px}
.tree .file .dot{border-radius:50%}
.app video,.app img{border-radius:var(--r-card);outline:0;box-shadow:0 30px 70px rgba(40,36,30,.16)}

/* footage tryout */
.tselect{border-radius:var(--r-pill);height:50px;padding:0 20px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px var(--wedge)}
.tstage{border-radius:var(--r-plate);background:var(--wglass);box-shadow:inset 0 0 0 1px var(--wedge)}

/* questions: rounded rows */
.faq{border-top:0;display:flex;flex-direction:column;gap:10px}
.faq details{border:0;border-radius:var(--r-card);background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px var(--wedge);padding:22px 28px}
.faq summary:after{content:"";width:22px;height:22px;flex:none;background:var(--ink);-webkit-mask:var(--dots) center/16px no-repeat;mask:var(--dots) center/16px no-repeat;transform:rotate(90deg);transition:transform .2s ease}
.faq details[open] summary:after{content:"";transform:rotate(-90deg)}

/* footer: four rounded blocks */
footer{gap:0;padding:0 10px}
footer>div{padding:28px}
footer>div:first-child{border-top-left-radius:var(--r-plate)}
footer>div:last-child{border-top-right-radius:var(--r-plate)}
/* three blocks, in the user's order: warm grey, white, black */
footer .f1{background:var(--taupe);color:var(--ink)}
footer .f1 small{color:var(--soft)}
footer .f3{background:#fff}
footer .f4{background:var(--ink);color:#f4f2ee}

.logoswitch{border-radius:var(--r-pill);padding:4px}
.logoswitch button{border-radius:var(--r-pill)}
.logoswitch button[aria-pressed=true]{background:var(--stone);color:#f4f2ee}

/* promise: two lines, broken after "slowly," */
.promise .big{max-width:none}
.promise .big span{display:block}

/* ---------- option C: the warm grey #c6c1b6 is the page colour, type in black and white ---------- */
body.theme-c{
  --paper:#c4c4c1;
  --soft:#2c2a26;                         /* body text: near-black */
  --grey:rgba(28,29,27,.55);              /* small labels: black, softened */
  --line:rgba(28,29,27,.14);
  --silver:rgba(255,255,255,.55);         /* rules and dividers turn white */
  --glow-centre:#d6d1c7;
  --glow-side:#b5ae9f;
  --wglass:rgba(255,255,255,.22);
  --wedge:rgba(255,255,255,.6);
}
.theme-c .acc,.theme-c .free h2 .acc{color:#fff}           /* accent words in white */
.theme-c .nav{background:rgba(206,201,191,.62)}
.theme-c .nav nav a{color:rgba(28,29,27,.6)}
.theme-c .nav nav a:hover{color:var(--ink)}
.theme-c #plateShape{fill:#c4c4c1}                        /* the journey's cover plate matches the page */
.theme-c .rule{background:rgba(255,255,255,.5)}
.theme-c .counters{border-top-color:rgba(255,255,255,.6)}
.theme-c footer .f1{background:#d9d5cc}                   /* lifts off the grey page */